@mui/x-date-pickers 9.0.0-alpha.3 → 9.0.0-rc.0

package/internals/hooks/useField/useFieldState.d.mts

@@ -1,10 +1,10 @@
 import { UseFieldInternalProps, UseFieldState, FieldParsedSelectedSections, FieldSectionsValueBoundaries, SectionOrdering, UseFieldForwardedProps, CharacterEditingQuery } from "./useField.types.mjs";
 import { FieldSelectedSections, PickersTimezone, InferFieldSection, PickerManager } from "../../../models/index.mjs";
 import { PickerValidValue } from "../../models/index.mjs";
-export declare const useFieldState: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TForwardedProps extends UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>>(parameters: UseFieldStateParameters<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, TForwardedProps>) => UseFieldStateReturnValue<TValue>;
-interface UseFieldStateParameters<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TForwardedProps extends UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>> {
-  manager: PickerManager<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, any>;
-  internalPropsWithDefaults: UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, TError> & TValidationProps;
+export declare const useFieldState: <TValue extends PickerValidValue, TError, TValidationProps extends {}, TForwardedProps extends UseFieldForwardedProps>(parameters: UseFieldStateParameters<TValue, TError, TValidationProps, TForwardedProps>) => UseFieldStateReturnValue<TValue>;
+interface UseFieldStateParameters<TValue extends PickerValidValue, TError, TValidationProps extends {}, TForwardedProps extends UseFieldForwardedProps> {
+  manager: PickerManager<TValue, TError, TValidationProps, any>;
+  internalPropsWithDefaults: UseFieldInternalProps<TValue, TError> & TValidationProps;
   forwardedProps: TForwardedProps;
 }
 export interface UpdateSectionValueParameters<TValue extends PickerValidValue> {

package/internals/hooks/useField/useFieldState.d.ts

@@ -1,10 +1,10 @@
 import { UseFieldInternalProps, UseFieldState, FieldParsedSelectedSections, FieldSectionsValueBoundaries, SectionOrdering, UseFieldForwardedProps, CharacterEditingQuery } from "./useField.types.js";
 import { FieldSelectedSections, PickersTimezone, InferFieldSection, PickerManager } from "../../../models/index.js";
 import { PickerValidValue } from "../../models/index.js";
-export declare const useFieldState: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TForwardedProps extends UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>>(parameters: UseFieldStateParameters<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, TForwardedProps>) => UseFieldStateReturnValue<TValue>;
-interface UseFieldStateParameters<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TForwardedProps extends UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>> {
-  manager: PickerManager<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, any>;
-  internalPropsWithDefaults: UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, TError> & TValidationProps;
+export declare const useFieldState: <TValue extends PickerValidValue, TError, TValidationProps extends {}, TForwardedProps extends UseFieldForwardedProps>(parameters: UseFieldStateParameters<TValue, TError, TValidationProps, TForwardedProps>) => UseFieldStateReturnValue<TValue>;
+interface UseFieldStateParameters<TValue extends PickerValidValue, TError, TValidationProps extends {}, TForwardedProps extends UseFieldForwardedProps> {
+  manager: PickerManager<TValue, TError, TValidationProps, any>;
+  internalPropsWithDefaults: UseFieldInternalProps<TValue, TError> & TValidationProps;
   forwardedProps: TForwardedProps;
 }
 export interface UpdateSectionValueParameters<TValue extends PickerValidValue> {

package/internals/hooks/useField/useFieldState.js

@@ -42,8 +42,7 @@ const useFieldState = parameters => {
       selectedSections: selectedSectionsProp,
       onSelectedSectionsChange,
       shouldRespectLeadingZeros = false,
-      timezone: timezoneProp,
-      enableAccessibleFieldDOMStructure = true
+      timezone: timezoneProp
     },
     forwardedProps: {
       error: errorProp
@@ -85,9 +84,8 @@ const useFieldState = parameters => {
     date,
     formatDensity,
     shouldRespectLeadingZeros,
-    enableAccessibleFieldDOMStructure,
     isRtl
-  })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, adapter, formatDensity, enableAccessibleFieldDOMStructure]);
+  })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, adapter, formatDensity]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(value);
     (0, _useField.validateSections)(sections, valueType);
