@mui/x-date-pickers 6.18.1 → 7.0.0-alpha.1

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _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"];
+const _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';
@@ -61,8 +61,6 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       ampm = utils.is12HourCycleInCurrentLocale(),
       timeSteps: inTimeSteps,
       autoFocus,
-      components,
-      componentsProps,
       slots,
       slotProps,
       value: valueProp,
@@ -242,7 +240,8 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
               utils,
               isDisabled: hours => disabled || isTimeDisabled(hours, 'hours'),
               timeStep: timeSteps.hours,
-              resolveAriaLabel: localeText.hoursClockNumberText
+              resolveAriaLabel: localeText.hoursClockNumberText,
+              valueOrReferenceDate
             })
           };
         }
@@ -288,11 +287,13 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
               value: 'am',
               label: amLabel,
               isSelected: () => !!value && meridiemMode === 'am',
+              isFocused: () => !!valueOrReferenceDate && meridiemMode === 'am',
               ariaLabel: amLabel
             }, {
               value: 'pm',
               label: pmLabel,
               isSelected: () => !!value && meridiemMode === 'pm',
+              isFocused: () => !!valueOrReferenceDate && meridiemMode === 'pm',
               ariaLabel: pmLabel
             }]
           };
@@ -323,8 +324,8 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       autoFocus: autoFocus ?? focusedView === timeView,
       disabled: disabled,
       readOnly: readOnly,
-      slots: slots ?? components,
-      slotProps: slotProps ?? componentsProps,
+      slots: slots,
+      slotProps: slotProps,
       skipDisabled: skipDisabled,
       "aria-label": localeText.selectViewText(timeView)
     }, timeView))
@@ -352,18 +353,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/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js

