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

package/DateTimeField/DateTimeField.types.d.ts

@@ -1,22 +1,20 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
 import TextField from '@mui/material/TextField';
-import { DateTimeValidationError, FieldSection } from '../models';
+import { DateTimeValidationError, FieldSection, PickerValidDate, BuiltInFieldTextFieldProps } from '../models';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
-import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
+import { MakeOptional } from '../internals/models/helpers';
 import { BaseDateValidationProps, BaseTimeValidationProps, DateTimeValidationProps, DayValidationProps, MonthValidationProps, TimeValidationProps, YearValidationProps } from '../internals/models/validation';
-import { FieldsTextFieldProps } from '../internals/models/fields';
-import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
-export interface UseDateTimeFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<TDate | null, TDate, FieldSection, DateTimeValidationError>, 'format'>, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, TimeValidationProps<TDate>, BaseTimeValidationProps, DateTimeValidationProps<TDate> {
+import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
+export interface UseDateTimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, 'format'>, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, TimeValidationProps<TDate>, BaseTimeValidationProps, DateTimeValidationProps<TDate>, ExportedUseClearableFieldProps {
     /**
      * 12h/24h view for hour selection clock.
      * @default `utils.is12HourCycleInCurrentLocale()`
      */
     ampm?: boolean;
 }
-export type UseDateTimeFieldDefaultizedProps<TDate> = DefaultizedProps<UseDateTimeFieldProps<TDate>, keyof BaseDateValidationProps<any> | keyof BaseTimeValidationProps | 'format'>;
-export type UseDateTimeFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseDateTimeFieldProps<TDate>> & UseDateTimeFieldProps<TDate>;
-export interface DateTimeFieldProps<TDate> extends UseDateTimeFieldComponentProps<TDate, FieldsTextFieldProps> {
+export type UseDateTimeFieldComponentProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TChildProps extends {}> = Omit<TChildProps, keyof UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>> & UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
+export type DateTimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = UseDateTimeFieldComponentProps<TDate, TEnableAccessibleFieldDOMStructure, BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**
      * Overridable component slots.
      * @default {}
@@ -26,17 +24,16 @@ export interface DateTimeFieldProps<TDate> extends UseDateTimeFieldComponentProp
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateTimeFieldSlotProps<TDate>;
-}
-export type DateTimeFieldOwnerState<TDate> = DateTimeFieldProps<TDate>;
+    slotProps?: DateTimeFieldSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
+};
+export type DateTimeFieldOwnerState<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> = DateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
 export interface DateTimeFieldSlots extends UseClearableFieldSlots {
     /**
      * Form control with an input to render the value.
-     * Receives the same props as `@mui/material/TextField`.
-     * @default TextField from '@mui/material'
+     * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
      */
     textField?: React.ElementType;
 }
-export interface DateTimeFieldSlotProps<TDate> extends UseClearableFieldSlotProps {
-    textField?: SlotComponentProps<typeof TextField, {}, DateTimeFieldOwnerState<TDate>>;
+export interface DateTimeFieldSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends UseClearableFieldSlotProps {
+    textField?: SlotComponentProps<typeof TextField, {}, DateTimeFieldOwnerState<TDate, TEnableAccessibleFieldDOMStructure>>;
 }

package/DateTimeField/index.d.ts

@@ -1,3 +1,3 @@
 export { DateTimeField } from './DateTimeField';
 export { useDateTimeField as unstable_useDateTimeField } from './useDateTimeField';
-export type { UseDateTimeFieldProps, UseDateTimeFieldComponentProps, DateTimeFieldProps, UseDateTimeFieldDefaultizedProps, } from './DateTimeField.types';
+export type { UseDateTimeFieldProps, UseDateTimeFieldComponentProps, DateTimeFieldProps, } from './DateTimeField.types';

package/DateTimeField/useDateTimeField.d.ts

@@ -1,2 +1,3 @@
-import { UseDateTimeFieldProps, UseDateTimeFieldComponentProps } from './DateTimeField.types';
-export declare const useDateTimeField: <TDate, TChildProps extends {}>(inProps: UseDateTimeFieldComponentProps<TDate, TChildProps>) => import("../internals/hooks/useField").UseFieldResponse<Omit<TChildProps & Omit<UseDateTimeFieldProps<TDate>, "format" | "disableFuture" | "disablePast" | "maxDate" | "minDate"> & Required<Pick<UseDateTimeFieldProps<TDate>, "format" | "disableFuture" | "disablePast" | "maxDate" | "minDate">>, keyof UseDateTimeFieldProps<any>>>;
+import { UseDateTimeFieldProps } from './DateTimeField.types';
+import { PickerValidDate } from '../models';
+export declare const useDateTimeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals/hooks/useField").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps<any>> & Required<Pick<UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps<any>>>, keyof UseDateTimeFieldProps<any, TEnableAccessibleFieldDOMStructure>>>;

package/DateTimeField/useDateTimeField.js

@@ -1,27 +1,8 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateDateTime } from '../internals/utils/validation/validateDateTime';
-import { applyDefaultDate } from '../internals/utils/date-utils';
-import { useUtils, useDefaultDates } from '../internals/hooks/useUtils';
 import { splitFieldInternalAndForwardedProps } from '../internals/utils/fields';
