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

package/StaticTimePicker/StaticTimePicker.js

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

@@ -1,29 +1,17 @@
 import { BaseTimePickerProps, BaseTimePickerSlotsComponent, BaseTimePickerSlotsComponentsProps } from '../TimePicker/shared';
 import { StaticOnlyPickerProps, UseStaticPickerSlotsComponent, UseStaticPickerSlotsComponentsProps } from '../internals/hooks/useStaticPicker';
-import { MakeOptional, UncapitalizeObjectKeys } from '../internals';
+import { MakeOptional } from '../internals';
 import { TimeView } from '../models';
 export interface StaticTimePickerSlotsComponent<TDate> extends BaseTimePickerSlotsComponent<TDate>, UseStaticPickerSlotsComponent<TDate, TimeView> {
 }
 export interface StaticTimePickerSlotsComponentsProps<TDate> extends BaseTimePickerSlotsComponentsProps, UseStaticPickerSlotsComponentsProps<TDate, TimeView> {
 }
 export interface StaticTimePickerProps<TDate> extends BaseTimePickerProps<TDate, TimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
-    /**
-     * Overridable components.
-     * @default {}
-     * @deprecated Please use `slots`.
-     */
-    components?: StaticTimePickerSlotsComponent<TDate>;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     * @deprecated Please use `slotProps`.
-     */
-    componentsProps?: StaticTimePickerSlotsComponentsProps<TDate>;
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: UncapitalizeObjectKeys<StaticTimePickerSlotsComponent<TDate>>;
+    slots?: StaticTimePickerSlotsComponent<TDate>;
     /**
      * The props used for each component slot.
      * @default {}

package/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 != null ? innerSlots : uncapitalizeObjectKeys(components);
-  const slotProps = innerSlotProps != null ? 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/TimeClock/TimeClock.types.d.ts

@@ -1,6 +1,5 @@
 import { TimeClockClasses } from './timeClockClasses';
 import { PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps } from '../internals/components/PickersArrowSwitcher';
-import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock';
 import { TimeView } from '../models';
 import { TimeViewWithMeridiem } from '../internals/models';
@@ -20,23 +19,11 @@ export interface TimeClockProps<TDate, TView extends TimeViewWithMeridiem = Time
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<TimeClockClasses>;
-    /**
-     * Overridable components.
-     * @default {}
-     * @deprecated Please use `slots`.
-     */
-    components?: TimeClockSlotsComponent;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     * @deprecated Please use `slotProps`.
-     */
-    componentsProps?: TimeClockSlotsComponentsProps;
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: UncapitalizeObjectKeys<TimeClockSlotsComponent>;
+    slots?: TimeClockSlotsComponent;
     /**
      * The props used for each component slot.
      * @default {}

package/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';
@@ -23,7 +23,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - [TimeField API](https://mui.com/x/api/date-pickers/time-field/)
  */
 const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref) {
-  var _ref, _slots$textField, _slotProps$textField;
+  var _slots$textField;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiTimeField'
@@ -31,17 +31,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 = (_ref = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : components == null ? void 0 : components.TextField) != null ? _ref : MuiTextField;
+  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : MuiTextField;
   const _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
     }),
@@ -76,9 +74,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
@@ -123,18 +119,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/TimeField/TimeField.types.d.ts

@@ -4,7 +4,6 @@ import TextField from '@mui/material/TextField';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
 import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
 import { BaseTimeValidationProps, TimeValidationProps } from '../internals/models/validation';
-import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { FieldsTextFieldProps } from '../internals/models/fields';
 import { FieldSection, TimeValidationError } from '../models';
 import { FieldSlotsComponents, FieldSlotsComponentsProps } from '../internals';
