From d9c7277dbcd2f315f22bfeb002d02ea5ec51aedb Mon Sep 17 00:00:00 2001
From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
Date: Sat, 9 May 2020 13:49:25 +0300
Subject: [PATCH 1/6] Improve input customization exprience and add new
 examples

---
 .../datepicker/AdvancedKeyboard.example.jsx   | 28 -------------------
 .../demo/datepicker/CustomInput.example.jsx   | 28 +++++++++++++++++++
 docs/pages/demo/datepicker/index.mdx          |  8 +++---
 .../CustomRangeInputs.example.tsx             | 22 +++++++++++++++
 docs/pages/demo/daterangepicker/index.mdx     |  8 ++++++
 .../DateRangePicker/DateRangePickerInput.tsx  |  6 +++-
 lib/src/_shared/PureDateInput.tsx             | 12 +++++---
 lib/src/_shared/hooks/useMaskedInput.tsx      | 27 ++++++++++--------
 8 files changed, 90 insertions(+), 49 deletions(-)
 delete mode 100644 docs/pages/demo/datepicker/AdvancedKeyboard.example.jsx
 create mode 100644 docs/pages/demo/datepicker/CustomInput.example.jsx
 create mode 100644 docs/pages/demo/daterangepicker/CustomRangeInputs.example.tsx

diff --git a/docs/pages/demo/datepicker/AdvancedKeyboard.example.jsx b/docs/pages/demo/datepicker/AdvancedKeyboard.example.jsx
deleted file mode 100644
index eb9f10150..000000000
--- a/docs/pages/demo/datepicker/AdvancedKeyboard.example.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { Fragment, useState } from 'react';
-import EventNoteIcon from '@material-ui/icons/EventNote';
-import { TextField } from '@material-ui/core';
-import { DesktopDatePicker } from '@material-ui/pickers';
-
-function AdvancedKeyboardExample(props) {
-  const [selectedDate, handleDateChange] = useState(new Date());
-
-  return (
-    <Fragment>
-      <DesktopDatePicker
-        autoOk
-        label="Advanced keyboard"
-        inputFormat={props.__willBeReplacedGetFormatString({
-          moment: 'YYYY/MM/DD',
-          dateFns: 'yyyy/MM/dd',
-        })}
-        mask="____/__/__"
-        openPickerIcon={<EventNoteIcon />}
-        value={selectedDate}
-        onChange={date => handleDateChange(date)}
-        renderInput={props => <TextField {...props} variant="outlined" />}
-      />
-    </Fragment>
-  );
-}
-
-export default AdvancedKeyboardExample;
diff --git a/docs/pages/demo/datepicker/CustomInput.example.jsx b/docs/pages/demo/datepicker/CustomInput.example.jsx
new file mode 100644
index 000000000..ecd54c9e0
--- /dev/null
+++ b/docs/pages/demo/datepicker/CustomInput.example.jsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { styled } from '@material-ui/core';
+import { DesktopDatePicker } from '@material-ui/pickers';
+
+const InputContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+function CustomInput() {
+  const [selectedDate, handleDateChange] = useState(new Date());
+
+  return (
+    <DesktopDatePicker
+      label="Advanced keyboard"
+      value={selectedDate}
+      onChange={date => handleDateChange(date)}
+      renderInput={({ ref, inputProps, InputProps }) => (
+        <InputContainer ref={ref}>
+          <input {...inputProps} />
+          {InputProps.endAdornment}
+        </InputContainer>
+      )}
+    />
+  );
+}
+
+export default CustomInput;
diff --git a/docs/pages/demo/datepicker/index.mdx b/docs/pages/demo/datepicker/index.mdx
index e46155515..b137262e3 100644
--- a/docs/pages/demo/datepicker/index.mdx
+++ b/docs/pages/demo/datepicker/index.mdx
@@ -10,7 +10,7 @@ import * as ViewsDatePicker from './ViewsDatePicker.example';
 import * as BasicDatePicker from './BasicDatePicker.example';
 import * as StaticDatePicker from './StaticDatePicker.example';
 import * as DatePickers from './DatePickers.example';
-import * as AdvancedKeyboard from './AdvancedKeyboard.example';
+import * as CustomInput from './CustomInput.example';
 
 <PageMeta component="DatePicker" />
 
@@ -53,11 +53,11 @@ For that use `StaticDatePicker`.
   <Example paddingBottom source={StaticDatePicker} />
 </Hidden>
 
-#### Advanced keyboard input
+#### Custom input component
 
-We are providing default localized formats, but you can change this behaviour with `format` and `mask` props.
+You can customize rendering input by `renderInput` prop. But make sure you will spread `ref` and `inputProps` correctly to the custom input component.
 
