@mui/x-date-pickers 6.2.1 → 6.3.0

package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -0,0 +1,157 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["autoFocus", "onChange", "className", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { alpha, styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import useForkRef from '@mui/utils/useForkRef';
+import { getMultiSectionDigitalClockSectionUtilityClass } from './multiSectionDigitalClockSectionClasses';
+import { DIGITAL_CLOCK_VIEW_HEIGHT } from '../internals/constants/dimensions';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['root'],
+    item: ['item']
+  };
+  return composeClasses(slots, getMultiSectionDigitalClockSectionUtilityClass, classes);
+};
+var MultiSectionDigitalClockSectionRoot = styled(MenuList, {
+  name: 'MuiMultiSectionDigitalClockSection',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.root;
+  }
+})(function (_ref) {
+  var theme = _ref.theme,
+    ownerState = _ref.ownerState;
+  return {
+    maxHeight: 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 ".concat((theme.vars || theme).palette.divider)
+    },
+    '&:after': {
+      display: 'block',
+      content: '""',
+      height: 188
+    }
+  };
+});
+var MultiSectionDigitalClockSectionItem = styled(MenuItem, {
+  name: 'MuiMultiSectionDigitalClockSection',
+  slot: 'Item',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.item;
+  }
+})(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    padding: 8,
+    margin: '2px 4px',
+    width: 48,
+    justifyContent: 'center',
+    '&:first-of-type': {
+      marginTop: 4
+    },
+    '&:hover': {
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : 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(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.focusOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity)
+    }
+  };
+});
+/**
+ * @ignore - internal component.
+ */
+export var MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClockSection(inProps, ref) {
+  var _slots$digitalClockSe;
+  var containerRef = React.useRef(null);
+  var handleRef = useForkRef(ref, containerRef);
+  var props = useThemeProps({
+    props: inProps,
+    name: 'MuiMultiSectionDigitalClockSection'
+  });
+  var autoFocus = props.autoFocus,
+    onChange = props.onChange,
+    className = props.className,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    items = props.items,
+    active = props.active,
+    slots = props.slots,
+    slotProps = props.slotProps,
+    skipDisabled = props.skipDisabled,
+    other = _objectWithoutProperties(props, _excluded);
+  var ownerState = React.useMemo(function () {
+    return _extends({}, props, {
+      alreadyRendered: !!containerRef.current
+    });
+  }, [props]);
+  var classes = useUtilityClasses(ownerState);
+  var DigitalClockSectionItem = (_slots$digitalClockSe = slots == null ? void 0 : slots.digitalClockSectionItem) != null ? _slots$digitalClockSe : MultiSectionDigitalClockSectionItem;
+  React.useEffect(function () {
+    if (containerRef.current === null) {
+      return;
+    }
+    var selectedItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
+    if (!selectedItem) {
+      return;
+    }
+    if (active && autoFocus) {
+      selectedItem.focus();
+    }
+    var offsetTop = selectedItem.offsetTop;
+
+    // Subtracting the 4px of extra margin intended for the first visible section item
+    containerRef.current.scrollTop = offsetTop - 4;
+  });
+  return /*#__PURE__*/_jsx(MultiSectionDigitalClockSectionRoot, _extends({
+    ref: handleRef,
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    autoFocusItem: autoFocus && active,
+    role: "listbox"
+  }, other, {
+    children: items.map(function (option) {
+      var _option$isDisabled, _option$isDisabled2;
+      if (skipDisabled && (_option$isDisabled = option.isDisabled) != null && _option$isDisabled.call(option, option.value)) {
+        return null;
+      }
+      var isSelected = option.isSelected(option.value);
+      return /*#__PURE__*/_jsx(DigitalClockSectionItem, _extends({
+        onClick: function onClick() {
+          return !readOnly && onChange(option.value);
+        },
+        selected: isSelected,
+        disabled: disabled != null ? disabled : (_option$isDisabled2 = option.isDisabled) == null ? void 0 : _option$isDisabled2.call(option, 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 == null ? void 0 : slotProps.digitalClockSectionItem, {
+        children: option.label
+      }), option.label);
+    })
+  }));
+});

package/legacy/MultiSectionDigitalClock/index.js

@@ -0,0 +1,3 @@
+export { MultiSectionDigitalClock } from './MultiSectionDigitalClock';
+export { multiSectionDigitalClockSectionClasses } from './multiSectionDigitalClockSectionClasses';
+export { multiSectionDigitalClockClasses, getMultiSectionDigitalClockUtilityClass } from './multiSectionDigitalClockClasses';

package/legacy/MultiSectionDigitalClock/multiSectionDigitalClockClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getMultiSectionDigitalClockUtilityClass(slot) {
+  return generateUtilityClass('MuiMultiSectionDigitalClock', slot);
+}
+export var multiSectionDigitalClockClasses = generateUtilityClasses('MuiMultiSectionDigitalClock', ['root']);

package/legacy/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getMultiSectionDigitalClockSectionUtilityClass(slot) {
+  return generateUtilityClass('MuiMultiSectionDigitalClock', slot);
+}
+export var multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClock', ['root', 'item']);

package/legacy/PickersDay/PickersDay.js

@@ -61,8 +61,10 @@ var styleArg = function styleArg(_ref) {
       willChange: 'background-color',
       backgroundColor: (theme.vars || theme).palette.primary.dark
     }
-  }), _defineProperty(_extends2, "&.".concat(pickersDayClasses.disabled), {
+  }), _defineProperty(_extends2, "&.".concat(pickersDayClasses.disabled, ":not(.").concat(pickersDayClasses.selected, ")"), {
     color: (theme.vars || theme).palette.text.disabled
+  }), _defineProperty(_extends2, "&.".concat(pickersDayClasses.disabled, "&.").concat(pickersDayClasses.selected), {
+    opacity: 0.6
   }), _extends2), !ownerState.disableMargin && {
     margin: "0 ".concat(DAY_MARGIN, "px")
   }, ownerState.outsideCurrentMonth && ownerState.showDaysOutsideCurrentMonth && {

package/legacy/PickersLayout/PickersLayout.js

@@ -154,8 +154,8 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   value: PropTypes.any,
-  view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
+  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
   wrapperVariant: PropTypes.oneOf(['desktop', 'mobile'])
 } : void 0;
 export { PickersLayout };

