@snack-uikit/fields 0.30.0 → 0.32.0

package/src/constants/dateFields.ts

@@ -0,0 +1,127 @@
+import { Mode, NoSecondsMode, Slot, TimeMode } from '../types';
+
+export enum SlotKey {
+  Day = 'D',
+  Month = 'M',
+  Year = 'Y',
+  Hours = 'h',
+  Minutes = 'm',
+  Seconds = 's',
+}
+
+export const MODES = {
+  Date: 'date',
+  DateTime: 'date-time',
+} as const;
+
+export const TIME_MODES = {
+  FullTime: 'full-time',
+  NoSeconds: 'no-seconds',
+} as const;
+
+export const NO_SECONDS_MODE = 'date-time-no-sec';
+
+export const MASK: Record<Mode | TimeMode | NoSecondsMode, Record<string, string>> = {
+  [MODES.Date]: {
+    'ru-RU': 'ДД.ММ.ГГГГ',
+    'en-US': 'DD.MM.YYYY',
+  },
+  [MODES.DateTime]: {
+    'ru-RU': 'ДД.ММ.ГГГГ, чч:мм:сс',
+    'en-US': 'DD.MM.YYYY, hh:mm:ss',
+  },
+  [NO_SECONDS_MODE]: {
+    'ru-RU': 'ДД.ММ.ГГГГ, чч:мм',
+    'en-US': 'DD.MM.YYYY, hh:mm',
+  },
+  [TIME_MODES.FullTime]: {
+    'ru-RU': 'чч:мм:сс',
+    'en-US': 'hh:mm:ss',
+  },
+  [TIME_MODES.NoSeconds]: {
+    'ru-RU': 'чч:мм',
+    'en-US': 'hh:mm',
+  },
+};
+
+export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');
+
+const DATE_SLOTS = {
+  [SlotKey.Day]: { start: 0, end: 2, max: 31, min: 1 },
+  [SlotKey.Month]: { start: 3, end: 5, max: 12, min: 1 },
+  [SlotKey.Year]: { start: 6, end: 10, max: 2100, min: 1900 },
+};
+
+const TIME_SLOTS = (shift: number, showSeconds: boolean) => ({
+  [SlotKey.Hours]: { start: shift, end: shift + 2, max: 23, min: 0 },
+  [SlotKey.Minutes]: { start: shift + 3, end: shift + 5, max: 59, min: 0 },
+  ...(showSeconds ? { [SlotKey.Seconds]: { start: shift + 6, end: shift + 8, max: 59, min: 0 } } : {}),
+});
+
+export const SLOTS: Record<Mode | TimeMode | NoSecondsMode, Record<SlotKey | string, Slot>> = {
+  [MODES.Date]: DATE_SLOTS,
+  [MODES.DateTime]: { ...DATE_SLOTS, ...TIME_SLOTS(12, true) },
+  [NO_SECONDS_MODE]: { ...DATE_SLOTS, ...TIME_SLOTS(12, false) },
+  [TIME_MODES.FullTime]: TIME_SLOTS(0, true),
+  [TIME_MODES.NoSeconds]: TIME_SLOTS(0, false),
+};
+
+export type FocusSlot = SlotKey | 'auto';
+
+export const SLOT_ORDER: Record<Mode | TimeMode | NoSecondsMode, SlotKey[]> = {
+  [MODES.Date]: [SlotKey.Day, SlotKey.Month, SlotKey.Year],
+  [MODES.DateTime]: [SlotKey.Day, SlotKey.Month, SlotKey.Year, SlotKey.Hours, SlotKey.Minutes, SlotKey.Seconds],
+  [NO_SECONDS_MODE]: [SlotKey.Day, SlotKey.Month, SlotKey.Year, SlotKey.Hours, SlotKey.Minutes],
+  [TIME_MODES.FullTime]: [SlotKey.Hours, SlotKey.Minutes, SlotKey.Seconds],
+  [TIME_MODES.NoSeconds]: [SlotKey.Hours, SlotKey.Minutes],
+};
+
+const RU_DATE_SLOTS_PLACEHOLDER = {
+  [SlotKey.Day]: 'ДД',
+  [SlotKey.Month]: 'ММ',
+  [SlotKey.Year]: 'ГГГГ',
+};
+
+const RU_TIME_SLOTS_PLACEHOLDER = {
+  [SlotKey.Hours]: 'чч',
+  [SlotKey.Minutes]: 'мм',
+  [SlotKey.Seconds]: 'сс',
+};
+
+const EN_DATE_SLOTS_PLACEHOLDER = {
+  [SlotKey.Day]: 'DD',
+  [SlotKey.Month]: 'MM',
+  [SlotKey.Year]: 'YYYY',
+};
+
+const EN_TIME_SLOTS_PLACEHOLDER = {
+  [SlotKey.Hours]: 'hh',
+  [SlotKey.Minutes]: 'mm',
+  [SlotKey.Seconds]: 'ss',
+};
+
+export const SLOTS_PLACEHOLDER: Record<
+  Mode | TimeMode | NoSecondsMode,
+  Record<string, Partial<Record<SlotKey, string>>>
+> = {
+  [MODES.Date]: {
+    'ru-RU': RU_DATE_SLOTS_PLACEHOLDER,
+    'en-US': EN_DATE_SLOTS_PLACEHOLDER,
+  },
+  [MODES.DateTime]: {
+    'ru-RU': { ...RU_DATE_SLOTS_PLACEHOLDER, ...RU_TIME_SLOTS_PLACEHOLDER },
+    'en-US': { ...EN_DATE_SLOTS_PLACEHOLDER, ...EN_TIME_SLOTS_PLACEHOLDER },
+  },
+  [NO_SECONDS_MODE]: {
+    'ru-RU': { ...RU_DATE_SLOTS_PLACEHOLDER, ...RU_TIME_SLOTS_PLACEHOLDER, [SlotKey.Seconds]: undefined },
+    'en-US': { ...EN_DATE_SLOTS_PLACEHOLDER, ...EN_TIME_SLOTS_PLACEHOLDER, [SlotKey.Seconds]: undefined },
+  },
+  [TIME_MODES.FullTime]: {
+    'ru-RU': RU_TIME_SLOTS_PLACEHOLDER,
+    'en-US': EN_TIME_SLOTS_PLACEHOLDER,
+  },
+  [TIME_MODES.NoSeconds]: {
+    'ru-RU': { ...RU_TIME_SLOTS_PLACEHOLDER, [SlotKey.Seconds]: undefined },
+    'en-US': { ...EN_TIME_SLOTS_PLACEHOLDER, [SlotKey.Seconds]: undefined },
+  },
+};

