@mui/x-date-pickers 6.11.1 → 6.12.0

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

@@ -3,7 +3,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 const useFieldState = params => {
@@ -209,21 +209,7 @@ export const useFieldState = params => {
     const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
     const newSections = setSectionValue(selectedSectionIndexes.startIndex, newSectionValue);
     const newActiveDateSections = activeDateManager.getSections(newSections);
-    let newActiveDate = getDateFromDateSections(utils, newActiveDateSections);
-    let 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)) {
-      const clampedSections = clampDaySectionIfPossible(utils, timezone, newActiveDateSections, sectionsValueBoundaries);
-      if (clampedSections != null) {
-        shouldRegenSections = true;
-        newActiveDate = getDateFromDateSections(utils, clampedSections);
-      }
-    }
+    const newActiveDate = getDateFromDateSections(utils, newActiveDateSections);
     let values;
     let shouldPublish;
 
@@ -241,22 +227,16 @@ export const 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.
-     */
-    const 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: newSections
       }));
     }
     return setState(prevState => _extends({}, prevState, values, {
-      sections,
+      sections: newSections,
       tempValueStrAndroid: null
     }));
   };

package/modern/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 ?? 'accept'
+    changeImportance: changeImportance ?? 'accept',
+    shortcut
   }));
   const handleChangeFromField = useEventCallback((newValue, context) => updateDate({
     name: 'setValueFromField',

package/modern/models/index.js

@@ -3,4 +3,5 @@ export * from './timezone';
 export * from './validation';
 export * from './views';
 export * from './adapters';
-export * from './common';
+export * from './common';
+export * from './pickers';

package/modern/models/pickers.js

@@ -0,0 +1 @@
+export {};

package/modern/tests/describeAdapters/describeAdapters.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import moment from 'moment';
 import momentTZ from 'moment-timezone';
 import createDescribe from '@mui/monorepo/test/utils/createDescribe';
-import { buildFieldInteractions, createPickerRenderer } from 'test/utils/pickers-utils';
+import { buildFieldInteractions, createPickerRenderer } from 'test/utils/pickers';
 const ADAPTERS = ['dayjs', 'date-fns', 'luxon', 'moment'];
 function innerDescribeAdapters(title, FieldComponent, testRunner) {
   ADAPTERS.forEach(adapterName => {

package/modern/tests/describeGregorianAdapter/testCalculations.js

@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import { getDateOffset } from 'test/utils/pickers-utils';
+import { getDateOffset } from 'test/utils/pickers';
 import { TEST_DATE_ISO_STRING, TEST_DATE_LOCALE_STRING } from './describeGregorianAdapter.utils';
 
 /**

package/modern/tests/describeGregorianAdapter/testLocalization.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import { stub } from 'sinon';
-import { cleanText } from 'test/utils/pickers-utils';
+import { cleanText } from 'test/utils/pickers';
 import { TEST_DATE_ISO_STRING } from './describeGregorianAdapter.utils';
 export const testLocalization = ({
   adapter

package/modern/tests/describeValidation/testDayViewValidation.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { expect } from 'chai';
 import * as React from 'react';
 import { screen } from '@mui/monorepo/test/utils';
-import { adapterToUse } from 'test/utils/pickers-utils';
+import { adapterToUse } from 'test/utils/pickers';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const testDayViewValidation = (ElementToTest, getOptions) => {
   const {

package/modern/tests/describeValidation/testMinutesViewValidation.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { expect } from 'chai';
 import * as React from 'react';
+import { expect } from 'chai';
 import { screen } from '@mui/monorepo/test/utils';
-import { adapterToUse } from 'test/utils/pickers-utils';
+import { adapterToUse } from 'test/utils/pickers';
 import { jsx as _jsx } from "react/jsx-runtime";
 const toMinutesLabel = minutes => `${Number(minutes) < 10 ? `0${minutes}` : minutes} minutes`;
 export const testMinutesViewValidation = (ElementToTest, getOption) => {

package/modern/tests/describeValidation/testMonthViewValidation.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { expect } from 'chai';
 import * as React from 'react';
 import { screen } from '@mui/monorepo/test/utils';
-import { adapterToUse } from 'test/utils/pickers-utils';
+import { adapterToUse } from 'test/utils/pickers';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const testMonthViewValidation = (ElementToTest, getOptions) => {
   const {

package/modern/tests/describeValidation/testTextFieldValidation.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { screen } from '@mui/monorepo/test/utils';
-import { adapterToUse } from 'test/utils/pickers-utils';
+import { adapterToUse } from 'test/utils/pickers';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const testTextFieldValidation = (ElementToTest, getOptions) => {
   const {

package/modern/tests/describeValidation/testYearViewValidation.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { expect } from 'chai';
 import { screen } from '@mui/monorepo/test/utils';
-import { adapterToUse } from 'test/utils/pickers-utils';
+import { adapterToUse } from 'test/utils/pickers';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const testYearViewValidation = (ElementToTest, getOptions) => {
   const {

package/modern/tests/describeValue/describeValue.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["hook"];
 import * as React from 'react';
 import createDescribe from '@mui/monorepo/test/utils/createDescribe';
-import { buildFieldInteractions } from 'test/utils/pickers-utils';
+import { buildFieldInteractions } from 'test/utils/pickers';
 import { testControlledUnControlled } from './testControlledUnControlled';
 import { testPickerOpenCloseLifeCycle } from './testPickerOpenCloseLifeCycle';
 import { testPickerActionBar } from './testPickerActionBar';

package/modern/tests/describeValue/testControlledUnControlled.js

@@ -6,7 +6,7 @@ import { expect } from 'chai';
 import { spy } from 'sinon';
 import { screen, act, userEvent } from '@mui/monorepo/test/utils';
 import { inputBaseClasses } from '@mui/material/InputBase';
-import { getExpectedOnChangeCount } from 'test/utils/pickers-utils';
+import { getExpectedOnChangeCount } from 'test/utils/pickers';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const testControlledUnControlled = (ElementToTest, options) => {

package/modern/tests/describeValue/testPickerActionBar.js

@@ -4,8 +4,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { screen, userEvent } from '@mui/monorepo/test/utils';
-import { adapterToUse, getExpectedOnChangeCount } from 'test/utils/pickers-utils';
-import { expectPickerChangeHandlerValue } from 'test/utils/pickers/assertions';
+import { adapterToUse, getExpectedOnChangeCount, expectPickerChangeHandlerValue } from 'test/utils/pickers';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const testPickerActionBar = (ElementToTest, options) => {
   const {

package/modern/tests/describeValue/testPickerOpenCloseLifeCycle.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { screen, userEvent } from '@mui/monorepo/test/utils';
-import { getExpectedOnChangeCount, getTextbox, openPicker } from 'test/utils/pickers-utils';
+import { getExpectedOnChangeCount, getTextbox, openPicker } from 'test/utils/pickers';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const testPickerOpenCloseLifeCycle = (ElementToTest, options) => {
   const {

package/modern/tests/describeValue/testShortcuts.js

@@ -3,7 +3,7 @@ const _excluded = ["componentFamily", "render", "renderWithProps", "values", "em
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { expectPickerChangeHandlerValue } from 'test/utils/pickers/assertions';
+import { expectPickerChangeHandlerValue } from 'test/utils/pickers';
 import { userEvent, screen } from '@mui/monorepo/test/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const testShortcuts = (ElementToTest, options) => {

package/node/DateCalendar/DateCalendar.js

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

package/node/DatePicker/DatePicker.js

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

package/node/DateTimePicker/DateTimePicker.js

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

package/node/DesktopDatePicker/DesktopDatePicker.js

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

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

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

package/node/DesktopTimePicker/DesktopTimePicker.js

@@ -260,6 +260,11 @@ DesktopTimePicker.propTypes = {
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
   readOnly: _propTypes.default.bool,
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations: _propTypes.default.bool,
   /**
    * The currently selected sections.
    * This prop accept four formats:

package/node/DigitalClock/DigitalClock.js

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

package/node/MobileDatePicker/MobileDatePicker.js

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

package/node/MobileDateTimePicker/MobileDateTimePicker.js

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

package/node/MobileTimePicker/MobileTimePicker.js

@@ -238,6 +238,11 @@ MobileTimePicker.propTypes = {
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
   readOnly: _propTypes.default.bool,
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations: _propTypes.default.bool,
   /**
    * The currently selected sections.
    * This prop accept four formats:

package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -42,7 +42,9 @@ const MultiSectionDigitalClockSectionRoot = (0, _styles.styled)(_MenuList.defaul
   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/node/PickersShortcuts/PickersShortcuts.js

@@ -14,7 +14,8 @@ var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 var _dimensions = require("../internals/constants/dimensions");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"];
+const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"],
+  _excluded2 = ["getValue"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function PickersShortcuts(props) {
@@ -28,14 +29,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 = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
+    const newValue = getValue({
       isValid
     });
     return {
       label: item.label,
       onClick: () => {
-        onChange(newValue, changeImportance);
+        onChange(newValue, changeImportance, item);
       },
       disabled: !isValid(newValue)
     };

package/node/StaticDatePicker/StaticDatePicker.js

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

package/node/StaticDateTimePicker/StaticDateTimePicker.js

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

package/node/StaticTimePicker/StaticTimePicker.js

@@ -184,6 +184,11 @@ StaticTimePicker.propTypes = {
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
   readOnly: _propTypes.default.bool,
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations: _propTypes.default.bool,
   /**
    * Disable specific clock time.
    * @param {number} clockValue The value to check.

package/node/TimePicker/TimePicker.js

@@ -223,6 +223,11 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
   readOnly: _propTypes.default.bool,
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations: _propTypes.default.bool,
   /**
    * The currently selected sections.
    * This prop accept four formats:

package/node/YearCalendar/YearCalendar.js

@@ -60,7 +60,10 @@ const YearCalendarRoot = (0, _styles.styled)('div', {
   height: '100%',
   padding: '0 4px',
   width: 320,
-  maxHeight: 304
+  maxHeight: 304,
+  // avoid padding increasing width over defined
+  boxSizing: 'border-box',
+  position: 'relative'
 });
 const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps, ref) {
   const props = useYearCalendarDefaultizedProps(inProps, 'MuiYearCalendar');

package/node/index.js

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

package/node/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -94,21 +94,20 @@ const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrow
     goTo: onGoToPrevious,
     label: previousLabel
   };
-  const [leftProps, rightProps] = isRTL ? [nextProps, previousProps] : [previousProps, nextProps];
   const PreviousIconButton = slots?.previousIconButton ?? PickersArrowSwitcherButton;
   const previousIconButtonProps = (0, _utils2.useSlotProps)({
     elementType: PreviousIconButton,
     externalSlotProps: 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: (0, _extends2.default)({}, ownerState, {
-      hidden: leftProps.isHidden
+      hidden: previousProps.isHidden
     }),
     className: classes.button
   });
@@ -118,14 +117,14 @@ const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrow
     externalSlotProps: 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: (0, _extends2.default)({}, ownerState, {
-      hidden: rightProps.isHidden
+      hidden: nextProps.isHidden
     }),
     className: classes.button
   });