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

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

@@ -0,0 +1,12 @@
+import { PickerValidDate } from "../../models/index.js";
+export interface PickerDayOwnerState {
+  day: PickerValidDate;
+  isDaySelected: boolean;
+  isDayDisabled: boolean;
+  isDayCurrent: boolean;
+  isDayOutsideMonth: boolean;
+  isDayStartOfWeek: boolean;
+  isDayEndOfWeek: boolean;
+  disableHighlightToday: boolean;
+  showDaysOutsideCurrentMonth: boolean;
+}

package/internals/hooks/useDesktopPicker/useDesktopPicker.d.mts

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

package/internals/hooks/useDesktopPicker/useDesktopPicker.d.ts

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

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

@@ -14,10 +14,10 @@ export interface UseDesktopPickerSlots extends Pick<PickerPopperSlots, 'desktopP
    */
   field: React.ElementType;
 }
-export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
-  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
+export interface ExportedUseDesktopPickerSlotProps extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue>, {}, PickerOwnerState>;
 }
-export interface UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
+export interface UseDesktopPickerSlotProps extends ExportedUseDesktopPickerSlotProps, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
 export interface DesktopOnlyPickerProps extends UsePickerNonStaticProps {
   /**
    * If `true`, the `input` element is focused during the first mount.
@@ -25,7 +25,7 @@ export interface DesktopOnlyPickerProps extends UsePickerNonStaticProps {
    */
   autoFocus?: boolean;
 }
-export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, any, TError, TExternalProps>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
+export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, any, TError, TExternalProps>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
   /**
    * Overridable component slots.
    * @default {}
@@ -35,9 +35,9 @@ export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem,
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+  slotProps?: UseDesktopPickerSlotProps;
 }
-export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
+export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopPickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
   props: TExternalProps;
   /**
    * Steps available for the picker.

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

@@ -14,10 +14,10 @@ export interface UseDesktopPickerSlots extends Pick<PickerPopperSlots, 'desktopP
    */
   field: React.ElementType;
 }
-export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
-  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
+export interface ExportedUseDesktopPickerSlotProps extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue>, {}, PickerOwnerState>;
 }
-export interface UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
+export interface UseDesktopPickerSlotProps extends ExportedUseDesktopPickerSlotProps, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
 export interface DesktopOnlyPickerProps extends UsePickerNonStaticProps {
   /**
    * If `true`, the `input` element is focused during the first mount.
@@ -25,7 +25,7 @@ export interface DesktopOnlyPickerProps extends UsePickerNonStaticProps {
    */
   autoFocus?: boolean;
 }
