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')({
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 => }\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 => }\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 => }\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 => }\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 => }\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 => }\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 (\n<>\n\n to \n\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 (\n <>\n \n to \n \n >;\n)}\n/>\n````",
"name": "renderInput",
"parent": {
"fileName": "material-ui-pickers/lib/src/DateRangePicker/DateRangePickerInput.tsx",
diff --git a/lib/.size-snapshot.json b/lib/.size-snapshot.json
index 05f5f4c2f..a48f2f19b 100644
--- a/lib/.size-snapshot.json
+++ b/lib/.size-snapshot.json
@@ -1,26 +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/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(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
diff --git a/lib/src/DateRangePicker/DateRangePickerInput.tsx b/lib/src/DateRangePicker/DateRangePickerInput.tsx
index 5bdb56933..3e041dd3b 100644
--- a/lib/src/DateRangePicker/DateRangePickerInput.tsx
+++ b/lib/src/DateRangePicker/DateRangePickerInput.tsx
@@ -1,4 +1,5 @@
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';
@@ -32,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
* (
<>
@@ -183,3 +188,13 @@ export const DateRangePickerInput: React.FC = ({
);
};
+
+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/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 = ({
);
};
+
+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..9238321ad 100644
--- a/lib/src/_shared/KeyboardDateInput.tsx
+++ b/lib/src/_shared/KeyboardDateInput.tsx
@@ -1,4 +1,5 @@
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';
@@ -50,4 +51,12 @@ export const KeyboardDateInput: React.FC = ({
});
};
-export default KeyboardDateInput;
+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 b54d4f268..4c093e18c 100644
--- a/lib/src/_shared/PureDateInput.tsx
+++ b/lib/src/_shared/PureDateInput.tsx
@@ -1,4 +1,5 @@
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';
@@ -27,7 +28,9 @@ export interface DateInputProps }
* ````
@@ -136,4 +139,12 @@ export const PureDateInput: React.FC = ({
});
};
-PureDateInput.displayName = 'PureDateInput';
+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 15ffe4d8e..eed9ec155 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,
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 {