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

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.

package/internals/hooks/useUtils.d.ts

@@ -1,12 +1,13 @@
 import { MuiPickersAdapterContextValue } from '../../LocalizationProvider/LocalizationProvider';
 import { PickersLocaleText } from '../../locales/utils/pickersLocaleTextApi';
 import { PickersTimezone, PickerValidDate } from '../../models';
-export declare const useLocalizationContext: () => Omit<MuiPickersAdapterContextValue, "localeText"> & {
-    localeText: PickersLocaleText;
-};
+export declare const useLocalizationContext: () => UseLocalizationContextReturnValue;
 export declare const useUtils: () => import("@mui/x-date-pickers/models").MuiPickersAdapter<any>;
 export declare const useDefaultDates: () => {
     minDate: PickerValidDate;
     maxDate: PickerValidDate;
 };
 export declare const useNow: (timezone: PickersTimezone) => PickerValidDate;
+export interface UseLocalizationContextReturnValue extends Omit<MuiPickersAdapterContextValue, 'localeText'> {
+    localeText: PickersLocaleText;
+}

package/internals/index.d.ts

@@ -1,6 +1,9 @@
 export { PickersArrowSwitcher } from './components/PickersArrowSwitcher/PickersArrowSwitcher';
 export type { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, } from './components/PickersArrowSwitcher';
+export { PickerFieldUI, PickerFieldUIContextProvider, cleanFieldResponse, useFieldTextFieldProps, } from './components/PickerFieldUI';
+export type { ExportedPickerFieldUIProps, PickerFieldUISlots, PickerFieldUISlotProps, } from './components/PickerFieldUI';
 export { PickerProvider } from './components/PickerProvider';
+export type { PickerContextValue } from './components/PickerProvider';
 export { PickersModalDialog } from './components/PickersModalDialog';
 export type { PickersModalDialogSlots, PickersModalDialogSlotProps, } from './components/PickersModalDialog';
 export { PickersPopper } from './components/PickersPopper';
@@ -25,7 +28,7 @@ export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT } from './constants/dimensions';
 export { useControlledValueWithTimezone } from './hooks/useValueWithTimezone';
 export type { DesktopOnlyPickerProps } from './hooks/useDesktopPicker';
 export { useField, useFieldInternalPropsWithDefaults, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections, } from './hooks/useField';
-export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext, } from './hooks/useField';
+export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext, PickerFieldPrivateContextValue, } from './hooks/useField';
 export { useFieldOwnerState } from './hooks/useFieldOwnerState';
 export type { MobileOnlyPickerProps } from './hooks/useMobilePicker';
 export { usePicker } from './hooks/usePicker';
@@ -42,9 +45,10 @@ export { useLocalizationContext, useDefaultDates, useUtils, useNow } from './hoo
 export type { ExportedUseViewsOptions, UseViewsOptions } from './hooks/useViews';
 export { useViews } from './hooks/useViews';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
+export type { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerError, } from './models/manager';
 export type { RangePosition } from './models/pickers';
 export type { BaseSingleInputFieldProps, FieldRangeSection } from './models/fields';
-export type { BasePickerProps, BasePickerInputProps, BaseNonStaticPickerProps, } from './models/props/basePickerProps';
+export type { BasePickerProps, BasePickerInputProps } from './models/props/basePickerProps';
 export type { BaseClockProps, DesktopOnlyTimePickerProps, AmPmProps } from './models/props/time';
 export type { ExportedBaseTabsProps } from './models/props/tabs';
 export type { BaseToolbarProps, ExportedBaseToolbarProps } from './models/props/toolbar';
@@ -52,7 +56,6 @@ export type { FormProps } from './models/formProps';
 export type { PickerVariant, TimeViewWithMeridiem, DateOrTimeViewWithMeridiem, } from './models/common';
 export type { BaseDateValidationProps, BaseTimeValidationProps, TimeValidationProps, MonthValidationProps, YearValidationProps, DayValidationProps, DateTimeValidationProps, } from './models/validation';
 export type { PickerValue, PickerRangeValue, PickerNonNullableRangeValue, InferNonNullablePickerValue, PickerValidValue, } from './models/value';
-export { convertFieldResponseIntoMuiTextFieldProps } from './utils/convertFieldResponseIntoMuiTextFieldProps';
 export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem, } from './utils/date-utils';
 export { resolveTimeViewsResponse, resolveDateTimeFormat } from './utils/date-time-utils';
 export { getDefaultReferenceDate } from './utils/getDefaultReferenceDate';

package/internals/index.js

@@ -1,4 +1,5 @@
 export { PickersArrowSwitcher } from "./components/PickersArrowSwitcher/PickersArrowSwitcher.js";
+export { PickerFieldUI, PickerFieldUIContextProvider, cleanFieldResponse, useFieldTextFieldProps } from "./components/PickerFieldUI.js";
 export { PickerProvider } from "./components/PickerProvider.js";
 export { PickersModalDialog } from "./components/PickersModalDialog.js";
 export { PickersPopper } from "./components/PickersPopper.js";
