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

package/README.md

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

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

@@ -2,15 +2,18 @@ import { CalendarProps } from '@snack-uikit/calendar';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
-type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'value' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
+import { Mode } from './types';
+type InputProps = Pick<InputPrivateProps, 'id' | 'name' | '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: string): void;
+    onChange?(value: Date | undefined): void;
     /** Отображение кнопки копирования */
     showCopyButton?: boolean;
     /**
@@ -20,6 +23,7 @@ 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<{
@@ -29,8 +33,10 @@ export declare const FieldDate: import("react").ForwardRefExoticComponent<{
     open?: boolean;
     /** Колбек открытия пикера */
     onOpenChange?(value: boolean): void;
+    /** Значение поля */
+    value?: Date;
     /** Колбек смены значения */
-    onChange?(value: string): void;
+    onChange?(value: Date | undefined): void;
     /** Отображение кнопки копирования */
     showCopyButton?: boolean;
     /**
@@ -40,5 +46,6 @@ 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]: 'm',
+    [SIZE.L]: 'l',
 };
 export const FieldDate = forwardRef((_a, ref) => {
-    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"]);
+    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"]);
     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('');
+        onChange && onChange(undefined);
         if ((_a = localRef.current) === null || _a === void 0 ? void 0 : _a.value) {
             localRef.current.value = '';
         }
@@ -68,8 +68,9 @@ 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: valueProp || '' });
+    const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy });
     const calendarIcon = useMemo(() => ({
         active: false,
         show: true,
@@ -83,8 +84,9 @@ export const FieldDate = forwardRef((_a, ref) => {
         readonly,
         locale,
         setIsOpen,
+        mode,
     });
-    const setInputFocusFromButtons = useCallback(() => setInputFocus(SlotKey.Year), [setInputFocus]);
+    const setInputFocusFromButtons = useCallback(() => setInputFocus(mode === 'date' ? SlotKey.Year : SlotKey.Seconds), [mode, setInputFocus]);
     const { postfixButtons, inputTabIndex, onInputKeyDown: navigationInputKeyDownHandler, setInitialTabIndices, } = useButtonNavigation({
         setInputFocus: setInputFocusFromButtons,
         inputRef: localRef,
@@ -93,12 +95,15 @@ 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.toLocaleDateString(DEFAULT_LOCALE));
+        onChange && onChange(date);
         (_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();
@@ -120,11 +125,6 @@ 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: 'date', size: CALENDAR_SIZE_MAP[size], value: valueProp ? parseDate(valueProp) : undefined, onChangeValue: handleSelectDate, buildCellProps: buildCellProps, navigationStartRef: element => {
+            }), { 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 => {
                         if (pickerAutofocus) {
                             element === null || element === void 0 ? void 0 : element.focus();
                             setPickerAutofocus(false);
                         }
-                    }, 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' }) }) })) })));
+                    }, 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' }) }) })) })));
 });

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

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

package/dist/components/FieldDate/constants.js

@@ -3,26 +3,51 @@ 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 = {
-    'ru-RU': 'ДД.ММ.ГГГГ',
-    'en-US': 'DD.MM.YYYY',
+    [MODES.Date]: {
+        'ru-RU': 'ДД.ММ.ГГГГ',
+        'en-US': 'DD.MM.YYYY',
+    },
+    [MODES.DateTime]: {
+        'ru-RU': 'ДД.ММ.ГГГГ, чч:мм:сс',
+        'en-US': 'DD.MM.YYYY, hh:mm:ss',
+    },
 };
 export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');
-export const SLOTS = {
+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 },
 };
+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 = {
-    'ru-RU': {
-        [SlotKey.Day]: 'ДД',
-        [SlotKey.Month]: 'ММ',
-        [SlotKey.Year]: 'ГГГГ',
+    [MODES.Date]: {
+        'ru-RU': RU_DATE_SLOTS_PLACEHOLDER,
+        'en-US': EN_DATE_SLOTS_PLACEHOLDER,
     },
-    'en-US': {
-        [SlotKey.Day]: 'DD',
-        [SlotKey.Month]: 'MM',
-        [SlotKey.Year]: 'YYYY',
+    [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' }),
     },
 };

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+export declare function useDateTimeFieldHelpers(inputRef: RefObject<HTMLInputElement>): {
+    isAllSelected: () => boolean;
+    tryToCompleteInput: () => boolean;
+    getSlot: (slotKey: string) => string;
+    updateSlot: (slotKey: string, slotValue: number | string) => void;
+    setFocus: (slotKey: string) => void;
+    isLikeDate: () => boolean;
+    isValidInput: () => boolean;
+};

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

@@ -0,0 +1,75 @@
+import { useCallback } from 'react';
+import { SlotKey, SLOTS } from '../constants';
+export function useDateTimeFieldHelpers(inputRef) {
+    const setFocus = useCallback((slotKey) => {
+        if (inputRef.current) {
+            const { start, end } = SLOTS['date-time'][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-time'][slotKey].start, SLOTS['date-time'][slotKey].end);
+        }
+        return '';
+    }, [inputRef]);
+    const isLikeDate = useCallback(() => {
+        if (inputRef.current) {
+            return Object.keys(SLOTS['date-time']).every(slotKey => getSlot(slotKey) && Number.isInteger(Number(getSlot(slotKey))));
+        }
+        return false;
+    }, [getSlot, inputRef]);
+    const isValidInput = useCallback(() => {
+        const day = parseInt(getSlot(SlotKey.Day), 10);
+        const month = parseInt(getSlot(SlotKey.Month), 10);
+        const year = parseInt(getSlot(SlotKey.Year), 10);
+        if (!month || !day) {
+            return true;
+        }
+        const date = new Date(year || /* високосный год = */ 2020, month - 1, day);
+        return date.getDate() === day;
+    }, [getSlot]);
+    const tryToCompleteInput = useCallback(() => {
+        var _a;
+        const day = parseInt(getSlot(SlotKey.Day), 10);
+        const month = parseInt(getSlot(SlotKey.Month), 10);
+        const year = parseInt(getSlot(SlotKey.Year), 10);
+        const hours = parseInt(getSlot(SlotKey.Hours), 10);
+        const minutes = parseInt(getSlot(SlotKey.Minutes), 10);
+        const seconds = parseInt(getSlot(SlotKey.Seconds), 10);
+        const { min, max } = SLOTS['date-time'][SlotKey.Year];
+        const isCompleted = Boolean(day &&
+            month &&
+            year >= min &&
+            year <= max &&
+            hours !== undefined &&
+            minutes !== undefined &&
+            seconds !== undefined);
+        if (isCompleted && inputRef.current) {
+            const lastPosition = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.length;
+            inputRef.current.selectionStart = lastPosition;
+            inputRef.current.selectionEnd = lastPosition;
+        }
+        return isCompleted;
+    }, [getSlot, inputRef]);
+    const updateSlot = useCallback((slotKey, slotValue) => {
+        if (inputRef.current) {
+            const { start, end, max } = SLOTS['date-time'][slotKey];
+            inputRef.current.value =
+                inputRef.current.value.slice(0, start) +
+                    slotValue.toString().padStart(max.toString().length, '0') +
+                    inputRef.current.value.slice(end);
+            setFocus(slotKey);
+        }
+    }, [inputRef, setFocus]);
+    return {
+        isAllSelected,
+        tryToCompleteInput,
+        getSlot,
+        updateSlot,
+        setFocus,
+        isLikeDate,
+        isValidInput,
+    };
+}

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

@@ -1,6 +1,9 @@
+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,9 +1,14 @@
 import { SlotKey } from './constants';
-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;
+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;
 /**
  * Преобразует строковое значение поля FieldDate в тип Date
  * @function  helper
  */
-export declare function parseDate(date: string): Date;
+export declare function parseDate(value: string): Date | undefined;