@mui/x-date-pickers 8.0.0-beta.0 → 8.0.0-beta.2

package/internals/hooks/useField/useFieldV7TextField.js

@@ -1,317 +1,185 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useFieldV7TextField = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 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 _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useField = require("./useField.utils");
 var _utils = require("../../utils/utils");
-var _usePickerTranslations = require("../../../hooks/usePickerTranslations");
-var _useUtils = require("../useUtils");
-const useFieldV7TextField = params => {
+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 useFieldV7TextField = parameters => {
   const {
-    internalProps: {
-      disabled,
-      readOnly = false,
-      autoFocus = false,
-      focused: focusedProp
-    },
-    forwardedProps: {
-      sectionListRef: inSectionListRef,
-      onBlur,
-      onClick,
-      onFocus,
-      onInput,
-      onPaste
-    },
-    fieldValueManager,
-    applyCharacterEditing,
-    resetCharacterQuery,
-    setSelectedSections,
+    props,
+    manager,
+    skipContextFieldRefAssignment,
+    manager: {
+      valueType,
+      internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
+    }
+  } = parameters;
+  const {
+    internalProps,
+    forwardedProps
+  } = (0, _hooks.useSplitFieldProps)(props, valueType);
+  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,
+    unstableFieldRef
+  } = 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,
-    clearActiveSection,
+    value,
+    // Methods to update the states
     clearValue,
-    updateSectionValue,
-    updateValueFromValueStr,
-    sectionOrder,
-    areAllSectionsEmpty,
-    sectionsValueBoundaries
-  } = params;
-  const sectionListRef = React.useRef(null);
-  const handleSectionListRef = (0, _useForkRef.default)(inSectionListRef, sectionListRef);
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
-  const utils = (0, _useUtils.useUtils)();
-  const id = (0, _useId.default)();
-  const [focused, setFocused] = React.useState(false);
-  const interactions = React.useMemo(() => ({
-    syncSelectionToDOM: () => {
-      if (!sectionListRef.current) {
-        return;
-      }
-      const selection = document.getSelection();
-      if (!selection) {
-        return;
-      }
-      if (parsedSelectedSections == null) {
-        // If the selection contains an element inside the field, we reset it.
-        if (selection.rangeCount > 0 && sectionListRef.current.getRoot().contains(selection.getRangeAt(0).startContainer)) {
-          selection.removeAllRanges();
-        }
-        if (focused) {
-          sectionListRef.current.getRoot().blur();
-        }
-        return;
-      }
-
-      // On multi input range pickers we want to update selection range only for the active input
-      if (!sectionListRef.current.getRoot().contains((0, _utils.getActiveElement)(document))) {
-        return;
-      }
-      const range = new window.Range();
-      let target;
-      if (parsedSelectedSections === 'all') {
-        target = sectionListRef.current.getRoot();
-      } else {
-        const section = state.sections[parsedSelectedSections];
-        if (section.type === 'empty') {
-          target = sectionListRef.current.getSectionContainer(parsedSelectedSections);
-        } else {
-          target = sectionListRef.current.getSectionContent(parsedSelectedSections);
-        }
-      }
-      range.selectNodeContents(target);
-      target.focus();
-      selection.removeAllRanges();
-      selection.addRange(range);
-    },
-    getActiveSectionIndexFromDOM: () => {
-      const activeElement = (0, _utils.getActiveElement)(document);
-      if (!activeElement || !sectionListRef.current || !sectionListRef.current.getRoot().contains(activeElement)) {
-        return null;
-      }
-      return sectionListRef.current.getSectionIndexFromDOMElement(activeElement);
-    },
-    focusField: (newSelectedSections = 0) => {
-      if (!sectionListRef.current ||
-      // if the field is already focused, we don't need to focus it again
-      interactions.getActiveSectionIndexFromDOM() != null) {
-        return;
-      }
-      const newParsedSelectedSections = (0, _useField.parseSelectedSections)(newSelectedSections, state.sections);
-      setFocused(true);
-      sectionListRef.current.getSectionContent(newParsedSelectedSections).focus();
-    },
-    setSelectedSections: newSelectedSections => {
-      if (!sectionListRef.current) {
-        return;
-      }
-      const newParsedSelectedSections = (0, _useField.parseSelectedSections)(newSelectedSections, state.sections);
-      const newActiveSectionIndex = newParsedSelectedSections === 'all' ? 0 : newParsedSelectedSections;
-      setFocused(newActiveSectionIndex !== null);
-      setSelectedSections(newSelectedSections);
-    },
-    isFieldFocused: () => {
-      const activeElement = (0, _utils.getActiveElement)(document);
-      return !!sectionListRef.current && sectionListRef.current.getRoot().contains(activeElement);
-    }
-  }), [parsedSelectedSections, setSelectedSections, state.sections, focused]);
-
-  /**
-   * If a section content has been updated with a value we don't want to keep,
-   * Then we need to imperatively revert it (we can't let React do it because the value did not change in his internal representation).
-   */
-  const revertDOMSectionChange = (0, _useEventCallback.default)(sectionIndex => {
-    if (!sectionListRef.current) {
-      return;
-    }
-    const section = state.sections[sectionIndex];
-    sectionListRef.current.getSectionContent(sectionIndex).innerHTML = section.value || section.placeholder;
-    interactions.syncSelectionToDOM();
+    setSelectedSections
+  } = stateResponse;
+  const applyCharacterEditing = (0, _useFieldCharacterEditing.useFieldCharacterEditing)({
+    stateResponse
   });
-  const handleContainerClick = (0, _useEventCallback.default)((event, ...args) => {
-    // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
-    // We avoid this by checking if the call of `handleContainerClick` is actually intended, or a side effect.
-    if (event.isDefaultPrevented() || !sectionListRef.current) {
+  const openPickerAriaLabel = useOpenPickerButtonAriaLabel(value);
+  const [focused, setFocused] = React.useState(false);
+  function focusField(newSelectedSections = 0) {
+    if (!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);
-    onClick?.(event, ...args);
-    if (parsedSelectedSections === 'all') {
-      setTimeout(() => {
-        const cursorPosition = document.getSelection().getRangeAt(0).startOffset;
-        if (cursorPosition === 0) {
-          setSelectedSections(sectionOrder.startIndex);
-          return;
-        }
-        let sectionIndex = 0;
-        let cursorOnStartOfSection = 0;
-        while (cursorOnStartOfSection < cursorPosition && sectionIndex < state.sections.length) {
-          const section = state.sections[sectionIndex];
-          sectionIndex += 1;
-          cursorOnStartOfSection += `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`.length;
-        }
-        setSelectedSections(sectionIndex - 1);
-      });
-    } else if (!focused) {
-      setFocused(true);
-      setSelectedSections(sectionOrder.startIndex);
-    } else {
-      const hasClickedOnASection = sectionListRef.current.getRoot().contains(event.target);
-      if (!hasClickedOnASection) {
-        setSelectedSections(sectionOrder.startIndex);
-      }
-    }
+    sectionListRef.current.getSectionContent(newParsedSelectedSections).focus();
+  }
+  const rootProps = (0, _useFieldRootProps.useFieldRootProps)({
+    manager,
+    internalPropsWithDefaults,
+    stateResponse,
+    applyCharacterEditing,
+    focused,
+    setFocused,
+    domGetters
   });
-  const handleContainerInput = (0, _useEventCallback.default)(event => {
-    onInput?.(event);
-    if (!sectionListRef.current || parsedSelectedSections !== 'all') {
-      return;
-    }
-    const target = event.target;
-    const keyPressed = target.textContent ?? '';
-    sectionListRef.current.getRoot().innerHTML = state.sections.map(section => `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`).join('');
-    interactions.syncSelectionToDOM();
-    if (keyPressed.length === 0 || keyPressed.charCodeAt(0) === 10) {
-      resetCharacterQuery();
-      clearValue();
-      setSelectedSections('all');
-    } else if (keyPressed.length > 1) {
-      updateValueFromValueStr(keyPressed);
-    } else {
-      if (parsedSelectedSections === 'all') {
-        setSelectedSections(0);
-      }
-      applyCharacterEditing({
-        keyPressed,
-        sectionIndex: 0
-      });
-    }
+  const hiddenInputProps = (0, _useFieldHiddenInputProps.useFieldHiddenInputProps)({
+    manager,
+    stateResponse
   });
-  const handleContainerPaste = (0, _useEventCallback.default)(event => {
-    onPaste?.(event);
-    if (readOnly || parsedSelectedSections !== 'all') {
-      event.preventDefault();
-      return;
-    }
-    const pastedValue = event.clipboardData.getData('text');
-    event.preventDefault();
-    resetCharacterQuery();
-    updateValueFromValueStr(pastedValue);
+  const createSectionContainerProps = (0, _useFieldSectionContainerProps.useFieldSectionContainerProps)({
+    stateResponse
   });
-  const handleContainerFocus = (0, _useEventCallback.default)(event => {
-    onFocus?.(event);
-    if (focused || !sectionListRef.current) {
-      return;
-    }
-    const activeElement = (0, _utils.getActiveElement)(document);
-    setFocused(true);
-    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(activeElement) != null;
-    if (!isFocusInsideASection) {
-      setSelectedSections(sectionOrder.startIndex);
-    }
+  const createSectionContentProps = (0, _useFieldSectionContentProps.useFieldSectionContentProps)({
+    manager,
+    stateResponse,
+    applyCharacterEditing,
+    internalPropsWithDefaults,
+    domGetters,
+    focused
+  });
+  const handleRootKeyDown = (0, _useEventCallback.default)(event => {
+    onKeyDown?.(event);
+    rootProps.onKeyDown(event);
   });
-  const handleContainerBlur = (0, _useEventCallback.default)(event => {
+  const handleRootBlur = (0, _useEventCallback.default)(event => {
     onBlur?.(event);
-    setTimeout(() => {
-      if (!sectionListRef.current) {
-        return;
-      }
-      const activeElement = (0, _utils.getActiveElement)(document);
-      const shouldBlur = !sectionListRef.current.getRoot().contains(activeElement);
-      if (shouldBlur) {
-        setFocused(false);
-        setSelectedSections(null);
-      }
-    });
+    rootProps.onBlur(event);
   });
-  const getInputContainerClickHandler = (0, _useEventCallback.default)(sectionIndex => event => {
-    // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
-    // We avoid this by checking if the call to this function is actually intended, or a side effect.
-    if (event.isDefaultPrevented()) {
-      return;
-    }
-    setSelectedSections(sectionIndex);
+  const handleRootFocus = (0, _useEventCallback.default)(event => {
+    onFocus?.(event);
+    rootProps.onFocus(event);
   });
-  const handleInputContentMouseUp = (0, _useEventCallback.default)(event => {
-    // Without this, the browser will remove the selected when clicking inside an already-selected section.
-    event.preventDefault();
+  const handleRootClick = (0, _useEventCallback.default)(event => {
+    onClick?.(event);
+    rootProps.onClick(event);
+  });
+  const handleRootPaste = (0, _useEventCallback.default)(event => {
+    onPaste?.(event);
+    rootProps.onPaste(event);
   });
-  const getInputContentFocusHandler = (0, _useEventCallback.default)(sectionIndex => () => {
-    setSelectedSections(sectionIndex);
+  const handleRootInput = (0, _useEventCallback.default)(event => {
+    onInput?.(event);
+    rootProps.onInput(event);
   });
-  const handleInputContentPaste = (0, _useEventCallback.default)(event => {
-    // prevent default to avoid the input `onInput` handler being called
+  const handleClear = (0, _useEventCallback.default)((event, ...args) => {
     event.preventDefault();
-    if (readOnly || disabled || typeof parsedSelectedSections !== 'number') {
-      return;
-    }
-    const activeSection = state.sections[parsedSelectedSections];
-    const pastedValue = event.clipboardData.getData('text');
-    const lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);
-    const digitsOnly = /^[0-9]+$/.test(pastedValue);
-    const digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
-    const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
-    if (isValidPastedValue) {
-      resetCharacterQuery();
-      updateSectionValue({
-        section: activeSection,
-        newSectionValue: pastedValue,
-        shouldGoToNextSection: true
-      });
-    }
-    // If the pasted value corresponds to a single section, but not the expected type, we skip the modification
-    else if (!lettersOnly && !digitsOnly) {
-      resetCharacterQuery();
-      updateValueFromValueStr(pastedValue);
+    onClear?.(event, ...args);
+    clearValue();
+    if (!isFieldFocused(sectionListRef)) {
+      // setSelectedSections is called internally
+      focusField(0);
+    } else {
+      setSelectedSections(sectionOrder.startIndex);
     }
   });
-  const handleInputContentDragOver = (0, _useEventCallback.default)(event => {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'none';
-  });
-  const handleInputContentInput = (0, _useEventCallback.default)(event => {
-    if (!sectionListRef.current) {
-      return;
-    }
-    const target = event.target;
-    const keyPressed = target.textContent ?? '';
-    const sectionIndex = sectionListRef.current.getSectionIndexFromDOMElement(target);
-    const section = state.sections[sectionIndex];
-    if (readOnly || !sectionListRef.current) {
-      revertDOMSectionChange(sectionIndex);
-      return;
-    }
-    if (keyPressed.length === 0) {
-      if (section.value === '') {
-        revertDOMSectionChange(sectionIndex);
-        return;
-      }
-      const inputType = event.nativeEvent.inputType;
-      if (inputType === 'insertParagraph' || inputType === 'insertLineBreak') {
-        revertDOMSectionChange(sectionIndex);
-        return;
+  const elements = React.useMemo(() => {
+    return state.sections.map((section, sectionIndex) => ({
+      container: createSectionContainerProps(sectionIndex),
+      content: createSectionContentProps(section, sectionIndex),
+      before: {
+        children: section.startSeparator
+      },
+      after: {
+        children: section.endSeparator
       }
-      resetCharacterQuery();
-      revertDOMSectionChange(sectionIndex);
-      clearActiveSection();
-      return;
+    }));
+  }, [state.sections, createSectionContainerProps, createSectionContentProps]);
+  React.useEffect(() => {
+    if (sectionListRef.current == null) {
+      throw new Error(['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`.', '', 'If you want to keep using an `<input />` HTML element for the editing, please remove the `enableAccessibleFieldDOMStructure` prop from your Picker or Field component:', '', '<DatePicker slots={{ textField: MyCustomTextField }} />', '', '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'].join('\n'));
     }
-    applyCharacterEditing({
-      keyPressed,
-      sectionIndex
-    });
+    if (autoFocus && sectionListRef.current) {
+      sectionListRef.current.getSectionContent(sectionOrder.startIndex).focus();
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-    // The DOM value needs to remain the one React is expecting.
-    revertDOMSectionChange(sectionIndex);
-  });
   (0, _useEnhancedEffect.default)(() => {
     if (!focused || !sectionListRef.current) {
       return;
@@ -325,95 +193,60 @@ const useFieldV7TextField = params => {
       }
     }
   }, [parsedSelectedSections, focused]);
-  const sectionBoundaries = React.useMemo(() => {
-    return state.sections.reduce((acc, next) => {
-      acc[next.type] = sectionsValueBoundaries[next.type]({
-        currentDate: null,
-        contentType: next.contentType,
-        format: next.format
-      });
-      return acc;
-    }, {});
-  }, [sectionsValueBoundaries, state.sections]);
-  const isContainerEditable = parsedSelectedSections === 'all';
-  const elements = React.useMemo(() => {
-    return state.sections.map((section, index) => {
-      const isEditable = !isContainerEditable && !disabled && !readOnly;
-      return {
-        container: {
-          'data-sectionindex': index,
-          onClick: getInputContainerClickHandler(index)
-        },
-        content: {
-          tabIndex: isContainerEditable || index > 0 ? -1 : 0,
-          contentEditable: !isContainerEditable && !disabled && !readOnly,
-          role: 'spinbutton',
-          id: `${id}-${section.type}`,
-          'aria-labelledby': `${id}-${section.type}`,
-          'aria-readonly': readOnly,
-          'aria-valuenow': (0, _useField.getSectionValueNow)(section, utils),
-          'aria-valuemin': sectionBoundaries[section.type].minimum,
-          'aria-valuemax': sectionBoundaries[section.type].maximum,
-          'aria-valuetext': section.value ? (0, _useField.getSectionValueText)(section, utils) : translations.empty,
-          'aria-label': translations[section.type],
-          'aria-disabled': disabled,
-          spellCheck: isEditable ? false : undefined,
-          autoCapitalize: isEditable ? 'off' : undefined,
-          autoCorrect: isEditable ? 'off' : undefined,
-          [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,
-          children: section.value || section.placeholder,
-          onInput: handleInputContentInput,
-          onPaste: handleInputContentPaste,
-          onFocus: getInputContentFocusHandler(index),
-          onDragOver: handleInputContentDragOver,
-          onMouseUp: handleInputContentMouseUp,
-          inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
-        },
-        before: {
-          children: section.startSeparator
-        },
-        after: {
-          children: section.endSeparator
-        }
-      };
+  (0, _useEnhancedEffect.default)(() => {
+    (0, _syncSelectionToDOM.syncSelectionToDOM)({
+      focused,
+      domGetters,
+      stateResponse
     });
-  }, [state.sections, getInputContentFocusHandler, handleInputContentPaste, handleInputContentDragOver, handleInputContentInput, getInputContainerClickHandler, handleInputContentMouseUp, disabled, readOnly, isContainerEditable, translations, utils, sectionBoundaries, id]);
-  const handleValueStrChange = (0, _useEventCallback.default)(event => {
-    updateValueFromValueStr(event.target.value);
   });
-  const valueStr = React.useMemo(() => areAllSectionsEmpty ? '' : fieldValueManager.getV7HiddenInputValueFromSections(state.sections), [areAllSectionsEmpty, state.sections, fieldValueManager]);
-  React.useEffect(() => {
-    if (sectionListRef.current == null) {
-      throw new Error(['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`.', '', 'If you want to keep using an `<input />` HTML element for the editing, please remove the `enableAccessibleFieldDOMStructure` prop from your Picker or Field component:', '', '<DatePicker slots={{ textField: MyCustomTextField }} />', '', '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'].join('\n'));
-    }
-    if (autoFocus && sectionListRef.current) {
-      sectionListRef.current.getSectionContent(sectionOrder.startIndex).focus();
-    }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  return {
-    interactions,
-    returnedValue: {
-      // Forwarded
-      autoFocus,
-      readOnly,
-      focused: focusedProp ?? focused,
-      sectionListRef: handleSectionListRef,
-      onBlur: handleContainerBlur,
-      onClick: handleContainerClick,
-      onFocus: handleContainerFocus,
-      onInput: handleContainerInput,
-      onPaste: handleContainerPaste,
-      // Additional
-      enableAccessibleFieldDOMStructure: true,
-      elements,
-      // TODO v7: Try to set to undefined when there is a section selected.
-      tabIndex: parsedSelectedSections === 0 ? -1 : 0,
-      contentEditable: isContainerEditable,
-      value: valueStr,
-      onChange: handleValueStrChange,
-      areAllSectionsEmpty
-    }
-  };
+  React.useImperativeHandle(unstableFieldRef, () => ({
+    getSections: () => state.sections,
+    getActiveSectionIndex: () => getActiveSectionIndex(sectionListRef),
+    setSelectedSections: newSelectedSections => {
+      if (!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)
+  }));
+  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
+    enableAccessibleFieldDOMStructure: true,
+    elements,
+    areAllSectionsEmpty,
+    disabled,
+    readOnly,
+    autoFocus,
+    openPickerAriaLabel
+  });
 };
-exports.useFieldV7TextField = useFieldV7TextField;
+exports.useFieldV7TextField = useFieldV7TextField;
+function getActiveSectionIndex(sectionListRef) {
+  const activeElement = (0, _utils.getActiveElement)(document);
+  if (!activeElement || !sectionListRef.current || !sectionListRef.current.getRoot().contains(activeElement)) {
+    return null;
+  }
+  return sectionListRef.current.getSectionIndexFromDOMElement(activeElement);
+}
+function isFieldFocused(sectionListRef) {
+  const activeElement = (0, _utils.getActiveElement)(document);
+  return !!sectionListRef.current && sectionListRef.current.getRoot().contains(activeElement);
+}

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

@@ -89,6 +89,7 @@ export interface UsePickerNonStaticProps extends Omit<PickerFieldPrivateContextV
   format?: string;
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker?: boolean;

package/internals/index.d.ts

@@ -26,7 +26,7 @@ export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDT
 export { useControlledValue } from "./hooks/useControlledValue.js";
 export type { DesktopOnlyPickerProps } from './hooks/useDesktopPicker';
 export { useField, useFieldInternalPropsWithDefaults, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./hooks/useField/index.js";
-export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext } from './hooks/useField';
+export type { UseFieldInternalProps, UseFieldParameters, UseFieldReturnValue, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext } from './hooks/useField';
 export { useFieldOwnerState } from "./hooks/useFieldOwnerState.js";
 export type { MobileOnlyPickerProps } from './hooks/useMobilePicker';
 export { useNullableFieldPrivateContext } from "./hooks/useNullableFieldPrivateContext.js";
@@ -42,7 +42,7 @@ export { useLocalizationContext, useDefaultDates, useUtils, useNow } from "./hoo
 export type { ExportedUseViewsOptions, UseViewsOptions } from './hooks/useViews';
 export { useViews } from "./hooks/useViews.js";
 export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.js";
-export type { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerError, PickerValueManager } from './models/manager';
+export type { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults, PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerError, PickerValueManager } from './models/manager';
 export type { RangePosition } from './models/pickers';
 export type { BaseSingleInputFieldProps, FieldRangeSection } from './models/fields';
 export type { BasePickerProps, BasePickerInputProps } from './models/props/basePickerProps';
@@ -65,6 +65,7 @@ export type { DayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, Exported
 export type { ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.types';
 export { useCalendarState } from "../DateCalendar/useCalendarState.js";
 export { DateTimePickerToolbarOverrideContext } from "../DateTimePicker/DateTimePickerToolbar.js";
-export { getDateFieldInternalPropsDefaults } from "../managers/useDateManager.js";
-export { getTimeFieldInternalPropsDefaults } from "../managers/useTimeManager.js";
-export { getDateTimeFieldInternalPropsDefaults } from "../managers/useDateTimeManager.js";
+export { usePickerDayOwnerState } from "../PickersDay/usePickerDayOwnerState.js";
+export { useApplyDefaultValuesToDateValidationProps } from "../managers/useDateManager.js";
+export { useApplyDefaultValuesToTimeValidationProps } from "../managers/useTimeManager.js";
+export { useApplyDefaultValuesToDateTimeValidationProps } from "../managers/useDateTimeManager.js";