@mui/x-date-pickers 6.11.0 → 6.11.1

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -18,6 +18,7 @@ var _useUtils = require("../internals/hooks/useUtils");
 var _dateTimePickerToolbarClasses = require("./dateTimePickerToolbarClasses");
 var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
 var _dimensions = require("../internals/constants/dimensions");
+var _dateUtils = require("../internals/utils/date-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "disabled", "readOnly", "toolbarVariant"];
 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); }
@@ -272,14 +273,14 @@ function DateTimePickerToolbar(inProps) {
           variant: "subtitle2",
           selected: meridiemMode === 'am',
           typographyClassName: classes.ampmLabel,
-          value: utils.getMeridiemText('am'),
+          value: (0, _dateUtils.formatMeridiem)(utils, 'am'),
           onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
           disabled: disabled
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
           variant: "subtitle2",
           selected: meridiemMode === 'pm',
           typographyClassName: classes.ampmLabel,
-          value: utils.getMeridiemText('pm'),
+          value: (0, _dateUtils.formatMeridiem)(utils, 'pm'),
           onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
           disabled: disabled
         })]
@@ -287,7 +288,7 @@ function DateTimePickerToolbar(inProps) {
         variant: "h5",
         onClick: () => onViewChange('meridiem'),
         selected: view === 'meridiem',
-        value: value && meridiemMode ? utils.getMeridiemText(meridiemMode) : '--',
+        value: value && meridiemMode ? (0, _dateUtils.formatMeridiem)(utils, meridiemMode) : '--',
         width: _dimensions.MULTI_SECTION_CLOCK_SECTION_WIDTH
       })]
     })]

package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -24,6 +24,7 @@ var _MultiSectionDigitalClock = require("./MultiSectionDigitalClock.utils");
 var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useClockReferenceDate = require("../internals/hooks/useClockReferenceDate");
+var _dateUtils = require("../internals/utils/date-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ampm", "timeSteps", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "skipDisabled", "timezone"];
 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); }
