Views refactoring (mui#1044)

* Created base <Picker /> component for rendering all possible views

* Recreate TimePicker with new <Picker /> component

* Add TimePicker toolbar and fully replace old TimePickerRoot

* Fix not generating docs when exported several components

* Redo DatePicker on <Picker />

* Grand Views Refactoring

* Fix Root-Pickers tests

* Fix ts errors

* Fix Object(...) is not a function error

* Fix loosing selected meridiem

* Use wildcard import rather than default import (mui#1038)

* [mui#1031] Fix className of ClockNumber selected state (mui#1045)

* Bugfix/spread input props (mui#1046)

* [mui#1031] Fix className of ClockNumber selected state

* [mui#1039] Fix not passing down InputProps

* Make InputProps not required

* Redo DateTimePickerToolbar to use grid

* Get rid of 'selected' and 'disabled' classes

* Fix console warnings

docs/_shared/Example.tsx

@@ -8,13 +8,13 @@ import { GITHUB_EDIT_URL } from '_constants';
 import { replaceGetFormatStrings } from 'utils/utilsService';
 import { withSnackbar, InjectedNotistackProps } from 'notistack';
 import { withUtilsService, UtilsContext } from './UtilsServiceContext';
-import { makeStyles, Theme, IconButton, Collapse, Tooltip } from '@material-ui/core';
+import { makeStyles, IconButton, Collapse, Tooltip } from '@material-ui/core';
 
 interface Props extends InjectedNotistackProps {
   source: { raw: string; relativePath: string; default: React.FC<any> };
 }
 
-const useStyles = makeStyles<Theme>(theme => ({
+const useStyles = makeStyles(theme => ({
   exampleTitle: {
     marginBottom: 8,
     '@media(max-width: 600px)': {

docs/_shared/svgIcons/Logo.tsx

@@ -1,9 +1,8 @@
-import { Theme } from '@material-ui/core';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@material-ui/core/styles';
 
 // ! This is very handcrafted svg for SSR. Don't make your logos this way 🤦🤦‍🤦‍
 const Logo: React.FC = () => {
-  const theme = useTheme<Theme>();
+  const theme = useTheme();
   return (
     <svg width="200px" height="200px" viewBox="0 0 40 40" version="1.1">
       <defs />

docs/pages/demo/datepicker/BasicDatePicker.example.jsx

@@ -30,7 +30,7 @@ function BasicDatePicker(props) {
           dateFns: 'dd/MM/yyyy',
         })}
         label="Date of birth"
-        views={['year', 'month', 'day']}
+        views={['year', 'month', 'date']}
         value={selectedDate}
         onChange={handleDateChange}
       />

docs/pages/demo/datepicker/InlineDatePicker.example.jsx

@@ -14,7 +14,7 @@ function InlineDatePickerDemo(props) {
       />
 
       <DatePicker
-        onlyCalendar
+        disableToolbar
         variant="inline"
         label="Only calendar"
         helperText="No year selection"

docs/pages/demo/datetime-picker/CustomDateTimePicker.example.jsx

@@ -13,9 +13,8 @@ function CustomDateTimePicker(props) {
       <DateTimePicker
         autoOk
         disableFuture
+        hideTabs
         ampm={false}
-        showTabs={false}
-        autoSubmit={false}
         value={selectedDate}
         onChange={handleDateChange}
         allowKeyboardControl={false}

docs/pages/demo/timepicker/SecondsTimePicker.example.jsx

@@ -7,18 +7,20 @@ function SecondsTimePicker() {
   return (
     <Fragment>
       <TimePicker
-        seconds
-        format="hh:mm:ss a"
+        ampm={false}
+        openTo="hours"
+        views={['hours', 'minutes', 'seconds']}
+        format="HH:mm:ss"
         label="With seconds"
         value={selectedDate}
         onChange={handleDateChange}
       />
 
       <TimePicker
-        seconds
-        ampm={false}
-        format="HH:mm:ss"
-        label="24 hours"
+        openTo="minutes"
+        views={['minutes', 'seconds']}
+        format="mm:ss"
+        label="Minutes and seconds"
         value={selectedDate}
         onChange={handleDateChange}
       />

docs/pages/guides/upgrading-to-v3.mdx

@@ -119,6 +119,7 @@ So less `any` from our side :)
 
 #### 🙈 Misc
 - Improved accessibility by making toolbar button actually focusable `<button />`
+- Rename `onlyCalendar` prop to `disableToolbar`
 - Remove `withUtils` hoc, and provide `useUtils` hoc
 - Remove `BasePicker` hoc, and provide `usePickerState` and `useKeyboardPickerState` hooks
 - Remove `openToYearSelection` prop in favor of `openTo`

docs/pages/index/Landing.tsx

@@ -10,9 +10,9 @@ import Devices from '@material-ui/icons/DevicesOther';
 import PatreonSponsors from '_shared/PatreonSponsors';
 import { GITHUB_URL } from '_constants';
 import { LandingProperty } from './LandingProperty';
-import { Button, Paper, Typography, Theme, Toolbar, Grid, makeStyles } from '@material-ui/core';
+import { Button, Paper, Typography, Toolbar, Grid, makeStyles } from '@material-ui/core';
 
-const useStyles = makeStyles<Theme>(theme => ({
+const useStyles = makeStyles(theme => ({
   logoContainer: {
     width: 228,
     backgroundColor: 'white',

docs/pages/index/LandingProperty.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { SvgIconProps } from '@material-ui/core/SvgIcon';
-import { Typography, makeStyles, Paper, Theme } from '@material-ui/core';
+import { Typography, makeStyles, Paper } from '@material-ui/core';
 
 interface LandingPropertyProps {
   title: string;
   description: string;
   icon: React.ComponentType<SvgIconProps>;
 }
 
-const useStyles = makeStyles<Theme>({
+const useStyles = makeStyles({
   propertyContainer: {
     display: 'flex',
     flexDirection: 'column',

docs/pages/regression/index.tsx

@@ -39,7 +39,7 @@ function Regression() {
         <KeyboardDatePicker
           id="keyboard-mask-datepicker"
           {...sharedProps}
-          onChange={date => changeDate(date)}
+          onChange={changeDate}
           format="MM/dd/yyyy"
         />
         <DatePicker disabled id="disabled" {...sharedProps} />