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

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

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

package/internals/hooks/useField/index.js

@@ -1,2 +1,3 @@
-export { useField, useFieldInternalPropsWithDefaults } from "./useField.js";
-export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
+export { useField } from "./useField.js";
+export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
+export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";

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

@@ -1,14 +1,5 @@
 import { UseFieldParams, UseFieldResponse, UseFieldCommonForwardedProps, UseFieldInternalProps, UseFieldForwardedProps } from './useField.types';
-import { PickerValidValue, PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from '../../models';
-/**
- * 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 const useFieldInternalPropsWithDefaults: <TManager extends PickerAnyManager>({ manager, internalProps, }: {
-    manager: TManager;
-    internalProps: PickerManagerFieldInternalProps<TManager>;
-}) => PickerManagerFieldInternalPropsWithDefaults<TManager>;
+import { PickerValidValue } from '../../models';
 export declare const useField: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any> & {
     minutesStep?: number;
 }>(params: UseFieldParams<TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;

package/internals/hooks/useField/useField.js

@@ -10,22 +10,6 @@ import { useFieldState } from "./useFieldState.js";
 import { useFieldCharacterEditing } from "./useFieldCharacterEditing.js";
 import { useFieldV7TextField } from "./useFieldV7TextField.js";
 import { useFieldV6TextField } from "./useFieldV6TextField.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 const useFieldInternalPropsWithDefaults = ({
-  manager,
-  internalProps
-}) => {
-  const localizationContext = useLocalizationContext();
-  return React.useMemo(() => {
-    return manager.internal_applyDefaultsToFieldInternalProps(_extends({}, localizationContext, {
-      internalProps
-    }));
-  }, [manager, internalProps, localizationContext]);
-};
 export const useField = params => {
   const utils = useUtils();
   const {
@@ -35,7 +19,8 @@ export const useField = params => {
       minutesStep,
       enableAccessibleFieldDOMStructure = true,
       disabled = false,
-      readOnly = false
+      readOnly = false,
+      autoFocus = false
     },
     forwardedProps: {
       onKeyDown,
@@ -45,7 +30,8 @@ export const useField = params => {
     },
     fieldValueManager,
     valueManager,
-    validator
+    validator,
+    getOpenPickerButtonAriaLabel: getOpenDialogAriaText
   } = params;
   const isRtl = useRtl();
   const stateResponse = useFieldState(params);
@@ -232,9 +218,15 @@ export const useField = params => {
     error: inputError,
     clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
   };
+  const localizationContext = useLocalizationContext();
+  const openPickerAriaLabel = React.useMemo(() => getOpenDialogAriaText(_extends({}, localizationContext, {
+    value: state.value
+  })), [getOpenDialogAriaText, state.value, localizationContext]);
   const commonAdditionalProps = {
     disabled,
-    readOnly
+    readOnly,
+    autoFocus,
+    openPickerAriaLabel
   };
   return _extends({}, params.forwardedProps, commonForwardedProps, commonAdditionalProps, returnedValue);
 };

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

@@ -5,8 +5,9 @@ import type { Validator } from '../../../validation';
 import type { UseFieldStateResponse } from './useFieldState';
 import type { UseFieldCharacterEditingResponse } from './useFieldCharacterEditing';
 import { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList';
-import { ExportedUseClearableFieldProps } from '../../../hooks/useClearableField';
 import { FormProps, InferNonNullablePickerValue, PickerValidValue } from '../../models';
+import type { ExportedPickerFieldUIProps } from '../../components/PickerFieldUI';
+import { UseLocalizationContextReturnValue } from '../useUtils';
 export interface UseFieldParams<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any>> {
     forwardedProps: TForwardedProps;
     internalProps: TInternalProps;
@@ -14,6 +15,9 @@ export interface UseFieldParams<TValue extends PickerValidValue, TEnableAccessib
     fieldValueManager: FieldValueManager<TValue>;
     validator: Validator<TValue, InferError<TInternalProps>, TInternalProps>;
     valueType: PickerValueType;
+    getOpenPickerButtonAriaLabel: (parameters: UseLocalizationContextReturnValue & {
+        value: TValue;
+    }) => string;
 }
 export interface UseFieldInternalProps<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends TimezoneProps, FormProps, OnErrorProps<TValue, TError> {
     /**
@@ -93,9 +97,13 @@ export interface UseFieldInternalProps<TValue extends PickerValidValue, TEnableA
      */
     autoFocus?: boolean;
 }
