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

package/internals/hooks/useField/useFieldV7TextField.js

@@ -0,0 +1,402 @@
+import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useId from '@mui/utils/useId';
+import { getSectionValueNow, getSectionValueText, parseSelectedSections } from './useField.utils';
+import { getActiveElement } from '../../utils/utils';
+import { useLocaleText, useUtils } from '../useUtils';
+export const useFieldV7TextField = params => {
+  const {
+    internalProps: {
+      disabled,
+      readOnly = false
+    },
+    forwardedProps: {
+      sectionListRef: inSectionListRef,
+      onBlur,
+      onClick,
+      onFocus,
+      onInput,
+      onPaste,
+      focused: focusedProp,
+      autoFocus = false
+    },
+    fieldValueManager,
+    applyCharacterEditing,
+    resetCharacterQuery,
+    setSelectedSections,
+    parsedSelectedSections,
+    state,
+    clearActiveSection,
+    clearValue,
+    updateSectionValue,
+    updateValueFromValueStr,
+    sectionOrder,
+    areAllSectionsEmpty,
+    sectionsValueBoundaries
+  } = params;
+  const sectionListRef = React.useRef(null);
+  const handleSectionListRef = useForkRef(inSectionListRef, sectionListRef);
+  const localeText = useLocaleText();
+  const utils = useUtils();
+  const id = useId();
+  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(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 = getActiveElement(document);
+      if (!activeElement || !sectionListRef.current || !sectionListRef.current.getRoot().contains(activeElement)) {
+        return null;
+      }
+      return sectionListRef.current.getSectionIndexFromDOMElement(activeElement);
+    },
+    focusField: (newSelectedSections = 0) => {
+      if (!sectionListRef.current) {
+        return;
+      }
+      const newParsedSelectedSections = parseSelectedSections(newSelectedSections, state.sections);
+      setFocused(true);
+      sectionListRef.current.getSectionContent(newParsedSelectedSections).focus();
+    },
+    setSelectedSections: newSelectedSections => {
+      if (!sectionListRef.current) {
+        return;
+      }
+      const newParsedSelectedSections = parseSelectedSections(newSelectedSections, state.sections);
+      const newActiveSectionIndex = newParsedSelectedSections === 'all' ? 0 : newParsedSelectedSections;
+      setFocused(newActiveSectionIndex !== null);
+      setSelectedSections(newSelectedSections);
+    },
+    isFieldFocused: () => {
+      const activeElement = 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 = useEventCallback(sectionIndex => {
+    if (!sectionListRef.current) {
+      return;
+    }
+    const section = state.sections[sectionIndex];
+    sectionListRef.current.getSectionContent(sectionIndex).innerHTML = section.value || section.placeholder;
+    interactions.syncSelectionToDOM();
+  });
+  const handleContainerClick = useEventCallback((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) {
+      return;
+    }
+    setFocused(true);
+    onClick == null || onClick(event, ...args);
+    if (parsedSelectedSections === 'all') {
+      window.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);
+      }
+    }
+  });
+  const handleContainerInput = useEventCallback(event => {
+    var _target$textContent;
+    onInput == null || onInput(event);
+    if (!sectionListRef.current || parsedSelectedSections !== 'all') {
+      return;
+    }
+    const target = event.target;
+    const keyPressed = (_target$textContent = target.textContent) != null ? _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 {
+      applyCharacterEditing({
+        keyPressed,
+        sectionIndex: 0
+      });
+    }
+  });
+  const handleContainerPaste = useEventCallback(event => {
+    onPaste == null || onPaste(event);
+    if (readOnly || parsedSelectedSections !== 'all') {
+      event.preventDefault();
+      return;
+    }
+    const pastedValue = event.clipboardData.getData('text');
+    event.preventDefault();
+    resetCharacterQuery();
+    updateValueFromValueStr(pastedValue);
+  });
+  const handleContainerFocus = useEventCallback((...args) => {
+    onFocus == null || onFocus(...args);
+    if (focused || !sectionListRef.current) {
+      return;
+    }
+    setFocused(true);
+    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(getActiveElement(document)) != null;
+    if (!isFocusInsideASection) {
+      setSelectedSections(sectionOrder.startIndex);
+    }
+  });
+  const handleContainerBlur = useEventCallback((...args) => {
+    onBlur == null || onBlur(...args);
+    window.setTimeout(() => {
+      if (!sectionListRef.current) {
+        return;
+      }
+      const activeElement = getActiveElement(document);
+      const shouldBlur = !sectionListRef.current.getRoot().contains(activeElement);
+      if (shouldBlur) {
+        setFocused(false);
+        setSelectedSections(null);
+      }
+    });
+  });
+  const getInputContainerClickHandler = useEventCallback(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() || readOnly) {
+      return;
+    }
+    setSelectedSections(sectionIndex);
+  });
+  const handleInputContentMouseUp = useEventCallback(event => {
+    // Without this, the browser will remove the selected when clicking inside an already-selected section.
+    event.preventDefault();
+  });
+  const getInputContentFocusHandler = useEventCallback(sectionIndex => () => {
+    if (readOnly) {
+      return;
+    }
+    setSelectedSections(sectionIndex);
+  });
+  const handleInputContentPaste = useEventCallback(event => {
+    // prevent default to avoid the input `onInput` handler being called
+    event.preventDefault();
+    if (readOnly || 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({
+        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);
+    }
+  });
+  const handleInputContentDragOver = useEventCallback(event => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'none';
+  });
+  const handleInputContentInput = useEventCallback(event => {
+    var _target$textContent2;
+    if (!sectionListRef.current) {
+      return;
+    }
+    const target = event.target;
+    const keyPressed = (_target$textContent2 = target.textContent) != null ? _target$textContent2 : '';
+    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;
+      }
+      resetCharacterQuery();
+      clearActiveSection();
+      return;
+    }
+    applyCharacterEditing({
+      keyPressed,
+      sectionIndex
+    });
+
+    // The DOM value needs to remain the one React is expecting.
+    revertDOMSectionChange(sectionIndex);
+  });
+  useEnhancedEffect(() => {
+    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]);
+  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 ? undefined : 0,
+          contentEditable: !isContainerEditable && !disabled && !readOnly,
+          role: 'spinbutton',
+          id: `${id}-${section.type}`,
+          'aria-labelledby': `${id}-${section.type}`,
+          'aria-readonly': readOnly,
+          'aria-valuenow': getSectionValueNow(section, utils),
+          'aria-valuemin': sectionBoundaries[section.type].minimum,
+          'aria-valuemax': sectionBoundaries[section.type].maximum,
+          'aria-valuetext': section.value ? getSectionValueText(section, utils) : localeText.empty,
+          'aria-label': localeText[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
+        }
+      };
+    });
+  }, [state.sections, getInputContentFocusHandler, handleInputContentPaste, handleInputContentDragOver, handleInputContentInput, getInputContainerClickHandler, handleInputContentMouseUp, disabled, readOnly, isContainerEditable, localeText, utils, sectionBoundaries, id]);
+  const handleValueStrChange = useEventCallback(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://next.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 != null ? 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: 0,
+      contentEditable: isContainerEditable,
+      value: valueStr,
+      onChange: handleValueStrChange,
+      areAllSectionsEmpty
+    }
+  };
+};

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