package/src/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './allFields';
+export * from './dateFields';

package/src/helperComponents/ButtonCopyValue/styles.module.scss

@@ -1,5 +1,5 @@
-@import "../../styles.module";
+@use "../../styles.module";
 
 .buttonCopyValue {
-  @include button-styles();
+  @include styles.button-styles();
 }

package/src/helperComponents/ButtonField/styles.module.scss

@@ -1,5 +1,5 @@
-@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
-@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields";
+@use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
+@use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields";
 
 $variants: 'before', 'after';
 $sizes: 's', 'm', 'l';
@@ -13,7 +13,7 @@ $sizes: 's', 'm', 'l';
   margin: 0;
   padding: 0;
 
-  color: $sys-neutral-text-support;
+  color: styles-tokens-element.$sys-neutral-text-support;
 
   background-color: transparent;
   border: none;
@@ -22,7 +22,7 @@ $sizes: 's', 'm', 'l';
     &[data-variant='#{$variant}'] {
       @each $size in $sizes {
         &[data-size='#{$size}'] {
-          @include composite-var($fields, 'button-field', $variant, $size);
+          @include styles-tokens-element.composite-var(styles-tokens-fields.$fields, 'button-field', $variant, $size);
         }
       }
     }
@@ -30,19 +30,19 @@ $sizes: 's', 'm', 'l';
 
   &:hover {
     cursor: pointer;
-    background: color-on-background-with-opacity($sys-neutral-accent-default, $sys-neutral-background1-level, $opacity-a008);
+    background: styles-tokens-element.color-on-background-with-opacity(styles-tokens-element.$sys-neutral-accent-default, styles-tokens-element.$sys-neutral-background1-level, styles-tokens-element.$opacity-a008);
   }
 
   &:focus-visible, &[data-arrow-open] {
-    @include outline-var($container-focused-s);
+    @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
 
-    background: color-on-background-with-opacity($sys-neutral-accent-default, $sys-neutral-background1-level, $opacity-a008);
-    outline-color: $sys-primary-accent-default;
+    background: styles-tokens-element.color-on-background-with-opacity(styles-tokens-element.$sys-neutral-accent-default, styles-tokens-element.$sys-neutral-background1-level, styles-tokens-element.$opacity-a008);
+    outline-color: styles-tokens-element.$sys-primary-accent-default;
   }
 
   &[data-disabled] {
     cursor: not-allowed;
-    opacity: $opacity-a056;
+    opacity: styles-tokens-element.$opacity-a056;
     background-color: transparent;
   }
 }

