@cloud-ru/uikit-product-fields-predefined 2.4.3 → 2.4.4-preview-347b88f7.0

package/README.md

@@ -349,6 +349,25 @@
 | onClearButtonClick | `() => void` | - | Колбек клика по кнопке очистки поля |
 | value | `string` | - |  |
 | onChange | `(value: string, mask: InputMask<Record<string, unknown>>) => void` | - |  |
+## FieldCode
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| codeLength* | `number` | - | Количество цифр в коде |
+| className | `string` | - | CSS-класс |
+| showEmptyChars | `boolean` | - | Подсветить пустые символы кода |
+| loading | `boolean` | - | отправка кода в процессе |
+| incorrectCodeState | `boolean` | - | Подсветить все символы кода |
+| onChange | `(code: string) => void` | - | Колбек изменения значения |
+| value | `string` | - |  |
+| onComplete | `(code: string) => void` | - | Колбек достижения ввода всех символов кода |
+| withoutFocus | `boolean` | - | Отключить автофокус |
+| fieldClassName | `string` | - |  |
+| withoutErrorFocus | `boolean` | - | Отключить автофокус при ошибке (по умолчанию false) |
+| spacing | `number[]` | - | Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) |
+| disabled | `boolean` | - | Деактивирован ли элемент Является ли поле деактивированным |
+| readonly | `boolean` | - | Является ли поле доступным только на чтение Доступно ли поле только на чтение |
+| size | enum Size: `"s"`, `"m"`, `"l"` | l | Размер |
 | ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
 

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

@@ -0,0 +1,50 @@
+import { FieldDecoratorProps } from '@snack-uikit/fields';
+export type FieldCodeRef = {
+    blur: () => void;
+};
+export type FieldCodeProps = {
+    /** Количество цифр в коде  */
+    codeLength: number;
+    className?: string;
+    /** Подсветить пустые символы кода  */
+    showEmptyChars?: boolean;
+    /** отправка кода в процессе */
+    loading?: boolean;
+    /** Подсветить все символы кода  */
+    incorrectCodeState?: boolean;
+    /** Колбек изменения значения */
+    onChange?: (code: string) => void;
+    value?: string;
+    /** Колбек достижения ввода всех символов кода  */
+    onComplete?: (code: string) => void;
+    /** Отключить автофокус */
+    withoutFocus?: boolean;
+    fieldClassName?: string;
+    /** Отключить автофокус при ошибке (по умолчанию false) */
+    withoutErrorFocus?: boolean;
+    /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
+    spacing?: number[];
+} & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'readonly'>;
+export declare const FieldCode: import("react").ForwardRefExoticComponent<{
+    /** Количество цифр в коде  */
+    codeLength: number;
+    className?: string;
+    /** Подсветить пустые символы кода  */
+    showEmptyChars?: boolean;
+    /** отправка кода в процессе */
+    loading?: boolean;
+    /** Подсветить все символы кода  */
+    incorrectCodeState?: boolean;
+    /** Колбек изменения значения */
+    onChange?: (code: string) => void;
+    value?: string;
+    /** Колбек достижения ввода всех символов кода  */
+    onComplete?: (code: string) => void;
+    /** Отключить автофокус */
+    withoutFocus?: boolean;
+    fieldClassName?: string;
+    /** Отключить автофокус при ошибке (по умолчанию false) */
+    withoutErrorFocus?: boolean;
+    /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
+    spacing?: number[];
+} & Pick<FieldDecoratorProps, "size" | "disabled" | "readonly"> & import("react").RefAttributes<FieldCodeRef>>;

package/dist/cjs/components/FieldCode/FieldCode.js

