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

package/locales/eu.d.ts

@@ -0,0 +1,54 @@
+import { TimeViewWithMeridiem } from '../internals/models';
+export declare const eu: {
+    components: {
+        MuiLocalizationProvider: {
+            defaultProps: {
+                localeText: {
+                    previousMonth?: string | undefined;
+                    nextMonth?: string | undefined;
+                    calendarWeekNumberHeaderLabel?: string | undefined;
+                    calendarWeekNumberHeaderText?: string | undefined;
+                    calendarWeekNumberAriaLabelText?: ((weekNumber: number) => string) | undefined;
+                    calendarWeekNumberText?: ((weekNumber: number) => string) | undefined;
+                    openPreviousView?: string | undefined;
+                    openNextView?: string | undefined;
+                    calendarViewSwitchingButtonAriaLabel?: ((currentView: import("..").DateView) => string) | undefined;
+                    start?: string | undefined;
+                    end?: string | undefined;
+                    cancelButtonLabel?: string | undefined;
+                    clearButtonLabel?: string | undefined;
+                    okButtonLabel?: string | undefined;
+                    todayButtonLabel?: string | undefined;
+                    clockLabelText?: ((view: import("..").TimeView, time: any, adapter: import("..").MuiPickersAdapter<any, any>) => string) | undefined;
+                    hoursClockNumberText?: ((hours: string) => string) | undefined;
+                    minutesClockNumberText?: ((minutes: string) => string) | undefined;
+                    secondsClockNumberText?: ((seconds: string) => string) | undefined;
+                    selectViewText?: ((view: TimeViewWithMeridiem) => string) | undefined;
+                    openDatePickerDialogue?: ((date: any, utils: import("..").MuiPickersAdapter<any, any>) => string) | undefined;
+                    openTimePickerDialogue?: ((date: any, utils: import("..").MuiPickersAdapter<any, any>) => string) | undefined;
+                    fieldClearLabel?: string | undefined;
+                    timeTableLabel?: string | undefined;
+                    dateTableLabel?: string | undefined;
+                    fieldYearPlaceholder?: ((params: {
+                        digitAmount: number;
+                    }) => string) | undefined;
+                    fieldMonthPlaceholder?: ((params: {
+                        contentType: import("..").FieldSectionContentType;
+                    }) => string) | undefined;
+                    fieldDayPlaceholder?: (() => string) | undefined;
+                    fieldWeekDayPlaceholder?: ((params: {
+                        contentType: import("..").FieldSectionContentType;
+                    }) => string) | undefined;
+                    fieldHoursPlaceholder?: (() => string) | undefined;
+                    fieldMinutesPlaceholder?: (() => string) | undefined;
+                    fieldSecondsPlaceholder?: (() => string) | undefined;
+                    fieldMeridiemPlaceholder?: (() => string) | undefined;
+                    datePickerToolbarTitle?: string | undefined;
+                    timePickerToolbarTitle?: string | undefined;
+                    dateTimePickerToolbarTitle?: string | undefined;
+                    dateRangePickerToolbarTitle?: string | undefined;
+                };
+            };
+        };
+    };
+};

package/locales/eu.js

