@mui/x-date-pickers 7.22.1 → 8.0.0-alpha.0

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

@@ -1,12 +1,12 @@
 import { AvailableAdjustKeyCode, FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from './useField.types';
 import { FieldSectionType, FieldValueType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections } from '../../../models';
-export declare const getDateSectionConfigFromFormatToken: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, formatToken: string) => Pick<FieldSection, "type" | "contentType"> & {
+export declare const getDateSectionConfigFromFormatToken: (utils: MuiPickersAdapter, formatToken: string) => Pick<FieldSection, "type" | "contentType"> & {
     maxLength: number | undefined;
 };
-export declare const getDaysInWeekStr: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, format: string) => string[];
-export declare const getLetterEditingOptions: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, timezone: PickersTimezone, sectionType: FieldSectionType, format: string) => string[];
+export declare const getDaysInWeekStr: (utils: MuiPickersAdapter, format: string) => string[];
+export declare const getLetterEditingOptions: (utils: MuiPickersAdapter, timezone: PickersTimezone, sectionType: FieldSectionType, format: string) => string[];
 export declare const FORMAT_SECONDS_NO_LEADING_ZEROS = "s";
-export declare const getLocalizedDigits: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>) => string[];
+export declare const getLocalizedDigits: (utils: MuiPickersAdapter) => string[];
 export declare const removeLocalizedDigits: (valueStr: string, localizedDigits: string[]) => string;
 export declare const applyLocalizedDigits: (valueStr: string, localizedDigits: string[]) => string;
 export declare const isStringNumber: (valueStr: string, localizedDigits: string[]) => boolean;
@@ -16,25 +16,25 @@ export declare const isStringNumber: (valueStr: string, localizedDigits: string[
  * Warning: Should only be called with non-localized digits. Call `removeLocalizedDigits` with your value if needed.
  */
 export declare const cleanLeadingZeros: (valueStr: string, size: number) => string;
-export declare const cleanDigitSectionValue: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, value: number, sectionBoundaries: FieldSectionValueBoundaries<TDate, any>, localizedDigits: string[], section: Pick<FieldSection, "format" | "type" | "contentType" | "hasLeadingZerosInFormat" | "hasLeadingZerosInInput" | "maxLength">) => string;
-export declare const adjustSectionValue: <TDate extends PickerValidDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate>, timezone: PickersTimezone, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>, localizedDigits: string[], activeDate: TDate | null, stepsAttributes?: {
+export declare const cleanDigitSectionValue: (utils: MuiPickersAdapter, value: number, sectionBoundaries: FieldSectionValueBoundaries<any>, localizedDigits: string[], section: Pick<FieldSection, "format" | "type" | "contentType" | "hasLeadingZerosInFormat" | "hasLeadingZerosInInput" | "maxLength">) => string;
+export declare const adjustSectionValue: <TSection extends FieldSection>(utils: MuiPickersAdapter, timezone: PickersTimezone, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries, localizedDigits: string[], activeDate: PickerValidDate | null, stepsAttributes?: {
     minutesStep?: number;
 }) => string;
 export declare const getSectionVisibleValue: (section: FieldSection, target: "input-rtl" | "input-ltr" | "non-input", localizedDigits: string[]) => string;
-export declare const changeSectionValueFormat: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, valueStr: string, currentFormat: string, newFormat: string) => string;
-export declare const doesSectionFormatHaveLeadingZeros: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
+export declare const changeSectionValueFormat: (utils: MuiPickersAdapter, valueStr: string, currentFormat: string, newFormat: string) => string;
+export declare const doesSectionFormatHaveLeadingZeros: (utils: MuiPickersAdapter, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
 /**
  * Some date libraries like `dayjs` don't support parsing from date with escaped characters.
  * To make sure that the parsing works, we are building a format and a date without any separator.
  */
-export declare const getDateFromDateSections: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, sections: FieldSection[], localizedDigits: string[]) => TDate;
+export declare const getDateFromDateSections: (utils: MuiPickersAdapter, sections: FieldSection[], localizedDigits: string[]) => PickerValidDate;
 export declare const createDateStrForV7HiddenInputFromSections: (sections: FieldSection[]) => string;
 export declare const createDateStrForV6InputFromSections: (sections: FieldSection[], localizedDigits: string[], isRtl: boolean) => string;
-export declare const getSectionsBoundaries: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, localizedDigits: string[], timezone: PickersTimezone) => FieldSectionsValueBoundaries<TDate>;
+export declare const getSectionsBoundaries: (utils: MuiPickersAdapter, localizedDigits: string[], timezone: PickersTimezone) => FieldSectionsValueBoundaries;
 export declare const validateSections: <TSection extends FieldSection>(sections: TSection[], valueType: FieldValueType) => void;