@@ -0,0 +1,66 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldCode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const fields_1 = require("@snack-uikit/fields");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+exports.FieldCode = (0, react_1.forwardRef)(function FieldCode(_a, ref) {
+    var { codeLength, className, showEmptyChars, incorrectCodeState, loading, onChange: onChangeProp, onComplete, withoutFocus, value: valueProp, fieldClassName, withoutErrorFocus = false, size = 'l', spacing } = _a, decoratorProps = __rest(_a, ["codeLength", "className", "showEmptyChars", "incorrectCodeState", "loading", "onChange", "onComplete", "withoutFocus", "value", "fieldClassName", "withoutErrorFocus", "size", "spacing"]);
+    const inputsRef = (0, react_1.useRef)([]);
+    const moveFocus = (0, hooks_1.useFocusFields)({ inputsRef, codeLength });
+    const { code, setCode, buildCodeArray, handleInputChange, handleKeyDown, handlePaste } = (0, hooks_1.useCodeInput)({
+        codeLength,
+        value: valueProp,
+        onChange: onChangeProp,
+        onComplete,
+        moveFocus,
+    });
+    const blurFields = () => {
+        inputsRef.current.forEach(input => input === null || input === void 0 ? void 0 : input.blur());
+    };
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        blur: blurFields,
+    }));
+    (0, hooks_1.useCodeInputEffects)({
+        codeLength,
+        code,
+        valueProp,
+        loading,
+        incorrectCodeState,
+        showEmptyChars,
+        withoutFocus,
+        withoutErrorFocus,
+        buildCodeArray,
+        setCode,
+        onChange: onChangeProp,
+        moveFocus,
+        inputsRef,
+    });
+    const resolvedDecoratorProps = Object.assign(Object.assign({}, decoratorProps), { size });
+    // Определяем индексы полей, после которых нужен отступ (0-based индексы)
+    const spacingIndices = (0, react_1.useMemo)(() => {
+        if (!spacing || spacing.length === 0) {
+            return new Set();
+        }
+        return new Set(spacing.filter(pos => pos >= 0 && pos < codeLength - 1));
+    }, [spacing, codeLength]);
+    return ((0, jsx_runtime_1.jsx)(fields_1.FieldDecorator, Object.assign({}, resolvedDecoratorProps, { className: className, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.codeContainer, "data-size": size, children: code.map((char, index) => ((0, jsx_runtime_1.jsx)(fields_1.FieldText, { inputMode: 'numeric', autoComplete: 'one-time-code', className: (0, classnames_1.default)(styles_module_scss_1.default.codeInput, spacingIndices.has(index) && styles_module_scss_1.default.codeInputWithSpacing, fieldClassName), "data-size": size, showClearButton: false, value: char === utils_1.ZERO_WIDTH_SPACE ? '' : char, validationState: (0, utils_1.getValidationState)({ char, incorrectCodeState, showEmptyChars }), ref: ref => (inputsRef.current[index] = ref), onKeyDown: e => handleKeyDown(e, index), onChange: code => handleInputChange(code, index), onPaste: e => handlePaste({ e }), size: resolvedDecoratorProps.size, disabled: resolvedDecoratorProps.disabled, readonly: resolvedDecoratorProps.readonly }, index))) }) })));
+});

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

@@ -0,0 +1,4 @@
+export * from './useCodeInput';
+export * from './useCodeInputEffects';
+export * from './useFocusFields';
+export * from './useStateWithRef';

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

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useCodeInput"), exports);
+__exportStar(require("./useCodeInputEffects"), exports);
+__exportStar(require("./useFocusFields"), exports);
+__exportStar(require("./useStateWithRef"), exports);

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

