Use object for dates

docs/scripts/generateProptypes.ts

@@ -10,6 +10,28 @@ import { fixBabelGeneratorIssues, fixLineEndings } from '@mui-internal/docs-util
 import { createXTypeScriptProjects, XTypeScriptProject } from './createXTypeScriptProjects';
 
 async function generateProptypes(project: XTypeScriptProject, sourceFile: string) {
+  const isTDate = (name: string) => {
+    if (['x-date-pickers', 'x-date-pickers-pro'].includes(project.name)) {
+      const T_DATE_PROPS = [
+        'value',
+        'defaultValue',
+        'minDate',
+        'maxDate',
+        'minDateTime',
+        'maxDateTime',
+        'minTime',
+        'maxTime',
+        'referenceDate',
+      ];
+
+      if (T_DATE_PROPS.includes(name)) {
+        return true
+      }
+    }
+
+    return false
+  }
+
   const components = getPropTypesFromFile({
     filePath: sourceFile,
     project,
@@ -47,26 +69,13 @@ async function generateProptypes(project: XTypeScriptProject, sourceFile: string
         return false;
       }
 
-      if (['x-date-pickers', 'x-date-pickers-pro'].includes(project.name)) {
-        const PICKERS_PROPS_TO_NOT_RESOLVE = [
-          'value',
-          'defaultValue',
-          'minDate',
-          'maxDate',
-          'minDateTime',
-          'maxDateTime',
-          'minTime',
-          'maxTime',
-          'referenceDate',
-        ];
-
-        if (PICKERS_PROPS_TO_NOT_RESOLVE.includes(name)) {
-          return false;
-        }
+      if (isTDate(name)) {
+        return false
       }
 
       return undefined;
     },
+    shouldUseObjectForDate: ({ name }) => isTDate(name),
   });
 
   if (components.length === 0) {

package.json

@@ -86,7 +86,7 @@
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
     "@mui/icons-material": "^5.15.5",
     "@mui/material": "^5.15.5",
-    "@mui/monorepo": "https://github.com/mui/material-ui.git#master",
+    "@mui/monorepo": "https://github.com/flaviendelangle/material-ui.git#date-resolve",
     "@mui/utils": "^5.15.5",
     "@next/eslint-plugin-next": "^14.0.4",
     "@octokit/plugin-retry": "^6.0.1",

packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx

@@ -650,9 +650,7 @@ DateRangeCalendar.propTypes = {
    * The default selected value.
    * Used when the component is not controlled.
    */
-  defaultValue: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
-  ),
+  defaultValue: PropTypes.arrayOf(PropTypes.object),
   /**
    * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
    * @default false
@@ -702,11 +700,11 @@ DateRangeCalendar.propTypes = {
   /**
    * Maximal selectable date.
    */
-  maxDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  maxDate: PropTypes.object,
   /**
    * Minimal selectable date.
    */
-  minDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  minDate: PropTypes.object,
   /**
    * Callback fired when the value changes.
    * @template TDate
@@ -744,7 +742,7 @@ DateRangeCalendar.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
    */
-  referenceDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  referenceDate: PropTypes.object,
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
@@ -803,7 +801,7 @@ DateRangeCalendar.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object])),
+  value: PropTypes.arrayOf(PropTypes.object),
 } as any;
 
 export { DateRangeCalendar };

packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx

@@ -85,9 +85,7 @@ DateRangePicker.propTypes = {
    * The default value.
    * Used when the component is not controlled.
    */
-  defaultValue: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
-  ),
+  defaultValue: PropTypes.arrayOf(PropTypes.object),
   /**
    * CSS media query when `Mobile` mode will be changed to `Desktop`.
    * @default '@media (pointer: fine)'
@@ -174,11 +172,11 @@ DateRangePicker.propTypes = {
   /**
    * Maximal selectable date.
    */
-  maxDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  maxDate: PropTypes.object,
   /**
    * Minimal selectable date.
    */
-  minDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  minDate: PropTypes.object,
   /**
    * Name attribute used by the `input` element in the Field.
    * Ignored if the field has several inputs.
@@ -254,7 +252,7 @@ DateRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  referenceDate: PropTypes.object,
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
@@ -341,7 +339,7 @@ DateRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object])),
+  value: PropTypes.arrayOf(PropTypes.object),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.

packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx

@@ -154,8 +154,7 @@ DateRangePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: PropTypes.node,
-  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]))
-    .isRequired,
+  value: PropTypes.arrayOf(PropTypes.object).isRequired,
 } as any;
 
 export { DateRangePickerToolbar };

packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx

@@ -120,9 +120,7 @@ DesktopDateRangePicker.propTypes = {
    * The default value.
    * Used when the component is not controlled.
    */