@@ -20,7 +21,6 @@ export { useToolbarOwnerState } from "./hooks/useToolbarOwnerState.js";
 export { useLocalizationContext, useDefaultDates, useUtils, useNow } from "./hooks/useUtils.js";
 export { useViews } from "./hooks/useViews.js";
 export { usePreviousMonthDisabled, useNextMonthDisabled } from "./hooks/date-helpers-hooks.js";
-export { convertFieldResponseIntoMuiTextFieldProps } from "./utils/convertFieldResponseIntoMuiTextFieldProps.js";
 export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate, isDatePickerView, mergeDateAndTime, formatMeridiem } from "./utils/date-utils.js";
 export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-time-utils.js";
 export { getDefaultReferenceDate } from "./utils/getDefaultReferenceDate.js";

package/internals/models/fields.d.ts

@@ -1,14 +1,13 @@
 import { SxProps } from '@mui/material/styles';
-import { MakeRequired } from '@mui/x-internals/types';
-import type { ExportedUseClearableFieldProps, UseClearableFieldSlotProps, UseClearableFieldSlots } from '../../hooks/useClearableField';
 import type { FieldSection, PickerOwnerState } from '../../models';
 import type { UseFieldInternalProps } from '../hooks/useField';
 import { RangePosition } from './pickers';
 import { PickerValidValue } from './value';
+import type { ExportedPickerFieldUIProps } from '../components/PickerFieldUI';
 export interface FieldRangeSection extends FieldSection {
     dateName: RangePosition;
 }
-export interface BaseForwardedSingleInputFieldProps extends ExportedUseClearableFieldProps {
+export interface BaseForwardedSingleInputFieldProps extends Pick<ExportedPickerFieldUIProps, 'clearable' | 'onClear'> {
     className: string | undefined;
     sx: SxProps<any> | undefined;
     label: React.ReactNode | undefined;
@@ -19,22 +18,10 @@ export interface BaseForwardedSingleInputFieldProps extends ExportedUseClearable
     onBlur?: React.FocusEventHandler;
     ref?: React.Ref<HTMLDivElement>;
     inputRef?: React.Ref<HTMLInputElement>;
-    InputProps?: {
-        ref?: React.Ref<any>;
-        endAdornment?: React.ReactNode;
-        startAdornment?: React.ReactNode;
-    };
-    inputProps?: {
-        'aria-label'?: string;
-    };
-    slots?: UseClearableFieldSlots;
-    slotProps?: UseClearableFieldSlotProps & {
-        textField?: {};
-    };
     ownerState: PickerOwnerState;
 }
 /**
  * Props the single input field can receive when used inside a picker.
  * Only contains what the MUI components are passing to the field, not what users can pass using the `props.slotProps.field`.
  */
-export type BaseSingleInputFieldProps<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError> = MakeRequired<Pick<UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, TError>, 'readOnly' | 'disabled' | 'format' | 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange' | 'timezone' | 'value' | 'onChange' | 'unstableFieldRef' | 'autoFocus'>, 'format' | 'value' | 'onChange' | 'timezone'> & BaseForwardedSingleInputFieldProps;
+export type BaseSingleInputFieldProps<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError> = Pick<UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, TError>, 'readOnly' | 'unstableFieldRef' | 'autoFocus'> & BaseForwardedSingleInputFieldProps;

package/internals/models/manager.d.ts

@@ -7,6 +7,9 @@ type PickerManagerProperties<TManager extends PickerAnyManager> = TManager exten
     fieldInternalProps: TFieldInternalProps;
     fieldInternalPropsWithDefaults: TFieldInternalPropsWithDefaults;
 } : never;
+export type PickerManagerValue<TManager extends PickerAnyManager> = PickerManagerProperties<TManager>['value'];
+export type PickerManagerError<TManager extends PickerAnyManager> = PickerManagerProperties<TManager>['error'];
 export type PickerManagerFieldInternalProps<TManager extends PickerAnyManager> = PickerManagerProperties<TManager>['fieldInternalProps'];
 export type PickerManagerFieldInternalPropsWithDefaults<TManager extends PickerAnyManager> = PickerManagerProperties<TManager>['fieldInternalPropsWithDefaults'];
+export type PickerManagerEnableAccessibleFieldDOMStructure<TManager extends PickerAnyManager> = PickerManagerProperties<TManager>['enableAccessibleFieldDOMStructure'];
 export {};

package/internals/models/props/basePickerProps.d.ts

@@ -6,7 +6,6 @@ import { UsePickerBaseProps } from '../../hooks/usePicker';
 import { PickersInputComponentLocaleText } from '../../../locales/utils/pickersLocaleTextApi';
 import type { UsePickerViewsProps } from '../../hooks/usePicker/usePickerViews';
 import { DateOrTimeViewWithMeridiem } from '../common';