@@ -5,21 +5,26 @@ export const getHourSectionOptions = ({
   ampm,
   isDisabled,
   resolveAriaLabel,
-  timeStep
+  timeStep,
+  valueOrReferenceDate
 }) => {
   const currentHours = value ? utils.getHours(value) : null;
   const result = [];
-  const isSelected = hour => {
-    if (currentHours === null) {
+  const isSelected = (hour, overriddenCurrentHours) => {
+    const resolvedCurrentHours = 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;
+  };
+  const isFocused = hour => {
+    return isSelected(hour, utils.getHours(valueOrReferenceDate));
   };
   const endHour = ampm ? 11 : 23;
   for (let hour = 0; hour <= endHour; hour += timeStep) {
@@ -31,6 +36,7 @@ export const getHourSectionOptions = ({
       label,
       isSelected,
       isDisabled,
+      isFocused,
       ariaLabel
     });
   }
@@ -50,6 +56,9 @@ export const getTimeSectionOptions = ({
     }
     return hasValue && value === timeValue;
   };
+  const isFocused = timeValue => {
+    return value === timeValue;
+  };
   return [...Array.from({
     length: Math.ceil(60 / timeStep)
   }, (_, index) => {
@@ -59,6 +68,7 @@ export const getTimeSectionOptions = ({
       label: resolveLabel(timeValue),
       isDisabled,
       isSelected,
+      isFocused,
       ariaLabel: resolveAriaLabel(timeValue.toString())
     };
   })];

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -83,7 +83,7 @@ const MultiSectionDigitalClockSectionItem = styled(MenuItem, {
 export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClockSection(inProps, ref) {
   const containerRef = React.useRef(null);
   const handleRef = useForkRef(ref, containerRef);
-  const previousSelected = React.useRef(null);
+  const previousActive = React.useRef(null);
   const props = useThemeProps({
     props: inProps,
     name: 'MuiMultiSectionDigitalClockSection'
@@ -110,23 +110,24 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     if (containerRef.current === null) {
       return;
     }
-    const selectedItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
-    if (!selectedItem || previousSelected.current === selectedItem) {
+    const 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();
     }
-    const offsetTop = selectedItem.offsetTop;
+    const offsetTop = activeItem.offsetTop;
 
     // Subtracting the 4px of extra margin intended for the first visible section item
     containerRef.current.scrollTop = offsetTop - 4;
   });
+  const focusedOptionIndex = items.findIndex(item => item.isFocused(item.value));
   return /*#__PURE__*/_jsx(MultiSectionDigitalClockSectionRoot, _extends({
     ref: handleRef,
     className: clsx(classes.root, className),
@@ -134,11 +135,12 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     autoFocusItem: autoFocus && active,
     role: "listbox"
   }, other, {
-    children: items.map(option => {
+    children: items.map((option, index) => {
       if (skipDisabled && option.isDisabled?.(option.value)) {
         return null;
       }
       const isSelected = option.isSelected(option.value);
+      const tabIndex = focusedOptionIndex === index || focusedOptionIndex === -1 && index === 0 ? 0 : -1;
       return /*#__PURE__*/_jsx(DigitalClockSectionItem, _extends({
         onClick: () => !readOnly && onChange(option.value),
         selected: isSelected,
@@ -149,7 +151,8 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
         ,
         "aria-disabled": readOnly,
         "aria-label": option.ariaLabel,
-        "aria-selected": isSelected
+        "aria-selected": isSelected,
+        tabIndex: tabIndex
       }, slotProps?.digitalClockSectionItem, {
         children: option.label
       }), option.label);

package/modern/PickersCalendarHeader/PickersCalendarHeader.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone"],
+const _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "timezone", "format"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -113,7 +113,6 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
   const {
       slots,
       slotProps,
-      components,
       currentMonth: month,
       disabled,
       disableFuture,
@@ -127,12 +126,13 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
       views,
       labelId,
       className,
-      timezone
+      timezone,
+      format = `${utils.formats.month} ${utils.formats.year}`
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(props);
-  const SwitchViewButton = slots?.switchViewButton ?? components?.SwitchViewButton ?? PickersCalendarHeaderSwitchViewButton;
+  const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton;
   const switchViewButtonProps = useSlotProps({
     elementType: SwitchViewButton,
     externalSlotProps: slotProps?.switchViewButton,
@@ -143,7 +143,7 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
     ownerState,
     className: classes.switchViewButton
   });
-  const SwitchViewIcon = slots?.switchViewIcon ?? components?.SwitchViewIcon ?? PickersCalendarHeaderSwitchViewIcon;
+  const SwitchViewIcon = slots?.switchViewIcon ?? PickersCalendarHeaderSwitchViewIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   const _useSlotProps = useSlotProps({
       elementType: SwitchViewIcon,
@@ -181,6 +181,7 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
   if (views.length === 1 && views[0] === 'year') {
     return null;
   }
+  const label = utils.formatByString(month, format);
   return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, _extends({}, other, {
     ownerState: ownerState,
     className: clsx(className, classes.root),
@@ -195,12 +196,12 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
       className: classes.labelContainer,
       children: [/*#__PURE__*/_jsx(PickersFadeTransitionGroup, {
         reduceAnimations: reduceAnimations,
-        transKey: utils.format(month, 'monthAndYear'),
+        transKey: label,
         children: /*#__PURE__*/_jsx(PickersCalendarHeaderLabel, {
           id: labelId,
           ownerState: ownerState,
           className: classes.label,
-          children: utils.format(month, 'monthAndYear')
+          children: label
         })
       }), views.length > 1 && !disabled && /*#__PURE__*/_jsx(SwitchViewButton, _extends({}, switchViewButtonProps, {
         children: /*#__PURE__*/_jsx(SwitchViewIcon, _extends({}, switchViewIconProps))
@@ -233,22 +234,15 @@ 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,
   disablePast: PropTypes.bool,
+  /**
+   * Format used to display the date.
+   * @default `${adapter.formats.month} ${adapter.formats.year}`
+   */
+  format: PropTypes.string,
   labelId: PropTypes.string,
   maxDate: PropTypes.any.isRequired,
   minDate: PropTypes.any.isRequired,

package/modern/PickersLayout/PickersLayout.js

@@ -124,18 +124,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,

package/modern/PickersLayout/usePickerLayout.js

@@ -5,7 +5,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { PickersActionBar } from '../PickersActionBar';
 import { getPickersLayoutUtilityClass } from './pickersLayoutClasses';
 import { PickersShortcuts } from '../PickersShortcuts';
-import { uncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { jsx as _jsx } from "react/jsx-runtime";
 function toolbarHasView(toolbarProps) {
   return toolbarProps.view !== null;
@@ -44,17 +43,13 @@ const usePickerLayout = props => {
     disabled,
     readOnly,
     children,
-    components,
-    componentsProps,
-    slots: innerSlots,
-    slotProps: innerSlotProps
+    slots,
+    slotProps
     // TODO: Remove this "as" hack. It get introduced to mark `value` prop in PickersLayoutProps as not required.
     // The true type should be
     // - For pickers value: TDate | null
     // - For range pickers value: [TDate | null, TDate | null]
   } = props;
-  const slots = innerSlots ?? uncapitalizeObjectKeys(components);
-  const slotProps = innerSlotProps ?? componentsProps;
   const classes = useUtilityClasses(props);
 
   // Action bar

package/modern/StaticDatePicker/StaticDatePicker.js

@@ -63,21 +63,8 @@ StaticDatePicker.propTypes = {
    * Class name 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,
   /**
    * 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.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/modern/StaticDateTimePicker/StaticDateTimePicker.js

@@ -83,21 +83,8 @@ StaticDateTimePicker.propTypes = {
    * Class name 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,
   /**
    * 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.
    * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
    * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

package/modern/StaticTimePicker/StaticTimePicker.js

@@ -75,18 +75,6 @@ StaticTimePicker.propTypes = {
    * Class name 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,
   /**
    * The default value.
    * Used when the component is not controlled.

package/modern/TimeClock/TimeClock.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];
+const _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -17,7 +17,6 @@ import { Clock } from './Clock';
 import { getHourNumbers, getMinutesNumbers } from './ClockNumbers';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
-import { uncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { useClockReferenceDate } from '../internals/hooks/useClockReferenceDate';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -71,10 +70,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       ampm = utils.is12HourCycleInCurrentLocale(),
       ampmInClock = false,
       autoFocus,
-      components,
-      componentsProps,
-      slots: innerSlots,
-      slotProps: innerSlotProps,
+      slots,
+      slotProps,
       value: valueProp,
       defaultValue,
       referenceDate: referenceDateProp,
@@ -100,8 +97,6 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       timezone: timezoneProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const slots = innerSlots ?? uncapitalizeObjectKeys(components);
-  const slotProps = innerSlotProps ?? componentsProps;
   const {
     value,
     handleValueChange,
@@ -346,18 +341,6 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   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,
   /**
    * The default selected value.
    * Used when the component is not controlled.

package/modern/TimeField/TimeField.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "InputProps", "inputProps"],
+const _excluded = ["slots", "slotProps", "InputProps", "inputProps"],
   _excluded2 = ["inputRef"],
   _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly", "clearable", "onClear"];
 import * as React from 'react';
@@ -30,17 +30,15 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref)
   const {
       slots,
       slotProps,
-      components,
-      componentsProps,
       InputProps,
       inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = slots?.textField ?? components?.TextField ?? MuiTextField;
+  const TextField = slots?.textField ?? MuiTextField;
   const _useSlotProps = useSlotProps({
       elementType: TextField,
-      externalSlotProps: slotProps?.textField ?? componentsProps?.textField,
+      externalSlotProps: slotProps?.textField,
       externalForwardedProps: other,
       ownerState
     }),
@@ -75,9 +73,7 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref)
     fieldProps,
     InputProps: fieldProps.InputProps,
     slots,
-    slotProps,
-    components,
-    componentsProps
+    slotProps
   });
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
@@ -122,18 +118,6 @@ process.env.NODE_ENV !== "production" ? TimeField.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/modern/TimePicker/TimePicker.js

@@ -74,18 +74,6 @@ process.env.NODE_ENV !== "production" ? TimePicker.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/modern/TimePicker/shared.js

@@ -4,7 +4,6 @@ import { useThemeProps } from '@mui/material/styles';
 import { useUtils } from '../internals/hooks/useUtils';
 import { TimePickerToolbar } from './TimePickerToolbar';
 import { applyDefaultViewProps } from '../internals/utils/views';
-import { uncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 export function useTimePickerDefaultizedProps(props, name) {
   const utils = useUtils();
   const themeProps = useThemeProps({
@@ -20,8 +19,6 @@ export function useTimePickerDefaultizedProps(props, name) {
       timePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  const slots = themeProps.slots ?? uncapitalizeObjectKeys(themeProps.components);
-  const slotProps = themeProps.slotProps ?? themeProps.componentsProps;
   return _extends({}, themeProps, {
     ampm,
     localeText
@@ -35,12 +32,12 @@ export function useTimePickerDefaultizedProps(props, name) {
     disablePast: themeProps.disablePast ?? false,
     slots: _extends({
       toolbar: TimePickerToolbar
-    }, slots),
-    slotProps: _extends({}, slotProps, {
+    }, themeProps.slots),
+    slotProps: _extends({}, themeProps.slotProps, {
       toolbar: _extends({
         ampm,
         ampmInClock: themeProps.ampmInClock
-      }, slotProps?.toolbar)
+      }, themeProps.slotProps?.toolbar)
     })
   });
 }

package/modern/YearCalendar/YearCalendar.js

@@ -83,7 +83,6 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       onChange,
       readOnly,
       shouldDisableYear,
-      disableHighlightToday,
       onYearFocus,
       hasFocus,
       onFocusedViewChange,
@@ -124,12 +123,9 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     if (value != null) {
       return utils.getYear(value);
     }
-    if (disableHighlightToday) {
-      return null;
-    }
-    return utils.getYear(referenceDate);
-  }, [value, utils, disableHighlightToday, referenceDate]);
-  const [focusedYear, setFocusedYear] = React.useState(() => selectedYear || todayYear);
+    return null;
+  }, [value, utils]);
+  const [focusedYear, setFocusedYear] = React.useState(() => selectedYear || utils.getYear(referenceDate));
   const [internalHasFocus, setInternalHasFocus] = useControlled({
     name: 'YearCalendar',
     state: 'hasFocus',
@@ -238,7 +234,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     role: "radiogroup",
     "aria-labelledby": gridLabelId
   }, other, {
-    children: utils.getYearRange(minDate, maxDate).map(year => {
+    children: utils.getYearRange([minDate, maxDate]).map(year => {
       const yearNumber = utils.getYear(year);
       const isSelected = yearNumber === selectedYear;
       const isDisabled = disabled || isYearDisabled(year);

package/modern/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -43,8 +43,6 @@ export const renderDesktopDateTimeView = ({
   onYearChange,
   yearsPerRow,
   defaultCalendarMonth,
-  components,
-  componentsProps,
   slots,
   slotProps,
   loading,
@@ -65,7 +63,7 @@ export const renderDesktopDateTimeView = ({
   timeViewsCount,
   shouldRenderTimeInASingleColumn
 }) => {
-  const isActionBarVisible = !!resolveComponentProps(slotProps?.actionBar ?? componentsProps?.actionBar, {})?.actions?.length;
+  const isActionBarVisible = !!resolveComponentProps(slotProps?.actionBar, {})?.actions?.length;
   const commonTimeProps = {
     view: isInternalTimeView(view) ? view : 'hours',
     onViewChange,
@@ -86,8 +84,6 @@ export const renderDesktopDateTimeView = ({
     shouldDisableClock,
     minutesStep,
     ampm,
-    components,
-    componentsProps,
     slots,
     slotProps,
     readOnly,
@@ -125,8 +121,6 @@ export const renderDesktopDateTimeView = ({
         onYearChange: onYearChange,
         yearsPerRow: yearsPerRow,
         defaultCalendarMonth: defaultCalendarMonth,
-        components: components,
-        componentsProps: componentsProps,
         slots: slots,
         slotProps: slotProps,
         loading: loading,

package/modern/dateViewRenderers/dateViewRenderers.js

@@ -27,8 +27,6 @@ export const renderDateViewCalendar = ({
   onYearChange,
   yearsPerRow,
   defaultCalendarMonth,
-  components,
-  componentsProps,
   slots,
   slotProps,
   loading,
@@ -68,8 +66,6 @@ export const renderDateViewCalendar = ({
   onYearChange: onYearChange,
   yearsPerRow: yearsPerRow,
   defaultCalendarMonth: defaultCalendarMonth,
-  components: components,
-  componentsProps: componentsProps,
   slots: slots,
   slotProps: slotProps,
   loading: loading,