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

package/internals/components/PickerPopper/PickerPopper.js

@@ -214,9 +214,6 @@ function PickerPopper(inProps) {
   });
   const {
     children,
-    containerRef = null,
-    onBlur,
-    role,
     placement = 'bottom-start',
     slots,
     slotProps,
@@ -225,11 +222,13 @@ function PickerPopper(inProps) {
   const {
     open,
     triggerRef,
+    popupRef,
     reduceAnimations
   } = (0, _hooks.usePickerContext)();
   const {
     dismissViews,
-    doesTheCurrentViewHasAnUI
+    doesTheCurrentViewHasAnUI,
+    viewContainerRole
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
@@ -244,7 +243,7 @@ function PickerPopper(inProps) {
   }, [dismissViews, open]);
   const lastFocusedElementRef = React.useRef(null);
   React.useEffect(() => {
-    if (role === 'tooltip' || !doesTheCurrentViewHasAnUI()) {
+    if (viewContainerRole === 'tooltip' || !doesTheCurrentViewHasAnUI()) {
       return;
     }
     if (open) {
@@ -258,18 +257,31 @@ function PickerPopper(inProps) {
         }
       });
     }
-  }, [open, role, doesTheCurrentViewHasAnUI]);
-  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur ?? dismissViews);
-  const paperRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(paperRef, containerRef);
-  const handlePaperRef = (0, _utils.unstable_useForkRef)(handleRef, clickAwayRef);
+  }, [open, viewContainerRole, doesTheCurrentViewHasAnUI]);
   const classes = useUtilityClasses(classesProp);
   const {
-    ownerState: pickerOwnerState
+    ownerState: pickerOwnerState,
+    rootRefObject
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
     popperPlacement: placement
   });
