@mui/x-date-pickers 6.11.1 → 6.11.2

package/CHANGELOG.md

@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.11.2
+
+_Aug 17, 2023_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🏎️ Lower the filtering delay in the grid
+- 🌍 Improve Spanish (es-ES) locale on the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@v6.11.2`
+
+- [DataGrid] Fix `eval` blocked by CSP (#9863) @romgrk
+- [DataGrid] Fix row id bug (#10051) @romgrk
+- [DataGrid] Honor `disableExport` flag in Print Export (#10044) @MBilalShafi
+- [DataGrid] Lower filter debounce delay (#9712) @romgrk
+- [DataGrid] Unhide potential ref binding issue (#9965) @oliviertassinari
+- [l10n] Improve Chinese (zh-CN) and Chinese(traditional) (zh-TW) locales (#9999) @MyNameIsTakenOMG
+- [l10n] Improve Spanish (es-ES) locale (#10037) @Macampu420
+
+#### `@mui/x-data-grid-pro@v6.11.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-data-grid@v6.11.2`.
+
+#### `@mui/x-data-grid-premium@v6.11.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
+
+Same changes as in `@mui/x-data-grid-pro@v6.11.2`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@v6.11.2`
+
+- [pickers] Fix month switcher RTL (#10003) @alexfauquette
+- [pickers] Follow-up on using device motion reduction preference (#9858) @LukasTy
+- [pickers] Pass the shortcut information in the `onChange` context (#9985) @flaviendelangle
+- [pickers] Replace `Grid` toolbar component with a styled `div` (#10052) @LukasTy
+
+#### `@mui/x-date-pickers-pro@v6.11.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-date-pickers@v6.11.2`.
+
+### Docs
+
+- [docs] Add migration guide for the Tree View (#9987) @flaviendelangle
+- [docs] Fix en-US changelog @oliviertassinari
+- [docs] Update column types (#10040) @romgrk
+
+### Core
+
+- [core] Remove unnecessary Box (#9831) @oliviertassinari
+- [core] Set GitHub Action top level permission @oliviertassinari
+- [core] Split the pickers test utils (#9976) @flaviendelangle
+
 ## 6.11.1
 
 _Aug 11, 2023_
@@ -2872,7 +2928,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 
 #### Changes
 
-- [DateRangePicker] Fix input focused style and mobile behaviour (#6645) @LukasTy
+- [DateRangePicker] Fix input focused style and mobile behavior (#6645) @LukasTy
 - [fields] Update sections when the locale changes (#6649) @flaviendelangle
 - [pickers] Add Ukrainian (uk-UA) locale (#6661) @Dufran
 - [pickers] Allow non-controlled usage of the calendar components (#6643) @flaviendelangle

package/DateCalendar/DateCalendar.js

@@ -486,8 +486,8 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    */
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/DateCalendar/DateCalendar.types.d.ts

@@ -40,8 +40,8 @@ export interface ExportedDateCalendarProps<TDate> extends ExportedDayCalendarPro
      */
     readOnly?: boolean;
     /**
-     * Disable heavy animations.
-     * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+     * If `true`, disable heavy animations.
+     * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
      */
     reduceAnimations?: boolean;
     /**

package/DatePicker/DatePicker.js

@@ -241,8 +241,8 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/DateTimePicker/DateTimePicker.js

@@ -279,8 +279,8 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/DesktopDatePicker/DesktopDatePicker.js

@@ -259,8 +259,8 @@ DesktopDatePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -333,8 +333,8 @@ DesktopDateTimePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/DesktopTimePicker/DesktopTimePicker.js

@@ -254,6 +254,11 @@ DesktopTimePicker.propTypes = {
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   */
+  reduceAnimations: PropTypes.bool,
   /**
    * The currently selected sections.
    * This prop accept four formats:

package/DigitalClock/DigitalClock.js

@@ -41,7 +41,9 @@ const DigitalClockRoot = styled(PickerViewRoot, {
 }) => ({
   overflowY: 'auto',
   width: '100%',
-  scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto',
+  '@media (prefers-reduced-motion: no-preference)': {
+    scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto'
+  },
   maxHeight: DIGITAL_CLOCK_VIEW_HEIGHT
 }));
 const DigitalClockList = styled(MenuList, {

package/MobileDatePicker/MobileDatePicker.js

@@ -256,8 +256,8 @@ MobileDatePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -305,8 +305,8 @@ MobileDateTimePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/MobileTimePicker/MobileTimePicker.js

@@ -232,6 +232,11 @@ MobileTimePicker.propTypes = {
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   */
+  reduceAnimations: PropTypes.bool,
   /**
    * The currently selected sections.
    * This prop accept four formats:

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -33,7 +33,9 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   width: 56,
   padding: 0,
   overflow: 'hidden',
-  scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto',
+  '@media (prefers-reduced-motion: no-preference)': {
+    scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto'
+  },
   '&:hover': {
     overflowY: 'auto'
   },

package/PickersShortcuts/PickersShortcuts.d.ts

@@ -7,6 +7,7 @@ export interface PickersShortcutsItem<TValue> {
     label: string;
     getValue: (params: PickersShortcutsItemGetValueParams<TValue>) => TValue;
 }
+export type PickersShortcutsItemContext = Omit<PickersShortcutsItem<unknown>, 'getValue'>;
 export type PickerShortcutChangeImportance = 'set' | 'accept';
 export interface ExportedPickersShortcutProps<TValue> extends Omit<ListProps, 'onChange'> {
     /**
@@ -25,7 +26,7 @@ export interface ExportedPickersShortcutProps<TValue> extends Omit<ListProps, 'o
 }
 export interface PickersShortcutsProps<TValue> extends ExportedPickersShortcutProps<TValue> {
     isLandscape: boolean;
-    onChange: (newValue: TValue, changeImportance?: PickerShortcutChangeImportance) => void;
+    onChange: (newValue: TValue, changeImportance?: PickerShortcutChangeImportance, shortcut?: PickersShortcutsItemContext) => void;
     isValid: (value: TValue) => boolean;
 }
 declare function PickersShortcuts<TValue>(props: PickersShortcutsProps<TValue>): React.JSX.Element | null;

package/PickersShortcuts/PickersShortcuts.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"];
+const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"],
+  _excluded2 = ["getValue"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import List from '@mui/material/List';
@@ -19,14 +20,18 @@ function PickersShortcuts(props) {
   if (items == null || items.length === 0) {
     return null;
   }
-  const resolvedItems = items.map(item => {
-    const newValue = item.getValue({
+  const resolvedItems = items.map(_ref => {
+    let {
+        getValue
+      } = _ref,
+      item = _objectWithoutPropertiesLoose(_ref, _excluded2);
+    const newValue = getValue({
       isValid
     });
     return {
       label: item.label,
       onClick: () => {
-        onChange(newValue, changeImportance);
+        onChange(newValue, changeImportance, item);
       },
       disabled: !isValid(newValue)
     };

package/PickersShortcuts/index.d.ts

@@ -1,2 +1,2 @@
 export { PickersShortcuts } from './PickersShortcuts';
-export type { PickersShortcutsProps, PickersShortcutsItem, PickerShortcutChangeImportance, } from './PickersShortcuts';
+export type { PickersShortcutsProps, PickersShortcutsItem, PickersShortcutsItemContext, PickerShortcutChangeImportance, } from './PickersShortcuts';

package/StaticDatePicker/StaticDatePicker.js

@@ -201,8 +201,8 @@ StaticDatePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -249,8 +249,8 @@ StaticDateTimePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/StaticTimePicker/StaticTimePicker.js

@@ -175,6 +175,11 @@ StaticTimePicker.propTypes = {
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   */
+  reduceAnimations: PropTypes.bool,
   /**
    * Disable specific clock time.
    * @param {number} clockValue The value to check.

package/TimePicker/TimePicker.js

@@ -213,6 +213,11 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   */
+  reduceAnimations: PropTypes.bool,
   /**
    * The currently selected sections.
    * This prop accept four formats:

package/index.js

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

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -87,21 +87,20 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     goTo: onGoToPrevious,
     label: previousLabel
   };
-  const [leftProps, rightProps] = isRTL ? [nextProps, previousProps] : [previousProps, nextProps];
   const PreviousIconButton = (_slots$previousIconBu = slots == null ? void 0 : slots.previousIconButton) != null ? _slots$previousIconBu : PickersArrowSwitcherButton;
   const previousIconButtonProps = useSlotProps({
     elementType: PreviousIconButton,
     externalSlotProps: slotProps == null ? void 0 : slotProps.previousIconButton,
     additionalProps: {
       size: 'medium',
-      title: leftProps.label,
-      'aria-label': leftProps.label,
-      disabled: leftProps.isDisabled,
+      title: previousProps.label,
+      'aria-label': previousProps.label,
+      disabled: previousProps.isDisabled,
       edge: 'end',
-      onClick: leftProps.goTo
+      onClick: previousProps.goTo
     },
     ownerState: _extends({}, ownerState, {
-      hidden: leftProps.isHidden
+      hidden: previousProps.isHidden
     }),
     className: classes.button
   });
@@ -111,14 +110,14 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     externalSlotProps: slotProps == null ? void 0 : slotProps.nextIconButton,
     additionalProps: {
       size: 'medium',
-      title: rightProps.label,
-      'aria-label': rightProps.label,
-      disabled: rightProps.isDisabled,
+      title: nextProps.label,
+      'aria-label': nextProps.label,
+      disabled: nextProps.isDisabled,
       edge: 'start',
-      onClick: rightProps.goTo
+      onClick: nextProps.goTo
     },
     ownerState: _extends({}, ownerState, {
-      hidden: rightProps.isHidden
+      hidden: nextProps.isHidden
     }),
     className: classes.button
   });

package/internals/components/PickersPopper.d.ts

@@ -15,7 +15,7 @@ export interface PickersPopperSlotsComponent {
     DesktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
     /**
      * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
-     * @default Grow from '@mui/material'.
+     * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
      */
     DesktopTransition?: React.JSXElementConstructor<MuiTransitionProps>;
     /**
@@ -61,5 +61,6 @@ export interface PickerPopperProps extends UsePickerValueActions {
     slotProps?: PickersPopperSlotsComponentsProps;
     classes?: Partial<PickersPopperClasses>;
     shouldRestoreFocus?: () => boolean;
+    reduceAnimations?: boolean;
 }
 export declare function PickersPopper(inProps: PickerPopperProps): React.JSX.Element;

package/internals/components/PickersPopper.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import Grow from '@mui/material/Grow';
+import Fade from '@mui/material/Fade';
 import MuiPaper from '@mui/material/Paper';
 import MuiPopper from '@mui/material/Popper';
 import MuiTrapFocus from '@mui/material/Unstable_TrapFocus';
@@ -9,6 +10,7 @@ import { unstable_useForkRef as useForkRef, unstable_useEventCallback as useEven
 import { styled, useThemeProps } from '@mui/material/styles';
 import { getPickersPopperUtilityClass } from './pickersPopperClasses';
 import { getActiveElement } from '../utils/utils';
+import { useDefaultReduceAnimations } from '../hooks/useDefaultReduceAnimations';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -173,7 +175,8 @@ export function PickersPopper(inProps) {
     role,
     placement,
     slots,
-    slotProps
+    slotProps,
+    reduceAnimations: inReduceAnimations
   } = props;
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
@@ -210,6 +213,8 @@ export function PickersPopper(inProps) {
   const handlePaperRef = useForkRef(handleRef, clickAwayRef);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
+  const defaultReduceAnimations = useDefaultReduceAnimations();
+  const reduceAnimations = inReduceAnimations != null ? inReduceAnimations : defaultReduceAnimations;
   const handleKeyDown = event => {
     if (event.key === 'Escape') {
       // stop the propagation to avoid closing parent modal
@@ -217,7 +222,7 @@ export function PickersPopper(inProps) {
       onDismiss();
     }
   };
-  const Transition = (_slots$desktopTransit = slots == null ? void 0 : slots.desktopTransition) != null ? _slots$desktopTransit : Grow;
+  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({

package/internals/components/PickersToolbar.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
-import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -40,17 +39,24 @@ const PickersToolbarRoot = styled('div', {
   justifyContent: 'flex-start',
   flexWrap: 'wrap'
 }));
-const PickersToolbarContent = styled(Grid, {
+const PickersToolbarContent = styled('div', {
   name: 'MuiPickersToolbar',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content
 })(({
   ownerState
-}) => _extends({
-  flex: 1
-}, !ownerState.isLandscape && {
-  alignItems: 'center'
-}));
+}) => {
+  var _ownerState$landscape;
+  return {
+    display: 'flex',
+    flexWrap: 'wrap',
+    width: '100%',
+    justifyContent: ownerState.isLandscape ? 'flex-start' : 'space-between',
+    flexDirection: ownerState.isLandscape ? (_ownerState$landscape = ownerState.landscapeDirection) != null ? _ownerState$landscape : 'column' : 'row',
+    flex: 1,
+    alignItems: ownerState.isLandscape ? 'flex-start' : 'center'
+  };
+});
 export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersToolbar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -59,8 +65,6 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
   const {
     children,
     className,
-    isLandscape,
-    landscapeDirection = 'column',
     toolbarTitle,
     hidden,
     titleId
@@ -80,12 +84,8 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
       id: titleId,
       children: toolbarTitle
     }), /*#__PURE__*/_jsx(PickersToolbarContent, {
-      container: true,
-      justifyContent: isLandscape ? 'flex-start' : 'space-between',
       className: classes.content,
       ownerState: ownerState,
-      direction: isLandscape ? landscapeDirection : 'row',
-      alignItems: isLandscape ? 'flex-start' : 'flex-end',
       children: children
     })]
   });

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -42,7 +42,8 @@ export const useDesktopPicker = _ref => {
     readOnly,
     disabled,
     autoFocus,
-    localeText
+    localeText,
+    reduceAnimations
   } = props;
   const utils = useUtils();
   const internalInputRef = React.useRef(null);
@@ -156,6 +157,7 @@ export const useDesktopPicker = _ref => {
       slots: slots,
       slotProps: slotProps,
       shouldRestoreFocus: shouldRestoreFocus,
+      reduceAnimations: reduceAnimations,
       children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps == null ? void 0 : slotProps.layout, {
         slots: slots,
         slotProps: slotProps,

package/internals/hooks/usePicker/usePickerValue.js

@@ -221,6 +221,11 @@ export const usePickerValue = ({
       const context = {
         validationError
       };
+
+      // TODO v7: Remove 2nd condition
+      if (action.name === 'setValueFromShortcut' && action.shortcut != null) {
+        context.shortcut = action.shortcut;
+      }
       handleValueChange(action.value, context);
     }
     if (shouldCommit && onAccept) {
@@ -283,10 +288,13 @@ export const usePickerValue = ({
     value: newValue,
     selectionState
   }));
-  const handleSelectShortcut = useEventCallback((newValue, changeImportance) => updateDate({
+
+  // TODO v7: Make changeImportance and label mandatory.
+  const handleSelectShortcut = useEventCallback((newValue, changeImportance, shortcut) => updateDate({
     name: 'setValueFromShortcut',
     value: newValue,
-    changeImportance: changeImportance != null ? changeImportance : 'accept'
+    changeImportance: changeImportance != null ? changeImportance : 'accept',
+    shortcut
   }));
   const handleChangeFromField = useEventCallback((newValue, context) => updateDate({
     name: 'setValueFromField',

package/internals/hooks/usePicker/usePickerValue.types.d.ts

@@ -2,9 +2,9 @@ import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField';
 import { InferError, Validator } from '../useValidation';
 import { UseFieldValidationProps } from '../useField/useField.types';
 import { WrapperVariant } from '../../models/common';
-import { FieldSection, FieldSelectedSections, FieldValueType, TimezoneProps, MuiPickersAdapter, PickersTimezone } from '../../../models';
+import { FieldSection, FieldSelectedSections, FieldValueType, TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext } from '../../../models';
 import { GetDefaultReferenceDateProps } from '../../utils/getDefaultReferenceDate';
-import { PickerShortcutChangeImportance } from '../../../PickersShortcuts';
+import { PickerShortcutChangeImportance, PickersShortcutsItemContext } from '../../../PickersShortcuts';
 export interface PickerValueManager<TValue, TDate, TError> {
     /**
      * Determines if two values are equal.
@@ -105,9 +105,6 @@ export interface PickerValueManager<TValue, TDate, TError> {
      */
     setTimezone: (utils: MuiPickersAdapter<TDate>, timezone: PickersTimezone, value: TValue) => TValue;
 }
-export interface PickerChangeHandlerContext<TError> {
-    validationError: TError;
-}
 export type PickerSelectionState = 'partial' | 'shallow' | 'finish';
 export interface UsePickerValueState<TValue> {
     /**
@@ -168,6 +165,7 @@ export type PickerValueUpdateAction<TValue, TError> = {
     name: 'setValueFromShortcut';
     value: TValue;
     changeImportance: PickerShortcutChangeImportance;
+    shortcut?: PickersShortcutsItemContext;
 };
 /**
  * Props used to handle the value that are common to all pickers.

package/internals/hooks/usePicker/usePickerViews.d.ts

@@ -31,6 +31,11 @@ export interface UsePickerViewsBaseProps<TValue, TView extends DateOrTimeViewWit
      * If `undefined`, internally defined view will be the used.
      */
     viewRenderers: PickerViewRendererLookup<TValue, TView, TExternalProps, TAdditionalProps>;
+    /**
+     * If `true`, disable heavy animations.
+     * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+     */
+    reduceAnimations?: boolean;
 }
 /**
  * Props used to handle the views of the pickers.

package/legacy/DateCalendar/DateCalendar.js

@@ -495,8 +495,8 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
    */
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/legacy/DatePicker/DatePicker.js

@@ -240,8 +240,8 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/legacy/DateTimePicker/DateTimePicker.js

@@ -278,8 +278,8 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -258,8 +258,8 @@ DesktopDatePicker.propTypes = {
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**