@mui/x-date-pickers 8.0.0-beta.0 → 8.0.0-beta.1

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

@@ -1,20 +1,12 @@
 import * as React from 'react';
-import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferError, InferFieldSection, PickerValueType } from "../../../models/index.js";
-import type { PickerValueManager } from '../../models';
-import type { Validator } from '../../../validation';
-import type { UseFieldStateResponse } from './useFieldState';
-import type { UseFieldCharacterEditingResponse } from './useFieldCharacterEditing';
+import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferFieldSection, PickerManager, PickerValueType } from "../../../models/index.js";
+import { InternalPropNames } from "../../../hooks/useSplitFieldProps.js";
 import { PickersSectionElement, PickersSectionListRef } from "../../../PickersSectionList/index.js";
 import { FormProps, InferNonNullablePickerValue, PickerValidValue } from "../../models/index.js";
-import type { ExportedPickerFieldUIProps } from '../../components/PickerFieldUI';
-export interface UseFieldParams<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any>> {
-  forwardedProps: TForwardedProps;
-  internalProps: TInternalProps;
-  valueManager: PickerValueManager<TValue, InferError<TInternalProps>>;
-  fieldValueManager: FieldValueManager<TValue>;
-  validator: Validator<TValue, InferError<TInternalProps>, TInternalProps>;
-  valueType: PickerValueType;
-  getOpenPickerButtonAriaLabel: (value: TValue) => string;
+export interface UseFieldParameters<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>> {
+  manager: PickerManager<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, any>;
+  props: TProps;
+  skipContextFieldRefAssignment?: boolean;
 }
 export interface UseFieldInternalProps<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends TimezoneProps, FormProps, OnErrorProps<TValue, TError> {
   /**
@@ -98,39 +90,47 @@ export interface UseFieldInternalProps<TValue extends PickerValidValue, TEnableA
    */
   focused?: boolean;
 }
-export interface UseFieldCommonAdditionalProps extends Required<Pick<UseFieldInternalProps<any, any, any>, 'disabled' | 'readOnly' | 'autoFocus'>> {
-  /**
-   * The aria label to set on the button that opens the Picker.
-   */
-  openPickerAriaLabel: string;
-}
-export interface UseFieldCommonForwardedProps extends Pick<ExportedPickerFieldUIProps, 'clearable' | 'onClear'> {
-  onKeyDown?: React.KeyboardEventHandler;
+export type UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure extends boolean> = TEnableAccessibleFieldDOMStructure extends false ? {
+  clearable?: boolean;
   error?: boolean;
-}
-export type UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure extends boolean> = UseFieldCommonForwardedProps & (TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps);
-export interface UseFieldV6ForwardedProps {
+  placeholder?: string;
   inputRef?: React.Ref<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler;
   onClick?: React.MouseEventHandler;
   onFocus?: React.FocusEventHandler;
+  onKeyDown?: React.KeyboardEventHandler;
+  onBlur?: React.FocusEventHandler;
   onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
-  placeholder?: string;
-}
-interface UseFieldV6AdditionalProps extends Required<Pick<React.InputHTMLAttributes<HTMLInputElement>, 'inputMode' | 'placeholder' | 'value' | 'onChange' | 'autoComplete'>> {
-  enableAccessibleFieldDOMStructure: false;
-  focused?: boolean;
-}
-export interface UseFieldV7ForwardedProps {
+  onClear?: React.MouseEventHandler;
+} : {
+  clearable?: boolean;
+  error?: boolean;
   focused?: boolean;
   sectionListRef?: React.Ref<PickersSectionListRef>;
-  onBlur?: React.FocusEventHandler;
   onClick?: React.MouseEventHandler;
+  onKeyDown?: React.KeyboardEventHandler;
   onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
   onInput?: React.FormEventHandler<HTMLDivElement>;
   onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
-}
-interface UseFieldV7AdditionalProps {
+  onClear?: React.MouseEventHandler;
+};
+type UseFieldAdditionalProps<TEnableAccessibleFieldDOMStructure extends boolean> = TEnableAccessibleFieldDOMStructure extends false ? {
+  /**
+   * The aria label to set on the button that opens the Picker.
+   */
+  openPickerAriaLabel: string;
+  enableAccessibleFieldDOMStructure: false;
+  focused: boolean | undefined;
+  inputMode: 'text' | 'numeric';
+  placeholder: string;
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  autoComplete: 'off';
+} : {
+  /**
+   * The aria label to set on the button that opens the Picker.
+   */
+  openPickerAriaLabel: string;
   enableAccessibleFieldDOMStructure: true;
   elements: PickersSectionElement[];
   tabIndex: number | undefined;
@@ -139,10 +139,8 @@ interface UseFieldV7AdditionalProps {
   onChange: React.ChangeEventHandler<HTMLInputElement>;
   areAllSectionsEmpty: boolean;
   focused: boolean;
-}
-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 UseFieldReturnValue<TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>> = Required<Pick<UseFieldInternalProps<any, any, any>, 'disabled' | 'readOnly' | 'autoFocus'>> & Required<UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>> & UseFieldAdditionalProps<TEnableAccessibleFieldDOMStructure> & Omit<TProps, InternalPropNames<PickerValueType>>;
 export type FieldSectionValueBoundaries<SectionType extends FieldSectionType> = {
   minimum: number;
   maximum: number;
@@ -282,8 +280,11 @@ export interface UseFieldState<TValue extends PickerValidValue> {
    * The property below allows us to set the first `onChange` value into state waiting for the second one.
    */
   tempValueStrAndroid: string | null;
+  /**
+   * The current query when editing the field using letters or digits.
+   */
+  characterQuery: CharacterEditingQuery | null;
 }
-export type AvailableAdjustKeyCode = 'ArrowUp' | 'ArrowDown' | 'PageUp' | 'PageDown' | 'Home' | 'End';
 export type SectionNeighbors = {
   [sectionIndex: number]: {
     /**
@@ -310,33 +311,12 @@ export type SectionOrdering = {
    */
   endIndex: number;
 };
-export interface UseFieldTextFieldInteractions {
-  /**
-   * Select the correct sections in the DOM according to the sections currently selected in state.
-   */
-  syncSelectionToDOM: () => void;
-  /**
-   * Returns the index of the active section (the first focused section).
-   * If no section is active, returns `null`.
-   * @returns {number | null} The index of the active section.
-   */
-  getActiveSectionIndexFromDOM: () => number | null;
-  /**
-   * Focuses the field.
-   * @param {number | FieldSectionType} newSelectedSection The section to select once focused.
-   */
-  focusField: (newSelectedSection?: number | FieldSectionType) => void;
-  setSelectedSections: (newSelectedSections: FieldSelectedSections) => void;
-  isFieldFocused: () => boolean;
+export interface CharacterEditingQuery {
+  value: string;
+  sectionIndex: number;
+  sectionType: FieldSectionType;
 }
-export type UseFieldTextField<TEnableAccessibleFieldDOMStructure extends boolean> = <TValue extends PickerValidValue, TForwardedProps extends (TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps), TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any> & {
-  minutesStep?: number;
-}>(params: UseFieldTextFieldParams<TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => {
-  interactions: UseFieldTextFieldInteractions;
-  returnedValue: TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6AdditionalProps & Required<UseFieldV6ForwardedProps> : UseFieldV7AdditionalProps & Required<UseFieldV7ForwardedProps>;
+export type UseFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure> & {
+  enableAccessibleFieldDOMStructure?: boolean;
 };
-interface UseFieldTextFieldParams<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends (TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps), TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any>> extends UseFieldParams<TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>, UseFieldStateResponse<TValue>, UseFieldCharacterEditingResponse {
-  areAllSectionsEmpty: boolean;
-  sectionOrder: SectionOrdering;
-}
 export {};

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

@@ -1,4 +1,4 @@
-import { AvailableAdjustKeyCode, FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from "./useField.types.js";
+import { FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from "./useField.types.js";
 import { FieldSectionType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections, PickerValueType, InferFieldSection } from "../../../models/index.js";
 import { PickerValidValue } from "../../models/index.js";
 export declare const getDateSectionConfigFromFormatToken: (utils: MuiPickersAdapter, formatToken: string) => Pick<FieldSection, "type" | "contentType"> & {
@@ -12,15 +12,12 @@ export declare const removeLocalizedDigits: (valueStr: string, localizedDigits:
 export declare const applyLocalizedDigits: (valueStr: string, localizedDigits: string[]) => string;
 export declare const isStringNumber: (valueStr: string, localizedDigits: string[]) => boolean;
 /**
- * Remove the leading zeroes to a digit section value.
+ * Make sure the value of a digit section have the right amount of leading zeros.
  * E.g.: `03` => `3`
  * 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: (utils: MuiPickersAdapter, value: number, sectionBoundaries: FieldSectionValueBoundaries<any>, localizedDigits: string[], section: Pick<FieldSection, "format" | "type" | "contentType" | "hasLeadingZerosInFormat" | "hasLeadingZerosInInput" | "maxLength">) => string;
-export declare const adjustSectionValue: <TValue extends PickerValidValue>(utils: MuiPickersAdapter, timezone: PickersTimezone, section: InferFieldSection<TValue>, 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: (utils: MuiPickersAdapter, valueStr: string, currentFormat: string, newFormat: string) => string;
 export declare const doesSectionFormatHaveLeadingZeros: (utils: MuiPickersAdapter, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;

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

@@ -17,20 +17,6 @@ export const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
     maxLength: config.maxLength
   };
 };
-const getDeltaFromKeyCode = keyCode => {
-  switch (keyCode) {
-    case 'ArrowUp':
-      return 1;
-    case 'ArrowDown':
-      return -1;
-    case 'PageUp':
-      return 5;
-    case 'PageDown':
-      return -5;
-    default:
-      return 0;
-  }
-};
 export const getDaysInWeekStr = (utils, format) => {
   const elements = [];
   const now = utils.date(undefined, 'default');
@@ -108,21 +94,13 @@ export const isStringNumber = (valueStr, localizedDigits) => {
 };
 
 /**
- * Remove the leading zeroes to a digit section value.
+ * Make sure the value of a digit section have the right amount of leading zeros.
  * E.g.: `03` => `3`
  * Warning: Should only be called with non-localized digits. Call `removeLocalizedDigits` with your value if needed.
  */
 export const cleanLeadingZeros = (valueStr, size) => {
-  let cleanValueStr = valueStr;
-
-  // Remove the leading zeros
-  cleanValueStr = Number(cleanValueStr).toString();
-
-  // Add enough leading zeros to fill the section
-  while (cleanValueStr.length < size) {
-    cleanValueStr = `0${cleanValueStr}`;
-  }
-  return cleanValueStr;
+  // Remove the leading zeros and then add back as many as needed.
+  return Number(valueStr).toString().padStart(size, '0');
 };
 export const cleanDigitSectionValue = (utils, value, sectionBoundaries, localizedDigits, section) => {
   if (process.env.NODE_ENV !== 'production') {
@@ -143,68 +121,6 @@ export const cleanDigitSectionValue = (utils, value, sectionBoundaries, localize
   }
   return applyLocalizedDigits(valueStr, localizedDigits);
 };
-export const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, localizedDigits, activeDate, stepsAttributes) => {
-  const delta = getDeltaFromKeyCode(keyCode);
-  const isStart = keyCode === 'Home';
-  const isEnd = keyCode === 'End';
-  const shouldSetAbsolute = section.value === '' || isStart || isEnd;
-  const adjustDigitSection = () => {
-    const sectionBoundaries = sectionsValueBoundaries[section.type]({
-      currentDate: activeDate,
-      format: section.format,
-      contentType: section.contentType
-    });
-    const getCleanValue = value => cleanDigitSectionValue(utils, value, sectionBoundaries, localizedDigits, section);
-    const step = section.type === 'minutes' && stepsAttributes?.minutesStep ? stepsAttributes.minutesStep : 1;
-    const currentSectionValue = parseInt(removeLocalizedDigits(section.value, localizedDigits), 10);
-    let newSectionValueNumber = currentSectionValue + delta * step;
-    if (shouldSetAbsolute) {
-      if (section.type === 'year' && !isEnd && !isStart) {
-        return utils.formatByString(utils.date(undefined, timezone), section.format);
-      }
-      if (delta > 0 || isStart) {
-        newSectionValueNumber = sectionBoundaries.minimum;
-      } else {
-        newSectionValueNumber = sectionBoundaries.maximum;
-      }
-    }
-    if (newSectionValueNumber % step !== 0) {
-      if (delta < 0 || isStart) {
-        newSectionValueNumber += step - (step + newSectionValueNumber) % step; // for JS -3 % 5 = -3 (should be 2)
-      }
-      if (delta > 0 || isEnd) {
-        newSectionValueNumber -= newSectionValueNumber % step;
-      }
-    }
-    if (newSectionValueNumber > sectionBoundaries.maximum) {
-      return getCleanValue(sectionBoundaries.minimum + (newSectionValueNumber - sectionBoundaries.maximum - 1) % (sectionBoundaries.maximum - sectionBoundaries.minimum + 1));
-    }
-    if (newSectionValueNumber < sectionBoundaries.minimum) {
-      return getCleanValue(sectionBoundaries.maximum - (sectionBoundaries.minimum - newSectionValueNumber - 1) % (sectionBoundaries.maximum - sectionBoundaries.minimum + 1));
-    }
-    return getCleanValue(newSectionValueNumber);
-  };
-  const adjustLetterSection = () => {
-    const options = getLetterEditingOptions(utils, timezone, section.type, section.format);
-    if (options.length === 0) {
-      return section.value;
-    }
-    if (shouldSetAbsolute) {
-      if (delta > 0 || isStart) {
-        return options[0];
-      }
-      return options[options.length - 1];
-    }
-    const currentOptionIndex = options.indexOf(section.value);
-    const newOptionIndex = (currentOptionIndex + delta) % options.length;
-    const clampedIndex = (newOptionIndex + options.length) % options.length;
-    return options[clampedIndex];
-  };
-  if (section.contentType === 'digit' || section.contentType === 'digit-with-letter') {
-    return adjustDigitSection();
-  }
-  return adjustLetterSection();
-};
 export const getSectionVisibleValue = (section, target, localizedDigits) => {
   let value = section.value || section.placeholder;
   const hasLeadingZeros = target === 'non-input' ? section.hasLeadingZerosInFormat : section.hasLeadingZerosInInput;
@@ -244,12 +160,11 @@ export const doesSectionFormatHaveLeadingZeros = (utils, contentType, sectionTyp
     // We can't use `changeSectionValueFormat`, because  `utils.parse('1', 'YYYY')` returns `1971` instead of `1`.
     case 'year':
       {
-        if (isFourDigitYearFormat(utils, format)) {
-          const formatted0001 = utils.formatByString(utils.setYear(now, 1), format);
-          return formatted0001 === '0001';
+        // Remove once https://github.com/iamkun/dayjs/pull/2847 is merged and bump dayjs version
+        if (utils.lib === 'dayjs' && format === 'YY') {
+          return true;
         }
-        const formatted2001 = utils.formatByString(utils.setYear(now, 2001), format);
-        return formatted2001 === '01';
+        return utils.formatByString(utils.setYear(now, 1), format).startsWith('0');
       }
     case 'month':
       {

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

@@ -1,23 +1,5 @@
-import { PickersTimezone, InferFieldSection } from "../../../models/index.js";
-import { FieldSectionsValueBoundaries } from "./useField.types.js";
-import { UpdateSectionValueParams } from "./useFieldState.js";
+import { UseFieldStateReturnValue } from "./useFieldState.js";
 import { PickerValidValue } from "../../models/index.js";
-export interface ApplyCharacterEditingParams {
-  keyPressed: string;
-  sectionIndex: number;
-}
-interface UseFieldCharacterEditingParams<TValue extends PickerValidValue> {
-  sections: InferFieldSection<TValue>[];
-  updateSectionValue: (params: UpdateSectionValueParams<TValue>) => void;
-  sectionsValueBoundaries: FieldSectionsValueBoundaries;
-  localizedDigits: string[];
-  setTempAndroidValueStr: (newValue: string | null) => void;
-  timezone: PickersTimezone;
-}
-export interface UseFieldCharacterEditingResponse {
-  applyCharacterEditing: (params: ApplyCharacterEditingParams) => void;
-  resetCharacterQuery: () => void;
-}
 /**
  * Update the active section value when the user pressed a key that is not a navigation key (arrow key for example).
  * This hook has two main editing behaviors
@@ -26,11 +8,22 @@ export interface UseFieldCharacterEditingResponse {
  * 2. The letter editing when the user presses another key
  */
 export declare const useFieldCharacterEditing: <TValue extends PickerValidValue>({
-  sections,
-  updateSectionValue,
-  sectionsValueBoundaries,
-  localizedDigits,
-  setTempAndroidValueStr,
-  timezone
-}: UseFieldCharacterEditingParams<TValue>) => UseFieldCharacterEditingResponse;
+  stateResponse: {
+    localizedDigits,
+    sectionsValueBoundaries,
+    state,
+    timezone,
+    setCharacterQuery,
+    setTempAndroidValueStr,
+    updateSectionValue
+  }
+}: UseFieldCharacterEditingParameters<TValue>) => UseFieldCharacterEditingReturnValue;
+export interface ApplyCharacterEditingParameters {
+  keyPressed: string;
+  sectionIndex: number;
+}
+interface UseFieldCharacterEditingParameters<TValue extends PickerValidValue> {
+  stateResponse: UseFieldStateReturnValue<TValue>;
+}
+export type UseFieldCharacterEditingReturnValue = (params: ApplyCharacterEditingParameters) => void;
 export {};

package/esm/internals/hooks/useField/useFieldCharacterEditing.js

@@ -1,32 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useUtils } from "../useUtils.js";
 import { changeSectionValueFormat, cleanDigitSectionValue, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, getDaysInWeekStr, getLetterEditingOptions, applyLocalizedDigits, removeLocalizedDigits, isStringNumber } from "./useField.utils.js";
-
-/**
- * The letter editing and the numeric editing each define a `CharacterEditingApplier`.
- * This function decides what the new section value should be and if the focus should switch to the next section.
- *
- * If it returns `null`, then the section value is not updated and the focus does not move.
- */
-
-/**
- * Function called by `applyQuery` which decides:
- * - what is the new section value ?
- * - should the query used to get this value be stored for the next key press ?
- *
- * If it returns `{ sectionValue: string; shouldGoToNextSection: boolean }`,
- * Then we store the query and update the section with the new value.
- *
- * If it returns `{ saveQuery: true` },
- * Then we store the query and don't update the section.
- *
- * If it returns `{ saveQuery: false },
- * Then we do nothing.
- */
-
-const QUERY_LIFE_DURATION_MS = 5000;
 const isQueryResponseWithoutValue = response => response.saveQuery != null;
 
 /**
@@ -37,44 +12,33 @@ const isQueryResponseWithoutValue = response => response.saveQuery != null;
  * 2. The letter editing when the user presses another key
  */
 export const useFieldCharacterEditing = ({
-  sections,
-  updateSectionValue,
-  sectionsValueBoundaries,
-  localizedDigits,
-  setTempAndroidValueStr,
-  timezone
+  stateResponse: {
+    // States and derived states
+    localizedDigits,
+    sectionsValueBoundaries,
+    state,
+    timezone,
+    // Methods to update the states
+    setCharacterQuery,
+    setTempAndroidValueStr,
+    updateSectionValue
+  }
 }) => {
   const utils = useUtils();
-  const [query, setQuery] = React.useState(null);
-  const resetQuery = useEventCallback(() => setQuery(null));
-  React.useEffect(() => {
-    if (query != null && sections[query.sectionIndex]?.type !== query.sectionType) {
-      resetQuery();
-    }
-  }, [sections, query, resetQuery]);
-  React.useEffect(() => {
-    if (query != null) {
-      const timeout = setTimeout(() => resetQuery(), QUERY_LIFE_DURATION_MS);
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
-    return () => {};
-  }, [query, resetQuery]);
   const applyQuery = ({
     keyPressed,
     sectionIndex
   }, getFirstSectionValueMatchingWithQuery, isValidQueryValue) => {
     const cleanKeyPressed = keyPressed.toLowerCase();
-    const activeSection = sections[sectionIndex];
+    const activeSection = state.sections[sectionIndex];
 
     // The current query targets the section being editing
     // We can try to concatenate the value
-    if (query != null && (!isValidQueryValue || isValidQueryValue(query.value)) && query.sectionIndex === sectionIndex) {
-      const concatenatedQueryValue = `${query.value}${cleanKeyPressed}`;
+    if (state.characterQuery != null && (!isValidQueryValue || isValidQueryValue(state.characterQuery.value)) && state.characterQuery.sectionIndex === sectionIndex) {
+      const concatenatedQueryValue = `${state.characterQuery.value}${cleanKeyPressed}`;
       const queryResponse = getFirstSectionValueMatchingWithQuery(concatenatedQueryValue, activeSection);
       if (!isQueryResponseWithoutValue(queryResponse)) {
-        setQuery({
+        setCharacterQuery({
           sectionIndex,
           value: concatenatedQueryValue,
           sectionType: activeSection.type
@@ -84,10 +48,10 @@ export const useFieldCharacterEditing = ({
     }
     const queryResponse = getFirstSectionValueMatchingWithQuery(cleanKeyPressed, activeSection);
     if (isQueryResponseWithoutValue(queryResponse) && !queryResponse.saveQuery) {
-      resetQuery();
+      setCharacterQuery(null);
       return null;
     }
-    setQuery({
+    setCharacterQuery({
       sectionIndex,
       value: cleanKeyPressed,
       sectionType: activeSection.type
@@ -235,8 +199,8 @@ export const useFieldCharacterEditing = ({
     };
     return applyQuery(params, getFirstSectionValueMatchingWithQuery, queryValue => isStringNumber(queryValue, localizedDigits));
   };
-  const applyCharacterEditing = useEventCallback(params => {
-    const section = sections[params.sectionIndex];
+  return useEventCallback(params => {
+    const section = state.sections[params.sectionIndex];
     const isNumericEditing = isStringNumber(params.keyPressed, localizedDigits);
     const response = isNumericEditing ? applyNumericEditing(_extends({}, params, {
       keyPressed: applyLocalizedDigits(params.keyPressed, localizedDigits)
@@ -251,8 +215,26 @@ export const useFieldCharacterEditing = ({
       shouldGoToNextSection: response.shouldGoToNextSection
     });
   });
-  return {
-    applyCharacterEditing,
-    resetCharacterQuery: resetQuery
-  };
-};
+};
+
+/**
+ * The letter editing and the numeric editing each define a `CharacterEditingApplier`.
+ * This function decides what the new section value should be and if the focus should switch to the next section.
+ *
+ * If it returns `null`, then the section value is not updated and the focus does not move.
+ */
+
+/**
+ * Function called by `applyQuery` which decides:
+ * - what is the new section value ?
+ * - should the query used to get this value be stored for the next key press ?
+ *
+ * If it returns `{ sectionValue: string; shouldGoToNextSection: boolean }`,
+ * Then we store the query and update the section with the new value.
+ *
+ * If it returns `{ saveQuery: true` },
+ * Then we store the query and don't update the section.
+ *
+ * If it returns `{ saveQuery: false },
+ * Then we do nothing.
+ */

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

@@ -0,0 +1,16 @@
+import { PickerManager } from "../../../models/index.js";
+import { PickerValidValue } from "../../models/index.js";
+import { UseFieldStateReturnValue } from "./useFieldState.js";
+import { UseFieldInternalProps } from "./useField.types.js";
+/**
+ * Returns the `onKeyDown` handler to pass to the root element of the field.
+ */
+export declare function useFieldRootHandleKeyDown<TValue extends PickerValidValue>(parameters: UseFieldRootHandleKeyDownParameters<TValue>): (event: React.KeyboardEvent<HTMLSpanElement>) => void;
+interface UseFieldRootHandleKeyDownParameters<TValue extends PickerValidValue> {
+  manager: PickerManager<TValue, any, any, any, any>;
+  stateResponse: UseFieldStateReturnValue<TValue>;
+  internalPropsWithDefaults: UseFieldInternalProps<TValue, any, any> & {
+    minutesStep?: number;
+  };
+}
+export {};