@cloud-ru/ds-uikit-product-fields-predefined 1.0.0

package/dist/esm/components/FieldChat/components/FieldSubmitButton/FieldSubmitButton.d.ts

@@ -0,0 +1,18 @@
+export type FieldSubmitButtonProps = {
+    /** Активна ли отправка (есть валидное значение или прикреплённые файлы) */
+    active: boolean;
+    /** Колбек клика по кнопке отправки */
+    handleClick(): void;
+    /** Дополнительный класс */
+    className?: string;
+    /** Растянуть на всю ширину */
+    fullWidth?: boolean;
+    /** Показывать тултип над активной кнопкой */
+    showTooltip?: boolean;
+    /** Идентификатор для тестов */
+    'data-test-id'?: string;
+};
+/**
+ * Кнопка отправки сообщения. В активном состоянии — `submit` с тултипом, иначе — disabled.
+ */
+export declare function FieldSubmitButton({ active, handleClick, className, fullWidth, showTooltip, 'data-test-id': dataTestId, }: FieldSubmitButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/FieldChat/components/FieldSubmitButton/FieldSubmitButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { APPEARANCE, Button, VIEW } from '@cloud-ru/ds-button';
+import { ArrowUpSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { fieldsPredefinedLocale } from '../../../../locale/index.js';
+import styles from './styles.module.css';
+/**
+ * Кнопка отправки сообщения. В активном состоянии — `submit` с тултипом, иначе — disabled.
+ */
+export function FieldSubmitButton({ active, handleClick, className, fullWidth, showTooltip = true, 'data-test-id': dataTestId, }) {
+    const { t } = fieldsPredefinedLocale.useTranslations();
+    if (active) {
+        return (_jsx(Tooltip, { tip: t('FieldAi.submit.tooltip'), hoverDelayOpen: 600, open: showTooltip ? undefined : false, triggerClassName: styles.tooltipTrigger, children: _jsx(Button, { fullWidth: fullWidth, icon: _jsx(ArrowUpSVG, {}), size: 's', view: VIEW.Filled, appearance: APPEARANCE.Primary, type: 'submit', onClick: handleClick, className: className, "data-test-id": dataTestId }) }));
+    }
+    return (_jsx(Button, { icon: _jsx(ArrowUpSVG, {}), size: 's', view: VIEW.Filled, appearance: APPEARANCE.Primary, disabled: true, className: className, fullWidth: fullWidth, "data-test-id": dataTestId }));
+}

package/dist/esm/components/FieldChat/components/FieldSubmitButton/index.d.ts

@@ -0,0 +1 @@
+export * from './FieldSubmitButton.js';

package/dist/esm/components/FieldChat/components/FieldSubmitButton/index.js

@@ -0,0 +1 @@
+export * from './FieldSubmitButton.js';

package/dist/esm/components/FieldChat/components/FieldSubmitButton/styles.module.css

@@ -0,0 +1,3 @@
+.tooltipTrigger{
+  display:flex;
+}

package/dist/esm/components/FieldChat/components/TextAreaActionsFooter/TextAreaActionsFooter.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type TextAreaActionsFooterProps = {
+    /** Контент слева (например, счётчик символов) */
+    left?: ReactNode;
+    /** Контент справа (кнопки действий) */
+    right?: ReactNode;
+};
+export declare function TextAreaActionsFooter({ left, right }: TextAreaActionsFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/FieldChat/components/TextAreaActionsFooter/TextAreaActionsFooter.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './styles.module.css';
+export function TextAreaActionsFooter({ left, right }) {
+    return (_jsxs("div", { className: styles.actionsFooter, children: [_jsx("div", { className: styles.actionsLeft, children: left }), _jsx("div", { className: styles.actionsRight, children: right })] }));
+}

package/dist/esm/components/FieldChat/components/TextAreaActionsFooter/index.d.ts

@@ -0,0 +1 @@
+export * from './TextAreaActionsFooter.js';

package/dist/esm/components/FieldChat/components/TextAreaActionsFooter/index.js

@@ -0,0 +1 @@
+export * from './TextAreaActionsFooter.js';

package/dist/esm/components/FieldChat/components/TextAreaActionsFooter/styles.module.css

@@ -0,0 +1,25 @@
+.actionsFooter{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  justify-content:space-between;
+  width:100%;
+  padding-bottom:var(--sn-primitive-dimension-8, 8px);
+}
+
+.actionsLeft{
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+}
+
+.actionsRight{
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:flex-end;
+  width:100%;
+  padding-right:var(--sn-primitive-dimension-8, 8px);
+}

package/dist/esm/components/FieldChat/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FieldChat.js';
+export * from './types.js';

package/dist/esm/components/FieldChat/index.js

@@ -0,0 +1,2 @@
+export * from './FieldChat.js';
+export * from './types.js';

package/dist/esm/components/FieldChat/styles.module.css

@@ -0,0 +1,14 @@
+.fieldChat{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-12, 12px);
+  width:100%;
+  min-width:0;
+}
+.fieldChat[data-layout-type=mobile]{
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
+.uploadTooltip{
+  display:flex;
+}

package/dist/esm/components/FieldChat/types.d.ts

@@ -0,0 +1,14 @@
+import { AttachmentSquareProps } from '@cloud-ru/ds-attachment';
+import { FileUploadProps } from '@cloud-ru/ds-dropzone';
+import { FieldTextAreaProps } from '@cloud-ru/ds-fields';
+export type FieldChatProps = Omit<FieldTextAreaProps, 'placeholder' | 'hint' | 'label' | 'required' | 'size' | 'spellCheck' | 'footer' | 'minRows' | 'maxRows' | 'showCopyButton' | 'onKeyDown'> & {
+    /** Колбек действия при отправке */
+    handleSubmit(value: string): void;
+    /** Прикрепление файлов */
+    attachment?: Pick<FileUploadProps, 'onFilesUpload' | 'accept'> & {
+        /** Список загруженных файлов */
+        files?: File[];
+        /** Колбек действия при удалении прикреплённого файла */
+        onFileDelete: AttachmentSquareProps['onDelete'];
+    };
+};

package/dist/esm/components/FieldChat/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/FieldCode/FieldCode.d.ts

@@ -0,0 +1,30 @@
+import { FieldDecoratorProps } from '@cloud-ru/ds-field-decorator';
+import { ResendCodeProps } from './components/index.js';
+import { UseCodeInputParams } from './hooks/index.js';
+export type FieldCodeRef = {
+    /** Перенести фокус на ячейку с индексом `index` */
+    moveFocus(index: number): void;
+    /** Убрать фокус со всех ячеек кода */
+    blurFields(): void;
+    /** Сбросить значение кода */
+    resetCode(): void;
+};
+/** Собственные пропсы `FieldCode` */
+export type FieldCodeOwnProps = {
+    /** CSS-класс компонента */
+    className?: string;
+    /** CSS-класс ячейки кода */
+    cellClassName?: string;
+    /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет разрыв) */
+    spacing?: number[];
+    /** Подсветить пустые символы кода */
+    showEmptyChars?: boolean;
+    /** Компонент отправки нового кода */
+    resendCode?: ResendCodeProps;
+    /** Сообщение при неверном коде, если не передан свой `error` */
+    invalidCode?: string;
+    /** Растягивать ячейки на всю доступную ширину; иначе фиксированная ширина по `size` */
+    stretchCells?: boolean;
+};
+export type FieldCodeProps = FieldCodeOwnProps & Omit<UseCodeInputParams, 'moveFocus'> & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error' | 'data-test-id'>;
+export declare const FieldCode: import("react").ForwardRefExoticComponent<FieldCodeOwnProps & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "data-test-id" | "label" | "error" | "size" | "disabled"> & import("react").RefAttributes<FieldCodeRef>>;

package/dist/esm/components/FieldCode/FieldCode.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { FieldDecorator } from '@cloud-ru/ds-field-decorator';
+import cn from 'classnames';
+import { forwardRef, useImperativeHandle } from 'react';
+import { Cell, ResendCode } from './components/index.js';
+import { useCodeInput, useFieldCodeOverflow, useFieldHelpers, useFocusCell } from './hooks/index.js';
+import styles from './styles.module.css';
+import { getCellValidationState } from './utils.js';
+export const FieldCode = forwardRef(function FieldCode(props, ref) {
+    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size = 'm', disabled, label, error, invalidCode, showEmptyChars, resendCode, stretchCells = false, 'data-test-id': dataTestId, } = props;
+    const { layoutType } = useAdaptiveLayout();
+    const isMobile = isMobileLayout(layoutType);
+    const { inputsRef, moveFocus, blurFields } = useFocusCell(codeLength);
+    const { code, cellHandlers, onChangeCode } = useCodeInput({ value, onChange, codeLength, moveFocus, onComplete });
+    const { resetCode } = useFieldHelpers({
+        onChangeCode,
+        isMobile,
+        moveFocus,
+        showEmptyChars,
+        code,
+        codeLength,
+    });
+    const { rootRef, codeContainerRef, hasOverflow } = useFieldCodeOverflow();
+    useImperativeHandle(ref, () => ({
+        moveFocus,
+        blurFields,
+        resetCode,
+    }), [moveFocus, blurFields, resetCode]);
+    const resolvedError = error ?? invalidCode;
+    return (_jsxs("div", { ref: rootRef, className: cn(styles.fieldCode, hasOverflow && styles.fieldCodeScrollable, className), "data-size": size, "data-disabled": disabled || undefined, "data-stretch-cells": stretchCells || undefined, ...(dataTestId ? { 'data-test-id': dataTestId } : undefined), children: [_jsx(FieldDecorator, { className: cn(!hasOverflow && styles.fieldDecorator), label: label, disabled: disabled, size: size, error: resolvedError, children: _jsx("div", { ref: codeContainerRef, className: styles.codeContainer, "data-size": size, "data-stretch-cells": stretchCells || undefined, children: code.map((char, index) => (_jsx(Cell, { ref: inputRef => {
+                            if (inputRef) {
+                                inputsRef.current[index] = inputRef;
+                            }
+                        }, className: cn(spacing?.includes(index) && styles.cellSpacing, cellClassName), stretchCells: stretchCells, size: size, value: char, disabled: disabled, autoComplete: index === 0 ? 'one-time-code' : undefined, onKeyDown: e => cellHandlers.onKeyDown(e, index), onPaste: cellHandlers.onPaste, onChange: inputValue => cellHandlers.onChange(inputValue, index), validationState: getCellValidationState(char, showEmptyChars, Boolean(resolvedError)) }, index))) }) }), resendCode ? _jsx(ResendCode, { ...resendCode, size: resendCode.size ?? size }) : null] }));
+});

package/dist/esm/components/FieldCode/components/Cell/Cell.d.ts

@@ -0,0 +1,7 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+export declare const Cell: import("react").ForwardRefExoticComponent<{
+    /** CSS-класс ячейки кода */
+    className?: string;
+    /** Растягивать ячейку на всю доступную ширину */
+    stretchCells?: boolean;
+} & Pick<FieldComboProps, "validationState" | "size" | "disabled" | "onKeyDown" | "value" | "onChange" | "autoComplete" | "onPaste"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/components/FieldCode/components/Cell/Cell.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldCombo } from '@cloud-ru/ds-fields';
+import cn from 'classnames';
+import { forwardRef } from 'react';
+import { TEST_IDS } from '../../../../constants.js';
+import { ZERO_WIDTH_SPACE } from '../../constants.js';
+import styles from './styles.module.css';
+export const Cell = forwardRef(function Cell(props, ref) {
+    const { className, size, stretchCells, value, ...fieldCellProps } = props;
+    return (_jsx(FieldCombo, { inputMode: 'numeric', ref: ref, className: cn(styles.cell, stretchCells && styles.stretch, className), "data-size": size, "data-test-id": TEST_IDS.fieldCodeCell, showClearButton: false, value: value === ZERO_WIDTH_SPACE ? '' : value, size: size, ...fieldCellProps }));
+});

