@mui/x-date-pickers 6.2.1 → 6.3.1

package/node/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiSectionDigitalClockSection = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _multiSectionDigitalClockSectionClasses = require("./multiSectionDigitalClockSectionClasses");
+var _dimensions = require("../internals/constants/dimensions");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["autoFocus", "onChange", "className", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
+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 useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    item: ['item']
+  };
+  return (0, _composeClasses.default)(slots, _multiSectionDigitalClockSectionClasses.getMultiSectionDigitalClockSectionUtilityClass, classes);
+};
+const MultiSectionDigitalClockSectionRoot = (0, _styles.styled)(_MenuList.default, {
+  name: 'MuiMultiSectionDigitalClockSection',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme,
+  ownerState
+}) => ({
+  maxHeight: _dimensions.DIGITAL_CLOCK_VIEW_HEIGHT,
+  width: 56,
+  padding: 0,
+  overflow: 'hidden',
+  scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto',
+  '&:hover': {
+    overflowY: 'auto'
+  },
+  '&:not(:first-of-type)': {
+    borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
+  },
+  '&:after': {
+    display: 'block',
+    content: '""',
+    height: 188
+  }
+}));
+const MultiSectionDigitalClockSectionItem = (0, _styles.styled)(_MenuItem.default, {
+  name: 'MuiMultiSectionDigitalClockSection',
+  slot: 'Item',
+  overridesResolver: (_, styles) => styles.item
+})(({
+  theme
+}) => ({
+  padding: 8,
+  margin: '2px 4px',
+  width: 48,
+  justifyContent: 'center',
+  '&:first-of-type': {
+    marginTop: 4
+  },
+  '&:hover': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+  },
+  '&.Mui-selected': {
+    backgroundColor: (theme.vars || theme).palette.primary.main,
+    color: (theme.vars || theme).palette.primary.contrastText,
+    '&:focus-visible, &:hover': {
+      backgroundColor: (theme.vars || theme).palette.primary.dark
+    }
+  },
+  '&.Mui-focusVisible': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.focusOpacity)
+  }
+}));
+/**
+ * @ignore - internal component.
+ */
+const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClockSection(inProps, ref) {
+  const containerRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(ref, containerRef);
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiMultiSectionDigitalClockSection'
+  });
+  const {
+      autoFocus,
+      onChange,
+      className,
+      disabled,
+      readOnly,
+      items,
+      active,
+      slots,
+      slotProps,
+      skipDisabled
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const ownerState = React.useMemo(() => (0, _extends2.default)({}, props, {
+    alreadyRendered: !!containerRef.current
+  }), [props]);
+  const classes = useUtilityClasses(ownerState);
+  const DigitalClockSectionItem = slots?.digitalClockSectionItem ?? MultiSectionDigitalClockSectionItem;
+  React.useEffect(() => {
+    if (containerRef.current === null) {
+      return;
+    }
+    const selectedItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
+    if (!selectedItem) {
+      return;
+    }
+    if (active && autoFocus) {
+      selectedItem.focus();
+    }
+    const offsetTop = selectedItem.offsetTop;
+
+    // Subtracting the 4px of extra margin intended for the first visible section item
+    containerRef.current.scrollTop = offsetTop - 4;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MultiSectionDigitalClockSectionRoot, (0, _extends2.default)({
+    ref: handleRef,
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: ownerState,
+    autoFocusItem: autoFocus && active,
+    role: "listbox"
+  }, other, {
+    children: items.map(option => {
+      if (skipDisabled && option.isDisabled?.(option.value)) {
+        return null;
+      }
+      const isSelected = option.isSelected(option.value);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(DigitalClockSectionItem, (0, _extends2.default)({
+        onClick: () => !readOnly && onChange(option.value),
+        selected: isSelected,
+        disabled: disabled ?? option.isDisabled?.(option.value),
+        disableRipple: readOnly,
+        role: "option"
+        // aria-readonly is not supported here and does not have any effect
+        ,
+        "aria-disabled": readOnly,
+        "aria-label": option.ariaLabel,
+        "aria-selected": isSelected
+      }, slotProps?.digitalClockSectionItem, {
+        children: option.label
+      }), option.label);
+    })
+  }));
+});
+exports.MultiSectionDigitalClockSection = MultiSectionDigitalClockSection;

package/node/MultiSectionDigitalClock/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MultiSectionDigitalClock", {
+  enumerable: true,
+  get: function () {
+    return _MultiSectionDigitalClock.MultiSectionDigitalClock;
+  }
+});
+Object.defineProperty(exports, "getMultiSectionDigitalClockUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _multiSectionDigitalClockClasses.getMultiSectionDigitalClockUtilityClass;
+  }
+});
+Object.defineProperty(exports, "multiSectionDigitalClockClasses", {
+  enumerable: true,
+  get: function () {
+    return _multiSectionDigitalClockClasses.multiSectionDigitalClockClasses;
+  }
+});
+Object.defineProperty(exports, "multiSectionDigitalClockSectionClasses", {
+  enumerable: true,
+  get: function () {
+    return _multiSectionDigitalClockSectionClasses.multiSectionDigitalClockSectionClasses;
+  }
+});
+var _MultiSectionDigitalClock = require("./MultiSectionDigitalClock");
+var _multiSectionDigitalClockSectionClasses = require("./multiSectionDigitalClockSectionClasses");
+var _multiSectionDigitalClockClasses = require("./multiSectionDigitalClockClasses");