-export declare const mergeDateIntoReferenceDate: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, dateToTransferFrom: TDate, sections: FieldSection[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
+export declare const mergeDateIntoReferenceDate: (utils: MuiPickersAdapter, dateToTransferFrom: PickerValidDate, sections: FieldSection[], referenceDate: PickerValidDate, shouldLimitToEditedSections: boolean) => PickerValidDate;
 export declare const isAndroid: () => boolean;
 export declare const getSectionOrder: (sections: FieldSection[], shouldApplyRTL: boolean) => SectionOrdering;
 export declare const parseSelectedSections: (selectedSections: FieldSelectedSections, sections: FieldSection[]) => FieldParsedSelectedSections;
-export declare const getSectionValueText: <TDate extends PickerValidDate>(section: FieldSection, utils: MuiPickersAdapter<TDate>) => string | undefined;
-export declare const getSectionValueNow: <TDate extends PickerValidDate>(section: FieldSection, utils: MuiPickersAdapter<TDate>) => number | undefined;
+export declare const getSectionValueText: (section: FieldSection, utils: MuiPickersAdapter) => string | undefined;
+export declare const getSectionValueNow: (section: FieldSection, utils: MuiPickersAdapter) => number | undefined;

package/internals/hooks/useField/useField.utils.js

@@ -571,7 +571,8 @@ export const parseSelectedSections = (selectedSections, sections) => {
     return 'all';
   }
   if (typeof selectedSections === 'string') {
-    return sections.findIndex(section => section.type === selectedSections);
+    const index = sections.findIndex(section => section.type === selectedSections);
+    return index === -1 ? null : index;
   }
   return selectedSections;
 };

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

@@ -1,14 +1,14 @@
-import { FieldSection, PickersTimezone, PickerValidDate } from '../../../models';
+import { FieldSection, PickersTimezone } from '../../../models';
 import { FieldSectionsValueBoundaries } from './useField.types';
 import { UpdateSectionValueParams } from './useFieldState';
 export interface ApplyCharacterEditingParams {
     keyPressed: string;
     sectionIndex: number;
 }
