@mui/x-date-pickers 6.11.2 → 6.12.1

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -334,9 +334,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/DesktopTimePicker/DesktopTimePicker.js

@@ -256,9 +256,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/MobileDatePicker/MobileDatePicker.js

@@ -257,9 +257,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/MobileDateTimePicker/MobileDateTimePicker.js

@@ -306,9 +306,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/MobileTimePicker/MobileTimePicker.js

@@ -234,9 +234,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:

package/MonthCalendar/PickersMonth.js

@@ -100,7 +100,7 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
   useEnhancedEffect(() => {
     if (autoFocus) {
       var _ref$current;
-      (_ref$current = ref.current) == null ? void 0 : _ref$current.focus();
+      (_ref$current = ref.current) == null || _ref$current.focus();
     }
   }, [autoFocus]);
   return /*#__PURE__*/_jsx(PickersMonthRoot, _extends({

package/StaticDatePicker/StaticDatePicker.js

@@ -202,9 +202,14 @@ StaticDatePicker.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/StaticDateTimePicker/StaticDateTimePicker.js

@@ -250,9 +250,14 @@ StaticDateTimePicker.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/StaticTimePicker/StaticTimePicker.js

@@ -177,9 +177,14 @@ StaticTimePicker.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,
   /**
    * Disable specific clock time.
    * @param {number} clockValue The value to check.

package/TimeField/TimeField.js

@@ -225,10 +225,6 @@ process.env.NODE_ENV !== "production" ? TimeField.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/TimePicker/TimePicker.js

@@ -215,9 +215,14 @@ process.env.NODE_ENV !== "production" ? TimePicker.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/YearCalendar/YearCalendar.js

@@ -51,7 +51,10 @@ const YearCalendarRoot = styled('div', {
   height: '100%',
   padding: '0 4px',
   width: 320,
-  maxHeight: 304
+  maxHeight: 304,
+  // avoid padding increasing width over defined
+  boxSizing: 'border-box',
+  position: 'relative'
 });
 export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps, ref) {
   const props = useYearCalendarDefaultizedProps(inProps, 'MuiYearCalendar');
@@ -157,7 +160,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     if (!isYearDisabled(utils.setYear(value != null ? value : referenceDate, year))) {
       setFocusedYear(year);
       changeHasFocus(true);
-      onYearFocus == null ? void 0 : onYearFocus(year);
+      onYearFocus == null || onYearFocus(year);
     }
   });
   React.useEffect(() => {

package/dateTimeViewRenderers/dateTimeViewRenderers.d.ts

@@ -10,4 +10,4 @@ export interface DateTimeViewRendererProps<TDate> extends Omit<DateCalendarProps
     focusedView: DateOrTimeViewWithMeridiem | null;
     timeViewsCount: number;
 }
-export declare const renderDesktopDateTimeView: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, onChange, className, classes, disableFuture, disablePast, minDate, minTime, maxDate, maxTime, shouldDisableDate, shouldDisableMonth, shouldDisableYear, shouldDisableTime, shouldDisableClock, reduceAnimations, minutesStep, ampm, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, components, componentsProps, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timeViewsCount, }: DateTimeViewRendererProps<TDate>) => React.JSX.Element;
+export declare const renderDesktopDateTimeView: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, minTime, maxDate, maxTime, shouldDisableDate, shouldDisableMonth, shouldDisableYear, shouldDisableTime, shouldDisableClock, reduceAnimations, minutesStep, ampm, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, components, componentsProps, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timeViewsCount, }: DateTimeViewRendererProps<TDate>) => React.JSX.Element;

package/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -17,6 +17,7 @@ export const renderDesktopDateTimeView = ({
   onFocusedViewChange,
   value,
   defaultValue,
+  referenceDate,
   onChange,
   className,
   classes,
@@ -72,6 +73,7 @@ export const renderDesktopDateTimeView = ({
         onFocusedViewChange: onFocusedViewChange,
         value: value,
         defaultValue: defaultValue,
+        referenceDate: referenceDate,
         onChange: onChange,
         className: className,
         classes: classes,
@@ -115,6 +117,7 @@ export const renderDesktopDateTimeView = ({
           views: views.filter(isInternalTimeView),
           value: value,
           defaultValue: defaultValue,
+          referenceDate: referenceDate,
           onChange: onChange,
           className: className,
           classes: classes,

package/dateViewRenderers/dateViewRenderers.d.ts

@@ -8,4 +8,4 @@ export interface DateViewRendererProps<TDate, TView extends DateOrTimeViewWithMe
     views: readonly TView[];
     focusedView: TView | null;
 }
-export declare const renderDateViewCalendar: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, components, componentsProps, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;
+export declare const renderDateViewCalendar: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, components, componentsProps, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;

package/dateViewRenderers/dateViewRenderers.js

@@ -10,6 +10,7 @@ export const renderDateViewCalendar = ({
   onFocusedViewChange,
   value,
   defaultValue,
+  referenceDate,
   onChange,
   className,
   classes,
@@ -50,6 +51,7 @@ export const renderDateViewCalendar = ({
   onFocusedViewChange: onFocusedViewChange,
   value: value,
   defaultValue: defaultValue,
+  referenceDate: referenceDate,
   onChange: onChange,
   className: className,
   classes: classes,

package/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/internals/components/PickersPopper.d.ts

@@ -7,6 +7,9 @@ import { TransitionProps as MuiTransitionProps } from '@mui/material/transitions
 import { PickersPopperClasses } from './pickersPopperClasses';
 import { UncapitalizeObjectKeys } from '../utils/slots-migration';
 import { UsePickerValueActions } from '../hooks/usePicker/usePickerValue.types';
+interface PickersPopperOwnerState extends PickerPopperProps {
+    placement: PopperPlacementType;
+}
 export interface PickersPopperSlotsComponent {
     /**
      * Custom component for the paper rendered inside the desktop picker's Popper.
@@ -33,9 +36,7 @@ export interface PickersPopperSlotsComponentsProps {
     /**
      * Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component.
      */
-    desktopPaper?: SlotComponentProps<typeof MuiPaper, {}, PickerPopperProps & {
-        placement: PopperPlacementType | undefined;
-    }>;
+    desktopPaper?: SlotComponentProps<typeof MuiPaper, {}, PickersPopperOwnerState>;
     /**
      * Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component.
      */
@@ -64,3 +65,4 @@ export interface PickerPopperProps extends UsePickerValueActions {
     reduceAnimations?: boolean;
 }
 export declare function PickersPopper(inProps: PickerPopperProps): React.JSX.Element;
+export {};

package/internals/components/PickersPopper.js

@@ -1,4 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _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';
@@ -38,9 +40,9 @@ const PickersPopperPaper = styled(MuiPaper, {
 })(({
   ownerState
 }) => _extends({
-  transformOrigin: 'top center',
-  outline: 0
-}, ownerState.placement === 'top' && {
+  outline: 0,
+  transformOrigin: 'top center'
+}, ownerState.placement.includes('top') && {
   transformOrigin: 'bottom center'
 }));
 function clickedRootScrollbar(event, doc) {
@@ -158,6 +160,49 @@ function useClickAwayListener(active, onClickAway) {
   }, [active, handleClickAway]);
   return [nodeRef, handleSynthetic, handleSynthetic];
 }
+const PickersPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      PaperComponent,
+      popperPlacement,
+      ownerState: inOwnerState,
+      children,
+      paperSlotProps,
+      paperClasses,
+      onPaperClick,
+      onPaperTouchStart
+      // picks up the style props provided by `Transition`
+      // https://mui.com/material-ui/transitions/#child-requirement
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = _extends({}, inOwnerState, {
+    placement: popperPlacement
+  });
+  const paperProps = useSlotProps({
+    elementType: PaperComponent,
+    externalSlotProps: paperSlotProps,
+    additionalProps: {
+      tabIndex: -1,
+      elevation: 8,
+      ref
+    },
+    className: paperClasses,
+    ownerState
+  });
+  return /*#__PURE__*/_jsx(PaperComponent, _extends({}, other, paperProps, {
+    onClick: event => {
+      var _paperProps$onClick;
+      onPaperClick(event);
+      (_paperProps$onClick = paperProps.onClick) == null || _paperProps$onClick.call(paperProps, event);
+    },
+    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;
   const props = useThemeProps({
@@ -225,18 +270,6 @@ export function PickersPopper(inProps) {
   const Transition = ((_slots$desktopTransit = slots == null ? void 0 : slots.desktopTransition) != null ? _slots$desktopTransit : reduceAnimations) ? Fade : Grow;
   const TrapFocus = (_slots$desktopTrapFoc = slots == null ? void 0 : slots.desktopTrapFocus) != null ? _slots$desktopTrapFoc : MuiTrapFocus;
   const Paper = (_slots$desktopPaper = slots == null ? void 0 : slots.desktopPaper) != null ? _slots$desktopPaper : PickersPopperPaper;
-  const 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
-  });
-
   const Popper = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : PickersPopperRoot;
   const popperProps = useSlotProps({
     elementType: Popper,
@@ -268,22 +301,17 @@ export function PickersPopper(inProps) {
       isEnabled: () => true
     }, 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: event => {
-            var _paperProps$onClick;
-            onPaperClick(event);
-            (_paperProps$onClick = paperProps.onClick) == null ? void 0 : _paperProps$onClick.call(paperProps, event);
-          },
-          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/internals/demo/DemoContainer.d.ts

@@ -10,6 +10,14 @@ interface DemoItemProps {
     component?: string;
     children: React.ReactNode;
 }
+/**
+ * WARNING: This is an internal component used in documentation to achieve a desired layout.
+ * Please do not use it in your application.
+ */
 export declare function DemoItem(props: DemoItemProps): React.JSX.Element;
+/**
+ * WARNING: This is an internal component used in documentation to achieve a desired layout.
+ * Please do not use it in your application.
+ */
 export declare function DemoContainer(props: DemoGridProps): React.JSX.Element;
 export {};

package/internals/demo/DemoContainer.js

@@ -32,6 +32,10 @@ const getSupportedSectionFromChildName = childName => {
   }
   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) {
   const {
     label,
@@ -62,6 +66,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) {
   const {
     children,

package/internals/hooks/useDefaultReduceAnimations.d.ts

@@ -1,2 +1,2 @@
-export declare const defaultReduceAnimations: boolean;
+export declare const slowAnimationDevices: boolean;
 export declare const useDefaultReduceAnimations: () => boolean;

package/internals/hooks/useDefaultReduceAnimations.js

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

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -81,7 +81,7 @@ export const 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/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts

@@ -41,7 +41,7 @@ export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeV
 export interface UseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView>, Pick<PickersLayoutSlotsComponentsProps<TDate | null, TDate, TView>, 'toolbar'> {
 }
 export interface ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView> {
-    field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, unknown>>, {}, UsePickerProps<TDate | null, any, FieldSection, any, any, any>>;
+    field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, unknown>>, {}, UsePickerProps<TDate | null, TDate, any, FieldSection, any, any, any>>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
     inputAdornment?: Partial<InputAdornmentProps>;
     openPickerButton?: SlotComponentProps<typeof IconButton, {}, UseDesktopPickerProps<TDate, any, any, any>>;
@@ -53,7 +53,7 @@ export interface DesktopOnlyPickerProps<TDate> extends BaseNonStaticPickerProps,
      */
     autoFocus?: boolean;
 }
-export interface UseDesktopPickerProps<TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends BasePickerProps<TDate | null, TDate, TView, TError, TExternalProps, {}>, DesktopOnlyPickerProps<TDate> {
+export interface UseDesktopPickerProps<TDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, any, TView, any, any>> extends BasePickerProps<TDate | null, TDate, TView, TError, TExternalProps, {}>, DesktopOnlyPickerProps<TDate> {
     /**
      * Overridable component slots.
      * @default {}

package/internals/hooks/useField/useField.js

@@ -86,17 +86,17 @@ export const useField = params => {
     setSelectedSections(sectionIndex);
   };
   const handleInputClick = useEventCallback((...args) => {
-    onClick == null ? void 0 : onClick(...args);
+    onClick == null || onClick(...args);
     syncSelectionFromDOM();
   });
   const handleInputMouseUp = useEventCallback(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();
   });
   const handleInputFocus = useEventCallback((...args) => {
-    onFocus == null ? void 0 : onFocus(...args);
+    onFocus == null || onFocus(...args);
     // The ref is guaranteed to be resolved at this point.
     const input = inputRef.current;
     window.clearTimeout(focusTimeoutRef.current);
@@ -118,11 +118,11 @@ export const useField = params => {
     });
   });
   const handleInputBlur = useEventCallback((...args) => {
-    onBlur == null ? void 0 : onBlur(...args);
+    onBlur == null || onBlur(...args);
     setSelectedSections(null);
   });
   const handleInputPaste = useEventCallback(event => {
-    onPaste == null ? void 0 : onPaste(event);
+    onPaste == null || onPaste(event);
     if (readOnly) {
       event.preventDefault();
       return;
@@ -203,7 +203,7 @@ export const useField = params => {
     });
   });
   const handleInputKeyDown = useEventCallback(event => {
-    onKeyDown == null ? void 0 : onKeyDown(event);
+    onKeyDown == null || onKeyDown(event);
 
     // eslint-disable-next-line default-case
     switch (true) {

package/internals/hooks/useField/useField.utils.d.ts

@@ -27,5 +27,4 @@ export declare const getSectionsBoundaries: <TDate>(utils: MuiPickersAdapter<TDa
 export declare const validateSections: <TSection extends FieldSection>(sections: TSection[], valueType: FieldValueType) => void;
 export declare const mergeDateIntoReferenceDate: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, dateToTransferFrom: TDate, sections: FieldSectionWithoutPosition[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
 export declare const isAndroid: () => boolean;
-export declare const clampDaySectionIfPossible: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, sections: TSection[], sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>) => TSection[] | null;
 export declare const getSectionOrder: (sections: FieldSectionWithoutPosition[], isRTL: boolean) => SectionOrdering;

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

@@ -645,54 +645,6 @@ export const mergeDateIntoReferenceDate = (utils, timezone, dateToTransferFrom,
   return mergedDate;
 }, referenceDate);
 export const isAndroid = () => navigator.userAgent.toLowerCase().indexOf('android') > -1;
-export const 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
-  const canClamp = sections.every(section => section.type === 'weekDay' || section.value !== '') && sections.some(section => 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.
-  const sectionsForStartOfMonth = sections.map(section => {
-    if (section.type !== 'day') {
-      return section;
-    }
-    const dayBoundaries = sectionsValueBoundaries.day({
-      currentDate: null,
-      format: section.format,
-      contentType: section.contentType
-    });
-    return _extends({}, section, {
-      value: cleanDigitSectionValue(utils, timezone, dayBoundaries.minimum, dayBoundaries, section)
-    });
-  });
-  const 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(section => {
-    if (section.type !== 'day') {
-      return section;
-    }
-    const 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 const getSectionOrder = (sections, isRTL) => {
   const neighbors = {};
   if (!isRTL) {