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

package/modern/internals/hooks/useField/useFieldState.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
+import useTimeout from '@mui/utils/useTimeout';
 import { useRtl } from '@mui/system/RtlProvider';
 import { usePickerTranslations } from "../../../hooks/usePickerTranslations.js";
 import { useUtils, useLocalizationContext } from "../useUtils.js";
 import { mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, parseSelectedSections, getLocalizedDigits } from "./useField.utils.js";
 import { buildSectionsFromFormat } from "./buildSectionsFromFormat.js";
-import { useValueWithTimezone } from "../useValueWithTimezone.js";
+import { useControlledValue } from "../useControlledValue.js";
 import { getSectionTypeGranularity } from "../../utils/getDefaultReferenceDate.js";
 export const useFieldState = params => {
   const utils = useUtils();
@@ -34,10 +35,11 @@ export const useFieldState = params => {
     }
   } = params;
   const {
-    timezone,
-    value: valueFromTheOutside,
-    handleValueChange
-  } = useValueWithTimezone({
+    value,
+    handleValueChange,
+    timezone
+  } = useControlledValue({
+    name: 'a field component',
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
@@ -45,9 +47,13 @@ export const useFieldState = params => {
     onChange,
     valueManager
   });
+  const valueRef = React.useRef(value);
+  React.useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
   const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
   const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils, localizedDigits, timezone), [utils, localizedDigits, timezone]);