@@ -8,6 +8,6 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - MobileDateTimePicker
  * - MobileTimePicker
  */
-export declare const useMobilePicker: <TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobilePickerProps<TDate, TView, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseMobilePickerParams<TDate, TView, TExternalProps>) => {
+export declare const useMobilePicker: <TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseMobilePickerParams<TDate, TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -33,6 +33,9 @@ export const useMobilePicker = _ref => {
     sx,
     format,
     formatDensity,
+    enableAccessibleFieldDOMStructure,
+    selectedSections,
+    onSelectedSectionsChange,
     timezone,
     name,
     label,
@@ -42,7 +45,7 @@ export const useMobilePicker = _ref => {
     localeText
   } = props;
   const utils = useUtils();
-  const internalInputRef = React.useRef(null);
+  const fieldRef = React.useRef(null);
   const labelId = useId();
   const isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null || (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
   const {
@@ -53,7 +56,7 @@ export const useMobilePicker = _ref => {
     fieldProps: pickerFieldProps
   } = usePicker(_extends({}, pickerParams, {
     props,
-    inputRef: internalInputRef,
+    fieldRef,
     autoFocusView: true,
     additionalViewProps: {},
     wrapperVariant: 'mobile'
@@ -74,10 +77,15 @@ export const useMobilePicker = _ref => {
       sx,
       format,
       formatDensity,
+      enableAccessibleFieldDOMStructure,
+      selectedSections,
+      onSelectedSectionsChange,
       timezone,
       label,
       name
-    }),
+    }, inputRef ? {
+      inputRef
+    } : {}),
     ownerState: props
   });
 
@@ -89,7 +97,6 @@ export const useMobilePicker = _ref => {
     textField: slots.textField
   }, fieldProps.slots);
   const Layout = (_slots$layout = slots.layout) != null ? _slots$layout : PickersLayout;
-  const handleInputRef = useForkRef(internalInputRef, fieldProps.inputRef, inputRef);
   let labelledById = labelId;
   if (isToolbarHidden) {
     if (label) {
@@ -106,12 +113,13 @@ export const useMobilePicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps == null ? void 0 : innerSlotProps.mobilePaper)
   });
