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

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "autoFocus"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -10,6 +10,7 @@ import MuiTextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
+import { uncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { useMultiInputDateRangeField } from '../internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,12 +35,14 @@ const MultiInputDateRangeFieldSeparator = styled(props => {
   overridesResolver: (props, styles) => styles.separator
 })({});
 const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInputDateRangeField(inProps, ref) {
-  var _components$Root, _components$TextField, _components$Separator;
+  var _slots$root, _slots$textField, _slots$separator, _slotProps$separator;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiMultiInputDateRangeField'
   });
   const {
+      slots: innerSlots,
+      slotProps: innerslotProps,
       components,
       componentsProps,
       value,
@@ -59,21 +62,23 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       autoFocus
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
+  const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
+  const slotProps = innerslotProps != null ? innerslotProps : componentsProps;
   const ownerState = themeProps;
-  const Root = (_components$Root = components == null ? void 0 : components.Root) != null ? _components$Root : MultiInputDateRangeFieldRoot;
+  const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputDateRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
-    externalSlotProps: componentsProps == null ? void 0 : componentsProps.root,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.root,
     externalForwardedProps: other,
     additionalProps: {
       ref
     },
     ownerState
   });
-  const TextField = (_components$TextField = components == null ? void 0 : components.TextField) != null ? _components$TextField : MuiTextField;
+  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : MuiTextField;
   const startTextFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: componentsProps == null ? void 0 : componentsProps.textField,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
     additionalProps: {
       autoFocus
     },
@@ -83,15 +88,15 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   });
   const endTextFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: componentsProps == null ? void 0 : componentsProps.textField,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
     ownerState: _extends({}, ownerState, {
       position: 'end'
     })
   });
-  const Separator = (_components$Separator = components == null ? void 0 : components.Separator) != null ? _components$Separator : MultiInputDateRangeFieldSeparator;
+  const Separator = (_slots$separator = slots == null ? void 0 : slots.separator) != null ? _slots$separator : MultiInputDateRangeFieldSeparator;
   const separatorProps = useSlotProps({
     elementType: Separator,
-    externalSlotProps: componentsProps == null ? void 0 : componentsProps.separator,
+    externalSlotProps: (_slotProps$separator = slotProps == null ? void 0 : slotProps.separator) != null ? _slotProps$separator : componentsProps == null ? void 0 : componentsProps.separator,
     ownerState
   });
   const _useMultiInputDateRan = useMultiInputDateRangeField({
@@ -160,11 +165,13 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.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,
   /**
@@ -254,6 +261,16 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: PropTypes.func,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overrideable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * Defines the space between immediate children.
    * @default 0

package/MultiInputDateRangeField/MultiInputDateRangeField.types.d.ts

@@ -3,6 +3,7 @@ import { SlotComponentProps } from '@mui/base/utils';
 import Typography from '@mui/material/Typography';
 import Stack, { StackProps } from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
+import { UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { UseDateRangeFieldProps } from '../internal/models/dateRange';
 import { RangePosition } from '../internal/models/range';
 export interface UseMultiInputDateRangeFieldParams<TDate, TChildProps extends {}> {
@@ -21,13 +22,25 @@ export interface MultiInputDateRangeFieldProps<TDate> extends UseMultiInputDateR
     /**
      * Overrideable components.
      * @default {}
+     * @deprecated Please use `slots`.
      */
     components?: MultiInputDateRangeFieldSlotsComponent;
     /**
      * The props used for each component slot.
      * @default {}
+     * @deprecated Please use `slotProps`.
      */
     componentsProps?: MultiInputDateRangeFieldSlotsComponentsProps<TDate>;
+    /**
+     * Overrideable component slots.
+     * @default {}
+     */
+    slots?: UncapitalizeObjectKeys<MultiInputDateRangeFieldSlotsComponent>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: MultiInputDateRangeFieldSlotsComponentsProps<TDate>;
 }
 export type MultiInputDateRangeFieldOwnerState<TDate> = MultiInputDateRangeFieldProps<TDate>;
 export interface MultiInputDateRangeFieldSlotsComponent {

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -10,6 +10,7 @@ import MuiTextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
+import { uncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { useMultiInputDateTimeRangeField } from '../internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,12 +35,14 @@ const MultiInputDateTimeRangeFieldSeparator = styled(props => {
   overridesResolver: (props, styles) => styles.separator
 })({});
 const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInputDateTimeRangeField(inProps, ref) {
-  var _components$Root, _components$TextField, _components$Separator;
+  var _slots$root, _slots$textField, _slots$separator;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiMultiInputDateTimeRangeField'
   });
   const {
+      slots: innerSlots,
+      slotProps: innerslotProps,
       components,
       componentsProps,
       value,
@@ -57,6 +60,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       minDateTime,
       maxDateTime,
       minutesStep,
+      shouldDisableClock,
       shouldDisableTime,
       disableFuture,
       disablePast,
@@ -64,36 +68,38 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       onSelectedSectionsChange
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
+  const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
+  const slotProps = innerslotProps != null ? innerslotProps : componentsProps;
   const ownerState = themeProps;
-  const Root = (_components$Root = components == null ? void 0 : components.Root) != null ? _components$Root : MultiInputDateTimeRangeFieldRoot;
+  const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputDateTimeRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
-    externalSlotProps: componentsProps == null ? void 0 : componentsProps.root,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.root,
     externalForwardedProps: other,
     additionalProps: {
       ref
     },
     ownerState
   });