@@ -0,0 +1,21 @@
+import { ClipboardEvent, KeyboardEvent } from 'react';
+type UseCodeInputParams = {
+    codeLength: number;
+    value?: string;
+    onChange?: (code: string) => void;
+    onComplete?: (code: string) => void;
+    moveFocus: (index: number) => void;
+};
+export declare function useCodeInput({ codeLength, value: valueProp, onChange: onChangeProp, onComplete, moveFocus, }: UseCodeInputParams): {
+    code: string[];
+    setCode: (newValue: string[] | ((prevValue: string[]) => string[])) => void;
+    codeRef: import("react").MutableRefObject<string[]>;
+    buildCodeArray: (str: string) => string[];
+    handleInputChange: (char: string, index: number) => void;
+    handleKeyDown: ({ key }: KeyboardEvent<HTMLInputElement>, index: number) => void;
+    handlePaste: ({ e, fullCode }: {
+        e?: ClipboardEvent<HTMLInputElement>;
+        fullCode?: string;
+    }) => void;
+};
+export {};

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

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCodeInput = useCodeInput;
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const utils_2 = require("../utils");
+const useStateWithRef_1 = require("./useStateWithRef");
+function useCodeInput({ codeLength, value: valueProp, onChange: onChangeProp, onComplete, moveFocus, }) {
+    const buildCodeArray = (0, react_1.useCallback)((str) => Array.from({ length: codeLength }, (_, idx) => { var _a; return (_a = str[idx]) !== null && _a !== void 0 ? _a : ''; }), [codeLength]);
+    const [value = '', onChange] = (0, utils_1.useValueControl)({
+        value: valueProp,
+        onChange: onChangeProp,
+        defaultValue: '',
+    });
+    const [code, setCode, codeRef] = (0, useStateWithRef_1.useStateWithRef)(buildCodeArray(value));
+    const pasteFlag = (0, react_1.useRef)(false);
+    const keyInputFlag = (0, react_1.useRef)(false);
+    const updateCode = (0, react_1.useCallback)((index, newChar) => {
+        const updatedCode = [...codeRef.current];
+        updatedCode[index] = newChar;
+        setCode(updatedCode);
+        const normalizedCode = (0, utils_2.getPaddedValue)(updatedCode).join('');
+        onChange === null || onChange === void 0 ? void 0 : onChange(normalizedCode);
+        return updatedCode;
+    }, [codeRef, setCode, onChange]);
+    const handleAutoComplete = (0, react_1.useCallback)((char, charIndex) => {
+        for (const idx of (0, utils_2.generateRangeWithStep)(1, charIndex)) {
+            updateCode(idx - 1, codeRef.current[idx]);
+        }
+        updateCode(charIndex, char);
+        const updatedCode = codeRef.current.join('');
+        if ((0, utils_2.isStringCodeLength)(updatedCode, codeLength)) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(updatedCode);
+        }
+    }, [codeLength, codeRef, onComplete, updateCode]);
+    const handlePaste = (0, react_1.useCallback)(({ e, fullCode }) => {
+        var _a;
+        if (e) {
+            pasteFlag.current = true;
+        }
+        const codeInput = (_a = (fullCode || (e === null || e === void 0 ? void 0 : e.clipboardData.getData('text')))) !== null && _a !== void 0 ? _a : '';
+        if (!(0, utils_2.isStringCodeLength)(codeInput, codeLength)) {
+            return;
+        }
+        const codeArray = codeInput.split('');
+        setCode(codeArray);
+        onChange === null || onChange === void 0 ? void 0 : onChange(codeInput);
+        onComplete === null || onComplete === void 0 ? void 0 : onComplete(codeInput);
+        moveFocus(codeLength - 1);
+    }, [codeLength, moveFocus, onChange, onComplete, setCode]);
+    const deleteChar = (0, react_1.useCallback)((index) => {
+        if (codeRef.current[index] && !(0, utils_2.isZeroWidthSpace)(codeRef.current[index])) {
+            updateCode(index, '');
+        }
+        else if (index > 0) {
+            moveFocus(index - 1);
+        }
+    }, [codeRef, moveFocus, updateCode]);
+    const handleInputChange = (0, react_1.useCallback)((char, index) => {
+        var _a;
+        if (pasteFlag.current || keyInputFlag.current) {
+            pasteFlag.current = false;
+            keyInputFlag.current = false;
+            return;
+        }
+        if ((0, utils_2.isStringCodeLength)(char, codeLength)) {
+            handlePaste({ fullCode: char });
+            return;
+        }
+        // autocomplete если фокус был не на первой ячейке
+        if ((0, utils_2.isOutsideAutoComplete)(char, index, codeRef.current)) {
+            handleAutoComplete((_a = char.at(-1)) !== null && _a !== void 0 ? _a : '', index);
+            return;
+        }
+        let lastChar = char;
+        if (char.length > 1) {
+            const prev = codeRef.current[index];
+            const candidates = Array.from(char);
+            const found = candidates.find(c => c !== prev && (0, utils_2.isNumberChar)(c));
+            const newDigit = found !== null && found !== void 0 ? found : candidates[candidates.length - 1];
+            lastChar = (0, utils_2.isNumberChar)(newDigit) ? newDigit : '';
+        }
+        if (char === '') {
+            deleteChar(index);
+            return;
+        }
+        if (!(0, utils_2.isNumberChar)(lastChar)) {
+            return;
+        }
+        const updated = updateCode(index, lastChar);
+        const cleaned = (0, utils_2.getCleanValue)(updated).join('');
+        const isLastInput = index === codeLength - 1;
+        const isAllInputsFilled = (0, utils_2.isStringCodeLength)(cleaned, codeLength);
+        if (!isLastInput) {
+            moveFocus(index + 1);
+        }
+        else if (isAllInputsFilled) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(cleaned);
+        }
+    }, [codeLength, codeRef, deleteChar, handleAutoComplete, handlePaste, moveFocus, onComplete, updateCode]);
+    const handleKeyDown = (0, react_1.useCallback)(({ key }, index) => {
+        switch (key) {
+            case 'ArrowLeft':
+                moveFocus(index - 1);
+                break;
+            case 'ArrowRight':
+                moveFocus(index + 1);
+                break;
+            case 'Backspace':
+                deleteChar(index);
+                break;
+            default:
+                if ((0, utils_2.isNumberChar)(key)) {
+                    handleInputChange(key, index);
+                    keyInputFlag.current = true;
+                }
+                break;
+        }
+    }, [deleteChar, handleInputChange, moveFocus]);
+    return {
+        code,
+        setCode,
+        codeRef,
+        buildCodeArray,
+        handleInputChange,
+        handleKeyDown,
+        handlePaste,
+    };
+}