+  const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
   const renderPicker = () => /*#__PURE__*/_jsxs(LocalizationProvider, {
     localeText: localeText,
     children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
       slots: slotsForField,
       slotProps: slotProps,
-      inputRef: handleInputRef
+      unstableFieldRef: handleFieldRef
     })), /*#__PURE__*/_jsx(PickersModalDialog, _extends({}, actions, {
       open: open,
       slots: slots,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
+import TextField from '@mui/material/TextField';
 import { SlotComponentProps } from '@mui/base/utils';
 import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
 import { PickersModalDialogSlots, PickersModalDialogSlotProps } from '../../components/PickersModalDialog';
@@ -9,27 +9,27 @@ import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayo
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { DateOrTimeViewWithMeridiem } from '../../models';
+import { SlotComponentPropsFromProps } from '../../models/helpers';
 export interface UseMobilePickerSlots<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlots, ExportedPickersLayoutSlots<TDate | null, TDate, TView> {
     /**
      * Component used to enter the date with the keyboard.
      */
-    field: React.ElementType<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, any>>;
+    field: React.ElementType;
     /**
      * Form control with an input to render the value inside the default field.
-     * Receives the same props as `@mui/material/TextField`.
-     * @default TextField from '@mui/material'
+     * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
      */
-    textField?: React.ElementType<TextFieldProps>;
+    textField?: React.ElementType;
 }
-export interface ExportedUseMobilePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<TDate | null, TDate, TView> {
-    field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, unknown>>, {}, UsePickerProps<TDate | null, TDate, any, FieldSection, any, any, any>>;
+export interface ExportedUseMobilePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<TDate | null, TDate, TView> {
+    field?: SlotComponentPropsFromProps<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, unknown>, {}, UsePickerProps<TDate | null, TDate, any, any, any, any>>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
 }
-export interface UseMobilePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedUseMobilePickerSlotProps<TDate, TView>, Pick<PickersLayoutSlotProps<TDate | null, TDate, TView>, 'toolbar'> {
+export interface UseMobilePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<TDate | null, TDate, TView>, 'toolbar'> {
 }
-export interface MobileOnlyPickerProps<TDate extends PickerValidDate> extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, FieldSection>, UsePickerViewsNonStaticProps {
+export interface MobileOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps {
 }
-export interface UseMobilePickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, any, TView, any, any>> extends BasePickerProps<TDate | null, TDate, TView, TError, TExternalProps, {}>, MobileOnlyPickerProps<TDate> {
+export interface UseMobilePickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, any, TView, any, any>> extends BasePickerProps<TDate | null, TDate, TView, TError, TExternalProps, {}>, MobileOnlyPickerProps {
     /**
      * Overridable component slots.
      * @default {}
@@ -39,9 +39,9 @@ export interface UseMobilePickerProps<TDate extends PickerValidDate, TView exten
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseMobilePickerSlotProps<TDate, TView>;
+    slotProps?: UseMobilePickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseMobilePickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobilePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
+export interface UseMobilePickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;
     getOpenDialogAriaText: (date: TDate | null, utils: MuiPickersAdapter<TDate>) => string;
 }

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

@@ -2,4 +2,4 @@ import { UsePickerParams, UsePickerProps, UsePickerResponse } from './usePicker.
 import { InferError } from '../useValidation';
 import { FieldSection, PickerValidDate } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-export declare const usePicker: <TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TDate, TView, TSection, any, any, any>, TAdditionalProps extends {}>({ props, valueManager, valueType, wrapperVariant, inputRef, additionalViewProps, validator, autoFocusView, rendererInterceptor, }: UsePickerParams<TValue, TDate, TView, TSection, TExternalProps, TAdditionalProps>) => UsePickerResponse<TValue, TView, TSection, InferError<TExternalProps>>;
+export declare const usePicker: <TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TDate, TView, any, any, any>, TAdditionalProps extends {}>({ props, valueManager, valueType, wrapperVariant, additionalViewProps, validator, autoFocusView, rendererInterceptor, fieldRef, }: UsePickerParams<TValue, TDate, TView, TSection, TExternalProps, TAdditionalProps>) => UsePickerResponse<TValue, TView, TSection, InferError<TExternalProps>>;

package/internals/hooks/usePicker/usePicker.js

@@ -8,11 +8,11 @@ export const usePicker = ({
   valueManager,
   valueType,
   wrapperVariant,
-  inputRef,
   additionalViewProps,
   validator,
   autoFocusView,
-  rendererInterceptor
+  rendererInterceptor,
+  fieldRef
 }) => {
   if (process.env.NODE_ENV !== 'production') {
     if (props.renderInput != null) {
@@ -28,9 +28,9 @@ export const usePicker = ({
   });
   const pickerViewsResponse = usePickerViews({
     props,
-    inputRef,
     additionalViewProps,
     autoFocusView,
+    fieldRef,
     propsFromPickerValue: pickerValueResponse.viewProps,
     rendererInterceptor
   });

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

@@ -8,9 +8,9 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  */
 export interface UsePickerBaseProps<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueBaseProps<TValue, TError>, UsePickerViewsBaseProps<TValue, TDate, TView, TExternalProps, TAdditionalProps>, UsePickerLayoutProps {
 }
-export interface UsePickerProps<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TError, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueProps<TValue, TSection, TError>, UsePickerViewsProps<TValue, TDate, TView, TExternalProps, TAdditionalProps>, UsePickerLayoutProps {
+export interface UsePickerProps<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueProps<TValue, TError>, UsePickerViewsProps<TValue, TDate, TView, TExternalProps, TAdditionalProps>, UsePickerLayoutProps {
 }
-export interface UsePickerParams<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TDate, TView, TSection, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TDate, TSection, TExternalProps>, 'valueManager' | 'valueType' | 'wrapperVariant' | 'validator'>, Pick<UsePickerViewParams<TValue, TDate, TView, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'inputRef' | 'autoFocusView' | 'rendererInterceptor'> {
+export interface UsePickerParams<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TDate, TView, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TDate, TExternalProps>, 'valueManager' | 'valueType' | 'wrapperVariant' | 'validator'>, Pick<UsePickerViewParams<TValue, TDate, TView, TSection, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'> {
     props: TExternalProps;
 }
 export interface UsePickerResponse<TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TError> extends Omit<UsePickerValueResponse<TValue, TSection, TError>, 'viewProps' | 'layoutProps'>, Omit<UsePickerViewsResponse<TView>, 'layoutProps'>, UsePickerLayoutPropsResponse<TValue, TView> {

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

@@ -4,4 +4,4 @@ import { UsePickerValueProps, UsePickerValueParams, UsePickerValueResponse } fro
 /**
  * Manage the value lifecycle of all the pickers.
  */
-export declare const usePickerValue: <TValue, TDate extends PickerValidDate, TSection extends FieldSection, TExternalProps extends UsePickerValueProps<TValue, TSection, any>>({ props, valueManager, valueType, wrapperVariant, validator, }: UsePickerValueParams<TValue, TDate, TSection, TExternalProps>) => UsePickerValueResponse<TValue, TSection, InferError<TExternalProps>>;
+export declare const usePickerValue: <TValue, TDate extends PickerValidDate, TSection extends FieldSection, TExternalProps extends UsePickerValueProps<TValue, any>>({ props, valueManager, valueType, wrapperVariant, validator, }: UsePickerValueParams<TValue, TDate, TExternalProps>) => UsePickerValueResponse<TValue, TSection, InferError<TExternalProps>>;

package/internals/hooks/usePicker/usePickerValue.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_useControlled as useControlled } from '@mui/utils';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useOpenState } from '../useOpenState';
 import { useLocalizationContext, useUtils } from '../useUtils';
@@ -123,8 +122,6 @@ export const usePickerValue = ({
     value: inValue,
     defaultValue: inDefaultValue,
     closeOnSelect = wrapperVariant === 'desktop',
-    selectedSections: selectedSectionsProp,
-    onSelectedSectionsChange,
     timezone: timezoneProp
   } = props;
   const {
@@ -151,12 +148,6 @@ export const usePickerValue = ({
 
   const utils = useUtils();
   const adapter = useLocalizationContext();
-  const [selectedSections, setSelectedSections] = useControlled({
-    controlled: selectedSectionsProp,
-    default: null,
-    name: 'usePickerValue',
-    state: 'selectedSections'
-  });
   const {
     isOpen,
     setIsOpen
@@ -297,10 +288,6 @@ export const usePickerValue = ({
     value: newValue,
     context
   }));
-  const handleFieldSelectedSectionsChange = useEventCallback(newSelectedSections => {
-    setSelectedSections(newSelectedSections);
-    onSelectedSectionsChange == null || onSelectedSectionsChange(newSelectedSections);
-  });
   const actions = {
     onClear: handleClear,
     onAccept: handleAccept,
@@ -312,17 +299,14 @@ export const usePickerValue = ({
   };
   const fieldResponse = {
     value: dateState.draft,
-    onChange: handleChangeFromField,
-    selectedSections,
-    onSelectedSectionsChange: handleFieldSelectedSectionsChange
+    onChange: handleChangeFromField
   };
   const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
   const viewResponse = {
     value: viewValue,
     onChange: handleChange,
     onClose: handleClose,
-    open: isOpen,
-    onSelectedSectionsChange: handleFieldSelectedSectionsChange
+    open: isOpen
   };
   const isValid = testedValue => {
     const error = validator({