+  const handleClickAway = (0, _utils.unstable_useEventCallback)(() => {
+    if (viewContainerRole === 'tooltip') {
+      (0, _utils2.executeInTheNextEventLoopTick)(() => {
+        if (rootRefObject.current?.contains((0, _utils2.getActiveElement)(document)) || popupRef.current?.contains((0, _utils2.getActiveElement)(document))) {
+          return;
+        }
+        dismissViews();
+      });
+    } else {
+      dismissViews();
+    }
+  });
+  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, handleClickAway);
+  const paperRef = React.useRef(null);
+  const handleRef = (0, _utils.unstable_useForkRef)(paperRef, popupRef);
+  const handlePaperRef = (0, _utils.unstable_useForkRef)(handleRef, clickAwayRef);
   const handleKeyDown = event => {
     if (event.key === 'Escape') {
       // stop the propagation to avoid closing parent modal
@@ -286,7 +298,7 @@ function PickerPopper(inProps) {
     externalSlotProps: slotProps?.popper,
     additionalProps: {
       transition: true,
-      role,
+      role: viewContainerRole == null ? undefined : viewContainerRole,
       open,
       placement,
       anchorEl: triggerRef.current,
@@ -306,7 +318,7 @@ function PickerPopper(inProps) {
       // which would force screen readers to read too old label
       ,
       disableRestoreFocus: true,
-      disableEnforceFocus: role === 'tooltip',
+      disableEnforceFocus: viewContainerRole === 'tooltip',
       isEnabled: () => true
     }, slotProps?.desktopTrapFocus, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Transition, (0, _extends2.default)({}, TransitionProps, slotProps?.desktopTransition, {

package/internals/components/PickerProvider.d.ts

@@ -6,7 +6,7 @@ import { PickersInputLocaleText } from "../../locales/index.js";
 import { DateOrTimeViewWithMeridiem, PickerOrientation, PickerValidValue, PickerVariant } from "../models/index.js";
 import type { UsePickerValueActionsContextValue, UsePickerValueContextValue, UsePickerValuePrivateContextValue } from '../hooks/usePicker/usePickerValue.types';
 import { UsePickerViewsActionsContextValue, UsePickerViewsContextValue, UsePickerViewsPrivateContextValue } from "../hooks/usePicker/usePickerViews.js";
-import { PickerFieldPrivateContextValue } from "../hooks/useField/useFieldInternalPropsWithDefaults.js";
+import { PickerFieldPrivateContextValue } from "../hooks/useNullableFieldPrivateContext.js";
 export declare const PickerActionsContext: React.Context<PickerActionsContextValue<any, any, any> | null>;
 export declare const PickerPrivateContext: React.Context<PickerPrivateContextValue>;
 /**
@@ -35,6 +35,12 @@ export interface PickerContextValue<TValue extends PickerValidValue, TView exten
    * Whether the picker is read-only.
    */
   readOnly: boolean;
+  /**
+   * Whether the picker should be focused on mount.
+   * If the picker has a field and is not open, the field should be focused.
+   * If the picker does not have a field (if it is a static picker) or is not open, the view should be focused.
+   */
+  autoFocus: boolean;
   /**
    * The responsive variant of the picker.
    * It is equal to "desktop" when using a desktop picker (like <DesktopDatePicker />).
@@ -68,6 +74,11 @@ export interface PickerContextValue<TValue extends PickerValidValue, TView exten
    * If it is "enabled", the field should render an interactive UI to open the Picker.
    */
   triggerStatus: 'hidden' | 'disabled' | 'enabled';
+  /**
+   * The ref to attach to the popup's outermost element that contains the view, if any.
+   * When using a built-in popup component, this property is automatically attached to the appropriate element.
+   */
+  popupRef: React.RefObject<any>;
   /**
    * The format to use when rendering the value in the field.
    * It is equal to the picker `format` prop if defined.
@@ -117,4 +128,13 @@ export interface PickerPrivateContextValue extends UsePickerValuePrivateContextV
    * The ownerState of the picker.
    */
   ownerState: PickerOwnerState;
+  /**
+   * The ref of the root element.
+   * This is the object counterpart of the `usePickerContext().rootRef` property which can be a function.
+   */
+  rootRefObject: React.RefObject<HTMLDivElement | null>;
+  /**
+   * The id of the label element.
+   */
+  labelId: string | undefined;
 }

package/internals/components/PickerProvider.js

@@ -9,7 +9,7 @@ exports.PickerProvider = PickerProvider;
 var React = _interopRequireWildcard(require("react"));
 var _LocalizationProvider = require("../../LocalizationProvider");
 var _useIsValidValue = require("../../hooks/useIsValidValue");
-var _useFieldInternalPropsWithDefaults = require("../hooks/useField/useFieldInternalPropsWithDefaults");
+var _useNullableFieldPrivateContext = require("../hooks/useNullableFieldPrivateContext");
 var _usePickerContext = require("../../hooks/usePickerContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const PickerActionsContext = exports.PickerActionsContext = /*#__PURE__*/React.createContext(null);
@@ -24,7 +24,12 @@ const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.c
   },
   dismissViews: () => {},
   hasUIView: true,
-  doesTheCurrentViewHasAnUI: () => true
+  doesTheCurrentViewHasAnUI: () => true,
+  rootRefObject: {
+    current: null
+  },
+  viewContainerRole: null,
+  labelId: undefined
 });
 
 /**
@@ -50,7 +55,7 @@ function PickerProvider(props) {
       value: actionsContextValue,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerPrivateContext.Provider, {
         value: privateContextValue,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useFieldInternalPropsWithDefaults.PickerFieldPrivateContext.Provider, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useNullableFieldPrivateContext.PickerFieldPrivateContext.Provider, {
           value: fieldPrivateContextValue,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useIsValidValue.IsValidValueContext.Provider, {
             value: isValidContextValue,

package/internals/demo/DemoContainer.js

@@ -24,10 +24,10 @@ const getChildTypeFromChildName = childName => {
   if (childName.match(/^Static([A-Za-z]+)/) || childName.match(/^([A-Za-z]+)(Calendar|Clock)$/)) {
     return 'UI-view';
   }
-  if (childName.match(/^MultiInput([A-Za-z]+)RangeField$/) || childName.match(/^([A-Za-z]+)RangePicker$/)) {
+  if (childName.match(/^MultiInput([A-Za-z]+)RangeField$/)) {
     return 'multi-input-range-field';
   }
-  if (childName.match(/^SingleInput([A-Za-z]+)RangeField$/)) {
+  if (childName.match(/^SingleInput([A-Za-z]+)RangeField$/) || childName.match(/^([A-Za-z]+)RangePicker$/)) {
     return 'single-input-range-field';
   }
   return 'single-input-field';
@@ -142,7 +142,7 @@ function DemoContainer(props) {
           minWidth: {
             xs: 300,
             // If demo also contains MultiInputDateTimeRangeField, increase width to avoid cutting off the value.
-            md: childrenTypes.has('multi-input-range-field') ? 460 : 400
+            md: childrenTypes.has('multi-input-range-field') ? 460 : 440
           }
         }
       };

package/internals/hooks/useDesktopPicker/useDesktopPicker.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 _PickerPopper = require("../../components/PickerPopper/PickerPopper");
 var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
@@ -36,35 +34,26 @@ const useDesktopPicker = _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: 'desktop'
   }));
+  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,18 +76,12 @@ const useDesktopPicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.popper)
   });
-
-  // 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)(_PickerPopper.PickerPopper, {
-        role: "dialog",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerPopper.PickerPopper, {
         slots: slots,
         slotProps: slotProps,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {

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

@@ -15,11 +15,6 @@ export interface UseDesktopPickerSlots extends Pick<PickerPopperSlots, 'desktopP
    * Component used to enter the date with the keyboard.
    */
   field: React.ElementType;
-  /**
-   * Form control with an input to render the value inside the default field.
-   * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
-   */
-  textField?: React.ElementType;
 }
 export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
   field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;

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

@@ -1,5 +1,4 @@
 export { useField } from "./useField.js";
 export type { FieldValueManager, UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldChangeHandler, FieldChangeHandlerContext } from './useField.types';
 export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
-export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";
-export type { PickerFieldPrivateContextValue } from './useFieldInternalPropsWithDefaults';
+export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";

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

@@ -96,6 +96,10 @@ export interface UseFieldInternalProps<TValue extends PickerValidValue, TEnableA
    * @default false
    */
   autoFocus?: boolean;
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused?: boolean;
 }
 export interface UseFieldCommonAdditionalProps extends Required<Pick<UseFieldInternalProps<any, any, any>, 'disabled' | 'readOnly' | 'autoFocus'>> {
   /**
@@ -110,21 +114,22 @@ export interface UseFieldCommonForwardedProps extends Pick<ExportedPickerFieldUI
 export type UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure extends boolean> = UseFieldCommonForwardedProps & (TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps);
 export interface UseFieldV6ForwardedProps {
   inputRef?: React.Ref<HTMLInputElement>;
-  onBlur?: () => void;
+  onBlur?: React.FocusEventHandler;
   onClick?: React.MouseEventHandler;
-  onFocus?: () => void;
+  onFocus?: React.FocusEventHandler;
   onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
   placeholder?: string;
 }
 interface UseFieldV6AdditionalProps extends Required<Pick<React.InputHTMLAttributes<HTMLInputElement>, 'inputMode' | 'placeholder' | 'value' | 'onChange' | 'autoComplete'>> {
   enableAccessibleFieldDOMStructure: false;
+  focused?: boolean;
 }
 export interface UseFieldV7ForwardedProps {
   focused?: boolean;
   sectionListRef?: React.Ref<PickersSectionListRef>;
-  onBlur?: () => void;
+  onBlur?: React.FocusEventHandler;
   onClick?: React.MouseEventHandler;
-  onFocus?: () => void;
+  onFocus?: React.FocusEventHandler;
   onInput?: React.FormEventHandler<HTMLDivElement>;
   onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
 }
@@ -136,6 +141,7 @@ interface UseFieldV7AdditionalProps {
   value: string;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
   areAllSectionsEmpty: boolean;
+  focused: boolean;
 }
 export type UseFieldResponse<TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & {
   [key: string]: any;

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/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);
@@ -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;

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/useNullableFieldPrivateContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { UseFieldInternalProps } from './useField';
+import { UsePickerViewsFieldPrivateContextValue } from "./usePicker/usePickerViews.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'>, UsePickerViewsFieldPrivateContextValue {}

package/internals/hooks/useNullableFieldPrivateContext.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickerFieldPrivateContext = void 0;
+exports.useNullableFieldPrivateContext = useNullableFieldPrivateContext;
+var React = _interopRequireWildcard(require("react"));
+const PickerFieldPrivateContext = exports.PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
+function useNullableFieldPrivateContext() {
+  return React.useContext(PickerFieldPrivateContext);
+}

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

@@ -8,7 +8,7 @@ export declare const usePicker: <TValue extends PickerValidValue, TView extends
   variant,
   validator,
   autoFocusView,
+  viewContainerRole,
   rendererInterceptor,
-  fieldRef,
   localeText
 }: UsePickerParams<TValue, TView, TExternalProps>) => UsePickerReturnValue<TValue>;

package/internals/hooks/usePicker/usePicker.js

@@ -16,8 +16,8 @@ const usePicker = ({
   variant,
   validator,
   autoFocusView,
+  viewContainerRole,
   rendererInterceptor,
-  fieldRef,
   localeText
 }) => {
   if (process.env.NODE_ENV !== 'production') {
@@ -34,7 +34,7 @@ const usePicker = ({
   const pickerViewsResponse = (0, _usePickerViews.usePickerViews)({
     props,
     autoFocusView,
-    fieldRef,
+    viewContainerRole,
     propsFromPickerValue: pickerValueResponse.viewProps,
     rendererInterceptor
   });

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

@@ -8,7 +8,7 @@ import { UsePickerProviderParameters, UsePickerProviderProps, UsePickerProviderR
  */
 export interface UsePickerBaseProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any>> extends UsePickerValueBaseProps<TValue, TError>, UsePickerViewsBaseProps<TValue, TView, TExternalProps>, UsePickerProviderProps {}
 export interface UsePickerProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any>> extends UsePickerValueProps<TValue, TError>, UsePickerViewsProps<TValue, TView, TExternalProps>, UsePickerProviderProps {}
-export interface UsePickerParams<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>> extends Pick<UsePickerValueParams<TValue, TExternalProps>, 'valueManager' | 'valueType' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TExternalProps>, 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'>, Pick<UsePickerProviderParameters<TValue, TView, InferError<TExternalProps>>, 'localeText' | 'variant' | 'ref'> {
+export interface UsePickerParams<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>> extends Pick<UsePickerValueParams<TValue, TExternalProps>, 'valueManager' | 'valueType' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TExternalProps>, 'autoFocusView' | 'viewContainerRole' | 'rendererInterceptor'>, Pick<UsePickerProviderParameters<TValue, TView, InferError<TExternalProps>>, 'localeText' | 'variant' | 'ref'> {
   props: TExternalProps;
 }
 export interface UsePickerReturnValue<TValue extends PickerValidValue> {