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

package/MobileDateTimePicker/MobileDateTimePicker.types.d.ts

@@ -2,30 +2,17 @@ import { UseMobilePickerSlotsComponent, ExportedUseMobilePickerSlotsComponentsPr
 import { BaseDateTimePickerProps, BaseDateTimePickerSlotsComponent, BaseDateTimePickerSlotsComponentsProps } from '../DateTimePicker/shared';
 import { MakeOptional } from '../internals/models/helpers';
 import { DateOrTimeView } from '../models';
-import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
-export interface MobileDateTimePickerSlotsComponent<TDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView> extends BaseDateTimePickerSlotsComponent<TDate>, MakeOptional<UseMobilePickerSlotsComponent<TDate, TView>, 'Field'> {
+export interface MobileDateTimePickerSlotsComponent<TDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView> extends BaseDateTimePickerSlotsComponent<TDate>, MakeOptional<UseMobilePickerSlotsComponent<TDate, TView>, 'field'> {
 }
 export interface MobileDateTimePickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView> extends BaseDateTimePickerSlotsComponentsProps<TDate>, ExportedUseMobilePickerSlotsComponentsProps<TDate, TView> {
 }
 export interface MobileDateTimePickerProps<TDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView> extends BaseDateTimePickerProps<TDate, TView>, MobileOnlyPickerProps<TDate> {
-    /**
-     * Overridable components.
-     * @default {}
-     * @deprecated Please use `slots`.
-     */
-    components?: MobileDateTimePickerSlotsComponent<TDate, TView>;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     * @deprecated Please use `slotProps`.
-     */
-    componentsProps?: MobileDateTimePickerSlotsComponentsProps<TDate, TView>;
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: UncapitalizeObjectKeys<MobileDateTimePickerSlotsComponent<TDate, TView>>;
+    slots?: MobileDateTimePickerSlotsComponent<TDate, TView>;
     /**
      * The props used for each component slot.
      * @default {}

package/MobileTimePicker/MobileTimePicker.js

@@ -99,18 +99,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/MobileTimePicker/MobileTimePicker.types.d.ts

@@ -3,29 +3,16 @@ import { BaseTimePickerProps, BaseTimePickerSlotsComponent, BaseTimePickerSlotsC
 import { MakeOptional } from '../internals/models/helpers';
 import { TimeView } from '../models';
 import { TimeViewWithMeridiem } from '../internals/models';
-import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
-export interface MobileTimePickerSlotsComponent<TDate, TView extends TimeViewWithMeridiem = TimeView> extends BaseTimePickerSlotsComponent<TDate>, MakeOptional<UseMobilePickerSlotsComponent<TDate, TView>, 'Field'> {
+export interface MobileTimePickerSlotsComponent<TDate, TView extends TimeViewWithMeridiem = TimeView> extends BaseTimePickerSlotsComponent<TDate>, MakeOptional<UseMobilePickerSlotsComponent<TDate, TView>, 'field'> {
 }
 export interface MobileTimePickerSlotsComponentsProps<TDate, TView extends TimeViewWithMeridiem = TimeView> extends BaseTimePickerSlotsComponentsProps, ExportedUseMobilePickerSlotsComponentsProps<TDate, TView> {
 }
 export interface MobileTimePickerProps<TDate, TView extends TimeViewWithMeridiem = TimeView> extends BaseTimePickerProps<TDate, TView>, MobileOnlyPickerProps<TDate> {
-    /**
-     * Overridable components.
-     * @default {}
-     * @deprecated Please use `slots`.
-     */
-    components?: MobileTimePickerSlotsComponent<TDate, TView>;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     * @deprecated Please use `slotProps`.
-     */
-    componentsProps?: MobileTimePickerSlotsComponentsProps<TDate, TView>;
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: UncapitalizeObjectKeys<MobileTimePickerSlotsComponent<TDate, TView>>;
+    slots?: MobileTimePickerSlotsComponent<TDate, TView>;
     /**
      * The props used for each component slot.
      * @default {}

package/MonthCalendar/MonthCalendar.js

@@ -77,7 +77,6 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       onChange,
       shouldDisableMonth,
       readOnly,
-      disableHighlightToday,
       autoFocus = false,
       onMonthFocus,
       hasFocus,
@@ -119,12 +118,9 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     if (value != null) {
       return utils.getMonth(value);
     }
-    if (disableHighlightToday) {
-      return null;
-    }
-    return utils.getMonth(referenceDate);
-  }, [value, utils, disableHighlightToday, referenceDate]);
-  const [focusedMonth, setFocusedMonth] = React.useState(() => selectedMonth || todayMonth);
+    return null;
+  }, [value, utils]);
+  const [focusedMonth, setFocusedMonth] = React.useState(() => selectedMonth || utils.getMonth(referenceDate));
   const [internalHasFocus, setInternalHasFocus] = useControlled({
     name: 'MonthCalendar',
     state: 'hasFocus',

package/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 != 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))
@@ -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/MultiSectionDigitalClock/MultiSectionDigitalClock.types.d.ts

@@ -2,13 +2,13 @@
 import { SlotComponentProps } from '@mui/base/utils';
 import MenuItem from '@mui/material/MenuItem';
 import { MultiSectionDigitalClockClasses } from './multiSectionDigitalClockClasses';
-import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { BaseClockProps, ExportedBaseClockProps, MultiSectionDigitalClockOnlyProps } from '../internals/models/props/clock';
 import { MultiSectionDigitalClockSectionProps } from './MultiSectionDigitalClockSection';
 import { TimeViewWithMeridiem } from '../internals/models';
 export interface MultiSectionDigitalClockOption<TValue> {
     isDisabled?: (value: TValue) => boolean;
     isSelected: (value: TValue) => boolean;
+    isFocused: (value: TValue) => boolean;
     label: string;
     value: TValue;
     ariaLabel: string;
@@ -22,7 +22,7 @@ export interface MultiSectionDigitalClockSlotsComponent {
      * Component responsible for rendering a single multi section digital clock section item.
      * @default MenuItem from '@mui/material'
      */
-    DigitalClockSectionItem?: React.ElementType;
+    digitalClockSectionItem?: React.ElementType;
 }
 export interface MultiSectionDigitalClockSlotsComponentsProps {
     digitalClockSectionItem?: SlotComponentProps<typeof MenuItem, {}, Record<string, any>>;
@@ -32,23 +32,11 @@ export interface MultiSectionDigitalClockProps<TDate> extends ExportedMultiSecti
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<MultiSectionDigitalClockClasses>;
-    /**
-     * Overrideable components.
-     * @default {}
-     * @deprecated Please use `slots`.
-     */
-    components?: MultiSectionDigitalClockSlotsComponent;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     * @deprecated Please use `slotProps`.
-     */
-    componentsProps?: MultiSectionDigitalClockSlotsComponentsProps;
     /**
      * Overrideable component slots.
      * @default {}
      */
-    slots?: UncapitalizeObjectKeys<MultiSectionDigitalClockSlotsComponent>;
+    slots?: MultiSectionDigitalClockSlotsComponent;
     /**
      * The props used for each component slot.
      * @default {}

package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.d.ts

@@ -8,8 +8,9 @@ interface IGetHoursSectionOptions<TDate> {
     isDisabled: (value: number) => boolean;
     timeStep: number;
     resolveAriaLabel: (value: string) => string;
+    valueOrReferenceDate: TDate;
 }
-export declare const getHourSectionOptions: <TDate>({ now, value, utils, ampm, isDisabled, resolveAriaLabel, timeStep, }: IGetHoursSectionOptions<TDate>) => MultiSectionDigitalClockOption<number>[];
+export declare const getHourSectionOptions: <TDate>({ now, value, utils, ampm, isDisabled, resolveAriaLabel, timeStep, valueOrReferenceDate, }: IGetHoursSectionOptions<TDate>) => MultiSectionDigitalClockOption<number>[];
 interface IGetTimeSectionOptions {
     value: number | null;
     isDisabled: (value: number) => boolean;

package/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 != 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;
+  };
+  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/MultiSectionDigitalClock/MultiSectionDigitalClockSection.d.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { MultiSectionDigitalClockSectionClasses } from './multiSectionDigitalClockSectionClasses';
 import type { MultiSectionDigitalClockOption, MultiSectionDigitalClockSlotsComponent, MultiSectionDigitalClockSlotsComponentsProps } from './MultiSectionDigitalClock.types';
-import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 export interface ExportedMultiSectionDigitalClockSectionProps {
     className?: string;
     classes?: Partial<MultiSectionDigitalClockSectionClasses>;
-    slots?: UncapitalizeObjectKeys<MultiSectionDigitalClockSlotsComponent>;
+    slots?: MultiSectionDigitalClockSlotsComponent;
     slotProps?: MultiSectionDigitalClockSlotsComponentsProps;
 }
 export interface MultiSectionDigitalClockSectionProps<TValue> extends ExportedMultiSectionDigitalClockSectionProps {

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -84,7 +84,7 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
   var _slots$digitalClockSe;
   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'
@@ -111,23 +111,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),
@@ -135,12 +136,13 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     autoFocusItem: autoFocus && active,
     role: "listbox"
   }, other, {
-    children: items.map(option => {
+    children: items.map((option, index) => {
       var _option$isDisabled, _option$isDisabled2;
       if (skipDisabled && (_option$isDisabled = option.isDisabled) != null && _option$isDisabled.call(option, 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,
@@ -151,7 +153,8 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
         ,
         "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/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"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -104,7 +104,7 @@ const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, {
  * - [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/)
  */
 const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalendarHeader(inProps, ref) {
-  var _ref, _slots$switchViewButt, _ref2, _slots$switchViewIcon;
+  var _slots$switchViewButt, _slots$switchViewIcon;
   const localeText = useLocaleText();
   const utils = useUtils();
   const props = useThemeProps({
@@ -114,7 +114,6 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
   const {
       slots,
       slotProps,
-      components,
       currentMonth: month,
       disabled,
       disableFuture,
@@ -133,7 +132,7 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(props);
-  const SwitchViewButton = (_ref = (_slots$switchViewButt = slots == null ? void 0 : slots.switchViewButton) != null ? _slots$switchViewButt : components == null ? void 0 : components.SwitchViewButton) != null ? _ref : PickersCalendarHeaderSwitchViewButton;
+  const SwitchViewButton = (_slots$switchViewButt = slots == null ? void 0 : slots.switchViewButton) != null ? _slots$switchViewButt : PickersCalendarHeaderSwitchViewButton;
   const switchViewButtonProps = useSlotProps({
     elementType: SwitchViewButton,
     externalSlotProps: slotProps == null ? void 0 : slotProps.switchViewButton,
@@ -144,7 +143,7 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
     ownerState,
     className: classes.switchViewButton
   });
-  const SwitchViewIcon = (_ref2 = (_slots$switchViewIcon = slots == null ? void 0 : slots.switchViewIcon) != null ? _slots$switchViewIcon : components == null ? void 0 : components.SwitchViewIcon) != null ? _ref2 : PickersCalendarHeaderSwitchViewIcon;
+  const 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
   const _useSlotProps = useSlotProps({
       elementType: SwitchViewIcon,
@@ -234,18 +233,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/PickersCalendarHeader/PickersCalendarHeader.types.d.ts

@@ -5,7 +5,6 @@ import SvgIcon from '@mui/material/SvgIcon';
 import { SxProps, Theme } from '@mui/material/styles';
 import { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps } from '../internals/components/PickersArrowSwitcher';
 import { MonthValidationOptions } from '../internals/hooks/date-helpers-hooks';
-import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { DateView } from '../models/views';
 import { SlideDirection } from '../DateCalendar/PickersSlideTransition';
 import { PickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
@@ -14,12 +13,12 @@ export interface PickersCalendarHeaderSlotsComponent extends PickersArrowSwitche
      * Button displayed to switch between different calendar views.
      * @default IconButton
      */
-    SwitchViewButton?: React.ElementType;
+    switchViewButton?: React.ElementType;
     /**
      * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.
      * @default ArrowDropDown
      */
-    SwitchViewIcon?: React.ElementType;
+    switchViewIcon?: React.ElementType;
 }
 export interface PickersCalendarHeaderComponentsPropsOverrides {
 }
@@ -29,23 +28,11 @@ export interface PickersCalendarHeaderSlotsComponentsProps<TDate> extends Picker
     switchViewIcon?: SlotComponentProps<typeof SvgIcon, PickersCalendarHeaderComponentsPropsOverrides, undefined>;
 }
 export interface PickersCalendarHeaderProps<TDate> extends ExportedPickersArrowSwitcherProps, MonthValidationOptions<TDate> {
-    /**
-     * Overridable components.
-     * @default {}
-     * @deprecated Please use `slots`.
-     */
-    components?: PickersCalendarHeaderSlotsComponent;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     * @deprecated Please use `slotProps`.
-     */
-    componentsProps?: PickersCalendarHeaderSlotsComponentsProps<TDate>;
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: UncapitalizeObjectKeys<PickersCalendarHeaderSlotsComponent>;
+    slots?: PickersCalendarHeaderSlotsComponent;
     /**
      * The props used for each component slot.
      * @default {}

package/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/PickersLayout/PickersLayout.types.d.ts

@@ -5,7 +5,6 @@ import { PickersActionBarProps } from '../PickersActionBar';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
 import { UsePickerLayoutPropsResponseLayoutProps } from '../internals/hooks/usePicker/usePickerLayoutProps';
-import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { PickersLayoutClasses } from './pickersLayoutClasses';
 import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models/common';
 import { PickersShortcutsProps } from '../PickersShortcuts';
@@ -14,17 +13,17 @@ export interface ExportedPickersLayoutSlotsComponent<TValue, TDate, TView extend
      * Custom component for the action bar, it is placed below the picker views.
      * @default PickersActionBar
      */
-    ActionBar?: React.ElementType<PickersActionBarProps>;
+    actionBar?: React.ElementType<PickersActionBarProps>;
     /**
      * Custom component for the shortcuts.
      * @default PickersShortcuts
      */
-    Shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<TValue>>;
+    shortcuts?: React.JSXElementConstructor<PickersShortcutsProps<TValue>>;
     /**
      * Custom component for wrapping the layout.
      * It wraps the toolbar, views, action bar, and shortcuts.
      */
-    Layout?: React.JSXElementConstructor<PickersLayoutProps<TValue, TDate, TView> & React.RefAttributes<HTMLDivElement>>;
+    layout?: React.JSXElementConstructor<PickersLayoutProps<TValue, TDate, TView> & React.RefAttributes<HTMLDivElement>>;
 }
 interface PickersLayoutActionBarOwnerState<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersLayoutProps<TValue, TDate, TView> {
     wrapperVariant: WrapperVariant;
@@ -50,12 +49,12 @@ export interface PickersLayoutSlotsComponent<TValue, TDate, TView extends DateOr
     /**
      * Tabs enabling toggling between views.
      */
-    Tabs?: React.ElementType<BaseTabsProps<TView>>;
+    tabs?: React.ElementType<BaseTabsProps<TView>>;
     /**
      * Custom component for the toolbar.
      * It is placed above the picker views.
      */
-    Toolbar?: React.JSXElementConstructor<BaseToolbarProps<TValue, TView>>;
+    toolbar?: React.JSXElementConstructor<BaseToolbarProps<TValue, TView>>;
 }
 export interface PickersLayoutSlotsComponentsProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotsComponentsProps<TValue, TDate, TView> {
     /**
@@ -77,23 +76,11 @@ export interface PickersLayoutProps<TValue, TDate, TView extends DateOrTimeViewW
      */
     ref?: React.Ref<HTMLDivElement>;
     classes?: Partial<PickersLayoutClasses>;
-    /**
-     * Overridable components.
-     * @default {}
-     * @deprecated Please use `slots`.
-     */
-    components?: PickersLayoutSlotsComponent<TValue, TDate, TView>;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     * @deprecated Please use `slotProps`.
-     */
-    componentsProps?: PickersLayoutSlotsComponentsProps<TValue, TDate, TView>;
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: UncapitalizeObjectKeys<PickersLayoutSlotsComponent<TValue, TDate, TView>>;
+    slots?: PickersLayoutSlotsComponent<TValue, TDate, TView>;
     /**
      * The props used for each component slot.
      * @default {}

package/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;
@@ -45,17 +44,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 != null ? innerSlots : uncapitalizeObjectKeys(components);
-  const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   const classes = useUtilityClasses(props);
 
   // Action bar

package/StaticDatePicker/StaticDatePicker.js

@@ -64,18 +64,6 @@ 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.