@mui/x-date-pickers 6.11.0 → 6.11.1

package/CHANGELOG.md

@@ -3,6 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.11.1
+
+_Aug 11, 2023_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Add theme augmentation to `@mui/x-tree-view`
+- 📈 Enable charts customization using `slot` and `slotProps` props
+- 🌍 Improve Finnish (fi-FI) and Icelandic (is-IS) locales on the pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.11.1`
+
+- [DataGrid] `getCellAggregationResult`: Handle `null` `rowNode` case (#9915) @romgrk
+
+#### `@mui/x-data-grid-pro@6.11.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-data-grid@6.11.1`.
+
+#### `@mui/x-data-grid-premium@6.11.1` [![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@6.11.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.11.1`
+
+- [fields] Use `numeric` `inputmode` instead of `tel` (#9918) @LukasTy
+- [pickers] Always respect locale when formatting meridiem (#9979) @flaviendelangle
+- [pickers] Call `onChange` when selecting a shortcut with `changeImportance="set"` (#9974) @flaviendelangle
+- [pickers] Refactor `themeAugmentation` `styleOverrides` (#9978) @LukasTy
+- [l10n] Improve Finnish (fi-FI) locale (#9795) @kurkle
+- [l10n] Improve Icelandic (is-IS) locale (#9639) @magnimarels
+
+#### `@mui/x-date-pickers-pro@6.11.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-date-pickers@6.11.1`.
+
+### Charts / `@mui/x-charts@v6.0.0-alpha.7`
+
+- [charts] Fix label and tick alignment (#9952) @LukasTy
+- [charts] Remove not functional component `styleOverrides` (#9996) @LukasTy
+- [charts] Set custom ticks number (#9922) @alexfauquette
+- [charts] Use `slot`/`slotProps` for customization (#9744) @alexfauquette
+- [charts] Extend cheerful fiesta palette (#9980) @noraleonte
+
+### Tree View / `@mui/x-tree-view@v6.0.0-alpha.1`
+
+- [TreeView] Add theme augmentation (#9967) @flaviendelangle
+
+### Docs
+
+- [docs] Clarify the `shouldDisableClock` migration code options (#9920) @LukasTy
+
+### Core
+
+- [core] Port GitHub workflow for ensuring triage label is present (#9924) @DanailH
+- [docs-infra] Fix the import samples in Api pages (#9898) @alexfauquette
+
 ## 6.11.0
 
 _Aug 4, 2023_

package/DateField/DateField.js

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

package/DateTimeField/DateTimeField.js

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

package/DateTimePicker/DateTimePickerToolbar.js

@@ -12,6 +12,7 @@ import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { dateTimePickerToolbarClasses, getDateTimePickerToolbarUtilityClass } from './dateTimePickerToolbarClasses';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -264,14 +265,14 @@ function DateTimePickerToolbar(inProps) {
           variant: "subtitle2",
           selected: meridiemMode === 'am',
           typographyClassName: classes.ampmLabel,
-          value: utils.getMeridiemText('am'),
+          value: formatMeridiem(utils, 'am'),
           onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
           disabled: disabled
         }), /*#__PURE__*/_jsx(PickersToolbarButton, {
           variant: "subtitle2",
           selected: meridiemMode === 'pm',
           typographyClassName: classes.ampmLabel,
-          value: utils.getMeridiemText('pm'),
+          value: formatMeridiem(utils, 'pm'),
           onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
           disabled: disabled
         })]
@@ -279,7 +280,7 @@ function DateTimePickerToolbar(inProps) {
         variant: "h5",
         onClick: () => onViewChange('meridiem'),
         selected: view === 'meridiem',
-        value: value && meridiemMode ? utils.getMeridiemText(meridiemMode) : '--',
+        value: value && meridiemMode ? formatMeridiem(utils, meridiemMode) : '--',
         width: MULTI_SECTION_CLOCK_SECTION_WIDTH
       })]
     })]

package/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -18,6 +18,7 @@ import { getHourSectionOptions, getTimeSectionOptions } from './MultiSectionDigi
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -269,8 +270,8 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         }
       case 'meridiem':
         {
-          const amLabel = utils.getMeridiemText('am');
-          const pmLabel = utils.getMeridiemText('pm');
+          const amLabel = formatMeridiem(utils, 'am');
+          const pmLabel = formatMeridiem(utils, 'pm');
           return {
             onChange: handleMeridiemChange,
             items: [{

package/PickersDay/PickersDay.js

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

package/PickersShortcuts/PickersShortcuts.js

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

package/TimeField/TimeField.js

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

package/TimePicker/TimePickerToolbar.js

@@ -12,6 +12,7 @@ import { arrayIncludes } from '../internals/utils/utils';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from './timePickerToolbarClasses';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -179,7 +180,7 @@ function TimePickerToolbar(inProps) {
         variant: "subtitle2",
         selected: meridiemMode === 'am',
         typographyClassName: classes.ampmLabel,
-        value: utils.getMeridiemText('am'),
+        value: formatMeridiem(utils, 'am'),
         onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
         disabled: disabled
       }), /*#__PURE__*/_jsx(PickersToolbarButton, {
@@ -187,7 +188,7 @@ function TimePickerToolbar(inProps) {
         variant: "subtitle2",
         selected: meridiemMode === 'pm',
         typographyClassName: classes.ampmLabel,
-        value: utils.getMeridiemText('pm'),
+        value: formatMeridiem(utils, 'pm'),
         onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
         disabled: disabled
       })]

package/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/internals/hooks/useField/useField.js

@@ -370,7 +370,7 @@ export 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 === getActiveElement(document);
   const shouldShowPlaceholder = !inputHasFocus && valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);

package/internals/hooks/usePicker/usePickerValue.js

@@ -40,7 +40,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/internals/utils/date-utils.d.ts

@@ -17,6 +17,7 @@ export declare const areDatesEqual: <TDate>(utils: MuiPickersAdapter<TDate, any>
 export declare const getMonthsInYear: <TDate>(utils: MuiPickersAdapter<TDate, any>, year: TDate) => TDate[];
 export declare const mergeDateAndTime: <TDate>(utils: MuiPickersAdapter<TDate, any>, dateParam: TDate, timeParam: TDate) => TDate;
 export declare const getTodayDate: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, valueType?: FieldValueType) => TDate;
+export declare const formatMeridiem: <TDate>(utils: MuiPickersAdapter<TDate, any>, meridiem: 'am' | 'pm') => string;
 export declare const isDatePickerView: (view: DateOrTimeViewWithMeridiem) => view is DateView;
 export declare const resolveDateFormat: (utils: MuiPickersAdapter<any>, { format, views }: {
     format?: string | undefined;

package/internals/utils/date-utils.js

@@ -80,6 +80,10 @@ export const mergeDateAndTime = (utils, dateParam, timeParam) => {
   return mergedDate;
 };
 export const getTodayDate = (utils, timezone, valueType) => valueType === 'date' ? utils.startOfDay(utils.dateWithTimezone(undefined, timezone)) : utils.dateWithTimezone(undefined, timezone);
+export const formatMeridiem = (utils, meridiem) => {
+  const date = utils.setHours(utils.date(), meridiem === 'am' ? 2 : 14);
+  return utils.format(date, 'meridiem');
+};
 const dateViews = ['year', 'month', 'day'];
 export const isDatePickerView = view => dateViews.includes(view);
 export const resolveDateFormat = (utils, {

package/legacy/DateField/DateField.js

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

package/legacy/DateTimeField/DateTimeField.js

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

package/legacy/DateTimePicker/DateTimePickerToolbar.js

@@ -13,6 +13,7 @@ import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { dateTimePickerToolbarClasses, getDateTimePickerToolbarUtilityClass } from './dateTimePickerToolbarClasses';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -283,7 +284,7 @@ function DateTimePickerToolbar(inProps) {
           variant: "subtitle2",
           selected: meridiemMode === 'am',
           typographyClassName: classes.ampmLabel,
-          value: utils.getMeridiemText('am'),
+          value: formatMeridiem(utils, 'am'),
           onClick: readOnly ? undefined : function () {
             return handleMeridiemChange('am');
           },
@@ -292,7 +293,7 @@ function DateTimePickerToolbar(inProps) {
           variant: "subtitle2",
           selected: meridiemMode === 'pm',
           typographyClassName: classes.ampmLabel,
-          value: utils.getMeridiemText('pm'),
+          value: formatMeridiem(utils, 'pm'),
           onClick: readOnly ? undefined : function () {
             return handleMeridiemChange('pm');
           },
@@ -304,7 +305,7 @@ function DateTimePickerToolbar(inProps) {
           return onViewChange('meridiem');
         },
         selected: view === 'meridiem',
-        value: value && meridiemMode ? utils.getMeridiemText(meridiemMode) : '--',
+        value: value && meridiemMode ? formatMeridiem(utils, meridiemMode) : '--',
         width: MULTI_SECTION_CLOCK_SECTION_WIDTH
       })]
     })]

package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -21,6 +21,7 @@ import { getHourSectionOptions, getTimeSectionOptions } from './MultiSectionDigi
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -287,8 +288,8 @@ export var MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function Mul
         }
       case 'meridiem':
         {
-          var amLabel = utils.getMeridiemText('am');
-          var pmLabel = utils.getMeridiemText('pm');
+          var amLabel = formatMeridiem(utils, 'am');
+          var pmLabel = formatMeridiem(utils, 'pm');
           return {
             onChange: handleMeridiemChange,
             items: [{

package/legacy/PickersDay/PickersDay.js

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

package/legacy/PickersShortcuts/PickersShortcuts.js

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

package/legacy/TimeField/TimeField.js

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

package/legacy/TimePicker/TimePickerToolbar.js

@@ -13,6 +13,7 @@ import { arrayIncludes } from '../internals/utils/utils';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { getTimePickerToolbarUtilityClass, timePickerToolbarClasses } from './timePickerToolbarClasses';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -185,7 +186,7 @@ function TimePickerToolbar(inProps) {
         variant: "subtitle2",
         selected: meridiemMode === 'am',
         typographyClassName: classes.ampmLabel,
-        value: utils.getMeridiemText('am'),
+        value: formatMeridiem(utils, 'am'),
         onClick: readOnly ? undefined : function () {
           return handleMeridiemChange('am');
         },
@@ -195,7 +196,7 @@ function TimePickerToolbar(inProps) {
         variant: "subtitle2",
         selected: meridiemMode === 'pm',
         typographyClassName: classes.ampmLabel,
-        value: utils.getMeridiemText('pm'),
+        value: formatMeridiem(utils, 'pm'),
         onClick: readOnly ? undefined : function () {
           return handleMeridiemChange('pm');
         },

package/legacy/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/legacy/internals/hooks/useField/useField.js

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

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

@@ -39,7 +39,7 @@ var shouldPublishValue = function 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/legacy/internals/utils/date-utils.js

@@ -83,6 +83,10 @@ export var mergeDateAndTime = function mergeDateAndTime(utils, dateParam, timePa
 export var getTodayDate = function getTodayDate(utils, timezone, valueType) {
   return valueType === 'date' ? utils.startOfDay(utils.dateWithTimezone(undefined, timezone)) : utils.dateWithTimezone(undefined, timezone);
 };
+export var formatMeridiem = function formatMeridiem(utils, meridiem) {
+  var date = utils.setHours(utils.date(), meridiem === 'am' ? 2 : 14);
+  return utils.format(date, 'meridiem');
+};
 var dateViews = ['year', 'month', 'day'];
 export var isDatePickerView = function isDatePickerView(view) {
   return dateViews.includes(view);

package/legacy/locales/fiFI.js

@@ -46,11 +46,14 @@ var fiFIPickers = {
     return "Valitse ".concat(views[view]);
   },
   // Calendar labels
-  // calendarWeekNumberHeaderLabel: 'Week number',
-  // calendarWeekNumberHeaderText: '#',
-  // calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
-  // calendarWeekNumberText: weekNumber => `${weekNumber}`,
-
+  calendarWeekNumberHeaderLabel: 'Viikko',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: function calendarWeekNumberAriaLabelText(weekNumber) {
+    return "Viikko ".concat(weekNumber);
+  },
+  calendarWeekNumberText: function calendarWeekNumberText(weekNumber) {
+    return "".concat(weekNumber);
+  },
   // Open picker labels
   openDatePickerDialogue: function openDatePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "Valitse p\xE4iv\xE4, valittu p\xE4iv\xE4 on ".concat(utils.format(value, 'fullDate')) : 'Valitse päivä';

package/legacy/locales/isIS.js

@@ -46,11 +46,14 @@ var isISPickers = {
     return "Velja ".concat(timeViews[view]);
   },
   // Calendar labels
-  // calendarWeekNumberHeaderLabel: 'Week number',
-  // calendarWeekNumberHeaderText: '#',
-  // calendarWeekNumberAriaLabelText: weekNumber => `Week ${weekNumber}`,
-  // calendarWeekNumberText: weekNumber => `${weekNumber}`,
-
+  calendarWeekNumberHeaderLabel: 'Vikunúmer',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: function calendarWeekNumberAriaLabelText(weekNumber) {
+    return "Vika ".concat(weekNumber);
+  },
+  calendarWeekNumberText: function calendarWeekNumberText(weekNumber) {
+    return "".concat(weekNumber);
+  },
   // Open picker labels
   openDatePickerDialogue: function openDatePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "Velja dagsetningu, valin dagsetning er ".concat(utils.format(value, 'fullDate')) : 'Velja dagsetningu';
@@ -60,17 +63,31 @@ var isISPickers = {
   },
   // 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: function fieldYearPlaceholder(params) {
+    return 'Á'.repeat(params.digitAmount);
+  },
+  fieldMonthPlaceholder: function fieldMonthPlaceholder(params) {
+    return params.contentType === 'letter' ? 'MMMM' : 'MM';
+  },
+  fieldDayPlaceholder: function fieldDayPlaceholder() {
+    return 'DD';
+  },
+  fieldWeekDayPlaceholder: function fieldWeekDayPlaceholder(params) {
+    return params.contentType === 'letter' ? 'EEEE' : 'EE';
+  },
+  fieldHoursPlaceholder: function fieldHoursPlaceholder() {
+    return 'kk';
+  },
+  fieldMinutesPlaceholder: function fieldMinutesPlaceholder() {
+    return 'mm';
+  },
+  fieldSecondsPlaceholder: function fieldSecondsPlaceholder() {
+    return 'ss';
+  },
+  fieldMeridiemPlaceholder: function fieldMeridiemPlaceholder() {
+    return 'ee';
+  }
 };
-
 export var isIS = getPickersLocalization(isISPickers);

package/legacy/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";
-var TEST_SUITES = [testControlledUnControlled, testPickerOpenCloseLifeCycle, testPickerActionBar];
+var TEST_SUITES = [testControlledUnControlled, testPickerOpenCloseLifeCycle, testPickerActionBar, testShortcuts];
 function innerDescribeValue(ElementToTest, getOptions) {
   var options = getOptions();
   var defaultProps = options.defaultProps,

package/legacy/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 var testPickerActionBar = function testPickerActionBar(ElementToTest, options) {
   var componentFamily = options.componentFamily,
@@ -39,21 +40,9 @@ export var testPickerActionBar = function testPickerActionBar(ElementToTest, opt
         // 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(function (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(function (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', function () {
@@ -243,23 +232,18 @@ export var testPickerActionBar = function testPickerActionBar(ElementToTest, opt
           }
         }));
         userEvent.mousePress(screen.getByText(/today/i));
-        var 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(function (value) {
-            expect(value).toEqualDateTime(startOfToday);
-          });
+        var 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(function (value) {
-            expect(value).toEqualDateTime(startOfToday);
-          });
-        } else {
-          expect(onAccept.lastCall.args[0]).toEqualDateTime(startOfToday);
-        }
+        expectPickerChangeHandlerValue(pickerParams.type, onAccept, startOfToday);
         expect(onClose.callCount).to.equal(1);
       });
     });