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

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

@@ -1,20 +1,21 @@
 import * as React from 'react';
-import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, FieldValueType, PickerValidDate, FieldRef, OnErrorProps, InferError } from '../../../models';
+import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferError, PickerValueType } from '../../../models';
 import type { PickerValueManager } from '../usePicker';
 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';
-export interface UseFieldParams<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, any, TEnableAccessibleFieldDOMStructure, any>> {
+import { FormProps } from '../../models';
+export interface UseFieldParams<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, TEnableAccessibleFieldDOMStructure, any>> {
     forwardedProps: TForwardedProps;
     internalProps: TInternalProps;
-    valueManager: PickerValueManager<TValue, TDate, InferError<TInternalProps>>;
-    fieldValueManager: FieldValueManager<TValue, TDate, TSection>;
-    validator: Validator<TValue, TDate, InferError<TInternalProps>, TInternalProps>;
-    valueType: FieldValueType;
+    valueManager: PickerValueManager<TValue, InferError<TInternalProps>>;
+    fieldValueManager: FieldValueManager<TValue, TSection>;
+    validator: Validator<TValue, InferError<TInternalProps>, TInternalProps>;
+    valueType: PickerValueType;
 }
-export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends TimezoneProps, OnErrorProps<TValue, TError> {
+export interface UseFieldInternalProps<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends TimezoneProps, FormProps, OnErrorProps<TValue, TError> {
     /**
      * The selected value.
      * Used when the component is controlled.
@@ -29,7 +30,7 @@ export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TS
      * For example, on time fields it will be used to determine the date to set.
      * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
      */
-    referenceDate?: TDate;
+    referenceDate?: PickerValidDate;
     /**
      * Callback fired when the value changes.
      * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
@@ -63,12 +64,6 @@ export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TS
      * @default false
      */
     shouldRespectLeadingZeros?: boolean;
-    /**
-     * It prevents the user from changing the value of the field
-     * (not from interacting with the field).
-     * @default false
-     */
-    readOnly?: boolean;
     /**
      * The currently selected sections.
      * This prop accepts four formats:
@@ -89,7 +84,7 @@ export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TS
      */
     unstableFieldRef?: React.Ref<FieldRef<TSection>>;
     /**
-     * @default false
+     * @default true
      */
     enableAccessibleFieldDOMStructure?: TEnableAccessibleFieldDOMStructure;
     /**
@@ -97,13 +92,8 @@ export interface UseFieldInternalProps<TValue, TDate extends PickerValidDate, TS
      * @default false
      */
     autoFocus?: boolean;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
 }
-export interface UseFieldCommonAdditionalProps extends Required<Pick<UseFieldInternalProps<any, any, any, any, any>, 'disabled' | 'readOnly'>> {
+export interface UseFieldCommonAdditionalProps extends Required<Pick<UseFieldInternalProps<any, any, any, any>, 'disabled' | 'readOnly'>> {
 }
 export interface UseFieldCommonForwardedProps extends ExportedUseClearableFieldProps {
     onKeyDown?: React.KeyboardEventHandler;
@@ -143,18 +133,18 @@ interface UseFieldV7AdditionalProps {
 export type UseFieldResponse<TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & {
     [key: string]: any;
 }> = Omit<TForwardedProps, keyof UseFieldCommonForwardedProps> & Required<UseFieldCommonForwardedProps> & UseFieldCommonAdditionalProps & (TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6AdditionalProps & Required<UseFieldV6ForwardedProps> : UseFieldV7AdditionalProps & Required<UseFieldV7ForwardedProps>);
-export type FieldSectionValueBoundaries<TDate extends PickerValidDate, SectionType extends FieldSectionType> = {
+export type FieldSectionValueBoundaries<SectionType extends FieldSectionType> = {
     minimum: number;
     maximum: number;
 } & (SectionType extends 'day' ? {
-    longestMonth: TDate;
+    longestMonth: PickerValidDate;
 } : {});
-export type FieldSectionsValueBoundaries<TDate extends PickerValidDate> = {
+export type FieldSectionsValueBoundaries = {
     [SectionType in FieldSectionType]: (params: {
-        currentDate: TDate | null;
+        currentDate: PickerValidDate | null;
         format: string;
         contentType: FieldSectionContentType;
-    }) => FieldSectionValueBoundaries<TDate, SectionType>;
+    }) => FieldSectionValueBoundaries<SectionType>;
 };
 export type FieldSectionsBoundaries = {
     [SectionType in FieldSectionType]: {
@@ -170,15 +160,15 @@ export interface FieldChangeHandlerContext<TError> {
  * Object used to access and update the active date (i.e: the date containing the active section).
  * Mainly useful in the range fields where we need to update the date containing the active section without impacting the other one.
  */
-interface FieldActiveDateManager<TValue, TDate extends PickerValidDate, TSection extends FieldSection> {
+interface FieldActiveDateManager<TValue, TSection extends FieldSection> {
     /**
      * Active date from `state.value`.
      */
-    date: TDate | null;
+    date: PickerValidDate | null;
     /**
      * Active date from the `state.referenceValue`.
      */
-    referenceDate: TDate;
+    referenceDate: PickerValidDate;
     /**
      * @template TSection
      * @param  {TSection[]} sections The sections of the full value.
@@ -188,25 +178,25 @@ interface FieldActiveDateManager<TValue, TDate extends PickerValidDate, TSection
     getSections: (sections: TSection[]) => TSection[];
     /**
      * Creates the new value and reference value based on the new active date and the current state.
-     * @template TValue, TDate
-     * @param {TDate | null} newActiveDate The new value of the date containing the active section.
+     * @template TValue
+     * @param {PickerValidDate | null} newActiveDate The new value of the date containing the active section.
      * @returns {Pick<UseFieldState<TValue, any>, 'value' | 'referenceValue'>} The new value and reference value to publish and store in the state.
      */
-    getNewValuesFromNewActiveDate: (newActiveDate: TDate | null) => Pick<UseFieldState<TValue, any>, 'value' | 'referenceValue'>;
+    getNewValuesFromNewActiveDate: (newActiveDate: PickerValidDate | null) => Pick<UseFieldState<TValue, any>, 'value' | 'referenceValue'>;
 }
 export type FieldParsedSelectedSections = number | 'all' | null;
-export interface FieldValueManager<TValue, TDate extends PickerValidDate, TSection extends FieldSection> {
+export interface FieldValueManager<TValue, TSection extends FieldSection> {
     /**
      * Creates the section list from the current value.
      * The `prevSections` are used on the range fields to avoid losing the sections of a partially filled date when editing the other date.
-     * @template TValue, TDate, TSection
-     * @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
+     * @template TValue, TSection
+     * @param {MuiPickersAdapter} utils The utils to manipulate the date.
      * @param {TValue} value The current value to generate sections from.
      * @param {TSection[] | null} fallbackSections The sections to use as a fallback if a date is null or invalid.
-     * @param {(date: TDate) => FieldSection[]} getSectionsFromDate Returns the sections of the given date.
+     * @param {(date: PickerValidDate) => FieldSection[]} getSectionsFromDate Returns the sections of the given date.
      * @returns {TSection[]}  The new section list.
      */
-    getSectionsFromValue: (utils: MuiPickersAdapter<TDate>, value: TValue, fallbackSections: TSection[] | null, getSectionsFromDate: (date: TDate) => FieldSection[]) => TSection[];
+    getSectionsFromValue: (utils: MuiPickersAdapter, value: TValue, fallbackSections: TSection[] | null, getSectionsFromDate: (date: PickerValidDate) => FieldSection[]) => TSection[];
     /**
      * Creates the string value to render in the input based on the current section list.
      * @template TSection
@@ -225,33 +215,33 @@ export interface FieldValueManager<TValue, TDate extends PickerValidDate, TSecti
     getV7HiddenInputValueFromSections: (sections: TSection[]) => string;
     /**
      * Returns the manager of the active date.
-     * @template TValue, TDate, TSection
-     * @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
+     * @template TValue, TSection
+     * @param {MuiPickersAdapter} utils The utils to manipulate the date.
      * @param {UseFieldState<TValue, TSection>} state The current state of the field.
      * @param {TSection} activeSection The active section.
-     * @returns {FieldActiveDateManager<TValue, TDate, TSection>} The manager of the active date.
+     * @returns {FieldActiveDateManager<TValue, TSection>} The manager of the active date.
      */
-    getActiveDateManager: (utils: MuiPickersAdapter<TDate>, state: UseFieldState<TValue, TSection>, activeSection: TSection) => FieldActiveDateManager<TValue, TDate, TSection>;
+    getActiveDateManager: (utils: MuiPickersAdapter, state: UseFieldState<TValue, TSection>, activeSection: TSection) => FieldActiveDateManager<TValue, TSection>;
     /**
      * Parses a string version (most of the time coming from the input).
      * This method should only be used when the change does not come from a single section.
-     * @template TValue, TDate
+     * @template TValue
      * @param {string} valueStr The string value to parse.
      * @param {TValue} referenceValue The reference value currently stored in state.
-     * @param {(dateStr: string, referenceDate: TDate) => TDate | null} parseDate A method to convert a string date into a parsed one.
+     * @param {(dateStr: string, referenceDate: PickerValidDate) => PickerValidDate | null} parseDate A method to convert a string date into a parsed one.
      * @returns {TValue} The new parsed value.
      */
-    parseValueStr: (valueStr: string, referenceValue: TValue, parseDate: (dateStr: string, referenceDate: TDate) => TDate | null) => TValue;
+    parseValueStr: (valueStr: string, referenceValue: TValue, parseDate: (dateStr: string, referenceDate: PickerValidDate) => PickerValidDate | null) => TValue;
     /**
      * Update the reference value with the new value.
      * This method must make sure that no date inside the returned `referenceValue` is invalid.
-     * @template TValue, TDate
-     * @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
+     * @template TValue
+     * @param {MuiPickersAdapter} utils The utils to manipulate the date.
      * @param {TValue} value The new value from which we want to take all valid dates in the `referenceValue` state.
      * @param {TValue} prevReferenceValue The previous reference value. It is used as a fallback for invalid dates in the new value.
      * @returns {TValue} The new reference value with no invalid date.
      */
-    updateReferenceValue: (utils: MuiPickersAdapter<TDate>, value: TValue, prevReferenceValue: TValue) => TValue;
+    updateReferenceValue: (utils: MuiPickersAdapter, value: TValue, prevReferenceValue: TValue) => TValue;
 }
 export interface UseFieldState<TValue, TSection extends FieldSection> {
     value: TValue;
@@ -327,13 +317,13 @@ export interface UseFieldTextFieldInteractions {
     setSelectedSections: (newSelectedSections: FieldSelectedSections) => void;
     isFieldFocused: () => boolean;
 }
-export type UseFieldTextField<TEnableAccessibleFieldDOMStructure extends boolean> = <TValue, TDate extends PickerValidDate, TSection extends FieldSection, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, TEnableAccessibleFieldDOMStructure, any> & {
+export type UseFieldTextField<TEnableAccessibleFieldDOMStructure extends boolean> = <TValue, TSection extends FieldSection, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, TEnableAccessibleFieldDOMStructure, any> & {
     minutesStep?: number;
-}>(params: UseFieldTextFieldParams<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => {
+}>(params: UseFieldTextFieldParams<TValue, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => {
     interactions: UseFieldTextFieldInteractions;
     returnedValue: TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6AdditionalProps & Required<UseFieldV6ForwardedProps> : UseFieldV7AdditionalProps & Required<UseFieldV7ForwardedProps>;
 };
-interface UseFieldTextFieldParams<TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, TEnableAccessibleFieldDOMStructure, any>> extends UseFieldParams<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>, UseFieldStateResponse<TValue, TDate, TSection>, UseFieldCharacterEditingResponse {
+interface UseFieldTextFieldParams<TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, TEnableAccessibleFieldDOMStructure, any>> extends UseFieldParams<TValue, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>, UseFieldStateResponse<TValue, TSection>, UseFieldCharacterEditingResponse {
     areAllSectionsEmpty: boolean;
     sectionOrder: SectionOrdering;
 }

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"> & {
+import { FieldSectionType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections, PickerValueType } from '../../../models';
+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 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 getSectionsBoundaries: (utils: MuiPickersAdapter, localizedDigits: string[], timezone: PickersTimezone) => FieldSectionsValueBoundaries;
+export declare const validateSections: <TSection extends FieldSection>(sections: TSection[], valueType: PickerValueType) => void;
+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/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 {
@@ -41,6 +41,7 @@ export const useFieldState = params => {
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager
   });

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);
@@ -198,8 +198,9 @@ export const useFieldV7TextField = params => {
     if (focused || !sectionListRef.current) {
       return;
     }
+    const activeElement = getActiveElement(document);
     setFocused(true);
-    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(getActiveElement(document)) != null;
+    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(activeElement) != null;
     if (!isFocusInsideASection) {
       setSelectedSections(sectionOrder.startIndex);
     }

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,42 +49,49 @@ export const useMobilePicker = _ref => {
     open,
     actions,
     layoutProps,
+    providerProps,
     renderCurrentView,
     fieldProps: pickerFieldProps,
-    contextValue
+    ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
     fieldRef,
+    localeText,
     autoFocusView: true,
     additionalViewProps: {},
-    wrapperVariant: 'mobile'
+    variant: 'mobile'
   }));
   const Field = slots.field;
   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, variant, additionalViewProps, validator, autoFocusView, rendererInterceptor, fieldRef, localeText, }: UsePickerParams<TValue, TView, TSection, TExternalProps, TAdditionalProps>) => UsePickerResponse<TValue, TView, TSection, InferError<TExternalProps>>;