@snack-uikit/fields 0.30.0 → 0.32.0

package/dist/esm/constants/dateFields.js

@@ -0,0 +1,103 @@
+export var SlotKey;
+(function (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 TIME_MODES = {
+    FullTime: 'full-time',
+    NoSeconds: 'no-seconds',
+};
+export const NO_SECONDS_MODE = 'date-time-no-sec';
+export const MASK = {
+    [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, showSeconds) => (Object.assign({ [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 = {
+    [MODES.Date]: DATE_SLOTS,
+    [MODES.DateTime]: Object.assign(Object.assign({}, DATE_SLOTS), TIME_SLOTS(12, true)),
+    [NO_SECONDS_MODE]: Object.assign(Object.assign({}, DATE_SLOTS), TIME_SLOTS(12, false)),
+    [TIME_MODES.FullTime]: TIME_SLOTS(0, true),
+    [TIME_MODES.NoSeconds]: TIME_SLOTS(0, false),
+};
+export const SLOT_ORDER = {
+    [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 = {
+    [MODES.Date]: {
+        'ru-RU': RU_DATE_SLOTS_PLACEHOLDER,
+        'en-US': EN_DATE_SLOTS_PLACEHOLDER,
+    },
+    [MODES.DateTime]: {
+        'ru-RU': Object.assign(Object.assign({}, RU_DATE_SLOTS_PLACEHOLDER), RU_TIME_SLOTS_PLACEHOLDER),
+        'en-US': Object.assign(Object.assign({}, EN_DATE_SLOTS_PLACEHOLDER), EN_TIME_SLOTS_PLACEHOLDER),
+    },
+    [NO_SECONDS_MODE]: {
+        'ru-RU': Object.assign(Object.assign(Object.assign({}, RU_DATE_SLOTS_PLACEHOLDER), RU_TIME_SLOTS_PLACEHOLDER), { [SlotKey.Seconds]: undefined }),
+        'en-US': Object.assign(Object.assign(Object.assign({}, 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': Object.assign(Object.assign({}, RU_TIME_SLOTS_PLACEHOLDER), { [SlotKey.Seconds]: undefined }),
+        'en-US': Object.assign(Object.assign({}, EN_TIME_SLOTS_PLACEHOLDER), { [SlotKey.Seconds]: undefined }),
+    },
+};

package/dist/esm/constants/index.d.ts

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

package/dist/esm/constants/index.js

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

package/dist/esm/hooks/dateHandlers/index.d.ts

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

package/dist/esm/hooks/dateHandlers/index.js

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

package/dist/esm/{components/FieldDate/hooks → hooks/dateHandlers}/useDateField.d.ts

@@ -1,14 +1,22 @@
 import { ChangeEvent, FocusEventHandler, KeyboardEvent, RefObject } from 'react';
-import { SlotKey } from '../constants';
-type UseDateFieldProps = {
+import { TimePickerProps } from '@snack-uikit/calendar';
+import { FocusSlot } from '../../constants';
+import { Mode, TimeMode } from '../../types';
+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 declare function useDateField({ inputRef, onChange, readonly, locale, setIsOpen }: UseDateFieldProps): {
+type UseDateFieldProps = ({
+    mode: Mode;
+    onChange?(value: Date | undefined): void;
+} & BaseProps) | ({
+    mode: TimeMode;
+    onChange?: TimePickerProps['onChangeValue'];
+} & BaseProps);
+export declare function useDateField({ inputRef, onChange, readonly, locale, setIsOpen, mode, showSeconds, }: UseDateFieldProps): {
     handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
     handleChange: (value: string, e?: ChangeEvent<HTMLInputElement> | undefined) => void;
     handleClick: () => void;

package/dist/esm/{components/FieldDate/hooks → hooks/dateHandlers}/useDateField.js

@@ -1,51 +1,56 @@
 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 { useDateFieldHelpers } from './useDateFieldHelpers';
-export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LOCALE, setIsOpen }) {
+import { DEFAULT_LOCALE, MASK, MODES, NO_SECONDS_MODE, SLOT_ORDER, SlotKey, SLOTS, SLOTS_PLACEHOLDER, } from '../../constants';
+import { parseDate } from '../../utils/dateFields';
+import { useDateFieldHelpersForMode } from './useDateFieldHelpersForMode';
+export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LOCALE, setIsOpen, mode, showSeconds, }) {
     var _a;
-    const { setFocus, updateSlot, getSlot, isLikeDate, isAllSelected, isValidInput, tryToCompleteInput } = useDateFieldHelpers(inputRef);
-    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 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(focusSlotKey);
     const setInputFocus = useCallback((focusSlot) => {
         if (!inputRef.current || readonly) {
             return;
         }
         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;
         }
         if (focusSlot !== 'auto') {
             setFocus(focusSlotValue);
             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(() => {
         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 === slotOrder[slotOrder.length - 1] && tryToCompleteInput()) {
             return;
         }
         if (isValidInput()) {
@@ -54,19 +59,20 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
         }
         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));
         }
-    }, [tryToCompleteInput, isValidInput, setFocus, slotsPlaceHolder, updateSlot]);
+    }, [slotOrder, tryToCompleteInput, isValidInput, setFocus, getNextSlotKey, updateSlot, slotsPlaceholder]);
     const handleKeyDown = useCallback((e) => {
+        var _a;
         if (inputRef.current && !readonly) {
             if (e.key !== 'Tab') {
                 e.preventDefault();
@@ -83,13 +89,13 @@ export function useDateField({ inputRef, onChange, readonly, locale = DEFAULT_LO
                 tryToCompleteInput();
             }
             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;
                     }
@@ -103,10 +109,10 @@ 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, (_a = slotsPlaceholder[slotKey]) !== null && _a !== void 0 ? _a : '');
                     }
                 }
                 if (/^\d+$/.test(e.key)) {
@@ -144,31 +150,38 @@ 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,
-        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,
     ]);
     const handleBlur = useCallback(() => {
         var _a;
         if (!readonly && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) === mask) {
             inputRef.current.value = '';
         }
-        focusSlotRef.current = SlotKey.Day;
-    }, [inputRef, mask, readonly]);
+        focusSlotRef.current = focusSlotKey;
+    }, [inputRef, mask, readonly, focusSlotKey]);
     return {
         handleKeyDown,
         handleChange,

package/dist/esm/hooks/dateHandlers/useDateFieldHelpersForMode.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+import { SlotKey } from '../../constants';
+import { Mode, NoSecondsMode, TimeMode } from '../../types';
+export declare function useDateFieldHelpersForMode({ inputRef, mode, }: {
+    inputRef: RefObject<HTMLInputElement>;
+    mode: Mode | TimeMode | NoSecondsMode;
+}): {
+    isAllSelected: () => boolean;
+    isValidInput: () => boolean;
+    tryToCompleteInput: () => boolean;
+    getSlot: (slotKey: string) => string;
+    updateSlot: (slotKey: string, slotValue: number | string) => void;
+    setFocus: (slotKey: string) => void;
+    isLikeDate: () => boolean;
+    getNextSlotKey: (slotKey: SlotKey | undefined) => SlotKey;
+    getPrevSlotKey: (slotKey: SlotKey | undefined) => SlotKey;
+    getSlotKeyFromIndex: (index: number | null) => SlotKey | undefined;
+};

package/dist/esm/hooks/dateHandlers/useDateFieldHelpersForMode.js

@@ -0,0 +1,95 @@
+import { useCallback, useMemo } from 'react';
+import { MODES, NO_SECONDS_MODE, SlotKey, SLOTS, TIME_MODES } from '../../constants';
+import { getNextSlotKeyHandler, getPrevSlotKeyHandler, getSlotKeyFromIndexHandler } from '../../utils/dateFields';
+export function useDateFieldHelpersForMode({ inputRef, mode, }) {
+    const setFocus = useCallback((slotKey) => {
+        if (inputRef.current) {
+            const { start, end } = SLOTS[mode][slotKey];
+            inputRef.current.setSelectionRange(start, end);
+        }
+    }, [mode, 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[mode][slotKey].start, SLOTS[mode][slotKey].end);
+        }
+        return '';
+    }, [mode, inputRef]);
+    const isLikeDate = useCallback(() => {
+        if (inputRef.current) {
+            return Object.keys(SLOTS[mode]).every(slotKey => getSlot(slotKey) && Number.isInteger(Number(getSlot(slotKey))));
+        }
+        return false;
+    }, [mode, getSlot, inputRef]);
+    const isValidInput = useCallback(() => {
+        const isTimeMode = Object.values(TIME_MODES).includes(mode);
+        if (isTimeMode) {
+            return true;
+        }
+        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, mode]);
+    const tryToCompleteInput = useCallback(() => {
+        var _a;
+        let isCompleted;
+        const parsedSlotsData = Object.keys(SLOTS[mode]).reduce((res, key) => {
+            const slotKey = key;
+            res[slotKey] = parseInt(getSlot(slotKey), 10);
+            return res;
+        }, {});
+        const { [SlotKey.Day]: day, [SlotKey.Month]: month, [SlotKey.Year]: year, [SlotKey.Hours]: hours, [SlotKey.Minutes]: minutes, [SlotKey.Seconds]: seconds, } = parsedSlotsData;
+        const yearSlotMeta = SLOTS[mode][SlotKey.Year];
+        const isDateCompleted = Boolean(day && month && year >= (yearSlotMeta === null || yearSlotMeta === void 0 ? void 0 : yearSlotMeta.min) && year <= (yearSlotMeta === null || yearSlotMeta === void 0 ? void 0 : yearSlotMeta.max));
+        const isTimeCompleted = [
+            hours,
+            minutes,
+            ...(mode === MODES.DateTime || mode === TIME_MODES.FullTime ? [seconds] : []),
+        ].every(value => value !== undefined);
+        if (mode === MODES.DateTime || mode === NO_SECONDS_MODE) {
+            isCompleted = isDateCompleted && isTimeCompleted;
+        }
+        else if (mode === TIME_MODES.FullTime || mode === TIME_MODES.NoSeconds) {
+            isCompleted = isTimeCompleted;
+        }
+        else {
+            isCompleted = isDateCompleted;
+        }
+        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, mode]);
+    const updateSlot = useCallback((slotKey, slotValue) => {
+        if (inputRef.current) {
+            const { start, end, max } = SLOTS[mode][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, mode]);
+    const getNextSlotKey = useMemo(() => getNextSlotKeyHandler(mode), [mode]);
+    const getPrevSlotKey = useMemo(() => getPrevSlotKeyHandler(mode), [mode]);
+    const getSlotKeyFromIndex = useMemo(() => getSlotKeyFromIndexHandler(mode), [mode]);
+    return {
+        isAllSelected,
+        isValidInput,
+        tryToCompleteInput,
+        getSlot,
+        updateSlot,
+        setFocus,
+        isLikeDate,
+        getNextSlotKey,
+        getPrevSlotKey,
+        getSlotKeyFromIndex,
+    };
+}

package/dist/esm/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from './dateHandlers';
 export * from './useCopyButton';
 export * from './useHideButton';
 export * from './usePostfix';

package/dist/esm/hooks/index.js

@@ -1,3 +1,4 @@
+export * from './dateHandlers';
 export * from './useCopyButton';
 export * from './useHideButton';
 export * from './usePostfix';

package/dist/esm/hooks/useCopyButton.js

@@ -8,6 +8,6 @@ export function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy
         active: true,
         ref: copyButtonRef,
         show: showCopyButton,
-        render: props => (_jsx(ButtonCopyValue, Object.assign({}, props, { size: BUTTON_SIZE_MAP[size], valueToCopy: prefix + valueToCopy + postfix, onValueRequest: onValueRequest, disabled: disabled }))),
+        render: props => (_jsx(ButtonCopyValue, Object.assign({}, props, { size: BUTTON_SIZE_MAP[size], valueToCopy: (prefix !== null && prefix !== void 0 ? prefix : '') + valueToCopy + (postfix !== null && postfix !== void 0 ? postfix : ''), onValueRequest: onValueRequest, disabled: disabled }))),
     }), [copyButtonRef, disabled, onValueRequest, showCopyButton, size, valueToCopy, prefix, postfix]);
 }

package/dist/esm/{types.d.ts → types/allFields.d.ts}

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { DroplistProps, SelectionSingleState } from '@snack-uikit/list';
 import { ValueOf } from '@snack-uikit/utils';
-import { BUTTON_VARIANT, CONTAINER_VARIANT, VALIDATION_STATE } from './constants';
+import { BUTTON_VARIANT, CONTAINER_VARIANT, VALIDATION_STATE } from '../constants';
 export type ValidationState = ValueOf<typeof VALIDATION_STATE>;
 export type ContainerVariant = ValueOf<typeof CONTAINER_VARIANT>;
 export type ButtonVariant = ValueOf<typeof BUTTON_VARIANT>;

package/dist/esm/types/dateFields.d.ts

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

package/dist/esm/types/index.d.ts

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

package/dist/esm/types/index.js

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

package/dist/esm/utils/dateFields.d.ts

@@ -0,0 +1,10 @@
+import { SlotKey } from '../constants';
+import { Mode, NoSecondsMode, TimeMode } from '../types';
+export declare function getSlotKeyFromIndexHandler(mode: Mode | TimeMode | NoSecondsMode): (index: number | null) => SlotKey | undefined;
+export declare function getNextSlotKeyHandler(mode: Mode | TimeMode | NoSecondsMode): (slotKey: SlotKey | undefined) => SlotKey;
+export declare function getPrevSlotKeyHandler(mode: Mode | TimeMode | NoSecondsMode): (slotKey: SlotKey | undefined) => SlotKey;
+/**
+ * Преобразует строковое значение поля FieldDate в тип Date
+ * @function  helper
+ */
+export declare function parseDate(value: string): Date | undefined;

package/dist/esm/utils/dateFields.js

@@ -0,0 +1,59 @@
+import { SLOT_ORDER, SLOTS } from '../constants';
+export function getSlotKeyFromIndexHandler(mode) {
+    return (index) => {
+        if (index !== null) {
+            for (const key in SLOTS[mode]) {
+                if (index >= SLOTS[mode][key].start && index <= SLOTS[mode][key].end) {
+                    return key;
+                }
+            }
+        }
+        return undefined;
+    };
+}
+export function getNextSlotKeyHandler(mode) {
+    const order = SLOT_ORDER[mode];
+    return (slotKey) => {
+        const defaultIndex = order.length - 1;
+        const defaultSLot = order[defaultIndex];
+        const currentIndex = order.indexOf(slotKey);
+        return currentIndex === -1 || currentIndex === defaultIndex ? defaultSLot : order[currentIndex + 1];
+    };
+}
+export function getPrevSlotKeyHandler(mode) {
+    const order = SLOT_ORDER[mode];
+    return (slotKey) => {
+        const defaultIndex = 0;
+        const defaultSLot = order[defaultIndex];
+        const currentIndex = order.indexOf(slotKey);
+        return currentIndex === -1 || currentIndex === defaultIndex ? defaultSLot : order[currentIndex - 1];
+    };
+}
+const DATE_STUB = new Date();
+/**
+ * Преобразует строковое значение поля FieldDate в тип Date
+ * @function  helper
+ */
+export function parseDate(value) {
+    if (!value) {
+        return undefined;
+    }
+    const splittedValue = value.split(', ');
+    const date = splittedValue[0];
+    let time = splittedValue[1];
+    let [day, month, year] = date.split('.').map(Number);
+    month -= 1;
+    if (date.includes(':')) {
+        time = date;
+    }
+    if (time) {
+        if (isNaN(year) || isNaN(month) || isNaN(day)) {
+            year = DATE_STUB.getFullYear();
+            month = DATE_STUB.getMonth();
+            day = DATE_STUB.getDay();
+        }
+        const [hours = 0, minutes = 0, seconds = 0] = time.split(':').map(str => { var _a; return (_a = Number(str)) !== null && _a !== void 0 ? _a : 0; });
+        return new Date(year, month, day, hours, minutes, seconds);
+    }
+    return new Date(year, month, day);
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,20 +36,20 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.18.0",
-    "@snack-uikit/calendar": "0.9.0",
-    "@snack-uikit/color-picker": "0.2.0",
-    "@snack-uikit/divider": "3.1.0",
-    "@snack-uikit/dropdown": "0.3.0",
-    "@snack-uikit/icons": "0.23.0",
-    "@snack-uikit/input-private": "4.1.0",
-    "@snack-uikit/list": "0.19.0",
-    "@snack-uikit/scroll": "0.7.0",
-    "@snack-uikit/skeleton": "0.4.0",
-    "@snack-uikit/slider": "0.2.0",
-    "@snack-uikit/tag": "0.10.0",
-    "@snack-uikit/tooltip": "0.14.0",
-    "@snack-uikit/truncate-string": "0.5.0",
+    "@snack-uikit/button": "0.19.1",
+    "@snack-uikit/calendar": "0.11.0",
+    "@snack-uikit/color-picker": "0.3.1",
+    "@snack-uikit/divider": "3.2.0",
+    "@snack-uikit/dropdown": "0.4.0",
+    "@snack-uikit/icons": "0.24.0",
+    "@snack-uikit/input-private": "4.2.1",
+    "@snack-uikit/list": "0.21.0",
+    "@snack-uikit/scroll": "0.9.0",
+    "@snack-uikit/skeleton": "0.5.0",
+    "@snack-uikit/slider": "0.3.1",
+    "@snack-uikit/tag": "0.11.1",
+    "@snack-uikit/tooltip": "0.15.0",
+    "@snack-uikit/truncate-string": "0.6.0",
     "@snack-uikit/utils": "3.5.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "3.3.3",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
+  "gitHead": "b7163c6f939105eb34cabec64c9e983ac7958c26"
 }