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

package/internals/hooks/useField/useFieldCharacterEditing.js

@@ -1,32 +1,14 @@
-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";
+"use strict";
 
-/**
- * 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;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFieldCharacterEditing = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useUtils = require("../useUtils");
+var _useField = require("./useField.utils");
 const isQueryResponseWithoutValue = response => response.saveQuery != null;
 
 /**
@@ -36,45 +18,34 @@ const isQueryResponseWithoutValue = response => response.saveQuery != null;
  * 1. The numeric editing when the user presses a digit
  * 2. The letter editing when the user presses another key
  */
-export const useFieldCharacterEditing = ({
-  sections,
-  updateSectionValue,
-  sectionsValueBoundaries,
-  localizedDigits,
-  setTempAndroidValueStr,
-  timezone
+const useFieldCharacterEditing = ({
+  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 utils = (0, _useUtils.useUtils)();
   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 +55,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
@@ -111,7 +82,7 @@ export const useFieldCharacterEditing = ({
       };
     };
     const testQueryOnFormatAndFallbackFormat = (queryValue, activeSection, fallbackFormat, formatFallbackValue) => {
-      const getOptions = format => getLetterEditingOptions(utils, timezone, activeSection.type, format);
+      const getOptions = format => (0, _useField.getLetterEditingOptions)(utils, timezone, activeSection.type, format);
       if (activeSection.contentType === 'letter') {
         return findMatchingOptions(activeSection.format, getOptions(activeSection.format), queryValue);
       }
@@ -119,7 +90,7 @@ export const useFieldCharacterEditing = ({
       // When editing a digit-format month / weekDay and the user presses a letter,
       // We can support the letter editing by using the letter-format month / weekDay and re-formatting the result.
       // We just have to make sure that the default month / weekDay format is a letter format,
-      if (fallbackFormat && formatFallbackValue != null && getDateSectionConfigFromFormatToken(utils, fallbackFormat).contentType === 'letter') {
+      if (fallbackFormat && formatFallbackValue != null && (0, _useField.getDateSectionConfigFromFormatToken)(utils, fallbackFormat).contentType === 'letter') {
         const fallbackOptions = getOptions(fallbackFormat);
         const response = findMatchingOptions(fallbackFormat, fallbackOptions, queryValue);
         if (isQueryResponseWithoutValue(response)) {
@@ -127,7 +98,7 @@ export const useFieldCharacterEditing = ({
             saveQuery: false
           };
         }
-        return _extends({}, response, {
+        return (0, _extends2.default)({}, response, {
           sectionValue: formatFallbackValue(response.sectionValue, fallbackOptions)
         });
       }
@@ -139,7 +110,7 @@ export const useFieldCharacterEditing = ({
       switch (activeSection.type) {
         case 'month':
           {
-            const formatFallbackValue = fallbackValue => changeSectionValueFormat(utils, fallbackValue, utils.formats.month, activeSection.format);
+            const formatFallbackValue = fallbackValue => (0, _useField.changeSectionValueFormat)(utils, fallbackValue, utils.formats.month, activeSection.format);
             return testQueryOnFormatAndFallbackFormat(queryValue, activeSection, utils.formats.month, formatFallbackValue);
           }
         case 'weekDay':
@@ -163,7 +134,7 @@ export const useFieldCharacterEditing = ({
   };
   const applyNumericEditing = params => {
     const getNewSectionValue = (queryValue, section) => {
-      const cleanQueryValue = removeLocalizedDigits(queryValue, localizedDigits);
+      const cleanQueryValue = (0, _useField.removeLocalizedDigits)(queryValue, localizedDigits);
       const queryValueNumber = Number(cleanQueryValue);
       const sectionBoundaries = sectionsValueBoundaries[section.type]({
         currentDate: null,
@@ -185,7 +156,7 @@ export const useFieldCharacterEditing = ({
         };
       }
       const shouldGoToNextSection = queryValueNumber * 10 > sectionBoundaries.maximum || cleanQueryValue.length === sectionBoundaries.maximum.toString().length;
-      const newSectionValue = cleanDigitSectionValue(utils, queryValueNumber, sectionBoundaries, localizedDigits, section);
+      const newSectionValue = (0, _useField.cleanDigitSectionValue)(utils, queryValueNumber, sectionBoundaries, localizedDigits, section);
       return {
         sectionValue: newSectionValue,
         shouldGoToNextSection
@@ -199,7 +170,7 @@ export const useFieldCharacterEditing = ({
       // When editing a letter-format month and the user presses a digit,
       // We can support the numeric editing by using the digit-format month and re-formatting the result.
       if (activeSection.type === 'month') {
-        const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, 'digit', 'month', 'MM');
+        const hasLeadingZerosInFormat = (0, _useField.doesSectionFormatHaveLeadingZeros)(utils, 'digit', 'month', 'MM');
         const response = getNewSectionValue(queryValue, {
           type: activeSection.type,
           format: 'MM',
@@ -211,8 +182,8 @@ export const useFieldCharacterEditing = ({
         if (isQueryResponseWithoutValue(response)) {
           return response;
         }
-        const formattedValue = changeSectionValueFormat(utils, response.sectionValue, 'MM', activeSection.format);
-        return _extends({}, response, {
+        const formattedValue = (0, _useField.changeSectionValueFormat)(utils, response.sectionValue, 'MM', activeSection.format);
+        return (0, _extends2.default)({}, response, {
           sectionValue: formattedValue
         });
       }
@@ -224,8 +195,8 @@ export const useFieldCharacterEditing = ({
         if (isQueryResponseWithoutValue(response)) {
           return response;
         }
-        const formattedValue = getDaysInWeekStr(utils, activeSection.format)[Number(response.sectionValue) - 1];
-        return _extends({}, response, {
+        const formattedValue = (0, _useField.getDaysInWeekStr)(utils, activeSection.format)[Number(response.sectionValue) - 1];
+        return (0, _extends2.default)({}, response, {
           sectionValue: formattedValue
         });
       }
@@ -233,26 +204,45 @@ export const useFieldCharacterEditing = ({
         saveQuery: false
       };
     };
-    return applyQuery(params, getFirstSectionValueMatchingWithQuery, queryValue => isStringNumber(queryValue, localizedDigits));
+    return applyQuery(params, getFirstSectionValueMatchingWithQuery, queryValue => (0, _useField.isStringNumber)(queryValue, localizedDigits));
   };
-  const applyCharacterEditing = useEventCallback(params => {
-    const activeSection = sections[params.sectionIndex];
-    const isNumericEditing = isStringNumber(params.keyPressed, localizedDigits);
-    const response = isNumericEditing ? applyNumericEditing(_extends({}, params, {
-      keyPressed: applyLocalizedDigits(params.keyPressed, localizedDigits)
+  return (0, _useEventCallback.default)(params => {
+    const section = state.sections[params.sectionIndex];
+    const isNumericEditing = (0, _useField.isStringNumber)(params.keyPressed, localizedDigits);
+    const response = isNumericEditing ? applyNumericEditing((0, _extends2.default)({}, params, {
+      keyPressed: (0, _useField.applyLocalizedDigits)(params.keyPressed, localizedDigits)
     })) : applyLetterEditing(params);
     if (response == null) {
       setTempAndroidValueStr(null);
       return;
     }
     updateSectionValue({
-      activeSection,
+      section,
       newSectionValue: response.sectionValue,
       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.
+ */
+exports.useFieldCharacterEditing = useFieldCharacterEditing;

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

@@ -1,15 +1,17 @@
-import * as React from 'react';
-import type { UseFieldInternalProps } from './useField.types';
-import { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from '../../models';
-export declare const PickerFieldPrivateContext: React.Context<PickerFieldPrivateContextValue | null>;
+import { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from "../../models/index.js";
 /**
  * Applies the default values to the field internal props.
  * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.
  * It is only here to allow the migration to be done in smaller steps.
  */
-export declare function useFieldInternalPropsWithDefaults<TManager extends PickerAnyManager>({ manager, internalProps, }: {
-    manager: TManager;
-    internalProps: PickerManagerFieldInternalProps<TManager>;
-}): PickerManagerFieldInternalPropsWithDefaults<TManager>;
-export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
+export declare function useFieldInternalPropsWithDefaults<TManager extends PickerAnyManager>(parameters: UseFieldInternalPropsWithDefaultsParameters<TManager>): PickerManagerFieldInternalPropsWithDefaults<TManager>;
+interface UseFieldInternalPropsWithDefaultsParameters<TManager extends PickerAnyManager> {
+  manager: TManager;
+  internalProps: PickerManagerFieldInternalProps<TManager>;
+  /**
+   * Hack to make sure that on multi input range field, the `useNullableFieldPrivateContext().fieldRef` is only bound to the field matching the range position.
+   * @default false
+   */
+  skipContextFieldRefAssignment?: boolean;
 }
+export {};

package/internals/hooks/useField/useFieldInternalPropsWithDefaults.js

@@ -1,25 +1,37 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useLocalizationContext } from "../useUtils.js";
-import { useNullablePickerContext } from "../useNullablePickerContext.js";
-export const PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
+"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.useFieldInternalPropsWithDefaults = useFieldInternalPropsWithDefaults;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useUtils = require("../useUtils");
+var _useNullablePickerContext = require("../useNullablePickerContext");
+var _useNullableFieldPrivateContext = require("../useNullableFieldPrivateContext");
 /**
  * Applies the default values to the field internal props.
  * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.
  * It is only here to allow the migration to be done in smaller steps.
  */
-export function useFieldInternalPropsWithDefaults({
-  manager,
-  internalProps
-}) {
-  const localizationContext = useLocalizationContext();
-  const pickerContext = useNullablePickerContext();
-  const fieldPrivateContext = React.useContext(PickerFieldPrivateContext);
+function useFieldInternalPropsWithDefaults(parameters) {
+  const {
+    manager,
+    internalProps,
+    skipContextFieldRefAssignment
+  } = parameters;
+  const localizationContext = (0, _useUtils.useLocalizationContext)();
+  const pickerContext = (0, _useNullablePickerContext.useNullablePickerContext)();
+  const fieldPrivateContext = (0, _useNullableFieldPrivateContext.useNullableFieldPrivateContext)();
+  const handleFieldRef = (0, _useForkRef.default)(internalProps.unstableFieldRef, skipContextFieldRefAssignment ? null : fieldPrivateContext?.fieldRef);
   const setValue = pickerContext?.setValue;
   const handleChangeFromPicker = React.useCallback((newValue, ctx) => {
     return setValue?.(newValue, {
-      validationError: ctx.validationError
+      validationError: ctx.validationError,
+      shouldClose: false
     });
   }, [setValue]);
   return React.useMemo(() => {
@@ -27,20 +39,24 @@ export function useFieldInternalPropsWithDefaults({
     // If one of the context is null,
     // Then the field is used as a standalone component and the other context will be null as well.
     if (fieldPrivateContext != null && pickerContext != null) {
-      internalPropsWithDefaultsFromContext = _extends({
+      internalPropsWithDefaultsFromContext = (0, _extends2.default)({
         value: pickerContext.value,
         onChange: handleChangeFromPicker,
         timezone: pickerContext.timezone,
         disabled: pickerContext.disabled,
+        readOnly: pickerContext.readOnly,
+        autoFocus: pickerContext.autoFocus && !pickerContext.open,
+        focused: pickerContext.open ? true : undefined,
         format: pickerContext.fieldFormat,
         formatDensity: fieldPrivateContext.formatDensity,
         enableAccessibleFieldDOMStructure: fieldPrivateContext.enableAccessibleFieldDOMStructure,
         selectedSections: fieldPrivateContext.selectedSections,
-        onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange
+        onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange,
+        unstableFieldRef: handleFieldRef
       }, internalProps);
     }
-    return manager.internal_applyDefaultsToFieldInternalProps(_extends({}, localizationContext, {
+    return manager.internal_applyDefaultsToFieldInternalProps((0, _extends2.default)({}, localizationContext, {
       internalProps: internalPropsWithDefaultsFromContext
     }));
-  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker]);
+  }, [manager, localizationContext, pickerContext, fieldPrivateContext, internalProps, handleChangeFromPicker, handleFieldRef]);
 }

package/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 {};

package/internals/hooks/useField/useFieldRootHandleKeyDown.js

@@ -0,0 +1,210 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFieldRootHandleKeyDown = useFieldRootHandleKeyDown;
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useUtils = require("../useUtils");
+var _useField = require("./useField.utils");
+/**
+ * Returns the `onKeyDown` handler to pass to the root element of the field.
+ */
+function useFieldRootHandleKeyDown(parameters) {
+  const utils = (0, _useUtils.useUtils)();
+  const {
+    manager: {
+      internal_fieldValueManager: fieldValueManager
+    },
+    internalPropsWithDefaults: {
+      minutesStep,
+      disabled,
+      readOnly
+    },
+    stateResponse: {
+      // States and derived states
+      state,
+      value,
+      activeSectionIndex,
+      parsedSelectedSections,
+      sectionsValueBoundaries,
+      localizedDigits,
+      timezone,
+      sectionOrder,
+      // Methods to update the states
+      clearValue,
+      clearActiveSection,
+      setSelectedSections,
+      updateSectionValue
+    }
+  } = parameters;
+  return (0, _useEventCallback.default)(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();
+          }
+          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;
+        }
+    }
+  });
+}
+function getDeltaFromKeyCode(keyCode) {
+  switch (keyCode) {
+    case 'ArrowUp':
+      return 1;
+    case 'ArrowDown':
+      return -1;
+    case 'PageUp':
+      return 5;
+    case 'PageDown':
+      return -5;
+    default:
+      return 0;
+  }
+}
+function 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 => (0, _useField.cleanDigitSectionValue)(utils, value, sectionBoundaries, localizedDigits, section);
+    const step = section.type === 'minutes' && stepsAttributes?.minutesStep ? stepsAttributes.minutesStep : 1;
+    let newSectionValueNumber;
+    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;
+      }
+    } else {
+      const currentSectionValue = parseInt((0, _useField.removeLocalizedDigits)(section.value, localizedDigits), 10);
+      newSectionValueNumber = currentSectionValue + delta * step;
+    }
+    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 = (0, _useField.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();
+}