@@ -278,8 +279,8 @@ const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function MultiSec
         }
       case 'meridiem':
         {
-          const amLabel = utils.getMeridiemText('am');
-          const pmLabel = utils.getMeridiemText('pm');
+          const amLabel = (0, _dateUtils.formatMeridiem)(utils, 'am');
+          const pmLabel = (0, _dateUtils.formatMeridiem)(utils, 'pm');
           return {
             onChange: handleMeridiemChange,
             items: [{

package/node/PickersDay/PickersDay.js

@@ -233,6 +233,7 @@ process.env.NODE_ENV !== "production" ? PickersDayRaw.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
+  component: _propTypes.default.elementType,
   /**
    * The date to show.
    */

package/node/PickersShortcuts/PickersShortcuts.js

@@ -68,6 +68,7 @@ process.env.NODE_ENV !== "production" ? PickersShortcuts.propTypes = {
    */
   changeImportance: _propTypes.default.oneOf(['accept', 'set']),
   className: _propTypes.default.string,
+  component: _propTypes.default.elementType,
   /**
    * If `true`, compact vertical padding designed for keyboard and mouse input is used for
    * the list and list items.

package/node/TimeField/TimeField.js

@@ -99,6 +99,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default 'primary'
    */
   color: _propTypes.default.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: _propTypes.default.elementType,
   /**
    * Overridable components.
    * @default {}

package/node/TimePicker/TimePickerToolbar.js

@@ -18,6 +18,7 @@ var _utils2 = require("../internals/utils/utils");
 var _useUtils = require("../internals/hooks/useUtils");
 var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
 var _timePickerToolbarClasses = require("./timePickerToolbarClasses");
+var _dateUtils = require("../internals/utils/date-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly"];
 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); }
@@ -187,7 +188,7 @@ function TimePickerToolbar(inProps) {
         variant: "subtitle2",
         selected: meridiemMode === 'am',
         typographyClassName: classes.ampmLabel,
-        value: utils.getMeridiemText('am'),
+        value: (0, _dateUtils.formatMeridiem)(utils, 'am'),
         onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
         disabled: disabled
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
@@ -195,7 +196,7 @@ function TimePickerToolbar(inProps) {
         variant: "subtitle2",
         selected: meridiemMode === 'pm',
         typographyClassName: classes.ampmLabel,
-        value: utils.getMeridiemText('pm'),
+        value: (0, _dateUtils.formatMeridiem)(utils, 'pm'),
         onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
         disabled: disabled
       })]

package/node/index.js

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

package/node/internals/hooks/useField/useField.js

@@ -375,7 +375,7 @@ const useField = params => {
     if (state.sections[selectedSectionIndexes.startIndex].contentType === 'letter') {
       return 'text';
     }
-    return 'tel';
+    return 'numeric';
   }, [selectedSectionIndexes, state.sections]);
   const inputHasFocus = inputRef.current && inputRef.current === (0, _utils.getActiveElement)(document);
   const shouldShowPlaceholder = !inputHasFocus && valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);

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

@@ -48,7 +48,7 @@ const shouldPublishValue = params => {
     }
     return hasChanged(dateState.lastPublishedValue);
   }
-  if (action.name === 'setValueFromShortcut' && action.changeImportance === 'accept') {
+  if (action.name === 'setValueFromShortcut') {
     // On the first view,
     // If the value is not controlled, then clicking on any value (including the one equal to `defaultValue`) should call `onChange`
     if (isCurrentValueTheDefaultValue) {

package/node/internals/utils/date-utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resolveDateFormat = exports.replaceInvalidDateByNull = exports.mergeDateAndTime = exports.isDatePickerView = exports.getTodayDate = exports.getMonthsInYear = exports.findClosestEnabledDate = exports.areDatesEqual = exports.applyDefaultDate = void 0;
+exports.resolveDateFormat = exports.replaceInvalidDateByNull = exports.mergeDateAndTime = exports.isDatePickerView = exports.getTodayDate = exports.getMonthsInYear = exports.formatMeridiem = exports.findClosestEnabledDate = exports.areDatesEqual = exports.applyDefaultDate = void 0;
 var _views = require("./views");
 const findClosestEnabledDate = ({
   date,
@@ -93,6 +93,11 @@ const mergeDateAndTime = (utils, dateParam, timeParam) => {
 exports.mergeDateAndTime = mergeDateAndTime;
 const getTodayDate = (utils, timezone, valueType) => valueType === 'date' ? utils.startOfDay(utils.dateWithTimezone(undefined, timezone)) : utils.dateWithTimezone(undefined, timezone);
 exports.getTodayDate = getTodayDate;
+const formatMeridiem = (utils, meridiem) => {
+  const date = utils.setHours(utils.date(), meridiem === 'am' ? 2 : 14);
+  return utils.format(date, 'meridiem');
+};
+exports.formatMeridiem = formatMeridiem;
 const dateViews = ['year', 'month', 'day'];
 const isDatePickerView = view => dateViews.includes(view);
 exports.isDatePickerView = isDatePickerView;

package/node/locales/fiFI.js

@@ -40,11 +40,10 @@ const fiFIPickers = {
   // Digital clock labels
   selectViewText: view => `Valitse ${views[view]}`,
   // Calendar labels
-  // calendarWeekNumberHeaderLabel: 'Week number',
-  // calendarWeekNumberHeaderText: '#',
-  // calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
-  // calendarWeekNumberText: weekNumber => `${weekNumber}`,
-
+  calendarWeekNumberHeaderLabel: 'Viikko',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `Viikko ${weekNumber}`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Valitse päivä, valittu päivä on ${utils.format(value, 'fullDate')}` : 'Valitse päivä',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Valitse aika, valittu aika on ${utils.format(value, 'fullTime')}` : 'Valitse aika',

package/node/locales/isIS.js

@@ -40,28 +40,25 @@ const isISPickers = {
   // Digital clock labels
   selectViewText: view => `Velja ${timeViews[view]}`,
   // Calendar labels
-  // calendarWeekNumberHeaderLabel: 'Week number',
-  // calendarWeekNumberHeaderText: '#',
-  // calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
-  // calendarWeekNumberText: weekNumber => `${weekNumber}`,
-
+  calendarWeekNumberHeaderLabel: 'Vikunúmer',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `Vika ${weekNumber}`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
   openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Velja dagsetningu, valin dagsetning er ${utils.format(value, 'fullDate')}` : 'Velja dagsetningu',
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Velja tíma, valinn tími er ${utils.format(value, 'fullTime')}` : 'Velja tíma',
   // Table labels
   timeTableLabel: 'velja tíma',
-  dateTableLabel: 'velja dagsetningu'
-
+  dateTableLabel: 'velja dagsetningu',
   // Field section placeholders
-  // fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
-  // fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
-  // fieldDayPlaceholder: () => 'DD',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
-  // fieldHoursPlaceholder: () => 'hh',
-  // fieldMinutesPlaceholder: () => 'mm',
-  // fieldSecondsPlaceholder: () => 'ss',
-  // fieldMeridiemPlaceholder: () => 'aa',
+  fieldYearPlaceholder: params => 'Á'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
+  fieldDayPlaceholder: () => 'DD',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldHoursPlaceholder: () => 'kk',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'ee'
 };
-
 const isIS = (0, _getPickersLocalization.getPickersLocalization)(isISPickers);
 exports.isIS = isIS;

package/node/tests/describeValue/describeValue.js

@@ -13,11 +13,12 @@ var _pickersUtils = require("test/utils/pickers-utils");
 var _testControlledUnControlled = require("./testControlledUnControlled");
 var _testPickerOpenCloseLifeCycle = require("./testPickerOpenCloseLifeCycle");
 var _testPickerActionBar = require("./testPickerActionBar");
+var _testShortcuts = require("./testShortcuts");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["hook"];
 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; }
-const TEST_SUITES = [_testControlledUnControlled.testControlledUnControlled, _testPickerOpenCloseLifeCycle.testPickerOpenCloseLifeCycle, _testPickerActionBar.testPickerActionBar];
+const TEST_SUITES = [_testControlledUnControlled.testControlledUnControlled, _testPickerOpenCloseLifeCycle.testPickerOpenCloseLifeCycle, _testPickerActionBar.testPickerActionBar, _testShortcuts.testShortcuts];
 function innerDescribeValue(ElementToTest, getOptions) {
   const options = getOptions();
   const {

package/node/tests/describeValue/testPickerActionBar.js

@@ -11,6 +11,7 @@ var _chai = require("chai");
 var _sinon = require("sinon");
 var _utils = require("@mui/monorepo/test/utils");
 var _pickersUtils = require("test/utils/pickers-utils");
+var _assertions = require("test/utils/pickers/assertions");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["componentFamily", "render", "renderWithProps", "values", "emptyValue", "setNewValue"];
 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); }
@@ -50,21 +51,9 @@ const testPickerActionBar = (ElementToTest, options) => {
         // Clear the date
         _utils.userEvent.mousePress(_utils.screen.getByText(/clear/i));
         (0, _chai.expect)(onChange.callCount).to.equal(1);
-        if (pickerParams.type === 'date-range') {
-          onChange.lastCall.args[0].forEach((value, index) => {
-            (0, _chai.expect)(value).to.deep.equal(emptyValue[index]);
-          });
-        } else {
-          (0, _chai.expect)(onChange.lastCall.args[0]).to.deep.equal(emptyValue);
-        }
+        (0, _assertions.expectPickerChangeHandlerValue)(pickerParams.type, onChange, emptyValue);
         (0, _chai.expect)(onAccept.callCount).to.equal(1);
-        if (pickerParams.type === 'date-range') {
-          onAccept.lastCall.args[0].forEach((value, index) => {
-            (0, _chai.expect)(value).to.deep.equal(emptyValue[index]);
-          });
-        } else {
-          (0, _chai.expect)(onAccept.lastCall.args[0]).to.deep.equal(emptyValue);
-        }
+        (0, _assertions.expectPickerChangeHandlerValue)(pickerParams.type, onAccept, emptyValue);
         (0, _chai.expect)(onClose.callCount).to.equal(1);
       });
       it('should not call onChange or onAccept if the value is already empty value', () => {
@@ -256,23 +245,18 @@ const testPickerActionBar = (ElementToTest, options) => {
           }
         }));
         _utils.userEvent.mousePress(_utils.screen.getByText(/today/i));
-        const startOfToday = pickerParams.type === 'date' ? _pickersUtils.adapterToUse.startOfDay(_pickersUtils.adapterToUse.date()) : _pickersUtils.adapterToUse.date();
-        (0, _chai.expect)(onChange.callCount).to.equal(1);
-        if (pickerParams.type === 'date-range') {
-          onChange.lastCall.args[0].forEach(value => {
-            (0, _chai.expect)(value).toEqualDateTime(startOfToday);
-          });
+        let startOfToday;
+        if (pickerParams.type === 'date') {
+          startOfToday = _pickersUtils.adapterToUse.startOfDay(_pickersUtils.adapterToUse.date());
+        } else if (pickerParams.type === 'date-range') {
+          startOfToday = [_pickersUtils.adapterToUse.date(), _pickersUtils.adapterToUse.date()];
         } else {
-          (0, _chai.expect)(onChange.lastCall.args[0]).toEqualDateTime(startOfToday);
+          startOfToday = _pickersUtils.adapterToUse.date();
         }
+        (0, _chai.expect)(onChange.callCount).to.equal(1);
+        (0, _assertions.expectPickerChangeHandlerValue)(pickerParams.type, onChange, startOfToday);
         (0, _chai.expect)(onAccept.callCount).to.equal(1);
-        if (pickerParams.type === 'date-range') {
-          onAccept.lastCall.args[0].forEach(value => {
-            (0, _chai.expect)(value).toEqualDateTime(startOfToday);
-          });
-        } else {
-          (0, _chai.expect)(onAccept.lastCall.args[0]).toEqualDateTime(startOfToday);
-        }
+        (0, _assertions.expectPickerChangeHandlerValue)(pickerParams.type, onAccept, startOfToday);
         (0, _chai.expect)(onClose.callCount).to.equal(1);
       });
     });

package/node/tests/describeValue/testShortcuts.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.testShortcuts = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _chai = require("chai");
+var _sinon = require("sinon");
+var _assertions = require("test/utils/pickers/assertions");
+var _utils = require("@mui/monorepo/test/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["componentFamily", "render", "renderWithProps", "values", "emptyValue", "setNewValue"];
+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; }
+const testShortcuts = (ElementToTest, options) => {
+  const {
+      componentFamily,
+      render,
+      values
+    } = options,
+    pickerParams = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+  if (componentFamily !== 'picker') {
+    return;
+  }
+  describe('Picker shortcuts', () => {
+    it('should call onClose, onChange and onAccept when picking a shortcut without explicit changeImportance', () => {
+      const onChange = (0, _sinon.spy)();
+      const onAccept = (0, _sinon.spy)();
+      const onClose = (0, _sinon.spy)();
+      render( /*#__PURE__*/(0, _jsxRuntime.jsx)(ElementToTest, {
+        onChange: onChange,
+        onAccept: onAccept,
+        onClose: onClose,
+        defaultValue: values[0],
+        open: true,
+        closeOnSelect: true,
+        slotProps: {
+          shortcuts: {
+            items: [{
+              label: 'Test shortcut',
+              getValue: () => values[1]
+            }]
+          }
+        }
+      }));
+      const shortcut = _utils.screen.getByRole('button', {
+        name: 'Test shortcut'
+      });
+      _utils.userEvent.mousePress(shortcut);
+      (0, _chai.expect)(onChange.callCount).to.equal(1);
+      (0, _assertions.expectPickerChangeHandlerValue)(pickerParams.type, onChange, values[1]);
+      (0, _chai.expect)(onAccept.callCount).to.equal(1);
+      (0, _assertions.expectPickerChangeHandlerValue)(pickerParams.type, onAccept, values[1]);
+      (0, _chai.expect)(onClose.callCount).to.equal(1);
+    });
+    it('should call onClose and onChange when picking a shortcut with changeImportance="accept"', () => {
+      const onChange = (0, _sinon.spy)();
+      const onAccept = (0, _sinon.spy)();
+      const onClose = (0, _sinon.spy)();
+      render( /*#__PURE__*/(0, _jsxRuntime.jsx)(ElementToTest, {
+        onChange: onChange,
+        onAccept: onAccept,
+        onClose: onClose,
+        defaultValue: values[0],
+        open: true,
+        closeOnSelect: true,
+        slotProps: {
+          shortcuts: {
+            items: [{
+              label: 'Test shortcut',
+              getValue: () => values[1]
+            }],
+            changeImportance: 'accept'
+          }
+        }
+      }));
+      const shortcut = _utils.screen.getByRole('button', {
+        name: 'Test shortcut'
+      });
+      _utils.userEvent.mousePress(shortcut);
+      (0, _chai.expect)(onChange.callCount).to.equal(1);
+      (0, _assertions.expectPickerChangeHandlerValue)(pickerParams.type, onChange, values[1]);
+      (0, _chai.expect)(onAccept.callCount).to.equal(1);
+      (0, _assertions.expectPickerChangeHandlerValue)(pickerParams.type, onAccept, values[1]);
+      (0, _chai.expect)(onClose.callCount).to.equal(1);
+    });
+    it('should call onClose and onChange when picking a shortcut with changeImportance="set"', () => {
+      const onChange = (0, _sinon.spy)();
+      const onAccept = (0, _sinon.spy)();
+      const onClose = (0, _sinon.spy)();
+      render( /*#__PURE__*/(0, _jsxRuntime.jsx)(ElementToTest, {
+        onChange: onChange,
+        onAccept: onAccept,
+        onClose: onClose,
+        defaultValue: values[0],
+        open: true,
+        closeOnSelect: true,
+        slotProps: {
+          shortcuts: {
+            items: [{
+              label: 'Test shortcut',
+              getValue: () => values[1]
+            }],
+            changeImportance: 'set'
+          }
+        }
+      }));
+      const shortcut = _utils.screen.getByRole('button', {
+        name: 'Test shortcut'
+      });
+      _utils.userEvent.mousePress(shortcut);
+      (0, _chai.expect)(onChange.callCount).to.equal(1);
+      (0, _assertions.expectPickerChangeHandlerValue)(pickerParams.type, onChange, values[1]);
+      (0, _chai.expect)(onAccept.callCount).to.equal(0);
+      (0, _chai.expect)(onClose.callCount).to.equal(0);
+    });
+  });
+};
+exports.testShortcuts = testShortcuts;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "6.11.0",
+  "version": "6.11.1",
   "description": "The community edition of the date picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -34,9 +34,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.6",
