@mui/x-date-pickers-pro 8.0.0-alpha.0 → 8.0.0-alpha.2

package/DateRangeCalendar/DateRangeCalendar.js

@@ -169,6 +169,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     name: 'DateRangeCalendar',
     timezone: timezoneProp,
     value: valueProp,
+    referenceDate,
     defaultValue,
     onChange,
     valueManager: rangeValueManager
@@ -210,7 +211,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       range: value,
       rangePosition,
       allowRangeFlip,
-      shouldMergeDateAndTime: true
+      shouldMergeDateAndTime: true,
+      referenceDate
     });
     const isNextSectionAvailable = availableRangePositions.includes(nextSelection);
     if (isNextSectionAvailable) {

package/DateRangePicker/DateRangePicker.types.d.ts

@@ -1,7 +1,7 @@
 import { BaseSingleInputFieldProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { DesktopDateRangePickerProps, DesktopDateRangePickerSlots, DesktopDateRangePickerSlotProps } from '../DesktopDateRangePicker';
 import { MobileDateRangePickerProps, MobileDateRangePickerSlots, MobileDateRangePickerSlotProps } from '../MobileDateRangePicker';
-import { DateRangeValidationError, RangeFieldSection } from '../models';
+import { DateRangeValidationError } from '../models';
 import { ValidateDateRangeProps } from '../validation';
 export interface DateRangePickerSlots extends DesktopDateRangePickerSlots, MobileDateRangePickerSlots {
 }
@@ -28,4 +28,4 @@ export interface DateRangePickerProps<TEnableAccessibleFieldDOMStructure extends
 /**
  * Props the field can receive when used inside a date range picker (<DateRangePicker />, <DesktopDateRangePicker /> or <MobileDateRangePicker /> component).
  */
-export type DateRangePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateRangeProps & BaseSingleInputFieldProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>;
+export type DateRangePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateRangeProps & BaseSingleInputFieldProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>;

package/DateRangePicker/DateRangePickerToolbar.js

@@ -99,12 +99,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -118,12 +112,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
-  /**
-   * If `true`, the component is read-only.
-   * When read-only, the value cannot be changed but the user can interact with the interface.
-   * @default false
-   */
-  readOnly: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/DateRangePicker/shared.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { LocalizedComponent } from '@mui/x-date-pickers/locales';
-import { BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { BasePickerInputProps, PickerViewRendererLookup, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { DateRangeValidationError } from '../models';
 import { DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCalendarProps } from '../DateRangeCalendar';
 import { DateRangePickerToolbarProps, ExportedDateRangePickerToolbarProps } from './DateRangePickerToolbar';
 import { DateRangeViewRendererProps } from '../dateRangeViewRenderers';
+import { ValidateDateRangePropsToDefault } from '../validation/validateDateRange';
 export interface BaseDateRangePickerSlots extends DateRangeCalendarSlots {
     /**
      * Custom component for the toolbar rendered above the views.
@@ -34,6 +35,6 @@ export interface BaseDateRangePickerProps extends Omit<BasePickerInputProps<Pick
      */
     viewRenderers?: Partial<PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>, {}>>;
 }
-type UseDateRangePickerDefaultizedProps<Props extends BaseDateRangePickerProps> = LocalizedComponent<DefaultizedProps<Props, keyof BaseDateValidationProps>>;
+type UseDateRangePickerDefaultizedProps<Props extends BaseDateRangePickerProps> = LocalizedComponent<DefaultizedProps<Props, ValidateDateRangePropsToDefault>>;
 export declare function useDateRangePickerDefaultizedProps<Props extends BaseDateRangePickerProps>(props: Props, name: string): UseDateRangePickerDefaultizedProps<Props>;
 export {};

package/DateTimeRangePicker/DateTimeRangePicker.types.d.ts

@@ -1,7 +1,7 @@
 import { BaseSingleInputFieldProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { DesktopDateTimeRangePickerProps, DesktopDateTimeRangePickerSlots, DesktopDateTimeRangePickerSlotProps } from '../DesktopDateTimeRangePicker';
 import { MobileDateTimeRangePickerProps, MobileDateTimeRangePickerSlots, MobileDateTimeRangePickerSlotProps } from '../MobileDateTimeRangePicker';
-import { DateTimeRangeValidationError, RangeFieldSection } from '../models';
+import { DateTimeRangeValidationError } from '../models';
 import type { ValidateDateTimeRangeProps } from '../validation';
 export interface DateTimeRangePickerSlots extends DesktopDateTimeRangePickerSlots, MobileDateTimeRangePickerSlots {
 }
@@ -28,4 +28,4 @@ export interface DateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure ext
 /**
  * Props the field can receive when used inside a date time range picker (<DateTimeRangePicker />, <DesktopDateTimeRangePicker /> or <MobileDateTimeRangePicker /> component).
  */
-export type DateTimeRangePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateTimeRangeProps & BaseSingleInputFieldProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>;
+export type DateTimeRangePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateTimeRangeProps & BaseSingleInputFieldProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>;

package/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -7,7 +7,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons';
-import { isDatePickerView } from '@mui/x-date-pickers/internals';
+import { isDatePickerView, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
@@ -25,10 +25,7 @@ const tabToView = tab => {
   }
   return 'hours';
 };
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     tabButton: ['tabButton'],
@@ -79,10 +76,14 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     rangePosition,
     onRangePositionChange,
     className,
+    classes: classesProp,
     sx
   } = props;
   const translations = usePickerTranslations();
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
   const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';
   const isNextHidden = value === 'end-time';
@@ -121,7 +122,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     return null;
   }
   return /*#__PURE__*/_jsxs(DateTimeRangePickerTabsRoot, {
-    ownerState: props,
+    ownerState: ownerState,
     className: clsx(classes.root, className),
     sx: sx,
     children: [!isPreviousHidden ? /*#__PURE__*/_jsx(IconButton, {

package/DateTimeRangePicker/DateTimeRangePickerToolbar.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { BaseToolbarProps, ExportedBaseToolbarProps, DateOrTimeViewWithMeridiem, WrapperVariant, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { BaseToolbarProps, ExportedBaseToolbarProps, DateOrTimeViewWithMeridiem, PickerVariant, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
 import { DateTimeRangePickerToolbarClasses } from './dateTimeRangePickerToolbarClasses';
 type DateTimeRangeViews = Exclude<DateOrTimeViewWithMeridiem, 'year' | 'month'>;
 export interface DateTimeRangePickerToolbarProps extends BaseToolbarProps<PickerRangeValue, DateTimeRangeViews>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'>, ExportedDateTimeRangePickerToolbarProps {
     ampm?: boolean;
-    toolbarVariant?: WrapperVariant;
+    toolbarVariant?: PickerVariant;
 }
 export interface ExportedDateTimeRangePickerToolbarProps extends ExportedBaseToolbarProps {
     /**

package/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -2,14 +2,14 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "onViewChange", "toolbarVariant", "onChange", "classes", "view", "isLandscape", "views", "ampm", "disabled", "readOnly", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
+const _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "onViewChange", "toolbarVariant", "onChange", "classes", "view", "isLandscape", "views", "ampm", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { useUtils } from '@mui/x-date-pickers/internals';
-import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
 import { getDateTimeRangePickerToolbarUtilityClass } from "./dateTimeRangePickerToolbarClasses.js";
 import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
@@ -86,8 +86,6 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
       isLandscape,
       views,
       ampm,
-      disabled,
-      readOnly,
       hidden,
       toolbarFormat,
       toolbarPlaceholder,
@@ -95,6 +93,10 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
       sx
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    disabled,
+    readOnly
+  } = usePickerContext();
   const commonToolbarProps = {
     isLandscape,
     views,
@@ -183,12 +185,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -204,12 +200,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
-  /**
-   * If `true`, the component is read-only.
-   * When read-only, the value cannot be changed but the user can interact with the interface.
-   * @default false
-   */
-  readOnly: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/DateTimeRangePicker/shared.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { LocalizedComponent } from '@mui/x-date-pickers/locales';
-import { BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, BaseClockProps, DesktopOnlyTimePickerProps, TimeViewWithMeridiem, UseViewsOptions, DateTimeValidationProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { BasePickerInputProps, PickerViewRendererLookup, BaseClockProps, DesktopOnlyTimePickerProps, TimeViewWithMeridiem, UseViewsOptions, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { TimeViewRendererProps } from '@mui/x-date-pickers/timeViewRenderers';
 import { DigitalClockSlots, DigitalClockSlotProps } from '@mui/x-date-pickers/DigitalClock';
 import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from '@mui/x-date-pickers/MultiSectionDigitalClock';
@@ -11,6 +11,7 @@ import { DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCa
 import { DateTimeRangePickerToolbarProps, ExportedDateTimeRangePickerToolbarProps } from './DateTimeRangePickerToolbar';
 import { DateRangeViewRendererProps } from '../dateRangeViewRenderers';
 import { DateTimeRangePickerTabsProps, ExportedDateTimeRangePickerTabsProps } from './DateTimeRangePickerTabs';
+import { ExportedValidateDateTimeRangeProps, ValidateDateTimeRangePropsToDefault } from '../validation/validateDateTimeRange';
 export interface BaseDateTimeRangePickerSlots extends DateRangeCalendarSlots, DigitalClockSlots, MultiSectionDigitalClockSlots {
     /**
      * Tabs enabling toggling between date and time pickers.
@@ -36,7 +37,7 @@ export interface BaseDateTimeRangePickerSlotProps extends DateRangeCalendarSlotP
 export type DateTimeRangePickerRenderers<TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<PickerRangeValue, TView, Omit<DateRangeViewRendererProps<'day'>, 'view' | 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TimeViewWithMeridiem>>, 'view' | 'slots' | 'slotProps'> & {
     view: TView;
 }, TAdditionalProps>;
-export interface BaseDateTimeRangePickerProps extends Omit<BasePickerInputProps<PickerRangeValue, DateTimeRangePickerView, DateTimeRangeValidationError>, 'orientation' | 'views' | 'openTo'>, ExportedDateRangeCalendarProps, BaseDateValidationProps, DesktopOnlyTimePickerProps, Partial<Pick<UseViewsOptions<PickerRangeValue, DateTimeRangePickerViewExternal>, 'openTo' | 'views'>>, DateTimeValidationProps {
+export interface BaseDateTimeRangePickerProps extends Omit<BasePickerInputProps<PickerRangeValue, DateTimeRangePickerView, DateTimeRangeValidationError>, 'orientation' | 'views' | 'openTo'>, ExportedDateRangeCalendarProps, ExportedValidateDateTimeRangeProps, DesktopOnlyTimePickerProps, Partial<Pick<UseViewsOptions<PickerRangeValue, DateTimeRangePickerViewExternal>, 'openTo' | 'views'>> {
     /**
      * Overridable component slots.
      * @default {}
@@ -54,7 +55,7 @@ export interface BaseDateTimeRangePickerProps extends Omit<BasePickerInputProps<
      */
     viewRenderers?: Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>;
 }
-type UseDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | keyof BaseDateValidationProps>, 'views'>> & {
+type UseDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | ValidateDateTimeRangePropsToDefault>, 'views'>> & {
     shouldRenderTimeInASingleColumn: boolean;
     views: readonly DateTimeRangePickerView[];
 };

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
+const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,17 +12,14 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { convertFieldResponseIntoMuiTextFieldProps, useFieldOwnerState } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useMultiInputDateRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const multiInputDateRangeFieldClasses = generateUtilityClasses('MuiMultiInputDateRangeField', ['root', 'separator']);
 export const getMultiInputDateRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputDateRangeField', slot);
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     separator: ['separator']
@@ -70,11 +67,12 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       slotProps,
       unstableStartFieldRef,
       unstableEndFieldRef,
-      className
+      className,
+      classes: classesProp
     } = forwardedProps,
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
-  const ownerState = themeProps;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = useFieldOwnerState(internalProps);
+  const classes = useUtilityClasses(classesProp);
   const Root = slots?.root ?? MultiInputDateRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
@@ -258,10 +256,10 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    */
   shouldDisableDate: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/MultiInputDateRangeField/MultiInputDateRangeField.types.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import Typography from '@mui/material/Typography';
-import Stack, { StackProps } from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition, UseDateRangeFieldProps } from '../models';
 export type UseMultiInputDateRangeFieldParams<TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}> = UseMultiInputRangeFieldParams<UseMultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>, TTextFieldSlotProps>;
@@ -24,7 +26,7 @@ export interface MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructur
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MultiInputDateRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: MultiInputDateRangeFieldSlotProps;
 }
 export interface MultiInputDateRangeFieldSlots {
     /**
@@ -35,7 +37,7 @@ export interface MultiInputDateRangeFieldSlots {
     /**
      * Form control with an input to render a date.
      * It is rendered twice: once for the start date and once for the end date.
-     * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+     * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
      */
     textField?: React.ElementType;
     /**
@@ -44,10 +46,10 @@ export interface MultiInputDateRangeFieldSlots {
      */
     separator?: React.ElementType;
 }
-export interface MultiInputDateRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> {
-    root?: SlotComponentProps<typeof Stack, {}, MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
-    textField?: SlotComponentProps<typeof TextField, {}, MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
+export interface MultiInputDateRangeFieldSlotProps {
+    root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState & {
         position: RangePosition;
     }>;
-    separator?: SlotComponentProps<typeof Typography, {}, MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
+    separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
 }

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
+const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,17 +12,14 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { convertFieldResponseIntoMuiTextFieldProps, useFieldOwnerState } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useMultiInputDateTimeRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const multiInputDateTimeRangeFieldClasses = generateUtilityClasses('MuiMultiInputDateTimeRangeField', ['root', 'separator']);
 export const getMultiInputDateTimeRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputDateTimeRangeField', slot);
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     separator: ['separator']
@@ -70,11 +67,12 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       slotProps,
       unstableStartFieldRef,
       unstableEndFieldRef,
-      className
+      className,
+      classes: classesProp
     } = forwardedProps,
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
-  const ownerState = themeProps;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = useFieldOwnerState(themeProps);
+  const classes = useUtilityClasses(classesProp);
   const Root = slots?.root ?? MultiInputDateTimeRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
@@ -298,10 +296,10 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    */
   shouldDisableTime: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import Typography from '@mui/material/Typography';
-import Stack, { StackProps } from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
 import { UseDateTimeRangeFieldProps } from '../internals/models/dateTimeRange';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models';
@@ -25,7 +27,7 @@ export interface MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStru
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MultiInputDateTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: MultiInputDateTimeRangeFieldSlotProps;
 }
 export interface MultiInputDateTimeRangeFieldSlots {
     /**
@@ -45,10 +47,10 @@ export interface MultiInputDateTimeRangeFieldSlots {
      */
     separator?: React.ElementType;
 }
-export interface MultiInputDateTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> {
-    root?: SlotComponentProps<typeof Stack, {}, MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
-    textField?: SlotComponentProps<typeof TextField, {}, MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
+export interface MultiInputDateTimeRangeFieldSlotProps {
+    root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState & {
         position: RangePosition;
     }>;
-    separator?: SlotComponentProps<typeof Typography, {}, MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
+    separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
 }

package/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
+const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { clsx } from 'clsx';
@@ -12,17 +12,14 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { convertFieldResponseIntoMuiTextFieldProps, useFieldOwnerState } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useMultiInputTimeRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const multiInputTimeRangeFieldClasses = generateUtilityClasses('MuiMultiInputTimeRangeField', ['root', 'separator']);
 export const getMultiInputTimeRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputTimeRangeField', slot);
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     separator: ['separator']
@@ -70,11 +67,12 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       slotProps,
       unstableStartFieldRef,
       unstableEndFieldRef,
-      className
+      className,
+      classes: classesProp
     } = forwardedProps,
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
-  const ownerState = themeProps;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = useFieldOwnerState(themeProps);
+  const classes = useUtilityClasses(classesProp);
   const Root = slots?.root ?? MultiInputTimeRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
@@ -270,10 +268,10 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    */
   shouldDisableTime: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/MultiInputTimeRangeField/MultiInputTimeRangeField.types.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import Typography from '@mui/material/Typography';
-import Stack, { StackProps } from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
 import { UseTimeRangeFieldProps } from '../internals/models/timeRange';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models';
@@ -25,7 +27,7 @@ export interface MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructur
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MultiInputTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: MultiInputTimeRangeFieldSlotProps;
 }
 export interface MultiInputTimeRangeFieldSlots {
     /**
@@ -45,10 +47,10 @@ export interface MultiInputTimeRangeFieldSlots {
      */
     separator?: React.ElementType;
 }
-export interface MultiInputTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> {
-    root?: SlotComponentProps<typeof Stack, {}, MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
-    textField?: SlotComponentProps<typeof TextField, {}, MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
+export interface MultiInputTimeRangeFieldSlotProps {
+    root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState & {
         position: RangePosition;
     }>;
-    separator?: SlotComponentProps<typeof Typography, {}, MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
+    separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
 }

package/README.md

@@ -20,13 +20,16 @@ The pickers currently support the following date libraries:
 - [Moment.js](https://momentjs.com/)
 
 ```bash
-// date-fns
+# date-fns
 npm install date-fns
-// or dayjs
+
+# or dayjs
 npm install dayjs
-// or luxon
+
+# or luxon
 npm install luxon
-// or moment
+
+# or moment
 npm install moment
 ```
 
@@ -35,8 +38,8 @@ This component has the following peer dependencies that you need to install as w
 ```json
 "peerDependencies": {
   "@mui/material": "^5.15.14 || ^6.0.0",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```