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

package/internals/hooks/useField/useFieldRootProps.mjs

@@ -1,19 +1,20 @@
 import useEventCallback from '@mui/utils/useEventCallback';
 import useTimeout from '@mui/utils/useTimeout';
-import { useFieldRootHandleKeyDown } from "./useFieldRootHandleKeyDown.mjs";
 import { getActiveElement } from "../../utils/utils.mjs";
 import { syncSelectionToDOM } from "./syncSelectionToDOM.mjs";
+import { usePickerAdapter } from "../../../hooks/usePickerAdapter.mjs";
+import { cleanDigitSectionValue, getLetterEditingOptions, removeLocalizedDigits } from "./useField.utils.mjs";
 
 /**
  * Generate the props to pass to the root element of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
  * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
  * @returns {UseFieldRootPropsReturnValue} The props to forward to the root element of the field.
  */
 export function useFieldRootProps(parameters) {
   const {
-    manager,
+    manager: {
+      internal_fieldValueManager: fieldValueManager
+    },
     focused,
     setFocused,
     domGetters,
@@ -23,25 +24,118 @@ export function useFieldRootProps(parameters) {
     stateResponse: {
       // States and derived states
       parsedSelectedSections,
+      sectionsValueBoundaries,
       sectionOrder,
       state,
+      value,
+      activeSectionIndex,
+      localizedDigits,
+      timezone,
       // Methods to update the states
       clearValue,
+      clearActiveSection,
       setCharacterQuery,
       setSelectedSections,
-      updateValueFromValueStr
+      updateValueFromValueStr,
+      updateSectionValue
     },
     internalPropsWithDefaults: {
       disabled = false,
-      readOnly = false
+      readOnly = false,
+      minutesStep
     }
   } = parameters;
+  const adapter = usePickerAdapter();
+  const handleKeyDown = useEventCallback(event => {
+    if (disabled) {
+      return;
+    }
 
-  // TODO: Inline onContainerKeyDown once the old DOM structure is removed
-  const handleKeyDown = useFieldRootHandleKeyDown({
-    manager,
-    internalPropsWithDefaults,
-    stateResponse
+    // eslint-disable-next-line default-case
+    switch (true) {
+      // Select all
+      case (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'A' && !event.shiftKey && !event.altKey:
+        {
+          // prevent default to make sure that the next line "select all" while updating
+          // the internal state at the same time.
+          event.preventDefault();
+          setSelectedSections('all');
+          break;
+        }
+
+      // Move selection to next section
+      case event.key === 'ArrowRight':
+        {
+          event.preventDefault();
+          if (parsedSelectedSections == null) {
+            setSelectedSections(sectionOrder.startIndex);
+          } else if (parsedSelectedSections === 'all') {
+            setSelectedSections(sectionOrder.endIndex);
+          } else {
+            const nextSectionIndex = sectionOrder.neighbors[parsedSelectedSections].rightIndex;
+            if (nextSectionIndex !== null) {
+              setSelectedSections(nextSectionIndex);
+            }
+          }
+          break;
+        }
+
+      // Move selection to previous section
+      case event.key === 'ArrowLeft':
+        {
+          event.preventDefault();
+          if (parsedSelectedSections == null) {
+            setSelectedSections(sectionOrder.endIndex);
+          } else if (parsedSelectedSections === 'all') {
+            setSelectedSections(sectionOrder.startIndex);
+          } else {
+            const nextSectionIndex = sectionOrder.neighbors[parsedSelectedSections].leftIndex;
+            if (nextSectionIndex !== null) {
+              setSelectedSections(nextSectionIndex);
+            }
+          }
+          break;
+        }
+
+      // Reset the value of the selected section
+      case event.key === 'Delete':
+        {
+          event.preventDefault();
+          if (readOnly) {
+            break;
+          }
+          if (parsedSelectedSections == null || parsedSelectedSections === 'all') {
+            clearValue();
+          } else {
+            clearActiveSection();
+          }
+          break;
+        }
+
+      // Increment / decrement the selected section value
+      case ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key):
+        {
+          event.preventDefault();
+          if (readOnly || activeSectionIndex == null) {
+            break;
+          }
+
+          // if all sections are selected, mark the currently editing one as selected
+          if (parsedSelectedSections === 'all') {
+            setSelectedSections(activeSectionIndex);
+          }
+          const activeSection = state.sections[activeSectionIndex];
+          const newSectionValue = adjustSectionValue(adapter, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, fieldValueManager.getDateFromSection(value, activeSection), {
+            minutesStep
+          });
+          updateSectionValue({
+            section: activeSection,
+            newSectionValue,
+            shouldGoToNextSection: false
+          });
+          break;
+        }
+    }
   });
   const containerClickTimeout = useTimeout();
   const handleClick = useEventCallback(event => {
@@ -148,4 +242,82 @@ export function useFieldRootProps(parameters) {
     contentEditable: parsedSelectedSections === 'all',
     tabIndex: internalPropsWithDefaults.disabled || parsedSelectedSections === 0 ? -1 : 0 // TODO: Try to set to undefined when there is a section selected.
   };
+}
+function getDeltaFromKeyCode(keyCode) {
+  switch (keyCode) {
+    case 'ArrowUp':
+      return 1;
+    case 'ArrowDown':
+      return -1;
+    case 'PageUp':
+      return 5;
+    case 'PageDown':
+      return -5;
+    default:
+      return 0;
+  }
+}
+function adjustSectionValue(adapter, timezone, section, keyCode, sectionsValueBoundaries, localizedDigits, activeDate, stepsAttributes) {
+  const delta = getDeltaFromKeyCode(keyCode);
+  const isStart = keyCode === 'Home';
+  const isEnd = keyCode === 'End';
+  const shouldSetAbsolute = section.value === '' || isStart || isEnd;
+  const adjustDigitSection = () => {
+    const sectionBoundaries = sectionsValueBoundaries[section.type]({
+      currentDate: activeDate,
+      format: section.format,
+      contentType: section.contentType
+    });
+    const getCleanValue = value => cleanDigitSectionValue(adapter, value, sectionBoundaries, localizedDigits, section);
+    const step = section.type === 'minutes' && stepsAttributes?.minutesStep ? stepsAttributes.minutesStep : 1;
+    let newSectionValueNumber;
+    if (shouldSetAbsolute) {
+      if (section.type === 'year' && !isEnd && !isStart) {
+        return adapter.formatByString(adapter.date(undefined, timezone), section.format);
+      }
+      if (delta > 0 || isStart) {
+        newSectionValueNumber = sectionBoundaries.minimum;
+      } else {
+        newSectionValueNumber = sectionBoundaries.maximum;
+      }
+    } else {
+      const currentSectionValue = parseInt(removeLocalizedDigits(section.value, localizedDigits), 10);
+      newSectionValueNumber = currentSectionValue + delta * step;
+    }
+    if (newSectionValueNumber % step !== 0) {
+      if (delta < 0 || isStart) {
+        newSectionValueNumber += step - (step + newSectionValueNumber) % step; // for JS -3 % 5 = -3 (should be 2)
+      }
+      if (delta > 0 || isEnd) {
+        newSectionValueNumber -= newSectionValueNumber % step;
+      }
+    }
+    if (newSectionValueNumber > sectionBoundaries.maximum) {
+      return getCleanValue(sectionBoundaries.minimum + (newSectionValueNumber - sectionBoundaries.maximum - 1) % (sectionBoundaries.maximum - sectionBoundaries.minimum + 1));
+    }
+    if (newSectionValueNumber < sectionBoundaries.minimum) {
+      return getCleanValue(sectionBoundaries.maximum - (sectionBoundaries.minimum - newSectionValueNumber - 1) % (sectionBoundaries.maximum - sectionBoundaries.minimum + 1));
+    }
+    return getCleanValue(newSectionValueNumber);
+  };
+  const adjustLetterSection = () => {
+    const options = getLetterEditingOptions(adapter, timezone, section.type, section.format);
+    if (options.length === 0) {
+      return section.value;
+    }
+    if (shouldSetAbsolute) {
+      if (delta > 0 || isStart) {
+        return options[0];
+      }
+      return options[options.length - 1];
+    }
+    const currentOptionIndex = options.indexOf(section.value);
+    const newOptionIndex = (currentOptionIndex + delta) % options.length;
+    const clampedIndex = (newOptionIndex + options.length) % options.length;
+    return options[clampedIndex];
+  };
+  if (section.contentType === 'digit' || section.contentType === 'digit-with-letter') {
+    return adjustDigitSection();
+  }
+  return adjustLetterSection();
 }

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

@@ -3,15 +3,13 @@ import { UseFieldStateReturnValue } from "./useFieldState.mjs";
 import { UseFieldInternalProps } from "./useField.types.mjs";
 /**
  * Generate the props to pass to the container element of each section of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
- * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
- * @returns {UseFieldRootPropsReturnValue} The props to forward to the container element of each section of the field.
+ * @param {UseFieldSectionContainerPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldSectionContainerPropsReturnValue} The props to forward to the container element of each section of the field.
  */
 export declare function useFieldSectionContainerProps(parameters: UseFieldSectionContainerPropsParameters): UseFieldSectionContainerPropsReturnValue;
 interface UseFieldSectionContainerPropsParameters {
   stateResponse: UseFieldStateReturnValue<any>;
-  internalPropsWithDefaults: UseFieldInternalProps<any, any, any>;
+  internalPropsWithDefaults: UseFieldInternalProps<any, any>;
 }
 type UseFieldSectionContainerPropsReturnValue = (sectionIndex: number) => React.HTMLAttributes<HTMLSpanElement>;
 export {};

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

@@ -3,15 +3,13 @@ import { UseFieldStateReturnValue } from "./useFieldState.js";
 import { UseFieldInternalProps } from "./useField.types.js";
 /**
  * Generate the props to pass to the container element of each section of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
- * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
- * @returns {UseFieldRootPropsReturnValue} The props to forward to the container element of each section of the field.
+ * @param {UseFieldSectionContainerPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldSectionContainerPropsReturnValue} The props to forward to the container element of each section of the field.
  */
 export declare function useFieldSectionContainerProps(parameters: UseFieldSectionContainerPropsParameters): UseFieldSectionContainerPropsReturnValue;
 interface UseFieldSectionContainerPropsParameters {
   stateResponse: UseFieldStateReturnValue<any>;
-  internalPropsWithDefaults: UseFieldInternalProps<any, any, any>;
+  internalPropsWithDefaults: UseFieldInternalProps<any, any>;
 }
 type UseFieldSectionContainerPropsReturnValue = (sectionIndex: number) => React.HTMLAttributes<HTMLSpanElement>;
 export {};

package/internals/hooks/useField/useFieldSectionContainerProps.js

@@ -8,10 +8,8 @@ exports.useFieldSectionContainerProps = useFieldSectionContainerProps;
 var React = _interopRequireWildcard(require("react"));
 /**
  * Generate the props to pass to the container element of each section of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
- * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
- * @returns {UseFieldRootPropsReturnValue} The props to forward to the container element of each section of the field.
+ * @param {UseFieldSectionContainerPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldSectionContainerPropsReturnValue} The props to forward to the container element of each section of the field.
  */
 function useFieldSectionContainerProps(parameters) {
   const {

package/internals/hooks/useField/useFieldSectionContainerProps.mjs

@@ -1,10 +1,8 @@
 import * as React from 'react';
 /**
  * Generate the props to pass to the container element of each section of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
- * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
- * @returns {UseFieldRootPropsReturnValue} The props to forward to the container element of each section of the field.
+ * @param {UseFieldSectionContainerPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldSectionContainerPropsReturnValue} The props to forward to the container element of each section of the field.
  */
 export function useFieldSectionContainerProps(parameters) {
   const {

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

@@ -1,21 +1,20 @@
 import { UseFieldStateReturnValue } from "./useFieldState.mjs";
-import { FieldSection, PickerManager } from "../../../models/index.mjs";
+import { FieldSection } from "../../../models/index.mjs";
 import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.mjs";
 import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.mjs";
+import { PickerAnyManager } from "../../models/index.mjs";
 import { PickersSectionElement } from "../../../PickersSectionList/index.mjs";
 /**
  * Generate the props to pass to the content element of each section of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
- * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
- * @returns {UseFieldRootPropsReturnValue} The props to forward to the content element of each section of the field.
+ * @param {UseFieldSectionContentPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldSectionContentPropsReturnValue} The props to forward to the content element of each section of the field.
  */
 export declare function useFieldSectionContentProps(parameters: UseFieldSectionContentPropsParameters): UseFieldSectionContentPropsReturnValue;
 interface UseFieldSectionContentPropsParameters {
-  manager: PickerManager<any, any, any, any, any>;
+  manager: PickerAnyManager;
   stateResponse: UseFieldStateReturnValue<any>;
   applyCharacterEditing: UseFieldCharacterEditingReturnValue;
-  internalPropsWithDefaults: UseFieldInternalProps<any, any, any>;
+  internalPropsWithDefaults: UseFieldInternalProps<any, any>;
   domGetters: UseFieldDOMGetters;
   focused: boolean;
 }

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

@@ -1,21 +1,20 @@
 import { UseFieldStateReturnValue } from "./useFieldState.js";
-import { FieldSection, PickerManager } from "../../../models/index.js";
+import { FieldSection } from "../../../models/index.js";
 import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.js";
 import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
+import { PickerAnyManager } from "../../models/index.js";
 import { PickersSectionElement } from "../../../PickersSectionList/index.js";
 /**
  * Generate the props to pass to the content element of each section of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
- * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
- * @returns {UseFieldRootPropsReturnValue} The props to forward to the content element of each section of the field.
+ * @param {UseFieldSectionContentPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldSectionContentPropsReturnValue} The props to forward to the content element of each section of the field.
  */
 export declare function useFieldSectionContentProps(parameters: UseFieldSectionContentPropsParameters): UseFieldSectionContentPropsReturnValue;
 interface UseFieldSectionContentPropsParameters {
-  manager: PickerManager<any, any, any, any, any>;
+  manager: PickerAnyManager;
   stateResponse: UseFieldStateReturnValue<any>;
   applyCharacterEditing: UseFieldCharacterEditingReturnValue;
-  internalPropsWithDefaults: UseFieldInternalProps<any, any, any>;
+  internalPropsWithDefaults: UseFieldInternalProps<any, any>;
   domGetters: UseFieldDOMGetters;
   focused: boolean;
 }

package/internals/hooks/useField/useFieldSectionContentProps.js

@@ -12,10 +12,8 @@ var _hooks = require("../../../hooks");
 var _syncSelectionToDOM = require("./syncSelectionToDOM");
 /**
  * Generate the props to pass to the content element of each section of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
- * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
- * @returns {UseFieldRootPropsReturnValue} The props to forward to the content element of each section of the field.
+ * @param {UseFieldSectionContentPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldSectionContentPropsReturnValue} The props to forward to the content element of each section of the field.
  */
 function useFieldSectionContentProps(parameters) {
   const adapter = (0, _hooks.usePickerAdapter)();

package/internals/hooks/useField/useFieldSectionContentProps.mjs

@@ -4,10 +4,8 @@ import { usePickerAdapter, usePickerTranslations } from "../../../hooks/index.mj
 import { syncSelectionToDOM } from "./syncSelectionToDOM.mjs";
 /**
  * Generate the props to pass to the content element of each section of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
- * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
- * @returns {UseFieldRootPropsReturnValue} The props to forward to the content element of each section of the field.
+ * @param {UseFieldSectionContentPropsParameters} parameters The parameters of the hook.
+ * @returns {UseFieldSectionContentPropsReturnValue} The props to forward to the content element of each section of the field.
  */
 export function useFieldSectionContentProps(parameters) {
   const adapter = usePickerAdapter();

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,7 +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'> {
+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,7 +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'> {
+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>;
 }