-    "@mui/utils": "^5.14.1",
+    "@mui/utils": "^5.14.3",
     "@types/react-transition-group": "^4.4.6",
-    "clsx": "^1.2.1",
+    "clsx": "^2.0.0",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5"
   },

package/tests/describeValue/describeValue.js

@@ -7,8 +7,9 @@ import { buildFieldInteractions } from 'test/utils/pickers-utils';
 import { testControlledUnControlled } from './testControlledUnControlled';
 import { testPickerOpenCloseLifeCycle } from './testPickerOpenCloseLifeCycle';
 import { testPickerActionBar } from './testPickerActionBar';
+import { testShortcuts } from './testShortcuts';
 import { jsx as _jsx } from "react/jsx-runtime";
-const TEST_SUITES = [testControlledUnControlled, testPickerOpenCloseLifeCycle, testPickerActionBar];
+const TEST_SUITES = [testControlledUnControlled, testPickerOpenCloseLifeCycle, testPickerActionBar, testShortcuts];
 function innerDescribeValue(ElementToTest, getOptions) {
   const options = getOptions();
   const {

package/tests/describeValue/testPickerActionBar.js

@@ -5,6 +5,7 @@ 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 { jsx as _jsx } from "react/jsx-runtime";
 export const testPickerActionBar = (ElementToTest, options) => {
   const {
@@ -41,21 +42,9 @@ export const testPickerActionBar = (ElementToTest, options) => {
         // Clear the date
         userEvent.mousePress(screen.getByText(/clear/i));
         expect(onChange.callCount).to.equal(1);
-        if (pickerParams.type === 'date-range') {
-          onChange.lastCall.args[0].forEach((value, index) => {
-            expect(value).to.deep.equal(emptyValue[index]);
-          });
-        } else {
-          expect(onChange.lastCall.args[0]).to.deep.equal(emptyValue);
-        }
+        expectPickerChangeHandlerValue(pickerParams.type, onChange, emptyValue);
         expect(onAccept.callCount).to.equal(1);
-        if (pickerParams.type === 'date-range') {
-          onAccept.lastCall.args[0].forEach((value, index) => {
-            expect(value).to.deep.equal(emptyValue[index]);
-          });
-        } else {
-          expect(onAccept.lastCall.args[0]).to.deep.equal(emptyValue);
-        }
+        expectPickerChangeHandlerValue(pickerParams.type, onAccept, emptyValue);
         expect(onClose.callCount).to.equal(1);
       });
       it('should not call onChange or onAccept if the value is already empty value', () => {
@@ -247,23 +236,18 @@ export const testPickerActionBar = (ElementToTest, options) => {
           }
         }));
         userEvent.mousePress(screen.getByText(/today/i));
-        const startOfToday = pickerParams.type === 'date' ? adapterToUse.startOfDay(adapterToUse.date()) : adapterToUse.date();
-        expect(onChange.callCount).to.equal(1);
-        if (pickerParams.type === 'date-range') {
-          onChange.lastCall.args[0].forEach(value => {
-            expect(value).toEqualDateTime(startOfToday);
-          });
+        let startOfToday;
+        if (pickerParams.type === 'date') {
+          startOfToday = adapterToUse.startOfDay(adapterToUse.date());
+        } else if (pickerParams.type === 'date-range') {
+          startOfToday = [adapterToUse.date(), adapterToUse.date()];
         } else {
-          expect(onChange.lastCall.args[0]).toEqualDateTime(startOfToday);
+          startOfToday = adapterToUse.date();
         }
+        expect(onChange.callCount).to.equal(1);
+        expectPickerChangeHandlerValue(pickerParams.type, onChange, startOfToday);
         expect(onAccept.callCount).to.equal(1);
-        if (pickerParams.type === 'date-range') {
-          onAccept.lastCall.args[0].forEach(value => {
-            expect(value).toEqualDateTime(startOfToday);
-          });
-        } else {
-          expect(onAccept.lastCall.args[0]).toEqualDateTime(startOfToday);
-        }
+        expectPickerChangeHandlerValue(pickerParams.type, onAccept, startOfToday);
         expect(onClose.callCount).to.equal(1);
       });
     });