-const useDefaultizedDateTimeField = 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,
-    disableIgnoringDatePartForTimeValidation: Boolean(props.minDateTime || props.maxDateTime),
-    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
-  });
-};
+import { useDefaultizedDateTimeField } from '../internals/hooks/defaultizedFieldProps';
 export const useDateTimeField = inProps => {
   const props = useDefaultizedDateTimeField(inProps);
   const {

package/DateTimePicker/DateTimePicker.d.ts

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

package/DateTimePicker/DateTimePicker.js

@@ -82,7 +82,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * The default value.
    * Used when the component is not controlled.
    */
-  defaultValue: PropTypes.any,
+  defaultValue: PropTypes.object,
   /**
    * CSS media query when `Mobile` mode will be changed to `Desktop`.
    * @default '@media (pointer: fine)'
@@ -123,10 +123,13 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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,
   /**
@@ -162,29 +165,29 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   /**
    * Maximal selectable date.
    */
-  maxDate: PropTypes.any,
+  maxDate: PropTypes.object,
   /**
    * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.
    */
-  maxDateTime: PropTypes.any,
+  maxDateTime: PropTypes.object,
   /**
    * Maximal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
    */
-  maxTime: PropTypes.any,
+  maxTime: PropTypes.object,
   /**
    * Minimal selectable date.
    */
-  minDate: PropTypes.any,
+  minDate: PropTypes.object,
   /**
    * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
    */
-  minDateTime: PropTypes.any,
+  minDateTime: PropTypes.object,
   /**
    * Minimal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
    */
-  minTime: PropTypes.any,
+  minTime: PropTypes.object,
   /**
    * Step over minutes.
    * @default 1
@@ -281,7 +284,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.any,
+  referenceDate: PropTypes.object,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
@@ -290,17 +293,14 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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.
    *
@@ -391,7 +391,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.any,
+  value: PropTypes.object,
   /**
    * The visible view.
    * Used when the component view is controlled.

package/DateTimePicker/DateTimePicker.types.d.ts

@@ -1,11 +1,12 @@
 import { DesktopDateTimePickerProps, DesktopDateTimePickerSlots, DesktopDateTimePickerSlotProps } from '../DesktopDateTimePicker';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { MobileDateTimePickerProps, MobileDateTimePickerSlots, MobileDateTimePickerSlotProps } from '../MobileDateTimePicker';
-export interface DateTimePickerSlots<TDate> extends DesktopDateTimePickerSlots<TDate>, MobileDateTimePickerSlots<TDate, DateOrTimeViewWithMeridiem> {
+import { PickerValidDate } from '../models';
+export interface DateTimePickerSlots<TDate extends PickerValidDate> extends DesktopDateTimePickerSlots<TDate>, MobileDateTimePickerSlots<TDate, DateOrTimeViewWithMeridiem> {
 }
-export interface DateTimePickerSlotProps<TDate> extends DesktopDateTimePickerSlotProps<TDate>, MobileDateTimePickerSlotProps<TDate, DateOrTimeViewWithMeridiem> {
+export interface DateTimePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDateTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>, MobileDateTimePickerSlotProps<TDate, DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure> {
 }
-export interface DateTimePickerProps<TDate> extends DesktopDateTimePickerProps<TDate>, Omit<MobileDateTimePickerProps<TDate, DateOrTimeViewWithMeridiem>, 'views'> {
+export interface DateTimePickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends DesktopDateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>, Omit<MobileDateTimePickerProps<TDate, DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
     /**
      * CSS media query when `Mobile` mode will be changed to `Desktop`.
      * @default '@media (pointer: fine)'
@@ -26,5 +27,5 @@ export interface DateTimePickerProps<TDate> extends DesktopDateTimePickerProps<T
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateTimePickerSlotProps<TDate>;
+    slotProps?: DateTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
 }

package/DateTimePicker/DateTimePickerTabs.d.ts

@@ -18,13 +18,13 @@ export interface ExportedDateTimePickerTabsProps extends ExportedBaseTabsProps {
      * @default Time
      */
     timeIcon?: React.ReactNode;
-}
-export interface DateTimePickerTabsProps extends ExportedDateTimePickerTabsProps, BaseTabsProps<DateOrTimeViewWithMeridiem> {
     /**
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<DateTimePickerTabsClasses>;
 }
+export interface DateTimePickerTabsProps extends ExportedDateTimePickerTabsProps, BaseTabsProps<DateOrTimeViewWithMeridiem> {
+}
 /**
  * Demos:
  *

package/DateTimePicker/DateTimePickerTabs.js

@@ -70,7 +70,8 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     timeIcon = /*#__PURE__*/_jsx(TimeIcon, {}),
     view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
-    className
+    className,
+    sx
   } = props;
   const localeText = useLocaleText();
   const classes = useUtilityClasses(props);
@@ -86,6 +87,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     value: viewToTab(view),
     onChange: handleChange,
     className: clsx(className, classes.root),
+    sx: sx,
     children: [/*#__PURE__*/_jsx(Tab, {
       value: "date",
       "aria-label": localeText.dateTableLabel,
@@ -127,6 +129,10 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.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 Time

package/DateTimePicker/DateTimePickerToolbar.d.ts

@@ -3,15 +3,16 @@ import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/
 import { DateTimePickerToolbarClasses } from './dateTimePickerToolbarClasses';
 import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models';
 import { MakeOptional } from '../internals/models/helpers';
+import { PickerValidDate } from '../models';
 export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarProps {
     ampm?: boolean;
     ampmInClock?: boolean;
-}
-export interface DateTimePickerToolbarProps<TDate> extends ExportedDateTimePickerToolbarProps, MakeOptional<BaseToolbarProps<TDate | null, DateOrTimeViewWithMeridiem>, 'view'> {
     /**
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<DateTimePickerToolbarClasses>;
+}
+export interface DateTimePickerToolbarProps<TDate extends PickerValidDate> extends ExportedDateTimePickerToolbarProps, MakeOptional<BaseToolbarProps<TDate | null, DateOrTimeViewWithMeridiem>, 'view'> {
     toolbarVariant?: WrapperVariant;
     /**
      * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
@@ -28,7 +29,7 @@ export interface DateTimePickerToolbarProps<TDate> extends ExportedDateTimePicke
  *
  * - [DateTimePickerToolbar API](https://mui.com/x/api/date-pickers/date-time-picker-toolbar/)
  */
-declare function DateTimePickerToolbar<TDate extends unknown>(inProps: DateTimePickerToolbarProps<TDate>): React.JSX.Element;
+declare function DateTimePickerToolbar<TDate extends PickerValidDate>(inProps: DateTimePickerToolbarProps<TDate>): React.JSX.Element;
 declare namespace DateTimePickerToolbar {
     var propTypes: any;
 }

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,
   /**
@@ -352,7 +355,7 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    */
   toolbarTitle: PropTypes.node,
   toolbarVariant: PropTypes.oneOf(['desktop', 'mobile']),
-  value: PropTypes.any,
+  value: PropTypes.object,
   /**
    * Currently visible picker view.
    */

package/DateTimePicker/shared.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DefaultizedProps } from '../internals/models/helpers';
-import { DateTimeValidationError } from '../models';
+import { DateTimeValidationError, PickerValidDate } from '../models';
 import { DateCalendarSlots, DateCalendarSlotProps, ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.types';
 import { TimeClockSlots, TimeClockSlotProps } from '../TimeClock/TimeClock.types';
 import { BasePickerInputProps } from '../internals/models/props/basePickerProps';
@@ -13,7 +13,7 @@ import { DateViewRendererProps } from '../dateViewRenderers';
 import { TimeViewRendererProps } from '../timeViewRenderers';
 import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock';
 import { DateOrTimeViewWithMeridiem, TimeViewWithMeridiem } from '../internals/models';
-export interface BaseDateTimePickerSlots<TDate> extends DateCalendarSlots<TDate>, TimeClockSlots {
+export interface BaseDateTimePickerSlots<TDate extends PickerValidDate> extends DateCalendarSlots<TDate>, TimeClockSlots {
     /**
      * Tabs enabling toggling between date and time pickers.
      * @default DateTimePickerTabs
@@ -25,7 +25,7 @@ export interface BaseDateTimePickerSlots<TDate> extends DateCalendarSlots<TDate>
      */
     toolbar?: React.JSXElementConstructor<DateTimePickerToolbarProps<TDate>>;
 }
-export interface BaseDateTimePickerSlotProps<TDate> extends DateCalendarSlotProps<TDate>, TimeClockSlotProps {
+export interface BaseDateTimePickerSlotProps<TDate extends PickerValidDate> extends DateCalendarSlotProps<TDate>, TimeClockSlotProps {
     /**
      * Props passed down to the tabs component.
      */
@@ -35,7 +35,7 @@ export interface BaseDateTimePickerSlotProps<TDate> extends DateCalendarSlotProp
      */
     toolbar?: ExportedDateTimePickerToolbarProps;
 }
-export interface BaseDateTimePickerProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends BasePickerInputProps<TDate | null, TDate, TView, DateTimeValidationError>, Omit<ExportedDateCalendarProps<TDate>, 'onViewChange'>, ExportedBaseClockProps<TDate>, DateTimeValidationProps<TDate> {
+export interface BaseDateTimePickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends BasePickerInputProps<TDate | null, TDate, TView, DateTimeValidationError>, Omit<ExportedDateCalendarProps<TDate>, 'onViewChange'>, ExportedBaseClockProps<TDate>, DateTimeValidationProps<TDate> {
     /**
      * Display ampm controls under the clock (instead of in the toolbar).
      * @default true on desktop, false on mobile
@@ -58,6 +58,6 @@ export interface BaseDateTimePickerProps<TDate, TView extends DateOrTimeViewWith
      */
     viewRenderers?: Partial<PickerViewRendererLookup<TDate | null, TView, DateViewRendererProps<TDate, TView> & TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TDate, TimeViewWithMeridiem>>, {}>>;
 }
-type UseDateTimePickerDefaultizedProps<TDate, TView extends DateOrTimeViewWithMeridiem, Props extends BaseDateTimePickerProps<TDate, TView>> = LocalizedComponent<TDate, DefaultizedProps<Props, 'views' | 'openTo' | 'orientation' | 'ampm' | keyof BaseDateValidationProps<TDate> | keyof BaseTimeValidationProps>>;
-export declare function useDateTimePickerDefaultizedProps<TDate, TView extends DateOrTimeViewWithMeridiem, Props extends BaseDateTimePickerProps<TDate, TView>>(props: Props, name: string): UseDateTimePickerDefaultizedProps<TDate, TView, Props>;
+type UseDateTimePickerDefaultizedProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, Props extends BaseDateTimePickerProps<TDate, TView>> = LocalizedComponent<TDate, DefaultizedProps<Props, 'views' | 'openTo' | 'orientation' | 'ampm' | keyof BaseDateValidationProps<TDate> | keyof BaseTimeValidationProps>>;
+export declare function useDateTimePickerDefaultizedProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, Props extends BaseDateTimePickerProps<TDate, TView>>(props: Props, name: string): UseDateTimePickerDefaultizedProps<TDate, TView, Props>;
 export {};

package/DesktopDatePicker/DesktopDatePicker.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { DesktopDatePickerProps } from './DesktopDatePicker.types';
-type DesktopDatePickerComponent = (<TDate>(props: DesktopDatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+import { PickerValidDate } from '../models';
+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

@@ -97,7 +97,7 @@ DesktopDatePicker.propTypes = {
    * The default value.
    * Used when the component is not controlled.
    */
-  defaultValue: PropTypes.any,
+  defaultValue: PropTypes.object,
   /**
    * If `true`, the picker and text field are disabled.
    * @default false
@@ -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,
   /**
@@ -166,11 +169,11 @@ DesktopDatePicker.propTypes = {
   /**
    * Maximal selectable date.
    */
-  maxDate: PropTypes.any,
+  maxDate: PropTypes.object,
   /**
    * Minimal selectable date.
    */
-  minDate: PropTypes.any,
+  minDate: PropTypes.object,
   /**
    * Months rendered per row.
    * @default 3
@@ -262,7 +265,7 @@ DesktopDatePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.any,
+  referenceDate: PropTypes.object,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
@@ -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.
    *
@@ -343,7 +343,7 @@ DesktopDatePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.any,
+  value: PropTypes.object,
   /**
    * The visible view.
    * Used when the component view is controlled.

package/DesktopDatePicker/DesktopDatePicker.types.d.ts

@@ -1,12 +1,12 @@
 import { UseDesktopPickerSlots, ExportedUseDesktopPickerSlotProps, DesktopOnlyPickerProps } from '../internals/hooks/useDesktopPicker';
 import { BaseDatePickerProps, BaseDatePickerSlots, BaseDatePickerSlotProps } from '../DatePicker/shared';
 import { MakeOptional } from '../internals/models/helpers';
-import { DateView } from '../models';
-export interface DesktopDatePickerSlots<TDate> extends BaseDatePickerSlots<TDate>, MakeOptional<UseDesktopPickerSlots<TDate, DateView>, 'field' | 'openPickerIcon'> {
+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 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 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 BaseDatePickerProps<TDate
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DesktopDatePickerSlotProps<TDate>;
+    slotProps?: DesktopDatePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
 }

package/DesktopDateTimePicker/DesktopDateTimePicker.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { DesktopDateTimePickerProps } from './DesktopDateTimePicker.types';
-type DesktopDateTimePickerComponent = (<TDate>(props: DesktopDateTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+import { PickerValidDate } from '../models';
+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

@@ -145,7 +145,7 @@ DesktopDateTimePicker.propTypes = {
    * The default value.
    * Used when the component is not controlled.
    */
-  defaultValue: PropTypes.any,
+  defaultValue: PropTypes.object,
   /**
    * If `true`, the picker and text field are disabled.
    * @default false
@@ -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,
   /**
@@ -219,29 +222,29 @@ DesktopDateTimePicker.propTypes = {
   /**
    * Maximal selectable date.
    */
-  maxDate: PropTypes.any,
+  maxDate: PropTypes.object,
   /**
    * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.
    */
-  maxDateTime: PropTypes.any,
+  maxDateTime: PropTypes.object,
   /**
    * Maximal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
    */
-  maxTime: PropTypes.any,
+  maxTime: PropTypes.object,
   /**
    * Minimal selectable date.
    */
-  minDate: PropTypes.any,
+  minDate: PropTypes.object,
   /**
    * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
    */
-  minDateTime: PropTypes.any,
+  minDateTime: PropTypes.object,
   /**
    * Minimal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
    */
-  minTime: PropTypes.any,
+  minTime: PropTypes.object,
   /**
    * Step over minutes.
    * @default 1
@@ -338,7 +341,7 @@ DesktopDateTimePicker.propTypes = {
    * The date used to generate the new value when both `value` and `defaultValue` are empty.
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
-  referenceDate: PropTypes.any,
+  referenceDate: PropTypes.object,
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
@@ -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.
    *
@@ -448,7 +448,7 @@ DesktopDateTimePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.any,
+  value: PropTypes.object,
   /**
    * The visible view.
    * Used when the component view is controlled.

package/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts

@@ -1,16 +1,16 @@
 import { UseDesktopPickerSlots, ExportedUseDesktopPickerSlotProps, DesktopOnlyPickerProps } from '../internals/hooks/useDesktopPicker';
 import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from '../DateTimePicker/shared';
 import { MakeOptional } from '../internals/models/helpers';
-import { DateOrTimeView } from '../models';
+import { DateOrTimeView, PickerValidDate } from '../models';
 import { DesktopOnlyTimePickerProps } from '../internals/models/props/clock';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from '../MultiSectionDigitalClock';
 import { DigitalClockSlots, DigitalClockSlotProps } from '../DigitalClock';
-export interface DesktopDateTimePickerSlots<TDate> extends BaseDateTimePickerSlots<TDate>, MakeOptional<UseDesktopPickerSlots<TDate, DateOrTimeViewWithMeridiem>, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {
+export interface DesktopDateTimePickerSlots<TDate extends PickerValidDate> extends BaseDateTimePickerSlots<TDate>, MakeOptional<UseDesktopPickerSlots<TDate, DateOrTimeViewWithMeridiem>, 'field' | 'openPickerIcon'>, DigitalClockSlots, MultiSectionDigitalClockSlots {
 }
-export interface DesktopDateTimePickerSlotProps<TDate> 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 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 BaseDateTimePickerPro
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DesktopDateTimePickerSlotProps<TDate>;
+    slotProps?: DesktopDateTimePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>;
 }