-export interface UseFieldCommonAdditionalProps extends Required<Pick<UseFieldInternalProps<any, any, any>, 'disabled' | 'readOnly'>> {
+export interface UseFieldCommonAdditionalProps extends Required<Pick<UseFieldInternalProps<any, any, any>, 'disabled' | 'readOnly' | 'autoFocus'>> {
+    /**
+     * The aria label to set on the button that opens the picker.
+     */
+    openPickerAriaLabel: string;
 }
-export interface UseFieldCommonForwardedProps extends ExportedUseClearableFieldProps {
+export interface UseFieldCommonForwardedProps extends Pick<ExportedPickerFieldUIProps, 'clearable' | 'onClear'> {
     onKeyDown?: React.KeyboardEventHandler;
     error?: boolean;
 }
@@ -113,7 +121,6 @@ interface UseFieldV6AdditionalProps extends Required<Pick<React.InputHTMLAttribu
 }
 export interface UseFieldV7ForwardedProps {
     focused?: boolean;
-    autoFocus?: boolean;
     sectionListRef?: React.Ref<PickersSectionListRef>;
     onBlur?: () => void;
     onClick?: React.MouseEventHandler;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { UseFieldInternalProps } from './useField.types';
+import { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from '../../models';
+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, }: {
+    manager: TManager;
+    internalProps: PickerManagerFieldInternalProps<TManager>;
+}): PickerManagerFieldInternalPropsWithDefaults<TManager>;
+export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
+}

package/internals/hooks/useField/useFieldInternalPropsWithDefaults.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useLocalizationContext } from "../useUtils.js";
+import { useNullablePickerContext } from "../useNullablePickerContext.js";
+export const PickerFieldPrivateContext = /*#__PURE__*/React.createContext(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 function useFieldInternalPropsWithDefaults({
+  manager,
+  internalProps
+}) {
+  const localizationContext = useLocalizationContext();
+  const pickerContext = useNullablePickerContext();
+  const fieldPrivateContext = React.useContext(PickerFieldPrivateContext);
+  const setValue = pickerContext?.setValue;
+  const handleChangeFromPicker = React.useCallback((newValue, ctx) => {
+    return setValue?.(newValue, {
+      validationError: ctx.validationError
+    });
+  }, [setValue]);
+  return React.useMemo(() => {
+    let internalPropsWithDefaultsFromContext = internalProps;
+    // If one of the context is null,
+    // Then the field is used as a standalone component and the other context will be null as well.
+    if (fieldPrivateContext != null && pickerContext != null) {
+      internalPropsWithDefaultsFromContext = _extends({
+        value: pickerContext.value,
+        onChange: handleChangeFromPicker,
+        timezone: pickerContext.timezone,
+        disabled: pickerContext.disabled,
+        format: pickerContext.fieldFormat,
+        formatDensity: fieldPrivateContext.formatDensity,
+        enableAccessibleFieldDOMStructure: fieldPrivateContext.enableAccessibleFieldDOMStructure,
+        selectedSections: fieldPrivateContext.selectedSections,
+        onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange
+      }, internalProps);
+    }
+    return manager.internal_applyDefaultsToFieldInternalProps(_extends({}, localizationContext, {
+      internalProps: internalPropsWithDefaultsFromContext
+    }));
+  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker]);
+}

package/internals/hooks/useField/useFieldV7TextField.js

@@ -11,7 +11,8 @@ export const useFieldV7TextField = params => {
   const {
     internalProps: {
       disabled,
-      readOnly = false
+      readOnly = false,
+      autoFocus = false
     },
     forwardedProps: {
       sectionListRef: inSectionListRef,
@@ -20,8 +21,7 @@ export const useFieldV7TextField = params => {
       onFocus,
       onInput,
       onPaste,
-      focused: focusedProp,
-      autoFocus = false
+      focused: focusedProp
     },
     fieldValueManager,
     applyCharacterEditing,

package/internals/hooks/useFieldOwnerState.d.ts

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

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

@@ -7,6 +7,6 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - MobileDateTimePicker
  * - MobileTimePicker
  */
-export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseMobilePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, ...pickerParams }: UseMobilePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props", "getOpenDialogAriaText"];
+const _excluded = ["props"];
 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,8 +20,7 @@ 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 {
@@ -29,17 +28,11 @@ export const useMobilePicker = _ref => {
     slotProps: innerSlotProps,
     className,
     sx,
-    format,
-    formatDensity,
-    enableAccessibleFieldDOMStructure,
-    selectedSections,
-    onSelectedSectionsChange,
-    timezone,
     name,
     label,
     inputRef,
     readOnly,
-    disabled,
+    autoFocus,
     localeText
   } = props;
   const fieldRef = React.useRef(null);
@@ -48,7 +41,6 @@ export const useMobilePicker = _ref => {
   const {
     providerProps,
     renderCurrentView,
-    fieldProps: pickerFieldProps,
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
@@ -63,44 +55,21 @@ export const useMobilePicker = _ref => {
     externalSlotProps: innerSlotProps?.field,
     additionalProps: _extends({
       // Internal props
-      readOnly: readOnly ?? true,
-      disabled,
-      format,
-      formatDensity,
-      enableAccessibleFieldDOMStructure,
-      selectedSections,
-      onSelectedSectionsChange,
-      timezone
-    }, pickerFieldProps, {
-      // onChange and value
-
+      readOnly,
+      autoFocus: autoFocus && !props.open,
       // Forwarded props
       className,
       sx,
       label,
-      name
+      name,
+      focused: providerProps.contextValue.open ? true : undefined
     }, isToolbarHidden && {
       id: labelId
-    }, !(disabled || readOnly) && {
-      // These direct access to `providerProps` will go away in https://github.com/mui/mui-x/pull/15671
-      onClick: event => {
-        event.preventDefault();
-        providerProps.contextValue.setOpen(true);
-      },
-      onKeyDown: onSpaceOrEnter(() => providerProps.contextValue.setOpen(true))
     }, !!inputRef && {
       inputRef
     }),
     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);
   const Layout = slots.layout ?? PickersLayout;
   let labelledById = labelId;
   if (isToolbarHidden) {
@@ -119,20 +88,22 @@ export const useMobilePicker = _ref => {
     }, innerSlotProps?.mobilePaper)
   });
   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, {
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
+    children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+      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,34 +1,27 @@
 import * as React from 'react';
-import type { TextFieldProps } from '@mui/material/TextField';
 import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
+import { BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
 import { PickersModalDialogSlots, PickersModalDialogSlotProps } from '../../components/PickersModalDialog';
 import { UsePickerParams } from '../usePicker';
-import { FieldOwnerState, 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 { UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
-import { PickersTextFieldProps } from '../../../PickersTextField';
 import { UsePickerProviderNonStaticProps } from '../usePicker/usePickerProvider';
-export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue> {
+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<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValue> {
+export interface ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
     field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
-    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
 }
 export interface UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {
 }
-export interface MobileOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {
+export interface MobileOnlyPickerProps extends BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {
 }
 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'> {
     /**
@@ -44,5 +37,4 @@ export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem,
 }
 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'> {
     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/usePicker/usePicker.d.ts

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

package/internals/hooks/usePicker/usePicker.js

@@ -40,11 +40,8 @@ export const usePicker = ({
     paramsFromUsePickerViews: pickerViewsResponse.provider
   });
   return {
-    // Picker value
-    fieldProps: pickerValueResponse.fieldProps,
     // Picker views
     renderCurrentView: pickerViewsResponse.renderCurrentView,
-    hasUIView: pickerViewsResponse.provider.hasUIView,
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker provider
     providerProps,

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

@@ -1,4 +1,4 @@
-import { UsePickerValueParams, UsePickerValueProps, UsePickerValueBaseProps, UsePickerValueResponse } from './usePickerValue.types';
+import { UsePickerValueParams, UsePickerValueProps, UsePickerValueBaseProps } from './usePickerValue.types';
 import { UsePickerViewsProps, UsePickerViewParams, UsePickerViewsResponse, UsePickerViewsBaseProps } from './usePickerViews';
 import { InferError, PickerOwnerState } from '../../../models';
 import { DateOrTimeViewWithMeridiem, PickerValidValue } from '../../models';
@@ -13,8 +13,7 @@ export interface UsePickerProps<TValue extends PickerValidValue, TView extends D
 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'> {
     props: TExternalProps;
 }
-export interface UsePickerResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Pick<UsePickerValueResponse<TValue, TError>, 'fieldProps'>, Pick<UsePickerViewsResponse<TView>, 'shouldRestoreFocus' | 'renderCurrentView'> {
+export interface UsePickerResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends Pick<UsePickerViewsResponse<TView>, 'shouldRestoreFocus' | 'renderCurrentView'> {
     ownerState: PickerOwnerState;
     providerProps: UsePickerProviderReturnValue<TValue>;
-    hasUIView: boolean;
 }

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

@@ -3,10 +3,11 @@ import { PickerProviderProps } from '../../components/PickerProvider';
 import type { UsePickerProps } from './usePicker.types';
 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 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'> {
-    props: UsePickerProps<TValue, any, any, any>;
+    props: UsePickerProps<TValue, any, any, any> & UsePickerProviderNonStaticProps;
     valueManager: PickerValueManager<TValue, any>;
     variant: PickerVariant;
     paramsFromUsePickerValue: UsePickerValueProviderParams<TValue, TError>;
@@ -27,7 +28,12 @@ export interface UsePickerProviderProps extends FormProps {
 /**
  * Props used to create the picker's contexts and that are not available on static pickers.
  */
-export interface UsePickerProviderNonStaticProps {
+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

package/internals/hooks/usePicker/usePickerProvider.js

@@ -45,6 +45,7 @@ export function usePickerProvider(parameters) {
   } = parameters;
   const utils = useUtils();
   const orientation = usePickerOrientation(paramsFromUsePickerViews.views, props.orientation);
+  const triggerRef = React.useRef(null);
   const ownerState = React.useMemo(() => ({
     isPickerValueEmpty: valueManager.areValuesEqual(utils, paramsFromUsePickerValue.value, valueManager.emptyValue),
     isPickerOpen: paramsFromUsePickerValue.contextValue.open,
@@ -53,21 +54,40 @@ export function usePickerProvider(parameters) {
     pickerOrientation: orientation,
     pickerVariant: variant
   }), [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
-  }), [paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, variant, orientation, props.disabled, props.readOnly]);
+    orientation,
+    triggerRef,
+    triggerStatus,
+    fieldFormat: props.format ?? ''
+  }), [paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, variant, orientation, props.disabled, props.readOnly, triggerRef, triggerStatus, props.format]);
   const privateContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.privateContextValue, {
     ownerState
   }), [paramsFromUsePickerValue, 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,
     actionsContextValue,
+    fieldPrivateContextValue,
     isValidContextValue: paramsFromUsePickerValue.isValidContextValue
   };
 }

package/internals/hooks/usePicker/usePickerValue.js

@@ -176,12 +176,6 @@ export const usePickerValue = ({
       skipPublicationIfPristine: true
     });
   });
-  const fieldResponse = {
-    value: dateState.draft,
-    onChange: (newValue, context) => setValue(newValue, {
-      validationError: context.validationError
-    })
-  };
   const setValueFromView = useEventCallback((newValue, selectionState = 'partial') => {
     // TODO: Expose a new method (private?) like `setView` that only updates the draft value.
     if (selectionState === 'shallow') {
@@ -210,21 +204,21 @@ export const usePickerValue = ({
     cancelValueChanges
   }), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges]);
   const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
-    open,
-    value: dateState.draft
-  }), [actionsContextValue, open, dateState.draft]);
+    value: dateState.draft,
+    timezone,
+    open
+  }), [actionsContextValue, timezone, open, dateState.draft]);
   const privateContextValue = React.useMemo(() => ({
     dismissViews
   }), [dismissViews]);
   const providerParams = {
-    value: valueWithoutError,
+    value: dateState.draft,
     contextValue,
     actionsContextValue,
     privateContextValue,
     isValidContextValue: isValid
   };
   return {
-    fieldProps: fieldResponse,
     viewProps: viewResponse,
     provider: providerParams
   };

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

@@ -226,7 +226,6 @@ export interface UsePickerValueProviderParams<TValue extends PickerValidValue, T
 }
 export interface UsePickerValueResponse<TValue extends PickerValidValue, TError> {
     viewProps: UsePickerValueViewsResponse<TValue>;
-    fieldProps: UsePickerValueFieldResponse<TValue, TError>;
     provider: UsePickerValueProviderParams<TValue, TError>;
 }
 export interface UsePickerValueContextValue<TValue extends PickerValidValue, TError> extends UsePickerValueActionsContextValue<TValue, TError> {
@@ -234,6 +233,10 @@ export interface UsePickerValueContextValue<TValue extends PickerValidValue, TEr
      * The current value of the picker.
      */
     value: TValue;
+    /**
+     * The timezone to use when rendering the dates.
+     */
+    timezone: PickersTimezone;
     /**
      * `true` if the picker is open, `false` otherwise.
      */
@@ -286,7 +289,7 @@ export interface UsePickerValuePrivateContextValue {
      */
     dismissViews: () => void;
 }
-export interface SetValueActionOptions<TError = string> {
+export interface SetValueActionOptions<TError = string | null> {
     /**
      * Importance of the change when picking a value:
      * - "accept": fires `onChange`, fires `onAccept` and closes the picker.