-<Example source={AdvancedKeyboard} />
+<Example source={CustomInput} />
 
 #### Customization
 
diff --git a/docs/pages/demo/daterangepicker/CustomRangeInputs.example.tsx b/docs/pages/demo/daterangepicker/CustomRangeInputs.example.tsx
new file mode 100644
index 000000000..7206bc4ee
--- /dev/null
+++ b/docs/pages/demo/daterangepicker/CustomRangeInputs.example.tsx
@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { DateRangePicker, DateRange } from '@material-ui/pickers';
+
+function CustomRangeInputs() {
+  const [selectedDate, handleDateChange] = useState<DateRange>([null, null]);
+
+  return (
+    <DateRangePicker
+      label="Advanced keyboard"
+      value={selectedDate}
+      onChange={date => handleDateChange(date)}
+      renderInput={(startProps, endProps) => (
+        <>
+          <input ref={startProps.ref as React.Ref<HTMLInputElement>} {...startProps.inputProps} />
+          <input ref={endProps.ref as React.Ref<HTMLInputElement>} {...endProps.inputProps} />
+        </>
+      )}
+    />
+  );
+}
+
+export default CustomRangeInputs;
diff --git a/docs/pages/demo/daterangepicker/index.mdx b/docs/pages/demo/daterangepicker/index.mdx
index 07296a39c..433988733 100644
--- a/docs/pages/demo/daterangepicker/index.mdx
+++ b/docs/pages/demo/daterangepicker/index.mdx
@@ -9,6 +9,7 @@ import * as ResponsiveDateRangePicker from './ResponsiveDateRangePicker.example'
 import * as MinMaxDateRangePicker from './MinMaxDateRangePicker.example';
 import * as CalendarsDateRangePicker from './CalendarsDateRangePicker.example';
 import * as StaticDateRangePicker from './StaticDateRangePicker.example';
+import * as CustomRangeInputs from './CustomRangeInputs.example';
 
 <PageMeta component="DateRangePicker" />
 
@@ -43,6 +44,13 @@ Disabling dates performs just like in simple `DatePicker`
 
 <Example source={MinMaxDateRangePicker} />
 
+#### Custom input component
+
+You can customize rendering input by `renderInput` prop. For `DateRangePicker` it takes **2** parameters – for start and end input respectively.
+So if you need to render custom input make sure you will spread `ref` and `inputProps` correctly to the input components.
+
+<Example source={CustomRangeInputs} />
+
 #### Static mode
 
 It is possible to render any picker without modal or popper. For that use `StaticDateRangePicker`.
diff --git a/lib/src/DateRangePicker/DateRangePickerInput.tsx b/lib/src/DateRangePicker/DateRangePickerInput.tsx
index 41b7d22da..5bdb56933 100644
--- a/lib/src/DateRangePicker/DateRangePickerInput.tsx
+++ b/lib/src/DateRangePicker/DateRangePickerInput.tsx
@@ -7,8 +7,8 @@ import { CurrentlySelectingRangeEndProps } from './RangeTypes';
 import { useMaskedInput } from '../_shared/hooks/useMaskedInput';
 import { DateRangeValidationError } from '../_helpers/date-utils';
 import { WrapperVariantContext } from '../wrappers/WrapperVariantContext';
-import { DateInputProps, MuiTextFieldProps } from '../_shared/PureDateInput';
 import { mergeRefs, executeInTheNextEventLoopTick } from '../_helpers/utils';
