@cloud-ru/uikit-product-mobile-fields 0.11.24 → 0.11.26

package/dist/esm/helperComponents/ItemContent/styles.module.css

@@ -0,0 +1,122 @@
+.headline{
+  display:flex;
+}
+
+.label{
+  overflow:hidden;
+  flex:1;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.caption{
+  overflow:hidden;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.content{
+  overflow:hidden;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}
+.content[data-size=s] .headline{
+  gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=s] .label{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+  display:flex;
+  align-items:center;
+}
+.content[data-size=s] .caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=s] .description{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=m] .headline{
+  gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=m] .label{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  display:flex;
+  align-items:center;
+}
+.content[data-size=m] .caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=m] .description{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=l] .headline{
+  gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=l] .label{
+  font-family:var(--sans-body-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+  display:flex;
+  align-items:center;
+}
+.content[data-size=l] .caption{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.content[data-size=l] .description{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.content[data-disabled] .label,
+.content[data-disabled] .description,
+.content[data-disabled] .caption{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}

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

@@ -0,0 +1,3 @@
+export * from './FieldContainerPrivate';
+export * from './ButtonCopyValue';
+export * from './ItemContent';

package/dist/esm/helperComponents/index.js

@@ -0,0 +1,3 @@
+export * from './FieldContainerPrivate';
+export * from './ButtonCopyValue';
+export * from './ItemContent';

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/hooks/dateHandlers/useDateField.d.ts

@@ -0,0 +1,28 @@
+import { ChangeEvent, FocusEventHandler, KeyboardEvent, RefObject } from 'react';
+import { TimePickerProps } from '@snack-uikit/calendar';
+import { FocusSlot } from '../../constants';
+import { Mode, TimeMode } from '../../types';
+type BaseProps = {
+    inputRef: RefObject<HTMLInputElement>;
+    readonly?: boolean;
+    locale?: Intl.Locale;
+    setIsOpen(v: boolean): void;
+    showSeconds?: boolean;
+};
+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;
+    setInputFocus: (focusSlot?: FocusSlot) => void;
+    value: string | undefined;
+    mask: string;
+    handleBlur: FocusEventHandler<HTMLInputElement>;
+};
+export {};

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

@@ -0,0 +1,194 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { isBrowser } from '@snack-uikit/utils';
+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 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 || focusSlotKey;
+            inputRef.current.focus();
+            return;
+        }
+        const focusSlotValue = focusSlot || focusSlotRef.current;
+        if (isLikeDate() && focusSlotValue === focusSlotKey) {
+            return;
+        }
+        if (!inputRef.current.value) {
+            inputRef.current.value = mask;
+            setFocus(focusSlotKey);
+            return;
+        }
+        if (focusSlot !== 'auto') {
+            setFocus(focusSlotValue);
+            return;
+        }
+        const slotKey = getSlotKeyFromIndex(inputRef.current.selectionStart);
+        if (slotKey) {
+            const { start, end } = slotsInfo[slotKey];
+            inputRef.current.setSelectionRange(start, end);
+        }
+    }, [inputRef, readonly, isLikeDate, focusSlotKey, getSlotKeyFromIndex, mask, setFocus, slotsInfo]);
+    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) || ''));
+    };
+    const checkInputAndGoNext = useCallback((slotKey) => {
+        var _a, _b;
+        if (slotKey === slotOrder[slotOrder.length - 1] && tryToCompleteInput()) {
+            return;
+        }
+        if (isValidInput()) {
+            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 : '');
+                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 : '');
+                setFocus(SlotKey.Day);
+                return;
+            default:
+                setFocus(getNextSlotKey(slotKey));
+        }
+    }, [slotOrder, tryToCompleteInput, isValidInput, setFocus, getNextSlotKey, updateSlot, slotsPlaceholder]);
+    const handleKeyDown = useCallback((e) => {
+        var _a;
+        if (inputRef.current && !readonly) {
+            if (e.key !== 'Tab') {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            if (e.key !== 'ArrowDown') {
+                setIsOpen(false);
+            }
+            if (e.key === 'Escape') {
+                inputRef.current.blur();
+                return;
+            }
+            if (e.key === 'Enter') {
+                tryToCompleteInput();
+            }
+            const clickIndex = inputRef.current.selectionStart;
+            const slotKey = getSlotKeyFromIndex(clickIndex);
+            if (slotKey) {
+                const value = getSlot(slotKey);
+                const { max } = slotsInfo[slotKey];
+                const numberValue = Number(value) || 0;
+                if (e.key === 'ArrowRight') {
+                    if (isAllSelected() || slotKey === slotOrder[slotOrder.length - 1]) {
+                        inputRef.current.selectionStart = inputRef.current.value.length;
+                        return;
+                    }
+                    setFocus(getNextSlotKey(slotKey));
+                    return;
+                }
+                if (e.key === 'ArrowLeft') {
+                    setFocus(getPrevSlotKey(slotKey));
+                    return;
+                }
+                if (e.key === 'Backspace') {
+                    if (isAllSelected()) {
+                        inputRef.current.value = mask;
+                        setFocus(focusSlotKey);
+                    }
+                    else {
+                        updateSlot(slotKey, (_a = slotsPlaceholder[slotKey]) !== null && _a !== void 0 ? _a : '');
+                    }
+                }
+                if (/^\d+$/.test(e.key)) {
+                    const slotValue = parseInt(numberValue.toString() + e.key, 10) || 0;
+                    const valueLength = slotValue.toString().length;
+                    const maxLength = max.toString().length;
+                    if (valueLength < maxLength) {
+                        slotValue && updateSlot(slotKey, slotValue);
+                        if (slotValue * 10 > max) {
+                            checkInputAndGoNext(slotKey);
+                        }
+                    }
+                    else if (valueLength > maxLength) {
+                        if (Number(e.key) * 10 > max) {
+                            updateSlot(slotKey, e.key);
+                            checkInputAndGoNext(slotKey);
+                        }
+                        else {
+                            Number(e.key) && updateSlot(slotKey, e.key);
+                        }
+                    }
+                    else {
+                        if (slotValue <= max) {
+                            updateSlot(slotKey, slotValue);
+                            checkInputAndGoNext(slotKey);
+                        }
+                        else {
+                            if (Number(e.key) * 10 > max) {
+                                updateSlot(slotKey, e.key);
+                                checkInputAndGoNext(slotKey);
+                            }
+                            else {
+                                Number(e.key) && updateSlot(slotKey, e.key);
+                            }
+                        }
+                    }
+                }
+                const newDate = parseDate(isLikeDate() ? inputRef.current.value : '');
+                onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
+            }
+        }
+    }, [
+        inputRef,
+        readonly,
+        getSlotKeyFromIndex,
+        setIsOpen,
+        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 = focusSlotKey;
+    }, [inputRef, mask, readonly, focusSlotKey]);
+    return {
+        handleKeyDown,
+        handleChange,
+        handleClick,
+        setInputFocus,
+        value: (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value,
+        mask,
+        handleBlur,
+    };
+}

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/dateHandlers/useFocusHandlers.d.ts

@@ -0,0 +1,15 @@
+import { FocusEvent } from 'react';
+type Options = {
+    onFocusByKeyboard?: (e: FocusEvent<HTMLInputElement>) => void;
+    onFocusByClick?: (e: FocusEvent<HTMLInputElement>) => void;
+};
+/**
+ * Позволяет разделить обработку получения фокуса в результате клика или с клавиатуры.
+ * Основано на том факте что событию фокуса в результате клика предшествует событие onMouseDown.
+ */
+export declare function useFocusHandlers({ onFocusByKeyboard, onFocusByClick }: Options): {
+    onFocus: (e: FocusEvent<HTMLInputElement>) => void;
+    onBlur: () => void;
+    onMouseDown: () => void;
+};
+export {};

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

@@ -0,0 +1,33 @@
+import { useCallback, useRef } from 'react';
+/**
+ * Позволяет разделить обработку получения фокуса в результате клика или с клавиатуры.
+ * Основано на том факте что событию фокуса в результате клика предшествует событие onMouseDown.
+ */
+export function useFocusHandlers({ onFocusByKeyboard, onFocusByClick }) {
+    const isFocused = useRef(false);
+    const isMouseDown = useRef(false);
+    const onFocus = useCallback((e) => {
+        isFocused.current = true;
+        if (isMouseDown.current) {
+            onFocusByClick === null || onFocusByClick === void 0 ? void 0 : onFocusByClick(e);
+            isMouseDown.current = false;
+        }
+        else {
+            onFocusByKeyboard === null || onFocusByKeyboard === void 0 ? void 0 : onFocusByKeyboard(e);
+        }
+    }, [isMouseDown, onFocusByClick, onFocusByKeyboard]);
+    const onBlur = useCallback(() => {
+        isFocused.current = false;
+        isMouseDown.current = false;
+    }, []);
+    const onMouseDown = useCallback(() => {
+        if (!isFocused.current) {
+            isMouseDown.current = true;
+        }
+    }, [isFocused]);
+    return {
+        onFocus,
+        onBlur,
+        onMouseDown,
+    };
+}

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

@@ -0,0 +1,6 @@
+type Handler<T> = (e: T) => void;
+/**
+ * Вызывает обработчики события по порядку
+ */
+export declare function useHandlers<T>(handlers: (Handler<T> | undefined)[]): (e: T) => void;
+export {};

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

@@ -0,0 +1,9 @@
+import { useCallback } from 'react';
+/**
+ * Вызывает обработчики события по порядку
+ */
+export function useHandlers(handlers) {
+    return useCallback((e) => {
+        handlers.forEach(handler => handler === null || handler === void 0 ? void 0 : handler(e));
+    }, [handlers]);
+}

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

@@ -0,0 +1,5 @@
+export * from './dateHandlers';
+export * from './useCopyButton';
+export * from './usePostfix';
+export * from './usePrefix';
+export * from './useValueControl';

package/dist/esm/hooks/index.js

@@ -0,0 +1,5 @@
+export * from './dateHandlers';
+export * from './useCopyButton';
+export * from './usePostfix';
+export * from './usePrefix';
+export * from './useValueControl';

package/dist/esm/hooks/styles.module.css

@@ -0,0 +1,13 @@
+.prefix{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.prefix[data-disabled]{
+  opacity:var(--opacity-a056, 0.56);
+}
+
+.postfix{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.postfix[data-disabled]{
+  opacity:var(--opacity-a056, 0.56);
+}

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

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+import { ButtonProps, Size } from '@snack-uikit/input-private';
+import { AsyncValueRequest } from '../types';
+type UseCopyButtonProps = {
+    copyButtonRef: RefObject<HTMLButtonElement>;
+    showCopyButton: boolean;
+    valueToCopy: string;
+    size: Size;
+    onValueRequest?(): AsyncValueRequest;
+    disabled?: boolean;
+    prefix?: string;
+    postfix?: string;
+};
+export declare function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy, onValueRequest, disabled, prefix, postfix, }: UseCopyButtonProps): ButtonProps;
+export {};

package/dist/esm/hooks/useCopyButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { BUTTON_SIZE_MAP } from '@snack-uikit/input-private';
+import { ButtonCopyValue } from '../helperComponents';
+export function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy, onValueRequest, disabled, prefix = '', postfix = '', }) {
+    return useMemo(() => ({
+        id: 'copy',
+        active: true,
+        ref: copyButtonRef,
+        show: showCopyButton,
+        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/hooks/usePostfix.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { InactiveItem } from '@snack-uikit/input-private';
+export declare function usePostfix({ postfix, disabled }: {
+    postfix?: ReactNode;
+    disabled?: boolean;
+}): InactiveItem;

package/dist/esm/hooks/usePostfix.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import styles from './styles.module.css';
+export function usePostfix({ postfix, disabled }) {
+    return useMemo(() => ({
+        id: 'postfix',
+        active: false,
+        show: Boolean(postfix),
+        render: props => (_jsx("div", Object.assign({}, props, { className: styles.postfix, "data-test-id": 'field-postfix', "data-disabled": disabled || undefined, children: postfix }))),
+    }), [disabled, postfix]);
+}

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { InactiveItem } from '@snack-uikit/input-private';
+export declare function usePrefix({ prefix, disabled }: {
+    prefix?: ReactNode;
+    disabled?: boolean;
+}): InactiveItem;

package/dist/esm/hooks/usePrefix.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import styles from './styles.module.css';
+export function usePrefix({ prefix, disabled }) {
+    return useMemo(() => ({
+        id: 'prefix',
+        active: false,
+        show: Boolean(prefix),
+        render: props => (_jsx("div", Object.assign({}, props, { "data-test-id": 'field-prefix', className: styles.prefix, "data-disabled": disabled || undefined, children: prefix }))),
+    }), [disabled, prefix]);
+}

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

@@ -0,0 +1,7 @@
+type UseValueControl<TValue> = {
+    value?: TValue;
+    onChange?(value: TValue): void;
+    defaultValue?: TValue;
+};
+export declare function useValueControl<TValue>({ value, onChange, defaultValue }: UseValueControl<TValue>): readonly [TValue | undefined, (value: any, ...args: any[]) => any];
+export {};

package/dist/esm/hooks/useValueControl.js

@@ -0,0 +1,7 @@
+import { useUncontrolledProp } from 'uncontrollable';
+export function useValueControl({ value, onChange, defaultValue }) {
+    return useUncontrolledProp(value, defaultValue, (newValue) => {
+        const newState = typeof newValue === 'function' ? newValue(value) : newValue;
+        onChange === null || onChange === void 0 ? void 0 : onChange(newState);
+    });
+}