package/tests/describeValue/testShortcuts.js

@@ -0,0 +1,112 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["componentFamily", "render", "renderWithProps", "values", "emptyValue", "setNewValue"];
+import * as React from 'react';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import { expectPickerChangeHandlerValue } from 'test/utils/pickers/assertions';
+import { userEvent, screen } from '@mui/monorepo/test/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const testShortcuts = (ElementToTest, options) => {
+  const {
+      componentFamily,
+      render,
+      values
+    } = options,
+    pickerParams = _objectWithoutPropertiesLoose(options, _excluded);
+  if (componentFamily !== 'picker') {
+    return;
+  }
+  describe('Picker shortcuts', () => {
+    it('should call onClose, onChange and onAccept when picking a shortcut without explicit changeImportance', () => {
+      const onChange = spy();
+      const onAccept = spy();
+      const onClose = spy();
+      render( /*#__PURE__*/_jsx(ElementToTest, {
+        onChange: onChange,
+        onAccept: onAccept,
+        onClose: onClose,
+        defaultValue: values[0],
+        open: true,
+        closeOnSelect: true,
+        slotProps: {
+          shortcuts: {
+            items: [{
+              label: 'Test shortcut',
+              getValue: () => values[1]
+            }]
+          }
+        }
+      }));
+      const shortcut = screen.getByRole('button', {
+        name: 'Test shortcut'
+      });
+      userEvent.mousePress(shortcut);
+      expect(onChange.callCount).to.equal(1);
+      expectPickerChangeHandlerValue(pickerParams.type, onChange, values[1]);
+      expect(onAccept.callCount).to.equal(1);
+      expectPickerChangeHandlerValue(pickerParams.type, onAccept, values[1]);
+      expect(onClose.callCount).to.equal(1);
+    });
+    it('should call onClose and onChange when picking a shortcut with changeImportance="accept"', () => {
+      const onChange = spy();
+      const onAccept = spy();
+      const onClose = spy();
+      render( /*#__PURE__*/_jsx(ElementToTest, {
+        onChange: onChange,
+        onAccept: onAccept,
+        onClose: onClose,
+        defaultValue: values[0],
+        open: true,
+        closeOnSelect: true,
+        slotProps: {
+          shortcuts: {
+            items: [{
+              label: 'Test shortcut',
+              getValue: () => values[1]
+            }],
+            changeImportance: 'accept'
+          }
+        }
+      }));
+      const shortcut = screen.getByRole('button', {
+        name: 'Test shortcut'
+      });
+      userEvent.mousePress(shortcut);
+      expect(onChange.callCount).to.equal(1);
+      expectPickerChangeHandlerValue(pickerParams.type, onChange, values[1]);
+      expect(onAccept.callCount).to.equal(1);
+      expectPickerChangeHandlerValue(pickerParams.type, onAccept, values[1]);
+      expect(onClose.callCount).to.equal(1);
+    });
+    it('should call onClose and onChange when picking a shortcut with changeImportance="set"', () => {
+      const onChange = spy();
+      const onAccept = spy();
+      const onClose = spy();
+      render( /*#__PURE__*/_jsx(ElementToTest, {
+        onChange: onChange,
+        onAccept: onAccept,
+        onClose: onClose,
+        defaultValue: values[0],
+        open: true,
+        closeOnSelect: true,
+        slotProps: {
+          shortcuts: {
+            items: [{
+              label: 'Test shortcut',
+              getValue: () => values[1]
+            }],
+            changeImportance: 'set'
+          }
+        }
+      }));
+      const shortcut = screen.getByRole('button', {
+        name: 'Test shortcut'
+      });
+      userEvent.mousePress(shortcut);
+      expect(onChange.callCount).to.equal(1);
+      expectPickerChangeHandlerValue(pickerParams.type, onChange, values[1]);
+      expect(onAccept.callCount).to.equal(0);
+      expect(onClose.callCount).to.equal(0);
+    });
+  });
+};