@mui/x-date-pickers 6.11.2 → 6.12.1

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.11.2
+ * @mui/x-date-pickers v6.12.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/components/PickersPopper.js

@@ -1,5 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["PaperComponent", "popperPlacement", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import Grow from '@mui/material/Grow';
@@ -42,9 +44,9 @@ var PickersPopperPaper = styled(MuiPaper, {
 })(function (_ref2) {
   var ownerState = _ref2.ownerState;
   return _extends({
-    transformOrigin: 'top center',
-    outline: 0
-  }, ownerState.placement === 'top' && {
+    outline: 0,
+    transformOrigin: 'top center'
+  }, ownerState.placement.includes('top') && {
     transformOrigin: 'bottom center'
   });
 });
@@ -163,6 +165,45 @@ function useClickAwayListener(active, onClickAway) {
   }, [active, handleClickAway]);
   return [nodeRef, handleSynthetic, handleSynthetic];
 }
+var PickersPopperPaperWrapper = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var PaperComponent = props.PaperComponent,
+    popperPlacement = props.popperPlacement,
+    inOwnerState = props.ownerState,
+    children = props.children,
+    paperSlotProps = props.paperSlotProps,
+    paperClasses = props.paperClasses,
+    onPaperClick = props.onPaperClick,
+    onPaperTouchStart = props.onPaperTouchStart,
+    other = _objectWithoutProperties(props, _excluded);
+  var ownerState = _extends({}, inOwnerState, {
+    placement: popperPlacement
+  });
+  var paperProps = useSlotProps({
+    elementType: PaperComponent,
+    externalSlotProps: paperSlotProps,
+    additionalProps: {
+      tabIndex: -1,
+      elevation: 8,
+      ref: ref
+    },
+    className: paperClasses,
+    ownerState: ownerState
+  });
+  return /*#__PURE__*/_jsx(PaperComponent, _extends({}, other, paperProps, {
+    onClick: function onClick(event) {
+      var _paperProps$onClick;
+      onPaperClick(event);
+      (_paperProps$onClick = paperProps.onClick) == null || _paperProps$onClick.call(paperProps, event);
+    },
+    onTouchStart: function onTouchStart(event) {
+      var _paperProps$onTouchSt;
+      onPaperTouchStart(event);
+      (_paperProps$onTouchSt = paperProps.onTouchStart) == null || _paperProps$onTouchSt.call(paperProps, event);
+    },
+    ownerState: ownerState,
+    children: children
+  }));
+});
 export function PickersPopper(inProps) {
   var _slots$desktopTransit, _slots$desktopTrapFoc, _slots$desktopPaper, _slots$popper;
   var props = useThemeProps({
@@ -233,18 +274,6 @@ export function PickersPopper(inProps) {
   var Transition = ((_slots$desktopTransit = slots == null ? void 0 : slots.desktopTransition) != null ? _slots$desktopTransit : reduceAnimations) ? Fade : Grow;
   var TrapFocus = (_slots$desktopTrapFoc = slots == null ? void 0 : slots.desktopTrapFocus) != null ? _slots$desktopTrapFoc : MuiTrapFocus;
   var Paper = (_slots$desktopPaper = slots == null ? void 0 : slots.desktopPaper) != null ? _slots$desktopPaper : PickersPopperPaper;
-  var paperProps = useSlotProps({
-    elementType: Paper,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.desktopPaper,
-    additionalProps: {
-      tabIndex: -1,
-      elevation: 8,
-      ref: handlePaperRef
-    },
-    className: classes.paper,
-    ownerState: {} // Is overridden below to use `placement
-  });
-
   var Popper = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : PickersPopperRoot;
   var popperProps = useSlotProps({
     elementType: Popper,
@@ -278,22 +307,17 @@ export function PickersPopper(inProps) {
         }
       }, slotProps == null ? void 0 : slotProps.desktopTrapFocus, {
         children: /*#__PURE__*/_jsx(Transition, _extends({}, TransitionProps, slotProps == null ? void 0 : slotProps.desktopTransition, {
-          children: /*#__PURE__*/_jsx(Paper, _extends({}, paperProps, {
-            onClick: function onClick(event) {
-              var _paperProps$onClick;
-              onPaperClick(event);
-              (_paperProps$onClick = paperProps.onClick) == null ? void 0 : _paperProps$onClick.call(paperProps, event);
-            },
-            onTouchStart: function onTouchStart(event) {
-              var _paperProps$onTouchSt;
-              onPaperTouchStart(event);
-              (_paperProps$onTouchSt = paperProps.onTouchStart) == null ? void 0 : _paperProps$onTouchSt.call(paperProps, event);
-            },
-            ownerState: _extends({}, ownerState, {
-              placement: popperPlacement
-            }),
+          children: /*#__PURE__*/_jsx(PickersPopperPaperWrapper, {
+            PaperComponent: Paper,
+            ownerState: ownerState,
+            popperPlacement: popperPlacement,
+            ref: handlePaperRef,
+            onPaperClick: onPaperClick,
+            onPaperTouchStart: onPaperTouchStart,
+            paperClasses: classes.paper,
+            paperSlotProps: slotProps == null ? void 0 : slotProps.desktopPaper,
             children: _children
-          }))
+          })
         }))
       }));
     }

package/legacy/internals/demo/DemoContainer.js

@@ -33,6 +33,10 @@ var getSupportedSectionFromChildName = function getSupportedSectionFromChildName
   }
   return 'time';
 };