package/node/MultiSectionDigitalClock/multiSectionDigitalClockClasses.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMultiSectionDigitalClockUtilityClass = getMultiSectionDigitalClockUtilityClass;
+exports.multiSectionDigitalClockClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getMultiSectionDigitalClockUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiMultiSectionDigitalClock', slot);
+}
+const multiSectionDigitalClockClasses = (0, _generateUtilityClasses.default)('MuiMultiSectionDigitalClock', ['root']);
+exports.multiSectionDigitalClockClasses = multiSectionDigitalClockClasses;

package/node/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMultiSectionDigitalClockSectionUtilityClass = getMultiSectionDigitalClockSectionUtilityClass;
+exports.multiSectionDigitalClockSectionClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getMultiSectionDigitalClockSectionUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiMultiSectionDigitalClock', slot);
+}
+const multiSectionDigitalClockSectionClasses = (0, _generateUtilityClasses.default)('MuiMultiSectionDigitalClock', ['root', 'item']);
+exports.multiSectionDigitalClockSectionClasses = multiSectionDigitalClockSectionClasses;

package/node/PickersDay/PickersDay.js

@@ -72,8 +72,11 @@ const styleArg = ({
       backgroundColor: (theme.vars || theme).palette.primary.dark
     }
   },
-  [`&.${_pickersDayClasses.pickersDayClasses.disabled}`]: {
+  [`&.${_pickersDayClasses.pickersDayClasses.disabled}:not(.${_pickersDayClasses.pickersDayClasses.selected})`]: {
     color: (theme.vars || theme).palette.text.disabled
+  },
+  [`&.${_pickersDayClasses.pickersDayClasses.disabled}&.${_pickersDayClasses.pickersDayClasses.selected}`]: {
+    opacity: 0.6
   }
 }, !ownerState.disableMargin && {
   margin: `0 ${_dimensions.DAY_MARGIN}px`

package/node/PickersLayout/PickersLayout.js

@@ -165,7 +165,7 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   slots: _propTypes.default.object,
   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]),
   value: _propTypes.default.any,
-  view: _propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
+  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
+  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
   wrapperVariant: _propTypes.default.oneOf(['desktop', 'mobile'])
 } : void 0;

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -13,7 +13,7 @@ var _timeViewRenderers = require("../timeViewRenderers");
 var _dateViewRenderers = require("../dateViewRenderers");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useStaticPicker = require("../internals/hooks/useStaticPicker");
-var _useDateTimeValidation = require("../internals/hooks/validation/useDateTimeValidation");
+var _validateDateTime = require("../internals/utils/validation/validateDateTime");
 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 StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTimePicker(inProps, ref) {
@@ -51,7 +51,7 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date-time',
-    validator: _useDateTimeValidation.validateDateTime,
+    validator: _validateDateTime.validateDateTime,
     ref
   });
   return renderPicker();
@@ -292,6 +292,7 @@ StaticDateTimePicker.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/StaticTimePicker/StaticTimePicker.js

@@ -12,7 +12,7 @@ var _shared = require("../TimePicker/shared");
 var _timeViewRenderers = require("../timeViewRenderers");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useStaticPicker = require("../internals/hooks/useStaticPicker");
-var _useTimeValidation = require("../internals/hooks/validation/useTimeValidation");
+var _validateTime = require("../internals/utils/validation/validateTime");
 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 StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker(inProps, ref) {
@@ -43,7 +43,7 @@ const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'time',
-    validator: _useTimeValidation.validateTime,
+    validator: _validateTime.validateTime,
     ref
   });
   return renderPicker();
@@ -194,6 +194,7 @@ StaticTimePicker.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.

package/node/TimeClock/TimeClock.js

@@ -24,7 +24,7 @@ var _Clock = require("./Clock");
 var _ClockNumbers = require("./ClockNumbers");
 var _slotsMigration = require("../internals/utils/slots-migration");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "className", "disabled", "readOnly"];
+const _excluded = ["ampm", "ampmInClock", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "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); }
 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 useUtilityClasses = ownerState => {
@@ -93,6 +93,8 @@ const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps, ref)
       views = ['hours', 'minutes'],
       openTo,
       onViewChange,
+      focusedView,
+      onFocusedViewChange,
       className,
       disabled,
       readOnly
@@ -121,7 +123,9 @@ const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps, ref)
     views,
     openTo,
     onViewChange,
