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

package/DateTimePicker/DateTimePickerToolbar.js

@@ -336,6 +336,9 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.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,
   /**
@@ -357,6 +360,9 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    * Currently visible picker view.
    */
   view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
+  /**
+   * Available views.
+   */
   views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
 } : void 0;
 export { DateTimePickerToolbar };

package/DesktopDatePicker/DesktopDatePicker.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DesktopDatePickerProps } from './DesktopDatePicker.types';
 import { PickerValidDate } from '../models';
-type DesktopDatePickerComponent = (<TDate extends PickerValidDate>(props: DesktopDatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type DesktopDatePickerComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: DesktopDatePickerProps<TDate, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/DesktopDatePicker/DesktopDatePicker.js

@@ -127,10 +127,13 @@ DesktopDatePicker.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,
   /**
@@ -271,17 +274,14 @@ DesktopDatePicker.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/DesktopDatePicker/DesktopDatePicker.types.d.ts

@@ -4,9 +4,9 @@ import { MakeOptional } from '../internals/models/helpers';
 import { DateView, PickerValidDate } from '../models';
 export interface DesktopDatePickerSlots<TDate extends PickerValidDate> extends BaseDatePickerSlots<TDate>, MakeOptional<UseDesktopPickerSlots<TDate, DateView>, 'field' | 'openPickerIcon'> {
 }
-export interface DesktopDatePickerSlotProps<TDate extends PickerValidDate> extends BaseDatePickerSlotProps<TDate>, ExportedUseDesktopPickerSlotProps<TDate, DateView> {
+export interface DesktopDatePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDatePickerSlotProps<TDate>, ExportedUseDesktopPickerSlotProps<TDate, DateView, TEnableAccessibleFieldDOMStructure> {
 }
-export interface DesktopDatePickerProps<TDate extends PickerValidDate> extends BaseDatePickerProps<TDate>, DesktopOnlyPickerProps<TDate> {
+export interface DesktopDatePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends BaseDatePickerProps<TDate>, DesktopOnlyPickerProps {
     /**
      * Years rendered per row.
      * @default 4
@@ -21,5 +21,5 @@ export interface DesktopDatePickerProps<TDate extends PickerValidDate> extends B
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DesktopDatePickerSlotProps<TDate>;
+    slotProps?: DesktopDatePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
 }

package/DesktopDateTimePicker/DesktopDateTimePicker.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DesktopDateTimePickerProps } from './DesktopDateTimePicker.types';
 import { PickerValidDate } from '../models';
-type DesktopDateTimePickerComponent = (<TDate extends PickerValidDate>(props: DesktopDateTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type DesktopDateTimePickerComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: DesktopDateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -180,10 +180,13 @@ DesktopDateTimePicker.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,
   /**
@@ -347,17 +350,14 @@ DesktopDateTimePicker.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/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts

@@ -8,9 +8,9 @@ import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from
 import { DigitalClockSlots, DigitalClockSlotProps } from '../DigitalClock';
 export interface DesktopDateTimePickerSlots<TDate extends PickerValidDate> extends BaseDateTimePickerSlots<TDate>, MakeOptional<UseDesktopPickerSlots<TDate, DateOrTimeViewWithMeridiem>, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {
 }
-export interface DesktopDateTimePickerSlotProps<TDate extends PickerValidDate> extends BaseDateTimePickerSlotProps<TDate>, ExportedUseDesktopPickerSlotProps<TDate, DateOrTimeViewWithMeridiem>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
+export interface DesktopDateTimePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps<TDate>, ExportedUseDesktopPickerSlotProps<TDate, DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
 }
-export interface DesktopDateTimePickerProps<TDate extends PickerValidDate> extends BaseDateTimePickerProps<TDate, DateOrTimeViewWithMeridiem>, DesktopOnlyPickerProps<TDate>, DesktopOnlyTimePickerProps<TDate> {
+export interface DesktopDateTimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends BaseDateTimePickerProps<TDate, DateOrTimeViewWithMeridiem>, DesktopOnlyPickerProps, DesktopOnlyTimePickerProps<TDate> {
     /**
      * Available views.
      */
@@ -29,5 +29,5 @@ export interface DesktopDateTimePickerProps<TDate extends PickerValidDate> exten
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DesktopDateTimePickerSlotProps<TDate>;
+    slotProps?: DesktopDateTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
 }

package/DesktopTimePicker/DesktopTimePicker.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DesktopTimePickerProps } from './DesktopTimePicker.types';
 import { PickerValidDate } from '../models';
-type DesktopTimePickerComponent = (<TDate extends PickerValidDate>(props: DesktopTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type DesktopTimePickerComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: DesktopTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/DesktopTimePicker/DesktopTimePicker.js

@@ -147,6 +147,10 @@ DesktopTimePicker.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  /**
+   * @default false
+   */
+  enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
    * Format of the date when rendered in the input(s).
    * Defaults to localized format based on the used `views`.
@@ -263,17 +267,14 @@ DesktopTimePicker.propTypes = {
   referenceDate: PropTypes.object,
   /**
    * 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 time.
    * @template TDate

package/DesktopTimePicker/DesktopTimePicker.types.d.ts

@@ -8,9 +8,9 @@ import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from
 import { PickerValidDate, TimeView } from '../models';
 export interface DesktopTimePickerSlots<TDate extends PickerValidDate> extends BaseTimePickerSlots<TDate>, MakeOptional<UseDesktopPickerSlots<TDate, TimeViewWithMeridiem>, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {
 }
-export interface DesktopTimePickerSlotProps<TDate extends PickerValidDate> extends BaseTimePickerSlotProps, ExportedUseDesktopPickerSlotProps<TDate, TimeViewWithMeridiem>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
+export interface DesktopTimePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends BaseTimePickerSlotProps, ExportedUseDesktopPickerSlotProps<TDate, TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
 }
-export interface DesktopTimePickerProps<TDate extends PickerValidDate> extends BaseTimePickerProps<TDate, TimeViewWithMeridiem>, DesktopOnlyPickerProps<TDate>, DesktopOnlyTimePickerProps<TDate> {
+export interface DesktopTimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends BaseTimePickerProps<TDate, TimeViewWithMeridiem>, DesktopOnlyPickerProps, DesktopOnlyTimePickerProps<TDate> {
     /**
      * Available views.
      */
@@ -24,5 +24,5 @@ export interface DesktopTimePickerProps<TDate extends PickerValidDate> extends B
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DesktopTimePickerSlotProps<TDate>;
+    slotProps?: DesktopTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
 }

package/LocalizationProvider/LocalizationProvider.js

@@ -107,6 +107,7 @@ process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
    */
   dateFormats: PropTypes.shape({
     dayOfMonth: PropTypes.string,
+    dayOfMonthFull: PropTypes.string,
     fullDate: PropTypes.string,
     fullTime: PropTypes.string,
     fullTime12h: PropTypes.string,

package/MobileDatePicker/MobileDatePicker.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { MobileDatePickerProps } from './MobileDatePicker.types';
 import { PickerValidDate } from '../models';
-type MobileDatePickerComponent = (<TDate extends PickerValidDate>(props: MobileDatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+type MobileDatePickerComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: MobileDatePickerProps<TDate, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/MobileDatePicker/MobileDatePicker.js

@@ -124,10 +124,13 @@ MobileDatePicker.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 @@ MobileDatePicker.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/MobileDatePicker/MobileDatePicker.types.d.ts

@@ -4,9 +4,9 @@ import { MakeOptional } from '../internals/models/helpers';
 import { DateView, PickerValidDate } from '../models';
 export interface MobileDatePickerSlots<TDate extends PickerValidDate> extends BaseDatePickerSlots<TDate>, MakeOptional<UseMobilePickerSlots<TDate, DateView>, 'field'> {
 }
-export interface MobileDatePickerSlotProps<TDate extends PickerValidDate> extends BaseDatePickerSlotProps<TDate>, ExportedUseMobilePickerSlotProps<TDate, DateView> {
+export interface MobileDatePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDatePickerSlotProps<TDate>, ExportedUseMobilePickerSlotProps<TDate, DateView, TEnableAccessibleFieldDOMStructure> {
 }
-export interface MobileDatePickerProps<TDate extends PickerValidDate> extends BaseDatePickerProps<TDate>, MobileOnlyPickerProps<TDate> {
+export interface MobileDatePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends BaseDatePickerProps<TDate>, MobileOnlyPickerProps {
     /**
      * Overridable component slots.
      * @default {}
@@ -16,5 +16,5 @@ export interface MobileDatePickerProps<TDate extends PickerValidDate> extends Ba
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MobileDatePickerSlotProps<TDate>;
+    slotProps?: MobileDatePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
 }

package/MobileDateTimePicker/MobileDateTimePicker.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { MobileDateTimePickerProps } from './MobileDateTimePicker.types';
-import { PickerValidDate } from '../models';
-type MobileDateTimePickerComponent = (<TDate extends PickerValidDate>(props: MobileDateTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+import { DateOrTimeView, PickerValidDate } from '../models';
+type MobileDateTimePickerComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: MobileDateTimePickerProps<TDate, DateOrTimeView, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -149,10 +149,13 @@ MobileDateTimePicker.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,
   /**
@@ -316,17 +319,14 @@ MobileDateTimePicker.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/MobileDateTimePicker/MobileDateTimePicker.types.d.ts

@@ -3,11 +3,11 @@ import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlo
 import { MakeOptional } from '../internals/models/helpers';
 import { DateOrTimeView, PickerValidDate } from '../models';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
-export interface MobileDateTimePickerSlots<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView> extends BaseDateTimePickerSlots<TDate>, MakeOptional<UseMobilePickerSlots<TDate, TView>, 'field'> {
+export interface MobileDateTimePickerSlots<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends BaseDateTimePickerSlots<TDate>, MakeOptional<UseMobilePickerSlots<TDate, TView>, 'field'> {
 }
-export interface MobileDateTimePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView> extends BaseDateTimePickerSlotProps<TDate>, ExportedUseMobilePickerSlotProps<TDate, TView> {
+export interface MobileDateTimePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimePickerSlotProps<TDate>, ExportedUseMobilePickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure> {
 }
-export interface MobileDateTimePickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView> extends BaseDateTimePickerProps<TDate, TView>, MobileOnlyPickerProps<TDate> {
+export interface MobileDateTimePickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem = DateOrTimeView, TEnableAccessibleFieldDOMStructure extends boolean = false> extends BaseDateTimePickerProps<TDate, TView>, MobileOnlyPickerProps {
     /**
      * Overridable component slots.
      * @default {}
@@ -17,5 +17,5 @@ export interface MobileDateTimePickerProps<TDate extends PickerValidDate, TView
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MobileDateTimePickerSlotProps<TDate, TView>;
+    slotProps?: MobileDateTimePickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>;
 }

package/MobileTimePicker/MobileTimePicker.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { MobileTimePickerProps } from './MobileTimePicker.types';
-import { PickerValidDate } from '../models';
-type MobileTimePickerComponent = (<TDate extends PickerValidDate>(props: MobileTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+import { PickerValidDate, TimeView } from '../models';
+type MobileTimePickerComponent = (<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false>(props: MobileTimePickerProps<TDate, TimeView, TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/MobileTimePicker/MobileTimePicker.js

@@ -126,6 +126,10 @@ MobileTimePicker.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  /**
+   * @default false
+   */
+  enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
    * Format of the date when rendered in the input(s).
    * Defaults to localized format based on the used `views`.
@@ -242,17 +246,14 @@ MobileTimePicker.propTypes = {
   referenceDate: PropTypes.object,
   /**
    * 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 time.
    * @template TDate

package/MobileTimePicker/MobileTimePicker.types.d.ts

@@ -3,11 +3,11 @@ import { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } fro
 import { MakeOptional } from '../internals/models/helpers';
 import { PickerValidDate, TimeView } from '../models';
 import { TimeViewWithMeridiem } from '../internals/models';
-export interface MobileTimePickerSlots<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem = TimeView> extends BaseTimePickerSlots<TDate>, MakeOptional<UseMobilePickerSlots<TDate, TView>, 'field'> {
+export interface MobileTimePickerSlots<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem> extends BaseTimePickerSlots<TDate>, MakeOptional<UseMobilePickerSlots<TDate, TView>, 'field'> {
 }
-export interface MobileTimePickerSlotProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem = TimeView> extends BaseTimePickerSlotProps, ExportedUseMobilePickerSlotProps<TDate, TView> {
+export interface MobileTimePickerSlotProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends BaseTimePickerSlotProps, ExportedUseMobilePickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure> {
 }
-export interface MobileTimePickerProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem = TimeView> extends BaseTimePickerProps<TDate, TView>, MobileOnlyPickerProps<TDate> {
+export interface MobileTimePickerProps<TDate extends PickerValidDate, TView extends TimeViewWithMeridiem = TimeView, TEnableAccessibleFieldDOMStructure extends boolean = false> extends BaseTimePickerProps<TDate, TView>, MobileOnlyPickerProps {
     /**
      * Overridable component slots.
      * @default {}
@@ -17,5 +17,5 @@ export interface MobileTimePickerProps<TDate extends PickerValidDate, TView exte
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MobileTimePickerSlotProps<TDate, TView>;
+    slotProps?: MobileTimePickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>;
 }

package/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -229,7 +229,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
               value,
               ampm,
               utils,
-              isDisabled: hours => disabled || isTimeDisabled(hours, 'hours'),
+              isDisabled: hours => isTimeDisabled(hours, 'hours'),
               timeStep: timeSteps.hours,
               resolveAriaLabel: localeText.hoursClockNumberText,
               valueOrReferenceDate
@@ -245,7 +245,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
             items: getTimeSectionOptions({
               value: utils.getMinutes(valueOrReferenceDate),
               utils,
-              isDisabled: minutes => disabled || isTimeDisabled(minutes, 'minutes'),
+              isDisabled: minutes => isTimeDisabled(minutes, 'minutes'),
               resolveLabel: minutes => utils.format(utils.setMinutes(now, minutes), 'minutes'),
               timeStep: timeSteps.minutes,
               hasValue: !!value,
@@ -262,7 +262,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
             items: getTimeSectionOptions({
               value: utils.getSeconds(valueOrReferenceDate),
               utils,
-              isDisabled: seconds => disabled || isTimeDisabled(seconds, 'seconds'),
+              isDisabled: seconds => isTimeDisabled(seconds, 'seconds'),
               resolveLabel: seconds => utils.format(utils.setSeconds(now, seconds), 'seconds'),
               timeStep: timeSteps.seconds,
               hasValue: !!value,
@@ -294,7 +294,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       default:
         throw new Error(`Unknown view: ${viewToBuild} found.`);
     }
-  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, disabled, isTimeDisabled, handleMeridiemChange]);
+  }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, handleMeridiemChange]);
   const viewTimeOptions = React.useMemo(() => {
     return views.reduce((result, currentView) => {
       return _extends({}, result, {

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -138,8 +138,10 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     role: "listbox"
   }, other, {
     children: items.map((option, index) => {
-      var _option$isDisabled, _option$isDisabled2;
-      if (skipDisabled && (_option$isDisabled = option.isDisabled) != null && _option$isDisabled.call(option, option.value)) {
+      var _option$isDisabled;
+      const isItemDisabled = (_option$isDisabled = option.isDisabled) == null ? void 0 : _option$isDisabled.call(option, option.value);
+      const isDisabled = disabled || isItemDisabled;
+      if (skipDisabled && isDisabled) {
         return null;
       }
       const isSelected = option.isSelected(option.value);
@@ -147,12 +149,12 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
       return /*#__PURE__*/_jsx(DigitalClockSectionItem, _extends({
         onClick: () => !readOnly && onChange(option.value),
         selected: isSelected,
-        disabled: disabled || ((_option$isDisabled2 = option.isDisabled) == null ? void 0 : _option$isDisabled2.call(option, option.value)),
+        disabled: isDisabled,
         disableRipple: readOnly,
         role: "option"
         // aria-readonly is not supported here and does not have any effect
         ,
-        "aria-disabled": readOnly,
+        "aria-disabled": readOnly || isDisabled || undefined,
         "aria-label": option.ariaLabel,
         "aria-selected": isSelected,
         tabIndex: tabIndex,

package/PickersLayout/PickersLayout.js

@@ -122,6 +122,9 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
   className: PropTypes.string,
   disabled: PropTypes.bool,
@@ -152,6 +155,9 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    * @default {}
    */
   slots: PropTypes.object,
+  /**
+   * 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]),
   value: PropTypes.any,
   view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),

package/PickersLayout/PickersLayout.types.d.ts

@@ -72,11 +72,17 @@ export interface PickersLayoutProps<TValue, TDate extends PickerValidDate, TView
     value?: TValue;
     className?: string;
     children?: React.ReactNode;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
     sx?: SxProps<Theme>;
     /**
      * Ref to pass to the root element
      */
     ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Override or extend the styles applied to the component.
+     */
     classes?: Partial<PickersLayoutClasses>;
     /**
      * Overridable component slots.

package/PickersSectionList/PickersSectionList.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { PickersSectionListProps } from './PickersSectionList.types';
-export declare const PickersSectionListRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const PickersSectionListSection: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
-export declare const PickersSectionListSectionSeparator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
-export declare const PickersSectionListSectionContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const PickersSectionListRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PickersSectionListSection: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const PickersSectionListSectionSeparator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const PickersSectionListSectionContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
 type PickersSectionListComponent = ((props: PickersSectionListProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };

package/PickersSectionList/PickersSectionList.js

@@ -2,12 +2,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "elements", "sectionListRef"];
 import * as React from 'react';
-import styled from '@mui/system/styled';
 import PropTypes from 'prop-types';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import useForkRef from '@mui/utils/useForkRef';
-import { useThemeProps } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { getPickersSectionListUtilityClass, pickersSectionListClasses } from './pickersSectionListClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/PickersTextField/PickersFilledInput/PickersFilledInput.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFormControl } from '@mui/material/FormControl';
 import { styled, useThemeProps } from '@mui/material/styles';
+import { refType } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { pickersFilledInputClasses, getPickersFilledInputUtilityClass } from './pickersFilledInputClasses';
 import { PickersInputBase } from '../PickersInputBase';
@@ -200,11 +201,10 @@ process.env.NODE_ENV !== "production" ? PickersFilledInput.propTypes = {
   hiddenLabel: PropTypes.bool,
   id: PropTypes.string,
   inputProps: PropTypes.object,
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   label: PropTypes.node,
   margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  name: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,
   onInput: PropTypes.func.isRequired,