@mui/x-date-pickers 8.0.0-alpha.1 → 8.0.0-alpha.11

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -1,15 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props", "getOpenDialogAriaText"];
+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 { onSpaceOrEnter } from "../../utils/utils.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { PickerProvider } from "../../components/PickerProvider.js";
+import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
 
 /**
  * Hook managing all the single-date mobile pickers:
@@ -20,87 +21,48 @@ import { PickerProvider } from "../../components/PickerProvider.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useMobilePicker = _ref => {
   let {
-      props,
-      getOpenDialogAriaText
+      props
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     slots,
     slotProps: innerSlotProps,
-    className,
-    sx,
-    format,
-    formatDensity,
-    enableAccessibleFieldDOMStructure,
-    selectedSections,
-    onSelectedSectionsChange,
-    timezone,
-    name,
     label,
     inputRef,
     readOnly,
-    disabled,
+    autoFocus,
     localeText
   } = props;
   const fieldRef = React.useRef(null);
   const labelId = useId();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
-    open,
-    actions,
-    layoutProps,
     providerProps,
     renderCurrentView,
-    fieldProps: pickerFieldProps,
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
     fieldRef,
     localeText,
     autoFocusView: true,
-    additionalViewProps: {},
     variant: 'mobile'
   }));
   const Field = slots.field;
-  const fieldProps = useSlotProps({
-    elementType: Field,
-    externalSlotProps: innerSlotProps?.field,
-    additionalProps: _extends({
-      // Internal props
-      readOnly: readOnly ?? true,
-      disabled,
-      format,
-      formatDensity,
-      enableAccessibleFieldDOMStructure,
-      selectedSections,
-      onSelectedSectionsChange,
-      timezone
-    }, pickerFieldProps, {
-      // onChange and value
-
-      // Forwarded props
-      className,
-      sx,
-      label,
-      name
-    }, isToolbarHidden && {
-      id: labelId
-    }, !(disabled || readOnly) && {
-      onClick: actions.onOpen,
-      onKeyDown: onSpaceOrEnter(actions.onOpen)
-    }, !!inputRef && {
-      inputRef
+  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 && {
+        id: labelId
+      }),
+      ownerState
     }),
-    ownerState
-  });
-
-  // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
-  fieldProps.inputProps = _extends({}, fieldProps.inputProps, {
-    'aria-label': getOpenDialogAriaText(pickerFieldProps.value)
-  });
-  const slotsForField = _extends({
-    textField: slots.textField
-  }, fieldProps.slots);
+    fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const Layout = slots.layout ?? PickersLayout;
   let labelledById = labelId;
   if (isToolbarHidden) {
@@ -118,22 +80,26 @@ 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__*/_jsxs(PickerProvider, _extends({}, providerProps, {
-    children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-      slots: slotsForField,
-      slotProps: slotProps,
-      unstableFieldRef: handleFieldRef
-    })), /*#__PURE__*/_jsx(PickersModalDialog, _extends({}, actions, {
-      open: open,
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
+    children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
+      inputRef: inputRef,
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
+        unstableFieldRef: handleFieldRef
+      })), /*#__PURE__*/_jsx(PickersModalDialog, {
         slots: slots,
         slotProps: slotProps,
-        children: renderCurrentView()
-      }))
-    }))]
+        children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+          slots: slots,
+          slotProps: slotProps,
+          children: renderCurrentView()
+        }))
+      })]
+    })
   }));
   return {
     renderPicker

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

@@ -1,47 +1,40 @@
 import * as React from 'react';
-import TextField from '@mui/material/TextField';
-import { SlotComponentProps } from '@mui/utils';
 import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
+import { BasePickerProps } from '../../models/props/basePickerProps';
 import { PickersModalDialogSlots, PickersModalDialogSlotProps } from '../../components/PickersModalDialog';
 import { UsePickerParams } from '../usePicker';
-import { FieldSection, PickerFieldSlotProps, PickerOwnerState, PickerValidDate } from '../../../models';
+import { PickerFieldSlotProps, PickerOwnerState } from '../../../models';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
-import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
-import { DateOrTimeViewWithMeridiem } from '../../models';
-export interface UseMobilePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValidDate | null, TView> {
+import { UsePickerViewsProps } from '../usePicker/usePickerViews';
+import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
+import { UsePickerProviderNonStaticProps } from '../usePicker/usePickerProvider';
+import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '../../components/PickerFieldUI';
+export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
     /**
      * 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 ExportedUseMobilePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValidDate | null, TView> {
-    field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
-    textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
+export interface ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
+    field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
 }
-export interface UseMobilePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValidDate | null, TView>, 'toolbar'> {
+export interface UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {
 }
-export interface MobileOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps {
+export interface MobileOnlyPickerProps extends UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {
 }
-export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends BasePickerProps<PickerValidDate | null, TView, TError, TExternalProps, {}>, MakeRequired<MobileOnlyPickerProps, 'format'> {
+export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, MakeRequired<MobileOnlyPickerProps, 'format'> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots: UseMobilePickerSlots<TView>;
+    slots: UseMobilePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValidDate | null, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
+export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
     props: TExternalProps;
-    getOpenDialogAriaText: (date: PickerValidDate | null) => string;
 }

package/internals/hooks/useNullablePickerContext.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ * If the context is not found, returns `null`.
+ */
+export declare const useNullablePickerContext: () => import("..").PickerContextValue<any, any, any> | null;

package/internals/hooks/useNullablePickerContext.js

@@ -0,0 +1,10 @@
+'use client';
+
+import * as React from 'react';
+import { PickerContext } from "../../hooks/usePickerContext.js";
+
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ * If the context is not found, returns `null`.
+ */
+export const useNullablePickerContext = () => React.useContext(PickerContext);

package/internals/hooks/useOpenState.d.ts

@@ -1,9 +1,10 @@
+import * as React from 'react';
 export interface OpenStateProps {
     open?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
 }
 export declare const useOpenState: ({ open, onOpen, onClose }: OpenStateProps) => {
-    isOpen: boolean;
-    setIsOpen: (newIsOpen: boolean) => void;
+    open: boolean;
+    setOpen: (action: React.SetStateAction<boolean>) => void;
 };

package/internals/hooks/useOpenState.js

@@ -1,11 +1,12 @@
 import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
 export const useOpenState = ({
   open,
   onOpen,
   onClose
 }) => {
   const isControllingOpenProp = React.useRef(typeof open === 'boolean').current;
-  const [openState, setIsOpenState] = React.useState(false);
+  const [openState, setOpenState] = React.useState(false);
 
   // It is required to update inner state in useEffect in order to avoid situation when
   // Our component is not mounted yet, but `open` state is set to `true` (for example initially opened)
@@ -14,22 +15,23 @@ export const useOpenState = ({
       if (typeof open !== 'boolean') {
         throw new Error('You must not mix controlling and uncontrolled mode for `open` prop');
       }
-      setIsOpenState(open);
+      setOpenState(open);
     }
   }, [isControllingOpenProp, open]);
-  const setIsOpen = React.useCallback(newIsOpen => {
+  const setOpen = useEventCallback(action => {
+    const newOpen = typeof action === 'function' ? action(openState) : action;
     if (!isControllingOpenProp) {
-      setIsOpenState(newIsOpen);
+      setOpenState(newOpen);
     }
-    if (newIsOpen && onOpen) {
+    if (newOpen && onOpen) {
       onOpen();
     }
-    if (!newIsOpen && onClose) {
+    if (!newOpen && onClose) {
       onClose();
     }
-  }, [isControllingOpenProp, onOpen, onClose]);
+  });
   return {
-    isOpen: openState,
-    setIsOpen
+    open: openState,
+    setOpen
   };
 };

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

@@ -1,4 +1,4 @@
 export { usePicker } from './usePicker';
-export type { UsePickerProps, UsePickerBaseProps, UsePickerParams, UsePickerResponse, } from './usePicker.types';
+export type { UsePickerProps, UsePickerBaseProps, UsePickerParams } from './usePicker.types';
 export type { PickerValueManager, PickerSelectionState, UsePickerValueFieldResponse, } from './usePickerValue.types';
 export type { PickerViewsRendererProps } from './usePickerViews';

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

@@ -1,4 +1,3 @@
-import { UsePickerParams, UsePickerProps, UsePickerResponse } from './usePicker.types';
-import { FieldSection, InferError } from '../../../models';
-import { DateOrTimeViewWithMeridiem } from '../../models';
-export declare const usePicker: <TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}>({ props, valueManager, valueType, variant, additionalViewProps, validator, autoFocusView, rendererInterceptor, fieldRef, localeText, }: UsePickerParams<TValue, TView, TSection, TExternalProps, TAdditionalProps>) => UsePickerResponse<TValue, TView, TSection, InferError<TExternalProps>>;
+import { UsePickerParams, UsePickerProps, UsePickerReturnValue } from './usePicker.types';
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../../models';
+export declare const usePicker: <TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>>({ ref, props, valueManager, valueType, variant, validator, autoFocusView, rendererInterceptor, fieldRef, localeText, }: UsePickerParams<TValue, TView, TExternalProps>) => UsePickerReturnValue<TValue>;

package/internals/hooks/usePicker/usePicker.js

@@ -1,14 +1,13 @@
 import { warnOnce } from '@mui/x-internals/warning';
 import { usePickerValue } from "./usePickerValue.js";
 import { usePickerViews } from "./usePickerViews.js";
-import { usePickerLayoutProps } from "./usePickerLayoutProps.js";
 import { usePickerProvider } from "./usePickerProvider.js";
 export const usePicker = ({
+  ref,
   props,
   valueManager,
   valueType,
   variant,
-  additionalViewProps,
   validator,
   autoFocusView,
   rendererInterceptor,
@@ -24,42 +23,27 @@ export const usePicker = ({
     props,
     valueManager,
     valueType,
-    variant,
     validator
   });
   const pickerViewsResponse = usePickerViews({
     props,
-    additionalViewProps,
     autoFocusView,
     fieldRef,
     propsFromPickerValue: pickerValueResponse.viewProps,
     rendererInterceptor
   });
-  const pickerLayoutResponse = usePickerLayoutProps({
-    props,
-    variant,
-    propsFromPickerValue: pickerValueResponse.layoutProps,
-    propsFromPickerViews: pickerViewsResponse.layoutProps
-  });
   const providerProps = usePickerProvider({
+    ref,
     props,
-    pickerValueResponse,
     localeText,
     valueManager,
     variant,
-    views: pickerViewsResponse.views
+    paramsFromUsePickerValue: pickerValueResponse.provider,
+    paramsFromUsePickerViews: pickerViewsResponse.provider
   });
   return {
-    // Picker value
-    open: pickerValueResponse.open,
-    actions: pickerValueResponse.actions,
-    fieldProps: pickerValueResponse.fieldProps,
     // Picker views
     renderCurrentView: pickerViewsResponse.renderCurrentView,
-    hasUIView: pickerViewsResponse.hasUIView,
-    shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
-    // Picker layout
-    layoutProps: pickerLayoutResponse.layoutProps,
     // Picker provider
     providerProps,
     // Picker owner state

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

@@ -1,20 +1,20 @@
-import { UsePickerValueParams, UsePickerValueProps, UsePickerValueBaseProps, UsePickerValueResponse } from './usePickerValue.types';
-import { UsePickerViewsProps, UsePickerViewParams, UsePickerViewsResponse, UsePickerViewsBaseProps } from './usePickerViews';
-import { UsePickerLayoutPropsResponse } from './usePickerLayoutProps';
-import { FieldSection, PickerOwnerState } from '../../../models';
-import { DateOrTimeViewWithMeridiem } from '../../models';
+import { UsePickerValueParams, UsePickerValueProps, UsePickerValueBaseProps } from './usePickerValue.types';
+import { UsePickerViewsProps, UsePickerViewParams, UsePickerViewsBaseProps } from './usePickerViews';
+import { InferError, PickerOwnerState } from '../../../models';
+import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../../models';
 import { UsePickerProviderParameters, UsePickerProviderProps, UsePickerProviderReturnValue } from './usePickerProvider';
 /**
  * Props common to all picker headless implementations.
  */
-export interface UsePickerBaseProps<TValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueBaseProps<TValue, TError>, UsePickerViewsBaseProps<TValue, TView, TExternalProps, TAdditionalProps>, UsePickerProviderProps {
+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, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueProps<TValue, TError>, UsePickerViewsProps<TValue, TView, TExternalProps, TAdditionalProps>, 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, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TExternalProps>, 'valueManager' | 'valueType' | 'variant' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TSection, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'>, Pick<UsePickerProviderParameters<TValue>, 'localeText'> {
+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'> {
     props: TExternalProps;
 }
-export interface UsePickerResponse<TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TError> extends Omit<UsePickerValueResponse<TValue, TSection, TError>, 'viewProps' | 'layoutProps'>, Omit<UsePickerViewsResponse<TView>, 'layoutProps' | 'views'>, UsePickerLayoutPropsResponse<TValue, TView> {
+export interface UsePickerReturnValue<TValue extends PickerValidValue> {
     ownerState: PickerOwnerState;
-    providerProps: UsePickerProviderReturnValue;
+    renderCurrentView: () => React.ReactNode;
+    providerProps: UsePickerProviderReturnValue<TValue>;
 }

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

@@ -1,21 +1,24 @@
-import { FieldSection } from '../../../models';
-import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.types';
+import * as React from 'react';
+import { PickerValueManager, UsePickerValueProviderParams } from './usePickerValue.types';
 import { PickerProviderProps } from '../../components/PickerProvider';
 import type { UsePickerProps } from './usePicker.types';
-import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerVariant } from '../../models';
+import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerValidValue, PickerVariant } from '../../models';
+import { UsePickerViewsProviderParams } from './usePickerViews';
+import { PickerFieldPrivateContextValue } from '../useField/useFieldInternalPropsWithDefaults';
 export declare const usePickerOrientation: (views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined) => PickerOrientation;
-export declare function usePickerProvider<TValue>(parameters: UsePickerProviderParameters<TValue>): UsePickerProviderReturnValue;
-export interface UsePickerProviderParameters<TValue> extends Pick<PickerProviderProps, 'localeText'> {
-    props: UsePickerProps<TValue, any, any, any, any>;
-    pickerValueResponse: UsePickerValueResponse<TValue, FieldSection, any>;
+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;
     valueManager: PickerValueManager<TValue, any>;
     variant: PickerVariant;
-    views: readonly DateOrTimeViewWithMeridiem[];
+    paramsFromUsePickerValue: UsePickerValueProviderParams<TValue, TError>;
+    paramsFromUsePickerViews: UsePickerViewsProviderParams<TView>;
 }
-export interface UsePickerProviderReturnValue extends Omit<PickerProviderProps, 'children'> {
+export interface UsePickerProviderReturnValue<TValue extends PickerValidValue> extends Omit<PickerProviderProps<TValue>, 'children'> {
 }
 /**
- * Props used to create the private context.
+ * Props used to create the picker's contexts.
  * Those props are exposed on all the pickers.
  */
 export interface UsePickerProviderProps extends FormProps {
@@ -23,4 +26,36 @@ export interface UsePickerProviderProps extends FormProps {
      * Force rendering in particular orientation.
      */
     orientation?: PickerOrientation;
+    /**
+     * If `true`, disable heavy animations.
+     * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+     */
+    reduceAnimations?: boolean;
+}
+/**
+ * Props used to create the picker's contexts and that are not available on static pickers.
+ */
+export interface UsePickerProviderNonStaticProps extends PickerFieldPrivateContextValue {
+    /**
+     * Format of the date when rendered in the input(s).
+     * Defaults to localized format based on the used `views`.
+     */
+    format?: string;
+    /**
+     * If `true`, the open picker button will not be rendered (renders only the field).
+     * @default false
+     */
+    disableOpenPicker?: boolean;
+    /**
+     * The label content.
+     */
+    label?: React.ReactNode;
+    /**
+     * Pass a ref to the `input` element.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Name attribute used by the `input` element in the Field.
+     */
+    name?: string;
 }

package/internals/hooks/usePicker/usePickerProvider.js

@@ -1,7 +1,9 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useUtils } from "../useUtils.js";
 import { arrayIncludes } from "../../utils/utils.js";
+import { useReduceAnimations } from "../useReduceAnimations.js";
 function getOrientation() {
   if (typeof window === 'undefined') {
     return 'portrait';
@@ -35,43 +37,75 @@ export const usePickerOrientation = (views, customOrientation) => {
 };
 export function usePickerProvider(parameters) {
   const {
+    ref,
     props,
-    pickerValueResponse,
     valueManager,
     localeText,
     variant,
-    views
+    paramsFromUsePickerValue,
+    paramsFromUsePickerViews
   } = parameters;
   const utils = useUtils();
-  const orientation = usePickerOrientation(views, props.orientation);
+  const orientation = usePickerOrientation(paramsFromUsePickerViews.views, props.orientation);
+  const reduceAnimations = useReduceAnimations(props.reduceAnimations);
+  const triggerRef = React.useRef(null);
   const ownerState = React.useMemo(() => ({
-    isPickerValueEmpty: valueManager.areValuesEqual(utils, pickerValueResponse.viewProps.value, valueManager.emptyValue),
-    isPickerOpen: pickerValueResponse.open,
+    isPickerValueEmpty: valueManager.areValuesEqual(utils, paramsFromUsePickerValue.value, valueManager.emptyValue),
+    isPickerOpen: paramsFromUsePickerValue.contextValue.open,
     isPickerDisabled: props.disabled ?? false,
     isPickerReadOnly: props.readOnly ?? false,
     pickerOrientation: orientation,
     pickerVariant: variant
-  }), [utils, valueManager, pickerValueResponse.viewProps.value, pickerValueResponse.open, orientation, variant, props.disabled, props.readOnly]);
-  const contextValue = React.useMemo(() => ({
-    onOpen: pickerValueResponse.actions.onOpen,
-    onClose: pickerValueResponse.actions.onClose,
-    open: pickerValueResponse.open,
+  }), [utils, valueManager, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
+  const triggerStatus = React.useMemo(() => {
+    if (props.disableOpenPicker || !paramsFromUsePickerViews.hasUIView) {
+      return 'hidden';
+    }
+    if (props.disabled || props.readOnly) {
+      return 'disabled';
+    }
+    return 'enabled';
+  }, [props.disableOpenPicker, paramsFromUsePickerViews.hasUIView, props.disabled, props.readOnly]);
+  const contextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, {
     disabled: props.disabled ?? false,
     readOnly: props.readOnly ?? false,
     variant,
-    orientation
-  }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open, variant, orientation, props.disabled, props.readOnly]);
-  const privateContextValue = React.useMemo(() => ({
+    orientation,
+    reduceAnimations,
+    triggerRef,
+    triggerStatus,
+    fieldFormat: props.format ?? '',
+    name: props.name,
+    label: props.label,
+    rootSx: props.sx,
+    rootRef: ref,
+    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]);
+  const privateContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.privateContextValue, paramsFromUsePickerViews.privateContextValue, {
     ownerState
-  }), [ownerState]);
+  }), [paramsFromUsePickerValue.privateContextValue, paramsFromUsePickerViews.privateContextValue, ownerState]);
+  const actionsContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue), [paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue]);
+  const fieldPrivateContextValue = React.useMemo(() => ({
+    formatDensity: props.formatDensity,
+    enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
+    selectedSections: props.selectedSections,
+    onSelectedSectionsChange: props.onSelectedSectionsChange
+  }), [props.formatDensity, props.enableAccessibleFieldDOMStructure, props.selectedSections, props.onSelectedSectionsChange]);
   return {
     localeText,
     contextValue,
-    privateContextValue
+    privateContextValue,
+    actionsContextValue,
+    fieldPrivateContextValue,
+    isValidContextValue: paramsFromUsePickerValue.isValidContextValue
   };
 }
 
 /**
- * Props used to create the private context.
+ * Props used to create the picker's contexts.
  * Those props are exposed on all the pickers.
+ */
+
+/**
+ * Props used to create the picker's contexts and that are not available on static pickers.
  */

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

@@ -1,6 +1,7 @@
-import { FieldSection, InferError } from '../../../models';
+import { InferError } from '../../../models';
 import { UsePickerValueProps, UsePickerValueParams, UsePickerValueResponse } from './usePickerValue.types';
+import { PickerValidValue } from '../../models';
 /**
  * Manage the value lifecycle of all the pickers.
  */
-export declare const usePickerValue: <TValue, TSection extends FieldSection, TExternalProps extends UsePickerValueProps<TValue, any>>({ props, valueManager, valueType, variant, validator, }: UsePickerValueParams<TValue, TExternalProps>) => UsePickerValueResponse<TValue, TSection, InferError<TExternalProps>>;
+export declare const usePickerValue: <TValue extends PickerValidValue, TExternalProps extends UsePickerValueProps<TValue, any>>({ props, valueManager, valueType, validator, }: UsePickerValueParams<TValue, TExternalProps>) => UsePickerValueResponse<TValue, InferError<TExternalProps>>;