package/src/helperComponents/ButtonFieldList/styles.module.scss

@@ -1,5 +1,5 @@
-@import "@snack-uikit/figma-tokens/build/scss/styles-theme-variables";
+@use "@snack-uikit/figma-tokens/build/scss/styles-theme-variables";
 
 .triggerClassName {
-  --offset: #{$space-drop-list-drop-offset};
+  --offset: #{styles-theme-variables.$space-drop-list-drop-offset};
 }

package/src/helperComponents/ButtonHideValue/styles.module.scss

@@ -1,5 +1,5 @@
-@import "../../styles.module";
+@use "../../styles.module";
 
 .buttonHideValue {
-  @include button-styles();
+  @include styles.button-styles();
 }

package/src/helperComponents/FieldContainerPrivate/styles.module.scss

@@ -1,30 +1,28 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-
-/* stylelint-disable no-descending-specificity */
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 $sizes: 's', 'm', 'l';
 $variants: 'single-line-container', 'single-line-container-button-before', 'single-line-container-button-after', 'multi-line-container';
 
 @mixin validationState($state, $rainbowColor, $bgDefault) {
   &[data-validation='#{$state}'] {
-    background-color: simple-var($theme-variables, 'sys', $bgDefault, 'background1-level');
-    border-color: simple-var($theme-variables, 'sys', $bgDefault, 'decor-default');
+    background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $bgDefault, 'background1-level');
+    border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $bgDefault, 'decor-default');
 
     &:hover {
-      background-color: $sys-neutral-background2-level;
-      border-color: simple-var($theme-variables, 'sys', $rainbowColor, 'decor-hovered');
+      background-color: styles-tokens-fields.$sys-neutral-background2-level;
+      border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $rainbowColor, 'decor-hovered');
     }
 
     &:not([data-readonly]):not([data-disable-focus]) {
       &:focus-within,
       &[data-focused] {
         &:not([data-disabled]) {
-          @include outline-var($container-focused-m);
+          @include styles-tokens-fields.outline-var(styles-tokens-element.$container-focused-m);
 
-          background-color: simple-var($sys-neutral-background2-level);
-          border-color: simple-var($theme-variables, 'sys', $rainbowColor, 'accent-default');
-          outline-color: simple-var($theme-variables, 'sys', $rainbowColor, 'decor-activated');
+          background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-background2-level);
+          border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $rainbowColor, 'accent-default');
+          outline-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $rainbowColor, 'decor-activated');
         }
       }
     }
@@ -49,19 +47,19 @@ $variants: 'single-line-container', 'single-line-container-button-before', 'sing
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($fields, 'container', $size);
+      @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields, 'container', $size);
 
       &,
       input,
       select,
       textarea,
       span {
-        @include composite-var($theme-variables, 'sans', 'body', $size);
+        @include styles-tokens-fields.composite-var(styles-tokens-fields.$theme-variables, 'sans', 'body', $size);
       }
 
       @each $variant in $variants {
         &[data-variant='#{$variant}'] {
-          @include composite-var($fields, $variant, $size);
+          @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields, $variant, $size);
         }
       }
     }
