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

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 = "MTcwODYyODQwMDAwMA==";
   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.
    *

package/modern/DateRangePicker/DateRangePickerToolbar.js

@@ -93,6 +93,9 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   disabled: PropTypes.bool,
@@ -104,6 +107,9 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
   onRangePositionChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   titleId: PropTypes.string,
   /**

package/modern/DateTimeRangePicker/DateTimeRangePicker.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["desktopModeMediaQuery"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { refType } from '@mui/utils';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useThemeProps } from '@mui/material/styles';
 import { DesktopDateTimeRangePicker } from '../DesktopDateTimeRangePicker';
@@ -132,10 +133,13 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.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,
   /**
@@ -153,9 +157,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * Pass a ref to the `input` element.
    * Ignored if the field has several inputs.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    * Ignored if the field has several inputs.
@@ -299,17 +301,14 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.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.
    *

package/modern/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -76,7 +76,8 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     rangePosition,
     onRangePositionChange,
-    className
+    className,
+    sx
   } = props;
   const localeText = useLocaleText();
   const classes = useUtilityClasses(props);
@@ -120,6 +121,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
   return /*#__PURE__*/_jsxs(DateTimeRangePickerTabsRoot, {
     ownerState: props,
     className: clsx(classes.root, className),
+    sx: sx,
     children: [!isPreviousHidden ? /*#__PURE__*/_jsx(IconButton, {
       onClick: changeToPreviousTab,
       className: classes.navigationButton,
@@ -170,6 +172,10 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * Time tab icon.
    * @default TimeIcon

package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -135,6 +135,9 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   ampm: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   disabled: PropTypes.bool,
@@ -154,6 +157,9 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   readOnly: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   titleId: PropTypes.string,
   /**

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -138,10 +138,13 @@ DesktopDateRangePicker.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,
   /**
@@ -268,17 +271,14 @@ DesktopDateRangePicker.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.
    *

package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { extractValidationProps, isDatePickerView, isInternalTimeView } from '@mui/x-date-pickers/internals';
 import { resolveComponentProps } from '@mui/base/utils';
+import { refType } from '@mui/utils';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from '@mui/x-date-pickers/MultiSectionDigitalClock';
 import Divider from '@mui/material/Divider';
@@ -201,10 +202,13 @@ DesktopDateTimeRangePicker.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,
   /**
@@ -222,9 +226,7 @@ DesktopDateTimeRangePicker.propTypes = {
    * Pass a ref to the `input` element.
    * Ignored if the field has several inputs.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    * Ignored if the field has several inputs.
@@ -368,17 +370,14 @@ DesktopDateTimeRangePicker.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.
    *

package/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -134,10 +134,13 @@ MobileDateRangePicker.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,
   /**
@@ -264,17 +267,14 @@ MobileDateRangePicker.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.
    *

package/modern/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["view", "openTo", "rangePosition", "sx"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { refType } from '@mui/utils';
 import { DIALOG_WIDTH, VIEW_HEIGHT, extractValidationProps, isInternalTimeView, isDatePickerView } from '@mui/x-date-pickers/internals';
 import { resolveComponentProps } from '@mui/base/utils';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
@@ -204,10 +205,13 @@ MobileDateTimeRangePicker.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,
   /**
@@ -225,9 +229,7 @@ MobileDateTimeRangePicker.propTypes = {
    * Pass a ref to the `input` element.
    * Ignored if the field has several inputs.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    * Ignored if the field has several inputs.
@@ -371,17 +373,14 @@ MobileDateTimeRangePicker.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.
    *