-export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, any, TError, TExternalProps>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
+export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, any, TError, TExternalProps>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
   /**
    * Overridable component slots.
    * @default {}
@@ -35,9 +35,9 @@ export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem,
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+  slotProps?: UseDesktopPickerSlotProps;
 }
-export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
+export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopPickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
   props: TExternalProps;
   /**
    * Steps available for the picker.

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

@@ -9,7 +9,6 @@ interface BuildSectionsFromFormatParameters {
   localeText: PickersLocaleText;
   localizedDigits: string[];
   date: PickerValidDate | null;
-  enableAccessibleFieldDOMStructure: boolean;
 }
 export declare const buildSectionsFromFormat: (parameters: BuildSectionsFromFormatParameters) => FieldSection[];
 export {};

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

@@ -9,7 +9,6 @@ interface BuildSectionsFromFormatParameters {
   localeText: PickersLocaleText;
   localizedDigits: string[];
   date: PickerValidDate | null;
-  enableAccessibleFieldDOMStructure: boolean;
 }
 export declare const buildSectionsFromFormat: (parameters: BuildSectionsFromFormatParameters) => FieldSection[];
 export {};

package/internals/hooks/useField/buildSectionsFromFormat.js

@@ -247,7 +247,7 @@ const postProcessSections = ({
 };
 const buildSectionsFromFormat = parameters => {
   let expandedFormat = expandFormat(parameters);
-  if (parameters.isRtl && parameters.enableAccessibleFieldDOMStructure) {
+  if (parameters.isRtl) {
     expandedFormat = expandedFormat.split(' ').reverse().join(' ');
   }
   const escapedParts = getEscapedPartsFromFormat((0, _extends2.default)({}, parameters, {

package/internals/hooks/useField/buildSectionsFromFormat.mjs

@@ -240,7 +240,7 @@ const postProcessSections = ({
 };
 export const buildSectionsFromFormat = parameters => {
   let expandedFormat = expandFormat(parameters);
-  if (parameters.isRtl && parameters.enableAccessibleFieldDOMStructure) {
+  if (parameters.isRtl) {
     expandedFormat = expandedFormat.split(' ').reverse().join(' ');
   }
   const escapedParts = getEscapedPartsFromFormat(_extends({}, parameters, {

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

@@ -1,4 +1,4 @@
 export { useField } from "./useField.mjs";
 export type { UseFieldInternalProps, UseFieldParameters, UseFieldReturnValue, UseFieldProps, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext } from "./useField.types.mjs";
-export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.mjs";
+export { createDateStrForHiddenInputFromSections } from "./useField.utils.mjs";
 export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.mjs";

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

@@ -1,4 +1,4 @@
 export { useField } from "./useField.js";
 export type { UseFieldInternalProps, UseFieldParameters, UseFieldReturnValue, UseFieldProps, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext } from "./useField.types.js";
-export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
+export { createDateStrForHiddenInputFromSections } from "./useField.utils.js";
 export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";

package/internals/hooks/useField/index.js

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "createDateStrForV6InputFromSections", {
+Object.defineProperty(exports, "createDateStrForHiddenInputFromSections", {
   enumerable: true,
   get: function () {
-    return _useField2.createDateStrForV6InputFromSections;
-  }
-});
-Object.defineProperty(exports, "createDateStrForV7HiddenInputFromSections", {
-  enumerable: true,
-  get: function () {
-    return _useField2.createDateStrForV7HiddenInputFromSections;
+    return _useField2.createDateStrForHiddenInputFromSections;
   }
 });
 Object.defineProperty(exports, "useField", {

package/internals/hooks/useField/index.mjs

@@ -1,3 +1,3 @@
 export { useField } from "./useField.mjs";
-export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.mjs";
+export { createDateStrForHiddenInputFromSections } from "./useField.utils.mjs";
 export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.mjs";

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

@@ -1,3 +1,3 @@
-import { UseFieldParameters, UseFieldReturnValue, UseFieldProps } from "./useField.types.mjs";
+import { UseFieldParameters, UseFieldProps, UseFieldReturnValue } from "./useField.types.mjs";
 import { PickerValidValue } from "../../models/index.mjs";
-export declare const useField: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>>(parameters: UseFieldParameters<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, TProps>) => UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;
+export declare const useField: <TValue extends PickerValidValue, TError, TValidationProps extends {}, TProps extends UseFieldProps>(parameters: UseFieldParameters<TValue, TError, TValidationProps, TProps>) => UseFieldReturnValue<TProps>;

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

@@ -1,3 +1,3 @@
-import { UseFieldParameters, UseFieldReturnValue, UseFieldProps } from "./useField.types.js";
+import { UseFieldParameters, UseFieldProps, UseFieldReturnValue } from "./useField.types.js";
 import { PickerValidValue } from "../../models/index.js";
-export declare const useField: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>>(parameters: UseFieldParameters<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, TProps>) => UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;
+export declare const useField: <TValue extends PickerValidValue, TError, TValidationProps extends {}, TProps extends UseFieldProps>(parameters: UseFieldParameters<TValue, TError, TValidationProps, TProps>) => UseFieldReturnValue<TProps>;

package/internals/hooks/useField/useField.js

@@ -1,16 +1,273 @@
 "use strict";
+'use client';
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useField = void 0;
-var _useFieldV7TextField = require("./useFieldV7TextField");
-var _useFieldV6TextField = require("./useFieldV6TextField");
-var _useNullableFieldPrivateContext = require("../useNullableFieldPrivateContext");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
+var React = _interopRequireWildcard(require("react"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _warning = require("@mui/x-internals/warning");
+var _useField = require("./useField.utils");
+var _utils = require("../../utils/utils");
+var _hooks = require("../../../hooks");
+var _useFieldCharacterEditing = require("./useFieldCharacterEditing");
+var _useFieldState = require("./useFieldState");
+var _useFieldInternalPropsWithDefaults = require("./useFieldInternalPropsWithDefaults");
+var _syncSelectionToDOM = require("./syncSelectionToDOM");
+var _useFieldRootProps = require("./useFieldRootProps");
+var _useFieldHiddenInputProps = require("./useFieldHiddenInputProps");
+var _useFieldSectionContainerProps = require("./useFieldSectionContainerProps");
+var _useFieldSectionContentProps = require("./useFieldSectionContentProps");
 const useField = parameters => {
-  const fieldPrivateContext = (0, _useNullableFieldPrivateContext.useNullableFieldPrivateContext)();
-  const enableAccessibleFieldDOMStructure = parameters.props.enableAccessibleFieldDOMStructure ?? fieldPrivateContext?.enableAccessibleFieldDOMStructure ?? true;
-  const useFieldTextField = enableAccessibleFieldDOMStructure ? _useFieldV7TextField.useFieldV7TextField : _useFieldV6TextField.useFieldV6TextField;
-  return useFieldTextField(parameters);
+  const {
+    props,
+    manager,
+    skipContextFieldRefAssignment,
+    manager: {
+      valueType,
+      internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
+    }
+  } = parameters;
+  const {
+    internalProps,
+    forwardedProps
+  } = (0, _hooks.useSplitFieldProps)(props, valueType);
+  if (process.env.NODE_ENV !== 'production') {
+    if (forwardedProps.enableAccessibleFieldDOMStructure != null) {
+      (0, _warning.warnOnce)(['MUI X: The `enableAccessibleFieldDOMStructure` prop has been removed.', 'The accessible DOM structure is now the default and only option.', 'You can safely remove the prop from your code.', 'For more information, please have a look at the migration guide (https://mui.com/x/migration/migration-pickers-v8/).']);
+    }
+  }
+  const internalPropsWithDefaults = (0, _useFieldInternalPropsWithDefaults.useFieldInternalPropsWithDefaults)({
+    manager,
+    internalProps,
+    skipContextFieldRefAssignment
+  });
+  const {
+    sectionListRef: sectionListRefProp,
+    onBlur,
+    onClick,
+    onFocus,
+    onInput,
+    onPaste,
+    onKeyDown,
+    onClear,
+    clearable
+  } = forwardedProps;
+  const {
+    disabled = false,
+    readOnly = false,
+    autoFocus = false,
+    focused: focusedProp,
+    fieldRef
+  } = internalPropsWithDefaults;
+  const sectionListRef = React.useRef(null);
+  const handleSectionListRef = (0, _useForkRef.default)(sectionListRefProp, sectionListRef);
+  const domGetters = React.useMemo(() => ({
+    isReady: () => sectionListRef.current != null,
+    getRoot: () => sectionListRef.current.getRoot(),
+    getSectionContainer: sectionIndex => sectionListRef.current.getSectionContainer(sectionIndex),
+    getSectionContent: sectionIndex => sectionListRef.current.getSectionContent(sectionIndex),
+    getSectionIndexFromDOMElement: element => sectionListRef.current.getSectionIndexFromDOMElement(element)
+  }), [sectionListRef]);
+  const stateResponse = (0, _useFieldState.useFieldState)({
+    manager,
+    internalPropsWithDefaults,
+    forwardedProps
+  });
+  const {
+    // States and derived states
+    areAllSectionsEmpty,
+    error,
+    parsedSelectedSections,
+    sectionOrder,
+    state,
+    value,
+    // Methods to update the states
+    clearValue,
+    setSelectedSections
+  } = stateResponse;
+  const applyCharacterEditing = (0, _useFieldCharacterEditing.useFieldCharacterEditing)({
+    stateResponse
+  });
+  const openPickerAriaLabel = useOpenPickerButtonAriaLabel(value);
+  const [focused, setFocused] = React.useState(false);
+  function focusField(newSelectedSections = 0) {
+    if (disabled || !sectionListRef.current ||
+    // if the field is already focused, we don't need to focus it again
+    getActiveSectionIndex(sectionListRef) != null) {
+      return;
+    }
+    const newParsedSelectedSections = (0, _useField.parseSelectedSections)(newSelectedSections, state.sections);
+    setFocused(true);
+    sectionListRef.current.getSectionContent(newParsedSelectedSections).focus();
+  }
+  const rootProps = (0, _useFieldRootProps.useFieldRootProps)({
+    manager,
+    internalPropsWithDefaults,
+    stateResponse,
+    applyCharacterEditing,
+    focused,
+    setFocused,
+    domGetters
+  });
+  const hiddenInputProps = (0, _useFieldHiddenInputProps.useFieldHiddenInputProps)({
+    manager,
+    stateResponse
+  });
+  const createSectionContainerProps = (0, _useFieldSectionContainerProps.useFieldSectionContainerProps)({
+    stateResponse,
+    internalPropsWithDefaults
+  });
+  const createSectionContentProps = (0, _useFieldSectionContentProps.useFieldSectionContentProps)({
+    manager,
+    stateResponse,
+    applyCharacterEditing,
+    internalPropsWithDefaults,
+    domGetters,
+    focused
+  });
+  const handleRootKeyDown = (0, _useEventCallback.default)(event => {
+    onKeyDown?.(event);
+    rootProps.onKeyDown(event);
+  });
+  const handleRootBlur = (0, _useEventCallback.default)(event => {
+    onBlur?.(event);
+    rootProps.onBlur(event);
+  });
+  const handleRootFocus = (0, _useEventCallback.default)(event => {
+    onFocus?.(event);
+    rootProps.onFocus(event);
+  });
+  const handleRootClick = (0, _useEventCallback.default)(event => {
+    // The click event on the clear or open button would propagate to the input, trigger this handler and result in an inadvertent section selection.
+    // We avoid this by checking if the call of `handleInputClick` is actually intended, or a propagated call, which should be skipped.
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    onClick?.(event);
+    rootProps.onClick(event);
+  });
+  const handleRootPaste = (0, _useEventCallback.default)(event => {
+    onPaste?.(event);
+    rootProps.onPaste(event);
+  });
+  const handleRootInput = (0, _useEventCallback.default)(event => {
+    onInput?.(event);
+    rootProps.onInput(event);
+  });
+  const handleClear = (0, _useEventCallback.default)((event, ...args) => {
+    event.preventDefault();
+    onClear?.(event, ...args);
+    clearValue();
+    if (!isFieldFocused(sectionListRef)) {
+      // setSelectedSections is called internally
+      focusField(0);
+    } else {
+      setSelectedSections(sectionOrder.startIndex);
+    }
+  });
+  const elements = React.useMemo(() => {
+    return state.sections.map((section, sectionIndex) => {
+      const content = createSectionContentProps(section, sectionIndex);
+      return {
+        container: createSectionContainerProps(sectionIndex),
+        content,
+        before: {
+          children: section.startSeparator
+        },
+        after: {
+          children: section.endSeparator,
+          'data-range-position': section.isEndFormatSeparator ? content['data-range-position'] : undefined
+        }
+      };
+    });
+  }, [state.sections, createSectionContainerProps, createSectionContentProps]);
+  React.useEffect(() => {
+    if (sectionListRef.current == null) {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI X: The \`sectionListRef\` prop has not been initialized by \`PickersSectionList\`
+You probably tried to pass a component to the \`textField\` slot that contains an \`<input />\` element instead of a \`PickersSectionList\`.
+
+Learn more about the field accessible DOM structure on the MUI documentation: https://mui.com/x/react-date-pickers/fields/#fields-to-edit-a-single-element` : (0, _formatErrorMessage2.default)(249));
+    }
+    if (autoFocus && !disabled) {
+      sectionListRef.current.getSectionContent(sectionOrder.startIndex).focus();
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  (0, _useEnhancedEffect.default)(() => {
+    if (!focused || !sectionListRef.current) {
+      return;
+    }
+    if (parsedSelectedSections === 'all') {
+      sectionListRef.current.getRoot().focus();
+    } else if (typeof parsedSelectedSections === 'number') {
+      const domElement = sectionListRef.current.getSectionContent(parsedSelectedSections);
+      if (domElement) {
+        domElement.focus();
+      }
+    }
+  }, [parsedSelectedSections, focused]);
+  (0, _useEnhancedEffect.default)(() => {
+    (0, _syncSelectionToDOM.syncSelectionToDOM)({
+      focused,
+      domGetters,
+      stateResponse
+    });
+  });
+  React.useImperativeHandle(fieldRef, () => ({
+    getSections: () => state.sections,
+    getActiveSectionIndex: () => getActiveSectionIndex(sectionListRef),
+    setSelectedSections: newSelectedSections => {
+      if (disabled || !sectionListRef.current) {
+        return;
+      }
+      const newParsedSelectedSections = (0, _useField.parseSelectedSections)(newSelectedSections, state.sections);
+      const newActiveSectionIndex = newParsedSelectedSections === 'all' ? 0 : newParsedSelectedSections;
+      setFocused(newActiveSectionIndex !== null);
+      setSelectedSections(newSelectedSections);
+    },
+    focusField,
+    isFieldFocused: () => isFieldFocused(sectionListRef),
+    clearValue
+  }));
+  return (0, _extends2.default)({}, forwardedProps, rootProps, {
+    onBlur: handleRootBlur,
+    onClick: handleRootClick,
+    onFocus: handleRootFocus,
+    onInput: handleRootInput,
+    onPaste: handleRootPaste,
+    onKeyDown: handleRootKeyDown,
+    onClear: handleClear
+  }, hiddenInputProps, {
+    error,
+    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled),
+    focused: focusedProp ?? focused,
+    sectionListRef: handleSectionListRef,
+    // Additional
+    elements,
+    areAllSectionsEmpty,
+    disabled,
+    readOnly,
+    autoFocus,
+    openPickerAriaLabel
+  });
 };
-exports.useField = useField;
+exports.useField = useField;
+function getActiveSectionIndex(sectionListRef) {
+  const activeElement = (0, _utils.getActiveElement)(sectionListRef.current?.getRoot());
+  if (!activeElement || !sectionListRef.current || !sectionListRef.current.getRoot().contains(activeElement)) {
+    return null;
+  }
+  return sectionListRef.current.getSectionIndexFromDOMElement(activeElement);
+}
+function isFieldFocused(sectionListRef) {
+  const activeElement = (0, _utils.getActiveElement)(sectionListRef.current?.getRoot());
+  return !!sectionListRef.current && sectionListRef.current.getRoot().contains(activeElement);
+}