@@ -22,23 +21,11 @@ export interface UseTimeFieldProps<TDate> extends MakeOptional<UseFieldInternalP
 export type UseTimeFieldDefaultizedProps<TDate> = DefaultizedProps<UseTimeFieldProps<TDate>, keyof BaseTimeValidationProps | 'format'>;
 export type UseTimeFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseTimeFieldProps<TDate>> & UseTimeFieldProps<TDate>;
 export interface TimeFieldProps<TDate> extends UseTimeFieldComponentProps<TDate, FieldsTextFieldProps> {
-    /**
-     * Overridable components.
-     * @default {}
-     * @deprecated Please use `slots`.
-     */
-    components?: TimeFieldSlotsComponent;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     * @deprecated Please use `slotProps`.
-     */
-    componentsProps?: TimeFieldSlotsComponentsProps<TDate>;
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: UncapitalizeObjectKeys<TimeFieldSlotsComponent>;
+    slots?: TimeFieldSlotsComponent;
     /**
      * The props used for each component slot.
      * @default {}
@@ -52,7 +39,7 @@ export interface TimeFieldSlotsComponent extends FieldSlotsComponents {
      * Receives the same props as `@mui/material/TextField`.
      * @default TextField from '@mui/material'
      */
-    TextField?: React.ElementType;
+    textField?: React.ElementType;
 }
 export interface TimeFieldSlotsComponentsProps<TDate> extends FieldSlotsComponentsProps {
     textField?: SlotComponentProps<typeof TextField, {}, TimeFieldOwnerState<TDate>>;

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

@@ -1,6 +1,5 @@
 import { DesktopTimePickerProps, DesktopTimePickerSlotsComponent, DesktopTimePickerSlotsComponentsProps } from '../DesktopTimePicker';
 import { TimeViewWithMeridiem } from '../internals/models';
-import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { MobileTimePickerProps, MobileTimePickerSlotsComponent, MobileTimePickerSlotsComponentsProps } from '../MobileTimePicker';
 export interface TimePickerSlotsComponents<TDate> extends DesktopTimePickerSlotsComponent<TDate>, MobileTimePickerSlotsComponent<TDate, TimeViewWithMeridiem> {
 }
@@ -13,23 +12,11 @@ export interface TimePickerProps<TDate> extends DesktopTimePickerProps<TDate>, O
      * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
      */
     desktopModeMediaQuery?: string;
-    /**
-     * Overridable components.
-     * @default {}
-     * @deprecated Please use `slots`.
-     */
-    components?: TimePickerSlotsComponents<TDate>;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     * @deprecated Please use `slotProps`.
-     */
-    componentsProps?: TimePickerSlotsComponentsProps<TDate>;
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: UncapitalizeObjectKeys<TimePickerSlotsComponents<TDate>>;
+    slots?: TimePickerSlotsComponents<TDate>;
     /**
      * The props used for each component slot.
      * @default {}

package/TimePicker/shared.d.ts

@@ -8,7 +8,6 @@ import { TimePickerToolbarProps, ExportedTimePickerToolbarProps } from './TimePi
 import { TimeValidationError } from '../models';
 import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
 import { TimeViewRendererProps } from '../timeViewRenderers';
-import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock';
 import { TimeViewWithMeridiem } from '../internals/models';
 export interface BaseTimePickerSlotsComponent<TDate> extends TimeClockSlotsComponent {
@@ -16,7 +15,7 @@ export interface BaseTimePickerSlotsComponent<TDate> extends TimeClockSlotsCompo
      * Custom component for the toolbar rendered above the views.
      * @default TimePickerToolbar
      */
-    Toolbar?: React.JSXElementConstructor<TimePickerToolbarProps<TDate>>;
+    toolbar?: React.JSXElementConstructor<TimePickerToolbarProps<TDate>>;
 }
 export interface BaseTimePickerSlotsComponentsProps extends TimeClockSlotsComponentsProps {
     toolbar?: ExportedTimePickerToolbarProps;
@@ -27,23 +26,11 @@ export interface BaseTimePickerProps<TDate, TView extends TimeViewWithMeridiem>
      * @default true on desktop, false on mobile
      */
     ampmInClock?: boolean;
-    /**
-     * Overridable components.
-     * @default {}
-     * @deprecated Please use `slots`.
-     */
-    components?: BaseTimePickerSlotsComponent<TDate>;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     * @deprecated Please use `slotProps`.
-     */
-    componentsProps?: BaseTimePickerSlotsComponentsProps;
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: UncapitalizeObjectKeys<BaseTimePickerSlotsComponent<TDate>>;
+    slots?: BaseTimePickerSlotsComponent<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
@@ -56,6 +43,6 @@ export interface BaseTimePickerProps<TDate, TView extends TimeViewWithMeridiem>
      */
     viewRenderers?: Partial<PickerViewRendererLookup<TDate | null, TView, TimeViewRendererProps<TView, BaseClockProps<TDate, TView>>, {}>>;
 }