+/**
+ * WARNING: This is an internal component used in documentation to achieve a desired layout.
+ * Please do not use it in your application.
+ */
 export function DemoItem(props) {
   var label = props.label,
     children = props.children,
@@ -59,6 +63,11 @@ export function DemoItem(props) {
     }), children]
   });
 }
+
+/**
+ * WARNING: This is an internal component used in documentation to achieve a desired layout.
+ * Please do not use it in your application.
+ */
 export function DemoContainer(props) {
   var children = props.children,
     components = props.components,

package/legacy/internals/hooks/useDefaultReduceAnimations.js

@@ -1,9 +1,14 @@
 import useMediaQuery from '@mui/material/useMediaQuery';
 var PREFERS_REDUCED_MOTION = '@media (prefers-reduced-motion: reduce)';
-export var defaultReduceAnimations = typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent);
+
+// detect if user agent has Android version < 10 or iOS version < 13
+var mobileVersionMatches = typeof navigator !== 'undefined' && navigator.userAgent.match(/android\s(\d+)|OS\s(\d+)/i);
+var androidVersion = mobileVersionMatches && mobileVersionMatches[1] ? parseInt(mobileVersionMatches[1], 10) : null;
+var iOSVersion = mobileVersionMatches && mobileVersionMatches[2] ? parseInt(mobileVersionMatches[2], 10) : null;
+export var slowAnimationDevices = androidVersion && androidVersion < 10 || iOSVersion && iOSVersion < 13 || false;
 export var useDefaultReduceAnimations = function useDefaultReduceAnimations() {
   var prefersReduced = useMediaQuery(PREFERS_REDUCED_MOTION, {
     defaultMatches: false
   });
-  return prefersReduced || defaultReduceAnimations;
+  return prefersReduced || slowAnimationDevices;
 };