-import { UseFieldInternalProps } from '../../hooks/useField';
 import { PickerValidValue } from '../value';
 /**
  * Props common to all pickers after applying the default props on each picker.
@@ -28,17 +27,6 @@ export interface BasePickerProps<TValue extends PickerValidValue, TView extends
  */
 export interface BasePickerInputProps<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Omit<MakeOptional<BasePickerProps<TValue, TView, TError, any>, 'openTo' | 'views'>, 'viewRenderers'> {
 }
-/**
- * Props common to all non-static pickers.
- * These props are handled by the headless wrappers.
- */
-export interface BaseNonStaticPickerProps extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
-    /**
-     * Format of the date when rendered in the input(s).
-     * Defaults to localized format based on the used `views`.
-     */
-    format?: string;
-}
 /**
  * Props common to all non-range non-static pickers.
  * These props are handled by the headless wrappers.

package/locales/utils/getPickersLocalization.d.ts

@@ -1,4 +1,3 @@
-import { AdapterFormats, MuiPickersAdapter, PickerValidDate } from '../../models';
 import { PickersLocaleText } from './pickersLocaleTextApi';
 export declare const getPickersLocalization: (pickersTranslations: Partial<PickersLocaleText>) => {
     components: {
@@ -79,9 +78,3 @@ export declare const getPickersLocalization: (pickersTranslations: Partial<Picke
         };
     };
 };
-export declare const buildGetOpenDialogAriaText: (params: {
-    utils: MuiPickersAdapter;
-    formatKey: keyof AdapterFormats;
-    contextTranslation: (formattedValue: string | null) => string;
-    propsTranslation: ((formattedValue: string | null) => string) | undefined;
-}) => (value: PickerValidDate | null) => string;

package/locales/utils/getPickersLocalization.js

@@ -9,17 +9,4 @@ export const getPickersLocalization = pickersTranslations => {
       }
     }
   };
-};
-export const buildGetOpenDialogAriaText = params => {
-  const {
-    utils,
-    formatKey,
-    contextTranslation,
-    propsTranslation
-  } = params;
-  return value => {
-    const formattedValue = utils.isValid(value) ? utils.format(value, formatKey) : null;
-    const translation = propsTranslation ?? contextTranslation;
-    return translation(formattedValue);
-  };
 };

package/managers/index.d.ts

@@ -1,6 +1,6 @@
 export { useDateManager } from './useDateManager';
-export type { UseDateManagerReturnValue, UseDateManagerParameters } from './useDateManager';
+export type { UseDateManagerReturnValue, UseDateManagerParameters, DateManagerFieldInternalProps, } from './useDateManager';
 export { useTimeManager } from './useTimeManager';
-export type { UseTimeManagerReturnValue, UseTimeManagerParameters } from './useTimeManager';
+export type { UseTimeManagerReturnValue, UseTimeManagerParameters, TimeManagerFieldInternalProps, } from './useTimeManager';
 export { useDateTimeManager } from './useDateTimeManager';
-export type { UseDateTimeManagerReturnValue, UseDateTimeManagerParameters, } from './useDateTimeManager';
+export type { UseDateTimeManagerReturnValue, UseDateTimeManagerParameters, DateTimeManagerFieldInternalProps, } from './useDateTimeManager';

package/managers/useDateManager.d.ts

@@ -14,7 +14,7 @@ export interface UseDateManagerParameters<TEnableAccessibleFieldDOMStructure ext
     enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
 }
 export type UseDateManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError, DateManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, DateManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
-interface DateManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, ExportedValidateDateProps {
+export interface DateManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, ExportedValidateDateProps {
 }
 interface DateManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure extends boolean> extends UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateValidationError>, ValidateDateProps {
 }

package/managers/useDateManager.js

@@ -23,7 +23,15 @@ export function useDateManager(parameters = {}) {
       defaultDates,
       utils,
       internalProps
-    }))
+    })),
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      const formattedValue = utils.isValid(value) ? utils.format(value, 'fullDate') : null;
+      return localeText.openDatePickerDialogue(formattedValue);
+    }
   }), [enableAccessibleFieldDOMStructure]);
 }
 

package/managers/useDateTimeManager.d.ts

@@ -15,7 +15,7 @@ export interface UseDateTimeManagerParameters<TEnableAccessibleFieldDOMStructure
     enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
 }
 export type UseDateTimeManagerReturnValue<TEnableAccessibleFieldDOMStructure extends boolean> = PickerManager<PickerValue, TEnableAccessibleFieldDOMStructure, DateTimeValidationError, DateTimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure>, DateTimeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure>>;
-interface DateTimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, 'format'>, ExportedValidateDateTimeProps, AmPmProps {
+export interface DateTimeManagerFieldInternalProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, 'format'>, ExportedValidateDateTimeProps, AmPmProps {
 }
 interface DateTimeManagerFieldInternalPropsWithDefaults<TEnableAccessibleFieldDOMStructure extends boolean> extends UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, ValidateDateTimeProps {
 }