@mui/x-date-pickers 6.2.1 → 6.3.1

package/legacy/AdapterMomentJalaali/index.js

@@ -1,103 +1 @@
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-/* eslint-disable class-methods-use-this */
-import BaseAdapterMomentJalaali from '@date-io/jalaali';
-// From https://momentjs.com/docs/#/displaying/format/
-var formatTokenMap = {
-  // Year
-  jYY: 'year',
-  jYYYY: 'year',
-  // Month
-  jM: 'month',
-  jMM: 'month',
-  jMMM: {
-    sectionType: 'month',
-    contentType: 'letter'
-  },
-  jMMMM: {
-    sectionType: 'month',
-    contentType: 'letter'
-  },
-  // Day of the month
-  jD: 'day',
-  jDD: 'day',
-  // Meridiem
-  A: 'meridiem',
-  a: 'meridiem',
-  // Hours
-  H: 'hours',
-  HH: 'hours',
-  h: 'hours',
-  hh: 'hours',
-  k: 'hours',
-  kk: 'hours',
-  // Minutes
-  m: 'minutes',
-  mm: 'minutes',
-  // Seconds
-  s: 'seconds',
-  ss: 'seconds'
-};
-export var AdapterMomentJalaali = /*#__PURE__*/function (_BaseAdapterMomentJal) {
-  _inherits(AdapterMomentJalaali, _BaseAdapterMomentJal);
-  var _super = _createSuper(AdapterMomentJalaali);
-  function AdapterMomentJalaali() {
-    var _this;
-    _classCallCheck(this, AdapterMomentJalaali);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.isMUIAdapter = true;
-    _this.formatTokenMap = formatTokenMap;
-    _this.escapedCharacters = {
-      start: '[',
-      end: ']'
-    };
-    /**
-     * The current getFormatHelperText method uses an outdated format parsing logic.
-     * We should use this one in the future to support all localized formats.
-     */
-    _this.expandFormat = function (format) {
-      // @see https://github.com/moment/moment/blob/develop/src/lib/format/format.js#L6
-      var localFormattingTokens = /(\[[^[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})|./g;
-      return format.match(localFormattingTokens).map(function (token) {
-        var firstCharacter = token[0];
-        if (firstCharacter === 'L' || firstCharacter === ';') {
-          return _this.moment.localeData(_this.getCurrentLocaleCode()).longDateFormat(token);
-        }
-        return token;
-      }).join('').replace('dd', 'jDD'); // Fix for https://github.com/dmtrKovalenko/date-io/pull/632;
-    };
-    // Redefined here just to show how it can be written using expandFormat
-    _this.getFormatHelperText = function (format) {
-      return _this.expandFormat(format).replace(/a/gi, '(a|p)m').replace('jY', 'Y').replace('jM', 'M').replace('jD', 'D').toLocaleLowerCase();
-    };
-    _this.getWeekNumber = function (date) {
-      return date.jWeek();
-    };
-    _this.addYears = function (date, count) {
-      return count < 0 ? date.clone().subtract(Math.abs(count), 'jYear') : date.clone().add(count, 'jYear');
-    };
-    _this.addMonths = function (date, count) {
-      return count < 0 ? date.clone().subtract(Math.abs(count), 'jMonth') : date.clone().add(count, 'jMonth');
-    };
-    _this.setMonth = function (date, month) {
-      return date.clone().jMonth(month);
-    };
-    _this.isValid = function (value) {
-      // We can't to `this.moment(value)` because moment-jalaali looses the invalidity information when creating a new moment object from an existing one
-      if (!_this.moment.isMoment(value)) {
-        return false;
-      }
-      return value.isValid(value);
-    };
-    return _this;
-  }
-  return _createClass(AdapterMomentJalaali);
-}(BaseAdapterMomentJalaali);
+export { AdapterMomentJalaali } from './AdapterMomentJalaali';

package/legacy/DateCalendar/DayCalendar.js

@@ -14,7 +14,7 @@ import { PickersDay } from '../PickersDay/PickersDay';
 import { useUtils, useNow, useLocaleText } from '../internals/hooks/useUtils';
 import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
 import { PickersSlideTransition } from './PickersSlideTransition';
-import { useIsDateDisabled } from '../internals/hooks/validation/useDateValidation';
+import { useIsDateDisabled } from './useIsDateDisabled';
 import { findClosestEnabledDate } from '../internals/utils/date-utils';
 import { getDayCalendarUtilityClass } from './dayCalendarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";

package/legacy/DateCalendar/useCalendarState.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useIsDateDisabled } from '../internals/hooks/validation/useDateValidation';
+import { useIsDateDisabled } from './useIsDateDisabled';
 import { useUtils, useNow } from '../internals/hooks/useUtils';
 import { clamp } from '../internals/utils/date-utils';
 export var createCalendarStateReducer = function createCalendarStateReducer(reduceAnimations, disableSwitchToMonthOnDayFocus, utils) {

package/legacy/DateCalendar/useIsDateDisabled.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { validateDate } from '../internals/utils/validation/validateDate';
+import { useLocalizationContext } from '../internals/hooks/useUtils';
+export var useIsDateDisabled = function useIsDateDisabled(_ref) {
+  var shouldDisableDate = _ref.shouldDisableDate,
+    shouldDisableMonth = _ref.shouldDisableMonth,
+    shouldDisableYear = _ref.shouldDisableYear,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
+    disableFuture = _ref.disableFuture,
+    disablePast = _ref.disablePast;
+  var adapter = useLocalizationContext();
+  return React.useCallback(function (day) {
+    return validateDate({
+      adapter: adapter,
+      value: day,
+      props: {
+        shouldDisableDate: shouldDisableDate,
+        shouldDisableMonth: shouldDisableMonth,
+        shouldDisableYear: shouldDisableYear,
+        minDate: minDate,
+        maxDate: maxDate,
+        disableFuture: disableFuture,
+        disablePast: disablePast
+      }
+    }) !== null;
+  }, [adapter, shouldDisableDate, shouldDisableMonth, shouldDisableYear, minDate, maxDate, disableFuture, disablePast]);
+};

package/legacy/DateField/DateField.js

@@ -49,11 +49,13 @@ var DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref) {
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
+    InputProps: _extends({}, fieldProps.InputProps, {
+      readOnly: readOnly
+    }),
     inputProps: _extends({}, fieldProps.inputProps, {
-      ref: inputRef,
-      onPaste: onPaste,
       inputMode: inputMode,
-      readOnly: readOnly
+      onPaste: onPaste,
+      ref: inputRef
     })
   }));
 });
