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

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { BasePickerProps, UsePickerParams, ExportedBaseToolbarProps, StaticOnlyPickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
-import { RangeFieldSection } from '../../../models';
 import { UseRangePositionProps } from '../useRangePosition';
 export interface UseStaticRangePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<PickerRangeValue, TView> {
 }
@@ -22,7 +21,7 @@ export interface UseStaticRangePickerProps<TView extends DateOrTimeViewWithMerid
      */
     slotProps?: UseStaticRangePickerSlotProps<TView>;
 }
-export interface UseStaticRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerRangeValue, TView, RangeFieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
+export interface UseStaticRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerRangeValue, TView, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;
     /**
      * Ref to pass to the root element

package/internals/models/dateTimeRange.d.ts

@@ -1,8 +1,8 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseFieldInternalProps, DateOrTimeViewWithMeridiem, AmPmProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { DateTimeRangeValidationError, RangeFieldSection, RangeFieldSeparatorProps } from '../../models';
+import { DateTimeRangeValidationError, RangeFieldSeparatorProps } from '../../models';
 import { ExportedValidateDateTimeRangeProps } from '../../validation/validateDateTimeRange';
-export interface UseDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, ExportedValidateDateTimeRangeProps, AmPmProps {
+export interface UseDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, ExportedValidateDateTimeRangeProps, AmPmProps {
 }
 export type DateTimeRangePickerView = Exclude<DateOrTimeViewWithMeridiem, 'month' | 'year'>;
 export type DateTimeRangePickerViewExternal = Exclude<DateTimeRangePickerView, 'meridiem'>;

package/internals/models/fields.d.ts

@@ -1,15 +1,15 @@
 import { SxProps } from '@mui/material/styles';
 import { SlotComponentProps } from '@mui/utils';
 import { MakeRequired } from '@mui/x-internals/types';
-import { UseFieldInternalProps } from '@mui/x-date-pickers/internals';
-import { FieldSection } from '@mui/x-date-pickers/models';
+import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import type { MultiInputFieldRefs, MultiInputFieldSlotRootProps, RangeFieldSeparatorProps, RangePosition } from '../../models';
 /**
  * Props the multi input field can receive when used inside a picker.
  * Only contains what the MUI components are passing to the field, not what users can pass using the `props.slotProps.field`.
  */
-export interface BaseMultiInputFieldProps<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends MakeRequired<Pick<UseFieldInternalProps<TValue, TSection, TEnableAccessibleFieldDOMStructure, TError>, 'readOnly' | 'disabled' | 'format' | 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange' | 'timezone' | 'autoFocus' | 'value' | 'onChange'>, 'format' | 'value' | 'onChange' | 'timezone'>, RangeFieldSeparatorProps, MultiInputFieldRefs {
+export interface BaseMultiInputFieldProps<TEnableAccessibleFieldDOMStructure extends boolean, TError> extends MakeRequired<Pick<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TError>, 'readOnly' | 'disabled' | 'format' | 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange' | 'timezone' | 'autoFocus' | 'value' | 'onChange'>, 'format' | 'value' | 'onChange' | 'timezone'>, RangeFieldSeparatorProps, MultiInputFieldRefs {
     className: string | undefined;
     sx: SxProps<any> | undefined;
     slots?: {
@@ -18,9 +18,9 @@ export interface BaseMultiInputFieldProps<TValue, TSection extends FieldSection,
         textField?: React.ElementType;
     };
     slotProps?: {
-        root?: SlotComponentProps<React.ElementType<MultiInputFieldSlotRootProps>, {}, Record<string, any>>;
-        textField?: SlotComponentProps<typeof PickersTextField, {}, {
+        root?: SlotComponentProps<React.ElementType<MultiInputFieldSlotRootProps>, {}, FieldOwnerState>;
+        textField?: SlotComponentProps<typeof PickersTextField, {}, FieldOwnerState & {
             position?: RangePosition;
-        } & Record<string, any>>;
+        }>;
     };
 }

package/internals/models/timeRange.d.ts

@@ -1,6 +1,6 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseFieldInternalProps, AmPmProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { TimeRangeValidationError, RangeFieldSection, RangeFieldSeparatorProps } from '../../models';
+import { TimeRangeValidationError, RangeFieldSeparatorProps } from '../../models';
 import type { ExportedValidateTimeRangeProps } from '../../validation/validateTimeRange';