-  defaultValue: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
-  ),
+  defaultValue: PropTypes.arrayOf(PropTypes.object),
   /**
    * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
    * @default false
@@ -203,11 +201,11 @@ DesktopDateRangePicker.propTypes = {
   /**
    * Maximal selectable date.
    */
-  maxDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  maxDate: PropTypes.object,
   /**
    * Minimal selectable date.
    */
-  minDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  minDate: PropTypes.object,
   /**
    * Name attribute used by the `input` element in the Field.
    * Ignored if the field has several inputs.
@@ -283,7 +281,7 @@ DesktopDateRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  referenceDate: PropTypes.object,
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
@@ -370,7 +368,7 @@ DesktopDateRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object])),
+  value: PropTypes.arrayOf(PropTypes.object),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.

packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx

@@ -116,9 +116,7 @@ MobileDateRangePicker.propTypes = {
    * The default value.
    * Used when the component is not controlled.
    */
-  defaultValue: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
-  ),
+  defaultValue: PropTypes.arrayOf(PropTypes.object),
   /**
    * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
    * @default false
@@ -199,11 +197,11 @@ MobileDateRangePicker.propTypes = {
   /**
    * Maximal selectable date.
    */
-  maxDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  maxDate: PropTypes.object,
   /**
    * Minimal selectable date.
    */
-  minDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  minDate: PropTypes.object,
   /**
    * Name attribute used by the `input` element in the Field.
    * Ignored if the field has several inputs.
@@ -279,7 +277,7 @@ MobileDateRangePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  referenceDate: PropTypes.object,
   /**
    * Component rendered on the "day" view when `props.loading` is true.
    * @returns {React.ReactNode} The node to render when loading.
@@ -366,7 +364,7 @@ MobileDateRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object])),
+  value: PropTypes.arrayOf(PropTypes.object),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.

packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx

@@ -173,9 +173,7 @@ MultiInputDateRangeField.propTypes = {
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
-  ),
+  defaultValue: PropTypes.arrayOf(PropTypes.object),
   /**
    * Defines the `flex-direction` style property.
    * It is applied for all screen sizes.
@@ -218,11 +216,11 @@ MultiInputDateRangeField.propTypes = {
   /**
    * Maximal selectable date.
    */
-  maxDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  maxDate: PropTypes.object,
   /**
    * Minimal selectable date.
    */
-  minDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  minDate: PropTypes.object,
   /**
    * Callback fired when the value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -255,7 +253,7 @@ MultiInputDateRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  referenceDate: PropTypes.object,
   /**
    * The currently selected sections.
    * This prop accept four formats:
@@ -363,7 +361,7 @@ MultiInputDateRangeField.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object])),
+  value: PropTypes.arrayOf(PropTypes.object),
 } as any;
 
 export { MultiInputDateRangeField };

packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx

@@ -176,9 +176,7 @@ MultiInputDateTimeRangeField.propTypes = {
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
-  ),
+  defaultValue: PropTypes.arrayOf(PropTypes.object),
   /**
    * Defines the `flex-direction` style property.
    * It is applied for all screen sizes.
@@ -226,29 +224,29 @@ MultiInputDateTimeRangeField.propTypes = {
   /**
    * Maximal selectable date.
    */
-  maxDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  maxDate: PropTypes.object,
   /**
    * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.
    */
-  maxDateTime: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  maxDateTime: PropTypes.object,
   /**
    * Maximal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
    */
-  maxTime: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  maxTime: PropTypes.object,
   /**
    * Minimal selectable date.
    */
-  minDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  minDate: PropTypes.object,
   /**
    * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
    */
-  minDateTime: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  minDateTime: PropTypes.object,
   /**
    * Minimal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
    */
-  minTime: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  minTime: PropTypes.object,
   /**
    * Step over minutes.
    * @default 1
@@ -286,7 +284,7 @@ MultiInputDateTimeRangeField.propTypes = {
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object]),
+  referenceDate: PropTypes.object,
   /**
    * The currently selected sections.
    * This prop accept four formats:
@@ -402,7 +400,7 @@ MultiInputDateTimeRangeField.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.object])),
+  value: PropTypes.arrayOf(PropTypes.object),
 } as any;
 
 export { MultiInputDateTimeRangeField };