@@ -127,7 +125,7 @@ const useFieldState = parameters => {
   };
   const parsedSelectedSections = React.useMemo(() => (0, _useField.parseSelectedSections)(selectedSections, state.sections), [selectedSections, state.sections]);
   const activeSectionIndex = parsedSelectedSections === 'all' ? 0 : parsedSelectedSections;
-  const sectionOrder = React.useMemo(() => (0, _useField.getSectionOrder)(state.sections, isRtl && !enableAccessibleFieldDOMStructure), [state.sections, isRtl, enableAccessibleFieldDOMStructure]);
+  const sectionOrder = React.useMemo(() => (0, _useField.getSectionOrder)(state.sections), [state.sections]);
   const areAllSectionsEmpty = React.useMemo(() => state.sections.every(section => section.value === ''), [state.sections]);
 
   // When the field loses focus (no active section), consider partially filled sections as invalid.
@@ -230,7 +228,6 @@ const useFieldState = parameters => {
         date,
         formatDensity,
         shouldRespectLeadingZeros,
-        enableAccessibleFieldDOMStructure,
         isRtl
       });
       return (0, _useField.mergeDateIntoReferenceDate)(adapter, date, sections, referenceDate, false);

package/internals/hooks/useField/useFieldState.mjs

@@ -35,8 +35,7 @@ export const useFieldState = parameters => {
       selectedSections: selectedSectionsProp,
       onSelectedSectionsChange,
       shouldRespectLeadingZeros = false,
-      timezone: timezoneProp,
-      enableAccessibleFieldDOMStructure = true
+      timezone: timezoneProp
     },
     forwardedProps: {
       error: errorProp
@@ -78,9 +77,8 @@ export const useFieldState = parameters => {
     date,
     formatDensity,
     shouldRespectLeadingZeros,
-    enableAccessibleFieldDOMStructure,
     isRtl
-  })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, adapter, formatDensity, enableAccessibleFieldDOMStructure]);
+  })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, adapter, formatDensity]);
   const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(value);
     validateSections(sections, valueType);
@@ -120,7 +118,7 @@ export const useFieldState = parameters => {
   };
   const parsedSelectedSections = React.useMemo(() => parseSelectedSections(selectedSections, state.sections), [selectedSections, state.sections]);
   const activeSectionIndex = parsedSelectedSections === 'all' ? 0 : parsedSelectedSections;
-  const sectionOrder = React.useMemo(() => getSectionOrder(state.sections, isRtl && !enableAccessibleFieldDOMStructure), [state.sections, isRtl, enableAccessibleFieldDOMStructure]);
+  const sectionOrder = React.useMemo(() => getSectionOrder(state.sections), [state.sections]);
   const areAllSectionsEmpty = React.useMemo(() => state.sections.every(section => section.value === ''), [state.sections]);
 
   // When the field loses focus (no active section), consider partially filled sections as invalid.
@@ -223,7 +221,6 @@ export const useFieldState = parameters => {
         date,
         formatDensity,
         shouldRespectLeadingZeros,
-        enableAccessibleFieldDOMStructure,
         isRtl
       });
       return mergeDateIntoReferenceDate(adapter, date, sections, referenceDate, false);

package/internals/hooks/useMobilePicker/useMobilePicker.d.mts

@@ -6,10 +6,10 @@ import { DateOrTimeViewWithMeridiem } from "../../models/index.mjs";
  * - MobileDateTimePicker
  * - MobileTimePicker
  */
-export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
+export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobilePickerProps<TView, any, TExternalProps>>({
   props,
   steps,
   ...pickerParams
-}: UseMobilePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+}: UseMobilePickerParams<TView, TExternalProps>) => {
   renderPicker: () => import("react/jsx-runtime").JSX.Element;
 };

package/internals/hooks/useMobilePicker/useMobilePicker.d.ts

@@ -6,10 +6,10 @@ import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
  * - MobileDateTimePicker
  * - MobileTimePicker
  */
