Global theme default props support (#1796)

* Support empty dates for the DatePicker

* Support empty dates for TimePicker

* Support empty dates for mobile toobars

* Support empty dates in YearSelection

* Introduce `toolbarPlaceholder` prop for customization of empty date text

* Add tests

* Do not dispatch `changeFocusedDay` on each mount

* Fix crashes when rendering empty date with luxon and moment

* [TimePicker] Do not throw validation error if value={null}

* Update props description for TimePicker validation props

* Rename text props to match convention for built-in localization

* Update using props in examples

* Implement withDefaultProps HO

* Fix not working CSS overrides typescript example

* Add tests for overrides typings

* Implement typings for global overrides

* Implement default props support for all Pickers components

* Add default props support for all the components

* Fix build errors and properly reexport all props

* Remove duplicated `renderInput` prop

* Annulate date-io linked type for documentation

* Run typescript tests on CI

.circleci/config.yml

@@ -65,6 +65,9 @@ jobs:
       - run:
           name: Typescript
           command: yarn workspaces run build:typescript
+      - run:
+          name: Run typescript tests
+          command: yarn workspace @material-ui/pickers run test:typescript
       - run:
           name: Build and analyze bundlesize
           command: yarn workspace @material-ui/pickers build:analyze

docs/layout/PageWithContext.tsx

@@ -37,6 +37,8 @@ const createCustomMuiTheme = (theme: ThemeType, direction: Theme['direction']) =
       secondary: orange,
       type: theme,
     },
+    overrides: {},
+    props: {},
   });
 };
 
