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

package/esm/internals/components/PickerPopper/PickerPopper.js

@@ -11,7 +11,7 @@ import BaseFocusTrap from '@mui/material/Unstable_TrapFocus';
 import { unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback, unstable_ownerDocument as ownerDocument, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { getPickerPopperUtilityClass } from "./pickerPopperClasses.js";
-import { getActiveElement } from "../../utils/utils.js";
+import { executeInTheNextEventLoopTick, getActiveElement } from "../../utils/utils.js";
 import { usePickerPrivateContext } from "../../hooks/usePickerPrivateContext.js";
 import { usePickerContext } from "../../../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -206,9 +206,6 @@ export function PickerPopper(inProps) {
   });
   const {
     children,
-    containerRef = null,
-    onBlur,
-    role,
     placement = 'bottom-start',
     slots,
     slotProps,
@@ -217,11 +214,13 @@ export function PickerPopper(inProps) {
   const {
     open,
     triggerRef,
+    popupRef,
     reduceAnimations
   } = usePickerContext();
   const {
     dismissViews,
-    doesTheCurrentViewHasAnUI
+    doesTheCurrentViewHasAnUI,
+    viewContainerRole
   } = usePickerPrivateContext();
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
@@ -236,7 +235,7 @@ export function PickerPopper(inProps) {
   }, [dismissViews, open]);
   const lastFocusedElementRef = React.useRef(null);
   React.useEffect(() => {
-    if (role === 'tooltip' || !doesTheCurrentViewHasAnUI()) {
+    if (viewContainerRole === 'tooltip' || !doesTheCurrentViewHasAnUI()) {
       return;
     }
     if (open) {
@@ -250,18 +249,31 @@ export function PickerPopper(inProps) {
         }
       });
     }
-  }, [open, role, doesTheCurrentViewHasAnUI]);
-  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur ?? dismissViews);
-  const paperRef = React.useRef(null);
-  const handleRef = useForkRef(paperRef, containerRef);
-  const handlePaperRef = useForkRef(handleRef, clickAwayRef);
+  }, [open, viewContainerRole, doesTheCurrentViewHasAnUI]);
   const classes = useUtilityClasses(classesProp);
   const {
-    ownerState: pickerOwnerState
+    ownerState: pickerOwnerState,
+    rootRefObject
   } = usePickerPrivateContext();
   const ownerState = _extends({}, pickerOwnerState, {
     popperPlacement: placement
   });