-export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
+export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobilePickerProps<TView, any, TExternalProps>>({
   props,
   steps,
   ...pickerParams
-}: UseMobilePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+}: UseMobilePickerParams<TView, TExternalProps>) => {
   renderPicker: () => import("react/jsx-runtime").JSX.Element;
 };

package/internals/hooks/useMobilePicker/useMobilePicker.types.d.mts

@@ -14,12 +14,12 @@ export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedP
    */
   field: React.ElementType;
 }
-export interface ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
-  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
+export interface ExportedUseMobilePickerSlotProps extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue>, {}, PickerOwnerState>;
 }
-export interface UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
+export interface UseMobilePickerSlotProps extends ExportedUseMobilePickerSlotProps, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
 export interface MobileOnlyPickerProps extends UsePickerNonStaticProps {}
-export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, MakeRequired<MobileOnlyPickerProps, 'format'> {
+export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, MakeRequired<MobileOnlyPickerProps, 'format'> {
   /**
    * Overridable component slots.
    * @default {}
@@ -29,9 +29,9 @@ export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem,
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+  slotProps?: UseMobilePickerSlotProps;
 }
-export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
+export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobilePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
   props: TExternalProps;
   /**
    * Steps available for the picker.

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

@@ -14,12 +14,12 @@ export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedP
    */
   field: React.ElementType;
 }
-export interface ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
-  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
+export interface ExportedUseMobilePickerSlotProps extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue>, {}, PickerOwnerState>;
 }
-export interface UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
+export interface UseMobilePickerSlotProps extends ExportedUseMobilePickerSlotProps, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
 export interface MobileOnlyPickerProps extends UsePickerNonStaticProps {}
