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

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

@@ -1,6 +1,6 @@
 import { FieldSection, MuiPickersAdapter, PickerValidDate } from "../../../models/index.js";
 import { PickersLocaleText } from "../../../locales/index.js";
-interface BuildSectionsFromFormatParams {
+interface BuildSectionsFromFormatParameters {
   utils: MuiPickersAdapter;
   format: string;
   formatDensity: 'dense' | 'spacious';
@@ -11,5 +11,5 @@ interface BuildSectionsFromFormatParams {
   date: PickerValidDate | null;
   enableAccessibleFieldDOMStructure: boolean;
 }
-export declare const buildSectionsFromFormat: (params: BuildSectionsFromFormatParams) => FieldSection[];
+export declare const buildSectionsFromFormat: (parameters: BuildSectionsFromFormatParameters) => FieldSection[];
 export {};

package/internals/hooks/useField/buildSectionsFromFormat.js

@@ -148,12 +148,12 @@ const createSection = ({
     modified: false
   });
 };
-const buildSections = params => {
+const buildSections = parameters => {
   const {
     utils,
     expandedFormat,
     escapedParts
-  } = params;
+  } = parameters;
   const now = utils.date(undefined);
   const sections = [];
   let startSeparator = '';
@@ -178,7 +178,7 @@ const buildSections = params => {
       while (word.length > 0) {
         const firstWord = regExpFirstTokenInWord.exec(word)[1];
         word = word.slice(firstWord.length);
-        sections.push(createSection((0, _extends2.default)({}, params, {
+        sections.push(createSection((0, _extends2.default)({}, parameters, {
           now,
           token: firstWord,
           startSeparator
@@ -243,19 +243,19 @@ const postProcessSections = ({
     return section;
   });
 };
-const buildSectionsFromFormat = params => {
-  let expandedFormat = expandFormat(params);
-  if (params.isRtl && params.enableAccessibleFieldDOMStructure) {
+const buildSectionsFromFormat = parameters => {
+  let expandedFormat = expandFormat(parameters);
+  if (parameters.isRtl && parameters.enableAccessibleFieldDOMStructure) {
     expandedFormat = expandedFormat.split(' ').reverse().join(' ');
   }
-  const escapedParts = getEscapedPartsFromFormat((0, _extends2.default)({}, params, {
+  const escapedParts = getEscapedPartsFromFormat((0, _extends2.default)({}, parameters, {
     expandedFormat
   }));
-  const sections = buildSections((0, _extends2.default)({}, params, {
+  const sections = buildSections((0, _extends2.default)({}, parameters, {
     expandedFormat,
     escapedParts
   }));
-  return postProcessSections((0, _extends2.default)({}, params, {
+  return postProcessSections((0, _extends2.default)({}, parameters, {
     sections
   }));
 };

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

@@ -1,4 +1,4 @@
 export { useField } from "./useField.js";
-export type { FieldValueManager, UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldChangeHandler, FieldChangeHandlerContext } from './useField.types';
+export type { UseFieldInternalProps, UseFieldParameters, UseFieldReturnValue, UseFieldProps, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext } from './useField.types';
 export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
 export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";

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

@@ -1,5 +1,3 @@
-import { UseFieldParams, UseFieldResponse, UseFieldCommonForwardedProps, UseFieldInternalProps, UseFieldForwardedProps } from "./useField.types.js";
+import { UseFieldParameters, UseFieldReturnValue, UseFieldProps } from "./useField.types.js";
 import { PickerValidValue } from "../../models/index.js";
-export declare const useField: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any> & {
-  minutesStep?: number;
-}>(params: UseFieldParams<TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;
+export declare const useField: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>>(parameters: UseFieldParameters<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, TProps>) => UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;

package/internals/hooks/useField/useField.js

@@ -1,242 +1,16 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useField = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _RtlProvider = require("@mui/system/RtlProvider");
-var _validation = require("../../../validation");
-var _useUtils = require("../useUtils");
-var _useField = require("./useField.utils");
-var _useFieldState = require("./useFieldState");
-var _useFieldCharacterEditing = require("./useFieldCharacterEditing");
 var _useFieldV7TextField = require("./useFieldV7TextField");
 var _useFieldV6TextField = require("./useFieldV6TextField");
-const useField = params => {
-  const utils = (0, _useUtils.useUtils)();
-  const {
-    internalProps,
-    internalProps: {
-      unstableFieldRef,
-      minutesStep,
-      enableAccessibleFieldDOMStructure = true,
-      disabled = false,
-      readOnly = false,
-      autoFocus = false
-    },
-    forwardedProps: {
-      onKeyDown,
-      error,
-      clearable,
-      onClear
-    },
-    fieldValueManager,
-    validator,
-    getOpenPickerButtonAriaLabel: getOpenDialogAriaText
-  } = params;
-  const isRtl = (0, _RtlProvider.useRtl)();
-  const stateResponse = (0, _useFieldState.useFieldState)(params);
-  const {
-    state,
-    value,
-    activeSectionIndex,
-    parsedSelectedSections,
-    setSelectedSections,
-    clearValue,
-    clearActiveSection,
-    updateSectionValue,
-    setTempAndroidValueStr,
-    sectionsValueBoundaries,
-    localizedDigits,
-    timezone
-  } = stateResponse;
-  const characterEditingResponse = (0, _useFieldCharacterEditing.useFieldCharacterEditing)({
-    sections: state.sections,
-    updateSectionValue,
-    sectionsValueBoundaries,
-    localizedDigits,
-    setTempAndroidValueStr,
-    timezone
-  });
-  const {
-    resetCharacterQuery
-  } = characterEditingResponse;
-  const areAllSectionsEmpty = React.useMemo(() => state.sections.every(section => section.value === ''), [state.sections]);
+var _useNullableFieldPrivateContext = require("../useNullableFieldPrivateContext");
+const useField = parameters => {
+  const fieldPrivateContext = (0, _useNullableFieldPrivateContext.useNullableFieldPrivateContext)();
+  const enableAccessibleFieldDOMStructure = parameters.props.enableAccessibleFieldDOMStructure ?? fieldPrivateContext?.enableAccessibleFieldDOMStructure ?? true;
   const useFieldTextField = enableAccessibleFieldDOMStructure ? _useFieldV7TextField.useFieldV7TextField : _useFieldV6TextField.useFieldV6TextField;
-  const sectionOrder = React.useMemo(() => (0, _useField.getSectionOrder)(state.sections, isRtl && !enableAccessibleFieldDOMStructure), [state.sections, isRtl, enableAccessibleFieldDOMStructure]);
-  const {
-    returnedValue,
-    interactions
-  } = useFieldTextField((0, _extends2.default)({}, params, stateResponse, characterEditingResponse, {
-    areAllSectionsEmpty,
-    sectionOrder
-  }));
-  const handleContainerKeyDown = (0, _useEventCallback.default)(event => {
-    onKeyDown?.(event);
-    if (disabled) {
-      return;
-    }
-    // eslint-disable-next-line default-case
-    switch (true) {
-      // Select all
-      case (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'A' && !event.shiftKey && !event.altKey:
-        {
-          // prevent default to make sure that the next line "select all" while updating
-          // the internal state at the same time.
-          event.preventDefault();
-          setSelectedSections('all');
-          break;
-        }
-
-      // Move selection to next section
-      case event.key === 'ArrowRight':
-        {
-          event.preventDefault();
-          if (parsedSelectedSections == null) {
-            setSelectedSections(sectionOrder.startIndex);
-          } else if (parsedSelectedSections === 'all') {
-            setSelectedSections(sectionOrder.endIndex);
-          } else {
-            const nextSectionIndex = sectionOrder.neighbors[parsedSelectedSections].rightIndex;
-            if (nextSectionIndex !== null) {
-              setSelectedSections(nextSectionIndex);
-            }
-          }
-          break;
-        }
-
-      // Move selection to previous section
-      case event.key === 'ArrowLeft':
-        {
-          event.preventDefault();
-          if (parsedSelectedSections == null) {
-            setSelectedSections(sectionOrder.endIndex);
-          } else if (parsedSelectedSections === 'all') {
-            setSelectedSections(sectionOrder.startIndex);
-          } else {
-            const nextSectionIndex = sectionOrder.neighbors[parsedSelectedSections].leftIndex;
-            if (nextSectionIndex !== null) {
-              setSelectedSections(nextSectionIndex);
-            }
-          }
-          break;
-        }
-
-      // Reset the value of the selected section
-      case event.key === 'Delete':
-        {
-          event.preventDefault();
-          if (readOnly) {
-            break;
-          }
-          if (parsedSelectedSections == null || parsedSelectedSections === 'all') {
-            clearValue();
-          } else {
-            clearActiveSection();
-          }
-          resetCharacterQuery();
-          break;
-        }
-
-      // Increment / decrement the selected section value
-      case ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key):
-        {
-          event.preventDefault();
-          if (readOnly || activeSectionIndex == null) {
-            break;
-          }
-
-          // if all sections are selected, mark the currently editing one as selected
-          if (parsedSelectedSections === 'all') {
-            setSelectedSections(activeSectionIndex);
-          }
-          const activeSection = state.sections[activeSectionIndex];
-          const newSectionValue = (0, _useField.adjustSectionValue)(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, fieldValueManager.getDateFromSection(value, activeSection), {
-            minutesStep
-          });
-          updateSectionValue({
-            section: activeSection,
-            newSectionValue,
-            shouldGoToNextSection: false
-          });
-          break;
-        }
-    }
-  });
-  (0, _useEnhancedEffect.default)(() => {
-    interactions.syncSelectionToDOM();
-  });
-  const {
-    hasValidationError
-  } = (0, _validation.useValidation)({
-    props: internalProps,
-    validator,
-    timezone,
-    value,
-    onError: internalProps.onError
-  });
-  const inputError = React.useMemo(() => {
-    // only override when `error` is undefined.
-    // in case of multi input fields, the `error` value is provided externally and will always be defined.
-    if (error !== undefined) {
-      return error;
-    }
-    return hasValidationError;
-  }, [hasValidationError, error]);
-  React.useEffect(() => {
-    if (!inputError && activeSectionIndex == null) {
-      resetCharacterQuery();
-    }
-  }, [state.referenceValue, activeSectionIndex, inputError]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // If `tempValueStrAndroid` is still defined for some section when running `useEffect`,
-  // Then `onChange` has only been called once, which means the user pressed `Backspace` to reset the section.
-  // This causes a small flickering on Android,
-  // But we can't use `useEnhancedEffect` which is always called before the second `onChange` call and then would cause false positives.
-  React.useEffect(() => {
-    if (state.tempValueStrAndroid != null && activeSectionIndex != null) {
-      resetCharacterQuery();
-      clearActiveSection();
-    }
-  }, [state.sections]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  React.useImperativeHandle(unstableFieldRef, () => ({
-    getSections: () => state.sections,
-    getActiveSectionIndex: interactions.getActiveSectionIndexFromDOM,
-    setSelectedSections: interactions.setSelectedSections,
-    focusField: interactions.focusField,
-    isFieldFocused: interactions.isFieldFocused
-  }));
-  const handleClearValue = (0, _useEventCallback.default)((event, ...args) => {
-    event.preventDefault();
-    onClear?.(event, ...args);
-    clearValue();
-    if (!interactions.isFieldFocused()) {
-      // setSelectedSections is called internally
-      interactions.focusField(0);
-    } else {
-      setSelectedSections(sectionOrder.startIndex);
-    }
-  });
-  const commonForwardedProps = {
-    onKeyDown: handleContainerKeyDown,
-    onClear: handleClearValue,
-    error: inputError,
-    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
-  };
-  const openPickerAriaLabel = React.useMemo(() => getOpenDialogAriaText(value), [getOpenDialogAriaText, value]);
-  const commonAdditionalProps = {
-    disabled,
-    readOnly,
-    autoFocus,
-    openPickerAriaLabel
-  };
-  return (0, _extends2.default)({}, params.forwardedProps, commonForwardedProps, commonAdditionalProps, returnedValue);
+  return useFieldTextField(parameters);
 };
 exports.useField = useField;

package/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/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/internals/hooks/useField/useField.utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateSections = exports.removeLocalizedDigits = exports.parseSelectedSections = exports.mergeDateIntoReferenceDate = exports.isStringNumber = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.getSectionValueText = exports.getSectionValueNow = exports.getSectionOrder = exports.getLocalizedDigits = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionFormatHaveLeadingZeros = exports.createDateStrForV7HiddenInputFromSections = exports.createDateStrForV6InputFromSections = exports.cleanLeadingZeros = exports.cleanDigitSectionValue = exports.changeSectionValueFormat = exports.applyLocalizedDigits = exports.adjustSectionValue = exports.FORMAT_SECONDS_NO_LEADING_ZEROS = void 0;
+exports.validateSections = exports.removeLocalizedDigits = exports.parseSelectedSections = exports.mergeDateIntoReferenceDate = exports.isStringNumber = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.getSectionValueText = exports.getSectionValueNow = exports.getSectionOrder = exports.getLocalizedDigits = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionFormatHaveLeadingZeros = exports.createDateStrForV7HiddenInputFromSections = exports.createDateStrForV6InputFromSections = exports.cleanLeadingZeros = exports.cleanDigitSectionValue = exports.changeSectionValueFormat = exports.applyLocalizedDigits = exports.FORMAT_SECONDS_NO_LEADING_ZEROS = void 0;
 var _dateUtils = require("../../utils/date-utils");
 const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
   const config = utils.formatTokenMap[formatToken];
@@ -24,20 +24,6 @@ const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
   };
 };
 exports.getDateSectionConfigFromFormatToken = getDateSectionConfigFromFormatToken;
-const getDeltaFromKeyCode = keyCode => {
-  switch (keyCode) {
-    case 'ArrowUp':
-      return 1;
-    case 'ArrowDown':
-      return -1;
-    case 'PageUp':
-      return 5;
-    case 'PageDown':
-      return -5;
-    default:
-      return 0;
-  }
-};
 const getDaysInWeekStr = (utils, format) => {
   const elements = [];
   const now = utils.date(undefined, 'default');
@@ -120,22 +106,14 @@ 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.
  */
 exports.isStringNumber = isStringNumber;
 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');
 };
 exports.cleanLeadingZeros = cleanLeadingZeros;
 const cleanDigitSectionValue = (utils, value, sectionBoundaries, localizedDigits, section) => {
@@ -158,69 +136,6 @@ const cleanDigitSectionValue = (utils, value, sectionBoundaries, localizedDigits
   return applyLocalizedDigits(valueStr, localizedDigits);
 };
 exports.cleanDigitSectionValue = cleanDigitSectionValue;
-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();
-};
-exports.adjustSectionValue = adjustSectionValue;
 const getSectionVisibleValue = (section, target, localizedDigits) => {
   let value = section.value || section.placeholder;
   const hasLeadingZeros = target === 'non-input' ? section.hasLeadingZerosInFormat : section.hasLeadingZerosInInput;
@@ -262,12 +177,11 @@ const doesSectionFormatHaveLeadingZeros = (utils, contentType, sectionType, form
     // 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':
       {