@@ -0,0 +1,58 @@
+import { getPickersLocalization } from './utils/getPickersLocalization';
+const views = {
+  hours: 'orduak',
+  minutes: 'minutuak',
+  seconds: 'segunduak',
+  meridiem: 'meridianoa'
+};
+const euPickers = {
+  // Calendar navigation
+  previousMonth: 'Azken hilabetea',
+  nextMonth: 'Hurrengo hilabetea',
+  // View navigation
+  openPreviousView: 'azken bista ireki',
+  openNextView: 'hurrengo bista ireki',
+  calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? 'urteko bista irekita dago, aldatu egutegi bistara' : 'egutegi bista irekita dago, aldatu urteko bistara',
+  // DateRange placeholders
+  start: 'Hasi',
+  end: 'Bukatu',
+  // Action bar
+  cancelButtonLabel: 'Utxi',
+  clearButtonLabel: 'Garbitu',
+  okButtonLabel: 'OK',
+  todayButtonLabel: 'Gaur',
+  // Toolbar titles
+  datePickerToolbarTitle: 'Data aukeratu',
+  dateTimePickerToolbarTitle: 'Data eta ordua aukeratu',
+  timePickerToolbarTitle: 'Ordua aukeratu',
+  dateRangePickerToolbarTitle: 'Data tartea aukeratu',
+  // Clock labels
+  clockLabelText: (view, time, adapter) => `Aukeratu ${views[view]}. ${time === null ? 'Ez da ordurik aukertau' : `Aukeratutako ordua ${adapter.format(time, 'fullTime')} da`}`,
+  hoursClockNumberText: hours => `${hours} ordu`,
+  minutesClockNumberText: minutes => `${minutes} minutu`,
+  secondsClockNumberText: seconds => `${seconds} segundu`,
+  // Digital clock labels
+  selectViewText: view => `Aukeratu ${views[view]}`,
+  // Calendar labels
+  calendarWeekNumberHeaderLabel: 'Astea zenbakia',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `${weekNumber} astea`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
+  // Open picker labels
+  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Data aukeratu, aukeratutako data ${utils.format(value, 'fullDate')} da` : 'Data aukeratu',
+  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Ordua aukeratu, aukeratutako ordua ${utils.format(value, 'fullTime')} da` : 'Ordua aukeratu',
+  fieldClearLabel: 'Balioa garbitu',
+  // Table labels
+  timeTableLabel: 'ordua aukeratu',
+  dateTableLabel: 'data aukeratu',
+  // Field section placeholders
+  fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
+  fieldDayPlaceholder: () => 'DD',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldHoursPlaceholder: () => 'hh',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'aa'
+};
+export const eu = getPickersLocalization(euPickers);

package/locales/index.d.ts

@@ -5,6 +5,7 @@ export * from './deDE';
 export * from './elGR';
 export * from './enUS';
 export * from './esES';
+export * from './eu';
 export * from './faIR';
 export * from './fiFI';
 export * from './frFR';

package/locales/index.js

@@ -5,6 +5,7 @@ export * from './deDE';
 export * from './elGR';
 export * from './enUS';
 export * from './esES';
+export * from './eu';
 export * from './faIR';
 export * from './fiFI';
 export * from './frFR';

package/modern/AdapterLuxon/AdapterLuxon.js