package/legacy/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -78,7 +78,7 @@ export var useDesktopPicker = function useDesktopPicker(_ref) {
       externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.openPickerButton,
       additionalProps: {
         disabled: disabled || readOnly,
-        onClick: actions.onOpen,
+        onClick: open ? actions.onClose : actions.onOpen,
         'aria-label': getOpenDialogAriaText(pickerFieldProps.value, utils),
         edge: inputAdornmentProps.position
       },

package/legacy/internals/hooks/useField/useField.js

@@ -89,11 +89,11 @@ export var useField = function useField(params) {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    onClick == null ? void 0 : onClick.apply(void 0, _toConsumableArray(args));
+    onClick == null || onClick.apply(void 0, _toConsumableArray(args));
     syncSelectionFromDOM();
   });
   var handleInputMouseUp = useEventCallback(function (event) {
-    onMouseUp == null ? void 0 : onMouseUp(event);
+    onMouseUp == null || onMouseUp(event);
 
     // Without this, the browser will remove the selected when clicking inside an already-selected section.
     event.preventDefault();
@@ -102,7 +102,7 @@ export var useField = function useField(params) {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    onFocus == null ? void 0 : onFocus.apply(void 0, _toConsumableArray(args));
+    onFocus == null || onFocus.apply(void 0, _toConsumableArray(args));
     // The ref is guaranteed to be resolved at this point.
     var input = inputRef.current;
     window.clearTimeout(focusTimeoutRef.current);
@@ -127,11 +127,11 @@ export var useField = function useField(params) {
     for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
       args[_key3] = arguments[_key3];
     }
-    onBlur == null ? void 0 : onBlur.apply(void 0, _toConsumableArray(args));
+    onBlur == null || onBlur.apply(void 0, _toConsumableArray(args));
     _setSelectedSections(null);
   });
   var handleInputPaste = useEventCallback(function (event) {
-    onPaste == null ? void 0 : onPaste(event);
+    onPaste == null || onPaste(event);
     if (readOnly) {
       event.preventDefault();
       return;
@@ -212,7 +212,7 @@ export var useField = function useField(params) {
     });
   });
   var handleInputKeyDown = useEventCallback(function (event) {
-    onKeyDown == null ? void 0 : onKeyDown(event);
+    onKeyDown == null || onKeyDown(event);
 
     // eslint-disable-next-line default-case
     switch (true) {

package/legacy/internals/hooks/useField/useField.utils.js

@@ -679,58 +679,6 @@ export var mergeDateIntoReferenceDate = function mergeDateIntoReferenceDate(util
 export var isAndroid = function isAndroid() {
   return navigator.userAgent.toLowerCase().indexOf('android') > -1;
 };
-export var clampDaySectionIfPossible = function clampDaySectionIfPossible(utils, timezone, sections, sectionsValueBoundaries) {
-  // We can only clamp the day value if:
-  // 1. if all the sections are filled (except the week day section which can be empty)
-  // 2. there is a day section
-  var canClamp = sections.every(function (section) {
-    return section.type === 'weekDay' || section.value !== '';
-  }) && sections.some(function (section) {
-    return section.type === 'day';
-  });
-  if (!canClamp) {
-    return null;
-  }
-
-  // We try to generate a valid date representing the start of the month of the invalid date typed by the user.
-  var sectionsForStartOfMonth = sections.map(function (section) {
-    if (section.type !== 'day') {
-      return section;
-    }
-    var dayBoundaries = sectionsValueBoundaries.day({
-      currentDate: null,
-      format: section.format,
-      contentType: section.contentType
-    });
-    return _extends({}, section, {
-      value: cleanDigitSectionValue(utils, timezone, dayBoundaries.minimum, dayBoundaries, section)
-    });
-  });
-  var startOfMonth = getDateFromDateSections(utils, sectionsForStartOfMonth);
-
-  // Even the start of the month is invalid, we probably have other invalid sections, the clamping failed.
-  if (startOfMonth == null || !utils.isValid(startOfMonth)) {
-    return null;
-  }
-
-  // The only invalid section was the day of the month, we replace its value with the maximum boundary for the correct month.
-  return sections.map(function (section) {
-    if (section.type !== 'day') {
-      return section;
-    }
-    var dayBoundaries = sectionsValueBoundaries.day({
-      currentDate: startOfMonth,
-      format: section.format,
-      contentType: section.contentType
-    });
-    if (Number(section.value) <= dayBoundaries.maximum) {
-      return section;
-    }
-    return _extends({}, section, {
-      value: dayBoundaries.maximum.toString()
-    });
-  });
-};
 export var getSectionOrder = function getSectionOrder(sections, isRTL) {
   var neighbors = {};
   if (!isRTL) {

package/legacy/internals/hooks/useField/useFieldState.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import { useTheme } from '@mui/material/styles';
 import { useUtils, useLocaleText, useLocalizationContext } from '../useUtils';
-import { addPositionPropertiesToSections, splitFormatIntoSections, clampDaySectionIfPossible, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections } from './useField.utils';
+import { addPositionPropertiesToSections, splitFormatIntoSections, mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections } from './useField.utils';
 import { useValueWithTimezone } from '../useValueWithTimezone';
 import { getSectionTypeGranularity } from '../../utils/getDefaultReferenceDate';
 export var useFieldState = function useFieldState(params) {
@@ -90,7 +90,7 @@ export var useFieldState = function useFieldState(params) {
     innerSetSelectedSections = _useControlled2[1];
   var setSelectedSections = function setSelectedSections(newSelectedSections) {
     innerSetSelectedSections(newSelectedSections);
-    onSelectedSectionsChange == null ? void 0 : onSelectedSectionsChange(newSelectedSections);
+    onSelectedSectionsChange == null || onSelectedSectionsChange(newSelectedSections);
     setState(function (prevState) {
       return _extends({}, prevState, {
         selectedSectionQuery: null
@@ -233,20 +233,6 @@ export var useFieldState = function useFieldState(params) {
     var newSections = setSectionValue(selectedSectionIndexes.startIndex, newSectionValue);
     var newActiveDateSections = activeDateManager.getSections(newSections);
     var newActiveDate = getDateFromDateSections(utils, newActiveDateSections);
-    var shouldRegenSections = false;
-
-    /**
-     * If the date is invalid,
-     * Then we can try to clamp the day section to see if that produces a valid date.
-     * This can be useful if the month has fewer days than the day value currently provided.
-     */
-    if (!utils.isValid(newActiveDate)) {
-      var clampedSections = clampDaySectionIfPossible(utils, timezone, newActiveDateSections, sectionsValueBoundaries);
-      if (clampedSections != null) {
-        shouldRegenSections = true;
-        newActiveDate = getDateFromDateSections(utils, clampedSections);
-      }
-    }
     var values;
     var shouldPublish;
 
@@ -264,23 +250,17 @@ export var useFieldState = function useFieldState(params) {
       shouldPublish = (newActiveDate != null && !utils.isValid(newActiveDate)) !== (activeDateManager.date != null && !utils.isValid(activeDateManager.date));
     }
 
-    /**
-     * If the value has been modified (to clamp the day).
-     * Then we need to re-generate the sections to make sure they also have this change.
-     */
-    var sections = shouldRegenSections ? getSectionsFromValue(values.value, state.sections) : newSections;
-
     /**
      * Publish or update the internal state with the new value and sections.
      */
     if (shouldPublish) {
       return publishValue(_extends({}, values, {
-        sections: sections
+        sections: newSections
       }));
     }
     return setState(function (prevState) {
       return _extends({}, prevState, values, {
-        sections: sections,
+        sections: newSections,
         tempValueStrAndroid: null
       });
     });

package/legacy/internals/hooks/usePicker/usePickerValue.js

@@ -315,7 +315,7 @@ export var usePickerValue = function usePickerValue(_ref) {
   });
   var handleFieldSelectedSectionsChange = useEventCallback(function (newSelectedSections) {
     setSelectedSections(newSelectedSections);
-    onSelectedSectionsChange == null ? void 0 : onSelectedSectionsChange(newSelectedSections);
+    onSelectedSectionsChange == null || onSelectedSectionsChange(newSelectedSections);
   });
   var actions = {
     onClear: handleClear,

package/legacy/internals/hooks/usePicker/usePickerViews.js

@@ -107,7 +107,7 @@ export var usePickerViews = function usePickerViews(_ref) {
       setTimeout(function () {
         // focusing the input before the range selection is done
         // calling `onSelectedSectionsChange` outside of timeout results in an inconsistent behavior between Safari And Chrome
-        inputRef == null ? void 0 : inputRef.current.focus();
+        inputRef == null || inputRef.current.focus();
         onSelectedSectionsChange(view);
       });
     }

package/legacy/internals/hooks/useValueWithTimezone.js

@@ -36,7 +36,7 @@ export var useValueWithTimezone = function useValueWithTimezone(_ref) {
     for (var _len = arguments.length, otherParams = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       otherParams[_key - 1] = arguments[_key];
     }
-    onChange == null ? void 0 : onChange.apply(void 0, [newValueWithInputTimezone].concat(otherParams));
+    onChange == null || onChange.apply(void 0, [newValueWithInputTimezone].concat(otherParams));
   });
   return {
     value: valueWithTimezoneToRender,
@@ -69,7 +69,7 @@ export var useControlledValueWithTimezone = function useControlledValueWithTimez
     for (var _len2 = arguments.length, otherParams = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
       otherParams[_key2 - 1] = arguments[_key2];
     }
-    onChangeProp == null ? void 0 : onChangeProp.apply(void 0, [newValue].concat(otherParams));
+    onChangeProp == null || onChangeProp.apply(void 0, [newValue].concat(otherParams));
   });
   return useValueWithTimezone({
     timezone: timezoneProp,

package/legacy/internals/hooks/useViews.js

@@ -72,7 +72,7 @@ export function useViews(_ref) {
       );
     }
 
-    onFocusedViewChange == null ? void 0 : onFocusedViewChange(viewToFocus, hasFocus);
+    onFocusedViewChange == null || onFocusedViewChange(viewToFocus, hasFocus);
   });
   var handleChangeView = useEventCallback(function (newView) {
     if (newView === view) {

package/legacy/tests/describeValue/testControlledUnControlled.js

@@ -76,7 +76,7 @@ export var testControlledUnControlled = function testControlledUnControlled(Elem
           setValue = _React$useState2[1];
         var handleChange = React.useCallback(function (newValue) {
           setValue(newValue);
-          props == null ? void 0 : props.onChange(newValue);
+          props == null || props.onChange(newValue);
         }, [props]);
         return {
           value: value,

package/legacy/timeViewRenderers/timeViewRenderers.js

@@ -12,6 +12,7 @@ export var renderTimeViewClock = function renderTimeViewClock(_ref) {
     views = _ref.views,
     value = _ref.value,
     defaultValue = _ref.defaultValue,
+    referenceDate = _ref.referenceDate,
     onChange = _ref.onChange,
     className = _ref.className,
     classes = _ref.classes,
@@ -43,6 +44,7 @@ export var renderTimeViewClock = function renderTimeViewClock(_ref) {
     views: views.filter(isTimeView),
     value: value,
     defaultValue: defaultValue,
+    referenceDate: referenceDate,
     onChange: onChange,
     className: className,
     classes: classes,
@@ -76,6 +78,7 @@ export var renderDigitalClockTimeView = function renderDigitalClockTimeView(_ref
     views = _ref2.views,
     value = _ref2.value,
     defaultValue = _ref2.defaultValue,
+    referenceDate = _ref2.referenceDate,
     onChange = _ref2.onChange,
     className = _ref2.className,
     classes = _ref2.classes,
@@ -107,6 +110,7 @@ export var renderDigitalClockTimeView = function renderDigitalClockTimeView(_ref
     views: views.filter(isTimeView),
     value: value,
     defaultValue: defaultValue,
+    referenceDate: referenceDate,
     onChange: onChange,
     className: className,
     classes: classes,
@@ -140,6 +144,7 @@ export var renderMultiSectionDigitalClockTimeView = function renderMultiSectionD
     views = _ref3.views,
     value = _ref3.value,
     defaultValue = _ref3.defaultValue,
+    referenceDate = _ref3.referenceDate,
     onChange = _ref3.onChange,
     className = _ref3.className,
     classes = _ref3.classes,
@@ -171,6 +176,7 @@ export var renderMultiSectionDigitalClockTimeView = function renderMultiSectionD
     views: views.filter(isTimeView),
     value: value,
     defaultValue: defaultValue,
+    referenceDate: referenceDate,
     onChange: onChange,
     className: className,
     classes: classes,

package/models/adapters.d.ts

@@ -171,6 +171,7 @@ export type AdapterOptions<TLocale, TInstance> = {
     formats?: Partial<AdapterFormats>;
     locale?: TLocale;
 } & PropertyIfNotNever<'instance', TInstance>;
+export type DateBuilderReturnType<T extends string | null | undefined, TDate> = T extends null ? null : TDate;
 export interface MuiPickersAdapter<TDate, TLocale = any> {
     /**
      * A boolean confirming that the adapter used is an MUI adapter.
@@ -212,7 +213,7 @@ export interface MuiPickersAdapter<TDate, TLocale = any> {
      * @param {PickersTimezone} timezone The timezone of the date.
      * @returns {TDate | null} The parsed date.
      */
-    dateWithTimezone(value: string | null | undefined, timezone: PickersTimezone): TDate | null;
+    dateWithTimezone<T extends string | null | undefined>(value: T, timezone: PickersTimezone): DateBuilderReturnType<T, TDate>;
     /**
      * Extracts the timezone from a date.
      * @template TDate

package/modern/DateCalendar/DateCalendar.js

@@ -485,7 +485,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   readOnly: PropTypes.bool,
   /**
    * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
   /**

package/modern/DateField/DateField.js

@@ -207,10 +207,6 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current 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.

package/modern/DatePicker/DatePicker.js

@@ -242,9 +242,14 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   readOnly: PropTypes.bool,
   /**
    * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * 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.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/modern/DateTimeField/DateTimeField.js

@@ -240,10 +240,6 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current 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.

package/modern/DateTimePicker/DateTimePicker.js

@@ -280,9 +280,14 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   readOnly: PropTypes.bool,
   /**
    * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * 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.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -256,9 +256,14 @@ DesktopDatePicker.propTypes = {
   readOnly: PropTypes.bool,
   /**
    * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * 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.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -330,9 +330,14 @@ DesktopDateTimePicker.propTypes = {
   readOnly: PropTypes.bool,
   /**
    * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * 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.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -252,9 +252,14 @@ DesktopTimePicker.propTypes = {
   readOnly: PropTypes.bool,
   /**
    * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * 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.any,
   /**
    * The currently selected sections.
    * This prop accept four formats:

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -253,9 +253,14 @@ MobileDatePicker.propTypes = {
   readOnly: PropTypes.bool,
   /**
    * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * 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.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -302,9 +302,14 @@ MobileDateTimePicker.propTypes = {
   readOnly: PropTypes.bool,
   /**
    * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * 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.any,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -230,9 +230,14 @@ MobileTimePicker.propTypes = {
   readOnly: PropTypes.bool,
   /**
    * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
    */
   reduceAnimations: PropTypes.bool,
+  /**
+   * 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.any,
   /**
    * The currently selected sections.
    * This prop accept four formats: