@mui/x-date-pickers 6.18.0 → 7.0.0-alpha.0

package/legacy/DateTimeField/DateTimeField.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["components", "componentsProps", "slots", "slotProps", "InputProps", "inputProps"],
+var _excluded = ["slots", "slotProps", "InputProps", "inputProps"],
   _excluded2 = ["inputRef"],
   _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly", "clearable", "onClear"];
 import * as React from 'react';
@@ -23,23 +23,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - [DateTimeField API](https://mui.com/x/api/date-pickers/date-time-field/)
  */
 var DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps, ref) {
-  var _ref, _slots$textField, _slotProps$textField;
+  var _slots$textField;
   var themeProps = useThemeProps({
     props: inProps,
     name: 'MuiDateTimeField'
   });
-  var components = themeProps.components,
-    componentsProps = themeProps.componentsProps,
-    slots = themeProps.slots,
+  var slots = themeProps.slots,
     slotProps = themeProps.slotProps,
     InputProps = themeProps.InputProps,
     inputProps = themeProps.inputProps,
     other = _objectWithoutProperties(themeProps, _excluded);
   var ownerState = themeProps;
-  var TextField = (_ref = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : components == null ? void 0 : components.TextField) != null ? _ref : MuiTextField;
+  var TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : MuiTextField;
   var _useSlotProps = useSlotProps({
       elementType: TextField,
-      externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
+      externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
       externalForwardedProps: other,
       ownerState: ownerState
     }),
@@ -67,9 +65,7 @@ var DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps
       fieldProps: fieldProps,
       InputProps: fieldProps.InputProps,
       slots: slots,
-      slotProps: slotProps,
-      components: components,
-      componentsProps: componentsProps
+      slotProps: slotProps
     }),
     ProcessedInputProps = _useClearableField.InputProps,
     processedFieldProps = _useClearableField.fieldProps;
@@ -116,18 +112,6 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
   component: PropTypes.elementType,
-  /**
-   * Overridable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components: PropTypes.object,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps: PropTypes.object,
   /**
    * The default value. Use when the component is not controlled.
    */

package/legacy/DateTimePicker/DateTimePicker.js

@@ -73,18 +73,6 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,
-  /**
-   * Overridable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components: PropTypes.object,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps: PropTypes.object,
   /**
    * Formats the day of week displayed in the calendar header.
    * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.

package/legacy/DateTimePicker/shared.js

@@ -6,9 +6,8 @@ import { applyDefaultDate } from '../internals/utils/date-utils';
 import { DateTimePickerTabs } from './DateTimePickerTabs';
 import { DateTimePickerToolbar } from './DateTimePickerToolbar';
 import { applyDefaultViewProps } from '../internals/utils/views';
-import { uncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 export function useDateTimePickerDefaultizedProps(props, name) {
-  var _themeProps$ampm, _themeProps$slots, _themeProps$slotProps, _themeProps$orientati, _themeProps$disableIg, _themeProps$disableFu, _themeProps$disablePa, _themeProps$minDateTi, _themeProps$maxDateTi, _themeProps$minDateTi2, _themeProps$maxDateTi2;
+  var _themeProps$ampm, _themeProps$orientati, _themeProps$disableIg, _themeProps$disableFu, _themeProps$disablePa, _themeProps$minDateTi, _themeProps$maxDateTi, _themeProps$minDateTi2, _themeProps$maxDateTi2, _themeProps$slotProps;
   var utils = useUtils();
   var defaultDates = useDefaultDates();
   var themeProps = useThemeProps({
@@ -25,8 +24,6 @@ export function useDateTimePickerDefaultizedProps(props, name) {
       dateTimePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  var slots = (_themeProps$slots = themeProps.slots) != null ? _themeProps$slots : uncapitalizeObjectKeys(themeProps.components);
-  var slotProps = (_themeProps$slotProps = themeProps.slotProps) != null ? _themeProps$slotProps : themeProps.componentsProps;
   return _extends({}, themeProps, applyDefaultViewProps({
     views: themeProps.views,
     openTo: themeProps.openTo,
@@ -49,11 +46,11 @@ export function useDateTimePickerDefaultizedProps(props, name) {
     slots: _extends({
       toolbar: DateTimePickerToolbar,
       tabs: DateTimePickerTabs
-    }, slots),
-    slotProps: _extends({}, slotProps, {
+    }, themeProps.slots),
+    slotProps: _extends({}, themeProps.slotProps, {
       toolbar: _extends({
         ampm: ampm
-      }, slotProps == null ? void 0 : slotProps.toolbar)
+      }, (_themeProps$slotProps = themeProps.slotProps) == null ? void 0 : _themeProps$slotProps.toolbar)
     })
   });
 }

package/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -87,18 +87,6 @@ DesktopDatePicker.propTypes = {
    * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,
-  /**
-   * Overridable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components: PropTypes.object,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps: PropTypes.object,
   /**
    * Formats the day of week displayed in the calendar header.
    * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -135,18 +135,6 @@ DesktopDateTimePicker.propTypes = {
    * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,
-  /**
-   * Overridable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components: PropTypes.object,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps: PropTypes.object,
   /**
    * Formats the day of week displayed in the calendar header.
    * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.

package/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -120,18 +120,6 @@ DesktopTimePicker.propTypes = {
    * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,
-  /**
-   * Overridable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components: PropTypes.object,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps: PropTypes.object,
   /**
    * The default value.
    * Used when the component is not controlled.

package/legacy/DigitalClock/DigitalClock.js

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["ampm", "timeStep", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "views", "skipDisabled", "timezone"];
+var _excluded = ["ampm", "timeStep", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "views", "skipDisabled", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -97,7 +97,7 @@ var DigitalClockItem = styled(MenuItem, {
  * - [DigitalClock API](https://mui.com/x/api/date-pickers/digital-clock/)
  */
 export var DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(inProps, ref) {
-  var _ref3, _slots$digitalClockIt, _slotProps$digitalClo;
+  var _slots$digitalClockIt;
   var utils = useUtils();
   var containerRef = React.useRef(null);
   var handleRef = useForkRef(ref, containerRef);
@@ -110,8 +110,6 @@ export var DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(in
     _props$timeStep = props.timeStep,
     timeStep = _props$timeStep === void 0 ? 30 : _props$timeStep,
     autoFocus = props.autoFocus,
-    components = props.components,
-    componentsProps = props.componentsProps,
     slots = props.slots,
     slotProps = props.slotProps,
     valueProp = props.value,
@@ -161,10 +159,10 @@ export var DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(in
     });
   }, [props]);
   var classes = useUtilityClasses(ownerState);
-  var ClockItem = (_ref3 = (_slots$digitalClockIt = slots == null ? void 0 : slots.digitalClockItem) != null ? _slots$digitalClockIt : components == null ? void 0 : components.DigitalClockItem) != null ? _ref3 : DigitalClockItem;
+  var ClockItem = (_slots$digitalClockIt = slots == null ? void 0 : slots.digitalClockItem) != null ? _slots$digitalClockIt : DigitalClockItem;
   var clockItemProps = useSlotProps({
     elementType: ClockItem,
-    externalSlotProps: (_slotProps$digitalClo = slotProps == null ? void 0 : slotProps.digitalClockItem) != null ? _slotProps$digitalClo : componentsProps == null ? void 0 : componentsProps.digitalClockItem,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.digitalClockItem,
     ownerState: {},
     className: classes.item
   });
@@ -195,11 +193,14 @@ export var DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(in
     if (containerRef.current === null) {
       return;
     }
-    var selectedItem = containerRef.current.querySelector('[role="listbox"] [role="option"][aria-selected="true"]');
-    if (!selectedItem) {
+    var activeItem = containerRef.current.querySelector('[role="listbox"] [role="option"][tabindex="0"], [role="listbox"] [role="option"][aria-selected="true"]');
+    if (!activeItem) {
       return;
     }
-    var offsetTop = selectedItem.offsetTop;
+    var offsetTop = activeItem.offsetTop;
+    if (autoFocus || !!focusedView) {
+      activeItem.focus();
+    }
 
     // Subtracting the 4px of extra margin intended for the first visible section item
     containerRef.current.scrollTop = offsetTop - 4;
@@ -243,21 +244,24 @@ export var DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(in
       return utils.addMinutes(startOfDay, timeStep * (index + 1));
     })));
   }, [valueOrReferenceDate, timeStep, utils]);
+  var focusedOptionIndex = timeOptions.findIndex(function (option) {
+    return utils.isEqual(option, valueOrReferenceDate);
+  });
   return /*#__PURE__*/_jsx(DigitalClockRoot, _extends({
     ref: handleRef,
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
     children: /*#__PURE__*/_jsx(DigitalClockList, {
-      autoFocusItem: autoFocus || !!focusedView,
       role: "listbox",
       "aria-label": localeText.timePickerToolbarTitle,
       className: classes.list,
-      children: timeOptions.map(function (option) {
+      children: timeOptions.map(function (option, index) {
         if (skipDisabled && isTimeDisabled(option)) {
           return null;
         }
         var isSelected = utils.isEqual(option, value);
+        var tabIndex = focusedOptionIndex === index || focusedOptionIndex === -1 && index === 0 ? 0 : -1;
         return /*#__PURE__*/_jsx(ClockItem, _extends({
           onClick: function onClick() {
             return !readOnly && handleItemSelect(option);
@@ -269,7 +273,8 @@ export var DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(in
           // aria-readonly is not supported here and does not have any effect
           ,
           "aria-disabled": readOnly,
-          "aria-selected": isSelected
+          "aria-selected": isSelected,
+          tabIndex: tabIndex
         }, clockItemProps, {
           children: utils.format(option, ampm ? 'fullTime12h' : 'fullTime24h')
         }), utils.toISO(option));
@@ -299,18 +304,6 @@ process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * Overrideable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components: PropTypes.object,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps: PropTypes.object,
   /**
    * The default selected value.
    * Used when the component is not controlled.

package/legacy/MobileDatePicker/MobileDatePicker.js

@@ -84,18 +84,6 @@ MobileDatePicker.propTypes = {
    * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,
-  /**
-   * Overridable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components: PropTypes.object,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps: PropTypes.object,
   /**
    * Formats the day of week displayed in the calendar header.
    * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.

package/legacy/MobileDateTimePicker/MobileDateTimePicker.js

@@ -105,18 +105,6 @@ MobileDateTimePicker.propTypes = {
    * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,
-  /**
-   * Overridable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components: PropTypes.object,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps: PropTypes.object,
   /**
    * Formats the day of week displayed in the calendar header.
    * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.

package/legacy/MobileTimePicker/MobileTimePicker.js

@@ -98,18 +98,6 @@ MobileTimePicker.propTypes = {
    * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,
-  /**
-   * Overridable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components: PropTypes.object,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps: PropTypes.object,
   /**
    * The default value.
    * Used when the component is not controlled.

package/legacy/MonthCalendar/MonthCalendar.js

@@ -123,13 +123,10 @@ export var MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(
     if (value != null) {
       return utils.getMonth(value);
     }
-    if (disableHighlightToday) {
-      return null;
-    }
-    return utils.getMonth(referenceDate);
-  }, [value, utils, disableHighlightToday, referenceDate]);
+    return null;
+  }, [value, utils]);
   var _React$useState = React.useState(function () {
-      return selectedMonth || todayMonth;
+      return selectedMonth || utils.getMonth(referenceDate);
     }),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedMonth = _React$useState2[0],

package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["ampm", "timeSteps", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "skipDisabled", "timezone"];
+var _excluded = ["ampm", "timeSteps", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "skipDisabled", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -65,8 +65,6 @@ export var MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function Mul
     ampm = _props$ampm === void 0 ? utils.is12HourCycleInCurrentLocale() : _props$ampm,
     inTimeSteps = props.timeSteps,
     autoFocus = props.autoFocus,
-    components = props.components,
-    componentsProps = props.componentsProps,
     slots = props.slots,
     slotProps = props.slotProps,
     valueProp = props.value,
@@ -252,7 +250,8 @@ export var MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function Mul
                 return disabled || isTimeDisabled(hours, 'hours');
               },
               timeStep: timeSteps.hours,
-              resolveAriaLabel: localeText.hoursClockNumberText
+              resolveAriaLabel: localeText.hoursClockNumberText,
+              valueOrReferenceDate: valueOrReferenceDate
             })
           };
         }
@@ -308,6 +307,9 @@ export var MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function Mul
               isSelected: function isSelected() {
                 return !!value && meridiemMode === 'am';
               },
+              isFocused: function isFocused() {
+                return !!valueOrReferenceDate && meridiemMode === 'am';
+              },
               ariaLabel: amLabel
             }, {
               value: 'pm',
@@ -315,6 +317,9 @@ export var MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function Mul
               isSelected: function isSelected() {
                 return !!value && meridiemMode === 'pm';
               },
+              isFocused: function isFocused() {
+                return !!valueOrReferenceDate && meridiemMode === 'pm';
+              },
               ariaLabel: pmLabel
             }]
           };
@@ -347,8 +352,8 @@ export var MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function Mul
         autoFocus: autoFocus != null ? autoFocus : focusedView === timeView,
         disabled: disabled,
         readOnly: readOnly,
-        slots: slots != null ? slots : components,
-        slotProps: slotProps != null ? slotProps : componentsProps,
+        slots: slots,
+        slotProps: slotProps,
         skipDisabled: skipDisabled,
         "aria-label": localeText.selectViewText(timeView)
       }, timeView);
@@ -377,18 +382,6 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * Overrideable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components: PropTypes.object,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps: PropTypes.object,
   /**
    * The default selected value.
    * Used when the component is not controlled.

package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js

@@ -6,20 +6,25 @@ export var getHourSectionOptions = function getHourSectionOptions(_ref) {
     ampm = _ref.ampm,
     isDisabled = _ref.isDisabled,
     resolveAriaLabel = _ref.resolveAriaLabel,
-    timeStep = _ref.timeStep;
+    timeStep = _ref.timeStep,
+    valueOrReferenceDate = _ref.valueOrReferenceDate;
   var currentHours = value ? utils.getHours(value) : null;
   var result = [];
-  var isSelected = function isSelected(hour) {
-    if (currentHours === null) {
+  var isSelected = function isSelected(hour, overriddenCurrentHours) {
+    var resolvedCurrentHours = overriddenCurrentHours != null ? overriddenCurrentHours : currentHours;
+    if (resolvedCurrentHours === null) {
       return false;
     }
     if (ampm) {
       if (hour === 12) {
-        return currentHours === 12 || currentHours === 0;
+        return resolvedCurrentHours === 12 || resolvedCurrentHours === 0;
       }
-      return currentHours === hour || currentHours - 12 === hour;
+      return resolvedCurrentHours === hour || resolvedCurrentHours - 12 === hour;
     }
-    return currentHours === hour;
+    return resolvedCurrentHours === hour;
+  };
+  var isFocused = function isFocused(hour) {
+    return isSelected(hour, utils.getHours(valueOrReferenceDate));
   };
   var endHour = ampm ? 11 : 23;
   for (var hour = 0; hour <= endHour; hour += timeStep) {
@@ -31,6 +36,7 @@ export var getHourSectionOptions = function getHourSectionOptions(_ref) {
       label: label,
       isSelected: isSelected,
       isDisabled: isDisabled,
+      isFocused: isFocused,
       ariaLabel: ariaLabel
     });
   }
@@ -50,6 +56,9 @@ export var getTimeSectionOptions = function getTimeSectionOptions(_ref2) {
     }
     return hasValue && value === timeValue;
   };
+  var isFocused = function isFocused(timeValue) {
+    return value === timeValue;
+  };
   return _toConsumableArray(Array.from({
     length: Math.ceil(60 / timeStep)
   }, function (_, index) {
@@ -59,6 +68,7 @@ export var getTimeSectionOptions = function getTimeSectionOptions(_ref2) {
       label: resolveLabel(timeValue),
       isDisabled: isDisabled,
       isSelected: isSelected,
+      isFocused: isFocused,
       ariaLabel: resolveAriaLabel(timeValue.toString())
     };
   }));

package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -88,7 +88,7 @@ export var MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(funct
   var _slots$digitalClockSe;
   var containerRef = React.useRef(null);
   var handleRef = useForkRef(ref, containerRef);
-  var previousSelected = React.useRef(null);
+  var previousActive = React.useRef(null);
   var props = useThemeProps({
     props: inProps,
     name: 'MuiMultiSectionDigitalClockSection'
@@ -115,23 +115,26 @@ export var MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(funct
     if (containerRef.current === null) {
       return;
     }
-    var selectedItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
-    if (!selectedItem || previousSelected.current === selectedItem) {
+    var activeItem = containerRef.current.querySelector('[role="option"][tabindex="0"], [role="option"][aria-selected="true"]');
+    if (!activeItem || previousActive.current === activeItem) {
       // Handle setting the ref to null if the selected item is ever reset via UI
-      if (previousSelected.current !== selectedItem) {
-        previousSelected.current = selectedItem;
+      if (previousActive.current !== activeItem) {
+        previousActive.current = activeItem;
       }
       return;
     }
-    previousSelected.current = selectedItem;
+    previousActive.current = activeItem;
     if (active && autoFocus) {
-      selectedItem.focus();
+      activeItem.focus();
     }
-    var offsetTop = selectedItem.offsetTop;
+    var offsetTop = activeItem.offsetTop;
 
     // Subtracting the 4px of extra margin intended for the first visible section item
     containerRef.current.scrollTop = offsetTop - 4;
   });
+  var focusedOptionIndex = items.findIndex(function (item) {
+    return item.isFocused(item.value);
+  });
   return /*#__PURE__*/_jsx(MultiSectionDigitalClockSectionRoot, _extends({
     ref: handleRef,
     className: clsx(classes.root, className),
@@ -139,12 +142,13 @@ export var MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(funct
     autoFocusItem: autoFocus && active,
     role: "listbox"
   }, other, {
-    children: items.map(function (option) {
+    children: items.map(function (option, index) {
       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);
+      var tabIndex = focusedOptionIndex === index || focusedOptionIndex === -1 && index === 0 ? 0 : -1;
       return /*#__PURE__*/_jsx(DigitalClockSectionItem, _extends({
         onClick: function onClick() {
           return !readOnly && onChange(option.value);
@@ -157,7 +161,8 @@ export var MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(funct
         ,
         "aria-disabled": readOnly,
         "aria-label": option.ariaLabel,
-        "aria-selected": isSelected
+        "aria-selected": isSelected,
+        tabIndex: tabIndex
       }, slotProps == null ? void 0 : slotProps.digitalClockSectionItem, {
         children: option.label
       }), option.label);

package/legacy/PickersCalendarHeader/PickersCalendarHeader.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["slots", "slotProps", "components", "componentsProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone"],
+var _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -114,7 +114,7 @@ var PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, {
  * - [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/)
  */
 var PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalendarHeader(inProps, ref) {
-  var _ref5, _slots$switchViewButt, _ref6, _slots$switchViewIcon;
+  var _slots$switchViewButt, _slots$switchViewIcon;
   var localeText = useLocaleText();
   var utils = useUtils();
   var props = useThemeProps({
@@ -123,8 +123,6 @@ var PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalend
   });
   var slots = props.slots,
     slotProps = props.slotProps,
-    components = props.components,
-    componentsProps = props.componentsProps,
     month = props.currentMonth,
     disabled = props.disabled,
     disableFuture = props.disableFuture,
@@ -142,7 +140,7 @@ var PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalend
     other = _objectWithoutProperties(props, _excluded);
   var ownerState = props;
   var classes = useUtilityClasses(props);
-  var SwitchViewButton = (_ref5 = (_slots$switchViewButt = slots == null ? void 0 : slots.switchViewButton) != null ? _slots$switchViewButt : components == null ? void 0 : components.SwitchViewButton) != null ? _ref5 : PickersCalendarHeaderSwitchViewButton;
+  var SwitchViewButton = (_slots$switchViewButt = slots == null ? void 0 : slots.switchViewButton) != null ? _slots$switchViewButt : PickersCalendarHeaderSwitchViewButton;
   var switchViewButtonProps = useSlotProps({
     elementType: SwitchViewButton,
     externalSlotProps: slotProps == null ? void 0 : slotProps.switchViewButton,
@@ -153,7 +151,7 @@ var PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalend
     ownerState: ownerState,
     className: classes.switchViewButton
   });
-  var SwitchViewIcon = (_ref6 = (_slots$switchViewIcon = slots == null ? void 0 : slots.switchViewIcon) != null ? _slots$switchViewIcon : components == null ? void 0 : components.SwitchViewIcon) != null ? _ref6 : PickersCalendarHeaderSwitchViewIcon;
+  var SwitchViewIcon = (_slots$switchViewIcon = slots == null ? void 0 : slots.switchViewIcon) != null ? _slots$switchViewIcon : PickersCalendarHeaderSwitchViewIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   var _useSlotProps = useSlotProps({
       elementType: SwitchViewIcon,
@@ -250,18 +248,6 @@ process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
    * className applied to the root element.
    */
   className: PropTypes.string,
-  /**
-   * Overridable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components: PropTypes.object,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps: PropTypes.object,
   currentMonth: PropTypes.any.isRequired,
   disabled: PropTypes.bool,
   disableFuture: PropTypes.bool,

package/legacy/PickersLayout/PickersLayout.js

@@ -123,18 +123,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   children: PropTypes.node,
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * Overridable components.
-   * @default {}
-   * @deprecated Please use `slots`.
-   */
-  components: PropTypes.object,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   * @deprecated Please use `slotProps`.
-   */
-  componentsProps: PropTypes.object,
   disabled: PropTypes.bool,
   isLandscape: PropTypes.bool.isRequired,
   isValid: PropTypes.func.isRequired,