@@ -88,17 +86,17 @@ $variants: 'single-line-container', 'single-line-container-button-before', 'sing
 
     &,
     &:hover {
-      background-color: simple-var($sys-neutral-decor-disabled);
-      border-color: simple-var($sys-neutral-decor-disabled);
+      background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
+      border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
     }
 
     &:not([data-disable-focus]) {
       &:focus-within,
       &[data-focused] {
-        @include outline-var($container-focused-m);
+        @include styles-tokens-fields.outline-var(styles-tokens-element.$container-focused-m);
 
-        background-color: simple-var($sys-neutral-decor-disabled);
-        border-color: simple-var($sys-neutral-decor-disabled);
+        background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
+        border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
         outline: none;
       }
     }
@@ -111,15 +109,15 @@ $variants: 'single-line-container', 'single-line-container-button-before', 'sing
     textarea,
     span {
       cursor: not-allowed;
-      background-color: simple-var($sys-neutral-background);
+      background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-background);
     }
 
     &,
     &:focus-within,
     &[data-focused],
     &:hover {
-      background-color: simple-var($sys-neutral-background);
-      border-color: simple-var($sys-neutral-decor-disabled);
+      background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-background);
+      border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
       outline: none;
     }
   }
@@ -128,15 +126,15 @@ $variants: 'single-line-container', 'single-line-container-button-before', 'sing
 .prefix {
   display: inline-flex;
   flex-shrink: 0;
-  gap: $space-fields-postfix-gap;
+  gap: styles-tokens-fields.$space-fields-postfix-gap;
   align-items: center;
 
-  color: $sys-neutral-text-disabled;
+  color: styles-tokens-fields.$sys-neutral-text-disabled;
 }
 
 .postfix {
   display: inline-flex;
   flex-shrink: 0;
-  gap: $space-fields-postfix-gap;
+  gap: styles-tokens-fields.$space-fields-postfix-gap;
   align-items: center;
 }

package/src/helperComponents/TextArea/styles.module.scss

@@ -1,4 +1,4 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 .textarea {
   resize: none;
@@ -9,7 +9,7 @@
   margin: 0;
   padding: 0;
 
-  color: simple-var($sys-neutral-text-main);
+  color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-text-main);
 
   background-color: transparent;
   border: none;
@@ -17,7 +17,7 @@
   outline: 0;
 
   &::placeholder {
-    color: simple-var($sys-neutral-text-disabled);
+    color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-text-disabled);
   }
 
   &::-webkit-scrollbar {
@@ -26,10 +26,10 @@
   }
 
   &:read-only {
-    color: simple-var($sys-neutral-text-support);
+    color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-text-support);
   }
 
   &[disabled] {
-    color: simple-var($sys-neutral-text-disabled);
+    color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-text-disabled);
   }
 }

package/src/hooks/dateHandlers/index.ts

@@ -0,0 +1,3 @@
+export * from './useDateField';
+export * from './useFocusHandlers';
+export * from './useHandlers';

package/src/{components/FieldDate/hooks → hooks/dateHandlers}/useDateField.ts

@@ -1,32 +1,71 @@
 import { ChangeEvent, FocusEventHandler, KeyboardEvent, RefObject, useCallback, useMemo, useRef } from 'react';
 
+import { TimePickerProps } from '@snack-uikit/calendar';
 import { isBrowser } from '@snack-uikit/utils';
 