package/legacy/StaticDateTimePicker/StaticDateTimePicker.js

@@ -6,7 +6,7 @@ import { renderTimeViewClock } from '../timeViewRenderers';
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useStaticPicker } from '../internals/hooks/useStaticPicker';
-import { validateDateTime } from '../internals/hooks/validation/useDateTimeValidation';
+import { validateDateTime } from '../internals/utils/validation/validateDateTime';
 var StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTimePicker(inProps, ref) {
   var _defaultizedProps$dis, _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo, _defaultizedProps$slo2;
   var defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiStaticDateTimePicker');
@@ -282,6 +282,7 @@ StaticDateTimePicker.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/StaticTimePicker/StaticTimePicker.js

@@ -5,7 +5,7 @@ import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
 import { renderTimeViewClock } from '../timeViewRenderers';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useStaticPicker } from '../internals/hooks/useStaticPicker';
-import { validateTime } from '../internals/hooks/validation/useTimeValidation';
+import { validateTime } from '../internals/utils/validation/validateTime';
 var StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker(inProps, ref) {
   var _defaultizedProps$dis, _defaultizedProps$amp, _defaultizedProps$slo;
   var defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiStaticTimePicker');
@@ -184,6 +184,7 @@ StaticTimePicker.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.

package/legacy/TimeClock/TimeClock.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _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"];
+var _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"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -92,6 +92,8 @@ export var TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps,
     views = _props$views === void 0 ? ['hours', 'minutes'] : _props$views,
     openTo = props.openTo,
     onViewChange = props.onViewChange,
+    focusedView = props.focusedView,
+    onFocusedViewChange = props.onFocusedViewChange,
     className = props.className,
     disabled = props.disabled,
     readOnly = props.readOnly,
@@ -116,7 +118,9 @@ export var TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps,
       views: views,
       openTo: openTo,
       onViewChange: onViewChange,
-      onChange: handleValueChange
+      onChange: handleValueChange,
+      focusedView: focusedView,
+      onFocusedViewChange: onFocusedViewChange
     }),
     view = _useViews.view,
     setView = _useViews.setView,