-type UseTimePickerDefaultizedProps<TDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>> = LocalizedComponent<TDate, Omit<DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>, 'components' | 'componentsProps'>>;
+type UseTimePickerDefaultizedProps<TDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>> = LocalizedComponent<TDate, DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>>;
 export declare function useTimePickerDefaultizedProps<TDate, TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TDate, TView>>(props: Props, name: string): UseTimePickerDefaultizedProps<TDate, TView, Props>;
 export {};

package/TimePicker/shared.js

@@ -4,9 +4,8 @@ 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) {
-  var _themeProps$ampm, _themeProps$slots, _themeProps$slotProps, _themeProps$disableFu, _themeProps$disablePa;
+  var _themeProps$ampm, _themeProps$disableFu, _themeProps$disablePa, _themeProps$slotProps;
   const utils = useUtils();
   const themeProps = useThemeProps({
     props,
@@ -22,8 +21,6 @@ export function useTimePickerDefaultizedProps(props, name) {
       timePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  const slots = (_themeProps$slots = themeProps.slots) != null ? _themeProps$slots : uncapitalizeObjectKeys(themeProps.components);
-  const slotProps = (_themeProps$slotProps = themeProps.slotProps) != null ? _themeProps$slotProps : themeProps.componentsProps;
   return _extends({}, themeProps, {
     ampm,
     localeText
@@ -37,12 +34,12 @@ export function useTimePickerDefaultizedProps(props, name) {
     disablePast: (_themeProps$disablePa = themeProps.disablePast) != null ? _themeProps$disablePa : false,
     slots: _extends({
       toolbar: TimePickerToolbar
-    }, slots),
-    slotProps: _extends({}, slotProps, {
+    }, themeProps.slots),
+    slotProps: _extends({}, themeProps.slotProps, {
       toolbar: _extends({
         ampm,
         ampmInClock: themeProps.ampmInClock
-      }, slotProps == null ? void 0 : slotProps.toolbar)
+      }, (_themeProps$slotProps = themeProps.slotProps) == null ? void 0 : _themeProps$slotProps.toolbar)
     })
   });
 }

package/YearCalendar/YearCalendar.js

@@ -84,7 +84,6 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       onChange,
       readOnly,
       shouldDisableYear,
-      disableHighlightToday,
       onYearFocus,
       hasFocus,
       onFocusedViewChange,
@@ -125,12 +124,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',
@@ -239,7 +235,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/dateTimeViewRenderers/dateTimeViewRenderers.d.ts

@@ -3,7 +3,7 @@ import { DateCalendarProps } from '../DateCalendar';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { MultiSectionDigitalClockProps } from '../MultiSectionDigitalClock';
 import type { DateTimePickerProps } from '../DateTimePicker/DateTimePicker.types';
-export interface DateTimeViewRendererProps<TDate> extends Omit<DateCalendarProps<TDate> & MultiSectionDigitalClockProps<TDate>, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView' | 'components' | 'componentsProps' | 'slots' | 'slotProps'>, Pick<DateTimePickerProps<TDate>, 'components' | 'componentsProps' | 'slots' | 'slotProps'> {
+export interface DateTimeViewRendererProps<TDate> extends Omit<DateCalendarProps<TDate> & MultiSectionDigitalClockProps<TDate>, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView' | 'slots' | 'slotProps'>, Pick<DateTimePickerProps<TDate>, 'slots' | 'slotProps'> {
     view: DateOrTimeViewWithMeridiem;
     onViewChange?: (view: DateOrTimeViewWithMeridiem) => void;
     views: readonly DateOrTimeViewWithMeridiem[];
@@ -11,4 +11,4 @@ export interface DateTimeViewRendererProps<TDate> extends Omit<DateCalendarProps
     timeViewsCount: number;
     shouldRenderTimeInASingleColumn: boolean;
 }
-export declare const renderDesktopDateTimeView: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, minTime, maxDate, maxTime, shouldDisableDate, shouldDisableMonth, shouldDisableYear, shouldDisableTime, shouldDisableClock, reduceAnimations, minutesStep, ampm, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, components, componentsProps, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timeViewsCount, shouldRenderTimeInASingleColumn, }: DateTimeViewRendererProps<TDate>) => React.JSX.Element;
+export declare const renderDesktopDateTimeView: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, minTime, maxDate, maxTime, shouldDisableDate, shouldDisableMonth, shouldDisableYear, shouldDisableTime, shouldDisableClock, reduceAnimations, minutesStep, ampm, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timeViewsCount, shouldRenderTimeInASingleColumn, }: DateTimeViewRendererProps<TDate>) => React.JSX.Element;

