@mui/x-date-pickers-pro 6.0.0-alpha.14 → 6.0.0-alpha.15

package/CHANGELOG.md

@@ -3,6 +3,163 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.15
+
+_Jan 13, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Support components and slots for new pickers (#7390) @alexfauquette
+- ✨ Update `onColumnOrderChange` behavior to match `onRowsOrderChange` (#7385) @DanailH
+- 🌍 Improve Spanish (es-ES) and Belarusian (be-BY) locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.15` / `@mui/x-data-grid-pro@6.0.0-alpha.15` / `@mui/x-data-grid-premium@6.0.0-alpha.15`
+
+#### Breaking changes
+
+- Remove the `onCellFocusOut` prop (#6302) @cherniavskii
+
+  The `onCellFocusOut` prop was removed. Use `componentsProps.cell.onBlur` instead:
+
+  ```tsx
+  <DataGrid
+    componentsProps={{
+      cell: {
+        onBlur: (event) => {
+          const cellElement = event.currentTarget;
+          const field = cellElement.getAttribute('data-field');
+          const rowId = cell.parentElement.getAttribute('data-id');
+        },
+      },
+    }}
+  />
+  ```
+
+- [DataGrid] Stop exporting editing selector (#7456) @m4theushw
+
+  The `gridEditRowsStateSelector` selector was removed.
+
+- [DataGrid] Rework column headers and virtual scroller positioning (#7001) @cherniavskii
+
+  The `headerHeight` prop was renamed to `columnHeaderHeight`.
+
+- [DataGrid] Remove the `columnTypes` prop (#7309) @cherniavskii
+
+  The `columnTypes` prop was removed. For custom column types see [Custom column types](https://mui.com/x/react-data-grid/column-definition/#custom-column-types) docs.
+
+- [DataGrid] Rename `linkOperators` to `logicOperators` (#7310) @cherniavskii
+
+  The `apiRef.current.setFilterLinkOperator` method was renamed to `apiRef.current.setFilterLogicOperator`.
+  The `GridLinkOperator` enum was renamed to `GridLogicOperator`.
+  The `GridFilterModel['linkOperator']` was renamed to `GridFilterModel['logicOperator']`.
+  The `linkOperators` prop of `GridFilterForm` and `GridFilterPanel` components was renamed to `logicOperators`.
+  The `linkOperatorInputProps` prop of `GridFilterForm` component was renamed to `logicOperatorInputProps`.
+  The `filterFormProps.linkOperatorInputProps` prop in `GridFilterForm` component was renamed to `filterFormProps.logicOperatorInputProps`.
+  The `GridLocaleText['filterPanelLinkOperator']` property was renamed to `GridLocaleText['filterPanelLogicOperator']`.
+  The `.MuiDataGrid-filterFormLinkOperatorInput`CSS class was renamed to `.MuiDataGrid-filterFormLogicOperatorInput`.
+
+- [DataGrid] Remove `Alt+C` keyboard shortcut (#7466) @MBilalShafi
+
+  <kbd>Alt</kbd> (or <kbd>⌥ Option</kbd>) + <kbd>C</kbd> keyboard shortcut is no longer supported.
+
+#### Changes
+
+- [DataGrid] Fix <kbd>Tab</kbd> between portaled and non-portaled edit components (#7098) @m4theushw
+- [DataGrid] Remove the `columnTypes` prop (#7309) @cherniavskii
+- [DataGrid] Remove the `onCellFocusOut` prop (#6302) @cherniavskii
+- [DataGrid] Rename `linkOperators` to `logicOperators` (#7310) @cherniavskii
+- [DataGrid] Rework column headers and virtual scroller positioning (#7001) @cherniavskii
+- [DataGrid] Stop exporting editing selector (#7456) @m4theushw
+- [DataGrid] Update `onColumnOrderChange` behavior to match `onRowsOrderChange` (#7385) @DanailH
+- [DataGrid] Improve Spanish (es-ES) locale (#7447) @Anderssxn
+- [DataGrid] Remove Alt+C keyboard shortcut (#7466) @MBilalShafi
+- [DataGridPremium] Fix Excel export not working with date strings (#7396) @cherniavskii
+
+### `@mui/x-date-pickers@6.0.0-alpha.15` / `@mui/x-date-pickers-pro@6.0.0-alpha.15`
+
+#### Breaking changes
+
+- [pickers] Stop using the `WrapperVariantContext` in `MonthCalendar` and `YearCalendar` (#7382) @flaviendelangle
+
+  The `modeMobile` and `modeDesktop` classes have been removed from the `PickersMonth` and `PickersYear` internal components.
+
+  If you were using those classes on responsive components,
+  you can import `DEFAULT_DESKTOP_MODE_MEDIA_QUERY` from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro` (or use your custom media query if any):
+
+  ```diff
+   <GlobalStyles
+     styles={{
+  -     [`.${pickersYearClasses.modeDesktop}`]: {
+  -       backgroundColor: 'red'
+  -     }
+  +     [DEFAULT_DESKTOP_MODE_MEDIA_QUERY]: {
+  +       [`.${pickersYearClasses.root}`]: {
+  +         backgroundColor: 'red'
+  +       }
+  +     }
+  -     [`.${pickersYearClasses.modeMobile}`]: {
+  -       backgroundColor: 'red'
+  -     }
+  +     [DEFAULT_DESKTOP_MODE_MEDIA_QUERY.replace('@media', '@media not')]: {
+  +       [`.${pickersYearClasses.root}`]: {
+  +         backgroundColor: 'red'
+  +       }
+  +     }
+     }}
+   />
+  ```
+
+  Works exactly the same way for `PickersMonth`.
+
+- [pickers] Refactor `shouldDisableTime` (#7299) @LukasTy
+
+  The `shouldDisableTime` prop signature has been changed. Either rename the prop usage to `shouldDisableClock` or refactor usage.
+
+  ```diff
+   <DateTimePicker
+  -   shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12}
+  +   shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12}
+   />
+  ```
+
+  ```diff
+   <DateTimePicker
+  -   shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12}
+  +   shouldDisableTime={(time, view) => view === 'hours' && value.hour() < 12}
+   />
+  ```
+
+#### Changes
+
+- [fields] Fix Android editing (#7444) @flaviendelangle
+- [pickers] Add Belarusian (be-BY) locale (#7395) @volhalink
+- [pickers] Hide am/pm controls when their is no hour view (#7380) @flaviendelangle
+- [pickers] Hide the tabs by default on `DesktopNextDateTimePicker` (#7503) @flaviendelangle
+- [pickers] Refactor `shouldDisableTime` (#7299) @LukasTy
+- [pickers] Remove `WrapperVariantContext` from `DateTimePickerTabs` (#7374) @LukasTy
+- [pickers] Stop using the `WrapperVariantContext` in `MonthCalendar` and `YearCalendar` (#7382) @flaviendelangle
+- [pickers] Support `components` and `slots` for new pickers (#7390) @alexfauquette
+- [pickers] Replace `slotsProps` by `slotProps` (#7528) @alexfauquette
+
+### Docs
+
+- [docs] Fix codesandboxes using `DemoContainer` (#7388) @LukasTy
+- [docs] Fix wrong reference to currentView (#7441) @oliviertassinari
+- [docs] New page for `DateRangeCalendar` (#7378) @flaviendelangle
+- [docs] Update the migration guide with the breaking changes between the legacy and the new pickers (#7345) @flaviendelangle
+- [docs] Use new pickers on "Custom components" demos (#7194) @flaviendelangle
+
+### Core
+
+- [core] Handle selection edge case (#7350) @oliviertassinari
+- [core] Improve license message @oliviertassinari
+- [pickers] Move default `closeOnSelect` to prop definition (#7459) @flaviendelangle
+- [core] Move interfaces of UI views to dedicated files (#7458) @flaviendelangle
+- [core] Update package used to import LicenseInfo (#7442) @oliviertassinari
+- [test] Add a few inheritComponent (#7352) @oliviertassinari
+
 ## 6.0.0-alpha.14
 
 _Jan 5, 2023_

package/DateRangeCalendar/DateRangeCalendar.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "defaultCalendarMonth", "rangePosition", "onRangePositionChange", "calendars", "components", "componentsProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber"],
+const _excluded = ["value", "defaultValue", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "defaultCalendarMonth", "rangePosition", "onRangePositionChange", "calendars", "components", "componentsProps", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -11,7 +11,7 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { Watermark } from '@mui/x-license-pro';
-import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, WrapperVariantContext, useNow } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, WrapperVariantContext, useNow, uncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from '../internal/utils/releaseInfo';
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from './dateRangeCalendarClasses';
 import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from '../internal/utils/date-utils';
@@ -129,6 +129,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       calendars,
       components,
       componentsProps,
+      slots: innerSlots,
+      slotProps: innerslotProps,
       loading,
       renderLoading,
       disableHighlightToday,
@@ -143,6 +145,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       displayWeekNumber
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
+  const slotProps = innerslotProps != null ? innerslotProps : componentsProps;
   const [value, setValue] = useControlled({
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : rangeValueManager.emptyValue,
@@ -311,10 +315,10 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       setRangePreviewDay(null);
     }
   });
-  const componentsForDayCalendar = _extends({
-    Day: DateRangePickerDay
-  }, components);
-  const componentsPropsForDayCalendar = _extends({}, componentsProps, {
+  const slotsForDayCalendar = _extends({
+    day: DateRangePickerDay
+  }, slots);
+  const slotPropsForDayCalendar = _extends({}, slotProps, {
     day: dayOwnerState => {
       var _resolveComponentProp;
       const {
@@ -345,7 +349,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         'data-position': datePosition
       }, dragEventHandlers, {
         draggable: isElementDraggable ? true : undefined
-      }, (_resolveComponentProp = resolveComponentProps(componentsProps == null ? void 0 : componentsProps.day, dayOwnerState)) != null ? _resolveComponentProp : {});
+      }, (_resolveComponentProp = resolveComponentProps(slotProps == null ? void 0 : slotProps.day, dayOwnerState)) != null ? _resolveComponentProp : {});
     }
   });
   const visibleMonths = React.useMemo(() => Array.from({
@@ -395,8 +399,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         disablePast: disablePast,
         disableFuture: disableFuture,
         reduceAnimations: reduceAnimations,
-        components: components,
-        componentsProps: componentsProps
+        slots: slots,
+        slotProps: slotProps
       }) : /*#__PURE__*/_jsx(DateRangeCalendarArrowSwitcher, {
         onGoToPrevious: selectPreviousMonth,
         onGoToNext: selectNextMonth,
@@ -406,8 +410,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         isNextHidden: index !== calendars - 1,
         isNextDisabled: isNextMonthDisabled,
         nextLabel: localeText.nextMonth,
-        components: components,
-        componentsProps: componentsProps,
+        slots: slots,
+        slotProps: slotProps,
         children: utils.format(month, 'monthAndYear')
       }), /*#__PURE__*/_jsx(DayCalendarForRange, _extends({
         className: classes.dayCalendar
@@ -424,8 +428,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         dayOfWeekFormatter: dayOfWeekFormatter,
         loading: loading,
         renderLoading: renderLoading,
-        components: componentsForDayCalendar,
-        componentsProps: componentsPropsForDayCalendar,
+        slots: slotsForDayCalendar,
+        slotProps: slotPropsForDayCalendar,
         autoFocus: month === focusedMonth,
         fixedWeekNumber: fixedWeekNumber,
         displayWeekNumber: displayWeekNumber
@@ -455,11 +459,13 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   /**
    * 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,
   /**
@@ -577,6 +583,16 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overrideable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/base';
 import { Theme } from '@mui/material/styles';
-import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, PickerSelectionState, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, DayCalendarProps, ExportedUseViewsOptions } from '@mui/x-date-pickers/internals';
+import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, PickerSelectionState, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, DayCalendarProps, ExportedUseViewsOptions, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { DateRange, RangePositionProps, DayRangeValidationProps } from '../internal/models';
 import { DateRangeCalendarClasses } from './dateRangeCalendarClasses';
 import { DateRangePickerDay, DateRangePickerDayProps } from '../DateRangePickerDay';
@@ -91,13 +91,25 @@ export interface DateRangeCalendarProps<TDate> extends ExportedDateRangeCalendar
     /**
      * Overrideable components.
      * @default {}
+     * @deprecated Please use `slots`.
      */
     components?: DateRangeCalendarSlotsComponent<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
+     * @deprecated Please use `slotProps`.
      */
     componentsProps?: DateRangeCalendarSlotsComponentsProps<TDate>;
+    /**
+     * Overrideable component slots.
+     * @default {}
+     */
+    slots?: UncapitalizeObjectKeys<DateRangeCalendarSlotsComponent<TDate>>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: DateRangeCalendarSlotsComponentsProps<TDate>;
 }
 export interface DateRangeCalendarOwnerState<TDate> extends DateRangeCalendarProps<TDate> {
     isDragging: boolean;

package/DateRangePicker/DateRangePicker.d.ts

@@ -5,7 +5,7 @@ export interface DateRangePickerSlotsComponent<TDate> extends MobileDateRangePic
 }
 export interface DateRangePickerSlotsComponentsProps<TDate> extends MobileDateRangePickerSlotsComponentsProps<TDate>, DesktopDateRangePickerSlotsComponentsProps<TDate> {
 }
-export interface DateRangePickerProps<TDate> extends Omit<DesktopDateRangePickerProps<TDate>, 'components' | 'componentsProps'>, Omit<MobileDateRangePickerProps<TDate>, 'components' | 'componentsProps'> {
+export interface DateRangePickerProps<TDate> extends Omit<DesktopDateRangePickerProps<TDate>, 'components' | 'componentsProps' | 'slots' | 'slotProps'>, Omit<MobileDateRangePickerProps<TDate>, 'components' | 'componentsProps' | 'slots' | 'slotProps'> {
     /**
      * CSS media query when `Mobile` mode will be changed to `Desktop`.
      * @default '@media (pointer: fine)'

package/DateRangePicker/DateRangePickerView.d.ts

@@ -16,7 +16,7 @@ export interface DateRangePickerViewSlotsComponent<TDate> extends DateRangePicke
 export interface DateRangePickerViewSlotsComponentsProps<TDate> extends DateRangePickerViewMobileSlotsComponentsProps<TDate> {
     toolbar?: ExportedBaseToolbarProps;
 }
-export interface ExportedDateRangePickerViewProps<TDate> extends ExportedDateRangePickerViewDesktopProps, DayRangeValidationProps<TDate>, Omit<ExportedDateCalendarProps<TDate>, 'value' | 'defaultValue' | 'onChange' | 'onYearChange' | keyof BaseDateValidationProps<TDate> | keyof DayValidationProps<TDate>> {
+export interface ExportedDateRangePickerViewProps<TDate> extends ExportedDateRangePickerViewDesktopProps, DayRangeValidationProps<TDate>, Omit<ExportedDateCalendarProps<TDate>, 'value' | 'defaultValue' | 'onChange' | 'onYearChange' | 'monthsPerRow' | 'yearsPerRow' | keyof BaseDateValidationProps<TDate> | keyof DayValidationProps<TDate>> {
     /**
      * Overrideable components.
      * @default {}

package/DateRangePicker/DateRangePickerViewDesktop.d.ts

@@ -24,7 +24,7 @@ export interface DesktopDateRangeCalendarSlotsComponentsProps<TDate> extends Pic
         day: TDate;
     }>;
 }
-export interface DateRangePickerViewDesktopProps<TDate> extends ExportedDateRangePickerViewDesktopProps, Omit<DayCalendarProps<TDate>, 'selectedDays' | 'onFocusedDayChange' | 'classes' | 'components' | 'componentsProps'>, DayValidationProps<TDate>, ExportedPickersArrowSwitcherProps {
+export interface DateRangePickerViewDesktopProps<TDate> extends ExportedDateRangePickerViewDesktopProps, Omit<DayCalendarProps<TDate>, 'selectedDays' | 'onFocusedDayChange' | 'classes' | 'components' | 'componentsProps' | 'slots' | 'slotProps'>, DayValidationProps<TDate>, ExportedPickersArrowSwitcherProps {
     /**
      * Overrideable components.
      * @default {}

package/DateRangePicker/DateRangePickerViewDesktop.js

@@ -142,7 +142,7 @@ export function DateRangePickerViewDesktop(inProps) {
   const componentsForDayCalendar = _extends({
     Day: DateRangePickerDay
   }, components);
-  const componentsPropsForDayCalendar = _extends({}, componentsProps, {
+  const slotPropsForDayCalendar = _extends({}, componentsProps, {
     day: dayOwnerState => {
       var _resolveComponentProp;
       const {
@@ -175,7 +175,7 @@ export function DateRangePickerViewDesktop(inProps) {
           isNextDisabled: isNextMonthDisabled,
           nextLabel: localeText.nextMonth,
           components: components,
-          componentsProps: componentsProps,
+          slotProps: componentsProps,
           children: utils.format(monthOnIteration, 'monthAndYear')
         }), /*#__PURE__*/_createElement(DateRangePickerViewDesktopCalendar, _extends({}, other, {
           minDate: minDate,
@@ -189,7 +189,7 @@ export function DateRangePickerViewDesktop(inProps) {
           currentMonth: monthOnIteration,
           TransitionProps: CalendarTransitionProps,
           components: componentsForDayCalendar,
-          componentsProps: componentsPropsForDayCalendar
+          slotProps: slotPropsForDayCalendar
         }))]
       }, index);
     })

package/DateRangePicker/DateRangePickerViewMobile.d.ts

@@ -16,7 +16,7 @@ export interface DateRangePickerViewMobileSlotsComponentsProps<TDate> extends Pi
         day: TDate;
     }>;
 }
-interface DesktopDateRangeCalendarProps<TDate> extends Omit<DayCalendarProps<TDate>, 'selectedDays' | 'onFocusedDayChange' | 'classes' | 'components' | 'componentsProps'>, DayValidationProps<TDate>, ExportedCalendarHeaderProps<TDate> {
+interface DesktopDateRangeCalendarProps<TDate> extends Omit<DayCalendarProps<TDate>, 'selectedDays' | 'onFocusedDayChange' | 'classes' | 'components' | 'componentsProps' | 'slots' | 'slotProps'>, DayValidationProps<TDate>, ExportedCalendarHeaderProps<TDate> {
     /**
      * Overrideable components.
      * @default {}

package/DateRangePicker/DateRangePickerViewMobile.js

@@ -62,7 +62,7 @@ export function DateRangePickerViewMobile(props) {
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(PickersCalendarHeader, _extends({
       components: components,
-      componentsProps: componentsProps,
+      slotProps: componentsProps,
       maxDate: maxDateWithDisabled,
       minDate: minDateWithDisabled,
       onMonthChange: changeMonth,
@@ -78,7 +78,7 @@ export function DateRangePickerViewMobile(props) {
       onSelectedDaysChange: onSelectedDaysChange,
       onFocusedDayChange: doNothing,
       components: componentsForDayCalendar,
-      componentsProps: componentsPropsForDayCalendar
+      slotProps: componentsPropsForDayCalendar
     }))]
   });
 }

package/DesktopNextDateRangePicker/DesktopNextDateRangePicker.js

@@ -29,13 +29,13 @@ const DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
     views: ['day'],
     openTo: 'day',
     showToolbar: (_defaultizedProps$sho = defaultizedProps.showToolbar) != null ? _defaultizedProps$sho : false,
-    components: _extends({
-      Field: MultiInputDateRangeField
-    }, defaultizedProps.components),
-    componentsProps: _extends({}, defaultizedProps.componentsProps, {
+    slots: _extends({
+      field: MultiInputDateRangeField
+    }, defaultizedProps.slots),
+    slotProps: _extends({}, defaultizedProps.slotProps, {
       field: ownerState => {
-        var _defaultizedProps$com;
-        return _extends({}, resolveComponentProps((_defaultizedProps$com = defaultizedProps.componentsProps) == null ? void 0 : _defaultizedProps$com.field, ownerState), extractValidationProps(defaultizedProps), {
+        var _defaultizedProps$slo;
+        return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
           className,
           sx,
           ref
@@ -81,11 +81,13 @@ DesktopNextDateRangePicker.propTypes = {
   /**
    * 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,
   /**
@@ -265,6 +267,16 @@ DesktopNextDateRangePicker.propTypes = {
    * @default `true` for mobile, `false` for desktop
    */
   showToolbar: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overrideable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/DesktopNextDateRangePicker/DesktopNextDateRangePicker.types.d.ts

@@ -1,4 +1,4 @@
-import { MakeOptional } from '@mui/x-date-pickers/internals';
+import { MakeOptional, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { UseDesktopRangePickerSlotsComponent, UseDesktopRangePickerSlotsComponentsProps, DesktopRangeOnlyPickerProps } from '../internal/hooks/useDesktopRangePicker';
 import { BaseNextDateRangePickerProps, BaseNextDateRangePickerSlotsComponent, BaseNextDateRangePickerSlotsComponentsProps } from '../NextDateRangePicker/shared';
 export interface DesktopNextDateRangePickerSlotsComponent<TDate> extends BaseNextDateRangePickerSlotsComponent<TDate>, MakeOptional<UseDesktopRangePickerSlotsComponent<TDate, 'day'>, 'Field'> {
@@ -14,11 +14,23 @@ export interface DesktopNextDateRangePickerProps<TDate> extends BaseNextDateRang
     /**
      * Overrideable components.
      * @default {}
+     * @deprecated Please use `slots`.
      */
     components?: DesktopNextDateRangePickerSlotsComponent<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
+     * @deprecated Please use `slotProps`.
      */
     componentsProps?: DesktopNextDateRangePickerSlotsComponentsProps<TDate>;
+    /**
+     * Overrideable component slots.
+     * @default {}
+     */
+    slots?: UncapitalizeObjectKeys<DesktopNextDateRangePickerSlotsComponent<TDate>>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: DesktopNextDateRangePickerSlotsComponentsProps<TDate>;
 }

package/MobileNextDateRangePicker/MobileNextDateRangePicker.js

@@ -29,13 +29,13 @@ const MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileN
     views: ['day'],
     openTo: 'day',
     showToolbar: (_defaultizedProps$sho = defaultizedProps.showToolbar) != null ? _defaultizedProps$sho : true,
-    components: _extends({
-      Field: MultiInputDateRangeField
-    }, defaultizedProps.components),
-    componentsProps: _extends({}, defaultizedProps.componentsProps, {
+    slots: _extends({
+      field: MultiInputDateRangeField
+    }, defaultizedProps.slots),
+    slotProps: _extends({}, defaultizedProps.slotProps, {
       field: ownerState => {
-        var _defaultizedProps$com;
-        return _extends({}, resolveComponentProps((_defaultizedProps$com = defaultizedProps.componentsProps) == null ? void 0 : _defaultizedProps$com.field, ownerState), extractValidationProps(defaultizedProps), {
+        var _defaultizedProps$slo;
+        return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
           className,
           sx,
           ref
@@ -81,11 +81,13 @@ MobileNextDateRangePicker.propTypes = {
   /**
    * 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,
   /**
@@ -265,6 +267,16 @@ MobileNextDateRangePicker.propTypes = {
    * @default `true` for mobile, `false` for desktop
    */
   showToolbar: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overrideable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/MobileNextDateRangePicker/MobileNextDateRangePicker.types.d.ts

@@ -1,4 +1,4 @@
-import { MakeOptional } from '@mui/x-date-pickers/internals';
+import { MakeOptional, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { UseMobileRangePickerSlotsComponent, UseMobileRangePickerSlotsComponentsProps, MobileRangeOnlyPickerProps } from '../internal/hooks/useMobileRangePicker';
 import { BaseNextDateRangePickerProps, BaseNextDateRangePickerSlotsComponent, BaseNextDateRangePickerSlotsComponentsProps } from '../NextDateRangePicker/shared';
 export interface MobileNextDateRangePickerSlotsComponent<TDate> extends BaseNextDateRangePickerSlotsComponent<TDate>, MakeOptional<UseMobileRangePickerSlotsComponent<TDate, 'day'>, 'Field'> {
@@ -14,11 +14,23 @@ export interface MobileNextDateRangePickerProps<TDate> extends BaseNextDateRange
     /**
      * Overrideable components.
      * @default {}
+     * @deprecated Please use `slots`.
      */
     components?: MobileNextDateRangePickerSlotsComponent<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
+     * @deprecated Please use `slotProps`.
      */
     componentsProps?: MobileNextDateRangePickerSlotsComponentsProps<TDate>;
+    /**
+     * Overrideable component slots.
+     * @default {}
+     */
+    slots?: UncapitalizeObjectKeys<MobileNextDateRangePickerSlotsComponent<TDate>>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: MobileNextDateRangePickerSlotsComponentsProps<TDate>;
 }