-  const TextField = (_components$TextField = components == null ? void 0 : components.TextField) != null ? _components$TextField : MuiTextField;
+  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : MuiTextField;
   const startTextFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: componentsProps == null ? void 0 : componentsProps.textField,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
   });
   const endTextFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: componentsProps == null ? void 0 : componentsProps.textField,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
     ownerState: _extends({}, ownerState, {
       position: 'end'
     })
   });
-  const Separator = (_components$Separator = components == null ? void 0 : components.Separator) != null ? _components$Separator : MultiInputDateTimeRangeFieldSeparator;
+  const Separator = (_slots$separator = slots == null ? void 0 : slots.separator) != null ? _slots$separator : MultiInputDateTimeRangeFieldSeparator;
   const separatorProps = useSlotProps({
     elementType: Separator,
-    externalSlotProps: componentsProps == null ? void 0 : componentsProps.separator,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.separator,
     ownerState
   });
   const _useMultiInputDateTim = useMultiInputDateTimeRangeField({
@@ -113,6 +119,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
         minDateTime,
         maxDateTime,
         minutesStep,
+        shouldDisableClock,
         shouldDisableTime,
         disableFuture,
         disablePast,
@@ -172,11 +179,13 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.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,
   /**
@@ -286,6 +295,14 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
+  /**
+   * Disable specific clock time.
+   * @param {number} clockValue The value to check.
+   * @param {TimeView} view The clock type of the timeValue.
+   * @returns {boolean} If `true` the time will be disabled.
+   * @deprecated Consider using `shouldDisableTime`.
+   */
+  shouldDisableClock: PropTypes.func,
   /**
    * Disable specific date. @DateIOType
    * @template TDate
@@ -296,11 +313,21 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
   shouldDisableDate: PropTypes.func,
   /**
    * Disable specific time.
-   * @param {number} timeValue The value to check.
+   * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: PropTypes.func,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overrideable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * Defines the space between immediate children.
    * @default 0

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.d.ts

@@ -3,6 +3,7 @@ import { SlotComponentProps } from '@mui/base/utils';
 import Typography from '@mui/material/Typography';
 import Stack, { StackProps } from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
+import { UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { UseDateTimeRangeFieldDefaultizedProps, UseDateTimeRangeFieldProps } from '../internal/models/dateTimeRange';
 import { RangePosition } from '../internal/models/range';
 export interface UseMultiInputDateTimeRangeFieldParams<TDate, TChildProps extends {}> {
@@ -19,13 +20,25 @@ export interface MultiInputDateTimeRangeFieldProps<TDate> extends UseMultiInputD
     /**
      * Overrideable components.
      * @default {}
+     * @deprecated Please use `slots`.
      */
     components?: MultiInputDateTimeRangeFieldSlotsComponent;
     /**
      * The props used for each component slot.
      * @default {}
+     * @deprecated Please use `slotProps`.
      */
     componentsProps?: MultiInputDateTimeRangeFieldSlotsComponentsProps<TDate>;
+    /**
+     * Overrideable component slots.
+     * @default {}
+     */
+    slots?: UncapitalizeObjectKeys<MultiInputDateTimeRangeFieldSlotsComponent>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: MultiInputDateTimeRangeFieldSlotsComponentsProps<TDate>;
 }
 export type MultiInputDateTimeRangeFieldOwnerState<TDate> = MultiInputDateTimeRangeFieldProps<TDate>;
 export interface MultiInputDateTimeRangeFieldSlotsComponent {

package/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -10,6 +10,7 @@ import MuiTextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
+import { uncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { useMultiInputTimeRangeField } from '../internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,12 +35,14 @@ const MultiInputTimeRangeFieldSeparator = styled(props => {
   overridesResolver: (props, styles) => styles.separator
 })({});
 const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInputTimeRangeField(inProps, ref) {
-  var _components$Root, _components$TextField, _components$Separator;
+  var _slots$root, _slots$textField, _slots$separator;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiMultiInputTimeRangeField'
   });
   const {
+      slots: innerSlots,
+      slotProps: innerslotProps,
       components,
       componentsProps,
       value,
@@ -52,6 +55,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       minTime,
       maxTime,
       minutesStep,
+      shouldDisableClock,
       shouldDisableTime,
       disableFuture,
       disablePast,
@@ -59,36 +63,38 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       onSelectedSectionsChange
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
+  const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
+  const slotProps = innerslotProps != null ? innerslotProps : componentsProps;
   const ownerState = themeProps;
-  const Root = (_components$Root = components == null ? void 0 : components.Root) != null ? _components$Root : MultiInputTimeRangeFieldRoot;
+  const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputTimeRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
-    externalSlotProps: componentsProps == null ? void 0 : componentsProps.root,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.root,
     externalForwardedProps: other,
     additionalProps: {
       ref
     },
     ownerState
   });