@@ -286,7 +290,7 @@ export var TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps,
     ownerState: ownerState
   }, other, {
     children: [/*#__PURE__*/_jsx(Clock, _extends({
-      autoFocus: autoFocus,
+      autoFocus: autoFocus != null ? autoFocus : !!focusedView,
       ampmInClock: ampmInClock && views.includes('hours'),
       value: value,
       type: view,
@@ -332,7 +336,10 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   ampmInClock: PropTypes.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.bool,
   /**
@@ -358,7 +365,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   defaultValue: PropTypes.any,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the picker views and text field are disabled.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -377,6 +384,10 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  /**
+   * Controlled focused view.
+   */
+  focusedView: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
   /**
    * Maximal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
@@ -397,20 +408,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.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.func,
   /**
    * Callback fired on view change.
-   * @param {TimeView} view The new view.
+   * @template TView
+   * @param {TView} view The new view.
    */
   onViewChange: PropTypes.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.oneOf(['hours', 'minutes', 'seconds']),
   /**
-   * Make picker read only.
+   * If `true`, the picker views and text field are read-only.
    * @default false
    */
   readOnly: PropTypes.bool,
@@ -424,6 +445,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.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.
@@ -450,12 +472,13 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   value: PropTypes.any,
   /**
-   * Controlled open view.
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
    */
   view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
   /**
-   * Views for calendar picker.
-   * @default ['hours', 'minutes']
+   * Available views.
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/legacy/TimeField/TimeField.js

@@ -49,11 +49,13 @@ var TimeField = /*#__PURE__*/React.forwardRef(function TimeField(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
     })
   }));
 });