-import { DEFAULT_LOCALE, MASK, SlotKey, SLOTS, SLOTS_PLACEHOLDER } from '../constants';
-import { getNextSlotKey, getPrevSlotKey, getSlotKey } from '../utils';
-import { useDateFieldHelpers } from './useDateFieldHelpers';
-
-type UseDateFieldProps = {
+import {
+  DEFAULT_LOCALE,
+  FocusSlot,
+  MASK,
+  MODES,
+  NO_SECONDS_MODE,
+  SLOT_ORDER,
+  SlotKey,
+  SLOTS,
+  SLOTS_PLACEHOLDER,
+} from '../../constants';
+import { Mode, TimeMode } from '../../types';
+import { parseDate } from '../../utils/dateFields';
+import { useDateFieldHelpersForMode } from './useDateFieldHelpersForMode';
+
+type BaseProps = {
   inputRef: RefObject<HTMLInputElement>;
-  onChange?(value: string): void;
   readonly?: boolean;
   locale?: Intl.Locale;
   setIsOpen(v: boolean): void;
+  showSeconds?: boolean;
 };
 
-type FocusSlot = SlotKey.Day | SlotKey.Year | 'auto';
-
-export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LOCALE, setIsOpen }: UseDateFieldProps) {
-  const { setFocus, updateSlot, getSlot, isLikeDate, isAllSelected, isValidInput, tryToCompleteInput } =
-    useDateFieldHelpers(inputRef);
-  const focusSlotRef = useRef<FocusSlot>(SlotKey.Day);
-
-  const mask = useMemo(() => MASK[locale.baseName] || MASK[DEFAULT_LOCALE.baseName], [locale]);
-
-  const slotsPlaceHolder = useMemo(
-    () => SLOTS_PLACEHOLDER[locale.baseName] || SLOTS_PLACEHOLDER[DEFAULT_LOCALE.baseName],
-    [locale.baseName],
-  );
+type UseDateFieldProps =
+  | ({
+      mode: Mode;
+      onChange?(value: Date | undefined): void;
+    } & BaseProps)
+  | ({
+      mode: TimeMode;
+      onChange?: TimePickerProps['onChangeValue'];
+    } & BaseProps);
+
+export function useDateField({
+  inputRef,
+  onChange,
+  readonly,
+  locale = DEFAULT_LOCALE,
+  setIsOpen,
+  mode,
+  showSeconds,
+}: UseDateFieldProps) {
+  const dateTimeMode = mode === MODES.DateTime && !showSeconds ? NO_SECONDS_MODE : mode;
+  const slotsInfo = SLOTS[dateTimeMode];
+  const mask = MASK[dateTimeMode][locale.baseName] || MASK[dateTimeMode][DEFAULT_LOCALE.baseName];
+  const slotsPlaceholder =
+    SLOTS_PLACEHOLDER[dateTimeMode][locale.baseName] || SLOTS_PLACEHOLDER[dateTimeMode][DEFAULT_LOCALE.baseName];
+  const slotOrder = SLOT_ORDER[dateTimeMode];
+  const {
+    getNextSlotKey,
+    getPrevSlotKey,
+    getSlotKeyFromIndex,
+    setFocus,
+    updateSlot,
+    getSlot,
+    isLikeDate,
+    isAllSelected,
+    tryToCompleteInput,
+    isValidInput,
+  } = useDateFieldHelpersForMode({ inputRef, mode: dateTimeMode });
+
+  const focusSlotKey = useMemo(() => slotOrder[0], [slotOrder]);
+  const focusSlotRef = useRef<FocusSlot>(focusSlotKey);
 
   const setInputFocus = useCallback(
     (focusSlot?: FocusSlot) => {
@@ -35,20 +74,20 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
       }
 
       if (isBrowser() && document.activeElement !== inputRef.current) {
-        focusSlotRef.current = focusSlot || SlotKey.Day;
+        focusSlotRef.current = focusSlot || focusSlotKey;
         inputRef.current.focus();
         return;
       }
 
       const focusSlotValue = focusSlot || focusSlotRef.current;
 
-      if (isLikeDate() && focusSlotValue === SlotKey.Day) {
+      if (isLikeDate() && focusSlotValue === focusSlotKey) {
         return;
       }
 
       if (!inputRef.current.value) {
         inputRef.current.value = mask;
-        setFocus(SlotKey.Day);
+        setFocus(focusSlotKey);
         return;
       }
 
@@ -57,14 +96,14 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
         return;
       }
 
-      const slotKey = getSlotKey(inputRef.current.selectionStart);
+      const slotKey = getSlotKeyFromIndex(inputRef.current.selectionStart);
 
       if (slotKey) {
-        const { start, end } = SLOTS[slotKey];
+        const { start, end } = slotsInfo[slotKey];
         inputRef.current.setSelectionRange(start, end);
       }
     },
-    [inputRef, isLikeDate, mask, readonly, setFocus],
+    [inputRef, readonly, isLikeDate, focusSlotKey, getSlotKeyFromIndex, mask, setFocus, slotsInfo],
   );
 
   const handleClick = useCallback(() => {
@@ -72,12 +111,12 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
   }, [setInputFocus]);
 
   const handleChange: (value: string, e?: ChangeEvent<HTMLInputElement> | undefined) => void = () => {
-    onChange && isLikeDate() && onChange(inputRef.current?.value || '');
+    onChange && isLikeDate() && onChange(parseDate(inputRef.current?.value || ''));
   };
 
   const checkInputAndGoNext = useCallback(
-    (slotKey: string) => {
-      if (slotKey === SlotKey.Year && tryToCompleteInput()) {
+    (slotKey: SlotKey | undefined) => {
+      if (slotKey === slotOrder[slotOrder.length - 1] && tryToCompleteInput()) {
         return;
       }
 
@@ -88,19 +127,19 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
 
       switch (slotKey) {
         case SlotKey.Day:
-          updateSlot(SlotKey.Month, slotsPlaceHolder[SlotKey.Month]);
+          updateSlot(SlotKey.Month, slotsPlaceholder?.[SlotKey.Month] ?? '');
           setFocus(SlotKey.Month);
           return;
         case SlotKey.Year:
         case SlotKey.Month:
-          updateSlot(SlotKey.Day, slotsPlaceHolder[SlotKey.Day]);
+          updateSlot(SlotKey.Day, slotsPlaceholder?.[SlotKey.Day] ?? '');
           setFocus(SlotKey.Day);
           return;
         default:
           setFocus(getNextSlotKey(slotKey));
       }
     },
-    [tryToCompleteInput, isValidInput, setFocus, slotsPlaceHolder, updateSlot],
+    [slotOrder, tryToCompleteInput, isValidInput, setFocus, getNextSlotKey, updateSlot, slotsPlaceholder],
   );
 
   const handleKeyDown = useCallback(
@@ -125,16 +164,16 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
         }
 
         const clickIndex = inputRef.current.selectionStart;
-        const slotKey = getSlotKey(clickIndex);
+        const slotKey = getSlotKeyFromIndex(clickIndex);
 
         if (slotKey) {
           const value = getSlot(slotKey);
-          const { max } = SLOTS[slotKey];
+          const { max } = slotsInfo[slotKey];
 
           const numberValue = Number(value) || 0;
 
           if (e.key === 'ArrowRight') {
-            if (isAllSelected() || slotKey === SlotKey.Year) {
+            if (isAllSelected() || slotKey === slotOrder[slotOrder.length - 1]) {
               inputRef.current.selectionStart = inputRef.current.value.length;
               return;
             }
@@ -150,9 +189,9 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
           if (e.key === 'Backspace') {
             if (isAllSelected()) {
               inputRef.current.value = mask;
-              setFocus(SlotKey.Day);
+              setFocus(focusSlotKey);
             } else {
-              updateSlot(slotKey, slotsPlaceHolder[slotKey]);
+              updateSlot(slotKey, slotsPlaceholder[slotKey] ?? '');
             }
           }
 
@@ -189,24 +228,31 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
               }
             }
           }
-          onChange?.(isLikeDate() ? inputRef.current.value : '');
+          const newDate = parseDate(isLikeDate() ? inputRef.current.value : '');
+          onChange?.(newDate);
         }
       }
     },
     [
-      checkInputAndGoNext,
-      getSlot,
       inputRef,
-      isAllSelected,
-      isLikeDate,
-      mask,
-      onChange,
       readonly,
-      setFocus,
+      getSlotKeyFromIndex,
       setIsOpen,
-      slotsPlaceHolder,
       tryToCompleteInput,
+      getSlot,
+      slotsInfo,
+      isLikeDate,
+      onChange,
+      isAllSelected,
+      slotOrder,
+      setFocus,
+      getNextSlotKey,
+      getPrevSlotKey,
+      mask,
+      focusSlotKey,
       updateSlot,
+      slotsPlaceholder,
+      checkInputAndGoNext,
     ],
   );
 
@@ -214,8 +260,8 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
     if (!readonly && inputRef.current?.value === mask) {
       inputRef.current.value = '';
     }
-    focusSlotRef.current = SlotKey.Day;
-  }, [inputRef, mask, readonly]);
+    focusSlotRef.current = focusSlotKey;
+  }, [inputRef, mask, readonly, focusSlotKey]);
 
   return {
     handleKeyDown,