package/dist/esm/components/FieldCode/components/Cell/index.d.ts

@@ -0,0 +1 @@
+export * from './Cell.js';

package/dist/esm/components/FieldCode/components/Cell/index.js

@@ -0,0 +1 @@
+export * from './Cell.js';

package/dist/esm/components/FieldCode/components/Cell/styles.module.css

@@ -0,0 +1,19 @@
+.cell{
+  flex-shrink:0;
+}
+.cell input{
+  text-align:center;
+}
+.cell[data-size=s]:not(.stretch){
+  width:var(--sn-primitive-dimension-32, 32px);
+}
+.cell[data-size=m]:not(.stretch){
+  width:var(--sn-primitive-dimension-40, 40px);
+}
+.cell[data-size=l]:not(.stretch){
+  width:var(--sn-primitive-dimension-52, 52px);
+}
+.cell.stretch{
+  flex:1 1 0;
+  min-width:0;
+}

package/dist/esm/components/FieldCode/components/ResendCode/ResendCode.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+export type ResendCodeProps = {
+    /** Колбек отправки нового кода */
+    onResend(): void;
+    /** Количество секунд до следующей отправки кода */
+    secondsToNextResend: number;
+} & Pick<ButtonProps, 'size' | 'disabled'>;
+export declare function ResendCode(props: ResendCodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/FieldCode/components/ResendCode/ResendCode.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { APPEARANCE, Button, ICON_POSITION, VIEW } from '@cloud-ru/ds-button';
+import { UpdateSVG } from '@cloud-ru/ds-icons/interface/system';
+import { TEST_IDS } from '../../../../constants.js';
+import { fieldsPredefinedLocale } from '../../../../locale/index.js';
+import { formatSecondsAsMmSs } from './utils.js';
+export function ResendCode(props) {
+    const { onResend, secondsToNextResend, disabled, size = 'm', ...buttonProps } = props;
+    const { t } = fieldsPredefinedLocale.useTranslations();
+    const isResendCodeWithVia = secondsToNextResend > 0;
+    return (_jsx(Button, { view: VIEW.Function, appearance: APPEARANCE.Neutral, label: isResendCodeWithVia
+            ? t('FieldCode.resendCodeButtons.resendCodeWithVia', {
+                timer: formatSecondsAsMmSs(secondsToNextResend),
+            })
+            : t('FieldCode.resendCodeButtons.resendCode'), onClick: onResend, icon: _jsx(UpdateSVG, {}), iconPosition: ICON_POSITION.Before, disabled: isResendCodeWithVia || disabled, size: size, "data-test-id": TEST_IDS.fieldCodeResend, ...buttonProps }));
+}

package/dist/esm/components/FieldCode/components/ResendCode/index.d.ts

@@ -0,0 +1 @@
+export * from './ResendCode.js';

package/dist/esm/components/FieldCode/components/ResendCode/index.js

@@ -0,0 +1 @@
+export * from './ResendCode.js';

package/dist/esm/components/FieldCode/components/ResendCode/utils.d.ts

@@ -0,0 +1 @@
+export declare function formatSecondsAsMmSs(totalSeconds: number): string;

package/dist/esm/components/FieldCode/components/ResendCode/utils.js

@@ -0,0 +1,5 @@
+export function formatSecondsAsMmSs(totalSeconds) {
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}

package/dist/esm/components/FieldCode/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Cell/index.js';
+export * from './ResendCode/index.js';

package/dist/esm/components/FieldCode/components/index.js

@@ -0,0 +1,2 @@
+export * from './Cell/index.js';
+export * from './ResendCode/index.js';

package/dist/esm/components/FieldCode/constants.d.ts

@@ -0,0 +1,2 @@
+/** Заполнитель пустой ячейки кода — сохраняет позицию символа в строке значения. */
+export declare const ZERO_WIDTH_SPACE = "\u200B";

package/dist/esm/components/FieldCode/constants.js

@@ -0,0 +1,2 @@
+/** Заполнитель пустой ячейки кода — сохраняет позицию символа в строке значения. */
+export const ZERO_WIDTH_SPACE = '\u200B';

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

@@ -0,0 +1,5 @@
+export * from './useCodeInput.js';
+export * from './useFieldCodeOverflow.js';
+export * from './useFieldCodeValidate.js';
+export * from './useFieldHelpers.js';
+export * from './useFocusCell.js';

package/dist/esm/components/FieldCode/hooks/index.js

@@ -0,0 +1,5 @@
+export * from './useCodeInput.js';
+export * from './useFieldCodeOverflow.js';
+export * from './useFieldCodeValidate.js';
+export * from './useFieldHelpers.js';
+export * from './useFocusCell.js';

package/dist/esm/components/FieldCode/hooks/useCodeInput.d.ts

@@ -0,0 +1,22 @@
+import { ClipboardEvent, KeyboardEvent } from 'react';
+export type UseCodeInputParams = {
+    /** Количество цифр в коде (целое ≥ 1) */
+    codeLength: number;
+    /** Значение кода */
+    value?: string;
+    /** Колбек изменения значения */
+    onChange?(code: string): void;
+    /** Функция переноса фокуса на ячейку с индексом `index` */
+    moveFocus(index: number): void;
+    /** Колбек ввода всех символов кода */
+    onComplete?(code: string): void;
+};
+export declare function useCodeInput(params: UseCodeInputParams): {
+    code: string[];
+    cellHandlers: {
+        onKeyDown: (e: KeyboardEvent<HTMLInputElement>, index: number) => void;
+        onPaste: (e: ClipboardEvent<HTMLInputElement>) => void;
+        onChange: (code: string, index: number) => void;
+    };
+    onChangeCode: (value: any, ...args: any[]) => any;
+};

package/dist/esm/components/FieldCode/hooks/useCodeInput.js

@@ -0,0 +1,94 @@
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { useCallback, useEffect } from 'react';
+import { ZERO_WIDTH_SPACE } from '../constants.js';
+import { isNumberChar, isStringCodeLength, isZeroWidthSpace } from '../utils.js';
+import { useRefState } from './useRefState.js';
+const buildCodeArray = (str, codeLength) => Array.from({ length: codeLength }, (_, idx) => str[idx] || ZERO_WIDTH_SPACE);
+export function useCodeInput(params) {
+    const { value: valueProp, onChange: onChangeProp, codeLength, moveFocus, onComplete } = params;
+    const [value = '', onChange] = useValueControl({
+        value: valueProp,
+        onChange: onChangeProp,
+        defaultValue: '',
+    });
+    const codeRef = useRefState(buildCodeArray(value, codeLength));
+    const updateCodeByIndex = useCallback((index, newChar) => {
+        codeRef.current[index] = newChar;
+        onChange?.(codeRef.current.join(''));
+    }, [codeRef, onChange]);
+    const updateFullCode = useCallback((newCode) => {
+        codeRef.current = newCode.split('');
+        onChange?.(newCode);
+        moveFocus(codeLength - 1);
+        onComplete?.(newCode);
+    }, [codeLength, codeRef, moveFocus, onChange, onComplete]);
+    const handleAfterCellUpdate = useCallback((index) => {
+        const normalizedCode = codeRef.current.join('');
+        const isLastInput = index === codeLength - 1;
+        const isAllInputsFilled = isStringCodeLength(normalizedCode, codeLength);
+        if (!isLastInput) {
+            moveFocus(index + 1);
+        }
+        else if (isAllInputsFilled) {
+            onComplete?.(normalizedCode);
+        }
+    }, [codeLength, codeRef, moveFocus, onComplete]);
+    const deleteChar = useCallback((index) => {
+        if (codeRef.current[index] && !isZeroWidthSpace(codeRef.current[index])) {
+            updateCodeByIndex(index, ZERO_WIDTH_SPACE);
+        }
+        else if (index > 0) {
+            moveFocus(index - 1);
+        }
+    }, [codeRef, moveFocus, updateCodeByIndex]);
+    const onAutoCompleteInput = useCallback((code, index) => {
+        if (isStringCodeLength(code, codeLength)) {
+            updateFullCode(code);
+            return;
+        }
+        if (!isNumberChar(code)) {
+            return;
+        }
+        updateCodeByIndex(index, code);
+        handleAfterCellUpdate(index);
+    }, [codeLength, handleAfterCellUpdate, updateCodeByIndex, updateFullCode]);
+    const onKeyDown = useCallback((e, index) => {
+        switch (e.key) {
+            case 'ArrowLeft':
+                moveFocus(index - 1);
+                break;
+            case 'ArrowRight':
+                moveFocus(index + 1);
+                break;
+            case 'Backspace':
+                deleteChar(index);
+                break;
+            default:
+                if (isNumberChar(e.key)) {
+                    e.preventDefault();
+                    updateCodeByIndex(index, e.key);
+                    handleAfterCellUpdate(index);
+                }
+                break;
+        }
+    }, [deleteChar, handleAfterCellUpdate, moveFocus, updateCodeByIndex]);
+    const onPaste = useCallback((e) => {
+        const codeInput = e?.clipboardData.getData('text') ?? '';
+        if (!isStringCodeLength(codeInput, codeLength)) {
+            return;
+        }
+        updateFullCode(codeInput);
+    }, [codeLength, updateFullCode]);
+    useEffect(() => {
+        codeRef.current = buildCodeArray(value, codeLength);
+    }, [codeLength, codeRef, value]);
+    return {
+        code: codeRef.current,
+        cellHandlers: {
+            onKeyDown,
+            onPaste,
+            onChange: onAutoCompleteInput,
+        },
+        onChangeCode: onChange,
+    };
+}

package/dist/esm/components/FieldCode/hooks/useFieldCodeOverflow.d.ts

@@ -0,0 +1,6 @@
+/** Запасной сценарий: включает горизонтальный скролл, если ряд ячеек шире контейнера. */
+export declare function useFieldCodeOverflow(): {
+    rootRef: import("react").RefObject<HTMLDivElement>;
+    codeContainerRef: import("react").RefObject<HTMLDivElement>;
+    hasOverflow: boolean;
+};

package/dist/esm/components/FieldCode/hooks/useFieldCodeOverflow.js

@@ -0,0 +1,40 @@
+import { useLayoutEffect } from '@cloud-ru/ds-utils';
+import { useCallback, useRef, useState } from 'react';
+function hasCodeOverflow(root, codeContainer) {
+    return codeContainer.scrollWidth > root.clientWidth;
+}
+/** Запасной сценарий: включает горизонтальный скролл, если ряд ячеек шире контейнера. */
+export function useFieldCodeOverflow() {
+    const [hasOverflow, setHasOverflow] = useState(false);
+    const rootRef = useRef(null);
+    const codeContainerRef = useRef(null);
+    const measure = useCallback(() => {
+        const root = rootRef.current;
+        const codeContainer = codeContainerRef.current;
+        if (!root || !codeContainer) {
+            return;
+        }
+        setHasOverflow(prev => {
+            const next = hasCodeOverflow(root, codeContainer);
+            return prev === next ? prev : next;
+        });
+    }, []);
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        const codeContainer = codeContainerRef.current;
+        if (!root || !codeContainer) {
+            return;
+        }
+        measure();
+        const resizeObserver = new ResizeObserver(measure);
+        resizeObserver.observe(root);
+        resizeObserver.observe(codeContainer);
+        const mutationObserver = new MutationObserver(measure);
+        mutationObserver.observe(codeContainer, { childList: true });
+        return () => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [measure]);
+    return { rootRef, codeContainerRef, hasOverflow };
+}