@@ -262,11 +264,27 @@ process.env.NODE_ENV !== "production" ? TimeField.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`, 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/TimeField/useTimeField.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", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
+var _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
-import { validateTime } from '../internals/hooks/validation/useTimeValidation';
+import { validateTime } from '../internals/utils/validation/validateTime';
 import { useUtils } from '../internals/hooks/useUtils';
 var useDefaultizedTimeField = function useDefaultizedTimeField(props) {
   var _props$ampm, _props$disablePast, _props$disableFuture, _props$format;
@@ -24,6 +24,7 @@ export var useTimeField = function useTimeField(_ref) {
     defaultValue = _useDefaultizedTimeFi.defaultValue,
     format = _useDefaultizedTimeFi.format,
     formatDensity = _useDefaultizedTimeFi.formatDensity,
+    shouldRespectLeadingZeros = _useDefaultizedTimeFi.shouldRespectLeadingZeros,
     onChange = _useDefaultizedTimeFi.onChange,
     readOnly = _useDefaultizedTimeFi.readOnly,
     onError = _useDefaultizedTimeFi.onError,
@@ -48,6 +49,7 @@ export var useTimeField = function useTimeField(_ref) {
       defaultValue: defaultValue,
       format: format,
       formatDensity: formatDensity,
+      shouldRespectLeadingZeros: shouldRespectLeadingZeros,
       onChange: onChange,
       readOnly: readOnly,
       onError: onError,

package/legacy/TimePicker/TimePicker.js

@@ -206,7 +206,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.oneOf(['hours', 'minutes', 'seconds']),
+  openTo: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Force rendering in particular orientation.
    */
@@ -235,11 +235,17 @@ process.env.NODE_ENV !== "production" ? TimePicker.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 {}
@@ -254,6 +260,22 @@ process.env.NODE_ENV !== "production" ? TimePicker.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.
@@ -264,7 +286,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.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.
@@ -272,6 +294,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   viewRenderers: PropTypes.shape({
     hours: PropTypes.func,
+    meridiem: PropTypes.func,
     minutes: PropTypes.func,
     seconds: PropTypes.func
   }),

package/legacy/TimePicker/TimePickerToolbar.js

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

package/legacy/index.js

@@ -1,11 +1,14 @@
 /**
- * @mui/x-date-pickers v6.2.1
+ * @mui/x-date-pickers v6.3.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+// Clocks
 export * from './TimeClock';
+export * from './DigitalClock';
+export * from './MultiSectionDigitalClock';
 export * from './LocalizationProvider';
 export * from './PickersDay';
 export * from './locales';

package/legacy/internals/constants/dimensions.js

@@ -1,4 +1,5 @@
 export var DAY_SIZE = 36;
 export var DAY_MARGIN = 2;
 export var DIALOG_WIDTH = 320;
-export var VIEW_HEIGHT = 358;
+export var VIEW_HEIGHT = 358;
+export var DIGITAL_CLOCK_VIEW_HEIGHT = 232;

package/legacy/internals/demo/DemoContainer.js

@@ -10,6 +10,9 @@ var getChildTypeFromChildName = function getChildTypeFromChildName(childName) {
   if (childName.match(/^([A-Za-z]+)Range(Calendar|Clock)$/)) {
     return 'multi-panel-UI-view';
   }
+  if (childName.match(/^([A-Za-z]*)(DigitalClock)$/)) {
+    return 'Tall-UI-view';
+  }
   if (childName.match(/^Static([A-Za-z]+)/) || childName.match(/^([A-Za-z]+)(Calendar|Clock)$/)) {
     return 'UI-view';
   }
@@ -68,7 +71,7 @@ export function DemoContainer(props) {
   });
   var getSpacing = function getSpacing(direction) {
     if (direction === 'row') {
-      return childrenTypes.has('UI-view') ? 3 : 2;
+      return childrenTypes.has('UI-view') || childrenTypes.has('Tall-UI-view') ? 3 : 2;
     }
     return childrenTypes.has('UI-view') ? 4 : 3;
   };

package/legacy/internals/hooks/date-helpers-hooks.js

@@ -21,13 +21,13 @@ export function usePreviousMonthDisabled(month, _ref2) {
     return !utils.isBefore(firstEnabledMonth, month);
   }, [disablePast, minDate, month, utils]);
 }
-export function useMeridiemMode(date, ampm, onChange) {
+export function useMeridiemMode(date, ampm, onChange, selectionState) {
   var utils = useUtils();
   var meridiemMode = getMeridiem(date, utils);
   var handleMeridiemChange = React.useCallback(function (mode) {
     var timeWithMeridiem = date == null ? null : convertToMeridiem(date, mode, Boolean(ampm), utils);
-    onChange(timeWithMeridiem, 'partial');
-  }, [ampm, date, onChange, utils]);
+    onChange(timeWithMeridiem, selectionState != null ? selectionState : 'partial');
+  }, [ampm, date, onChange, selectionState, utils]);
   return {
     meridiemMode: meridiemMode,
     handleMeridiemChange: handleMeridiemChange

package/legacy/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -99,7 +99,8 @@ export var useDesktopPicker = function useDesktopPicker(_ref) {
       format: format,
       formatDensity: formatDensity,
       label: label,
-      autoFocus: autoFocus && !props.open
+      autoFocus: autoFocus && !props.open,
+      focused: open ? true : undefined
     }),
     ownerState: props
   });

package/legacy/internals/hooks/useField/useField.js

@@ -7,7 +7,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
 import { useTheme } from '@mui/material/styles';
-import { useValidation } from '../validation/useValidation';
+import { useValidation } from '../useValidation';
 import { useUtils } from '../useUtils';
 import { adjustSectionValue, isAndroid, cleanString, getSectionOrder } from './useField.utils';
 import { useFieldState } from './useFieldState';
@@ -26,14 +26,6 @@ export var useField = function useField(params) {
     setTempAndroidValueStr = _useFieldState.setTempAndroidValueStr,
     sectionsValueBoundaries = _useFieldState.sectionsValueBoundaries,
     placeholder = _useFieldState.placeholder;
-  var _useFieldCharacterEdi = useFieldCharacterEditing({
-      sections: state.sections,
-      updateSectionValue: updateSectionValue,
-      sectionsValueBoundaries: sectionsValueBoundaries,
-      setTempAndroidValueStr: setTempAndroidValueStr
-    }),
-    applyCharacterEditing = _useFieldCharacterEdi.applyCharacterEditing,
-    resetCharacterQuery = _useFieldCharacterEdi.resetCharacterQuery;
   var inputRefProp = params.inputRef,
     internalProps = params.internalProps,
     _params$internalProps = params.internalProps,
@@ -52,6 +44,14 @@ export var useField = function useField(params) {
     fieldValueManager = params.fieldValueManager,
     valueManager = params.valueManager,
     validator = params.validator;
+  var _useFieldCharacterEdi = useFieldCharacterEditing({
+      sections: state.sections,
+      updateSectionValue: updateSectionValue,
+      sectionsValueBoundaries: sectionsValueBoundaries,
+      setTempAndroidValueStr: setTempAndroidValueStr
+    }),
+    applyCharacterEditing = _useFieldCharacterEdi.applyCharacterEditing,
+    resetCharacterQuery = _useFieldCharacterEdi.resetCharacterQuery;
   var inputRef = React.useRef(null);
   var handleRef = useForkRef(inputRefProp, inputRef);
   var focusTimeoutRef = React.useRef(undefined);
@@ -130,7 +130,8 @@ export var useField = function useField(params) {
       var activeSection = state.sections[selectedSectionIndexes.startIndex];
       var lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);
       var digitsOnly = /^[0-9]+$/.test(pastedValue);
-      var isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly;
+      var digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
+      var isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
       if (isValidPastedValue) {
         // Early return to let the paste update section, value
         return;