@mui/x-date-pickers 8.0.0-alpha.12 → 8.0.0-alpha.14

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

@@ -1,17 +1,17 @@
-import * as React from 'react';
-import type { UseFieldInternalProps } from './useField.types';
 import { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from "../../models/index.js";
-export declare const PickerFieldPrivateContext: React.Context<PickerFieldPrivateContextValue | null>;
 /**
  * Applies the default values to the field internal props.
  * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.
  * It is only here to allow the migration to be done in smaller steps.
  */
-export declare function useFieldInternalPropsWithDefaults<TManager extends PickerAnyManager>({
-  manager,
-  internalProps
-}: {
+export declare function useFieldInternalPropsWithDefaults<TManager extends PickerAnyManager>(parameters: UseFieldInternalPropsWithDefaultsParameters<TManager>): PickerManagerFieldInternalPropsWithDefaults<TManager>;
+interface UseFieldInternalPropsWithDefaultsParameters<TManager extends PickerAnyManager> {
   manager: TManager;
   internalProps: PickerManagerFieldInternalProps<TManager>;
-}): PickerManagerFieldInternalPropsWithDefaults<TManager>;
-export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {}
+  /**
+   * Hack to make sure that on multi input range field, the `useNullableFieldPrivateContext().fieldRef` is only bound to the field matching the range position.
+   * @default false
+   */
+  skipContextFieldRefAssignment?: boolean;
+}
+export {};

package/internals/hooks/useField/useFieldInternalPropsWithDefaults.js

@@ -5,26 +5,28 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PickerFieldPrivateContext = void 0;
 exports.useFieldInternalPropsWithDefaults = useFieldInternalPropsWithDefaults;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useUtils = require("../useUtils");
 var _useNullablePickerContext = require("../useNullablePickerContext");
-const PickerFieldPrivateContext = exports.PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
-
+var _useNullableFieldPrivateContext = require("../useNullableFieldPrivateContext");
 /**
  * Applies the default values to the field internal props.
  * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.
  * It is only here to allow the migration to be done in smaller steps.
  */
-function useFieldInternalPropsWithDefaults({
-  manager,
-  internalProps
-}) {
+function useFieldInternalPropsWithDefaults(parameters) {
+  const {
+    manager,
+    internalProps,
+    skipContextFieldRefAssignment
+  } = parameters;
   const localizationContext = (0, _useUtils.useLocalizationContext)();
   const pickerContext = (0, _useNullablePickerContext.useNullablePickerContext)();
-  const fieldPrivateContext = React.useContext(PickerFieldPrivateContext);
+  const fieldPrivateContext = (0, _useNullableFieldPrivateContext.useNullableFieldPrivateContext)();
+  const handleFieldRef = (0, _useForkRef.default)(internalProps.unstableFieldRef, skipContextFieldRefAssignment ? null : fieldPrivateContext?.fieldRef);
   const setValue = pickerContext?.setValue;
   const handleChangeFromPicker = React.useCallback((newValue, ctx) => {
     return setValue?.(newValue, {
@@ -42,15 +44,19 @@ function useFieldInternalPropsWithDefaults({
         onChange: handleChangeFromPicker,
         timezone: pickerContext.timezone,
         disabled: pickerContext.disabled,
+        readOnly: pickerContext.readOnly,
+        autoFocus: pickerContext.autoFocus && !pickerContext.open,
+        focused: pickerContext.open ? true : undefined,
         format: pickerContext.fieldFormat,
         formatDensity: fieldPrivateContext.formatDensity,
         enableAccessibleFieldDOMStructure: fieldPrivateContext.enableAccessibleFieldDOMStructure,
         selectedSections: fieldPrivateContext.selectedSections,
-        onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange
+        onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange,
+        unstableFieldRef: handleFieldRef
       }, internalProps);
     }
     return manager.internal_applyDefaultsToFieldInternalProps((0, _extends2.default)({}, localizationContext, {
       internalProps: internalPropsWithDefaultsFromContext
     }));
-  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker]);
+  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker, handleFieldRef]);
 }

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

@@ -5,7 +5,7 @@ export interface UpdateSectionValueParams<TValue extends PickerValidValue> {
   /**
    * The section on which we want to apply the new value.
    */
-  activeSection: InferFieldSection<TValue>;
+  section: InferFieldSection<TValue>;
   /**
    * Value to apply to the active section.
    */
@@ -17,6 +17,7 @@ export interface UpdateSectionValueParams<TValue extends PickerValidValue> {
 }
 export interface UseFieldStateResponse<TValue extends PickerValidValue> {
   state: UseFieldState<TValue>;
+  value: TValue;
   activeSectionIndex: number | null;
   parsedSelectedSections: FieldParsedSelectedSections;
   setSelectedSections: (sections: FieldSelectedSections) => void;

package/internals/hooks/useField/useFieldState.js

@@ -9,6 +9,7 @@ exports.useFieldState = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
+var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _usePickerTranslations = require("../../../hooks/usePickerTranslations");
 var _useUtils = require("../useUtils");
@@ -42,10 +43,11 @@ const useFieldState = params => {
     }
   } = params;
   const {
-    timezone,
-    value: valueFromTheOutside,
-    handleValueChange
-  } = (0, _useValueWithTimezone.useValueWithTimezone)({
+    value,
+    handleValueChange,
+    timezone
+  } = (0, _useValueWithTimezone.useControlledValueWithTimezone)({
+    name: 'a field component',
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
@@ -53,9 +55,13 @@ const useFieldState = params => {
     onChange,
     valueManager
   });
+  const valueRef = React.useRef(value);
+  React.useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
   const localizedDigits = React.useMemo(() => (0, _useField.getLocalizedDigits)(utils), [utils]);
   const sectionsValueBoundaries = React.useMemo(() => (0, _useField.getSectionsBoundaries)(utils, localizedDigits, timezone), [utils, localizedDigits, timezone]);
-  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, date => (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
+  const getSectionsFromValue = React.useCallback(valueToAnalyze => fieldValueManager.getSectionsFromValue(valueToAnalyze, date => (0, _buildSectionsFromFormat.buildSectionsFromFormat)({
     utils,
     localeText: translations,
     localizedDigits,
@@ -67,17 +73,22 @@ const useFieldState = params => {
     isRtl
   })), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, enableAccessibleFieldDOMStructure]);
   const [state, setState] = React.useState(() => {
-    const sections = getSectionsFromValue(valueFromTheOutside);
+    const sections = getSectionsFromValue(value);
     (0, _useField.validateSections)(sections, valueType);
     const stateWithoutReferenceDate = {
       sections,
-      value: valueFromTheOutside,
+      lastValue: value,
+      lastSectionsDependencies: {
+        format,
+        isRtl,
+        locale: utils.locale
+      },
       tempValueStrAndroid: null
     };
     const granularity = (0, _getDefaultReferenceDate.getSectionTypeGranularity)(sections);
     const referenceValue = valueManager.getInitialReferenceValue({
       referenceDate: referenceDateProp,
-      value: valueFromTheOutside,
+      value,
       utils,
       props: internalProps,
       granularity,
@@ -99,29 +110,16 @@ const useFieldState = params => {
   };
   const parsedSelectedSections = React.useMemo(() => (0, _useField.parseSelectedSections)(selectedSections, state.sections), [selectedSections, state.sections]);
   const activeSectionIndex = parsedSelectedSections === 'all' ? 0 : parsedSelectedSections;
-  const publishValue = ({
-    value,
-    referenceValue,
-    sections
-  }) => {
-    setState(prevState => (0, _extends2.default)({}, prevState, {
-      sections,
-      value,
-      referenceValue,
-      tempValueStrAndroid: null
-    }));
-    if (valueManager.areValuesEqual(utils, state.value, value)) {
-      return;
-    }
+  const publishValue = newValue => {
     const context = {
       validationError: validator({
         adapter,
-        value,
+        value: newValue,
         timezone,
         props: internalProps
       })
     };
-    handleValueChange(value, context);
+    handleValueChange(newValue, context);
   };
   const setSectionValue = (sectionIndex, newSectionValue) => {
     const newSections = [...state.sections];
@@ -131,27 +129,49 @@ const useFieldState = params => {
     });
     return newSections;
   };
-  const clearValue = () => {
-    publishValue({
-      value: valueManager.emptyValue,
-      referenceValue: state.referenceValue,
-      sections: getSectionsFromValue(valueManager.emptyValue)
+  const sectionToUpdateOnNextInvalidDateRef = React.useRef(null);
+  const timeoutToUpdateSectionValueOnNextInvalidDate = (0, _useTimeout.default)();
+  const setSectionUpdateToApplyOnNextInvalidDate = newSectionValue => {
+    if (activeSectionIndex == null) {
+      return;
+    }
+    sectionToUpdateOnNextInvalidDateRef.current = {
+      sectionIndex: activeSectionIndex,
+      value: newSectionValue
+    };
+    timeoutToUpdateSectionValueOnNextInvalidDate.start(0, () => {
+      sectionToUpdateOnNextInvalidDateRef.current = null;
     });
   };
+  const clearValue = () => {
+    if (valueManager.areValuesEqual(utils, value, valueManager.emptyValue)) {
+      setState(prevState => (0, _extends2.default)({}, prevState, {
+        sections: prevState.sections.map(section => (0, _extends2.default)({}, section, {
+          value: ''
+        })),
+        tempValueStrAndroid: null
+      }));
+    } else {
+      publishValue(valueManager.emptyValue);
+    }
+  };
   const clearActiveSection = () => {
     if (activeSectionIndex == null) {
       return;
     }
     const activeSection = state.sections[activeSectionIndex];
-    const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-    const nonEmptySectionCountBefore = activeDateManager.getSections(state.sections).filter(section => section.value !== '').length;
-    const hasNoOtherNonEmptySections = nonEmptySectionCountBefore === (activeSection.value === '' ? 0 : 1);
-    const newSections = setSectionValue(activeSectionIndex, '');
-    const newActiveDate = hasNoOtherNonEmptySections ? null : utils.getInvalidDate();
-    const newValues = activeDateManager.getNewValuesFromNewActiveDate(newActiveDate);
-    publishValue((0, _extends2.default)({}, newValues, {
-      sections: newSections
-    }));
+    if (activeSection.value === '') {
+      return;
+    }
+    setSectionUpdateToApplyOnNextInvalidDate('');
+    if (fieldValueManager.getDateFromSection(value, activeSection) === null) {
+      setState(prevState => (0, _extends2.default)({}, prevState, {
+        sections: setSectionValue(activeSectionIndex, ''),
+        tempValueStrAndroid: null
+      }));
+    } else {
+      publishValue(fieldValueManager.updateDateInValue(value, activeSection, null));
+    }
   };
   const updateValueFromValueStr = valueStr => {
     const parseDateStr = (dateStr, referenceDate) => {
@@ -173,34 +193,31 @@ const useFieldState = params => {
       return (0, _useField.mergeDateIntoReferenceDate)(utils, date, sections, referenceDate, false);
     };
     const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
-    const newReferenceValue = fieldValueManager.updateReferenceValue(utils, newValue, state.referenceValue);
-    publishValue({
-      value: newValue,
-      referenceValue: newReferenceValue,
-      sections: getSectionsFromValue(newValue, state.sections)
-    });
+    publishValue(newValue);
   };
+  const timeoutToCleanActiveDateSectionsIfValueNull = (0, _useTimeout.default)();
   const updateSectionValue = ({
-    activeSection,
+    section,
     newSectionValue,
     shouldGoToNextSection
   }) => {
+    timeoutToUpdateSectionValueOnNextInvalidDate.clear();
+    timeoutToCleanActiveDateSectionsIfValueNull.clear();
+    const activeDate = fieldValueManager.getDateFromSection(value, section);
+
     /**
-     * 1. Decide which section should be focused
+     * Decide which section should be focused
      */
     if (shouldGoToNextSection && activeSectionIndex < state.sections.length - 1) {
       setSelectedSections(activeSectionIndex + 1);
     }
 
     /**
-     * 2. Try to build a valid date from the new section value
+     * Try to build a valid date from the new section value
      */
-    const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
     const newSections = setSectionValue(activeSectionIndex, newSectionValue);
-    const newActiveDateSections = activeDateManager.getSections(newSections);
+    const newActiveDateSections = fieldValueManager.getDateSectionsFromValue(newSections, section);
     const newActiveDate = (0, _useField.getDateFromDateSections)(utils, newActiveDateSections, localizedDigits);
-    let values;
-    let shouldPublish;
 
     /**
      * If the new date is valid,
@@ -208,23 +225,43 @@ const useFieldState = params => {
      * This makes sure that we don't lose some information of the initial date (like the time on a date field).
      */
     if (utils.isValid(newActiveDate)) {
-      const mergedDate = (0, _useField.mergeDateIntoReferenceDate)(utils, newActiveDate, newActiveDateSections, activeDateManager.referenceDate, true);
-      values = activeDateManager.getNewValuesFromNewActiveDate(mergedDate);
-      shouldPublish = true;
-    } else {
-      values = activeDateManager.getNewValuesFromNewActiveDate(newActiveDate);
-      shouldPublish = (newActiveDate != null && !utils.isValid(newActiveDate)) !== (activeDateManager.date != null && !utils.isValid(activeDateManager.date));
+      const mergedDate = (0, _useField.mergeDateIntoReferenceDate)(utils, newActiveDate, newActiveDateSections, fieldValueManager.getDateFromSection(state.referenceValue, section), true);
+      if (activeDate == null) {
+        timeoutToCleanActiveDateSectionsIfValueNull.start(0, () => {
+          if (valueRef.current === value) {
+            setState(prevState => (0, _extends2.default)({}, prevState, {
+              sections: fieldValueManager.clearDateSections(state.sections, section),
+              tempValueStrAndroid: null
+            }));
+          }
+        });
+      }
+      return publishValue(fieldValueManager.updateDateInValue(value, section, mergedDate));
     }
 
     /**
-     * Publish or update the internal state with the new value and sections.
+     * If all the sections are filled but the date is invalid,
+     * Then we publish an invalid date.
      */
-    if (shouldPublish) {
-      return publishValue((0, _extends2.default)({}, values, {
-        sections: newSections
-      }));
+    if (newActiveDateSections.every(sectionBis => sectionBis.value !== '')) {
+      setSectionUpdateToApplyOnNextInvalidDate(newSectionValue);
+      return publishValue(fieldValueManager.updateDateInValue(value, section, newActiveDate));
+    }
+
+    /**
+     * If the previous date is not null,
+     * Then we publish the date as `null`.
+     */
+    if (activeDate != null) {
+      setSectionUpdateToApplyOnNextInvalidDate(newSectionValue);
+      return publishValue(fieldValueManager.updateDateInValue(value, section, null));
     }
-    return setState(prevState => (0, _extends2.default)({}, prevState, values, {
+
+    /**
+     * If the previous date is already null,
+     * Then we don't publish the date and we update the sections.
+     */
+    return setState(prevState => (0, _extends2.default)({}, prevState, {
       sections: newSections,
       tempValueStrAndroid: null
     }));
@@ -232,32 +269,48 @@ const useFieldState = params => {
   const setTempAndroidValueStr = tempValueStrAndroid => setState(prev => (0, _extends2.default)({}, prev, {
     tempValueStrAndroid
   }));
-  React.useEffect(() => {
-    const sections = getSectionsFromValue(state.value);
+
+  // If `prop.value` changes, we update the state to reflect the new value
+  if (value !== state.lastValue) {
+    let sections;
+    if (sectionToUpdateOnNextInvalidDateRef.current != null && !utils.isValid(fieldValueManager.getDateFromSection(value, state.sections[sectionToUpdateOnNextInvalidDateRef.current.sectionIndex]))) {
+      sections = setSectionValue(sectionToUpdateOnNextInvalidDateRef.current.sectionIndex, sectionToUpdateOnNextInvalidDateRef.current.value);
+    } else {
+      sections = getSectionsFromValue(value);
+    }
+    setState(prevState => (0, _extends2.default)({}, prevState, {
+      lastValue: value,
+      sections,
+      sectionsDependencies: {
+        format,
+        isRtl,
+        locale: utils.locale
+      },
+      referenceValue: fieldValueManager.updateReferenceValue(utils, value, prevState.referenceValue),
+      tempValueStrAndroid: null
+    }));
+  }
+  if (isRtl !== state.lastSectionsDependencies.isRtl || format !== state.lastSectionsDependencies.format || utils.locale !== state.lastSectionsDependencies.locale) {
+    const sections = getSectionsFromValue(value);
     (0, _useField.validateSections)(sections, valueType);
     setState(prevState => (0, _extends2.default)({}, prevState, {
-      sections
+      lastSectionsDependencies: {
+        format,
+        isRtl,
+        locale: utils.locale
+      },
+      sections,
+      tempValueStrAndroid: null
     }));
-  }, [format, utils.locale, isRtl]); // eslint-disable-line react-hooks/exhaustive-deps
-
+  }
   React.useEffect(() => {
-    let shouldUpdate;
-    if (!valueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) {
-      shouldUpdate = true;
-    } else {
-      shouldUpdate = valueManager.getTimezone(utils, state.value) !== valueManager.getTimezone(utils, valueFromTheOutside);
-    }
-    if (shouldUpdate) {
-      setState(prevState => (0, _extends2.default)({}, prevState, {
-        value: valueFromTheOutside,
-        referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, prevState.referenceValue),
-        sections: getSectionsFromValue(valueFromTheOutside)
-      }));
+    if (sectionToUpdateOnNextInvalidDateRef.current != null) {
+      sectionToUpdateOnNextInvalidDateRef.current = null;
     }
-  }, [valueFromTheOutside]); // eslint-disable-line react-hooks/exhaustive-deps
-
+  });
   return {
     state,
+    value,
     activeSectionIndex,
     parsedSelectedSections,
     setSelectedSections,

package/internals/hooks/useField/useFieldV6TextField.js

@@ -57,7 +57,8 @@ const useFieldV6TextField = params => {
     },
     internalProps: {
       readOnly = false,
-      disabled = false
+      disabled = false,
+      focused
     },
     parsedSelectedSections,
     activeSectionIndex,
@@ -165,8 +166,8 @@ const useFieldV6TextField = params => {
     const sectionIndex = nextSectionIndex === -1 ? sections.length - 1 : nextSectionIndex - 1;
     setSelectedSections(sectionIndex);
   };
-  const handleInputFocus = (0, _useEventCallback.default)((...args) => {
-    onFocus?.(...args);
+  const handleInputFocus = (0, _useEventCallback.default)(event => {
+    onFocus?.(event);
     // The ref is guaranteed to be resolved at this point.
     const input = inputRef.current;
     clearTimeout(focusTimeoutRef.current);
@@ -214,7 +215,7 @@ const useFieldV6TextField = params => {
       if (isValidPastedValue) {
         resetCharacterQuery();
         updateSectionValue({
-          activeSection,
+          section: activeSection,
           newSectionValue: pastedValue,
           shouldGoToNextSection: true
         });
@@ -229,8 +230,8 @@ const useFieldV6TextField = params => {
     resetCharacterQuery();
     updateValueFromValueStr(pastedValue);
   });
-  const handleContainerBlur = (0, _useEventCallback.default)((...args) => {
-    onBlur?.(...args);
+  const handleContainerBlur = (0, _useEventCallback.default)(event => {
+    onBlur?.(event);
     setSelectedSections(null);
   });
   const handleInputChange = (0, _useEventCallback.default)(event => {
@@ -343,7 +344,8 @@ const useFieldV6TextField = params => {
       inputMode,
       autoComplete: 'off',
       value: shouldShowPlaceholder ? '' : valueStr,
-      onChange: handleInputChange
+      onChange: handleInputChange,
+      focused
     }
   };
 };

package/internals/hooks/useField/useFieldV7TextField.js

@@ -20,7 +20,8 @@ const useFieldV7TextField = params => {
     internalProps: {
       disabled,
       readOnly = false,
-      autoFocus = false
+      autoFocus = false,
+      focused: focusedProp
     },
     forwardedProps: {
       sectionListRef: inSectionListRef,
@@ -28,8 +29,7 @@ const useFieldV7TextField = params => {
       onClick,
       onFocus,
       onInput,
-      onPaste,
-      focused: focusedProp
+      onPaste
     },
     fieldValueManager,
     applyCharacterEditing,
@@ -206,8 +206,8 @@ const useFieldV7TextField = params => {
     resetCharacterQuery();
     updateValueFromValueStr(pastedValue);
   });
-  const handleContainerFocus = (0, _useEventCallback.default)((...args) => {
-    onFocus?.(...args);
+  const handleContainerFocus = (0, _useEventCallback.default)(event => {
+    onFocus?.(event);
     if (focused || !sectionListRef.current) {
       return;
     }
@@ -218,8 +218,8 @@ const useFieldV7TextField = params => {
       setSelectedSections(sectionOrder.startIndex);
     }
   });
-  const handleContainerBlur = (0, _useEventCallback.default)((...args) => {
-    onBlur?.(...args);
+  const handleContainerBlur = (0, _useEventCallback.default)(event => {
+    onBlur?.(event);
     setTimeout(() => {
       if (!sectionListRef.current) {
         return;
@@ -262,7 +262,7 @@ const useFieldV7TextField = params => {
     if (isValidPastedValue) {
       resetCharacterQuery();
       updateSectionValue({
-        activeSection,
+        section: activeSection,
         newSectionValue: pastedValue,
         shouldGoToNextSection: true
       });
@@ -300,6 +300,7 @@ const useFieldV7TextField = params => {
         return;
       }
       resetCharacterQuery();
+      revertDOMSectionChange(sectionIndex);
       clearActiveSection();
       return;
     }

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -10,8 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _PickersModalDialog = require("../../components/PickersModalDialog");
 var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
@@ -36,35 +34,26 @@ const useMobilePicker = _ref => {
     slotProps: innerSlotProps,
     label,
     inputRef,
-    readOnly,
-    autoFocus,
     localeText
   } = props;
-  const fieldRef = React.useRef(null);
-  const labelId = (0, _useId.default)();
-  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
     providerProps,
     renderCurrentView,
     ownerState
   } = (0, _usePicker.usePicker)((0, _extends2.default)({}, pickerParams, {
     props,
-    fieldRef,
     localeText,
     autoFocusView: true,
+    viewContainerRole: 'dialog',
     variant: 'mobile'
   }));
+  const labelId = providerProps.privateContextValue.labelId;
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const Field = slots.field;
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
-      additionalProps: (0, _extends2.default)({
-        // Internal props
-        readOnly,
-        autoFocus: autoFocus && !props.open,
-        // Forwarded props
-        focused: providerProps.contextValue.open ? true : undefined
-      }, isToolbarHidden && {
+      additionalProps: (0, _extends2.default)({}, isToolbarHidden && {
         id: labelId
       }),
       ownerState
@@ -87,17 +76,12 @@ const useMobilePicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.mobilePaper)
   });
-
-  // TODO: This `as any` will go away once the field ref is handled by the context.
-  const handleFieldRef = (0, _useForkRef.default)(fieldRef, fieldProps.unstableFieldRef);
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerFieldUI.PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
       inputRef: inputRef,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
-        unstableFieldRef: handleFieldRef
-      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersModalDialog.PickersModalDialog, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersModalDialog.PickersModalDialog, {
         slots: slots,
         slotProps: slotProps,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {

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

@@ -2,13 +2,10 @@ import * as React from 'react';
 import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { BasePickerProps } from "../../models/props/basePickerProps.js";
 import { PickersModalDialogSlots, PickersModalDialogSlotProps } from "../../components/PickersModalDialog.js";
-import { UsePickerParams } from "../usePicker/index.js";
+import { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.js";
 import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js";
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
-import { UsePickerValueNonStaticProps } from "../usePicker/usePickerValue.types.js";
-import { UsePickerViewsProps } from "../usePicker/usePickerViews.js";
 import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
-import { UsePickerProviderNonStaticProps } from "../usePicker/usePickerProvider.js";
 import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
 export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
   /**
@@ -20,8 +17,8 @@ export interface ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStruc
   field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
 }
 export interface UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
-export interface MobileOnlyPickerProps extends UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {}
-export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, MakeRequired<MobileOnlyPickerProps, 'format'> {
+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'> {
   /**
    * Overridable component slots.
    * @default {}
@@ -33,6 +30,6 @@ export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem,
    */
   slotProps?: UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
+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'> {
   props: TExternalProps;
 }

package/internals/hooks/useNullableFieldPrivateContext.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { UseFieldInternalProps } from './useField';
+import { FieldRef } from "../../models/index.js";
+import { PickerRangeValue, PickerValue } from "../models/index.js";
+export declare const PickerFieldPrivateContext: React.Context<PickerFieldPrivateContextValue | null>;
+export declare function useNullableFieldPrivateContext(): PickerFieldPrivateContextValue | null;
+export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
+  fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
+}