@mui/x-date-pickers-pro 7.0.0-beta.2 → 7.0.0-beta.5

package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -1,27 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useDateTimeField as useDateTimeField } from '@mui/x-date-pickers/DateTimeField';
-import { applyDefaultDate, useDefaultDates, useLocalizationContext, useUtils, useValidation, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
+import { useLocalizationContext, useValidation, useControlledValueWithTimezone, useDefaultizedDateTimeField } from '@mui/x-date-pickers/internals';
 import { validateDateTimeRange } from '../../utils/validation/validateDateTimeRange';
 import { rangeValueManager } from '../../utils/valueManagers';
 import { excludeProps } from './shared';
-export const useDefaultizedDateTimeRangeFieldProps = props => {
-  var _props$ampm, _props$disablePast, _props$disableFuture, _props$format, _props$minDateTime, _props$maxDateTime, _props$minDateTime2, _props$maxDateTime2;
-  const utils = useUtils();
-  const defaultDates = useDefaultDates();
-  const ampm = (_props$ampm = props.ampm) != null ? _props$ampm : utils.is12HourCycleInCurrentLocale();
-  const defaultFormat = ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h;
-  return _extends({}, props, {
-    disablePast: (_props$disablePast = props.disablePast) != null ? _props$disablePast : false,
-    disableFuture: (_props$disableFuture = props.disableFuture) != null ? _props$disableFuture : false,
-    format: (_props$format = props.format) != null ? _props$format : defaultFormat,
-    minDate: applyDefaultDate(utils, (_props$minDateTime = props.minDateTime) != null ? _props$minDateTime : props.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, (_props$maxDateTime = props.maxDateTime) != null ? _props$maxDateTime : props.maxDate, defaultDates.maxDate),
-    minTime: (_props$minDateTime2 = props.minDateTime) != null ? _props$minDateTime2 : props.minTime,
-    maxTime: (_props$maxDateTime2 = props.maxDateTime) != null ? _props$maxDateTime2 : props.maxTime,
-    disableIgnoringDatePartForTimeValidation: Boolean(props.minDateTime || props.maxDateTime)
-  });
-};
+import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections';
 export const useMultiInputDateTimeRangeField = ({
   sharedProps: inSharedProps,
   startTextFieldProps,
@@ -29,19 +13,22 @@ export const useMultiInputDateTimeRangeField = ({
   endTextFieldProps,
   unstableEndFieldRef
 }) => {
-  const sharedProps = useDefaultizedDateTimeRangeFieldProps(inSharedProps);
+  const sharedProps = useDefaultizedDateTimeField(inSharedProps);
   const adapter = useLocalizationContext();
   const {
     value: valueProp,
     defaultValue,
     format,
+    formatDensity,
     shouldRespectLeadingZeros,
-    timezone: timezoneProp,
     onChange,
     disabled,
     readOnly,
     selectedSections,
-    onSelectedSectionsChange
+    onSelectedSectionsChange,
+    timezone: timezoneProp,
+    enableAccessibleFieldDOMStructure,
+    autoFocus
   } = sharedProps;
   const {
     value,
@@ -78,35 +65,40 @@ export const useMultiInputDateTimeRangeField = ({
     value,
     timezone
   }), validateDateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
+  const selectedSectionsResponse = useMultiInputFieldSelectedSections({
+    selectedSections,
+    onSelectedSectionsChange,
+    unstableStartFieldRef,
+    unstableEndFieldRef
+  });
   const startFieldProps = _extends({
     error: !!validationError[0]
-  }, startTextFieldProps, {
-    format,
-    shouldRespectLeadingZeros,
+  }, startTextFieldProps, selectedSectionsResponse.start, {
     disabled,
     readOnly,
+    format,
+    formatDensity,
+    shouldRespectLeadingZeros,
     timezone,
-    unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure,
+    autoFocus // Do not add on end field.
   });
   const endFieldProps = _extends({
     error: !!validationError[1]
-  }, endTextFieldProps, {
+  }, endTextFieldProps, selectedSectionsResponse.end, {
     format,
+    formatDensity,
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
     timezone,
-    unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure
   });
   const startDateResponse = useDateTimeField(startFieldProps);
   const endDateResponse = useDateTimeField(endFieldProps);

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

@@ -1,11 +1,11 @@
 import { UseFieldResponse } from '@mui/x-date-pickers/internals';
-import { MultiInputFieldRefs } from '../../models/fields';
+import { MultiInputFieldRefs } from '../../../models';
 export interface UseMultiInputRangeFieldParams<TSharedProps extends {}, TTextFieldSlotProps extends {}> extends MultiInputFieldRefs {
     sharedProps: TSharedProps;
     startTextFieldProps: TTextFieldSlotProps;
     endTextFieldProps: TTextFieldSlotProps;
 }
-export interface UseMultiInputRangeFieldResponse<TForwardedProps extends {}> {
-    startDate: UseFieldResponse<TForwardedProps>;
-    endDate: UseFieldResponse<TForwardedProps>;
+export interface UseMultiInputRangeFieldResponse<TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends {}> {
+    startDate: UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;
+    endDate: UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;
 }

package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.d.ts

@@ -1,5 +1,4 @@
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import type { UseMultiInputTimeRangeFieldDefaultizedProps, UseMultiInputTimeRangeFieldParams, UseMultiInputTimeRangeFieldProps } from '../../../MultiInputTimeRangeField/MultiInputTimeRangeField.types';
+import type { UseMultiInputTimeRangeFieldParams } from '../../../MultiInputTimeRangeField/MultiInputTimeRangeField.types';
 import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
-export declare const useDefaultizedTimeRangeFieldProps: <TDate extends PickerValidDate, AdditionalProps extends {}>(props: UseMultiInputTimeRangeFieldProps<TDate>) => UseMultiInputTimeRangeFieldDefaultizedProps<TDate, AdditionalProps>;
-export declare const useMultiInputTimeRangeField: <TDate extends PickerValidDate, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, unstableEndFieldRef, }: UseMultiInputTimeRangeFieldParams<TDate, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TTextFieldSlotProps>;
+export declare const useMultiInputTimeRangeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, unstableStartFieldRef, endTextFieldProps, unstableEndFieldRef, }: UseMultiInputTimeRangeFieldParams<TDate, TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps>;

package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -1,21 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useTimeField as useTimeField } from '@mui/x-date-pickers/TimeField';
-import { useLocalizationContext, useUtils, useValidation, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
+import { useLocalizationContext, useValidation, useControlledValueWithTimezone, useDefaultizedTimeField } from '@mui/x-date-pickers/internals';
 import { validateTimeRange } from '../../utils/validation/validateTimeRange';
 import { rangeValueManager } from '../../utils/valueManagers';
 import { excludeProps } from './shared';
-export const useDefaultizedTimeRangeFieldProps = props => {
-  var _props$ampm, _props$disablePast, _props$disableFuture, _props$format;
-  const utils = useUtils();
-  const ampm = (_props$ampm = props.ampm) != null ? _props$ampm : utils.is12HourCycleInCurrentLocale();
-  const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h;
-  return _extends({}, props, {
-    disablePast: (_props$disablePast = props.disablePast) != null ? _props$disablePast : false,
-    disableFuture: (_props$disableFuture = props.disableFuture) != null ? _props$disableFuture : false,
-    format: (_props$format = props.format) != null ? _props$format : defaultFormat
-  });
-};
+import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections';
 export const useMultiInputTimeRangeField = ({
   sharedProps: inSharedProps,
   startTextFieldProps,
@@ -23,19 +13,22 @@ export const useMultiInputTimeRangeField = ({
   endTextFieldProps,
   unstableEndFieldRef
 }) => {
-  const sharedProps = useDefaultizedTimeRangeFieldProps(inSharedProps);
+  const sharedProps = useDefaultizedTimeField(inSharedProps);
   const adapter = useLocalizationContext();
   const {
     value: valueProp,
     defaultValue,
     format,
+    formatDensity,
     shouldRespectLeadingZeros,
-    timezone: timezoneProp,
     onChange,
     disabled,
     readOnly,
     selectedSections,
-    onSelectedSectionsChange
+    onSelectedSectionsChange,
+    timezone: timezoneProp,
+    enableAccessibleFieldDOMStructure,
+    autoFocus
   } = sharedProps;
   const {
     value,
@@ -72,35 +65,40 @@ export const useMultiInputTimeRangeField = ({
     value,
     timezone
   }), validateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
+  const selectedSectionsResponse = useMultiInputFieldSelectedSections({
+    selectedSections,
+    onSelectedSectionsChange,
+    unstableStartFieldRef,
+    unstableEndFieldRef
+  });
   const startFieldProps = _extends({
     error: !!validationError[0]
-  }, startTextFieldProps, {
-    format,
-    shouldRespectLeadingZeros,
+  }, startTextFieldProps, selectedSectionsResponse.start, {
     disabled,
     readOnly,
+    format,
+    formatDensity,
+    shouldRespectLeadingZeros,
     timezone,
-    unstableFieldRef: unstableStartFieldRef,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure,
+    autoFocus // Do not add on end field.
   });
   const endFieldProps = _extends({
     error: !!validationError[1]
-  }, endTextFieldProps, {
+  }, endTextFieldProps, selectedSectionsResponse.end, {
     format,
+    formatDensity,
     shouldRespectLeadingZeros,
     disabled,
     readOnly,
     timezone,
-    unstableFieldRef: unstableEndFieldRef,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange,
-    selectedSections,
-    onSelectedSectionsChange
+    enableAccessibleFieldDOMStructure
   });
   const startDateResponse = useTimeField(startFieldProps);
   const endDateResponse = useTimeField(endFieldProps);

package/internals/hooks/useRangePosition.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { FieldRef } from '@mui/x-date-pickers/models';
-import { RangePosition } from '../../models';
-import { RangeFieldSection } from '../models/fields';
+import { RangePosition, RangeFieldSection } from '../../models';
 export interface UseRangePositionProps {
     /**
      * The position in the currently edited date range.
@@ -23,6 +22,5 @@ export interface UseRangePositionProps {
 export interface UseRangePositionResponse {
     rangePosition: RangePosition;
     onRangePositionChange: (newPosition: RangePosition) => void;
-    singleInputFieldRef: React.MutableRefObject<FieldRef<RangeFieldSection> | undefined>;
 }
-export declare const useRangePosition: (props: UseRangePositionProps) => UseRangePositionResponse;
+export declare const useRangePosition: (props: UseRangePositionProps, singleInputFieldRef?: React.RefObject<FieldRef<RangeFieldSection>>) => UseRangePositionResponse;

package/internals/hooks/useRangePosition.js

@@ -1,9 +1,7 @@
-import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import useEventCallback from '@mui/utils/useEventCallback';
-export const useRangePosition = props => {
+export const useRangePosition = (props, singleInputFieldRef) => {
   var _props$defaultRangePo;
-  const singleInputFieldRef = React.useRef();
   const [rangePosition, setRangePosition] = useControlled({
     name: 'useRangePosition',
     state: 'rangePosition',
@@ -14,7 +12,7 @@ export const useRangePosition = props => {
   // When using a single input field,
   // we want to select the 1st section of the edited date when updating the range position.
   const syncRangePositionWithSingleInputField = newRangePosition => {
-    if (singleInputFieldRef.current == null) {
+    if ((singleInputFieldRef == null ? void 0 : singleInputFieldRef.current) == null) {
       return;
     }
     const sections = singleInputFieldRef.current.getSections();
@@ -29,7 +27,6 @@ export const useRangePosition = props => {
   });
   return {
     rangePosition,
-    onRangePositionChange: handleRangePositionChange,
-    singleInputFieldRef
+    onRangePositionChange: handleRangePositionChange
   };
 };

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -47,6 +47,7 @@ export const useStaticRangePicker = _ref => {
   } = usePicker(_extends({}, pickerParams, {
     props,
     autoFocusView: autoFocus != null ? autoFocus : false,
+    fieldRef: undefined,
     additionalViewProps: {
       rangePosition,
       onRangePositionChange

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

@@ -2,9 +2,8 @@ import * as React from 'react';
 import { BasePickerProps, UsePickerParams, ExportedBaseToolbarProps, StaticOnlyPickerProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
-import { DateRange } from '../../../models';
+import { RangeFieldSection, DateRange } from '../../../models';
 import { UseRangePositionProps } from '../useRangePosition';
-import { RangeFieldSection } from '../../models/fields';
 export interface UseStaticRangePickerSlots<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<DateRange<TDate>, TDate, TView> {
 }
 export interface UseStaticRangePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<DateRange<TDate>, TDate, TView> {

package/internals/models/dateRange.d.ts

@@ -1,7 +1,6 @@
-import { BaseDateValidationProps, DefaultizedProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { BaseDateValidationProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import type { DateRangeValidationError, DateRange } from '../../models';
-import { RangeFieldSection } from './fields';
+import type { DateRangeValidationError, RangeFieldSection, DateRange } from '../../models';
 /**
  * Props used to validate a day value in range pickers.
  */
@@ -18,16 +17,5 @@ export interface DayRangeValidationProps<TDate extends PickerValidDate> {
      */
     shouldDisableDate?: (day: TDate, position: 'start' | 'end') => boolean;
 }
-/**
- * Props used in every range picker.
- */
-export interface BaseRangeProps {
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-}
-export interface UseDateRangeFieldProps<TDate extends PickerValidDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, DateRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate>, BaseRangeProps {
+export interface UseDateRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'unstableFieldRef'>, 'format'>, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate> {
 }
-export type UseDateRangeFieldDefaultizedProps<TDate extends PickerValidDate> = DefaultizedProps<UseDateRangeFieldProps<TDate>, keyof BaseDateValidationProps<TDate> | 'format'>;

package/internals/models/dateTimeRange.d.ts

@@ -1,15 +1,13 @@
-import { BaseDateValidationProps, TimeValidationProps, DefaultizedProps, MakeOptional, UseFieldInternalProps, DateTimeValidationProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+import { BaseDateValidationProps, TimeValidationProps, MakeOptional, UseFieldInternalProps, DateTimeValidationProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { BaseRangeProps, DayRangeValidationProps } from './dateRange';
-import { DateTimeRangeValidationError, DateRange } from '../../models';
-import { RangeFieldSection } from './fields';
-export interface UseDateTimeRangeFieldProps<TDate extends PickerValidDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, DateTimeRangeValidationError>, 'format'>, DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, BaseDateValidationProps<TDate>, DateTimeValidationProps<TDate>, BaseRangeProps {
+import { DayRangeValidationProps } from './dateRange';
+import { DateTimeRangeValidationError, RangeFieldSection, DateRange } from '../../models';
+export interface UseDateTimeRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, BaseDateValidationProps<TDate>, DateTimeValidationProps<TDate> {
     /**
      * 12h/24h view for hour selection clock.
      * @default `utils.is12HourCycleInCurrentLocale()`
      */
     ampm?: boolean;
 }
-export type UseDateTimeRangeFieldDefaultizedProps<TDate extends PickerValidDate> = DefaultizedProps<UseDateTimeRangeFieldProps<TDate>, keyof BaseDateValidationProps<TDate> | 'format' | 'disableIgnoringDatePartForTimeValidation'>;
 export type DateTimeRangePickerView = Exclude<DateOrTimeViewWithMeridiem, 'month' | 'year'>;
 export type DateTimeRangePickerViewExternal = Exclude<DateTimeRangePickerView, 'meridiem'>;

package/internals/models/index.d.ts

@@ -1,5 +1,4 @@
 export * from './dateRange';
 export * from './dateTimeRange';
 export * from './timeRange';
-export * from './fields';
 export * from './rangePickerProps';

package/internals/models/index.js

@@ -1,5 +1,4 @@
 export * from './dateRange';
 export * from './dateTimeRange';
 export * from './timeRange';
-export * from './fields';
 export * from './rangePickerProps';

package/internals/models/timeRange.d.ts

@@ -1,13 +1,10 @@
-import { BaseTimeValidationProps, TimeValidationProps, DefaultizedProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { BaseTimeValidationProps, TimeValidationProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { TimeRangeValidationError, DateRange } from '../../models';
-import { BaseRangeProps } from './dateRange';
-import { RangeFieldSection } from './fields';
-export interface UseTimeRangeFieldProps<TDate extends PickerValidDate> extends MakeOptional<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TimeRangeValidationError>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps, BaseRangeProps {
+import { TimeRangeValidationError, RangeFieldSection, DateRange } from '../../models';
+export interface UseTimeRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps {
     /**
      * 12h/24h view for hour selection clock.
      * @default `utils.is12HourCycleInCurrentLocale()`
      */
     ampm?: boolean;
 }
-export type UseTimeRangeFieldDefaultizedProps<TDate extends PickerValidDate> = DefaultizedProps<UseTimeRangeFieldProps<TDate>, keyof BaseTimeValidationProps | 'format'>;

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

@@ -1,4 +1,4 @@
-import { RangeFieldSection } from '../models/fields';
+import { RangeFieldSection } from '../../models';
 export declare const splitDateRangeSections: (sections: RangeFieldSection[]) => {
     startDate: RangeFieldSection[];
     endDate: RangeFieldSection[];
@@ -15,10 +15,6 @@ export declare const removeLastSeparator: (dateSections: RangeFieldSection[]) =>
     hasLeadingZerosInFormat: boolean;
     hasLeadingZerosInInput: boolean;
     modified: boolean;
-    start: number;
-    end: number;
-    startInInput: number;
-    endInInput: number;
     startSeparator: string;
     endSeparator: string;
 })[];

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwNzQyOTYwMDAwMA==";
+  const releaseInfo = "MTcwOTM1NTYwMDAwMA==";
   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,6 @@
 import { PickerValueManager, FieldValueManager } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import type { DateRangeValidationError, DateTimeRangeValidationError, TimeRangeValidationError, DateRange } from '../../models';
-import { RangeFieldSection } from '../models/fields';
+import type { DateRangeValidationError, DateTimeRangeValidationError, TimeRangeValidationError, RangeFieldSection, DateRange } from '../../models';
 export type RangePickerValueManager<TValue = [any, any], TDate extends PickerValidDate = any, TError extends DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any> = PickerValueManager<TValue, TDate, TError>;
 export declare const rangeValueManager: RangePickerValueManager;
 export declare const rangeFieldValueManager: FieldValueManager<DateRange<any>, any, RangeFieldSection>;

package/internals/utils/valueManagers.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["value", "referenceDate"];
-import { replaceInvalidDateByNull, addPositionPropertiesToSections, createDateStrForInputFromSections, areDatesEqual, getTodayDate, getDefaultReferenceDate } from '@mui/x-date-pickers/internals';
+import { replaceInvalidDateByNull, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections, areDatesEqual, getTodayDate, getDefaultReferenceDate } from '@mui/x-date-pickers/internals';
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export const rangeValueManager = {
   emptyValue: [null, null],
@@ -50,7 +50,7 @@ export const rangeFieldValueManager = {
     }
     return [prevReferenceValue[1], value[1]];
   },
-  getSectionsFromValue: (utils, [start, end], fallbackSections, localizedDigits, isRTL, getSectionsFromDate) => {
+  getSectionsFromValue: (utils, [start, end], fallbackSections, getSectionsFromDate) => {
     const separatedFallbackSections = fallbackSections == null ? {
       startDate: null,
       endDate: null
@@ -65,7 +65,8 @@ export const rangeFieldValueManager = {
         if (sectionIndex === sections.length - 1 && position === 'start') {
           return _extends({}, section, {
             dateName: position,
-            endSeparator: `${section.endSeparator}${isRTL ? '\u2069 – \u2066' : ' – '}`
+            // TODO: Check if RTL still works
+            endSeparator: `${section.endSeparator} – `
           });
         }
         return _extends({}, section, {
@@ -73,11 +74,15 @@ export const rangeFieldValueManager = {
         });
       });
     };
-    return addPositionPropertiesToSections([...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')], localizedDigits, isRTL);
+    return [...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')];
   },
-  getValueStrFromSections: (sections, localizedDigits, isRTL) => {
+  getV7HiddenInputValueFromSections: sections => {
     const dateRangeSections = splitDateRangeSections(sections);
-    return createDateStrForInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate], localizedDigits, isRTL);
+    return createDateStrForV7HiddenInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate]);
+  },
+  getV6InputValueFromSections: (sections, localizedDigits, isRTL) => {
+    const dateRangeSections = splitDateRangeSections(sections);
+    return createDateStrForV6InputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate], localizedDigits, isRTL);
   },
   parseValueStr: (valueStr, referenceValue, parseDate) => {
     // TODO: Improve because it would not work if the date format has `–` as a separator.

package/models/fields.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/base/utils';
+import { BaseFieldProps, UseFieldResponse } from '@mui/x-date-pickers/internals';
+import { BaseSingleInputPickersTextFieldProps, FieldRef, FieldSection, PickerValidDate } from '@mui/x-date-pickers/models';
+import { UseClearableFieldResponse } from '@mui/x-date-pickers/hooks';
+import { SxProps } from '@mui/material/styles';
+export interface RangeFieldSection extends FieldSection {
+    dateName: 'start' | 'end';
+}
+export type FieldType = 'single-input' | 'multi-input';
+/**
+ * Props the `textField` slot of the multi input field can receive when used inside a picker.
+ */
+export interface MultiInputFieldSlotTextFieldProps {
+    label?: React.ReactNode;
+    id?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    onKeyDown?: React.KeyboardEventHandler;
+    onClick?: React.MouseEventHandler;
+    onFocus?: React.FocusEventHandler;
+    focused?: boolean;
+    InputProps?: {
+        ref?: React.Ref<any>;
+        endAdornment?: React.ReactNode;
+        startAdornment?: React.ReactNode;
+    };
+}
+/**
+ * Props the `root` slot of the multi input field can receive when used inside a picker.
+ */
+export interface MultiInputFieldSlotRootProps {
+    onBlur?: React.FocusEventHandler;
+}
+export interface MultiInputFieldRefs {
+    unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+    unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+}
+/**
+ * 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, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends Omit<BaseFieldProps<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TError>, 'unstableFieldRef'> {
+    sx?: SxProps<any>;
+    unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+    unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+    slots?: {
+        root?: React.ElementType;
+        separator?: React.ElementType;
+        textField?: React.ElementType;
+    };
+    slotProps?: {
+        root?: SlotComponentProps<React.ElementType<MultiInputFieldSlotRootProps>, {}, Record<string, any>>;
+        textField?: SlotComponentProps<React.ElementType<MultiInputFieldSlotTextFieldProps>, {}, {
+            position?: 'start' | 'end';
+        } & Record<string, any>>;
+    };
+}
+/**
+ * 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`.
+ */
+export type BaseMultiInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = UseClearableFieldResponse<UseFieldResponse<TEnableAccessibleFieldDOMStructure, MultiInputFieldSlotTextFieldProps>>;
+/**
+ * Props the text field receives when used with a single or multi input picker.
+ * Only contains what the MUI components are passing to the text field, not what users can pass using the `props.slotProps.field` or `props.slotProps.textField`.
+ */
+export type BasePickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = BaseSingleInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure> & BaseMultiInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure>;

package/models/index.d.ts

@@ -1,3 +1,4 @@
+export * from './fields';
 export * from './range';
 export * from './validation';
 export * from './multiInputRangeFieldClasses';

package/models/index.js

@@ -1,3 +1,4 @@
+export * from './fields';
 export * from './range';
 export * from './validation';
 export * from './multiInputRangeFieldClasses';

package/modern/DateRangeCalendar/DateRangeCalendar.js

@@ -526,6 +526,9 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @default 2
    */
   calendars: PropTypes.oneOf([1, 2, 3]),
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   /**
@@ -588,7 +591,6 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   /**
    * The day view will show as many weeks as needed after the end of the current month to match this value.
    * Put it to 6 to have a fixed number of weeks in Gregorian calendars
-   * @default undefined
    */
   fixedWeekNumber: PropTypes.number,
   /**

package/modern/DateRangePicker/DateRangePicker.js

@@ -133,10 +133,13 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * If `true`, the week number will be display in the calendar.
    */
   displayWeekNumber: PropTypes.bool,
+  /**
+   * @default false
+   */
+  enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
    * The day view will show as many weeks as needed after the end of the current month to match this value.
    * Put it to 6 to have a fixed number of weeks in Gregorian calendars
-   * @default undefined
    */
   fixedWeekNumber: PropTypes.number,
   /**
@@ -263,17 +266,14 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   renderLoading: PropTypes.func,
   /**
    * The currently selected sections.
-   * This prop accept four formats:
+   * This prop accepts four formats:
    * 1. If a number is provided, the section at this index will be selected.
-   * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
-   * 4. If `null` is provided, no section will be selected
+   * 2. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
+   * 3. If `"all"` is provided, all the sections will be selected.
+   * 4. If `null` is provided, no section will be selected.
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
-    endIndex: PropTypes.number.isRequired,
-    startIndex: PropTypes.number.isRequired
-  })]),
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number]),
   /**
    * Disable specific date.
    *