package/dist/esm/components/FieldCode/hooks/useFieldCodeValidate.d.ts

@@ -0,0 +1,6 @@
+export type UseFieldCodeValidateParams = {
+    /** Ожидаемая длина кода (количество цифр) */
+    codeLength: number;
+};
+/** Возвращает функцию валидации значения кода: пустое значение / неполный код. */
+export declare function useFieldCodeValidate(params: UseFieldCodeValidateParams): (value?: string | number) => string | undefined;

package/dist/esm/components/FieldCode/hooks/useFieldCodeValidate.js

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import { fieldsPredefinedLocale } from '../../../locale/index.js';
+import { isNumberChar } from '../utils.js';
+/** Возвращает функцию валидации значения кода: пустое значение / неполный код. */
+export function useFieldCodeValidate(params) {
+    const { codeLength } = params;
+    const { t } = fieldsPredefinedLocale.useTranslations();
+    return useCallback((value) => {
+        const str = value != null ? String(value) : '';
+        const digits = str.split('').filter(isNumberChar).join('');
+        if (digits.length === 0) {
+            return t('FieldCode.required');
+        }
+        if (digits.length < codeLength) {
+            return t('FieldCode.minLength', { count: codeLength });
+        }
+        return undefined;
+    }, [codeLength, t]);
+}