-    onChange: handleValueChange
+    onChange: handleValueChange,
+    focusedView,
+    onFocusedViewChange
   });
   const selectedTimeOrMidnight = React.useMemo(() => value || utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0), [value, now, utils]);
   const {
@@ -279,7 +283,7 @@ const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps, ref)
     ownerState: ownerState
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Clock.Clock, (0, _extends2.default)({
-      autoFocus: autoFocus,
+      autoFocus: autoFocus ?? !!focusedView,
       ampmInClock: ampmInClock && views.includes('hours'),
       value: value,
       type: view,
@@ -322,7 +326,10 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   ampmInClock: _propTypes.default.bool,
   /**
-   * Set to `true` if focus should be moved to clock picker.
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
   /**
@@ -348,7 +355,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   defaultValue: _propTypes.default.any,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the picker views and text field are disabled.
    * @default false
    */
   disabled: _propTypes.default.bool,
@@ -367,6 +374,10 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    * @default false
    */
   disablePast: _propTypes.default.bool,
+  /**
+   * Controlled focused view.
+   */
+  focusedView: _propTypes.default.oneOf(['hours', 'minutes', 'seconds']),
   /**
    * Maximal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
@@ -387,20 +398,30 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    * @template TDate
    * @param {TDate | null} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
+   * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */
   onChange: _propTypes.default.func,
+  /**
+   * Callback fired on focused view change.
+   * @template TView
+   * @param {TView} view The new view to focus or not.
+   * @param {boolean} hasFocus `true` if the view should be focused.
+   */
+  onFocusedViewChange: _propTypes.default.func,
   /**
    * Callback fired on view change.
-   * @param {TimeView} view The new view.
+   * @template TView
+   * @param {TView} view The new view.
    */
   onViewChange: _propTypes.default.func,
   /**
-   * Initially open view.
-   * @default 'hours'
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
    */
   openTo: _propTypes.default.oneOf(['hours', 'minutes', 'seconds']),
   /**
-   * Make picker read only.
+   * If `true`, the picker views and text field are read-only.
    * @default false
    */
   readOnly: _propTypes.default.bool,
@@ -414,6 +435,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.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.
@@ -440,12 +462,13 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   value: _propTypes.default.any,
   /**
-   * Controlled open view.
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
    */
   view: _propTypes.default.oneOf(['hours', 'minutes', 'seconds']),
   /**
-   * Views for calendar picker.
-   * @default ['hours', 'minutes']
+   * Available views.
    */
   views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['hours', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/node/TimeField/TimeField.js

@@ -63,11 +63,13 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(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
     })
   }));
 });
@@ -229,6 +231,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  onClick: _propTypes.default.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.
@@ -277,11 +283,27 @@ process.env.NODE_ENV !== "production" ? TimeField.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`, 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/TimeField/useTimeField.js

@@ -9,9 +9,9 @@ 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 _useTimeValidation = require("../internals/hooks/validation/useTimeValidation");
+var _validateTime = require("../internals/utils/validation/validateTime");
 var _useUtils = require("../internals/hooks/useUtils");
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 const useDefaultizedTimeField = props => {
   const utils = (0, _useUtils.useUtils)();
   const ampm = props.ampm ?? utils.is12HourCycleInCurrentLocale();
@@ -32,6 +32,7 @@ const useTimeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -57,6 +58,7 @@ const useTimeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -75,7 +77,7 @@ const useTimeField = ({
     },
     valueManager: _valueManagers.singleItemValueManager,
     fieldValueManager: _valueManagers.singleItemFieldValueManager,
-    validator: _useTimeValidation.validateTime,
+    validator: _validateTime.validateTime,
     valueType: 'time'
   });
 };

package/node/TimePicker/TimePicker.js

@@ -217,7 +217,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.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.
    */
@@ -246,11 +246,17 @@ process.env.NODE_ENV !== "production" ? TimePicker.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 {}
@@ -265,6 +271,22 @@ process.env.NODE_ENV !== "production" ? TimePicker.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.
@@ -275,7 +297,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.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.
@@ -283,6 +305,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   viewRenderers: _propTypes.default.shape({
     hours: _propTypes.default.func,
+    meridiem: _propTypes.default.func,
     minutes: _propTypes.default.func,
     seconds: _propTypes.default.func
   }),

package/node/TimePicker/TimePickerToolbar.js

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

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.2.1
+ * @mui/x-date-pickers v6.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -31,6 +31,30 @@ Object.keys(_TimeClock).forEach(function (key) {
     }
   });
 });
+var _DigitalClock = require("./DigitalClock");
+Object.keys(_DigitalClock).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DigitalClock[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DigitalClock[key];
+    }
+  });
+});
+var _MultiSectionDigitalClock = require("./MultiSectionDigitalClock");
+Object.keys(_MultiSectionDigitalClock).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _MultiSectionDigitalClock[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MultiSectionDigitalClock[key];
+    }
+  });
+});
 var _LocalizationProvider = require("./LocalizationProvider");
 Object.keys(_LocalizationProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;