+import { DateInputProps, MuiTextFieldProps } from '../_shared/PureDateInput';
 
 export const useStyles = makeStyles(
   theme => ({
@@ -147,6 +147,8 @@ export const DateRangePickerInput: React.FC<DateRangeInputProps> = ({
       ref: startRef,
       variant: 'outlined',
       focused: open && currentlySelectingRangeEnd === 'start',
+    },
+    inputProps: {
       onClick: !openOnFocus ? openRangeStartSelection : undefined,
       onFocus: openOnFocus ? openRangeStartSelection : undefined,
     },
@@ -164,6 +166,8 @@ export const DateRangePickerInput: React.FC<DateRangeInputProps> = ({
       ref: endRef,
       variant: 'outlined',
       focused: open && currentlySelectingRangeEnd === 'end',
+    },
+    inputProps: {
       onClick: !openOnFocus ? openRangeEndSelection : undefined,
       onFocus: openOnFocus ? openRangeEndSelection : undefined,
     },
diff --git a/lib/src/_shared/PureDateInput.tsx b/lib/src/_shared/PureDateInput.tsx
index 005ecbbdb..b54d4f268 100644
--- a/lib/src/_shared/PureDateInput.tsx
+++ b/lib/src/_shared/PureDateInput.tsx
@@ -123,11 +123,15 @@ export const PureDateInput: React.FC<DateInputProps & DateInputRefs> = ({
     ref: containerRef,
     inputRef: forwardedRef,
     error: validationError,
-    'aria-label': getOpenDialogAriaText(rawValue, utils),
-    onClick: onOpen,
-    value: inputValue,
     InputProps: PureDateInputProps,
-    onKeyDown: onSpaceOrEnter(onOpen),
+    inputProps: {
+      disabled,
+      'aria-readonly': true,
+      'aria-label': getOpenDialogAriaText(rawValue, utils),
+      value: inputValue,
+      onClick: onOpen,
+      onKeyDown: onSpaceOrEnter(onOpen),
+    },
     ...TextFieldProps,
   });
 };
diff --git a/lib/src/_shared/hooks/useMaskedInput.tsx b/lib/src/_shared/hooks/useMaskedInput.tsx
index 939db0261..8dfda76f6 100644
--- a/lib/src/_shared/hooks/useMaskedInput.tsx
+++ b/lib/src/_shared/hooks/useMaskedInput.tsx
@@ -21,7 +21,7 @@ type MaskedInputProps = Omit<
   | 'disableOpenPicker'
   | 'getOpenDialogAriaText'
   | 'OpenPickerButtonProps'
->;
+> & { inputProps?: Partial<React.HTMLProps<HTMLInputElement>> };
 
 export function useMaskedInput({
   disableMaskedInput,
@@ -37,6 +37,7 @@ export function useMaskedInput({
   readOnly,
   TextFieldProps,
   label,
+  inputProps,
 }: MaskedInputProps): MuiTextFieldProps {
   const utils = useUtils();
   const isFocusedRef = React.useRef(false);
@@ -99,23 +100,25 @@ export function useMaskedInput({
       };
 
   return {
-    ...inputStateArgs,
     label,
     disabled,
-    placeholder: formatHelperText,
     error: validationError,
     helperText: formatHelperText,
     // @ts-ignore ??? fix typings for textfield finally
     'data-mui-test': 'keyboard-date-input',
-    inputProps: { readOnly, type: shouldUseMaskedInput ? 'tel' : 'text' },
+    inputProps: {
+      ...inputStateArgs,
+      disabled, // make spreading in custom input easier
+      placeholder: formatHelperText,
+      readOnly,
+      type: shouldUseMaskedInput ? 'tel' : 'text',
+      ...inputProps,
+      onFocus: createDelegatedEventHandler(
+        () => (isFocusedRef.current = true),
+        inputProps?.onFocus
+      ),
+      onBlur: createDelegatedEventHandler(() => (isFocusedRef.current = false), inputProps?.onBlur),
+    },
     ...TextFieldProps,
-    onFocus: createDelegatedEventHandler(
-      () => (isFocusedRef.current = true),
-      TextFieldProps?.onFocus
-    ),
-    onBlur: createDelegatedEventHandler(
-      () => (isFocusedRef.current = false),
-      TextFieldProps?.onBlur
-    ),
   };
 }

From e20f7f225d4c7fa701c3be6671a24420aaf47f5e Mon Sep 17 00:00:00 2001
From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
Date: Sat, 9 May 2020 13:50:27 +0300
Subject: [PATCH 2/6] Remove data-mui-test from renderInput props

---
 lib/src/_shared/hooks/useMaskedInput.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/src/_shared/hooks/useMaskedInput.tsx b/lib/src/_shared/hooks/useMaskedInput.tsx
index 8dfda76f6..b53059c6e 100644
--- a/lib/src/_shared/hooks/useMaskedInput.tsx
+++ b/lib/src/_shared/hooks/useMaskedInput.tsx
@@ -104,8 +104,6 @@ export function useMaskedInput({
     disabled,
     error: validationError,
     helperText: formatHelperText,
-    // @ts-ignore ??? fix typings for textfield finally
-    'data-mui-test': 'keyboard-date-input',
     inputProps: {
       ...inputStateArgs,
       disabled, // make spreading in custom input easier

From a31811c4fad337b090f5cdbf8778d3587841018b Mon Sep 17 00:00:00 2001
From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
Date: Sat, 9 May 2020 14:07:32 +0300
Subject: [PATCH 3/6] Add missing prop-types for new props

---
 lib/.size-snapshot.json                       | 24 +++++++++----------
 lib/src/DateRangePicker/DateRangePicker.tsx   |  9 +++++++
 .../DateRangePicker/DateRangePickerInput.tsx  |  3 +++
 .../DateRangePicker/DateRangePickerView.tsx   |  6 +++++
 lib/src/Picker/Picker.tsx                     |  2 +-
 lib/src/_shared/KeyboardDateInput.tsx         |  3 ++-
 lib/src/_shared/PureDateInput.tsx             |  4 ++--
 lib/src/constants/prop-types.ts               | 12 +++++++++-
 lib/src/wrappers/DesktopWrapper.tsx           |  2 +-
 9 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/lib/.size-snapshot.json b/lib/.size-snapshot.json
index 8d9e7fb85..d46a11d91 100644
--- a/lib/.size-snapshot.json
+++ b/lib/.size-snapshot.json
@@ -1,26 +1,26 @@
 {
   "build/dist/material-ui-pickers.esm.js": {
-    "bundled": 188938,
-    "minified": 101335,
-    "gzipped": 26402,
+    "bundled": 189931,
+    "minified": 102080,
+    "gzipped": 26573,
     "treeshaked": {
       "rollup": {
-        "code": 83375,
-        "import_statements": 2121
+        "code": 83455,
+        "import_statements": 2143
       },
       "webpack": {
-        "code": 92851
+        "code": 92970
       }
     }
   },
   "build/dist/material-ui-pickers.umd.js": {
-    "bundled": 299832,
-    "minified": 116954,
-    "gzipped": 33374
+    "bundled": 300723,
+    "minified": 117352,
+    "gzipped": 33511
   },
   "build/dist/material-ui-pickers.umd.min.js": {
-    "bundled": 258486,
-    "minified": 107815,
-    "gzipped": 30601
+    "bundled": 258901,
+    "minified": 107874,
+    "gzipped": 30626
   }
 }
diff --git a/lib/src/DateRangePicker/DateRangePicker.tsx b/lib/src/DateRangePicker/DateRangePicker.tsx
index 41a036469..5b6d04b66 100644
--- a/lib/src/DateRangePicker/DateRangePicker.tsx
+++ b/lib/src/DateRangePicker/DateRangePicker.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { date } from '../constants/prop-types';
 import { useUtils } from '../_shared/hooks/useUtils';
 import { MobileWrapper } from '../wrappers/MobileWrapper';
 import { DateRangeInputProps } from './DateRangePickerInput';
@@ -128,6 +130,13 @@ export function makeRangePicker<TWrapper extends SomeWrapper>(Wrapper: TWrapper)
     );
   }
 
+  RangePickerWithStateAndWrapper.propTypes = {
+    value: PropTypes.arrayOf(date).isRequired,
+    onChange: PropTypes.func.isRequired,
+    startText: PropTypes.node,
+    endText: PropTypes.node,
+  };
+
   return React.forwardRef<
     HTMLDivElement,
     React.ComponentProps<typeof RangePickerWithStateAndWrapper>
diff --git a/lib/src/DateRangePicker/DateRangePickerInput.tsx b/lib/src/DateRangePicker/DateRangePickerInput.tsx
index 5bdb56933..3b90e6628 100644
--- a/lib/src/DateRangePicker/DateRangePickerInput.tsx
+++ b/lib/src/DateRangePicker/DateRangePickerInput.tsx
@@ -3,6 +3,7 @@ import { RangeInput, DateRange } from './RangeTypes';
 import { useUtils } from '../_shared/hooks/useUtils';
 import { makeStyles } from '@material-ui/core/styles';
 import { MaterialUiPickersDate } from '../typings/date';
+import { inputPropTypes } from '../constants/prop-types';
 import { CurrentlySelectingRangeEndProps } from './RangeTypes';
 import { useMaskedInput } from '../_shared/hooks/useMaskedInput';
 import { DateRangeValidationError } from '../_helpers/date-utils';
@@ -183,3 +184,5 @@ export const DateRangePickerInput: React.FC<DateRangeInputProps> = ({
     </div>
   );
 };
+
+DateRangePickerInput.propTypes = inputPropTypes;
diff --git a/lib/src/DateRangePicker/DateRangePickerView.tsx b/lib/src/DateRangePicker/DateRangePickerView.tsx
index 705a362a0..eda98ca70 100644
--- a/lib/src/DateRangePicker/DateRangePickerView.tsx
+++ b/lib/src/DateRangePicker/DateRangePickerView.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as PropTypes from 'prop-types';
 import { isRangeValid } from '../_helpers/date-utils';
 import { MaterialUiPickersDate } from '../typings/date';
 import { BasePickerProps } from '../typings/BasePicker';
@@ -212,3 +213,8 @@ export const DateRangePickerView: React.FC<DateRangePickerViewProps> = ({
     </div>
   );
 };
+
+DateRangePickerView.propTypes = {
+  disableAutoMonthSwitching: PropTypes.bool,
+  calendars: PropTypes.oneOf([1, 2, 3]),
+};
diff --git a/lib/src/Picker/Picker.tsx b/lib/src/Picker/Picker.tsx
index 123f027a8..92a59683d 100644
--- a/lib/src/Picker/Picker.tsx
+++ b/lib/src/Picker/Picker.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import KeyboardDateInput from '../_shared/KeyboardDateInput';
 import { useViews } from '../_shared/hooks/useViews';
 import { makeStyles } from '@material-ui/core/styles';
 import { DateTimePickerView } from '../DateTimePicker';
@@ -8,6 +7,7 @@ import { ParsableDate } from '../constants/prop-types';
 import { BasePickerProps } from '../typings/BasePicker';
 import { MaterialUiPickersDate } from '../typings/date';
 import { DatePickerView } from '../DatePicker/DatePicker';
+import { KeyboardDateInput } from '../_shared/KeyboardDateInput';
 import { useIsLandscape } from '../_shared/hooks/useIsLandscape';
 import { DIALOG_WIDTH, VIEW_HEIGHT } from '../constants/dimensions';
 import { WrapperVariantContext } from '../wrappers/WrapperVariantContext';
diff --git a/lib/src/_shared/KeyboardDateInput.tsx b/lib/src/_shared/KeyboardDateInput.tsx
index a3f6bee27..608042922 100644
--- a/lib/src/_shared/KeyboardDateInput.tsx
+++ b/lib/src/_shared/KeyboardDateInput.tsx
@@ -4,6 +4,7 @@ import InputAdornment from '@material-ui/core/InputAdornment';
 import { useUtils } from './hooks/useUtils';
 import { CalendarIcon } from './icons/CalendarIcon';
 import { useMaskedInput } from './hooks/useMaskedInput';
+import { inputPropTypes } from '../constants/prop-types';
 import { DateInputProps, DateInputRefs } from './PureDateInput';
 import { getTextFieldAriaText } from '../_helpers/text-field-helper';
 
@@ -50,4 +51,4 @@ export const KeyboardDateInput: React.FC<DateInputProps & DateInputRefs> = ({
   });
 };
 
-export default KeyboardDateInput;
+KeyboardDateInput.propTypes = inputPropTypes;
diff --git a/lib/src/_shared/PureDateInput.tsx b/lib/src/_shared/PureDateInput.tsx
index b54d4f268..1d4e81ab5 100644
--- a/lib/src/_shared/PureDateInput.tsx
+++ b/lib/src/_shared/PureDateInput.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { onSpaceOrEnter } from '../_helpers/utils';
-import { ParsableDate } from '../constants/prop-types';
 import { MaterialUiPickersDate } from '../typings/date';
 import { TextFieldProps } from '@material-ui/core/TextField';
 import { IconButtonProps } from '@material-ui/core/IconButton';
 import { useUtils, MuiPickersAdapter } from './hooks/useUtils';
+import { ParsableDate, inputPropTypes } from '../constants/prop-types';
 import { InputAdornmentProps } from '@material-ui/core/InputAdornment';
 import { getDisplayDate, getTextFieldAriaText } from '../_helpers/text-field-helper';
 
@@ -136,4 +136,4 @@ export const PureDateInput: React.FC<DateInputProps & DateInputRefs> = ({
   });
 };
 
-PureDateInput.displayName = 'PureDateInput';
+PureDateInput.propTypes = inputPropTypes;
diff --git a/lib/src/constants/prop-types.ts b/lib/src/constants/prop-types.ts
index 15ffe4d8e..ca47c3bb6 100644
--- a/lib/src/constants/prop-types.ts
+++ b/lib/src/constants/prop-types.ts
@@ -1,7 +1,7 @@
 import * as PropTypes from 'prop-types';
 import { MaterialUiPickersDate } from '../typings/date';
 
-const date = PropTypes.oneOfType([
+export const date = PropTypes.oneOfType([
   PropTypes.object,
   PropTypes.string,
   PropTypes.number,
@@ -17,3 +17,13 @@ export const DomainPropTypes = { date, datePickerView };
 export const defaultMinDate = new Date('1900-01-01');
 
 export const defaultMaxDate = new Date('2100-01-01');
+
+export const inputPropTypes = {
+  renderInput: PropTypes.func.isRequired,
+  mask: PropTypes.string,
+  rifmFormatter: PropTypes.func,
+  openPickerIcon: PropTypes.node,
+  OpenPickerButtonProps: PropTypes.object,
+  acceptRegex: PropTypes.instanceOf(RegExp),
+  getOpenDialogAriaText: PropTypes.func,
+};
diff --git a/lib/src/wrappers/DesktopWrapper.tsx b/lib/src/wrappers/DesktopWrapper.tsx
index 9e67fc289..029b40c78 100644
--- a/lib/src/wrappers/DesktopWrapper.tsx
+++ b/lib/src/wrappers/DesktopWrapper.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import KeyboardDateInput from '../_shared/KeyboardDateInput';
 import Popover, { PopoverProps } from '@material-ui/core/Popover';
 import { WrapperProps } from './Wrapper';
 import { StaticWrapperProps } from './StaticWrapper';
@@ -8,6 +7,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { InnerMobileWrapperProps } from './MobileWrapper';
 import { WrapperVariantContext } from './WrapperVariantContext';
 import { IS_TOUCH_DEVICE_MEDIA } from '../constants/dimensions';
+import { KeyboardDateInput } from '../_shared/KeyboardDateInput';
 import { InnerDesktopPopperWrapperProps } from './DesktopPopperWrapper';
 
 export interface InnerDesktopWrapperProps {

From 7c5ec036490859d6aa1ec7f6f9691357864859e0 Mon Sep 17 00:00:00 2001
From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
Date: Sun, 10 May 2020 15:00:24 +0300
Subject: [PATCH 4/6] Remove inputProps import to properly treeskahe in
 production

---
 lib/.size-snapshot.json                       | 22 +++++++------------
 .../DateRangePicker/DateRangePickerInput.tsx  | 12 ++++++++--
 lib/src/_shared/KeyboardDateInput.tsx         | 12 ++++++++--
 lib/src/_shared/PureDateInput.tsx             | 13 +++++++++--
 lib/src/constants/prop-types.ts               | 10 ---------
 5 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/lib/.size-snapshot.json b/lib/.size-snapshot.json
index 3b65f6140..a48f2f19b 100644
--- a/lib/.size-snapshot.json
+++ b/lib/.size-snapshot.json
@@ -1,27 +1,21 @@
 {
   "build/dist/material-ui-pickers.esm.js": {
-
-    "bundled": 189105,
-    "minified": 101411,
-    "gzipped": 26429,
+    "bundled": 190258,
+    "minified": 102356,
+    "gzipped": 26649,
     "treeshaked": {
       "rollup": {
-        "code": 83443,
+        "code": 83408,
         "import_statements": 2121
       },
       "webpack": {
-        "code": 92919
+        "code": 92884
       }
     }
   },
   "build/dist/material-ui-pickers.umd.js": {
-    "bundled": 300017,
-    "minified": 117022,
-    "gzipped": 33387
-  },
-  "build/dist/material-ui-pickers.umd.min.js": {
-    "bundled": 258671,
-    "minified": 107883,
-    "gzipped": 30626
+    "bundled": 301162,
+    "minified": 117618,
+    "gzipped": 33567
   }
 }
diff --git a/lib/src/DateRangePicker/DateRangePickerInput.tsx b/lib/src/DateRangePicker/DateRangePickerInput.tsx
index 3b90e6628..8804ed2e3 100644
--- a/lib/src/DateRangePicker/DateRangePickerInput.tsx
+++ b/lib/src/DateRangePicker/DateRangePickerInput.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
+import * as PropTypes from 'prop-types';
 import { RangeInput, DateRange } from './RangeTypes';
 import { useUtils } from '../_shared/hooks/useUtils';
 import { makeStyles } from '@material-ui/core/styles';
 import { MaterialUiPickersDate } from '../typings/date';
-import { inputPropTypes } from '../constants/prop-types';
 import { CurrentlySelectingRangeEndProps } from './RangeTypes';
 import { useMaskedInput } from '../_shared/hooks/useMaskedInput';
 import { DateRangeValidationError } from '../_helpers/date-utils';
@@ -185,4 +185,12 @@ export const DateRangePickerInput: React.FC<DateRangeInputProps> = ({
   );
 };
 
-DateRangePickerInput.propTypes = inputPropTypes;
+DateRangePickerInput.propTypes = {
+  acceptRegex: PropTypes.instanceOf(RegExp),
+  getOpenDialogAriaText: PropTypes.func,
+  mask: PropTypes.string,
+  OpenPickerButtonProps: PropTypes.object,
+  openPickerIcon: PropTypes.node,
+  renderInput: PropTypes.func.isRequired,
+  rifmFormatter: PropTypes.func,
+};
diff --git a/lib/src/_shared/KeyboardDateInput.tsx b/lib/src/_shared/KeyboardDateInput.tsx
index 608042922..9238321ad 100644
--- a/lib/src/_shared/KeyboardDateInput.tsx
+++ b/lib/src/_shared/KeyboardDateInput.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
+import * as PropTypes from 'prop-types';
 import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import { useUtils } from './hooks/useUtils';
 import { CalendarIcon } from './icons/CalendarIcon';
 import { useMaskedInput } from './hooks/useMaskedInput';
-import { inputPropTypes } from '../constants/prop-types';
 import { DateInputProps, DateInputRefs } from './PureDateInput';
 import { getTextFieldAriaText } from '../_helpers/text-field-helper';
 
@@ -51,4 +51,12 @@ export const KeyboardDateInput: React.FC<DateInputProps & DateInputRefs> = ({
   });
 };
 
-KeyboardDateInput.propTypes = inputPropTypes;
+KeyboardDateInput.propTypes = {
+  renderInput: PropTypes.func.isRequired,
+  mask: PropTypes.string,
+  rifmFormatter: PropTypes.func,
+  openPickerIcon: PropTypes.node,
+  OpenPickerButtonProps: PropTypes.object,
+  acceptRegex: PropTypes.instanceOf(RegExp),
+  getOpenDialogAriaText: PropTypes.func,
+};
diff --git a/lib/src/_shared/PureDateInput.tsx b/lib/src/_shared/PureDateInput.tsx
index 1d4e81ab5..02721be13 100644
--- a/lib/src/_shared/PureDateInput.tsx
+++ b/lib/src/_shared/PureDateInput.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react';
+import * as PropTypes from 'prop-types';
 import { onSpaceOrEnter } from '../_helpers/utils';
+import { ParsableDate } from '../constants/prop-types';
 import { MaterialUiPickersDate } from '../typings/date';
 import { TextFieldProps } from '@material-ui/core/TextField';
 import { IconButtonProps } from '@material-ui/core/IconButton';
 import { useUtils, MuiPickersAdapter } from './hooks/useUtils';
-import { ParsableDate, inputPropTypes } from '../constants/prop-types';
 import { InputAdornmentProps } from '@material-ui/core/InputAdornment';
 import { getDisplayDate, getTextFieldAriaText } from '../_helpers/text-field-helper';
 
@@ -136,4 +137,12 @@ export const PureDateInput: React.FC<DateInputProps & DateInputRefs> = ({
   });
 };
 
-PureDateInput.propTypes = inputPropTypes;
+PureDateInput.propTypes = {
+  acceptRegex: PropTypes.instanceOf(RegExp),
+  getOpenDialogAriaText: PropTypes.func,
+  mask: PropTypes.string,
+  OpenPickerButtonProps: PropTypes.object,
+  openPickerIcon: PropTypes.node,
+  renderInput: PropTypes.func.isRequired,
+  rifmFormatter: PropTypes.func,
+};
diff --git a/lib/src/constants/prop-types.ts b/lib/src/constants/prop-types.ts
index ca47c3bb6..eed9ec155 100644
--- a/lib/src/constants/prop-types.ts
+++ b/lib/src/constants/prop-types.ts
@@ -17,13 +17,3 @@ export const DomainPropTypes = { date, datePickerView };
 export const defaultMinDate = new Date('1900-01-01');
 
 export const defaultMaxDate = new Date('2100-01-01');
-
-export const inputPropTypes = {
-  renderInput: PropTypes.func.isRequired,
-  mask: PropTypes.string,
-  rifmFormatter: PropTypes.func,
-  openPickerIcon: PropTypes.node,
-  OpenPickerButtonProps: PropTypes.object,
-  acceptRegex: PropTypes.instanceOf(RegExp),
-  getOpenDialogAriaText: PropTypes.func,
-};

From 13c4f8aab86addb900493fc4c099c6779cb8a554 Mon Sep 17 00:00:00 2001
From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
Date: Sun, 10 May 2020 15:06:19 +0300
Subject: [PATCH 5/6] Improve docs of `renderInput`

---
 docs/prop-types.json                             | 8 ++++----
 lib/src/DateRangePicker/DateRangePickerInput.tsx | 8 ++++++--
 lib/src/_shared/PureDateInput.tsx                | 4 +++-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/docs/prop-types.json b/docs/prop-types.json
index c6fa06773..2b426f14c 100644
--- a/docs/prop-types.json
+++ b/docs/prop-types.json
@@ -858,7 +858,7 @@
     },
     "renderInput": {
       "defaultValue": null,
-      "description": "Render input component. Where `props` – [TextField](https://material-ui.com/api/text-field/#textfield-api) component props\n@example ```jsx\nrenderInput={props => <TextField {...props} />}\n````",
+      "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `props` argument of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api) that you need to forward.\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\nrenderInput={props => <TextField {...props} />}\n````",
       "name": "renderInput",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/_shared/PureDateInput.tsx",
@@ -1559,7 +1559,7 @@
     },
     "renderInput": {
       "defaultValue": null,
-      "description": "Render input component. Where `props` – [TextField](https://material-ui.com/api/text-field/#textfield-api) component props\n@example ```jsx\nrenderInput={props => <TextField {...props} />}\n````",
+      "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `props` argument of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api) that you need to forward.\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\nrenderInput={props => <TextField {...props} />}\n````",
       "name": "renderInput",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/_shared/PureDateInput.tsx",
@@ -2597,7 +2597,7 @@
     },
     "renderInput": {
       "defaultValue": null,
-      "description": "Render input component. Where `props` – [TextField](https://material-ui.com/api/text-field/#textfield-api) component props\n@example ```jsx\nrenderInput={props => <TextField {...props} />}\n````",
+      "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `props` argument of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api) that you need to forward.\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\nrenderInput={props => <TextField {...props} />}\n````",
       "name": "renderInput",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/_shared/PureDateInput.tsx",
@@ -3455,7 +3455,7 @@
     },
     "renderInput": {
       "defaultValue": null,
-      "description": "Render input component for date range. Where `props` – [TextField](https://material-ui.com/api/text-field/#textfield-api) component props\n@example ```jsx\n<DateRangePicker\nrenderInput={(startProps, endProps) => (\n<>\n<TextField {...startProps} />\n<Typography> to <Typography>\n<TextField {...endProps} />\n</>;\n)}\n/>\n````",
+      "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `startProps` and `endProps` arguments of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api),\nthat you need to forward to the range start/end inputs respectively.\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\n<DateRangePicker\nrenderInput={(startProps, endProps) => (\n  <>\n    <TextField {...startProps} />\n    <Typography> to <Typography>\n    <TextField {...endProps} />\n  </>;\n)}\n/>\n````",
       "name": "renderInput",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/DateRangePicker/DateRangePickerInput.tsx",
diff --git a/lib/src/DateRangePicker/DateRangePickerInput.tsx b/lib/src/DateRangePicker/DateRangePickerInput.tsx
index 8804ed2e3..3e041dd3b 100644
--- a/lib/src/DateRangePicker/DateRangePickerInput.tsx
+++ b/lib/src/DateRangePicker/DateRangePickerInput.tsx
@@ -33,8 +33,12 @@ export const useStyles = makeStyles(
 
 export interface ExportedDateRangePickerInputProps {
   /**
-   * Render input component for date range. Where `props` – [TextField](https://material-ui.com/api/text-field/#textfield-api) component props
-   * @example ```jsx
+   * The `renderInput` prop allows you to customize the rendered input.
+   * The `startProps` and `endProps` arguments of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api),
+   * that you need to forward to the range start/end inputs respectively.
+   * Pay specific attention to the `ref` and `inputProps` keys.
+   * @example
+   * ```jsx
    * <DateRangePicker
    * renderInput={(startProps, endProps) => (
        <>
diff --git a/lib/src/_shared/PureDateInput.tsx b/lib/src/_shared/PureDateInput.tsx
index 02721be13..4c093e18c 100644
--- a/lib/src/_shared/PureDateInput.tsx
+++ b/lib/src/_shared/PureDateInput.tsx
@@ -28,7 +28,9 @@ export interface DateInputProps<TInputValue = ParsableDate, TDateValue = Materia
   // ?? TODO when it will be possible to display "empty" date in datepicker use it instead of ignoring invalid inputs
   ignoreInvalidInputs?: boolean;
   /**
-   * Render input component. Where `props` – [TextField](https://material-ui.com/api/text-field/#textfield-api) component props
+   * The `renderInput` prop allows you to customize the rendered input.
+   * The `props` argument of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api) that you need to forward.
+   * Pay specific attention to the `ref` and `inputProps` keys.
    * @example ```jsx
    * renderInput={props => <TextField {...props} />}
    * ````

From 01d86eb4c57512a3c1352386dc46c7b4653b544e Mon Sep 17 00:00:00 2001
From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
Date: Sun, 10 May 2020 15:06:42 +0300
Subject: [PATCH 6/6] Remove 1-level import from '@material-ui/core'

---
 docs/pages/demo/datepicker/CustomInput.example.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/demo/datepicker/CustomInput.example.jsx b/docs/pages/demo/datepicker/CustomInput.example.jsx
index d3e49e496..190110966 100644
--- a/docs/pages/demo/datepicker/CustomInput.example.jsx
+++ b/docs/pages/demo/datepicker/CustomInput.example.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { styled } from '@material-ui/core';
+import { styled } from '@material-ui/core/styles';
 import { DesktopDatePicker } from '@material-ui/pickers';
 
 const InputContainer = styled('div')({