-interface UseFieldCharacterEditingParams<TDate extends PickerValidDate, TSection extends FieldSection> {
+interface UseFieldCharacterEditingParams<TSection extends FieldSection> {
     sections: TSection[];
     updateSectionValue: (params: UpdateSectionValueParams<TSection>) => void;
-    sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>;
+    sectionsValueBoundaries: FieldSectionsValueBoundaries;
     localizedDigits: string[];
     setTempAndroidValueStr: (newValue: string | null) => void;
     timezone: PickersTimezone;
@@ -24,5 +24,5 @@ export interface UseFieldCharacterEditingResponse {
  * 1. The numeric editing when the user presses a digit
  * 2. The letter editing when the user presses another key
  */
-export declare const useFieldCharacterEditing: <TDate extends PickerValidDate, TSection extends FieldSection>({ sections, updateSectionValue, sectionsValueBoundaries, localizedDigits, setTempAndroidValueStr, timezone, }: UseFieldCharacterEditingParams<TDate, TSection>) => UseFieldCharacterEditingResponse;
+export declare const useFieldCharacterEditing: <TSection extends FieldSection>({ sections, updateSectionValue, sectionsValueBoundaries, localizedDigits, setTempAndroidValueStr, timezone, }: UseFieldCharacterEditingParams<TSection>) => UseFieldCharacterEditingResponse;
 export {};

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

@@ -1,5 +1,5 @@
 import { UseFieldInternalProps, UseFieldParams, UseFieldState, FieldParsedSelectedSections, FieldSectionsValueBoundaries, UseFieldForwardedProps } from './useField.types';
-import { FieldSection, FieldSelectedSections, PickersTimezone, PickerValidDate } from '../../../models';
+import { FieldSection, FieldSelectedSections, PickersTimezone } from '../../../models';
 export interface UpdateSectionValueParams<TSection extends FieldSection> {
     /**
      * The section on which we want to apply the new value.
@@ -14,7 +14,7 @@ export interface UpdateSectionValueParams<TSection extends FieldSection> {
      */
     shouldGoToNextSection: boolean;
 }
-export interface UseFieldStateResponse<TValue, TDate extends PickerValidDate, TSection extends FieldSection> {
+export interface UseFieldStateResponse<TValue, TSection extends FieldSection> {
     state: UseFieldState<TValue, TSection>;
     activeSectionIndex: number | null;
     parsedSelectedSections: FieldParsedSelectedSections;
@@ -24,9 +24,9 @@ export interface UseFieldStateResponse<TValue, TDate extends PickerValidDate, TS
     updateSectionValue: (params: UpdateSectionValueParams<TSection>) => void;
     updateValueFromValueStr: (valueStr: string) => void;
     setTempAndroidValueStr: (tempAndroidValueStr: string | null) => void;
-    sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>;
+    sectionsValueBoundaries: FieldSectionsValueBoundaries;
     getSectionsFromValue: (value: TValue, fallbackSections?: TSection[] | null) => TSection[];
     localizedDigits: string[];
     timezone: PickersTimezone;
 }
-export declare const useFieldState: <TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, any, any, any>>(params: UseFieldParams<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldStateResponse<TValue, TDate, TSection>;
+export declare const useFieldState: <TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, any, any>>(params: UseFieldParams<TValue, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldStateResponse<TValue, TSection>;

package/internals/hooks/useField/useFieldState.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import { useRtl } from '@mui/system/RtlProvider';
-import { usePickersTranslations } from "../../../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../../../hooks/usePickerTranslations.js";
 import { useUtils, useLocalizationContext } from "../useUtils.js";
 import { mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, parseSelectedSections, getLocalizedDigits } from "./useField.utils.js";
 import { buildSectionsFromFormat } from "./buildSectionsFromFormat.js";
@@ -10,7 +10,7 @@ import { useValueWithTimezone } from "../useValueWithTimezone.js";
 import { getSectionTypeGranularity } from "../../utils/getDefaultReferenceDate.js";
 export const useFieldState = params => {
   const utils = useUtils();
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const adapter = useLocalizationContext();
   const isRtl = useRtl();
   const {
@@ -30,7 +30,7 @@ export const useFieldState = params => {
       onSelectedSectionsChange,
       shouldRespectLeadingZeros = false,
       timezone: timezoneProp,
-      enableAccessibleFieldDOMStructure = false
+      enableAccessibleFieldDOMStructure = true
     }
   } = params;
   const {

package/internals/hooks/useField/useFieldV7TextField.js

@@ -5,7 +5,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useId from '@mui/utils/useId';
 import { getSectionValueNow, getSectionValueText, parseSelectedSections } from "./useField.utils.js";
 import { getActiveElement } from "../../utils/utils.js";
-import { usePickersTranslations } from "../../../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../../../hooks/usePickerTranslations.js";
 import { useUtils } from "../useUtils.js";
 export const useFieldV7TextField = params => {
   const {
@@ -39,7 +39,7 @@ export const useFieldV7TextField = params => {
   } = params;
   const sectionListRef = React.useRef(null);
   const handleSectionListRef = useForkRef(inSectionListRef, sectionListRef);
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const utils = useUtils();
   const id = useId();
   const [focused, setFocused] = React.useState(false);

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { UseMobilePickerParams, UseMobilePickerProps } from './useMobilePicker.types';
-import { PickerValidDate } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
 /**
  * Hook managing all the single-date mobile pickers:
@@ -8,6 +7,6 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - MobileDateTimePicker
  * - MobileTimePicker
  */
-export declare const useMobilePicker: <TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseMobilePickerParams<TDate, TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseMobilePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -9,7 +9,7 @@ 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 { PickersProvider } from "../../components/PickersProvider.js";
+import { PickerProvider } from "../../components/PickerProvider.js";
 
 /**
  * Hook managing all the single-date mobile pickers:
@@ -49,12 +49,14 @@ export const useMobilePicker = _ref => {
     open,
     actions,
     layoutProps,
+    providerProps,
     renderCurrentView,
     fieldProps: pickerFieldProps,
-    contextValue
+    ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
     fieldRef,
+    localeText,
     autoFocusView: true,
     additionalViewProps: {},
     wrapperVariant: 'mobile'
@@ -63,28 +65,33 @@ export const useMobilePicker = _ref => {
   const fieldProps = useSlotProps({
     elementType: Field,
     externalSlotProps: innerSlotProps?.field,
-    additionalProps: _extends({}, pickerFieldProps, isToolbarHidden && {
-      id: labelId
-    }, !(disabled || readOnly) && {
-      onClick: actions.onOpen,
-      onKeyDown: onSpaceOrEnter(actions.onOpen)
-    }, {
+    additionalProps: _extends({
+      // Internal props
       readOnly: readOnly ?? true,
       disabled,
-      className,
-      sx,
       format,
       formatDensity,
       enableAccessibleFieldDOMStructure,
       selectedSections,
       onSelectedSectionsChange,
-      timezone,
+      timezone
+    }, pickerFieldProps, {
+      // onChange and value
+
+      // Forwarded props
+      className,
+      sx,
       label,
       name
-    }, inputRef ? {
+    }, isToolbarHidden && {
+      id: labelId
+    }, !(disabled || readOnly) && {
+      onClick: actions.onOpen,
+      onKeyDown: onSpaceOrEnter(actions.onOpen)
+    }, !!inputRef && {
       inputRef
-    } : {}),
-    ownerState: props
+    }),
+    ownerState
   });
 
   // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
@@ -112,9 +119,7 @@ export const useMobilePicker = _ref => {
     }, innerSlotProps?.mobilePaper)
   });
   const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
-  const renderPicker = () => /*#__PURE__*/_jsxs(PickersProvider, {
-    contextValue: contextValue,
-    localeText: localeText,
+  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
     children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
       slots: slotsForField,
       slotProps: slotProps,
@@ -129,7 +134,7 @@ export const useMobilePicker = _ref => {
         children: renderCurrentView()
       }))
     }))]
-  });
+  }));
   return {
     renderPicker
   };

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

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import TextField from '@mui/material/TextField';
 import { SlotComponentProps } from '@mui/utils';
+import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
 import { PickersModalDialogSlots, PickersModalDialogSlotProps } from '../../components/PickersModalDialog';
-import { UsePickerParams, UsePickerProps } from '../usePicker';
-import { BaseSingleInputFieldProps, FieldSection, PickerValidDate } from '../../../models';
+import { UsePickerParams } from '../usePicker';
+import { FieldSection, PickerFieldSlotProps, PickerOwnerState, PickerValidDate } from '../../../models';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-import { SlotComponentPropsFromProps } from '../../models/helpers';
-export interface UseMobilePickerSlots<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlots, ExportedPickersLayoutSlots<TDate | null, TDate, TView> {
+export interface UseMobilePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValidDate | null, TView> {
     /**
      * Component used to enter the date with the keyboard.
      */
@@ -21,27 +21,27 @@ export interface UseMobilePickerSlots<TDate extends PickerValidDate, TView exten
      */
     textField?: React.ElementType;
 }
-export interface ExportedUseMobilePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<TDate | null, TDate, TView> {
-    field?: SlotComponentPropsFromProps<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, unknown>, {}, UsePickerProps<TDate | null, TDate, any, any, any, any>>;
+export interface ExportedUseMobilePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValidDate | null, TView> {
+    field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
 }
-export interface UseMobilePickerSlotProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<TDate | null, TDate, TView>, 'toolbar'> {
+export interface UseMobilePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValidDate | null, TView>, 'toolbar'> {
 }
 export interface MobileOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps {
 }
-export interface UseMobilePickerProps<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, any, TView, any, any>> extends BasePickerProps<TDate | null, TDate, TView, TError, TExternalProps, {}>, MobileOnlyPickerProps {
+export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends BasePickerProps<PickerValidDate | null, TView, TError, TExternalProps, {}>, MakeRequired<MobileOnlyPickerProps, 'format'> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots: UseMobilePickerSlots<TDate, TView>;
+    slots: UseMobilePickerSlots<TView>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseMobilePickerSlotProps<TDate, TView, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: UseMobilePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseMobilePickerParams<TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TDate, TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
+export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValidDate | null, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;
-    getOpenDialogAriaText: (date: TDate | null) => string;
+    getOpenDialogAriaText: (date: PickerValidDate | null) => string;
 }

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

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

package/internals/hooks/usePicker/usePicker.js

@@ -3,6 +3,7 @@ import { usePickerValue } from "./usePickerValue.js";
 import { usePickerViews } from "./usePickerViews.js";
 import { usePickerLayoutProps } from "./usePickerLayoutProps.js";
 import { usePickerOwnerState } from "./usePickerOwnerState.js";
+import { usePickerProvider } from "./usePickerProvider.js";
 export const usePicker = ({
   props,
   valueManager,
@@ -12,7 +13,8 @@ export const usePicker = ({
   validator,
   autoFocusView,
   rendererInterceptor,
-  fieldRef
+  fieldRef,
+  localeText
 }) => {
   if (process.env.NODE_ENV !== 'production') {
     if (props.renderInput != null) {
@@ -42,7 +44,13 @@ export const usePicker = ({
   });
   const pickerOwnerState = usePickerOwnerState({
     props,
-    pickerValueResponse
+    pickerValueResponse,
+    valueManager
+  });
+  const providerProps = usePickerProvider({
+    pickerValueResponse,
+    ownerState: pickerOwnerState,
+    localeText
   });
   return {
     // Picker value
@@ -55,8 +63,8 @@ export const usePicker = ({
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker layout
     layoutProps: pickerLayoutResponse.layoutProps,
-    // Picker context
-    contextValue: pickerValueResponse.contextValue,
+    // Picker provider
+    providerProps,
     // Picker owner state
     ownerState: pickerOwnerState
   };

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

@@ -1,18 +1,20 @@
 import { UsePickerValueParams, UsePickerValueProps, UsePickerValueBaseProps, UsePickerValueResponse } from './usePickerValue.types';
 import { UsePickerViewsProps, UsePickerViewParams, UsePickerViewsResponse, UsePickerViewsBaseProps } from './usePickerViews';
 import { UsePickerLayoutProps, UsePickerLayoutPropsResponse } from './usePickerLayoutProps';
-import { FieldSection, PickerOwnerState, PickerValidDate } from '../../../models';
+import { FieldSection, PickerOwnerState } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
+import { UsePickerProviderParameters, UsePickerProviderReturnValue } from './usePickerProvider';
 /**
  * Props common to all picker headless implementations.
  */
-export interface UsePickerBaseProps<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueBaseProps<TValue, TError>, UsePickerViewsBaseProps<TValue, TDate, TView, TExternalProps, TAdditionalProps>, UsePickerLayoutProps {
+export interface UsePickerBaseProps<TValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueBaseProps<TValue, TError>, UsePickerViewsBaseProps<TValue, TView, TExternalProps, TAdditionalProps>, UsePickerLayoutProps {
 }
-export interface UsePickerProps<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueProps<TValue, TError>, UsePickerViewsProps<TValue, TDate, TView, TExternalProps, TAdditionalProps>, UsePickerLayoutProps {
+export interface UsePickerProps<TValue, TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<TValue, TView, any, any>, TAdditionalProps extends {}> extends UsePickerValueProps<TValue, TError>, UsePickerViewsProps<TValue, TView, TExternalProps, TAdditionalProps>, UsePickerLayoutProps {
 }
-export interface UsePickerParams<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TDate, TView, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TDate, TExternalProps>, 'valueManager' | 'valueType' | 'wrapperVariant' | 'validator'>, Pick<UsePickerViewParams<TValue, TDate, TView, TSection, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'> {
+export interface UsePickerParams<TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TExternalProps extends UsePickerProps<TValue, TView, any, any, any>, TAdditionalProps extends {}> extends Pick<UsePickerValueParams<TValue, TExternalProps>, 'valueManager' | 'valueType' | 'wrapperVariant' | 'validator'>, Pick<UsePickerViewParams<TValue, TView, TSection, TExternalProps, TAdditionalProps>, 'additionalViewProps' | 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'>, Pick<UsePickerProviderParameters<TValue>, 'localeText'> {
     props: TExternalProps;
 }
 export interface UsePickerResponse<TValue, TView extends DateOrTimeViewWithMeridiem, TSection extends FieldSection, TError> extends Omit<UsePickerValueResponse<TValue, TSection, TError>, 'viewProps' | 'layoutProps'>, Omit<UsePickerViewsResponse<TView>, 'layoutProps'>, UsePickerLayoutPropsResponse<TValue, TView> {
-    ownerState: PickerOwnerState<TValue>;
+    ownerState: PickerOwnerState;
+    providerProps: UsePickerProviderReturnValue;
 }

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

@@ -1,13 +1,12 @@
 import { UsePickerValueLayoutResponse } from './usePickerValue.types';
 import { UsePickerViewsLayoutResponse } from './usePickerViews';
 import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../../models/common';
+import { FormProps } from '../../models';
 /**
  * Props used to create the layout of the views.
  * Those props are exposed on all the pickers.
  */
-export interface UsePickerLayoutProps {
-    disabled?: boolean;
-    readOnly?: boolean;
+export interface UsePickerLayoutProps extends FormProps {
     /**
      * Force rendering in particular orientation.
      */

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

@@ -1,9 +1,10 @@
 import { FieldSection, PickerOwnerState } from '../../../models';
 import type { UsePickerProps } from './usePicker.types';
-import { UsePickerValueResponse } from './usePickerValue.types';
+import { PickerValueManager, UsePickerValueResponse } from './usePickerValue.types';
 interface UsePickerOwnerStateParameters<TValue> {
-    props: UsePickerProps<TValue, any, any, any, any, any>;
+    props: UsePickerProps<TValue, any, any, any, any>;
     pickerValueResponse: UsePickerValueResponse<TValue, FieldSection, any>;
+    valueManager: PickerValueManager<TValue, any>;
 }
-export declare function usePickerOwnerState<TValue>(parameters: UsePickerOwnerStateParameters<TValue>): PickerOwnerState<TValue>;
+export declare function usePickerOwnerState<TValue>(parameters: UsePickerOwnerStateParameters<TValue>): PickerOwnerState;
 export {};

package/internals/hooks/usePicker/usePickerOwnerState.js

@@ -1,13 +1,16 @@
 import * as React from 'react';
+import { useUtils } from "../useUtils.js";
 export function usePickerOwnerState(parameters) {
   const {
     props,
-    pickerValueResponse
+    pickerValueResponse,
+    valueManager
   } = parameters;
+  const utils = useUtils();
   return React.useMemo(() => ({
-    value: pickerValueResponse.viewProps.value,
-    open: pickerValueResponse.open,
-    disabled: props.disabled ?? false,
-    readOnly: props.readOnly ?? false
-  }), [pickerValueResponse.viewProps.value, pickerValueResponse.open, props.disabled, props.readOnly]);
+    isPickerValueEmpty: valueManager.areValuesEqual(utils, pickerValueResponse.viewProps.value, valueManager.emptyValue),
+    isPickerOpen: pickerValueResponse.open,
+    isPickerDisabled: props.disabled ?? false,
+    isPickerReadOnly: props.readOnly ?? false
+  }), [utils, valueManager, pickerValueResponse.viewProps.value, pickerValueResponse.open, props.disabled, props.readOnly]);
 }

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

@@ -0,0 +1,10 @@
+import { FieldSection, PickerOwnerState } from '../../../models';
+import { UsePickerValueResponse } from './usePickerValue.types';
+import { PickerProviderProps } from '../../components/PickerProvider';
+export interface UsePickerProviderParameters<TValue> extends Pick<PickerProviderProps, 'localeText'> {
+    pickerValueResponse: UsePickerValueResponse<TValue, FieldSection, any>;
+    ownerState: PickerOwnerState;
+}
+export interface UsePickerProviderReturnValue extends Omit<PickerProviderProps, 'children'> {
+}
+export declare function usePickerProvider<TValue>(parameters: UsePickerProviderParameters<TValue>): UsePickerProviderReturnValue;

package/internals/hooks/usePicker/usePickerProvider.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export function usePickerProvider(parameters) {
+  const {
+    pickerValueResponse,
+    ownerState,
+    localeText
+  } = parameters;
+  const contextValue = React.useMemo(() => ({
+    onOpen: pickerValueResponse.actions.onOpen,
+    onClose: pickerValueResponse.actions.onClose,
+    open: pickerValueResponse.open
+  }), [pickerValueResponse.actions.onOpen, pickerValueResponse.actions.onClose, pickerValueResponse.open]);
+  const privateContextValue = React.useMemo(() => ({
+    ownerState
+  }), [ownerState]);
+  return {
+    localeText,
+    contextValue,
+    privateContextValue
+  };
+}

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

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

package/internals/hooks/usePicker/usePickerValue.js

@@ -5,6 +5,7 @@ import { useOpenState } from "../useOpenState.js";
 import { useLocalizationContext, useUtils } from "../useUtils.js";
 import { useValidation } from "../../../validation/index.js";
 import { useValueWithTimezone } from "../useValueWithTimezone.js";
+
 /**
  * Decide if the new value should be published
  * The published value will be passed to `onChange` if defined.
@@ -333,17 +334,11 @@ export const usePickerValue = ({
     onSelectShortcut: handleSelectShortcut,
     isValid
   });
-  const contextValue = React.useMemo(() => ({
-    onOpen: handleOpen,
-    onClose: handleClose,
-    open: isOpen
-  }), [isOpen, handleClose, handleOpen]);
   return {
     open: isOpen,
     fieldProps: fieldResponse,
     viewProps: viewResponse,
     layoutProps: layoutResponse,
-    actions,
-    contextValue
+    actions
   };
 };