@@ -272,15 +272,25 @@ export class AdapterLuxon {
     };
     this.expandFormat = format => {
       // Extract escaped section to avoid extending them
-      const longFormatRegexp = /''|'(''|[^'])+('|$)|[^']*/g;
-      return format.match(longFormatRegexp).map(token => {
+      const catchEscapedSectionsRegexp = /''|'(''|[^'])+('|$)|[^']*/g;
+
+      // Extract words to test if they are a token or a word to escape.
+      const catchWordsRegexp = /(?:^|[^a-z])([a-z]+)(?:[^a-z]|$)|([a-z]+)/gi;
+      return format.match(catchEscapedSectionsRegexp).map(token => {
         const firstCharacter = token[0];
         if (firstCharacter === "'") {
           return token;
         }
-        return DateTime.expandFormat(token, {
+        const expandedToken = DateTime.expandFormat(token, {
           locale: this.locale
         });
+        return expandedToken.replace(catchWordsRegexp, (correspondance, g1, g2) => {
+          const word = g1 || g2; // words are either in group 1 or group 2
+          if (word === 'yyyyy' || formatTokenMap[word] !== undefined) {
+            return correspondance;
+          }
+          return `'${correspondance}'`;
+        });
       }).join('')
       // The returned format can contain `yyyyy` which means year between 4 and 6 digits.
       // This value is supported by luxon parser but not luxon formatter.

package/modern/DateCalendar/DateCalendar.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsPerRow", "monthsPerRow", "timezone"];
+const _excluded = ["autoFocus", "onViewChange", "value", "defaultValue", "referenceDate", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange", "showDaysOutsideCurrentMonth", "fixedWeekNumber", "dayOfWeekFormatter", "slots", "slotProps", "loading", "renderLoading", "displayWeekNumber", "yearsPerRow", "monthsPerRow", "timezone"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -115,8 +115,6 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       showDaysOutsideCurrentMonth,
       fixedWeekNumber,
       dayOfWeekFormatter,
-      components,
-      componentsProps,
       slots,
       slotProps,
       loading,
@@ -183,10 +181,10 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
   const maxDateWithDisabled = disabled && value || maxDate;
   const gridLabelId = `${id}-grid-label`;
   const hasFocus = focusedView !== null;
-  const CalendarHeader = slots?.calendarHeader ?? components?.CalendarHeader ?? PickersCalendarHeader;
+  const CalendarHeader = slots?.calendarHeader ?? PickersCalendarHeader;
   const calendarHeaderProps = useSlotProps({
     elementType: CalendarHeader,
-    externalSlotProps: slotProps?.calendarHeader ?? componentsProps?.calendarHeader,
+    externalSlotProps: slotProps?.calendarHeader,
     additionalProps: {
       views,
       view,
@@ -337,8 +335,6 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           fixedWeekNumber: fixedWeekNumber,
           dayOfWeekFormatter: dayOfWeekFormatter,
           displayWeekNumber: displayWeekNumber,
-          components: components,
-          componentsProps: componentsProps,
           slots: slots,
           slotProps: slotProps,
           loading: loading,
@@ -362,18 +358,6 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   autoFocus: PropTypes.bool,
   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,
   /**
    * 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/modern/DateCalendar/DayCalendar.js

@@ -148,8 +148,6 @@ function WrappedDay(_ref) {
     disableHighlightToday,
     isMonthSwitchingAnimating,
     showDaysOutsideCurrentMonth,
-    components,
-    componentsProps,
     slots,
     slotProps,
     timezone
@@ -159,11 +157,11 @@ function WrappedDay(_ref) {
   const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay);
   const isSelected = selectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));
   const isToday = utils.isSameDay(day, now);
-  const Day = slots?.day ?? components?.Day ?? PickersDay;
+  const Day = slots?.day ?? PickersDay;
   // We don't want to pass to ownerState down, to avoid re-rendering all the day whenever a prop changes.
   const _useSlotProps = useSlotProps({
       elementType: Day,
-      externalSlotProps: slotProps?.day ?? componentsProps?.day,
+      externalSlotProps: slotProps?.day,
       additionalProps: _extends({
         disableHighlightToday,
         showDaysOutsideCurrentMonth,

package/modern/DateCalendar/useCalendarState.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useIsDateDisabled } from './useIsDateDisabled';
-import { useUtils, useNow } from '../internals/hooks/useUtils';
+import { useUtils } from '../internals/hooks/useUtils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
 export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
@@ -49,7 +49,6 @@ export const useCalendarState = params => {
     shouldDisableDate,
     timezone
   } = params;
-  const now = useNow(timezone);
   const utils = useUtils();
   const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
   const referenceDate = React.useMemo(() => {
@@ -73,7 +72,7 @@ export const useCalendarState = params => {
 
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
-    focusedDay: value || now,
+    focusedDay: referenceDate,
     currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });

package/modern/DateField/DateField.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["components", "componentsProps", "slots", "slotProps", "InputProps", "inputProps"],
+const _excluded = ["slots", "slotProps", "InputProps", "inputProps"],
   _excluded2 = ["inputRef"],
   _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly", "clearable", "onClear"];
 import * as React from 'react';
@@ -28,8 +28,6 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref)
     name: 'MuiDateField'
   });
   const {
-      components,
-      componentsProps,
       slots,
       slotProps,
       InputProps,
@@ -37,10 +35,10 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref)
     } = 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 DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref)
     fieldProps,
     InputProps: fieldProps.InputProps,
     slots,
-    slotProps,
-    components,
-    componentsProps
+    slotProps
   });
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
@@ -117,18 +113,6 @@ process.env.NODE_ENV !== "production" ? DateField.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/DatePicker/DatePicker.js

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

@@ -5,7 +5,6 @@ import { useDefaultDates, useUtils } from '../internals/hooks/useUtils';
 import { applyDefaultViewProps } from '../internals/utils/views';
 import { applyDefaultDate } from '../internals/utils/date-utils';
 import { DatePickerToolbar } from './DatePickerToolbar';
-import { uncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 export function useDatePickerDefaultizedProps(props, name) {
   const utils = useUtils();
   const defaultDates = useDefaultDates();
@@ -21,7 +20,6 @@ export function useDatePickerDefaultizedProps(props, name) {
       datePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  const slots = themeProps.slots ?? uncapitalizeObjectKeys(themeProps.components);
   return _extends({}, themeProps, {
     localeText
   }, applyDefaultViewProps({
@@ -36,7 +34,6 @@ export function useDatePickerDefaultizedProps(props, name) {
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
     slots: _extends({
       toolbar: DatePickerToolbar
-    }, slots),
-    slotProps: themeProps.slotProps ?? themeProps.componentsProps
+    }, themeProps.slots)
   });
 }

package/modern/DateTimeField/DateTimeField.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["components", "componentsProps", "slots", "slotProps", "InputProps", "inputProps"],
+const _excluded = ["slots", "slotProps", "InputProps", "inputProps"],
   _excluded2 = ["inputRef"],
   _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly", "clearable", "onClear"];
 import * as React from 'react';
@@ -28,8 +28,6 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
     name: 'MuiDateTimeField'
   });
   const {
-      components,
-      componentsProps,
       slots,
       slotProps,
       InputProps,
@@ -37,10 +35,10 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
     } = 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 DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
     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" ? 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/modern/DateTimePicker/DateTimePicker.js

@@ -74,18 +74,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/modern/DateTimePicker/shared.js

@@ -6,7 +6,6 @@ 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) {
   const utils = useUtils();
   const defaultDates = useDefaultDates();
@@ -23,8 +22,6 @@ export function useDateTimePickerDefaultizedProps(props, name) {
       dateTimePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  const slots = themeProps.slots ?? uncapitalizeObjectKeys(themeProps.components);
-  const slotProps = themeProps.slotProps ?? themeProps.componentsProps;
   return _extends({}, themeProps, applyDefaultViewProps({
     views: themeProps.views,
     openTo: themeProps.openTo,
@@ -47,11 +44,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
-      }, slotProps?.toolbar)
+      }, themeProps.slotProps?.toolbar)
     })
   });
 }

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -84,18 +84,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/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -133,18 +133,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/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -116,18 +116,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/modern/DigitalClock/DigitalClock.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _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"];
+const _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';
@@ -101,8 +101,6 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
       ampm = utils.is12HourCycleInCurrentLocale(),
       timeStep = 30,
       autoFocus,
-      components,
-      componentsProps,
       slots,
       slotProps,
       value: valueProp,
@@ -148,10 +146,10 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     alreadyRendered: !!containerRef.current
   }), [props]);
   const classes = useUtilityClasses(ownerState);
-  const ClockItem = slots?.digitalClockItem ?? components?.DigitalClockItem ?? DigitalClockItem;
+  const ClockItem = slots?.digitalClockItem ?? DigitalClockItem;
   const clockItemProps = useSlotProps({
     elementType: ClockItem,
-    externalSlotProps: slotProps?.digitalClockItem ?? componentsProps?.digitalClockItem,
+    externalSlotProps: slotProps?.digitalClockItem,
     ownerState: {},
     className: classes.item
   });
@@ -181,11 +179,14 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     if (containerRef.current === null) {
       return;
     }
-    const selectedItem = containerRef.current.querySelector('[role="listbox"] [role="option"][aria-selected="true"]');
-    if (!selectedItem) {
+    const activeItem = containerRef.current.querySelector('[role="listbox"] [role="option"][tabindex="0"], [role="listbox"] [role="option"][aria-selected="true"]');
+    if (!activeItem) {
       return;
     }
-    const offsetTop = selectedItem.offsetTop;
+    const 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;
@@ -227,21 +228,22 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
       length: Math.ceil(24 * 60 / timeStep) - 1
     }, (_, index) => utils.addMinutes(startOfDay, timeStep * (index + 1)))];
   }, [valueOrReferenceDate, timeStep, utils]);
+  const focusedOptionIndex = timeOptions.findIndex(option => 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(option => {
+      children: timeOptions.map((option, index) => {
         if (skipDisabled && isTimeDisabled(option)) {
           return null;
         }
         const isSelected = utils.isEqual(option, value);
+        const tabIndex = focusedOptionIndex === index || focusedOptionIndex === -1 && index === 0 ? 0 : -1;
         return /*#__PURE__*/_jsx(ClockItem, _extends({
           onClick: () => !readOnly && handleItemSelect(option),
           selected: isSelected,
@@ -251,7 +253,8 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
           // 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));
@@ -281,18 +284,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.