@@ -197,6 +199,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -256,6 +262,21 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.func,
+  /**
+   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   *
+   * @default `false`
+   */
+  shouldRespectLeadingZeros: PropTypes.bool,
   /**
    * The size of the component.
    */

package/legacy/DateField/useDateField.js

@@ -1,9 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+var _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
-import { validateDate } from '../internals/hooks/validation/useDateValidation';
+import { validateDate } from '../internals/utils/validation/validateDate';
 import { applyDefaultDate } from '../internals/utils/date-utils';
 import { useUtils, useDefaultDates } from '../internals/hooks/useUtils';
 var useDefaultizedDateField = function useDefaultizedDateField(props) {
@@ -26,6 +26,7 @@ export var useDateField = function useDateField(_ref) {
     defaultValue = _useDefaultizedDateFi.defaultValue,
     format = _useDefaultizedDateFi.format,
     formatDensity = _useDefaultizedDateFi.formatDensity,
+    shouldRespectLeadingZeros = _useDefaultizedDateFi.shouldRespectLeadingZeros,
     onChange = _useDefaultizedDateFi.onChange,
     readOnly = _useDefaultizedDateFi.readOnly,
     onError = _useDefaultizedDateFi.onError,
@@ -48,6 +49,7 @@ export var useDateField = function useDateField(_ref) {
       defaultValue: defaultValue,
       format: format,
       formatDensity: formatDensity,
+      shouldRespectLeadingZeros: shouldRespectLeadingZeros,
       onChange: onChange,
       readOnly: readOnly,
       onError: onError,

package/legacy/DatePicker/DatePickerToolbar.js

@@ -134,6 +134,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    * Currently visible picker view.
    */
   view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
 } : void 0;
 export { DatePickerToolbar };

package/legacy/DateTimeField/DateTimeField.js

@@ -49,11 +49,13 @@ var DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
+    InputProps: _extends({}, fieldProps.InputProps, {
+      readOnly: readOnly
+    }),
     inputProps: _extends({}, fieldProps.inputProps, {
-      ref: inputRef,
-      onPaste: onPaste,
       inputMode: inputMode,
-      readOnly: readOnly
+      onPaste: onPaste,
+      ref: inputRef
     })
   }));
 });
@@ -230,6 +232,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -292,6 +298,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
@@ -304,6 +311,21 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.func,
+  /**
+   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   *
+   * @default `false`
+   */
+  shouldRespectLeadingZeros: PropTypes.bool,
   /**
    * The size of the component.
    */

package/legacy/DateTimeField/useDateTimeField.js