package/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -43,8 +43,6 @@ export const renderDesktopDateTimeView = ({
   onYearChange,
   yearsPerRow,
   defaultCalendarMonth,
-  components,
-  componentsProps,
   slots,
   slotProps,
   loading,
@@ -65,8 +63,8 @@ export const renderDesktopDateTimeView = ({
   timeViewsCount,
   shouldRenderTimeInASingleColumn
 }) => {
-  var _resolveComponentProp, _slotProps$actionBar;
-  const isActionBarVisible = !!((_resolveComponentProp = resolveComponentProps((_slotProps$actionBar = slotProps == null ? void 0 : slotProps.actionBar) != null ? _slotProps$actionBar : componentsProps == null ? void 0 : componentsProps.actionBar, {})) != null && (_resolveComponentProp = _resolveComponentProp.actions) != null && _resolveComponentProp.length);
+  var _resolveComponentProp;
+  const isActionBarVisible = !!((_resolveComponentProp = resolveComponentProps(slotProps == null ? void 0 : slotProps.actionBar, {})) != null && (_resolveComponentProp = _resolveComponentProp.actions) != null && _resolveComponentProp.length);
   const commonTimeProps = {
     view: isInternalTimeView(view) ? view : 'hours',
     onViewChange,
@@ -87,8 +85,6 @@ export const renderDesktopDateTimeView = ({
     shouldDisableClock,
     minutesStep,
     ampm,
-    components,
-    componentsProps,
     slots,
     slotProps,
     readOnly,
@@ -126,8 +122,6 @@ export const renderDesktopDateTimeView = ({
         onYearChange: onYearChange,
         yearsPerRow: yearsPerRow,
         defaultCalendarMonth: defaultCalendarMonth,
-        components: components,
-        componentsProps: componentsProps,
         slots: slots,
         slotProps: slotProps,
         loading: loading,

package/dateViewRenderers/dateViewRenderers.d.ts

@@ -8,4 +8,4 @@ export interface DateViewRendererProps<TDate, TView extends DateOrTimeViewWithMe
     views: readonly TView[];
     focusedView: TView | null;
 }
-export declare const renderDateViewCalendar: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, components, componentsProps, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;
+export declare const renderDateViewCalendar: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, shouldDisableMonth, shouldDisableYear, reduceAnimations, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, }: DateViewRendererProps<TDate, DateView>) => React.JSX.Element;

package/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,

package/hooks/useClearableField.d.ts

@@ -11,12 +11,10 @@ type UseClearableFieldProps<TFieldProps extends FieldsTextFieldProps, TInputProp
         [K in keyof TFieldSlots as Uncapitalize<K & string>]: TFieldSlots[K];
     };
     slotProps?: TFieldSlotsComponentsProps;
-    components?: TFieldSlots;
-    componentsProps?: TFieldSlotsComponentsProps;
 };
 export declare const useClearableField: <TFieldProps extends FieldsTextFieldProps, TInputProps extends {
     endAdornment?: React.ReactNode;
-} | undefined, TFieldSlotsComponents extends FieldSlotsComponents, TFieldSlotsComponentsProps extends FieldSlotsComponentsProps>({ clearable, fieldProps: forwardedFieldProps, InputProps: ForwardedInputProps, onClear, slots, slotProps, components, componentsProps, }: UseClearableFieldProps<TFieldProps, TInputProps, TFieldSlotsComponents, TFieldSlotsComponentsProps>) => {
+} | undefined, TFieldSlotsComponents extends FieldSlotsComponents, TFieldSlotsComponentsProps extends FieldSlotsComponentsProps>({ clearable, fieldProps: forwardedFieldProps, InputProps: ForwardedInputProps, onClear, slots, slotProps, }: UseClearableFieldProps<TFieldProps, TInputProps, TFieldSlotsComponents, TFieldSlotsComponentsProps>) => {
     InputProps: TInputProps & {
         endAdornment: string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
     };

package/hooks/useClearableField.js

@@ -15,17 +15,15 @@ export const useClearableField = ({
   InputProps: ForwardedInputProps,
   onClear,
   slots,
-  slotProps,
-  components,
-  componentsProps
+  slotProps
 }) => {
-  var _ref, _slots$clearButton, _slotProps$clearButto, _ref2, _slots$clearIcon, _slotProps$clearIcon;
+  var _slots$clearButton, _slots$clearIcon;
   const localeText = useLocaleText();
-  const IconButton = (_ref = (_slots$clearButton = slots == null ? void 0 : slots.clearButton) != null ? _slots$clearButton : components == null ? void 0 : components.ClearButton) != null ? _ref : MuiIconButton;
+  const IconButton = (_slots$clearButton = slots == null ? void 0 : slots.clearButton) != null ? _slots$clearButton : MuiIconButton;
   // The spread is here to avoid this bug mui/material-ui#34056
   const _useSlotProps = useSlotProps({
       elementType: IconButton,
-      externalSlotProps: (_slotProps$clearButto = slotProps == null ? void 0 : slotProps.clearButton) != null ? _slotProps$clearButto : componentsProps == null ? void 0 : componentsProps.clearButton,
+      externalSlotProps: slotProps == null ? void 0 : slotProps.clearButton,
       ownerState: {},
       className: 'clearButton',
       additionalProps: {
@@ -33,10 +31,10 @@ export const useClearableField = ({
       }
     }),
     iconButtonProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
-  const EndClearIcon = (_ref2 = (_slots$clearIcon = slots == null ? void 0 : slots.clearIcon) != null ? _slots$clearIcon : components == null ? void 0 : components.ClearIcon) != null ? _ref2 : ClearIcon;
+  const EndClearIcon = (_slots$clearIcon = slots == null ? void 0 : slots.clearIcon) != null ? _slots$clearIcon : ClearIcon;
   const endClearIconProps = useSlotProps({
     elementType: EndClearIcon,
-    externalSlotProps: (_slotProps$clearIcon = slotProps == null ? void 0 : slotProps.clearIcon) != null ? _slotProps$clearIcon : componentsProps == null ? void 0 : componentsProps.clearIcon,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.clearIcon,
     ownerState: {}
   });
   const InputProps = _extends({}, ForwardedInputProps, {

package/index.d.ts

@@ -28,6 +28,7 @@ export * from './timeViewRenderers';
 export * from './PickersLayout';
 export * from './PickersActionBar';
 export * from './PickersShortcuts';
+export * from './PickersCalendarHeader';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';
 export * from './icons';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.18.1
+ * @mui/x-date-pickers v7.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -46,6 +46,9 @@ export * from './timeViewRenderers';
 export * from './PickersLayout';
 export * from './PickersActionBar';
 export * from './PickersShortcuts';
+
+// Other slots
+export * from './PickersCalendarHeader';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';
 export * from './icons';

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.d.ts

@@ -3,19 +3,23 @@ import { SlotComponentProps } from '@mui/base/utils';
 import IconButton from '@mui/material/IconButton';
 import SvgIcon from '@mui/material/SvgIcon';
 import { PickersArrowSwitcherClasses } from './pickersArrowSwitcherClasses';
-import { UncapitalizeObjectKeys } from '../../utils/slots-migration';
 export interface ExportedPickersArrowSwitcherProps {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: UncapitalizeObjectKeys<PickersArrowSwitcherSlotsComponent>;
+    slots?: PickersArrowSwitcherSlotsComponent;
     /**
      * The props used for each component slot.
      * @default {}
      */
     slotProps?: PickersArrowSwitcherSlotsComponentsProps;
     classes?: Partial<PickersArrowSwitcherClasses>;
+    /**
+     * Format used to display the date.
+     * @default `${adapter.formats.month} ${adapter.formats.year}`
+     */
+    format?: string;
 }
 export interface PickersArrowSwitcherProps extends ExportedPickersArrowSwitcherProps, Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'as'> {
     children?: React.ReactNode;
@@ -36,22 +40,22 @@ export interface PickersArrowSwitcherSlotsComponent {
      * Button allowing to switch to the left view.
      * @default IconButton
      */
-    PreviousIconButton?: React.ElementType;
+    previousIconButton?: React.ElementType;
     /**
      * Button allowing to switch to the right view.
      * @default IconButton
      */
-    NextIconButton?: React.ElementType;
+    nextIconButton?: React.ElementType;
     /**
      * Icon displayed in the left view switch button.
      * @default ArrowLeft
      */
-    LeftArrowIcon?: React.ElementType;
+    leftArrowIcon?: React.ElementType;
     /**
      * Icon displayed in the right view switch button.
      * @default ArrowRight
      */
-    RightArrowIcon?: React.ElementType;
+    rightArrowIcon?: React.ElementType;
 }
 export interface PickersArrowSwitcherButtonSlotOwnerState extends PickersArrowSwitcherOwnerState {
     hidden?: boolean;