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

package/modern/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/modern/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/modern/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/modern/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/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,
@@ -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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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`.

package/modern/internals/hooks/usePicker/usePickerProvider.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useForkRef from '@mui/utils/useForkRef';
+import useId from '@mui/utils/useId';
 import { useUtils } from "../useUtils.js";
 import { arrayIncludes } from "../../utils/utils.js";
 import { useReduceAnimations } from "../useReduceAnimations.js";
@@ -49,6 +51,14 @@ export function usePickerProvider(parameters) {
   const orientation = usePickerOrientation(paramsFromUsePickerViews.views, props.orientation);
   const reduceAnimations = useReduceAnimations(props.reduceAnimations);
   const triggerRef = React.useRef(null);
+  const popupRef = React.useRef(null);
+  const rootRefObject = React.useRef(null);
+  const rootRef = useForkRef(ref, rootRefObject);
+
+  /**
+   * TODO: Improve how we generate the aria-label and aria-labelledby attributes.
+   */
+  const labelId = useId();
   const ownerState = React.useMemo(() => ({
     isPickerValueEmpty: valueManager.areValuesEqual(utils, paramsFromUsePickerValue.value, valueManager.emptyValue),
     isPickerOpen: paramsFromUsePickerValue.contextValue.open,
@@ -69,8 +79,10 @@ export function usePickerProvider(parameters) {
   const contextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, {
     disabled: props.disabled ?? false,
     readOnly: props.readOnly ?? false,
+    autoFocus: props.autoFocus ?? false,
     variant,
     orientation,
+    popupRef,
     reduceAnimations,
     triggerRef,
     triggerStatus,
@@ -78,19 +90,21 @@ export function usePickerProvider(parameters) {
     name: props.name,
     label: props.label,
     rootSx: props.sx,
-    rootRef: ref,
+    rootRef,
     rootClassName: props.className
-  }), [paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, ref, variant, orientation, reduceAnimations, props.disabled, props.readOnly, props.format, props.className, props.name, props.label, props.sx, triggerRef, triggerStatus]);
+  }), [paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, rootRef, variant, orientation, reduceAnimations, props.disabled, props.readOnly, props.autoFocus, props.format, props.className, props.name, props.label, props.sx, triggerRef, triggerStatus]);
   const privateContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.privateContextValue, paramsFromUsePickerViews.privateContextValue, {
-    ownerState
-  }), [paramsFromUsePickerValue.privateContextValue, paramsFromUsePickerViews.privateContextValue, ownerState]);
+    ownerState,
+    rootRefObject,
+    labelId
+  }), [paramsFromUsePickerValue.privateContextValue, paramsFromUsePickerViews.privateContextValue, ownerState, labelId]);
   const actionsContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue), [paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue]);
-  const fieldPrivateContextValue = React.useMemo(() => ({
+  const fieldPrivateContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerViews.fieldPrivateContextValue, {
     formatDensity: props.formatDensity,
     enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
     selectedSections: props.selectedSections,
     onSelectedSectionsChange: props.onSelectedSectionsChange
-  }), [props.formatDensity, props.enableAccessibleFieldDOMStructure, props.selectedSections, props.onSelectedSectionsChange]);
+  }), [paramsFromUsePickerViews.fieldPrivateContextValue, props.formatDensity, props.enableAccessibleFieldDOMStructure, props.selectedSections, props.onSelectedSectionsChange]);
   return {
     localeText,
     contextValue,

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

@@ -42,7 +42,7 @@ export interface UsePickerViewParams<TValue extends PickerValidValue, TView exte
   props: TExternalProps;
   propsFromPickerValue: UsePickerValueViewsResponse<TValue>;
   autoFocusView: boolean;
-  fieldRef?: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
+  viewContainerRole: 'dialog' | 'tooltip' | null;
   /**
    * A function that intercepts the regular picker rendering.
    * Can be used to consume the provided `viewRenderers` and render a custom component wrapping them.
@@ -86,6 +86,10 @@ export interface UsePickerViewsContextValue<TView extends DateOrTimeViewWithMeri
    * The view currently rendered.
    */
   view: TView | null;
+  /**
+   * The view showed when first opening the picker.
+   */
+  initialView: TView | null;
 }
 export interface UsePickerViewsPrivateContextValue {
   /**
@@ -97,6 +101,18 @@ export interface UsePickerViewsPrivateContextValue {
    * @returns {boolean} Whether the current view has an UI.
    */
   doesTheCurrentViewHasAnUI: () => boolean;
+  /**
+   * The aria role associated with the view container.
+   * It is equal to "dialog" when the view is rendered inside a `@mui/material/Dialog`.
+   * It is equal to "dialog" when the view is rendered inside a `@mui/material/Popper` and the focus is trapped inside the view.
+   * It is equal to "tooltip" when the view is rendered inside a `@mui/material/Popper` and the focus remains inside the field.
+   * It is always equal to null if the picker does not have a field (static pickers).
+   * It is always equal to null if the component you are accessing the context from is not wrapped by a picker.
+   */
+  viewContainerRole: 'dialog' | 'tooltip' | null;
+}
+export interface UsePickerViewsFieldPrivateContextValue {
+  fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
 }
 export interface UsePickerViewsProviderParams<TView extends DateOrTimeViewWithMeridiem> {
   hasUIView: boolean;
@@ -104,6 +120,7 @@ export interface UsePickerViewsProviderParams<TView extends DateOrTimeViewWithMe
   contextValue: UsePickerViewsContextValue<TView>;
   actionsContextValue: UsePickerViewsActionsContextValue<TView>;
   privateContextValue: UsePickerViewsPrivateContextValue;
+  fieldPrivateContextValue: UsePickerViewsFieldPrivateContextValue;
 }
 /**
  * Manage the views of all the pickers:
@@ -115,6 +132,6 @@ export declare const usePickerViews: <TValue extends PickerValidValue, TView ext
   props,
   propsFromPickerValue,
   autoFocusView,
-  rendererInterceptor: RendererInterceptor,
-  fieldRef
+  viewContainerRole,
+  rendererInterceptor: RendererInterceptor
 }: UsePickerViewParams<TValue, TView, TExternalProps>) => UsePickerViewsResponse<TView>;

package/modern/internals/hooks/usePicker/usePickerViews.js

@@ -25,8 +25,8 @@ export const usePickerViews = ({
   props,
   propsFromPickerValue,
   autoFocusView,
-  rendererInterceptor: RendererInterceptor,
-  fieldRef
+  viewContainerRole,
+  rendererInterceptor: RendererInterceptor
 }) => {
   const {
     onChange,
@@ -43,6 +43,7 @@ export const usePickerViews = ({
     timezone
   } = props;
   const propsToForwardToView = _objectWithoutPropertiesLoose(props, _excluded);
+  const fieldRef = React.useRef(null);
   const {
     view,
     setView,
@@ -126,20 +127,27 @@ export const usePickerViews = ({
   const actionsContextValue = React.useMemo(() => ({
     setView
   }), [setView]);
+  const initialViewRef = React.useRef(openTo ?? null);
   const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
     views,
-    view: popperView
+    view: popperView,
+    initialView: initialViewRef.current
   }), [actionsContextValue, views, popperView]);
   const privateContextValue = React.useMemo(() => ({
     hasUIView,
-    doesTheCurrentViewHasAnUI
-  }), [hasUIView, doesTheCurrentViewHasAnUI]);
+    doesTheCurrentViewHasAnUI,
+    viewContainerRole
+  }), [hasUIView, doesTheCurrentViewHasAnUI, viewContainerRole]);
+  const fieldPrivateContextValue = React.useMemo(() => ({
+    fieldRef
+  }), []);
   const providerParams = {
     hasUIView,
     views,
     contextValue,
     actionsContextValue,
-    privateContextValue
+    privateContextValue,
+    fieldPrivateContextValue
   };
   return {
     provider: providerParams,
@@ -158,10 +166,14 @@ export const usePickerViews = ({
         onChange: setValueAndGoToNextView,
         view: popperView,
         onViewChange: setView,
-        focusedView,
-        onFocusedViewChange: setFocusedView,
         showViewSwitcher: timeViewsCount > 1,
         timeViewsCount
+      }, viewContainerRole === 'tooltip' ? {
+        focusedView: null,
+        onFocusedViewChange: () => {}
+      } : {
+        focusedView,
+        onFocusedViewChange: setFocusedView
       });
       if (RendererInterceptor) {
         return /*#__PURE__*/_jsx(RendererInterceptor, {

package/modern/internals/hooks/useStaticPicker/useStaticPicker.js

@@ -41,9 +41,10 @@ export const useStaticPicker = _ref => {
     renderCurrentView
   } = usePicker(_extends({}, pickerParams, {
     props,
+    variant: displayStaticWrapperAs,
     autoFocusView: autoFocus ?? false,
-    localeText,
-    variant: displayStaticWrapperAs
+    viewContainerRole: null,
+    localeText
   }));
   const Layout = slots?.layout ?? PickerStaticLayout;
   const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {

package/modern/internals/index.d.ts

@@ -1,7 +1,7 @@
 export { PickersArrowSwitcher } from "./components/PickersArrowSwitcher/PickersArrowSwitcher.js";
 export type { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps } from './components/PickersArrowSwitcher';
-export { PickerFieldUI, PickerFieldUIContextProvider, cleanFieldResponse, useFieldTextFieldProps } from "./components/PickerFieldUI.js";
-export type { ExportedPickerFieldUIProps, PickerFieldUISlots, PickerFieldUISlotProps } from './components/PickerFieldUI';
+export { PickerFieldUI, PickerFieldUIContextProvider, cleanFieldResponse, useFieldTextFieldProps, PickerFieldUIContext, mergeSlotProps } from "./components/PickerFieldUI.js";
+export type { ExportedPickerFieldUIProps, PickerFieldUISlots, PickerFieldUISlotProps, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from './components/PickerFieldUI';
 export { PickerProvider } from "./components/PickerProvider.js";
 export type { PickerContextValue } from './components/PickerProvider';
 export { PickersModalDialog } from "./components/PickersModalDialog.js";
@@ -25,9 +25,10 @@ export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT } from "./constants/dimensions.js
 export { useControlledValueWithTimezone } from "./hooks/useValueWithTimezone.js";
 export type { DesktopOnlyPickerProps } from './hooks/useDesktopPicker';
 export { useField, useFieldInternalPropsWithDefaults, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./hooks/useField/index.js";
-export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext, PickerFieldPrivateContextValue } from './hooks/useField';
+export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext } from './hooks/useField';
 export { useFieldOwnerState } from "./hooks/useFieldOwnerState.js";
 export type { MobileOnlyPickerProps } from './hooks/useMobilePicker';
+export { useNullableFieldPrivateContext } from "./hooks/useNullableFieldPrivateContext.js";
 export { useNullablePickerContext } from "./hooks/useNullablePickerContext.js";
 export { usePicker } from "./hooks/usePicker/index.js";
 export type { UsePickerParams, UsePickerProps, UsePickerValueFieldResponse, PickerViewsRendererProps } from './hooks/usePicker';

package/modern/internals/index.js

@@ -1,5 +1,5 @@
 export { PickersArrowSwitcher } from "./components/PickersArrowSwitcher/PickersArrowSwitcher.js";
-export { PickerFieldUI, PickerFieldUIContextProvider, cleanFieldResponse, useFieldTextFieldProps } from "./components/PickerFieldUI.js";
+export { PickerFieldUI, PickerFieldUIContextProvider, cleanFieldResponse, useFieldTextFieldProps, PickerFieldUIContext, mergeSlotProps } from "./components/PickerFieldUI.js";
 export { PickerProvider } from "./components/PickerProvider.js";
 export { PickersModalDialog } from "./components/PickersModalDialog.js";
 export { PickerPopper } from "./components/PickerPopper/PickerPopper.js";
@@ -13,6 +13,7 @@ export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT } from "./constants/dimensions.js
 export { useControlledValueWithTimezone } from "./hooks/useValueWithTimezone.js";
 export { useField, useFieldInternalPropsWithDefaults, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./hooks/useField/index.js";
 export { useFieldOwnerState } from "./hooks/useFieldOwnerState.js";
+export { useNullableFieldPrivateContext } from "./hooks/useNullableFieldPrivateContext.js";
 export { useNullablePickerContext } from "./hooks/useNullablePickerContext.js";
 export { usePicker } from "./hooks/usePicker/index.js";
 export { usePickerPrivateContext } from "./hooks/usePickerPrivateContext.js";

package/modern/internals/models/fields.d.ts

@@ -1,19 +1,12 @@
 import type { FieldSection } from '../../models';
-import type { UseFieldInternalProps } from '../hooks/useField';
 import { RangePosition } from "./pickers.js";
-import { PickerValidValue } from "./value.js";
 export interface FieldRangeSection extends FieldSection {
   dateName: RangePosition;
 }
-export interface BaseForwardedSingleInputFieldProps {
-  id?: string;
-  focused?: boolean;
-  onKeyDown?: React.KeyboardEventHandler;
-  onBlur?: React.FocusEventHandler;
-  ref?: React.Ref<HTMLDivElement>;
-}
 /**
  * Props the single input field can receive when used inside a picker.
  * Only contains what the MUI components are passing to the field, not what users can pass using the `props.slotProps.field`.
  */
-export type BaseSingleInputFieldProps<TValue extends PickerValidValue> = Pick<UseFieldInternalProps<TValue, boolean, any>, 'readOnly' | 'unstableFieldRef' | 'autoFocus'> & BaseForwardedSingleInputFieldProps;
+export interface BaseSingleInputFieldProps {
+  id?: string;
+}