@@ -1,9 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
+var _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
-import { validateDateTime } from '../internals/hooks/validation/useDateTimeValidation';
+import { validateDateTime } from '../internals/utils/validation/validateDateTime';
 import { applyDefaultDate } from '../internals/utils/date-utils';
 import { useUtils, useDefaultDates } from '../internals/hooks/useUtils';
 var useDefaultizedDateTimeField = function useDefaultizedDateTimeField(props) {
@@ -31,6 +31,7 @@ export var useDateTimeField = function useDateTimeField(_ref) {
     defaultValue = _useDefaultizedDateTi.defaultValue,
     format = _useDefaultizedDateTi.format,
     formatDensity = _useDefaultizedDateTi.formatDensity,
+    shouldRespectLeadingZeros = _useDefaultizedDateTi.shouldRespectLeadingZeros,
     onChange = _useDefaultizedDateTi.onChange,
     readOnly = _useDefaultizedDateTi.readOnly,
     onError = _useDefaultizedDateTi.onError,
@@ -62,6 +63,7 @@ export var useDateTimeField = function useDateTimeField(_ref) {
       defaultValue: defaultValue,
       format: format,
       formatDensity: formatDensity,
+      shouldRespectLeadingZeros: shouldRespectLeadingZeros,
       onChange: onChange,
       readOnly: readOnly,
       onError: onError,

package/legacy/DateTimePicker/DateTimePicker.js

@@ -325,6 +325,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.

package/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -8,7 +8,7 @@ import { useLocaleText, useUtils, validateDate } from '../internals';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { Calendar } from '../internals/components/icons';
 import { DateField } from '../DateField';
-import { extractValidationProps } from '../internals/utils/validation';
+import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDateViewCalendar } from '../dateViewRenderers';
 var DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker(inProps, ref) {
   var _defaultizedProps$yea, _defaultizedProps$slo2;

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -9,7 +9,7 @@ import { renderDateViewCalendar } from '../dateViewRenderers';
 import { useLocaleText, validateDateTime } from '../internals';
 import { Calendar } from '../internals/components/icons';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
-import { extractValidationProps } from '../internals/utils/validation';
+import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 var DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo2, _defaultizedProps$slo3;
   var localeText = useLocaleText();
@@ -350,6 +350,7 @@ DesktopDateTimePicker.propTypes = {
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.

package/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -8,24 +9,42 @@ import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
 import { useLocaleText, validateTime } from '../internals';
 import { Clock } from '../internals/components/icons';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
-import { extractValidationProps } from '../internals/utils/validation';
+import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
+import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
 var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  var _defaultizedProps$amp, _defaultizedProps$slo2;
+  var _defaultizedProps$thr, _defaultizedProps$amp, _viewRenderers$hours, _defaultizedProps$slo2, _defaultizedProps$slo3;
   var localeText = useLocaleText();
 
   // Props with the default values common to all time pickers
   var defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiDesktopTimePicker');
+  var thresholdToRenderTimeInASingleColumn = (_defaultizedProps$thr = defaultizedProps.thresholdToRenderTimeInASingleColumn) != null ? _defaultizedProps$thr : 24;
+  var timeSteps = _extends({
+    hours: 1,
+    minutes: 5,
+    seconds: 5
+  }, defaultizedProps.timeSteps);
+  var shouldRenderTimeInASingleColumn = 24 * 60 / (timeSteps.hours * timeSteps.minutes) <= thresholdToRenderTimeInASingleColumn;
+  var renderTimeView = shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
   var viewRenderers = _extends({
-    hours: null,
-    minutes: null,
-    seconds: null
+    hours: renderTimeView,
+    minutes: renderTimeView,
+    seconds: renderTimeView,
+    meridiem: renderTimeView
   }, defaultizedProps.viewRenderers);
   var ampmInClock = (_defaultizedProps$amp = defaultizedProps.ampmInClock) != null ? _defaultizedProps$amp : true;
+  var actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
+  // Need to avoid adding the `meridiem` view when unexpected renderer is specified
+  var shouldHoursRendererContainMeridiemView = ((_viewRenderers$hours = viewRenderers.hours) == null ? void 0 : _viewRenderers$hours.name) === renderMultiSectionDigitalClockTimeView.name;
+  var views = defaultizedProps.ampm && shouldHoursRendererContainMeridiemView ? [].concat(_toConsumableArray(defaultizedProps.views), ['meridiem']) : defaultizedProps.views;
 
   // Props with the default values specific to the desktop variant
   var props = _extends({}, defaultizedProps, {
     ampmInClock: ampmInClock,
+    timeSteps: timeSteps,
     viewRenderers: viewRenderers,
+    // Setting only `hours` time view in case of single column time picker
+    // Allows for easy view lifecycle management
+    views: shouldRenderTimeInASingleColumn ? ['hours'] : views,
     slots: _extends({
       field: TimeField,
       openPickerIcon: Clock
@@ -41,7 +60,10 @@ var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker
       toolbar: _extends({
         hidden: true,
         ampmInClock: ampmInClock
-      }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.toolbar)
+      }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.toolbar),
+      actionBar: _extends({
+        actions: actionBarActions
+      }, (_defaultizedProps$slo3 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo3.actionBar)
     })
   });
   var _useDesktopPicker = useDesktopPicker({
@@ -223,7 +245,7 @@ DesktopTimePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+  openTo: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Force rendering in particular orientation.
    */
@@ -252,11 +274,17 @@ DesktopTimePicker.propTypes = {
   shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: PropTypes.func,
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -271,6 +299,22 @@ DesktopTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn: PropTypes.number,
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * @default{ hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps: PropTypes.shape({
+    hours: PropTypes.number,
+    minutes: PropTypes.number,
+    seconds: PropTypes.number
+  }),
   /**
    * The selected value.
    * Used when the component is controlled.
@@ -281,7 +325,7 @@ DesktopTimePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+  view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
@@ -289,6 +333,7 @@ DesktopTimePicker.propTypes = {
    */
   viewRenderers: PropTypes.shape({
     hours: PropTypes.func,
+    meridiem: PropTypes.func,
     minutes: PropTypes.func,
     seconds: PropTypes.func
   }),