-  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, date => buildSectionsFromFormat({
+  const getSectionsFromValue = React.useCallback(valueToAnalyze => fieldValueManager.getSectionsFromValue(valueToAnalyze, date => buildSectionsFromFormat({
     utils,
     localeText: translations,
     localizedDigits,
@@ -59,17 +65,22 @@ export 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);
     validateSections(sections, valueType);
     const stateWithoutReferenceDate = {
       sections,
-      value: valueFromTheOutside,
+      lastExternalValue: value,
+      lastSectionsDependencies: {
+        format,
+        isRtl,
+        locale: utils.locale
+      },
       tempValueStrAndroid: null
     };
     const granularity = getSectionTypeGranularity(sections);
     const referenceValue = valueManager.getInitialReferenceValue({
       referenceDate: referenceDateProp,
-      value: valueFromTheOutside,
+      value,
       utils,
       props: internalProps,
       granularity,
@@ -91,29 +102,16 @@ export const useFieldState = params => {
   };
   const parsedSelectedSections = React.useMemo(() => parseSelectedSections(selectedSections, state.sections), [selectedSections, state.sections]);
   const activeSectionIndex = parsedSelectedSections === 'all' ? 0 : parsedSelectedSections;
-  const publishValue = ({
-    value,
-    referenceValue,
-    sections
-  }) => {
-    setState(prevState => _extends({}, 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];
@@ -123,27 +121,49 @@ export 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 = useTimeout();
+  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 => _extends({}, prevState, {
+        sections: prevState.sections.map(section => _extends({}, 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(_extends({}, newValues, {
-      sections: newSections
-    }));
+    if (activeSection.value === '') {
+      return;
+    }
+    setSectionUpdateToApplyOnNextInvalidDate('');
+    if (fieldValueManager.getDateFromSection(value, activeSection) === null) {
+      setState(prevState => _extends({}, prevState, {
+        sections: setSectionValue(activeSectionIndex, ''),
+        tempValueStrAndroid: null
+      }));
+    } else {
+      publishValue(fieldValueManager.updateDateInValue(value, activeSection, null));
+    }
   };
   const updateValueFromValueStr = valueStr => {
     const parseDateStr = (dateStr, referenceDate) => {
@@ -165,34 +185,31 @@ export const useFieldState = params => {
       return 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 = useTimeout();
   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 = getDateFromDateSections(utils, newActiveDateSections, localizedDigits);
-    let values;
-    let shouldPublish;
 
     /**
      * If the new date is valid,
@@ -200,23 +217,43 @@ export 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 = 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 = mergeDateIntoReferenceDate(utils, newActiveDate, newActiveDateSections, fieldValueManager.getDateFromSection(state.referenceValue, section), true);
+      if (activeDate == null) {
+        timeoutToCleanActiveDateSectionsIfValueNull.start(0, () => {
+          if (valueRef.current === value) {
+            setState(prevState => _extends({}, 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(_extends({}, 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 => _extends({}, prevState, values, {
+
+    /**
+     * If the previous date is already null,
+     * Then we don't publish the date and we update the sections.
+     */
+    return setState(prevState => _extends({}, prevState, {
       sections: newSections,
       tempValueStrAndroid: null
     }));
@@ -224,32 +261,48 @@ export const useFieldState = params => {
   const setTempAndroidValueStr = tempValueStrAndroid => setState(prev => _extends({}, 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.lastExternalValue) {
+    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 => _extends({}, prevState, {
+      lastExternalValue: 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);
     validateSections(sections, valueType);
     setState(prevState => _extends({}, 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 => _extends({}, 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/modern/internals/hooks/useField/useFieldV6TextField.d.ts

@@ -0,0 +1,26 @@
+import { UseFieldTextField } from "./useField.types.js";
+import { InferFieldSection } from "../../../models/index.js";
+import { PickerValidValue } from "../../models/index.js";
+type FieldSectionWithPositions<TValue extends PickerValidValue> = InferFieldSection<TValue> & {
+  /**
+   * Start index of the section in the format
+   */
+  start: number;
+  /**
+   * End index of the section in the format
+   */
+  end: number;
+  /**
+   * Start index of the section value in the input.
+   * Takes into account invisible unicode characters such as \u2069 but does not include them
+   */
+  startInInput: number;
+  /**
+   * End index of the section value in the input.
+   * Takes into account invisible unicode characters such as \u2069 but does not include them
+   */
+  endInInput: number;
+};
+export declare const addPositionPropertiesToSections: <TValue extends PickerValidValue>(sections: InferFieldSection<TValue>[], localizedDigits: string[], isRtl: boolean) => FieldSectionWithPositions<TValue>[];
+export declare const useFieldV6TextField: UseFieldTextField<false>;
+export {};

package/modern/internals/hooks/useField/useFieldV6TextField.js

@@ -48,7 +48,8 @@ export const useFieldV6TextField = params => {
     },
     internalProps: {
       readOnly = false,
-      disabled = false
+      disabled = false,
+      focused
     },
     parsedSelectedSections,
     activeSectionIndex,
@@ -132,6 +133,9 @@ export const useFieldV6TextField = params => {
       return nextSectionIndex === -1 ? sections.length - 1 : nextSectionIndex - 1;
     },
     focusField: (newSelectedSection = 0) => {
+      if (getActiveElement(document) === inputRef.current) {
+        return;
+      }
       inputRef.current?.focus();
       setSelectedSections(newSelectedSection);
     },
@@ -153,8 +157,8 @@ export const useFieldV6TextField = params => {
     const sectionIndex = nextSectionIndex === -1 ? sections.length - 1 : nextSectionIndex - 1;
     setSelectedSections(sectionIndex);
   };
-  const handleInputFocus = useEventCallback((...args) => {
-    onFocus?.(...args);
+  const handleInputFocus = useEventCallback(event => {
+    onFocus?.(event);
     // The ref is guaranteed to be resolved at this point.
     const input = inputRef.current;
     clearTimeout(focusTimeoutRef.current);
@@ -202,7 +206,7 @@ export const useFieldV6TextField = params => {
       if (isValidPastedValue) {
         resetCharacterQuery();
         updateSectionValue({
-          activeSection,
+          section: activeSection,
           newSectionValue: pastedValue,
           shouldGoToNextSection: true
         });
@@ -217,8 +221,8 @@ export const useFieldV6TextField = params => {
     resetCharacterQuery();
     updateValueFromValueStr(pastedValue);
   });
-  const handleContainerBlur = useEventCallback((...args) => {
-    onBlur?.(...args);
+  const handleContainerBlur = useEventCallback(event => {
+    onBlur?.(event);
     setSelectedSections(null);
   });
   const handleInputChange = useEventCallback(event => {
@@ -237,6 +241,9 @@ export const useFieldV6TextField = params => {
     const shouldUseEventData = eventData && eventData.length > 1;
     const valueStr = shouldUseEventData ? eventData : targetValue;
     const cleanValueStr = cleanString(valueStr);
+    if (parsedSelectedSections === 'all') {
+      setSelectedSections(activeSectionIndex);
+    }
 
     // If no section is selected or eventData should be used, we just try to parse the new value
     // This line is mostly triggered by imperative code / application tests.
@@ -328,7 +335,8 @@ export const useFieldV6TextField = params => {
       inputMode,
       autoComplete: 'off',
       value: shouldShowPlaceholder ? '' : valueStr,
-      onChange: handleInputChange
+      onChange: handleInputChange,
+      focused
     }
   };
 };

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

@@ -0,0 +1,2 @@
+import { UseFieldTextField } from "./useField.types.js";
+export declare const useFieldV7TextField: UseFieldTextField<true>;

package/modern/internals/hooks/useField/useFieldV7TextField.js

@@ -12,7 +12,8 @@ export const useFieldV7TextField = params => {
     internalProps: {
       disabled,
       readOnly = false,
-      autoFocus = false
+      autoFocus = false,
+      focused: focusedProp
     },
     forwardedProps: {
       sectionListRef: inSectionListRef,
@@ -20,8 +21,7 @@ export const useFieldV7TextField = params => {
       onClick,
       onFocus,
       onInput,
-      onPaste,
-      focused: focusedProp
+      onPaste
     },
     fieldValueManager,
     applyCharacterEditing,
@@ -92,7 +92,9 @@ export const useFieldV7TextField = params => {
       return sectionListRef.current.getSectionIndexFromDOMElement(activeElement);
     },
     focusField: (newSelectedSections = 0) => {
-      if (!sectionListRef.current) {
+      if (!sectionListRef.current ||
+      // if the field is already focused, we don't need to focus it again
+      interactions.getActiveSectionIndexFromDOM() != null) {
         return;
       }
       const newParsedSelectedSections = parseSelectedSections(newSelectedSections, state.sections);
@@ -176,6 +178,9 @@ export const useFieldV7TextField = params => {
     } else if (keyPressed.length > 1) {
       updateValueFromValueStr(keyPressed);
     } else {
+      if (parsedSelectedSections === 'all') {
+        setSelectedSections(0);
+      }
       applyCharacterEditing({
         keyPressed,
         sectionIndex: 0
@@ -193,8 +198,8 @@ export const useFieldV7TextField = params => {
     resetCharacterQuery();
     updateValueFromValueStr(pastedValue);
   });
-  const handleContainerFocus = useEventCallback((...args) => {
-    onFocus?.(...args);
+  const handleContainerFocus = useEventCallback(event => {
+    onFocus?.(event);
     if (focused || !sectionListRef.current) {
       return;
     }
@@ -205,8 +210,8 @@ export const useFieldV7TextField = params => {
       setSelectedSections(sectionOrder.startIndex);
     }
   });
-  const handleContainerBlur = useEventCallback((...args) => {
-    onBlur?.(...args);
+  const handleContainerBlur = useEventCallback(event => {
+    onBlur?.(event);
     setTimeout(() => {
       if (!sectionListRef.current) {
         return;
@@ -249,7 +254,7 @@ export const useFieldV7TextField = params => {
     if (isValidPastedValue) {
       resetCharacterQuery();
       updateSectionValue({
-        activeSection,
+        section: activeSection,
         newSectionValue: pastedValue,
         shouldGoToNextSection: true
       });
@@ -287,6 +292,7 @@ export const useFieldV7TextField = params => {
         return;
       }
       resetCharacterQuery();
+      revertDOMSectionChange(sectionIndex);
       clearActiveSection();
       return;
     }
@@ -370,7 +376,7 @@ export const useFieldV7TextField = params => {
   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'));
+      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();

package/modern/internals/hooks/useFieldOwnerState.d.ts

@@ -0,0 +1,6 @@
+import { FieldOwnerState } from "../../models/index.js";
+import { FormProps } from "../models/index.js";
+export declare function useFieldOwnerState(parameters: UseFieldOwnerStateParameters): FieldOwnerState;
+export interface UseFieldOwnerStateParameters extends FormProps {
+  required?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { useMobilePicker } from "./useMobilePicker.js";
+export type { UseMobilePickerSlots, UseMobilePickerSlotProps, ExportedUseMobilePickerSlotProps, MobileOnlyPickerProps } from './useMobilePicker.types';

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { UseMobilePickerParams, UseMobilePickerProps } from "./useMobilePicker.types.js";
+import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
+/**
+ * Hook managing all the single-date mobile pickers:
+ * - MobileDatePicker
+ * - MobileDateTimePicker
+ * - MobileTimePicker
+ */
+export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
+  props,
+  ...pickerParams
+}: UseMobilePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+  renderPicker: () => React.JSX.Element;
+};

package/modern/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -1,10 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props"];
+const _excluded = ["props"],
+  _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
-import useForkRef from '@mui/utils/useForkRef';
-import useId from '@mui/utils/useId';
 import { PickersModalDialog } from "../../components/PickersModalDialog.js";
 import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
@@ -26,50 +25,33 @@ export const useMobilePicker = _ref => {
   const {
     slots,
     slotProps: innerSlotProps,
-    className,
-    sx,
-    name,
     label,
     inputRef,
-    readOnly,
-    autoFocus,
     localeText
   } = props;
-  const fieldRef = React.useRef(null);
-  const labelId = useId();
-  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
     providerProps,
     renderCurrentView,
     ownerState
   } = usePicker(_extends({}, 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 fieldProps = useSlotProps({
-    elementType: Field,
-    externalSlotProps: innerSlotProps?.field,
-    additionalProps: _extends({
-      // Internal props
-      readOnly,
-      autoFocus: autoFocus && !props.open,
-      // Forwarded props
-      className,
-      sx,
-      label,
-      name,
-      focused: providerProps.contextValue.open ? true : undefined
-    }, isToolbarHidden && {
-      id: labelId
-    }, !!inputRef && {
-      inputRef
+  const _useSlotProps = useSlotProps({
+      elementType: Field,
+      externalSlotProps: innerSlotProps?.field,
+      additionalProps: _extends({}, isToolbarHidden && {
+        id: labelId
+      }),
+      ownerState
     }),
-    ownerState
-  });
+    fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const Layout = slots.layout ?? PickersLayout;
   let labelledById = labelId;
   if (isToolbarHidden) {
@@ -87,14 +69,12 @@ export const useMobilePicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.mobilePaper)
   });
-  const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
     children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
-      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-        unstableFieldRef: handleFieldRef
-      })), /*#__PURE__*/_jsx(PickersModalDialog, {
+      inputRef: inputRef,
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
         slots: slots,
         slotProps: slotProps,
         children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {