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

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

@@ -1,20 +1,16 @@
 import * as React from 'react';
-import type { IconButtonProps } from '@mui/material/IconButton';
-import type { InputAdornmentProps } from '@mui/material/InputAdornment';
-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 { PickersPopperSlots, PickersPopperSlotProps } from '../../components/PickersPopper';
 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 { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../../../hooks/useClearableField';
-import { PickersTextFieldProps } from '../../../PickersTextField';
+import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '../../components/PickerFieldUI';
 import { UsePickerProviderNonStaticProps } from '../usePicker/usePickerProvider';
-export interface UseDesktopPickerSlots extends Pick<PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue>, UseClearableFieldSlots {
+export interface UseDesktopPickerSlots extends Pick<PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
     /**
      * Component used to enter the date with the keyboard.
      */
@@ -24,38 +20,20 @@ export interface UseDesktopPickerSlots extends Pick<PickersPopperSlots, 'desktop
      * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
      */
     textField?: React.ElementType;
-    /**
-     * Component displayed on the start or end input adornment used to open the picker on desktop.
-     * @default InputAdornment
-     */
-    inputAdornment?: React.ElementType<InputAdornmentProps>;
-    /**
-     * Button to open the picker on desktop.
-     * @default IconButton
-     */
-    openPickerButton?: React.ElementType<IconButtonProps>;
-    /**
-     * Icon displayed in the open picker button on desktop.
-     */
-    openPickerIcon: React.ElementType;
-}
-export interface UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {
 }
-export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, UseClearableFieldSlotProps {
+export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
     field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
-    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState>;
-    inputAdornment?: SlotComponentPropsFromProps<InputAdornmentProps, {}, PickerOwnerState>;
-    openPickerButton?: SlotComponentPropsFromProps<IconButtonProps, {}, PickerOwnerState>;
-    openPickerIcon?: SlotComponentPropsFromProps<Record<string, any>, {}, PickerOwnerState>;
 }
-export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {
+export interface UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {
+}
+export interface DesktopOnlyPickerProps extends BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {
     /**
      * If `true`, the `input` element is focused during the first mount.
      * @default false
      */
     autoFocus?: boolean;
 }
-export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<PickerValue, TView, any, {}>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps, {}>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
+export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<PickerValue, TView, any>> extends BasePickerProps<PickerValue, any, TError, TExternalProps>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
     /**
      * Overridable component slots.
      * @default {}
@@ -67,7 +45,6 @@ export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem,
      */
     slotProps?: UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
+export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
     props: TExternalProps;
-    getOpenDialogAriaText: (date: PickerValidDate | null) => string;
 }

package/internals/hooks/useField/buildSectionsFromFormat.js

@@ -113,7 +113,7 @@ const createSection = ({
   const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
   const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, sectionConfig.contentType, sectionConfig.type, token);
   const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
-  const isValidDate = date != null && utils.isValid(date);
+  const isValidDate = utils.isValid(date);
   let sectionValue = isValidDate ? utils.formatByString(date, token) : '';
   let maxLength = null;
   if (hasLeadingZerosInInput) {

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

@@ -1,3 +1,5 @@
 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 } from "./useField.js";
-export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
+export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
+export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";

package/internals/hooks/useField/useField.js

@@ -4,7 +4,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useRtl } from '@mui/system/RtlProvider';
 import { useValidation } from "../../../validation/index.js";
-import { useUtils } from "../useUtils.js";
+import { useLocalizationContext, useUtils } from "../useUtils.js";
 import { adjustSectionValue, getSectionOrder } from "./useField.utils.js";
 import { useFieldState } from "./useFieldState.js";
 import { useFieldCharacterEditing } from "./useFieldCharacterEditing.js";
@@ -19,7 +19,8 @@ export const useField = params => {
       minutesStep,
       enableAccessibleFieldDOMStructure = true,
       disabled = false,
-      readOnly = false
+      readOnly = false,
+      autoFocus = false
     },
     forwardedProps: {
       onKeyDown,
@@ -29,7 +30,8 @@ export const useField = params => {
     },
     fieldValueManager,
     valueManager,
-    validator
+    validator,
+    getOpenPickerButtonAriaLabel: getOpenDialogAriaText
   } = params;
   const isRtl = useRtl();
   const stateResponse = useFieldState(params);
@@ -216,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/useField.utils.js

@@ -361,7 +361,7 @@ export const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
       currentDate
     }) => ({
       minimum: 1,
-      maximum: currentDate != null && utils.isValid(currentDate) ? utils.getDaysInMonth(currentDate) : maxDaysInMonth,
+      maximum: utils.isValid(currentDate) ? utils.getDaysInMonth(currentDate) : maxDaysInMonth,
       longestMonth: longestMonth
     }),
     weekDay: ({
@@ -509,7 +509,7 @@ export const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections,
 }, referenceDate);
 export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
 
-// TODO v8: Remove if we drop the v6 TextField approach.
+// TODO v9: Remove
 export const getSectionOrder = (sections, shouldApplyRTL) => {
   const neighbors = {};
   if (!shouldApplyRTL) {

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/useFieldState.js

@@ -148,7 +148,7 @@ export const useFieldState = params => {
   const updateValueFromValueStr = valueStr => {
     const parseDateStr = (dateStr, referenceDate) => {
       const date = utils.parse(dateStr, format);
-      if (date == null || !utils.isValid(date)) {
+      if (!utils.isValid(date)) {
         return null;
       }
       const sections = buildSectionsFromFormat({
@@ -199,7 +199,7 @@ export const useFieldState = params => {
      * Then we merge the value of the modified sections into the reference date.
      * This makes sure that we don't lose some information of the initial date (like the time on a date field).
      */
-    if (newActiveDate != null && utils.isValid(newActiveDate)) {
+    if (utils.isValid(newActiveDate)) {
       const mergedDate = mergeDateIntoReferenceDate(utils, newActiveDate, newActiveDateSections, activeDateManager.referenceDate, true);
       values = activeDateManager.getNewValuesFromNewActiveDate(mergedDate);
       shouldPublish = true;

package/internals/hooks/useField/useFieldV6TextField.js

@@ -35,8 +35,8 @@ export const addPositionPropertiesToSections = (sections, localizedDigits, isRtl
 };
 export const useFieldV6TextField = params => {
   const isRtl = useRtl();
-  const focusTimeoutRef = React.useRef();
-  const selectionSyncTimeoutRef = React.useRef();
+  const focusTimeoutRef = React.useRef(undefined);
+  const selectionSyncTimeoutRef = React.useRef(undefined);
   const {
     forwardedProps: {
       onFocus,

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,34 +28,25 @@ 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);
   const labelId = useId();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
-    layoutProps,
     providerProps,
     renderCurrentView,
-    fieldProps: pickerFieldProps,
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
     fieldRef,
     localeText,
     autoFocusView: true,
-    additionalViewProps: {},
     variant: 'mobile'
   }));
   const Field = slots.field;
@@ -65,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) {
@@ -121,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({}, layoutProps, 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,36 +1,29 @@
 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, any>> extends BasePickerProps<PickerValue, 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 {}
@@ -42,7 +35,6 @@ export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem,
      */
     slotProps?: UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
-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'> {
+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/useOpenState.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
 export const useOpenState = ({
   open,
   onOpen,
@@ -17,7 +18,7 @@ export const useOpenState = ({
       setOpenState(open);
     }
   }, [isControllingOpenProp, open]);
-  const setOpen = React.useCallback(action => {
+  const setOpen = useEventCallback(action => {
     const newOpen = typeof action === 'function' ? action(openState) : action;
     if (!isControllingOpenProp) {
       setOpenState(newOpen);
@@ -28,7 +29,7 @@ export const useOpenState = ({
     if (!newOpen && onClose) {
       onClose();
     }
-  }, [isControllingOpenProp, onOpen, onClose, openState]);
+  });
   return {
     open: openState,
     setOpen

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, any>, TAdditionalProps extends {}>({ props, valueManager, valueType, variant, additionalViewProps, validator, autoFocusView, rendererInterceptor, fieldRef, localeText, }: UsePickerParams<TValue, TView, TExternalProps, TAdditionalProps>) => 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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { warnOnce } from '@mui/x-internals/warning';
 import { usePickerValue } from "./usePickerValue.js";
 import { usePickerViews } from "./usePickerViews.js";
@@ -8,7 +7,6 @@ export const usePicker = ({
   valueManager,
   valueType,
   variant,
-  additionalViewProps,
   validator,
   autoFocusView,
   rendererInterceptor,
@@ -24,12 +22,10 @@ export const usePicker = ({
     props,
     valueManager,
     valueType,
-    variant,
     validator
   });
   const pickerViewsResponse = usePickerViews({
     props,
-    additionalViewProps,
     autoFocusView,
     fieldRef,
     propsFromPickerValue: pickerValueResponse.viewProps,
@@ -44,14 +40,9 @@ 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 layout
-    layoutProps: _extends({}, pickerValueResponse.layoutProps),
     // Picker provider
     providerProps,
     // Picker owner state