+  const handleClickAway = useEventCallback(() => {
+    if (viewContainerRole === 'tooltip') {
+      executeInTheNextEventLoopTick(() => {
+        if (rootRefObject.current?.contains(getActiveElement(document)) || popupRef.current?.contains(getActiveElement(document))) {
+          return;
+        }
+        dismissViews();
+      });
+    } else {
+      dismissViews();
+    }
+  });
+  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, handleClickAway);
+  const paperRef = React.useRef(null);
+  const handleRef = useForkRef(paperRef, popupRef);
+  const handlePaperRef = useForkRef(handleRef, clickAwayRef);
   const handleKeyDown = event => {
     if (event.key === 'Escape') {
       // stop the propagation to avoid closing parent modal
@@ -278,7 +290,7 @@ export function PickerPopper(inProps) {
     externalSlotProps: slotProps?.popper,
     additionalProps: {
       transition: true,
-      role,
+      role: viewContainerRole == null ? undefined : viewContainerRole,
       open,
       placement,
       anchorEl: triggerRef.current,
@@ -298,7 +310,7 @@ export 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__*/_jsx(Transition, _extends({}, TransitionProps, slotProps?.desktopTransition, {

package/esm/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/esm/internals/components/PickerProvider.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { LocalizationProvider } from "../../LocalizationProvider/index.js";
 import { IsValidValueContext } from "../../hooks/useIsValidValue.js";
-import { PickerFieldPrivateContext } from "../hooks/useField/useFieldInternalPropsWithDefaults.js";
+import { PickerFieldPrivateContext } from "../hooks/useNullableFieldPrivateContext.js";
 import { PickerContext } from "../../hooks/usePickerContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const PickerActionsContext = /*#__PURE__*/React.createContext(null);
@@ -16,7 +16,12 @@ export const PickerPrivateContext = /*#__PURE__*/React.createContext({
   },
   dismissViews: () => {},
   hasUIView: true,
-  doesTheCurrentViewHasAnUI: () => true
+  doesTheCurrentViewHasAnUI: () => true,
+  rootRefObject: {
+    current: null
+  },
+  viewContainerRole: null,
+  labelId: undefined
 });
 
 /**

package/esm/internals/demo/DemoContainer.js

@@ -15,10 +15,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';
@@ -133,7 +133,7 @@ export 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/esm/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -4,8 +4,6 @@ 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 { PickerPopper } from "../../components/PickerPopper/PickerPopper.js";
 import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
@@ -29,35 +27,26 @@ export const useDesktopPicker = _ref => {
     slotProps: innerSlotProps,
     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: 'desktop'
   }));
+  const labelId = providerProps.privateContextValue.labelId;
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const Field = slots.field;
   const _useSlotProps = useSlotProps({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
-      additionalProps: _extends({
-        // Internal props
-        readOnly,
-        autoFocus: autoFocus && !props.open,
-        // Forwarded props
-        focused: providerProps.contextValue.open ? true : undefined
-      }, isToolbarHidden && {
+      additionalProps: _extends({}, isToolbarHidden && {
         id: labelId
       }),
       ownerState
@@ -80,18 +69,12 @@ export 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 = useForkRef(fieldRef, fieldProps.unstableFieldRef);
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
     children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
       inputRef: inputRef,
-      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-        unstableFieldRef: handleFieldRef
-      })), /*#__PURE__*/_jsx(PickerPopper, {
-        role: "dialog",
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickerPopper, {
         slots: slots,
         slotProps: slotProps,
         children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {

package/esm/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/esm/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/esm/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/esm/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/esm/internals/hooks/useField/useFieldInternalPropsWithDefaults.js

@@ -1,21 +1,25 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
 import { useLocalizationContext } from "../useUtils.js";
 import { useNullablePickerContext } from "../useNullablePickerContext.js";
-export const PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
+import { useNullableFieldPrivateContext } from "../useNullableFieldPrivateContext.js";
 
 /**
  * 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 function useFieldInternalPropsWithDefaults({
-  manager,
-  internalProps
-}) {
+export function useFieldInternalPropsWithDefaults(parameters) {
+  const {
+    manager,
+    internalProps,
+    skipContextFieldRefAssignment
+  } = parameters;
   const localizationContext = useLocalizationContext();
   const pickerContext = useNullablePickerContext();
-  const fieldPrivateContext = React.useContext(PickerFieldPrivateContext);
+  const fieldPrivateContext = useNullableFieldPrivateContext();
+  const handleFieldRef = useForkRef(internalProps.unstableFieldRef, skipContextFieldRefAssignment ? null : fieldPrivateContext?.fieldRef);
   const setValue = pickerContext?.setValue;
   const handleChangeFromPicker = React.useCallback((newValue, ctx) => {
     return setValue?.(newValue, {
@@ -33,15 +37,19 @@ export 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(_extends({}, localizationContext, {
       internalProps: internalPropsWithDefaultsFromContext
     }));
-  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker]);
+  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker, handleFieldRef]);
 }

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

@@ -48,7 +48,8 @@ export const useFieldV6TextField = params => {
     },
     internalProps: {
       readOnly = false,
-      disabled = false
+      disabled = false,
+      focused
     },
     parsedSelectedSections,
     activeSectionIndex,
@@ -156,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);
@@ -220,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 => {
@@ -334,7 +335,8 @@ export const useFieldV6TextField = params => {
       inputMode,
       autoComplete: 'off',
       value: shouldShowPlaceholder ? '' : valueStr,
-      onChange: handleInputChange
+      onChange: handleInputChange,
+      focused
     }
   };
 };

package/esm/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,
@@ -198,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;
     }
@@ -210,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;

package/esm/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -4,8 +4,6 @@ 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";
@@ -29,35 +27,26 @@ export const useMobilePicker = _ref => {
     slotProps: innerSlotProps,
     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 _useSlotProps = useSlotProps({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
-      additionalProps: _extends({
-        // Internal props
-        readOnly,
-        autoFocus: autoFocus && !props.open,
-        // Forwarded props
-        focused: providerProps.contextValue.open ? true : undefined
-      }, isToolbarHidden && {
+      additionalProps: _extends({}, isToolbarHidden && {
         id: labelId
       }),
       ownerState
@@ -80,17 +69,12 @@ export 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 = useForkRef(fieldRef, fieldProps.unstableFieldRef);
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
     children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
       inputRef: inputRef,
-      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-        unstableFieldRef: handleFieldRef
-      })), /*#__PURE__*/_jsx(PickersModalDialog, {
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
         slots: slots,
         slotProps: slotProps,
         children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {

package/esm/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/esm/internals/hooks/useNullableFieldPrivateContext.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export const PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
+export function useNullableFieldPrivateContext() {
+  return React.useContext(PickerFieldPrivateContext);
+}

package/esm/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/esm/internals/hooks/usePicker/usePicker.js

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

package/esm/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> {

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

@@ -4,12 +4,17 @@ import { PickerProviderProps } from "../../components/PickerProvider.js";
 import type { UsePickerProps } from './usePicker.types';
 import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerValidValue, PickerVariant } from "../../models/index.js";
 import { UsePickerViewsProviderParams } from "./usePickerViews.js";
-import { PickerFieldPrivateContextValue } from "../useField/useFieldInternalPropsWithDefaults.js";
+import type { UseFieldInternalProps } from '../useField';
+import { ExportedBaseToolbarProps } from "../../models/props/toolbar.js";
 export declare const usePickerOrientation: (views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined) => PickerOrientation;
 export declare function usePickerProvider<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError>(parameters: UsePickerProviderParameters<TValue, TView, TError>): UsePickerProviderReturnValue<TValue>;
 export interface UsePickerProviderParameters<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Pick<PickerProviderProps<TValue>, 'localeText'> {
   ref: React.ForwardedRef<HTMLDivElement> | undefined;
-  props: UsePickerProps<TValue, any, any, any> & UsePickerProviderNonStaticProps;
+  props: UsePickerProps<TValue, any, any, any> & UsePickerProviderNonStaticProps & {
+    slotProps?: {
+      toolbar?: ExportedBaseToolbarProps;
+    };
+  };
   valueManager: PickerValueManager<TValue, any>;
   variant: PickerVariant;
   paramsFromUsePickerValue: UsePickerValueProviderParams<TValue, TError>;
@@ -34,7 +39,7 @@ export interface UsePickerProviderProps extends FormProps {
 /**
  * Props used to create the picker's contexts and that are not available on static pickers.
  */
-export interface UsePickerProviderNonStaticProps extends PickerFieldPrivateContextValue {
+export interface UsePickerProviderNonStaticProps extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
   /**
    * Format of the date when rendered in the input(s).
    * Defaults to localized format based on the used `views`.