package/dist/esm/components/FieldCode/hooks/useFieldHelpers.d.ts

@@ -0,0 +1,12 @@
+type UseFieldHelpersParams = {
+    onChangeCode(code: string): void;
+    moveFocus(index: number): void;
+    isMobile?: boolean;
+    showEmptyChars?: boolean;
+    code: readonly string[];
+    codeLength: number;
+};
+export declare function useFieldHelpers(params: UseFieldHelpersParams): {
+    resetCode: () => void;
+};
+export {};

package/dist/esm/components/FieldCode/hooks/useFieldHelpers.js

@@ -0,0 +1,28 @@
+import { useCallback, useEffect } from 'react';
+import { getFirstEmptyCellIndex } from '../utils.js';
+export function useFieldHelpers(params) {
+    const { onChangeCode, moveFocus, isMobile = false, showEmptyChars, code, codeLength } = params;
+    const resetCode = useCallback(() => {
+        onChangeCode('');
+        if (!isMobile) {
+            moveFocus(0);
+        }
+    }, [isMobile, moveFocus, onChangeCode]);
+    useEffect(() => {
+        if (!isMobile) {
+            moveFocus(0);
+        }
+    }, [isMobile, moveFocus]);
+    useEffect(() => {
+        if (isMobile || !showEmptyChars) {
+            return;
+        }
+        const emptyIndex = getFirstEmptyCellIndex(code);
+        if (emptyIndex >= 0) {
+            moveFocus(emptyIndex);
+        }
+        // Фокус перемещается только при включении подсветки или смене длины кода, не на каждый ввод.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [showEmptyChars, isMobile, moveFocus, codeLength]);
+    return { resetCode };
+}

package/dist/esm/components/FieldCode/hooks/useFocusCell.d.ts

@@ -0,0 +1,5 @@
+export declare function useFocusCell(codeLength: number): {
+    inputsRef: import("react").MutableRefObject<HTMLInputElement[]>;
+    moveFocus: (newIndex: number) => void;
+    blurFields: () => void;
+};

package/dist/esm/components/FieldCode/hooks/useFocusCell.js

@@ -0,0 +1,18 @@
+import { useCallback, useRef } from 'react';
+export function useFocusCell(codeLength) {
+    const inputsRef = useRef([]);
+    const focusInput = useCallback((index) => {
+        inputsRef.current[index]?.focus();
+    }, []);
+    const moveFocus = useCallback((newIndex) => {
+        if (newIndex >= 0 && newIndex < codeLength) {
+            focusInput(newIndex);
+        }
+    }, [codeLength, focusInput]);
+    const blurFields = useCallback(() => {
+        inputsRef.current.forEach(input => {
+            input?.blur();
+        });
+    }, []);
+    return { inputsRef, moveFocus, blurFields };
+}

package/dist/esm/components/FieldCode/hooks/useRefState.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Ref-контейнер, присваивание `.current` которого вызывает ре-рендер.
+ * Локальная замена `useRefState` из `@siberiacancode/reactuse` — пакет не тянем ради одного хука.
+ */
+export declare function useRefState<T>(initialValue: T): {
+    current: T;
+};

package/dist/esm/components/FieldCode/hooks/useRefState.js

@@ -0,0 +1,18 @@
+import { useMemo, useReducer, useRef } from 'react';
+/**
+ * Ref-контейнер, присваивание `.current` которого вызывает ре-рендер.
+ * Локальная замена `useRefState` из `@siberiacancode/reactuse` — пакет не тянем ради одного хука.
+ */
+export function useRefState(initialValue) {
+    const [, forceRender] = useReducer((tick) => tick + 1, 0);
+    const ref = useRef(initialValue);
+    return useMemo(() => ({
+        get current() {
+            return ref.current;
+        },
+        set current(value) {
+            ref.current = value;
+            forceRender();
+        },
+    }), []);
+}

package/dist/esm/components/FieldCode/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/ResendCode/index.js';
+export * from './FieldCode.js';
+export * from './hooks/useFieldCodeValidate.js';