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

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

@@ -1,233 +1,9 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import useEventCallback from '@mui/utils/useEventCallback';
-import { useRtl } from '@mui/system/RtlProvider';
-import { useValidation } from "../../../validation/index.js";
-import { useUtils } from "../useUtils.js";
-import { adjustSectionValue, getSectionOrder } from "./useField.utils.js";
-import { useFieldState } from "./useFieldState.js";
-import { useFieldCharacterEditing } from "./useFieldCharacterEditing.js";
 import { useFieldV7TextField } from "./useFieldV7TextField.js";
 import { useFieldV6TextField } from "./useFieldV6TextField.js";
-export const useField = params => {
-  const utils = 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 = useRtl();
-  const stateResponse = useFieldState(params);
-  const {
-    state,
-    value,
-    activeSectionIndex,
-    parsedSelectedSections,
-    setSelectedSections,
-    clearValue,
-    clearActiveSection,
-    updateSectionValue,
-    setTempAndroidValueStr,
-    sectionsValueBoundaries,
-    localizedDigits,
-    timezone
-  } = stateResponse;
-  const characterEditingResponse = useFieldCharacterEditing({
-    sections: state.sections,
-    updateSectionValue,
-    sectionsValueBoundaries,
-    localizedDigits,
-    setTempAndroidValueStr,
-    timezone
-  });
-  const {
-    resetCharacterQuery
-  } = characterEditingResponse;
-  const areAllSectionsEmpty = React.useMemo(() => state.sections.every(section => section.value === ''), [state.sections]);
+import { useNullableFieldPrivateContext } from "../useNullableFieldPrivateContext.js";
+export const useField = parameters => {
+  const fieldPrivateContext = useNullableFieldPrivateContext();
+  const enableAccessibleFieldDOMStructure = parameters.props.enableAccessibleFieldDOMStructure ?? fieldPrivateContext?.enableAccessibleFieldDOMStructure ?? true;
   const useFieldTextField = enableAccessibleFieldDOMStructure ? useFieldV7TextField : useFieldV6TextField;
-  const sectionOrder = React.useMemo(() => getSectionOrder(state.sections, isRtl && !enableAccessibleFieldDOMStructure), [state.sections, isRtl, enableAccessibleFieldDOMStructure]);
-  const {
-    returnedValue,
-    interactions
-  } = useFieldTextField(_extends({}, params, stateResponse, characterEditingResponse, {
-    areAllSectionsEmpty,
-    sectionOrder
-  }));
-  const handleContainerKeyDown = useEventCallback(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 = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, fieldValueManager.getDateFromSection(value, activeSection), {
-            minutesStep
-          });
-          updateSectionValue({
-            section: activeSection,
-            newSectionValue,
-            shouldGoToNextSection: false
-          });
-          break;
-        }
-    }
-  });
-  useEnhancedEffect(() => {
-    interactions.syncSelectionToDOM();
-  });
-  const {
-    hasValidationError
-  } = 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 = useEventCallback((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 _extends({}, params.forwardedProps, commonForwardedProps, commonAdditionalProps, returnedValue);
+  return useFieldTextField(parameters);
 };

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 { PickersSectionElement, PickersSectionListRef } from "../../../PickersSectionList/index.js";
+import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferFieldSection, PickerManager, PickerValueType } from "../../../models/index.js";
+import { InternalPropNames } from "../../../hooks/useSplitFieldProps.js";
+import type { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList';
 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,19 @@ 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 interface UseFieldDOMGetters {
+  isReady: () => boolean;
+  getRoot: () => HTMLElement;
+  getSectionContainer: (sectionIndex: number) => HTMLElement;
+  getSectionContent: (sectionIndex: number) => HTMLElement;
+  getSectionIndexFromDOMElement: (element: Element | null | undefined) => number | null;
 }
 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;
@@ -36,6 +33,4 @@ export declare const validateSections: <TValue extends PickerValidValue>(section
 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: (section: FieldSection, utils: MuiPickersAdapter) => string | undefined;
-export declare const getSectionValueNow: (section: FieldSection, utils: MuiPickersAdapter) => number | undefined;
+export declare const parseSelectedSections: (selectedSections: FieldSelectedSections, sections: FieldSection[]) => FieldParsedSelectedSections;

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':
       {
@@ -578,61 +493,4 @@ export const parseSelectedSections = (selectedSections, sections) => {
     return index === -1 ? null : index;
   }
   return selectedSections;
-};
-export const getSectionValueText = (section, utils) => {
-  if (!section.value) {
-    return undefined;
-  }
-  switch (section.type) {
-    case 'month':
-      {
-        if (section.contentType === 'digit') {
-          return utils.format(utils.setMonth(utils.date(), Number(section.value) - 1), 'month');
-        }
-        const parsedDate = utils.parse(section.value, section.format);
-        return parsedDate ? utils.format(parsedDate, 'month') : undefined;
-      }
-    case 'day':
-      return section.contentType === 'digit' ? utils.format(utils.setDate(utils.startOfYear(utils.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
-    case 'weekDay':
-      // TODO: improve by providing the label of the week day
-      return undefined;
-    default:
-      return undefined;
-  }
-};
-export const getSectionValueNow = (section, utils) => {
-  if (!section.value) {
-    return undefined;
-  }
-  switch (section.type) {
-    case 'weekDay':
-      {
-        if (section.contentType === 'letter') {
-          // TODO: improve by resolving the week day number from a letter week day
-          return undefined;
-        }
-        return Number(section.value);
-      }
-    case 'meridiem':
-      {
-        const parsedDate = utils.parse(`01:00 ${section.value}`, `${utils.formats.hours12h}:${utils.formats.minutes} ${section.format}`);
-        if (parsedDate) {
-          return utils.getHours(parsedDate) >= 12 ? 1 : 0;
-        }
-        return undefined;
-      }
-    case 'day':
-      return section.contentType === 'digit-with-letter' ? parseInt(section.value, 10) : Number(section.value);
-    case 'month':
-      {
-        if (section.contentType === 'digit') {
-          return Number(section.value);
-        }
-        const parsedDate = utils.parse(section.value, section.format);
-        return parsedDate ? utils.getMonth(parsedDate) + 1 : undefined;
-      }
-    default:
-      return section.contentType !== 'letter' ? Number(section.value) : undefined;
-  }
 };