-export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, MakeRequired<MobileOnlyPickerProps, 'format'> {
+export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, MakeRequired<MobileOnlyPickerProps, 'format'> {
   /**
    * Overridable component slots.
    * @default {}
@@ -29,9 +29,9 @@ export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem,
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+  slotProps?: UseMobilePickerSlotProps;
 }
-export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
+export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobilePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
   props: TExternalProps;
   /**
    * Steps available for the picker.

package/internals/hooks/useNullableFieldPrivateContext.d.mts

@@ -4,6 +4,7 @@ import { FieldRef } from "../../models/index.mjs";
 import { PickerRangeValue, PickerValue } from "../models/index.mjs";
 export declare const PickerFieldPrivateContext: React.Context<PickerFieldPrivateContextValue | null>;
 export declare function useNullableFieldPrivateContext(): PickerFieldPrivateContextValue | null;
-export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
-  fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
+export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any>, 'formatDensity' | 'selectedSections' | 'onSelectedSectionsChange'> {
+  internalFieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
+  fieldRef?: React.RefObject<FieldRef<any> | null>;
 }

package/internals/hooks/useNullableFieldPrivateContext.d.ts

@@ -4,6 +4,7 @@ import { FieldRef } from "../../models/index.js";
 import { PickerRangeValue, PickerValue } from "../models/index.js";
 export declare const PickerFieldPrivateContext: React.Context<PickerFieldPrivateContextValue | null>;
 export declare function useNullableFieldPrivateContext(): PickerFieldPrivateContextValue | null;
-export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
-  fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
+export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any>, 'formatDensity' | 'selectedSections' | 'onSelectedSectionsChange'> {
+  internalFieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
+  fieldRef?: React.RefObject<FieldRef<any> | null>;
 }

package/internals/hooks/usePicker/usePicker.js

@@ -52,7 +52,6 @@ const usePicker = ({
     readOnly,
     // Field props
     formatDensity,
-    enableAccessibleFieldDOMStructure,
     selectedSections,
     onSelectedSectionsChange,
     format,
@@ -84,7 +83,7 @@ const usePicker = ({
    */
   const [triggerElement, triggerRef] = React.useState(null);
   const popupRef = React.useRef(null);
-  const fieldRef = React.useRef(null);
+  const internalFieldRef = React.useRef(null);
   const rootRefObject = React.useRef(null);
   const rootRef = (0, _useForkRef.default)(ref, rootRefObject);
   const {
@@ -119,9 +118,14 @@ const usePicker = ({
     autoFocus: autoFocusView,
     getStepNavigation
   });
-  const clearValue = (0, _useEventCallback.default)(() => setValue(valueManager.emptyValue, {
-    source: 'view'
-  }));
+  const clearValue = (0, _useEventCallback.default)(() => {
+    if (value === null && internalFieldRef.current?.clearValue) {
+      internalFieldRef.current.clearValue();
+    }
+    setValue(valueManager.emptyValue, {
+      source: 'view'
+    });
+  });
   const setValueToToday = (0, _useEventCallback.default)(() => setValue(valueManager.getTodayValue(adapter, timezone, valueType), {
     source: 'view'
   }));
@@ -168,10 +172,10 @@ const usePicker = ({
     if (currentViewMode === 'field' && state.open) {
       setOpen(false);
       setTimeout(() => {
-        fieldRef?.current?.setSelectedSections(view);
+        internalFieldRef?.current?.setSelectedSections(view);
         // focusing the input before the range selection is done
         // calling it outside of timeout results in an inconsistent behavior between Safari And Chrome
-        fieldRef?.current?.focusField(view);
+        internalFieldRef?.current?.focusField(view);
       });
     }
   }, [view]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -270,11 +274,10 @@ const usePicker = ({
   }), [dismissViews, ownerState, hasUIView, getCurrentViewMode, labelId, triggerElement, viewContainerRole, defaultActionBarActions, onPopperExited]);
   const fieldPrivateContextValue = React.useMemo(() => ({
     formatDensity,
-    enableAccessibleFieldDOMStructure,
     selectedSections,
     onSelectedSectionsChange,
-    fieldRef
-  }), [formatDensity, enableAccessibleFieldDOMStructure, selectedSections, onSelectedSectionsChange, fieldRef]);
+    internalFieldRef
+  }), [formatDensity, selectedSections, onSelectedSectionsChange, internalFieldRef]);
   const isValidContextValue = testedValue => {
     const error = validator({
       adapter,

package/internals/hooks/usePicker/usePicker.mjs

@@ -45,7 +45,6 @@ export const usePicker = ({
     readOnly,
     // Field props
     formatDensity,
-    enableAccessibleFieldDOMStructure,
     selectedSections,
     onSelectedSectionsChange,
     format,
@@ -77,7 +76,7 @@ export const usePicker = ({
    */
   const [triggerElement, triggerRef] = React.useState(null);
   const popupRef = React.useRef(null);
-  const fieldRef = React.useRef(null);
+  const internalFieldRef = React.useRef(null);
   const rootRefObject = React.useRef(null);
   const rootRef = useForkRef(ref, rootRefObject);
   const {
@@ -112,9 +111,14 @@ export const usePicker = ({
     autoFocus: autoFocusView,
     getStepNavigation
   });
-  const clearValue = useEventCallback(() => setValue(valueManager.emptyValue, {
-    source: 'view'
-  }));
+  const clearValue = useEventCallback(() => {
+    if (value === null && internalFieldRef.current?.clearValue) {
+      internalFieldRef.current.clearValue();
+    }
+    setValue(valueManager.emptyValue, {
+      source: 'view'
+    });
+  });
   const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(adapter, timezone, valueType), {
     source: 'view'
   }));
@@ -161,10 +165,10 @@ export const usePicker = ({
     if (currentViewMode === 'field' && state.open) {
       setOpen(false);
       setTimeout(() => {
-        fieldRef?.current?.setSelectedSections(view);
+        internalFieldRef?.current?.setSelectedSections(view);
         // focusing the input before the range selection is done
         // calling it outside of timeout results in an inconsistent behavior between Safari And Chrome
-        fieldRef?.current?.focusField(view);
+        internalFieldRef?.current?.focusField(view);
       });
     }
   }, [view]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -263,11 +267,10 @@ export const usePicker = ({
   }), [dismissViews, ownerState, hasUIView, getCurrentViewMode, labelId, triggerElement, viewContainerRole, defaultActionBarActions, onPopperExited]);
   const fieldPrivateContextValue = React.useMemo(() => ({
     formatDensity,
-    enableAccessibleFieldDOMStructure,
     selectedSections,
     onSelectedSectionsChange,
-    fieldRef
-  }), [formatDensity, enableAccessibleFieldDOMStructure, selectedSections, onSelectedSectionsChange, fieldRef]);
+    internalFieldRef
+  }), [formatDensity, selectedSections, onSelectedSectionsChange, internalFieldRef]);
   const isValidContextValue = testedValue => {
     const error = validator({
       adapter,

package/internals/hooks/usePicker/usePicker.types.d.mts

@@ -1,3 +1,4 @@
+import type * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { InferError, OnErrorProps, PickerChangeHandlerContext, PickerOwnerState, PickerValidDate, PickerValueType, TimezoneProps } from "../../../models/index.mjs";
@@ -68,7 +69,7 @@ export interface UsePickerBaseProps<TValue extends PickerValidValue, TView exten
 /**
  * Props used to handle the value of non-static Pickers.
  */
-export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextValue, 'fieldRef'> {
+export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextValue, 'internalFieldRef' | 'fieldRef'> {
   /**
    * If `true`, the Picker will close after submitting the full date.
    * @default false

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

@@ -1,3 +1,4 @@
+import type * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { InferError, OnErrorProps, PickerChangeHandlerContext, PickerOwnerState, PickerValidDate, PickerValueType, TimezoneProps } from "../../../models/index.js";
@@ -68,7 +69,7 @@ export interface UsePickerBaseProps<TValue extends PickerValidValue, TView exten
 /**
  * Props used to handle the value of non-static Pickers.
  */
-export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextValue, 'fieldRef'> {
+export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextValue, 'internalFieldRef' | 'fieldRef'> {
   /**
    * If `true`, the Picker will close after submitting the full date.
    * @default false

package/{PickersDay → internals/hooks}/usePickerDayOwnerState.d.mts

@@ -1,5 +1,5 @@
-import { PickerDayOwnerState } from "./PickersDay.types.mjs";
-import { PickerValidDate } from "../models/pickers.mjs";
+import { PickerDayOwnerState } from "./PickerDay.types.mjs";
+import { PickerValidDate } from "../../models/pickers.mjs";
 export declare function usePickerDayOwnerState(parameters: UsePickerDayOwnerStateParameters): PickerDayOwnerState;
 interface UsePickerDayOwnerStateParameters {
   day: PickerValidDate;
@@ -7,7 +7,6 @@ interface UsePickerDayOwnerStateParameters {
   selected: boolean | undefined;
   today: boolean | undefined;
   outsideCurrentMonth: boolean | undefined;
-  disableMargin: boolean | undefined;
   disableHighlightToday: boolean | undefined;
   showDaysOutsideCurrentMonth: boolean | undefined;
 }

package/{PickersDay → internals/hooks}/usePickerDayOwnerState.d.ts

@@ -1,5 +1,5 @@
-import { PickerDayOwnerState } from "./PickersDay.types.js";
-import { PickerValidDate } from "../models/pickers.js";
+import { PickerDayOwnerState } from "./PickerDay.types.js";
+import { PickerValidDate } from "../../models/pickers.js";
 export declare function usePickerDayOwnerState(parameters: UsePickerDayOwnerStateParameters): PickerDayOwnerState;
 interface UsePickerDayOwnerStateParameters {
   day: PickerValidDate;
@@ -7,7 +7,6 @@ interface UsePickerDayOwnerStateParameters {
   selected: boolean | undefined;
   today: boolean | undefined;
   outsideCurrentMonth: boolean | undefined;
-  disableMargin: boolean | undefined;
   disableHighlightToday: boolean | undefined;
   showDaysOutsideCurrentMonth: boolean | undefined;
 }

package/{PickersDay → internals/hooks}/usePickerDayOwnerState.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.usePickerDayOwnerState = usePickerDayOwnerState;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
-var _usePickerAdapter = require("../hooks/usePickerAdapter");
+var _usePickerPrivateContext = require("./usePickerPrivateContext");
+var _usePickerAdapter = require("../../hooks/usePickerAdapter");
 function usePickerDayOwnerState(parameters) {
   const {
     disabled,
@@ -17,7 +17,6 @@ function usePickerDayOwnerState(parameters) {
     today,
     outsideCurrentMonth,
     day,
-    disableMargin,
     disableHighlightToday,
     showDaysOutsideCurrentMonth
   } = parameters;
@@ -33,8 +32,7 @@ function usePickerDayOwnerState(parameters) {
     isDayOutsideMonth: outsideCurrentMonth ?? false,
     isDayStartOfWeek: adapter.isSameDay(day, adapter.startOfWeek(day)),
     isDayEndOfWeek: adapter.isSameDay(day, adapter.endOfWeek(day)),
-    disableMargin: disableMargin ?? false,
     disableHighlightToday: disableHighlightToday ?? false,
     showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth ?? false
-  }), [adapter, pickerOwnerState, day, selected, disabled, today, outsideCurrentMonth, disableMargin, disableHighlightToday, showDaysOutsideCurrentMonth]);
+  }), [adapter, pickerOwnerState, day, selected, disabled, today, outsideCurrentMonth, disableHighlightToday, showDaysOutsideCurrentMonth]);
 }

package/{PickersDay → internals/hooks}/usePickerDayOwnerState.mjs

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.mjs";
-import { usePickerAdapter } from "../hooks/usePickerAdapter.mjs";
+import { usePickerPrivateContext } from "./usePickerPrivateContext.mjs";
+import { usePickerAdapter } from "../../hooks/usePickerAdapter.mjs";
 export function usePickerDayOwnerState(parameters) {
   const {
     disabled,
@@ -9,7 +9,6 @@ export function usePickerDayOwnerState(parameters) {
     today,
     outsideCurrentMonth,
     day,
-    disableMargin,
     disableHighlightToday,
     showDaysOutsideCurrentMonth
   } = parameters;
@@ -25,8 +24,7 @@ export function usePickerDayOwnerState(parameters) {
     isDayOutsideMonth: outsideCurrentMonth ?? false,
     isDayStartOfWeek: adapter.isSameDay(day, adapter.startOfWeek(day)),
     isDayEndOfWeek: adapter.isSameDay(day, adapter.endOfWeek(day)),
-    disableMargin: disableMargin ?? false,
     disableHighlightToday: disableHighlightToday ?? false,
     showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth ?? false
-  }), [adapter, pickerOwnerState, day, selected, disabled, today, outsideCurrentMonth, disableMargin, disableHighlightToday, showDaysOutsideCurrentMonth]);
+  }), [adapter, pickerOwnerState, day, selected, disabled, today, outsideCurrentMonth, disableHighlightToday, showDaysOutsideCurrentMonth]);
 }

package/internals/index.d.mts

@@ -23,10 +23,10 @@ export type { PickersToolbarTextClassKey, PickersToolbarTextClasses } from "./co
 export { pickersArrowSwitcherClasses } from "./components/PickersArrowSwitcher/pickersArrowSwitcherClasses.mjs";
 export type { PickersArrowSwitcherClassKey, PickersArrowSwitcherClasses } from "./components/PickersArrowSwitcher/pickersArrowSwitcherClasses.mjs";
 export { PickersToolbarButton } from "./components/PickersToolbarButton.mjs";
-export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from "./constants/dimensions.mjs";
+export { DAY_SIZE, DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from "./constants/dimensions.mjs";
 export { useControlledValue } from "./hooks/useControlledValue.mjs";
 export type { DesktopOnlyPickerProps } from "./hooks/useDesktopPicker/index.mjs";
-export { useField, useFieldInternalPropsWithDefaults, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./hooks/useField/index.mjs";
+export { useField, useFieldInternalPropsWithDefaults, createDateStrForHiddenInputFromSections } from "./hooks/useField/index.mjs";
 export type { UseFieldInternalProps, UseFieldParameters, UseFieldReturnValue, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext } from "./hooks/useField/index.mjs";
 export { useFieldOwnerState } from "./hooks/useFieldOwnerState.mjs";
 export type { MobileOnlyPickerProps } from "./hooks/useMobilePicker/index.mjs";
@@ -44,7 +44,7 @@ export { useLocalizationContext } from "../hooks/usePickerAdapter.mjs";
 export type { ExportedUseViewsOptions, UseViewsOptions } from "./hooks/useViews.mjs";
 export { useViews } from "./hooks/useViews.mjs";
 export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.mjs";
-export type { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults, PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerError, PickerValueManager } from "./models/manager.mjs";
+export type { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults, PickerManagerError, PickerValueManager } from "./models/manager.mjs";
 export type { RangePosition } from "./models/pickers.mjs";
 export type { BaseSingleInputFieldProps, FieldRangeSection } from "./models/fields.mjs";
 export type { BasePickerProps, BasePickerInputProps } from "./models/props/basePickerProps.mjs";
@@ -64,12 +64,13 @@ export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-ti
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.mjs";
 export { useReduceAnimations } from "./hooks/useReduceAnimations.mjs";
 export { applyDefaultViewProps } from "./utils/views.mjs";
+export { isElementInteractive } from "./utils/isElementInteractive.mjs";
 export { DayCalendar } from "../DateCalendar/DayCalendar.mjs";
 export type { DayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, ExportedDayCalendarProps } from "../DateCalendar/DayCalendar.mjs";
 export type { ExportedDateCalendarProps } from "../DateCalendar/DateCalendar.types.mjs";
 export { useCalendarState } from "../DateCalendar/useCalendarState.mjs";
 export { DateTimePickerToolbarOverrideContext } from "../DateTimePicker/DateTimePickerToolbar.mjs";
-export { usePickerDayOwnerState } from "../PickersDay/usePickerDayOwnerState.mjs";
+export { usePickerDayOwnerState } from "./hooks/usePickerDayOwnerState.mjs";
 export { useApplyDefaultValuesToDateValidationProps } from "../managers/useDateManager.mjs";
 export { useApplyDefaultValuesToTimeValidationProps } from "../managers/useTimeManager.mjs";
 export { useApplyDefaultValuesToDateTimeValidationProps } from "../managers/useDateTimeManager.mjs";

package/internals/index.d.ts

@@ -23,10 +23,10 @@ export type { PickersToolbarTextClassKey, PickersToolbarTextClasses } from "./co
 export { pickersArrowSwitcherClasses } from "./components/PickersArrowSwitcher/pickersArrowSwitcherClasses.js";
 export type { PickersArrowSwitcherClassKey, PickersArrowSwitcherClasses } from "./components/PickersArrowSwitcher/pickersArrowSwitcherClasses.js";
 export { PickersToolbarButton } from "./components/PickersToolbarButton.js";
-export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from "./constants/dimensions.js";
+export { DAY_SIZE, DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from "./constants/dimensions.js";
 export { useControlledValue } from "./hooks/useControlledValue.js";
 export type { DesktopOnlyPickerProps } from "./hooks/useDesktopPicker/index.js";
-export { useField, useFieldInternalPropsWithDefaults, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./hooks/useField/index.js";
+export { useField, useFieldInternalPropsWithDefaults, createDateStrForHiddenInputFromSections } from "./hooks/useField/index.js";
 export type { UseFieldInternalProps, UseFieldParameters, UseFieldReturnValue, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext } from "./hooks/useField/index.js";
 export { useFieldOwnerState } from "./hooks/useFieldOwnerState.js";
 export type { MobileOnlyPickerProps } from "./hooks/useMobilePicker/index.js";
@@ -44,7 +44,7 @@ export { useLocalizationContext } from "../hooks/usePickerAdapter.js";
 export type { ExportedUseViewsOptions, UseViewsOptions } from "./hooks/useViews.js";
 export { useViews } from "./hooks/useViews.js";
 export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.js";
-export type { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults, PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerError, PickerValueManager } from "./models/manager.js";
+export type { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults, PickerManagerError, PickerValueManager } from "./models/manager.js";
 export type { RangePosition } from "./models/pickers.js";
 export type { BaseSingleInputFieldProps, FieldRangeSection } from "./models/fields.js";
 export type { BasePickerProps, BasePickerInputProps } from "./models/props/basePickerProps.js";
@@ -64,12 +64,13 @@ export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-ti
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, mergeSx, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.js";
 export { useReduceAnimations } from "./hooks/useReduceAnimations.js";
 export { applyDefaultViewProps } from "./utils/views.js";
+export { isElementInteractive } from "./utils/isElementInteractive.js";
 export { DayCalendar } from "../DateCalendar/DayCalendar.js";
 export type { DayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, ExportedDayCalendarProps } from "../DateCalendar/DayCalendar.js";
 export type { ExportedDateCalendarProps } from "../DateCalendar/DateCalendar.types.js";
 export { useCalendarState } from "../DateCalendar/useCalendarState.js";
 export { DateTimePickerToolbarOverrideContext } from "../DateTimePicker/DateTimePickerToolbar.js";
-export { usePickerDayOwnerState } from "../PickersDay/usePickerDayOwnerState.js";
+export { usePickerDayOwnerState } from "./hooks/usePickerDayOwnerState.js";
 export { useApplyDefaultValuesToDateValidationProps } from "../managers/useDateManager.js";
 export { useApplyDefaultValuesToTimeValidationProps } from "../managers/useTimeManager.js";
 export { useApplyDefaultValuesToDateTimeValidationProps } from "../managers/useDateTimeManager.js";

package/internals/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "DAY_MARGIN", {
     return _dimensions.DAY_MARGIN;
   }
 });
+Object.defineProperty(exports, "DAY_SIZE", {
+  enumerable: true,
+  get: function () {
+    return _dimensions.DAY_SIZE;
+  }
+});
 Object.defineProperty(exports, "DEFAULT_DESKTOP_MODE_MEDIA_QUERY", {
   enumerable: true,
   get: function () {
@@ -141,16 +147,10 @@ Object.defineProperty(exports, "cleanFieldResponse", {
     return _PickerFieldUI.cleanFieldResponse;
   }
 });
-Object.defineProperty(exports, "createDateStrForV6InputFromSections", {
-  enumerable: true,
-  get: function () {
-    return _useField.createDateStrForV6InputFromSections;
-  }
-});
-Object.defineProperty(exports, "createDateStrForV7HiddenInputFromSections", {
+Object.defineProperty(exports, "createDateStrForHiddenInputFromSections", {
   enumerable: true,
   get: function () {
-    return _useField.createDateStrForV7HiddenInputFromSections;
+    return _useField.createDateStrForHiddenInputFromSections;
   }
 });
 Object.defineProperty(exports, "createStepNavigation", {
@@ -201,6 +201,12 @@ Object.defineProperty(exports, "isDatePickerView", {
     return _dateUtils.isDatePickerView;
   }
 });
+Object.defineProperty(exports, "isElementInteractive", {
+  enumerable: true,
+  get: function () {
+    return _isElementInteractive.isElementInteractive;
+  }
+});
 Object.defineProperty(exports, "isInternalTimeView", {
   enumerable: true,
   get: function () {
@@ -464,10 +470,11 @@ var _dateTimeUtils = require("./utils/date-time-utils");
 var _utils = require("./utils/utils");
 var _useReduceAnimations = require("./hooks/useReduceAnimations");
 var _views = require("./utils/views");
+var _isElementInteractive = require("./utils/isElementInteractive");
 var _DayCalendar = require("../DateCalendar/DayCalendar");
 var _useCalendarState = require("../DateCalendar/useCalendarState");
 var _DateTimePickerToolbar = require("../DateTimePicker/DateTimePickerToolbar");
-var _usePickerDayOwnerState = require("../PickersDay/usePickerDayOwnerState");
+var _usePickerDayOwnerState = require("./hooks/usePickerDayOwnerState");
 var _useDateManager = require("../managers/useDateManager");
 var _useTimeManager = require("../managers/useTimeManager");
 var _useDateTimeManager = require("../managers/useDateTimeManager");