-  const TextField = (_components$TextField = components == null ? void 0 : components.TextField) != null ? _components$TextField : MuiTextField;
+  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : MuiTextField;
   const startTextFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: componentsProps == null ? void 0 : componentsProps.textField,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
   });
   const endTextFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: componentsProps == null ? void 0 : componentsProps.textField,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
     ownerState: _extends({}, ownerState, {
       position: 'end'
     })
   });
-  const Separator = (_components$Separator = components == null ? void 0 : components.Separator) != null ? _components$Separator : MultiInputTimeRangeFieldSeparator;
+  const Separator = (_slots$separator = slots == null ? void 0 : slots.separator) != null ? _slots$separator : MultiInputTimeRangeFieldSeparator;
   const separatorProps = useSlotProps({
     elementType: Separator,
-    externalSlotProps: componentsProps == null ? void 0 : componentsProps.separator,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.separator,
     ownerState
   });
   const _useMultiInputTimeRan = useMultiInputTimeRangeField({
@@ -103,6 +109,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         minTime,
         maxTime,
         minutesStep,
+        shouldDisableClock,
         shouldDisableTime,
         disableFuture,
         disablePast,
@@ -162,11 +169,13 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.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,
   /**
@@ -260,13 +269,31 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
+  /**
+   * Disable specific clock time.
+   * @param {number} clockValue The value to check.
+   * @param {TimeView} view The clock type of the timeValue.
+   * @returns {boolean} If `true` the time will be disabled.
+   * @deprecated Consider using `shouldDisableTime`.
+   */
+  shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
-   * @param {number} timeValue The value to check.
+   * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: PropTypes.func,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overrideable slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * Defines the space between immediate children.
    * @default 0

package/MultiInputTimeRangeField/MultiInputTimeRangeField.types.d.ts

@@ -3,6 +3,7 @@ import { SlotComponentProps } from '@mui/base/utils';
 import Typography from '@mui/material/Typography';
 import Stack, { StackProps } from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
+import { UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { UseTimeRangeFieldDefaultizedProps, UseTimeRangeFieldProps } from '../internal/models/timeRange';
 import { RangePosition } from '../internal/models/range';
 export interface UseMultiInputTimeRangeFieldParams<TDate, TChildProps extends {}> {
@@ -19,13 +20,25 @@ export interface MultiInputTimeRangeFieldProps<TDate> extends UseMultiInputTimeR
     /**
      * Overrideable components.
      * @default {}
+     * @deprecated Please use `slots`.
      */
     components?: MultiInputTimeRangeFieldSlotsComponent;
     /**
      * The props used for each component slot.
      * @default {}
+     * @deprecated Please use `slotProps`.
      */
     componentsProps?: MultiInputTimeRangeFieldSlotsComponentsProps<TDate>;
+    /**
+     * Overrideable slots.
+     * @default {}
+     */
+    slots?: UncapitalizeObjectKeys<MultiInputTimeRangeFieldSlotsComponent>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: MultiInputTimeRangeFieldSlotsComponentsProps<TDate>;
 }
 export type MultiInputTimeRangeFieldOwnerState<TDate> = MultiInputTimeRangeFieldProps<TDate>;
 export interface MultiInputTimeRangeFieldSlotsComponent {

package/NextDateRangePicker/NextDateRangePicker.js

@@ -60,11 +60,13 @@ process.env.NODE_ENV !== "production" ? NextDateRangePicker.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,
   /**
@@ -250,6 +252,16 @@ process.env.NODE_ENV !== "production" ? NextDateRangePicker.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/NextDateRangePicker/NextDateRangePicker.types.d.ts

@@ -1,3 +1,4 @@
+import { UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { DesktopNextDateRangePickerProps, DesktopNextDateRangePickerSlotsComponent, DesktopNextDateRangePickerSlotsComponentsProps } from '../DesktopNextDateRangePicker';
 import { MobileNextDateRangePickerProps, MobileNextDateRangePickerSlotsComponent, MobileNextDateRangePickerSlotsComponentsProps } from '../MobileNextDateRangePicker';
 export interface NextDateRangePickerSlotsComponents<TDate> extends DesktopNextDateRangePickerSlotsComponent<TDate>, MobileNextDateRangePickerSlotsComponent<TDate> {
@@ -14,11 +15,23 @@ export interface NextDateRangePickerProps<TDate> extends DesktopNextDateRangePic
     /**
      * Overrideable components.
      * @default {}
+     * @deprecated Please use `slots`.
      */
     components?: NextDateRangePickerSlotsComponents<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
+     * @deprecated Please use `slotProps`.
      */
     componentsProps?: NextDateRangePickerSlotsComponentsProps<TDate>;
+    /**
+     * Overrideable component slots.
+     * @default {}
+     */
+    slots?: UncapitalizeObjectKeys<NextDateRangePickerSlotsComponents<TDate>>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: NextDateRangePickerSlotsComponentsProps<TDate>;
 }

package/NextDateRangePicker/shared.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { LocalizedComponent } from '@mui/x-date-pickers';
-import { DefaultizedProps, BaseDateValidationProps, BaseNextPickerInputProps, PickerViewRendererLookup } from '@mui/x-date-pickers/internals';
+import { DefaultizedProps, BaseDateValidationProps, BaseNextPickerInputProps, PickerViewRendererLookup, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { DateRangeValidationError } from '../internal/hooks/validation/useDateRangeValidation';
 import { DateRange } from '../internal/models';
 import { DateRangeCalendarSlotsComponent, DateRangeCalendarSlotsComponentsProps, ExportedDateRangeCalendarProps } from '../DateRangeCalendar';
@@ -20,13 +20,25 @@ export interface BaseNextDateRangePickerProps<TDate> extends Omit<BaseNextPicker
     /**
      * Overrideable components.
      * @default {}
+     * @deprecated Please use `slots`.
      */
     components?: BaseNextDateRangePickerSlotsComponent<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
+     * @deprecated Please use `slotProps`.
      */
     componentsProps?: BaseNextDateRangePickerSlotsComponentsProps<TDate>;
+    /**
+     * Overrideable component slots.
+     * @default {}
+     */
+    slots?: UncapitalizeObjectKeys<BaseNextDateRangePickerSlotsComponent<TDate>>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: BaseNextDateRangePickerSlotsComponentsProps<TDate>;
     /**
      * Define custom view renderers for each section.
      * If `null`, the section will only have field editing.
@@ -35,5 +47,5 @@ export interface BaseNextDateRangePickerProps<TDate> extends Omit<BaseNextPicker
     viewRenderers?: Partial<PickerViewRendererLookup<DateRange<TDate>, 'day', DateRangeViewRendererProps<TDate, 'day'>, {}>>;
 }
 type UseNextDateRangePickerDefaultizedProps<TDate, Props extends BaseNextDateRangePickerProps<TDate>> = LocalizedComponent<TDate, DefaultizedProps<Props, keyof BaseDateValidationProps<TDate>>>;
-export declare function useNextDateRangePickerDefaultizedProps<TDate, Props extends BaseNextDateRangePickerProps<TDate>>(props: Props, name: string): UseNextDateRangePickerDefaultizedProps<TDate, Props>;
+export declare function useNextDateRangePickerDefaultizedProps<TDate, Props extends BaseNextDateRangePickerProps<TDate>>(props: Props, name: string): UseNextDateRangePickerDefaultizedProps<TDate, Omit<Props, 'components' | 'componentsProps'>>;
 export {};

package/NextDateRangePicker/shared.js

@@ -1,16 +1,23 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["components", "componentsProps"];
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { useDefaultDates, useUtils, applyDefaultDate } from '@mui/x-date-pickers/internals';
+import { useDefaultDates, useUtils, applyDefaultDate, uncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { DateRangePickerToolbar } from '../DateRangePicker/DateRangePickerToolbar';
 export function useNextDateRangePickerDefaultizedProps(props, name) {
-  var _themeProps$disableFu, _themeProps$disablePa;
+  var _themeProps$disableFu, _themeProps$disablePa, _themeProps$slots, _themeProps$slotProps;
   const utils = useUtils();
   const defaultDates = useDefaultDates();
-  const themeProps = useThemeProps({
-    props,
-    name
-  });
+  const _useThemeProps = useThemeProps({
+      props,
+      name
+    }),
+    {
+      components,
+      componentsProps
+    } = _useThemeProps,
+    themeProps = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
   const localeText = React.useMemo(() => {
     var _themeProps$localeTex;
     if (((_themeProps$localeTex = themeProps.localeText) == null ? void 0 : _themeProps$localeTex.toolbarTitle) == null) {
@@ -26,8 +33,9 @@ export function useNextDateRangePickerDefaultizedProps(props, name) {
     disablePast: (_themeProps$disablePa = themeProps.disablePast) != null ? _themeProps$disablePa : false,
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
-    components: _extends({
-      Toolbar: DateRangePickerToolbar
-    }, themeProps.components)
+    slots: _extends({
+      toolbar: DateRangePickerToolbar
+    }, (_themeProps$slots = themeProps.slots) != null ? _themeProps$slots : uncapitalizeObjectKeys(components)),
+    slotProps: (_themeProps$slotProps = themeProps.slotProps) != null ? _themeProps$slotProps : componentsProps
   });
 }