package/dist/cjs/components/FieldCode/hooks/useCodeInputEffects.d.ts

@@ -0,0 +1,17 @@
+type UseCodeInputEffectsParams = {
+    codeLength: number;
+    code: string[];
+    valueProp?: string;
+    loading?: boolean;
+    incorrectCodeState?: boolean;
+    showEmptyChars?: boolean;
+    withoutFocus?: boolean;
+    withoutErrorFocus?: boolean;
+    buildCodeArray: (str: string) => string[];
+    setCode: (code: string[]) => void;
+    onChange?: (code: string) => void;
+    moveFocus: (index: number) => void;
+    inputsRef: React.MutableRefObject<(HTMLInputElement | null)[]>;
+};
+export declare function useCodeInputEffects({ codeLength, code, valueProp, loading, incorrectCodeState, showEmptyChars, withoutFocus, withoutErrorFocus, buildCodeArray, setCode, onChange, moveFocus, inputsRef, }: UseCodeInputEffectsParams): void;
+export {};

package/dist/cjs/components/FieldCode/hooks/useCodeInputEffects.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCodeInputEffects = useCodeInputEffects;
+const react_1 = require("react");
+const utils_1 = require("../utils");
+function useCodeInputEffects({ codeLength, code, valueProp, loading, incorrectCodeState, showEmptyChars, withoutFocus, withoutErrorFocus, buildCodeArray, setCode, onChange, moveFocus, inputsRef, }) {
+    const blurFields = (0, react_1.useCallback)(() => {
+        inputsRef.current.forEach(input => input === null || input === void 0 ? void 0 : input.blur());
+    }, [inputsRef]);
+    // Фокус при загрузке
+    (0, react_1.useEffect)(() => {
+        if (withoutFocus || loading)
+            return;
+        requestAnimationFrame(() => {
+            moveFocus(0);
+        });
+    }, [loading, moveFocus, withoutFocus]);
+    // Фокус при ошибке (если withoutErrorFocus = false)
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (withoutErrorFocus)
+            return;
+        if (showEmptyChars) {
+            const idx = (0, utils_1.getCleanValue)(code).findIndex(c => c === '');
+            const focusIndex = idx >= 0 ? idx : codeLength - 1;
+            (_a = inputsRef.current[focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [code, codeLength, incorrectCodeState, showEmptyChars, withoutErrorFocus, inputsRef]);
+    // Фокус при ошибке (если withoutErrorFocus = true)
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (incorrectCodeState) {
+            (_a = inputsRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [incorrectCodeState, inputsRef]);
+    // Блюр при ошибке (если withoutErrorFocus = true)
+    (0, react_1.useEffect)(() => {
+        if (!withoutErrorFocus)
+            return;
+        if (incorrectCodeState || showEmptyChars) {
+            blurFields();
+        }
+    }, [incorrectCodeState, showEmptyChars, withoutErrorFocus, blurFields]);
+    // Сброс кода при изменении длины
+    (0, react_1.useEffect)(() => {
+        setCode(Array(codeLength).fill(''));
+    }, [codeLength, setCode]);
+    // Обновление кода при изменении valueProp (только если valueProp не пустой)
+    (0, react_1.useEffect)(() => {
+        if (valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) {
+            setCode(buildCodeArray(valueProp));
+        }
+    }, [buildCodeArray, setCode, valueProp]);
+    // Сброс кода при очистке valueProp
+    (0, react_1.useEffect)(() => {
+        if (!(valueProp === null || valueProp === void 0 ? void 0 : valueProp.length)) {
+            setCode(Array(codeLength).fill(''));
+            onChange === null || onChange === void 0 ? void 0 : onChange(utils_1.ZERO_WIDTH_SPACE.repeat(codeLength));
+            moveFocus(0);
+        }
+    }, [valueProp, codeLength, moveFocus, setCode, onChange]);
+}

package/dist/cjs/components/FieldCode/hooks/useFocusFields.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from 'react';
+type UseFocusFields = {
+    inputsRef: MutableRefObject<(HTMLInputElement | null)[]>;
+    codeLength: number;
+};
+export declare function useFocusFields({ inputsRef, codeLength }: UseFocusFields): (newIndex: number) => void;
+export {};

package/dist/cjs/components/FieldCode/hooks/useFocusFields.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusFields = useFocusFields;
+const react_1 = require("react");
+function useFocusFields({ inputsRef, codeLength }) {
+    const focusInput = (0, react_1.useCallback)((index) => {
+        var _a;
+        (_a = inputsRef.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [inputsRef]);
+    const moveFocus = (0, react_1.useCallback)((newIndex) => {
+        if (newIndex >= 0 && newIndex < codeLength) {
+            focusInput(newIndex);
+        }
+    }, [codeLength, focusInput]);
+    return moveFocus;
+}

package/dist/cjs/components/FieldCode/hooks/useStateWithRef.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare function useStateWithRef<T>(initialValue: T): [T, (newValue: T | ((prevValue: T) => T)) => void, MutableRefObject<T>];

package/dist/cjs/components/FieldCode/hooks/useStateWithRef.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStateWithRef = useStateWithRef;
+const react_1 = require("react");
+function useStateWithRef(initialValue) {
+    const [state, setState] = (0, react_1.useState)(initialValue);
+    const ref = (0, react_1.useRef)(state);
+    const setStateAndRef = (0, react_1.useCallback)((newValue) => {
+        if (typeof newValue === 'function') {
+            const updater = newValue;
+            const updatedValue = updater(ref.current);
+            setState(updatedValue);
+            ref.current = updatedValue;
+        }
+        else {
+            setState(newValue);
+            ref.current = newValue;
+        }
+    }, []);
+    return [state, setStateAndRef, ref];
+}

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FieldCode"), exports);

package/dist/cjs/components/FieldCode/styles.module.css

@@ -0,0 +1,42 @@
+.codeContainer{
+  display:flex;
+  justify-content:center;
+}
+.codeContainer[data-size=s]{
+  gap:6px;
+}
+.codeContainer[data-size=m]{
+  gap:8px;
+}
+.codeContainer[data-size=l]{
+  gap:12px;
+}
+
+.codeInputWithSpacing[data-size=s]{
+  margin-right:2px;
+}
+.codeInputWithSpacing[data-size=m]{
+  margin-right:8px;
+}
+.codeInputWithSpacing[data-size=l]{
+  margin-right:12px;
+}
+
+.codeInput{
+  width:100%;
+}
+.codeInput input{
+  text-align:center;
+}
+.codeInput input[data-size=s]{
+  font-size:16px;
+  line-height:22px;
+}
+.codeInput input[data-size=m]{
+  font-size:18px;
+  line-height:26px;
+}
+.codeInput input[data-size=l]{
+  font-size:20px;
+  line-height:28px;
+}

package/dist/cjs/components/FieldCode/utils.d.ts

@@ -0,0 +1,13 @@
+export declare const ZERO_WIDTH_SPACE = "\u200B";
+export declare const getValidationState: ({ char, incorrectCodeState, showEmptyChars, }: {
+    char: string;
+    incorrectCodeState?: boolean;
+    showEmptyChars?: boolean;
+}) => "error" | "default";
+export declare const isNumberChar: (char: string) => boolean;
+export declare const isStringCodeLength: (input: string, codeLength: number) => boolean;
+export declare const isOutsideAutoComplete: (input: string, index: number, code: string[]) => boolean;
+export declare const getPaddedValue: (value: string[]) => string[];
+export declare const getCleanValue: (value: string[]) => string[];
+export declare const isZeroWidthSpace: (value: string) => value is "​";
+export declare const generateRangeWithStep: (start: number, end: number) => number[];

package/dist/cjs/components/FieldCode/utils.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateRangeWithStep = exports.isZeroWidthSpace = exports.getCleanValue = exports.getPaddedValue = exports.isOutsideAutoComplete = exports.isStringCodeLength = exports.isNumberChar = exports.getValidationState = exports.ZERO_WIDTH_SPACE = void 0;
+exports.ZERO_WIDTH_SPACE = '\u200B';
+const getValidationState = ({ char, incorrectCodeState, showEmptyChars, }) => {
+    if (incorrectCodeState) {
+        return 'error';
+    }
+    if (!showEmptyChars) {
+        return 'default';
+    }
+    return char && char !== exports.ZERO_WIDTH_SPACE ? 'default' : 'error';
+};
+exports.getValidationState = getValidationState;
+const isStringCode = (input) => new RegExp(`^\\d+$`).test(input);
+const isNumberChar = (char) => /^\d$/.test(char);
+exports.isNumberChar = isNumberChar;
+const isStringCodeLength = (input, codeLength) => new RegExp(`^\\d{${codeLength}}$`).test(input);
+exports.isStringCodeLength = isStringCodeLength;
+const isOutsideAutoComplete = (input, index, code) => input.length > 1 && isStringCode(input) && input.at(0) === code.at(index);
+exports.isOutsideAutoComplete = isOutsideAutoComplete;
+const getPaddedValue = (value) => value.map(char => (char === '' ? exports.ZERO_WIDTH_SPACE : char));
+exports.getPaddedValue = getPaddedValue;
+const getCleanValue = (value) => value.map(char => (char !== exports.ZERO_WIDTH_SPACE ? char : ''));
+exports.getCleanValue = getCleanValue;
+const isZeroWidthSpace = (value) => value === exports.ZERO_WIDTH_SPACE;
+exports.isZeroWidthSpace = isZeroWidthSpace;
+const generateRangeWithStep = (start, end) => {
+    const step = start <= end ? 1 : -1;
+    const length = Math.abs(end - start) + 1;
+    return Array.from({ length }, (_, i) => start + i * step);
+};
+exports.generateRangeWithStep = generateRangeWithStep;

package/dist/cjs/components/index.d.ts

@@ -6,3 +6,4 @@ export * from './AIDisclaimer';
 export * from './FieldName';
 export * from './FieldDescription';
 export * from './FieldMask';
+export * from './FieldCode';

package/dist/cjs/components/index.js

@@ -22,3 +22,4 @@ __exportStar(require("./AIDisclaimer"), exports);
 __exportStar(require("./FieldName"), exports);
 __exportStar(require("./FieldDescription"), exports);
 __exportStar(require("./FieldMask"), exports);
+__exportStar(require("./FieldCode"), exports);

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

@@ -0,0 +1,50 @@
+import { FieldDecoratorProps } from '@snack-uikit/fields';
+export type FieldCodeRef = {
+    blur: () => void;
+};
+export type FieldCodeProps = {
+    /** Количество цифр в коде  */
+    codeLength: number;
+    className?: string;
+    /** Подсветить пустые символы кода  */
+    showEmptyChars?: boolean;
+    /** отправка кода в процессе */
+    loading?: boolean;
+    /** Подсветить все символы кода  */
+    incorrectCodeState?: boolean;
+    /** Колбек изменения значения */
+    onChange?: (code: string) => void;
+    value?: string;
+    /** Колбек достижения ввода всех символов кода  */
+    onComplete?: (code: string) => void;
+    /** Отключить автофокус */
+    withoutFocus?: boolean;
+    fieldClassName?: string;
+    /** Отключить автофокус при ошибке (по умолчанию false) */
+    withoutErrorFocus?: boolean;
+    /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
+    spacing?: number[];
+} & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'readonly'>;
+export declare const FieldCode: import("react").ForwardRefExoticComponent<{
+    /** Количество цифр в коде  */
+    codeLength: number;
+    className?: string;
+    /** Подсветить пустые символы кода  */
+    showEmptyChars?: boolean;
+    /** отправка кода в процессе */
+    loading?: boolean;
+    /** Подсветить все символы кода  */
+    incorrectCodeState?: boolean;
+    /** Колбек изменения значения */
+    onChange?: (code: string) => void;
+    value?: string;
+    /** Колбек достижения ввода всех символов кода  */
+    onComplete?: (code: string) => void;
+    /** Отключить автофокус */
+    withoutFocus?: boolean;
+    fieldClassName?: string;
+    /** Отключить автофокус при ошибке (по умолчанию false) */
+    withoutErrorFocus?: boolean;
+    /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
+    spacing?: number[];
+} & Pick<FieldDecoratorProps, "size" | "disabled" | "readonly"> & import("react").RefAttributes<FieldCodeRef>>;