@@ -105,7 +107,7 @@ export const PageWithContexts: React.SFC<Props> = ({
     >
       <ThemeProvider theme={muiTheme}>
         <SnackbarProvider maxSnack={3}>
-          <LocalizationProvider dateAdapter={utilsMap[lib]}>
+          <LocalizationProvider dateAdapter={utilsMap[lib] as any}>
             <ThemeContext.Provider value={theme}>
               <UtilsContext.Provider value={createUtilsService(lib)}>
                 <CssBaseline />

docs/package.json

@@ -8,7 +8,7 @@
     "build": "next build",
     "start": "next start -p 3001",
     "generate-backers": "node scripts/generate-backers.js",
-    "build:typescript": "tsc -p tsconfig.json && tsc -p tsconfig.js.json"
+    "build:typescript": "tsc"
   },
   "keywords": [],
   "author": "",

docs/pages/demo/daterangepicker/MinMaxDateRangePicker.example.tsx

@@ -19,6 +19,7 @@ function MinMaxDateRangePicker() {
     <DateRangePicker
       disablePast
       value={selectedRange}
+      // @ts-ignore
       maxDate={getWeeksAfter(selectedRange[0], 4)}
       onChange={date => handleDateChange(date)}
       renderInput={(startProps, endProps) => (

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

@@ -29,15 +29,15 @@ function TimeValidation() {
         renderInput={props => <TextField {...props} />}
         ampm={false}
         label="Disable odd hours"
+        value={selectedDate}
+        onChange={date => handleDateChange(date)}
         shouldDisableTime={(timeValue, clockType) => {
           if (clockType === 'hours' && timeValue % 2) {
             return true;
           }
 
           return false;
         }}
-        value={selectedDate}
-        onChange={date => handleDateChange(date)}
       />
     </Fragment>
   );

docs/pages/guides/CssOverrides.example.jsx → docs/pages/guides/CssOverrides.example.tsx

@@ -1,9 +1,8 @@
-// @ts-nocheck
 import React, { useState } from 'react';
 import lightBlue from '@material-ui/core/colors/lightBlue';
 import { TextField } from '@material-ui/core';
-import { DatePicker } from '@material-ui/pickers';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core';
+import { DatePicker, DatePickerProps } from '@material-ui/pickers';
 
 const materialTheme = createMuiTheme({
   overrides: {
@@ -28,11 +27,11 @@ const materialTheme = createMuiTheme({
       dayDisabled: {
         color: lightBlue['100'],
       },
-      current: {
+      today: {
         color: lightBlue['900'],
       },
     },
-    MuiPickersModal: {
+    MuiPickersModalDialog: {
       dialogAction: {
         color: lightBlue['400'],
       },
@@ -41,16 +40,17 @@ const materialTheme = createMuiTheme({
 });
 
 function CssOverrides() {
-  const [selectedDate, handleDateChange] = useState(new Date());
+  const [selectedDate, handleDateChange] = useState<DatePickerProps['value']>(new Date());
 
   return (
     <ThemeProvider theme={materialTheme}>
       <DatePicker
         renderInput={props => <TextField {...props} />}
         label="Light blue picker"
         value={selectedDate}
-        onChange={handleDateChange}
-        shouldDisableDate={day => day.getDay() === 0}
+        onChange={date => handleDateChange(date)}
+        // @ts-ignore
+        shouldDisableDate={day => day && day.getDay() === 0}
       />
     </ThemeProvider>
   );

docs/pages/guides/FormikOurValidation.example.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import TextField from '@material-ui/core/TextField';

docs/pages/guides/FormikValidationSchema.example.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react';
 import { date, object } from 'yup';
 import { Grid } from '@material-ui/core';

docs/pages/guides/css-overrides.mdx

@@ -43,15 +43,12 @@ This will also autocomplete classnames.
 
 Add the following to a TypeScript declaration file in your project, such as `overrides-mui.d.ts`:
 
-```typescript
-import { Overrides } from '@material-ui/core/styles/overrides';
-import { MuiPickersOverrides } from '@material-ui/pickers/typings/overrides';
+<!-- should be in sync with lib/src/__tests__/typings.d.ts -->
 
-type overridesNameToClassKey = {
-  [P in keyof MuiPickersOverrides]: keyof MuiPickersOverrides[P];
-};
+```typescript
+import { MuiPickersComponentsToClassName } from '@material-ui/pickers/src/typings/overrides';
 
 declare module '@material-ui/core/styles/overrides' {
-  export interface ComponentNameToClassKey extends overridesNameToClassKey {}
+  export interface ComponentNameToClassKey extends MuiPickersComponentsToClassName {}
 }
 ```

docs/pages/regression/Regression.tsx

@@ -6,7 +6,6 @@ import { TextField, TextFieldProps } from '@material-ui/core';
 import { createRegressionDay as createRegressionDayRenderer } from './RegressionDay';
 import { MuiPickersContext, DateRangePicker, DateRangeDelimiter } from '@material-ui/pickers';
 import {
-  DateRange,
   MobileDatePicker,
   DesktopDatePicker,
   MobileTimePicker,
@@ -19,8 +18,8 @@ const makeRenderInputProp = (overrideProps: Omit<Partial<TextFieldProps>, 'varia
 
 function Regression() {
   const utils = useContext(MuiPickersContext);
-  const [range, changeRange] = useState<DateRange>([new Date('2019-01-01T00:00:00.000'), null]);
-  const [date, changeDate] = useState<Date | null>(new Date('2019-01-01T00:00:00.000'));
+  const [range, changeRange] = useState<any>([new Date('2019-01-01T00:00:00.000'), null]);
+  const [date, changeDate] = useState<any>(new Date('2019-01-01T00:00:00.000'));
 
   const sharedProps = {
     value: date,
@@ -60,18 +59,8 @@ function Regression() {
           {...sharedProps}
           mask="__"
         />
-        <MobileDatePicker
-          renderInput={props => <TextField {...props} />}
-          disabled
-          {...makeRenderInputProp({ id: 'disabled' })}
-          {...sharedProps}
-        />
-        <MobileDatePicker
-          renderInput={props => <TextField {...props} />}
-          readOnly
-          {...makeRenderInputProp({ id: 'readonly' })}
-          {...sharedProps}
-        />
+        <MobileDatePicker disabled {...makeRenderInputProp({ id: 'disabled' })} {...sharedProps} />
+        <MobileDatePicker readOnly {...makeRenderInputProp({ id: 'readonly' })} {...sharedProps} />
       </Grid>
 
       <Typography align="center" variant="h4" component="span" gutterBottom>

docs/tsconfig.json

@@ -15,9 +15,10 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
+    "esModuleInterop": true,
     "rootDir": ".",
     "target": "esnext",
     "resolveJsonModule": true
   },
-  "include": ["../docs/**/*.ts*", "./typings.d.ts", "../lib/typings.d.ts"]
+  "include": ["./typings.d.ts", "../docs/**/*.ts*"]
 }