-export interface UseTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, ExportedValidateTimeRangeProps, AmPmProps {
+export interface UseTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, ExportedValidateTimeRangeProps, AmPmProps {
 }

package/internals/utils/date-fields-utils.d.ts

@@ -1,11 +1,11 @@
-import { RangeFieldSection } from '../../models';
-export declare const splitDateRangeSections: (sections: RangeFieldSection[]) => {
-    startDate: RangeFieldSection[];
-    endDate: RangeFieldSection[];
+import { FieldRangeSection } from '@mui/x-date-pickers/internals';
+export declare const splitDateRangeSections: (sections: FieldRangeSection[]) => {
+    startDate: FieldRangeSection[];
+    endDate: FieldRangeSection[];
 };
-export declare const removeLastSeparator: (dateSections: RangeFieldSection[]) => (RangeFieldSection | {
+export declare const removeLastSeparator: (dateSections: FieldRangeSection[]) => (FieldRangeSection | {
     separator: null;
-    dateName: import("../..").RangePosition;
+    dateName: import("@mui/x-date-pickers/internals").RangePosition;
     value: string;
     format: string;
     maxLength: number | null;

package/internals/utils/date-range-manager.d.ts

@@ -13,11 +13,12 @@ interface CalculateRangeChangeOptions {
      */
     allowRangeFlip?: boolean;
     shouldMergeDateAndTime?: boolean;
+    referenceDate?: PickerValidDate;
 }
 interface CalculateRangeChangeResponse {
     nextSelection: RangePosition;
     newRange: PickerRangeValue;
 }
-export declare function calculateRangeChange({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip, shouldMergeDateAndTime, }: CalculateRangeChangeOptions): CalculateRangeChangeResponse;
+export declare function calculateRangeChange({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip, shouldMergeDateAndTime, referenceDate, }: CalculateRangeChangeOptions): CalculateRangeChangeResponse;
 export declare function calculateRangePreview(options: CalculateRangeChangeOptions): PickerRangeValue;
 export {};

package/internals/utils/date-range-manager.js

@@ -5,7 +5,8 @@ export function calculateRangeChange({
   newDate: selectedDate,
   rangePosition,
   allowRangeFlip = false,
-  shouldMergeDateAndTime = false
+  shouldMergeDateAndTime = false,
+  referenceDate
 }) {
   const [start, end] = range;
   if (shouldMergeDateAndTime && selectedDate) {
@@ -17,29 +18,30 @@ export function calculateRangeChange({
       selectedDate = mergeDateAndTime(utils, selectedDate, end);
     }
   }
+  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? mergeDateAndTime(utils, selectedDate, referenceDate) : selectedDate;
   if (rangePosition === 'start') {
     const truthyResult = allowRangeFlip ? {
       nextSelection: 'start',
-      newRange: [end, selectedDate]
+      newRange: [end, newSelectedDate]
     } : {
       nextSelection: 'end',
-      newRange: [selectedDate, null]
+      newRange: [newSelectedDate, null]
     };
-    return Boolean(end) && utils.isAfter(selectedDate, end) ? truthyResult : {
+    return Boolean(end) && utils.isAfter(newSelectedDate, end) ? truthyResult : {
       nextSelection: 'end',
-      newRange: [selectedDate, end]
+      newRange: [newSelectedDate, end]
     };
   }
   const truthyResult = allowRangeFlip ? {
     nextSelection: 'end',
-    newRange: [selectedDate, start]
+    newRange: [newSelectedDate, start]
   } : {
     nextSelection: 'end',
-    newRange: [selectedDate, null]
+    newRange: [newSelectedDate, null]
   };
-  return Boolean(start) && utils.isBeforeDay(selectedDate, start) ? truthyResult : {
+  return Boolean(start) && utils.isBeforeDay(newSelectedDate, start) ? truthyResult : {
     nextSelection: 'start',
-    newRange: [start, selectedDate]
+    newRange: [start, newSelectedDate]
   };
 }
 export function calculateRangePreview(options) {

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMTUzODgwMDAwMA==";
+  const releaseInfo = "MTczMjgzNDgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/internals/utils/valueManagers.d.ts

@@ -1,7 +1,8 @@
 import { PickerValueManager, FieldValueManager, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import type { DateRangeValidationError, DateTimeRangeValidationError, TimeRangeValidationError, RangeFieldSection } from '../../models';
-export type RangePickerValueManager<TValue = [any, any], TError extends DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any> = PickerValueManager<TValue, TError>;
+import type { DateRangeValidationError, DateTimeRangeValidationError, TimeRangeValidationError } from '../../models';
+type RangePickerValueManager<TError extends DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any> = PickerValueManager<PickerRangeValue, TError>;
 export declare const rangeValueManager: RangePickerValueManager;
 export declare const getRangeFieldValueManager: ({ dateSeparator, }: {
     dateSeparator: string | undefined;
-}) => FieldValueManager<PickerRangeValue, RangeFieldSection>;
+}) => FieldValueManager<PickerRangeValue>;
+export {};

package/models/dateRange.d.ts

@@ -1,7 +1,7 @@
 import { MakeOptional } from '@mui/x-internals/types';
-import { UseFieldInternalProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { RangeFieldSection, RangeFieldSeparatorProps } from './fields';
+import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { RangeFieldSeparatorProps } from './fields';
 import { DateRangeValidationError } from './validation';
 import type { ExportedValidateDateRangeProps } from '../validation/validateDateRange';
-export interface UseDateRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, ExportedValidateDateRangeProps {
+export interface UseDateRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, ExportedValidateDateRangeProps {
 }

package/models/fields.d.ts

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import { UseFieldResponse, FormProps } from '@mui/x-date-pickers/internals';
-import { FieldRef, FieldSection, PickerFieldSlotProps } from '@mui/x-date-pickers/models';
+import { UseFieldResponse, FormProps, PickerValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { FieldRef, PickerFieldSlotProps } from '@mui/x-date-pickers/models';
 import { UseClearableFieldResponse } from '@mui/x-date-pickers/hooks';
-import { RangePosition } from './range';
-export interface RangeFieldSection extends FieldSection {
-    dateName: RangePosition;
-}
+export type { FieldRangeSection } from '@mui/x-date-pickers/internals';
 export type FieldType = 'single-input' | 'multi-input';
 /**
  * Props the `textField` slot of the multi input field can receive when used inside a picker.
@@ -30,8 +27,8 @@ export interface MultiInputFieldSlotRootProps {
     onBlur?: React.FocusEventHandler;
 }
 export interface MultiInputFieldRefs {
-    unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
-    unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+    unstableStartFieldRef?: React.Ref<FieldRef<PickerValue>>;
+    unstableEndFieldRef?: React.Ref<FieldRef<PickerValue>>;
 }
 export interface RangeFieldSeparatorProps {
     /**
@@ -43,7 +40,7 @@ export interface RangeFieldSeparatorProps {
 /**
  * Props the `slotProps.field` of a range picker component can receive.
  */
-export type PickerRangeFieldSlotProps<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean> = PickerFieldSlotProps<TValue, TSection, TEnableAccessibleFieldDOMStructure> & RangeFieldSeparatorProps;
+export type PickerRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> = PickerFieldSlotProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure> & RangeFieldSeparatorProps;
 /**
  * Props the text field receives when used with a multi input picker.
  * Only contains what the MUI components are passing to the text field, not what users can pass using the `props.slotProps.textField`.

package/models/index.d.ts

@@ -3,3 +3,4 @@ export * from './fields';
 export * from './range';
 export * from './validation';
 export * from './multiInputRangeFieldClasses';
+export type { RangePosition } from '@mui/x-date-pickers/internals';

package/models/index.js

@@ -2,4 +2,5 @@ export * from "./dateRange.js";
 export * from "./fields.js";
 export * from "./range.js";
 export * from "./validation.js";
-export * from "./multiInputRangeFieldClasses.js";
+export * from "./multiInputRangeFieldClasses.js";
+export {};

package/models/range.d.ts

@@ -1,4 +1,3 @@
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 export type DateRange<TDate extends PickerValidDate> = [TDate | null, TDate | null];
 export type NonEmptyDateRange = [PickerValidDate, PickerValidDate];
-export type RangePosition = 'start' | 'end';

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -10,7 +10,7 @@ import { useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { refType } from '@mui/utils';
 import { useClearableField } from '@mui/x-date-pickers/hooks';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { convertFieldResponseIntoMuiTextFieldProps, useFieldOwnerState } from '@mui/x-date-pickers/internals';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useSingleInputDateRangeField } from "./useSingleInputDateRangeField.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -36,7 +36,7 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
       inputProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const ownerState = themeProps;
+  const ownerState = useFieldOwnerState(themeProps);
   const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
@@ -262,10 +262,10 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.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, '')`.