@mui/x-date-pickers 6.2.1 → 6.3.0

package/node/AdapterMomentJalaali/index.js

@@ -1,96 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AdapterMomentJalaali = void 0;
-var _jalaali = _interopRequireDefault(require("@date-io/jalaali"));
-/* eslint-disable class-methods-use-this */
-
-// From https://momentjs.com/docs/#/displaying/format/
-const 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'
-};
-class AdapterMomentJalaali extends _jalaali.default {
-  constructor(...args) {
-    super(...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 = format => {
-      // @see https://github.com/moment/moment/blob/develop/src/lib/format/format.js#L6
-      const localFormattingTokens = /(\[[^[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})|./g;
-      return format.match(localFormattingTokens).map(token => {
-        const 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 = format => {
-      return this.expandFormat(format).replace(/a/gi, '(a|p)m').replace('jY', 'Y').replace('jM', 'M').replace('jD', 'D').toLocaleLowerCase();
-    };
-    this.getWeekNumber = date => {
-      return date.jWeek();
-    };
-    this.addYears = (date, count) => {
-      return count < 0 ? date.clone().subtract(Math.abs(count), 'jYear') : date.clone().add(count, 'jYear');
-    };
-    this.addMonths = (date, count) => {
-      return count < 0 ? date.clone().subtract(Math.abs(count), 'jMonth') : date.clone().add(count, 'jMonth');
-    };
-    this.setMonth = (date, month) => {
-      return date.clone().jMonth(month);
-    };
-    this.isValid = 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);
-    };
+Object.defineProperty(exports, "AdapterMomentJalaali", {
+  enumerable: true,
+  get: function () {
+    return _AdapterMomentJalaali.AdapterMomentJalaali;
   }
-}
-exports.AdapterMomentJalaali = AdapterMomentJalaali;
+});
+var _AdapterMomentJalaali = require("./AdapterMomentJalaali");

package/node/DateCalendar/DayCalendar.js

@@ -18,7 +18,7 @@ var _PickersDay = require("../PickersDay/PickersDay");
 var _useUtils = require("../internals/hooks/useUtils");
 var _dimensions = require("../internals/constants/dimensions");
 var _PickersSlideTransition = require("./PickersSlideTransition");
-var _useDateValidation = require("../internals/hooks/validation/useDateValidation");
+var _useIsDateDisabled = require("./useIsDateDisabled");
 var _dateUtils = require("../internals/utils/date-utils");
 var _dayCalendarClasses = require("./dayCalendarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -254,7 +254,7 @@ function DayCalendar(inProps) {
     fixedWeekNumber,
     autoFocus
   } = props;
-  const isDateDisabled = (0, _useDateValidation.useIsDateDisabled)({
+  const isDateDisabled = (0, _useIsDateDisabled.useIsDateDisabled)({
     shouldDisableDate,
     shouldDisableMonth,
     shouldDisableYear,

package/node/DateCalendar/useCalendarState.js

@@ -8,7 +8,7 @@ exports.useCalendarState = exports.createCalendarStateReducer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useDateValidation = require("../internals/hooks/validation/useDateValidation");
+var _useIsDateDisabled = require("./useIsDateDisabled");
 var _useUtils = require("../internals/hooks/useUtils");
 var _dateUtils = require("../internals/utils/date-utils");
 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); }
@@ -82,7 +82,7 @@ const useCalendarState = ({
       direction: utils.isAfterDay(newDateRequested, calendarState.currentMonth) ? 'left' : 'right'
     });
   }, [calendarState.currentMonth, handleChangeMonth, utils]);
-  const isDateDisabled = (0, _useDateValidation.useIsDateDisabled)({
+  const isDateDisabled = (0, _useIsDateDisabled.useIsDateDisabled)({
     shouldDisableDate,
     minDate,
     maxDate,

package/node/{internals/hooks/validation/useDateValidation.js → DateCalendar/useIsDateDisabled.js}

@@ -3,45 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateDate = exports.useIsDateDisabled = void 0;
+exports.useIsDateDisabled = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useUtils = require("../useUtils");
-var _dateUtils = require("../../utils/date-utils");
+var _validateDate = require("../internals/utils/validation/validateDate");
+var _useUtils = require("../internals/hooks/useUtils");
 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 validateDate = ({
-  props,
-  value,
-  adapter
-}) => {
-  if (value === null) {
-    return null;
-  }
-  const now = adapter.utils.date();
-  const minDate = (0, _dateUtils.applyDefaultDate)(adapter.utils, props.minDate, adapter.defaultDates.minDate);
-  const maxDate = (0, _dateUtils.applyDefaultDate)(adapter.utils, props.maxDate, adapter.defaultDates.maxDate);
-  switch (true) {
-    case !adapter.utils.isValid(value):
-      return 'invalidDate';
-    case Boolean(props.shouldDisableDate && props.shouldDisableDate(value)):
-      return 'shouldDisableDate';
-    case Boolean(props.shouldDisableMonth && props.shouldDisableMonth(value)):
-      return 'shouldDisableMonth';
-    case Boolean(props.shouldDisableYear && props.shouldDisableYear(value)):
-      return 'shouldDisableYear';
-    case Boolean(props.disableFuture && adapter.utils.isAfterDay(value, now)):
-      return 'disableFuture';
-    case Boolean(props.disablePast && adapter.utils.isBeforeDay(value, now)):
-      return 'disablePast';
-    case Boolean(minDate && adapter.utils.isBeforeDay(value, minDate)):
-      return 'minDate';
-    case Boolean(maxDate && adapter.utils.isAfterDay(value, maxDate)):
-      return 'maxDate';
-    default:
-      return null;
-  }
-};
-exports.validateDate = validateDate;
 const useIsDateDisabled = ({
   shouldDisableDate,
   shouldDisableMonth,
@@ -52,7 +19,7 @@ const useIsDateDisabled = ({
   disablePast
 }) => {
   const adapter = (0, _useUtils.useLocalizationContext)();
-  return React.useCallback(day => validateDate({
+  return React.useCallback(day => (0, _validateDate.validateDate)({
     adapter,
     value: day,
     props: {

package/node/DateField/DateField.js

@@ -63,11 +63,13 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref)
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
     ref: ref
   }, fieldProps, {
+    InputProps: (0, _extends2.default)({}, fieldProps.InputProps, {
+      readOnly
+    }),
     inputProps: (0, _extends2.default)({}, fieldProps.inputProps, {
-      ref: inputRef,
-      onPaste,
       inputMode,
-      readOnly
+      onPaste,
+      ref: inputRef
     })
   }));
 });
@@ -271,6 +273,21 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: _propTypes.default.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.default.bool,
   /**
    * The size of the component.
    */

package/node/DateField/useDateField.js

@@ -9,10 +9,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useField = require("../internals/hooks/useField");
-var _useDateValidation = require("../internals/hooks/validation/useDateValidation");
+var _validateDate = require("../internals/utils/validation/validateDate");
 var _dateUtils = require("../internals/utils/date-utils");
 var _useUtils = require("../internals/hooks/useUtils");
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 const useDefaultizedDateField = props => {
   const utils = (0, _useUtils.useUtils)();
   const defaultDates = (0, _useUtils.useDefaultDates)();
@@ -34,6 +34,7 @@ const useDateField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -57,6 +58,7 @@ const useDateField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -73,7 +75,7 @@ const useDateField = ({
     },
     valueManager: _valueManagers.singleItemValueManager,
     fieldValueManager: _valueManagers.singleItemFieldValueManager,
-    validator: _useDateValidation.validateDate,
+    validator: _validateDate.validateDate,
     valueType: 'date'
   });
 };

package/node/DatePicker/DatePickerToolbar.js

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

package/node/DateTimeField/DateTimeField.js

@@ -63,11 +63,13 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({
     ref: ref
   }, fieldProps, {
+    InputProps: (0, _extends2.default)({}, fieldProps.InputProps, {
+      readOnly
+    }),
     inputProps: (0, _extends2.default)({}, fieldProps.inputProps, {
-      ref: inputRef,
-      onPaste,
       inputMode,
-      readOnly
+      onPaste,
+      ref: inputRef
     })
   }));
 });
@@ -307,6 +309,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
   shouldDisableMonth: _propTypes.default.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.
@@ -319,6 +322,21 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: _propTypes.default.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.default.bool,
   /**
    * The size of the component.
    */

package/node/DateTimeField/useDateTimeField.js

@@ -9,10 +9,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useField = require("../internals/hooks/useField");
-var _useDateTimeValidation = require("../internals/hooks/validation/useDateTimeValidation");
+var _validateDateTime = require("../internals/utils/validation/validateDateTime");
 var _dateUtils = require("../internals/utils/date-utils");
 var _useUtils = require("../internals/hooks/useUtils");
-const _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"];
+const _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"];
 const useDefaultizedDateTimeField = props => {
   const utils = (0, _useUtils.useUtils)();
   const defaultDates = (0, _useUtils.useDefaultDates)();
@@ -39,6 +39,7 @@ const useDateTimeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -69,6 +70,7 @@ const useDateTimeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -92,7 +94,7 @@ const useDateTimeField = ({
     },
     valueManager: _valueManagers.singleItemValueManager,
     fieldValueManager: _valueManagers.singleItemFieldValueManager,
-    validator: _useDateTimeValidation.validateDateTime,
+    validator: _validateDateTime.validateDateTime,
     valueType: 'date-time'
   });
 };

package/node/DateTimePicker/DateTimePicker.js

@@ -336,6 +336,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   shouldDisableMonth: _propTypes.default.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/node/DesktopDatePicker/DesktopDatePicker.js

@@ -15,7 +15,7 @@ var _internals = require("../internals");
 var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
 var _icons = require("../internals/components/icons");
 var _DateField = require("../DateField");
-var _validation = require("../internals/utils/validation");
+var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 var _dateViewRenderers = require("../dateViewRenderers");
 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; }
@@ -41,7 +41,7 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
       field: _DateField.DateField
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
-      field: ownerState => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps), {
+      field: ownerState => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(defaultizedProps.slotProps?.field, ownerState), (0, _extractValidationProps.extractValidationProps)(defaultizedProps), {
         ref
       }),
       toolbar: (0, _extends2.default)({

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -16,7 +16,7 @@ var _dateViewRenderers = require("../dateViewRenderers");
 var _internals = require("../internals");
 var _icons = require("../internals/components/icons");
 var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
-var _validation = require("../internals/utils/validation");
+var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 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 DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
@@ -44,7 +44,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
       openPickerIcon: _icons.Calendar
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
-      field: ownerState => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps), {
+      field: ownerState => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(defaultizedProps.slotProps?.field, ownerState), (0, _extractValidationProps.extractValidationProps)(defaultizedProps), {
         ref,
         ampm: defaultizedProps.ampm
       }),
@@ -357,6 +357,7 @@ DesktopDateTimePicker.propTypes = {
   shouldDisableMonth: _propTypes.default.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/node/DesktopTimePicker/DesktopTimePicker.js

@@ -15,7 +15,8 @@ var _shared = require("../TimePicker/shared");
 var _internals = require("../internals");
 var _icons = require("../internals/components/icons");
 var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
-var _validation = require("../internals/utils/validation");
+var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
+var _timeViewRenderers = require("../timeViewRenderers");
 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 DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
@@ -23,30 +24,48 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
 
   // Props with the default values common to all time pickers
   const defaultizedProps = (0, _shared.useTimePickerDefaultizedProps)(inProps, 'MuiDesktopTimePicker');
+  const thresholdToRenderTimeInASingleColumn = defaultizedProps.thresholdToRenderTimeInASingleColumn ?? 24;
+  const timeSteps = (0, _extends2.default)({
+    hours: 1,
+    minutes: 5,
+    seconds: 5
+  }, defaultizedProps.timeSteps);
+  const shouldRenderTimeInASingleColumn = 24 * 60 / (timeSteps.hours * timeSteps.minutes) <= thresholdToRenderTimeInASingleColumn;
+  const renderTimeView = shouldRenderTimeInASingleColumn ? _timeViewRenderers.renderDigitalClockTimeView : _timeViewRenderers.renderMultiSectionDigitalClockTimeView;
   const viewRenderers = (0, _extends2.default)({
-    hours: null,
-    minutes: null,
-    seconds: null
+    hours: renderTimeView,
+    minutes: renderTimeView,
+    seconds: renderTimeView,
+    meridiem: renderTimeView
   }, defaultizedProps.viewRenderers);
   const ampmInClock = defaultizedProps.ampmInClock ?? true;
+  const actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
+  const views = defaultizedProps.ampm ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views;
 
   // Props with the default values specific to the desktop variant
   const props = (0, _extends2.default)({}, defaultizedProps, {
     ampmInClock,
+    timeSteps,
     viewRenderers,
+    // Setting only `hours` time view in case of single column time picker
+    // Allows for easy view lifecycle management
+    views: shouldRenderTimeInASingleColumn ? ['hours'] : views,
     slots: (0, _extends2.default)({
       field: _TimeField.TimeField,
       openPickerIcon: _icons.Clock
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
-      field: ownerState => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps), {
+      field: ownerState => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(defaultizedProps.slotProps?.field, ownerState), (0, _extractValidationProps.extractValidationProps)(defaultizedProps), {
         ref,
         ampm: defaultizedProps.ampm
       }),
       toolbar: (0, _extends2.default)({
         hidden: true,
         ampmInClock
-      }, defaultizedProps.slotProps?.toolbar)
+      }, defaultizedProps.slotProps?.toolbar),
+      actionBar: (0, _extends2.default)({
+        actions: actionBarActions
+      }, defaultizedProps.slotProps?.actionBar)
     })
   });
   const {
@@ -230,7 +249,7 @@ DesktopTimePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: _propTypes.default.oneOf(['hours', 'minutes', 'seconds']),
+  openTo: _propTypes.default.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Force rendering in particular orientation.
    */
@@ -259,11 +278,17 @@ DesktopTimePicker.propTypes = {
   shouldDisableClock: _propTypes.default.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.default.func,
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -278,6 +303,22 @@ DesktopTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn: _propTypes.default.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.default.shape({
+    hours: _propTypes.default.number,
+    minutes: _propTypes.default.number,
+    seconds: _propTypes.default.number
+  }),
   /**
    * The selected value.
    * Used when the component is controlled.
@@ -288,7 +329,7 @@ DesktopTimePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: _propTypes.default.oneOf(['hours', 'minutes', 'seconds']),
+  view: _propTypes.default.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
@@ -296,6 +337,7 @@ DesktopTimePicker.propTypes = {
    */
   viewRenderers: _propTypes.default.shape({
     hours: _propTypes.default.func,
+    meridiem: _propTypes.default.func,
     minutes: _propTypes.default.func,
     seconds: _propTypes.default.func
   }),