@snack-uikit/fields 0.29.2-preview-eb3592d8.0 → 0.29.2

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.29.2 (2024-10-14)
+
+### Only dependencies have been changed
+* [@snack-uikit/list@0.17.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+
+
+
+
+
 ## 0.29.1 (2024-10-08)
 
 ### Only dependencies have been changed

package/README.md

@@ -161,11 +161,6 @@ const [isOpen, setIsOpen] = useState(false);
   enableFuzzySearch={true}
 />;
 ```
-## Особенности работы FieldSlider-a
-
-Для корректной работы компонента, свойство `marks` должно быть либо **константой**, либо **мемоизировано**, 
-т.к. это на этой свойство завязана логика обновления ui.
-
 ## Особенности работы FieldStepper-a
 
 FieldStepper в основном предназначен для работы с небольшими числами, 
@@ -321,11 +316,10 @@ FieldStepper в основном предназначен для работы с
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| mode* | enum Mode: `"date"`, `"date-time"` | - |  |
+| value* | `string` | - | Значение input |
 | open | `boolean` | - | Открыт date-picker |
 | onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
-| value | `Date` | - | Значение поля |
-| onChange | `(value: Date) => void` | - | Колбек смены значения |
+| onChange | `(value: string) => void` | - | Колбек смены значения |
 | showCopyButton | `boolean` | - | Отображение кнопки копирования |
 | showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
 | locale | `Locale` | new Intl.Locale('ru-RU') | Текущая локаль календаря |

package/dist/components/FieldDate/FieldDate.d.ts

@@ -2,18 +2,15 @@ import { CalendarProps } from '@snack-uikit/calendar';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
-import { Mode } from './types';
-type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
+type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'value' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
 type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
 type FieldDateOwnProps = {
     /** Открыт date-picker */
     open?: boolean;
     /** Колбек открытия пикера */
     onOpenChange?(value: boolean): void;
-    /** Значение поля */
-    value?: Date;
     /** Колбек смены значения */
-    onChange?(value: Date | undefined): void;
+    onChange?(value: string): void;
     /** Отображение кнопки копирования */
     showCopyButton?: boolean;
     /**
@@ -23,7 +20,6 @@ type FieldDateOwnProps = {
     showClearButton?: boolean;
     /** Текущая локаль календаря */
     locale?: Intl.Locale;
-    mode: Mode;
 } & Pick<CalendarProps, 'buildCellProps'>;
 export type FieldDateProps = WithSupportProps<FieldDateOwnProps & InputProps & WrapperProps>;
 export declare const FieldDate: import("react").ForwardRefExoticComponent<{
@@ -33,10 +29,8 @@ export declare const FieldDate: import("react").ForwardRefExoticComponent<{
     open?: boolean;
     /** Колбек открытия пикера */
     onOpenChange?(value: boolean): void;
-    /** Значение поля */
-    value?: Date;
     /** Колбек смены значения */
-    onChange?(value: Date | undefined): void;
+    onChange?(value: string): void;
     /** Отображение кнопки копирования */
     showCopyButton?: boolean;
     /**
@@ -46,6 +40,5 @@ export declare const FieldDate: import("react").ForwardRefExoticComponent<{
     showClearButton?: boolean;
     /** Текущая локаль календаря */
     locale?: Intl.Locale;
-    mode: Mode;
 } & Pick<CalendarProps, "buildCellProps"> & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/FieldDate/FieldDate.js

@@ -28,14 +28,14 @@ import { useDateField } from './hooks';
 import { useFocusHandlers } from './hooks/useFocusHandlers';
 import { useHandlers } from './hooks/useHandlers';
 import styles from './styles.module.css';
+import { parseDate } from './utils';
 const CALENDAR_SIZE_MAP = {
     [SIZE.S]: 's',
     [SIZE.M]: 'm',
-    [SIZE.L]: 'l',
+    [SIZE.L]: 'm',
 };
 export const FieldDate = forwardRef((_a, ref) => {
-    var _b;
-    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, locale = DEFAULT_LOCALE, buildCellProps, error, mode } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "locale", "buildCellProps", "error", "mode"]);
+    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, locale = DEFAULT_LOCALE, buildCellProps, error } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "locale", "buildCellProps", "error"]);
     const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
     const [pickerAutofocus, setPickerAutofocus] = useState(false);
     const localRef = useRef(null);
@@ -55,7 +55,7 @@ export const FieldDate = forwardRef((_a, ref) => {
     }, [setIsOpen]);
     const handleClear = useCallback(() => {
         var _a, _b, _c;
-        onChange && onChange(undefined);
+        onChange && onChange('');
         if ((_a = localRef.current) === null || _a === void 0 ? void 0 : _a.value) {
             localRef.current.value = '';
         }
@@ -68,9 +68,8 @@ export const FieldDate = forwardRef((_a, ref) => {
             setIsOpen(false);
         }
     }, [onChange, required, setIsOpen]);
-    const valueToCopy = (_b = (mode === 'date' ? valueProp === null || valueProp === void 0 ? void 0 : valueProp.toLocaleDateString() : valueProp === null || valueProp === void 0 ? void 0 : valueProp.toLocaleString())) !== null && _b !== void 0 ? _b : '';
     const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear: handleClear });
-    const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy });
+    const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy: valueProp || '' });
     const calendarIcon = useMemo(() => ({
         active: false,
         show: true,
@@ -84,9 +83,8 @@ export const FieldDate = forwardRef((_a, ref) => {
         readonly,
         locale,
         setIsOpen,
-        mode,
     });
-    const setInputFocusFromButtons = useCallback(() => setInputFocus(mode === 'date' ? SlotKey.Year : SlotKey.Seconds), [mode, setInputFocus]);
+    const setInputFocusFromButtons = useCallback(() => setInputFocus(SlotKey.Year), [setInputFocus]);
     const { postfixButtons, inputTabIndex, onInputKeyDown: navigationInputKeyDownHandler, setInitialTabIndices, } = useButtonNavigation({
         setInputFocus: setInputFocusFromButtons,
         inputRef: localRef,
@@ -95,15 +93,12 @@ export const FieldDate = forwardRef((_a, ref) => {
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
+    // TODO: do not hardcode locale here
     const handleSelectDate = (date) => {
         var _a;
-        onChange && onChange(date);
+        onChange && onChange(date.toLocaleDateString(DEFAULT_LOCALE));
         (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         setIsOpen(false);
-        if (localRef.current) {
-            localRef.current.value =
-                mode === 'date' ? date.toLocaleDateString(DEFAULT_LOCALE) : date.toLocaleString(DEFAULT_LOCALE);
-        }
     };
     const handleCalendarFocusLeave = () => {
         setInitialTabIndices();
@@ -125,6 +120,11 @@ export const FieldDate = forwardRef((_a, ref) => {
             (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [open]);
+    useEffect(() => {
+        if (localRef.current) {
+            localRef.current.value = valueProp;
+        }
+    }, [valueProp]);
     const onFocusByKeyboard = useCallback((e) => {
         setInputFocus();
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
@@ -146,10 +146,10 @@ export const FieldDate = forwardRef((_a, ref) => {
             : {
                 open: showDropList,
                 onOpenChange: setIsOpen,
-            }), { content: _jsx("div", { className: styles.calendarWrapper, "data-size": size, children: _jsx(Calendar, { mode: mode, size: CALENDAR_SIZE_MAP[size], value: valueProp, onChangeValue: handleSelectDate, buildCellProps: buildCellProps, navigationStartRef: element => {
+            }), { content: _jsx("div", { className: styles.calendarWrapper, "data-size": size, children: _jsx(Calendar, { mode: 'date', size: CALENDAR_SIZE_MAP[size], value: valueProp ? parseDate(valueProp) : undefined, onChangeValue: handleSelectDate, buildCellProps: buildCellProps, navigationStartRef: element => {
                         if (pickerAutofocus) {
                             element === null || element === void 0 ? void 0 : element.focus();
                             setPickerAutofocus(false);
                         }
-                    }, onFocusLeave: handleCalendarFocusLeave, locale: locale, "data-test-id": 'field-date__calendar', fitToContainer: false }) }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: postfixButtons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value || '', placeholder: mask, onChange: handleChange, onFocus: inputHandlers.onFocus, onMouseDown: inputHandlers.onMouseDown, onBlur: onBlur, onKeyDown: handleInputKeyDown, onClick: onClick, disabled: disabled, readonly: readonly, tabIndex: inputTabIndex, type: 'text', id: id, name: name, "data-test-id": 'field-date__input' }) }) })) })));
+                    }, onFocusLeave: handleCalendarFocusLeave, locale: locale, "data-test-id": 'field-date__calendar' }) }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: postfixButtons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value || '', placeholder: mask, onChange: handleChange, onFocus: inputHandlers.onFocus, onMouseDown: inputHandlers.onMouseDown, onBlur: onBlur, onKeyDown: handleInputKeyDown, onClick: onClick, disabled: disabled, readonly: readonly, tabIndex: inputTabIndex, type: 'text', id: id, name: name, "data-test-id": 'field-date__input' }) }) })) })));
 });

package/dist/components/FieldDate/constants.d.ts

@@ -1,17 +1,10 @@
-import { Mode, Slot } from './types';
+import { Slot } from './types';
 export declare enum SlotKey {
     Day = "D",
     Month = "M",
-    Year = "Y",
-    Hours = "h",
-    Minutes = "m",
-    Seconds = "s"
+    Year = "Y"
 }
-export declare const MODES: {
-    readonly Date: "date";
-    readonly DateTime: "date-time";
-};
-export declare const MASK: Record<Mode, Record<string, string>>;
+export declare const MASK: Record<string, string>;
 export declare const DEFAULT_LOCALE: Intl.Locale;
-export declare const SLOTS: Record<Mode, Record<SlotKey | string, Slot>>;
-export declare const SLOTS_PLACEHOLDER: Record<Mode, Record<string, Partial<Record<SlotKey, string>>>>;
+export declare const SLOTS: Record<SlotKey | string, Slot>;
+export declare const SLOTS_PLACEHOLDER: Record<string, Record<string, string>>;

package/dist/components/FieldDate/constants.js

@@ -3,51 +3,26 @@ export var SlotKey;
     SlotKey["Day"] = "D";
     SlotKey["Month"] = "M";
     SlotKey["Year"] = "Y";
-    SlotKey["Hours"] = "h";
-    SlotKey["Minutes"] = "m";
-    SlotKey["Seconds"] = "s";
 })(SlotKey || (SlotKey = {}));
-export const MODES = {
-    Date: 'date',
-    DateTime: 'date-time',
-};
 export const MASK = {
-    [MODES.Date]: {
-        'ru-RU': 'ДД.ММ.ГГГГ',
-        'en-US': 'DD.MM.YYYY',
-    },
-    [MODES.DateTime]: {
-        'ru-RU': 'ДД.ММ.ГГГГ, чч:мм:сс',
-        'en-US': 'DD.MM.YYYY, hh:mm:ss',
-    },
+    'ru-RU': 'ДД.ММ.ГГГГ',
+    'en-US': 'DD.MM.YYYY',
 };
 export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');
-const DATE_SLOTS = {
+export const 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 },
 };
-export const SLOTS = {
-    [MODES.Date]: DATE_SLOTS,
-    [MODES.DateTime]: Object.assign(Object.assign({}, DATE_SLOTS), { [SlotKey.Hours]: { start: 12, end: 14, max: 23, min: 0 }, [SlotKey.Minutes]: { start: 15, end: 17, max: 59, min: 0 }, [SlotKey.Seconds]: { start: 18, end: 20, max: 59, min: 0 } }),
-};
-const RU_DATE_SLOTS_PLACEHOLDER = {
-    [SlotKey.Day]: 'ДД',
-    [SlotKey.Month]: 'ММ',
-    [SlotKey.Year]: 'ГГГГ',
-};
-const EN_DATE_SLOTS_PLACEHOLDER = {
-    [SlotKey.Day]: 'DD',
-    [SlotKey.Month]: 'MM',
-    [SlotKey.Year]: 'YYYY',
-};
 export const SLOTS_PLACEHOLDER = {
-    [MODES.Date]: {
-        'ru-RU': RU_DATE_SLOTS_PLACEHOLDER,
-        'en-US': EN_DATE_SLOTS_PLACEHOLDER,
+    'ru-RU': {
+        [SlotKey.Day]: 'ДД',
+        [SlotKey.Month]: 'ММ',
+        [SlotKey.Year]: 'ГГГГ',
     },
-    [MODES.DateTime]: {
-        'ru-RU': Object.assign(Object.assign({}, RU_DATE_SLOTS_PLACEHOLDER), { [SlotKey.Hours]: 'чч', [SlotKey.Minutes]: 'мм', [SlotKey.Seconds]: 'сс' }),
-        'en-US': Object.assign(Object.assign({}, EN_DATE_SLOTS_PLACEHOLDER), { [SlotKey.Hours]: 'hh', [SlotKey.Minutes]: 'mm', [SlotKey.Seconds]: 'ss' }),
+    'en-US': {
+        [SlotKey.Day]: 'DD',
+        [SlotKey.Month]: 'MM',
+        [SlotKey.Year]: 'YYYY',
     },
 };

package/dist/components/FieldDate/hooks/useDateField.d.ts

@@ -1,16 +1,14 @@
 import { ChangeEvent, FocusEventHandler, KeyboardEvent, RefObject } from 'react';
 import { SlotKey } from '../constants';
-import { Mode } from '../types';
 type UseDateFieldProps = {
     inputRef: RefObject<HTMLInputElement>;
-    onChange?(value: Date | undefined): void;
+    onChange?(value: string): void;
     readonly?: boolean;
     locale?: Intl.Locale;
     setIsOpen(v: boolean): void;
-    mode: Mode;
 };
-type FocusSlot = SlotKey.Day | SlotKey.Year | SlotKey.Seconds | 'auto';
-export declare function useDateField({ inputRef, onChange, readonly, locale, setIsOpen, mode, }: UseDateFieldProps): {
+type FocusSlot = SlotKey.Day | SlotKey.Year | 'auto';
+export declare function useDateField({ inputRef, onChange, readonly, locale, setIsOpen }: UseDateFieldProps): {
     handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
     handleChange: (value: string, e?: ChangeEvent<HTMLInputElement> | undefined) => void;
     handleClick: () => void;

package/dist/components/FieldDate/hooks/useDateField.js

@@ -1,19 +1,14 @@
 import { useCallback, useMemo, useRef } from 'react';
 import { isBrowser } from '@snack-uikit/utils';
 import { DEFAULT_LOCALE, MASK, SlotKey, SLOTS, SLOTS_PLACEHOLDER } from '../constants';
-import { getNextSlotKey, getPrevSlotKey, getSlotKey, parseDate } from '../utils';
+import { getNextSlotKey, getPrevSlotKey, getSlotKey } from '../utils';
 import { useDateFieldHelpers } from './useDateFieldHelpers';
-import { useDateTimeFieldHelpers } from './useDateTimeFieldHelpers';
-export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LOCALE, setIsOpen, mode, }) {
+export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LOCALE, setIsOpen }) {
     var _a;
-    const dateHelpers = useDateFieldHelpers(inputRef);
-    const dateTimeHelpers = useDateTimeFieldHelpers(inputRef);
-    const { setFocus, updateSlot, getSlot, isLikeDate, isAllSelected, tryToCompleteInput, isValidInput } = mode === 'date' ? dateHelpers : dateTimeHelpers;
+    const { setFocus, updateSlot, getSlot, isLikeDate, isAllSelected, isValidInput, tryToCompleteInput } = useDateFieldHelpers(inputRef);
     const focusSlotRef = useRef(SlotKey.Day);
-    const mask = useMemo(() => MASK[mode][locale.baseName] || MASK[mode][DEFAULT_LOCALE.baseName], [locale.baseName, mode]);
-    const getNextSlotKeyHandler = getNextSlotKey(mode);
-    const getPrevSlotKeyHandler = getPrevSlotKey(mode);
-    const slotsPlaceholder = useMemo(() => SLOTS_PLACEHOLDER[mode][locale.baseName] || SLOTS_PLACEHOLDER[mode][DEFAULT_LOCALE.baseName], [locale.baseName, mode]);
+    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]);
     const setInputFocus = useCallback((focusSlot) => {
         if (!inputRef.current || readonly) {
             return;
@@ -36,44 +31,42 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
             setFocus(focusSlotValue);
             return;
         }
-        const slotKey = getSlotKey(inputRef.current.selectionStart, mode);
+        const slotKey = getSlotKey(inputRef.current.selectionStart);
         if (slotKey) {
-            const { start, end } = SLOTS[mode][slotKey];
+            const { start, end } = SLOTS[slotKey];
             inputRef.current.setSelectionRange(start, end);
         }
-    }, [inputRef, isLikeDate, mask, mode, readonly, setFocus]);
+    }, [inputRef, isLikeDate, mask, readonly, setFocus]);
     const handleClick = useCallback(() => {
         setInputFocus('auto');
     }, [setInputFocus]);
     const handleChange = () => {
         var _a;
-        onChange && isLikeDate() && onChange(parseDate(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || ''));
+        onChange && isLikeDate() && onChange(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || '');
     };
     const checkInputAndGoNext = useCallback((slotKey) => {
-        var _a, _b;
-        if (slotKey === (mode === 'date' ? SlotKey.Year : SlotKey.Seconds) && tryToCompleteInput()) {
+        if (slotKey === SlotKey.Year && tryToCompleteInput()) {
             return;
         }
         if (isValidInput()) {
-            setFocus(getNextSlotKeyHandler(slotKey));
+            setFocus(getNextSlotKey(slotKey));
             return;
         }
         switch (slotKey) {
             case SlotKey.Day:
-                updateSlot(SlotKey.Month, (_a = slotsPlaceholder === null || slotsPlaceholder === void 0 ? void 0 : slotsPlaceholder[SlotKey.Month]) !== null && _a !== void 0 ? _a : '');
+                updateSlot(SlotKey.Month, slotsPlaceHolder[SlotKey.Month]);
                 setFocus(SlotKey.Month);
                 return;
             case SlotKey.Year:
             case SlotKey.Month:
-                updateSlot(SlotKey.Day, (_b = slotsPlaceholder === null || slotsPlaceholder === void 0 ? void 0 : slotsPlaceholder[SlotKey.Day]) !== null && _b !== void 0 ? _b : '');
+                updateSlot(SlotKey.Day, slotsPlaceHolder[SlotKey.Day]);
                 setFocus(SlotKey.Day);
                 return;
             default:
-                setFocus(getNextSlotKeyHandler(slotKey));
+                setFocus(getNextSlotKey(slotKey));
         }
-    }, [mode, tryToCompleteInput, isValidInput, setFocus, getNextSlotKeyHandler, updateSlot, slotsPlaceholder]);
+    }, [tryToCompleteInput, isValidInput, setFocus, slotsPlaceHolder, updateSlot]);
     const handleKeyDown = useCallback((e) => {
-        var _a;
         if (inputRef.current && !readonly) {
             if (e.key !== 'Tab') {
                 e.preventDefault();
@@ -90,21 +83,21 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
                 tryToCompleteInput();
             }
             const clickIndex = inputRef.current.selectionStart;
-            const slotKey = getSlotKey(clickIndex, mode);
+            const slotKey = getSlotKey(clickIndex);
             if (slotKey) {
                 const value = getSlot(slotKey);
-                const { max } = SLOTS[mode][slotKey];
+                const { max } = SLOTS[slotKey];
                 const numberValue = Number(value) || 0;
                 if (e.key === 'ArrowRight') {
-                    if (isAllSelected() || slotKey === (mode === 'date' ? SlotKey.Year : SlotKey.Seconds)) {
+                    if (isAllSelected() || slotKey === SlotKey.Year) {
                         inputRef.current.selectionStart = inputRef.current.value.length;
                         return;
                     }
-                    setFocus(getNextSlotKeyHandler(slotKey));
+                    setFocus(getNextSlotKey(slotKey));
                     return;
                 }
                 if (e.key === 'ArrowLeft') {
-                    setFocus(getPrevSlotKeyHandler(slotKey));
+                    setFocus(getPrevSlotKey(slotKey));
                     return;
                 }
                 if (e.key === 'Backspace') {
@@ -113,7 +106,7 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
                         setFocus(SlotKey.Day);
                     }
                     else {
-                        updateSlot(slotKey, (_a = slotsPlaceholder[slotKey]) !== null && _a !== void 0 ? _a : '');
+                        updateSlot(slotKey, slotsPlaceHolder[slotKey]);
                     }
                 }
                 if (/^\d+$/.test(e.key)) {
@@ -151,25 +144,21 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
                         }
                     }
                 }
-                const newDate = parseDate(isLikeDate() ? inputRef.current.value : '');
-                onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
+                onChange === null || onChange === void 0 ? void 0 : onChange(isLikeDate() ? inputRef.current.value : '');
             }
         }
     }, [
         checkInputAndGoNext,
-        getNextSlotKeyHandler,
-        getPrevSlotKeyHandler,
         getSlot,
         inputRef,
         isAllSelected,
         isLikeDate,
         mask,
-        mode,
         onChange,
         readonly,
         setFocus,
         setIsOpen,
-        slotsPlaceholder,
+        slotsPlaceHolder,
         tryToCompleteInput,
         updateSlot,
     ]);

package/dist/components/FieldDate/hooks/useDateFieldHelpers.js

@@ -3,20 +3,20 @@ import { SlotKey, SLOTS } from '../constants';
 export function useDateFieldHelpers(inputRef) {
     const setFocus = useCallback((slotKey) => {
         if (inputRef.current) {
-            const { start, end } = SLOTS.date[slotKey];
+            const { start, end } = SLOTS[slotKey];
             inputRef.current.setSelectionRange(start, end);
         }
     }, [inputRef]);
     const isAllSelected = useCallback(() => { var _a, _b, _c; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.length) === ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.selectionEnd) && ((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.selectionStart) === 0; }, [inputRef]);
     const getSlot = useCallback((slotKey) => {
         if (inputRef.current) {
-            return inputRef.current.value.slice(SLOTS.date[slotKey].start, SLOTS.date[slotKey].end);
+            return inputRef.current.value.slice(SLOTS[slotKey].start, SLOTS[slotKey].end);
         }
         return '';
     }, [inputRef]);
     const isLikeDate = useCallback(() => {
         if (inputRef.current) {
-            return Object.keys(SLOTS.date).every(slotKey => getSlot(slotKey) && Number.isInteger(Number(getSlot(slotKey))));
+            return Object.keys(SLOTS).every(slotKey => getSlot(slotKey) && Number.isInteger(Number(getSlot(slotKey))));
         }
         return false;
     }, [getSlot, inputRef]);
@@ -35,7 +35,7 @@ export function useDateFieldHelpers(inputRef) {
         const day = parseInt(getSlot(SlotKey.Day), 10);
         const month = parseInt(getSlot(SlotKey.Month), 10);
         const year = parseInt(getSlot(SlotKey.Year), 10);
-        const { min, max } = SLOTS.date[SlotKey.Year];
+        const { min, max } = SLOTS[SlotKey.Year];
         const isCompleted = Boolean(day && month && year >= min && year <= max);
         if (isCompleted && inputRef.current) {
             const lastPosition = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.length;
@@ -46,7 +46,7 @@ export function useDateFieldHelpers(inputRef) {
     }, [getSlot, inputRef]);
     const updateSlot = useCallback((slotKey, slotValue) => {
         if (inputRef.current) {
-            const { start, end, max } = SLOTS.date[slotKey];
+            const { start, end, max } = SLOTS[slotKey];
             inputRef.current.value =
                 inputRef.current.value.slice(0, start) +
                     slotValue.toString().padStart(max.toString().length, '0') +

package/dist/components/FieldDate/types.d.ts

@@ -1,9 +1,6 @@
-import { ValueOf } from '@snack-uikit/utils';
-import { MODES } from './constants';
 export type Slot = {
     start: number;
     end: number;
     max: number;
     min: number;
 };
-export type Mode = ValueOf<typeof MODES>;

package/dist/components/FieldDate/utils.d.ts

@@ -1,14 +1,9 @@
 import { SlotKey } from './constants';
-import { Mode } from './types';
-export declare function getSlotKey(index: number | null, mode: Mode): SlotKey | null;
-export declare function getNextSlotKeyWithDate(slotKey: string | null): SlotKey.Month | SlotKey.Year;
-export declare function getPrevSlotKeyWithDate(slotKey: string | null): SlotKey.Day | SlotKey.Month;
-export declare function getNextSlotKeyWithTime(slotKey: string | null): SlotKey.Month | SlotKey.Year | SlotKey.Hours | SlotKey.Minutes | SlotKey.Seconds;
-export declare function getPrevSlotKeyWithTime(slotKey: string | null): SlotKey.Day | SlotKey.Month | SlotKey.Year | SlotKey.Hours | SlotKey.Minutes;
-export declare function getNextSlotKey(mode: Mode): typeof getNextSlotKeyWithTime;
-export declare function getPrevSlotKey(mode: Mode): typeof getPrevSlotKeyWithTime;
+export declare function getSlotKey(index: number | null): string | null;
+export declare function getNextSlotKey(slotKey: string | null): SlotKey.Month | SlotKey.Year;
+export declare function getPrevSlotKey(slotKey: string | null): SlotKey.Day | SlotKey.Month;
 /**
  * Преобразует строковое значение поля FieldDate в тип Date
  * @function  helper
  */
-export declare function parseDate(value: string): Date | undefined;
+export declare function parseDate(date: string): Date;

package/dist/components/FieldDate/utils.js

@@ -1,15 +1,15 @@
 import { SlotKey, SLOTS } from './constants';
-export function getSlotKey(index, mode) {
+export function getSlotKey(index) {
     if (index !== null) {
-        for (const key in SLOTS[mode]) {
-            if (index >= SLOTS[mode][key].start && index <= SLOTS[mode][key].end) {
+        for (const key in SLOTS) {
+            if (index >= SLOTS[key].start && index <= SLOTS[key].end) {
                 return key;
             }
         }
     }
     return null;
 }
-export function getNextSlotKeyWithDate(slotKey) {
+export function getNextSlotKey(slotKey) {
     switch (slotKey) {
         case SlotKey.Day: {
             return SlotKey.Month;
@@ -21,7 +21,7 @@ export function getNextSlotKeyWithDate(slotKey) {
         }
     }
 }
-export function getPrevSlotKeyWithDate(slotKey) {
+export function getPrevSlotKey(slotKey) {
     switch (slotKey) {
         case SlotKey.Year: {
             return SlotKey.Month;
@@ -33,73 +33,11 @@ export function getPrevSlotKeyWithDate(slotKey) {
         }
     }
 }
-export function getNextSlotKeyWithTime(slotKey) {
-    switch (slotKey) {
-        case SlotKey.Day: {
-            return SlotKey.Month;
-        }
-        case SlotKey.Month: {
-            return SlotKey.Year;
-        }
-        case SlotKey.Year: {
-            return SlotKey.Hours;
-        }
-        case SlotKey.Hours: {
-            return SlotKey.Minutes;
-        }
-        case SlotKey.Minutes:
-        case SlotKey.Seconds:
-        default: {
-            return SlotKey.Seconds;
-        }
-    }
-}
-export function getPrevSlotKeyWithTime(slotKey) {
-    switch (slotKey) {
-        case SlotKey.Seconds: {
-            return SlotKey.Minutes;
-        }
-        case SlotKey.Minutes: {
-            return SlotKey.Hours;
-        }
-        case SlotKey.Hours: {
-            return SlotKey.Year;
-        }
-        case SlotKey.Year: {
-            return SlotKey.Month;
-        }
-        case SlotKey.Month:
-        case SlotKey.Day:
-        default: {
-            return SlotKey.Day;
-        }
-    }
-}
-export function getNextSlotKey(mode) {
-    return mode === 'date' ? getNextSlotKeyWithDate : getNextSlotKeyWithTime;
-}
-export function getPrevSlotKey(mode) {
-    return mode === 'date' ? getPrevSlotKeyWithDate : getPrevSlotKeyWithTime;
-}
 /**
  * Преобразует строковое значение поля FieldDate в тип Date
  * @function  helper
  */
-export function parseDate(value) {
-    if (!value) {
-        return undefined;
-    }
-    const [date, time] = value.split(', ');
-    const dateValues = date.split('.');
-    const year = Number(dateValues[2]);
-    const month = Number(dateValues[1]) - 1;
-    const day = Number(dateValues[0]);
-    if (time) {
-        const timeValues = time.split(':');
-        const hours = timeValues[0] ? Number(timeValues[0]) : undefined;
-        const minutes = timeValues[1] ? Number(timeValues[1]) : undefined;
-        const seconds = timeValues[2] ? Number(timeValues[2]) : undefined;
-        return new Date(year, month, day, hours, minutes, seconds);
-    }
-    return new Date(year, month, day);
+export function parseDate(date) {
+    const values = date.split('.');
+    return new Date(Number(values[2]), Number(values[1]) - 1, Number(values[0]));
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.29.2-preview-eb3592d8.0",
+  "version": "0.29.2",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,13 +33,13 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.17.5",
-    "@snack-uikit/calendar": "0.8.1-preview-eb3592d8.0",
+    "@snack-uikit/calendar": "0.8.0",
     "@snack-uikit/color-picker": "0.1.1",
     "@snack-uikit/divider": "3.0.4",
     "@snack-uikit/dropdown": "0.2.7",
     "@snack-uikit/icons": "0.22.1",
     "@snack-uikit/input-private": "4.0.0",
-    "@snack-uikit/list": "0.17.1-preview-eb3592d8.0",
+    "@snack-uikit/list": "0.17.1",
     "@snack-uikit/scroll": "0.6.2",
     "@snack-uikit/skeleton": "0.3.5",
     "@snack-uikit/slider": "0.1.18",
@@ -61,5 +61,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "2821429780b5fba4e6bc92c93a78da10ad23e530"
+  "gitHead": "c2ae92f1626a256a9a0505c2cd74136cba9700bb"
 }