npm - @hh.ru/magritte-ui-pincode-input - Versions diffs - 1.0.2 → 1.1.0 - Mend

@hh.ru/magritte-ui-pincode-input 1.0.2 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/PincodeInput.d.ts CHANGED Viewed

@@ -20,6 +20,14 @@ export interface PincodeInputProps {
     description?: string;
     /** Текст сообщения об ошибке */
     errorMessage?: string;
+    /**
+     * Если код предполагается отправлять посредством sms то для автозаполнения на Android требуется получение от
+     * пользователя разрешения на доступ к sms. Для этого используется WebOTP API. Часть этого API находится в
+     * статусе экспериментального и поддерживается далеко не всеми браузерами. В браузерах которые поддерживают это
+     * API у пользователя будет запрошено разрешение, поэтому используйте этот флаг только в случае отправки OTP
+     * через sms.
+     */
+    requestCredentials?: boolean;
     'data-qa'?: string;
 }
 export declare const PincodeInput: import("react").ForwardRefExoticComponent<PincodeInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/PincodeInput.js CHANGED Viewed

@@ -1,82 +1,110 @@
 import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef } from 'react';
+import { forwardRef, useState, useRef, useLayoutEffect } from 'react';
 import classnames from 'classnames';
-import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
-import { Selection } from '@hh.ru/magritte-common-text-selection';
+import { keyboardMatch, keyboardKeys, keyboardMatches } from '@hh.ru/magritte-common-keyboard';
+import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
+import { useOTP } from './useOTP.js';
-var styles = {"pincode-input":"magritte-pincode-input___RpWyq_1-0-2","pincodeInput":"magritte-pincode-input___RpWyq_1-0-2","medium":"magritte-medium___wfRSc_1-0-2","placeholder":"magritte-placeholder___10kQ0_1-0-2","focus":"magritte-focus___IuhXb_1-0-2","invalid":"magritte-invalid___hB8h2_1-0-2","focus-visible":"magritte-focus-visible___BN1eD_1-0-2","focusVisible":"magritte-focus-visible___BN1eD_1-0-2","digit-box-container":"magritte-digit-box-container___BqMWw_1-0-2","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-0-2","digit-box":"magritte-digit-box___6J0Q2_1-0-2","digitBox":"magritte-digit-box___6J0Q2_1-0-2","digits-input":"magritte-digits-input___4QeLj_1-0-2","digitsInput":"magritte-digits-input___4QeLj_1-0-2","caret-left":"magritte-caret-left___iZMuA_1-0-2","caretLeft":"magritte-caret-left___iZMuA_1-0-2","caret-right":"magritte-caret-right___u8wNk_1-0-2","caretRight":"magritte-caret-right___u8wNk_1-0-2","caret-blink":"magritte-caret-blink___-bhg7_1-0-2","caretBlink":"magritte-caret-blink___-bhg7_1-0-2","value-container":"magritte-value-container___9JR3e_1-0-2","valueContainer":"magritte-value-container___9JR3e_1-0-2"};
+var styles = {"pincode-input":"magritte-pincode-input___RpWyq_1-1-0","pincodeInput":"magritte-pincode-input___RpWyq_1-1-0","medium":"magritte-medium___wfRSc_1-1-0","placeholder":"magritte-placeholder___10kQ0_1-1-0","focus":"magritte-focus___IuhXb_1-1-0","invalid":"magritte-invalid___hB8h2_1-1-0","focus-visible":"magritte-focus-visible___BN1eD_1-1-0","focusVisible":"magritte-focus-visible___BN1eD_1-1-0","digit-box-container":"magritte-digit-box-container___BqMWw_1-1-0","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-1-0","digit-box":"magritte-digit-box___6J0Q2_1-1-0","digitBox":"magritte-digit-box___6J0Q2_1-1-0","digits-input":"magritte-digits-input___4QeLj_1-1-0","digitsInput":"magritte-digits-input___4QeLj_1-1-0","caret-left":"magritte-caret-left___iZMuA_1-1-0","caretLeft":"magritte-caret-left___iZMuA_1-1-0","caret-right":"magritte-caret-right___u8wNk_1-1-0","caretRight":"magritte-caret-right___u8wNk_1-1-0","caret-blink":"magritte-caret-blink___-bhg7_1-1-0","caretBlink":"magritte-caret-blink___-bhg7_1-1-0","value-container":"magritte-value-container___9JR3e_1-1-0","valueContainer":"magritte-value-container___9JR3e_1-1-0","ghost-value":"magritte-ghost-value___jPQwY_1-1-0","ghostValue":"magritte-ghost-value___jPQwY_1-1-0"};
-const moveCaretTo = (ref, position, callback) =>
-// Каретка сдвигается при изменении содержимого инпута автоматически
-// Поэтому двигаем её асинхронно, чтобы сдвиг происходил после нативного, иначе она окажется не в нужной позиции
-requestAnimationFrame(() => {
-    if (ref.current) {
-        Selection.setCaretPosition(ref.current, position);
-        callback?.();
-    }
-});
-const getCaretPosition = (ref) => ref.current ? (Selection.getCaretPosition(ref.current) ?? 0) : 0;
-const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'large', invalid = false, onFocus, onBlur, onChange, description, errorMessage, 'data-qa': dataQa = 'magritte-pincode-input', }, ref) => {
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'large', invalid = false, onFocus, onBlur, onChange, description, errorMessage, requestCredentials = false, 'data-qa': dataQa = 'magritte-pincode-input', }, ref) => {
     const digitsCount = _digitsCount ?? (size === 'medium' ? 6 : 4);
     const [value, setValue] = useState('');
     const [caretPosition, setCaretPosition] = useState(0);
     const [focused, setFocused] = useState(false);
     const [focusVisible, setFocusVisible] = useState(false);
+    const [inputKey, setInputKey] = useState(0);
+    const ghostLastDigitRef = useRef(null);
+    const containerRef = useRef(null);
     const inputRef = useRef(null);
-    const selectionRef = useRef(null);
+    const autofillValueRef = useRef('');
     const updateValue = (newValue) => {
         setValue(newValue);
         onChange?.(newValue);
     };
-    const refineCaretPosition = () => {
-        // если попытаться получить позицию каретки синхронно, то получим позицию до изменения
-        requestAnimationFrame(() => {
-            if (!inputRef.current) {
-                return;
-            }
-            // Когда перемещаемся между цифрами если в позиции введена цифра, то ввод должен заменят именно её
-            // а не сдвигать весь текст после нее врпаво, как в обычном инпуте.
-            // Поэтому здесь проверяем если в позиции что-то введено, то не просто устанавливаем каретку, а выделяем
-            // символ, чтобы при вводе он заменился
-            const caretPosition = getCaretPosition(inputRef);
-            const value = inputRef.current?.value ?? '';
-            const digitNumberToSelect = Math.min(caretPosition, Math.min(value.length, digitsCount - 1));
-            const selection = Selection.get(inputRef.current);
-            if (selectionRef.current && selection.start !== selection.end) {
-                return;
-            }
-            selectionRef.current = null;
-            if (value.length > digitNumberToSelect) {
-                Selection.set(inputRef.current, digitNumberToSelect, digitNumberToSelect + 1, 'forward');
-                selectionRef.current = digitNumberToSelect;
-            }
-            setCaretPosition(caretPosition);
-        });
-    };
-    return (jsxs("div", { ref: ref, "data-qa": dataQa, children: [jsxs("div", { "data-qa": "magritte-pincode-input-wrapper", className: classnames(styles.pincodeInput, {
+    useOTP((OPTCode) => {
+        if (!OPTCode) {
+            return;
+        }
+        updateValue(OPTCode);
+        setCaretPosition(OPTCode.length - 1);
+        setInputKey((key) => key + 1);
+    }, requestCredentials);
+    // внутри этого хука безопасно не мемоизировать рефколлбек, коллбек который будет возвращен будет мемоизирован
+    // и не будет меняться при изменении ссылок на аргументы
+    const inputRefMultiplexer = useMultipleRefs(inputRef, (element) => {
+        if (element && focused) {
+            element.focus();
+        }
+    });
+    useLayoutEffect(() => {
+        if (!containerRef.current || !ghostLastDigitRef.current) {
+            return;
+        }
+        const lastWidth = ghostLastDigitRef.current.getBoundingClientRect().width;
+        containerRef.current.style.setProperty('--magritte-pincode-last-digit-width', `${lastWidth}px`);
+    }, [caretPosition, value]);
+    const caretPos = clamp(caretPosition, 0, value.length);
+    return (jsxs("div", { ref: ref, "data-qa": dataQa, tabIndex: 0, onFocus: () => inputRef.current?.focus(), children: [jsxs("div", { "data-qa": "magritte-pincode-input-wrapper", ref: containerRef, className: classnames(styles.pincodeInput, {
                     [styles.focus]: focused,
                     [styles.focusVisible]: focusVisible,
                     [styles.medium]: size === 'medium',
                     [styles.invalid]: invalid,
-                }), onClick: (event) => {
+                }), onMouseDown: (event) => {
+                    if (event.target === inputRef.current) {
+                        return;
+                    }
+                    event.preventDefault();
                     const caretPosition = Math.min(Number(event.target?.dataset?.digitIndex ?? value.length), value.length);
-                    inputRef.current?.focus();
-                    moveCaretTo(inputRef, caretPosition);
-                    refineCaretPosition();
-                },
-                // Этот обработчик нужен для того, чтобы не сбрасывался фокус при клике на дочерние элементы
-                // Визуально это проявляется как моргание цвета рамки если клик происходит когда инпут в фокусе
-                onMouseDown: (event) => event.preventDefault(), style: { '--magritte-pincode-digits-count': digitsCount }, children: [jsx("input", { ref: inputRef, autoComplete: "one-time-code", pattern: `\\d{${digitsCount}}`, "data-qa": "magritte-pincode-input-field", className: styles.digitsInput, type: "text", inputMode: "numeric", maxLength: digitsCount, value: value, onFocus: (event) => {
+                    if (!focused) {
+                        inputRef.current?.focus();
+                    }
+                    setCaretPosition(caretPosition);
+                }, style: {
+                    '--magritte-pincode-digits-count': digitsCount,
+                    '--magritte-pincode-caret-position': caretPos,
+                }, children: [jsx("input", { ref: inputRefMultiplexer, tabIndex: -1, autoComplete: "one-time-code", pattern: `\\d{${digitsCount}}`, "data-qa": "magritte-pincode-input-field", className: styles.digitsInput, type: "text", inputMode: "numeric", maxLength: digitsCount,
+                        // оставляем инпут всегда пустым, т.к. он нам нужен только для показа контекстного меню вставки,
+                        // обработки события вставки и обработки фокуса
+                        value: "", onChange: (event) => {
+                            if (!/\d/.test(event.target.value)) {
+                                return;
+                            }
+                            // Вставку в инпут и нажатия клавиш цифр мы перехватываем
+                            // поэтому если попали сюда, значит использовался autofill (например из sms).
+                            // На iOS autofill генерит несколько событий, по количеству заполняемых символов.
+                            // Мы не меняем значение самого инпута, поэтому каждое событие будет содержать только
+                            // один символ. Сохраняем их и когда их количество достигнет ожидаемого (digitsCount)
+                            // подставляем в значение
+                            autofillValueRef.current += event.target.value;
+                            if (autofillValueRef.current.length >= digitsCount) {
+                                updateValue(autofillValueRef.current.slice(0, digitsCount));
+                                autofillValueRef.current = '';
+                                setCaretPosition(digitsCount - 1);
+                                // Кроме того при автозаполнении инпут красится в желтый цвет, что в нашем случае
+                                // недопустимо т.к. инпут располагается поверх цифр и должен быть прозрачным. Это нельзя
+                                // переопределить с помощью css, есть только хак когда задают transition для цвета фона
+                                // это замедлит смену цвета, но в конечном итоге инпут все же поменяет цвет фона.
+                                // Поэтому меняем key у инпута, чтобы он перемонтировался и браузер не определял его как
+                                // автозаполненный инпут. Важно после перемонтирования не забыть вернуть в него фокус,
+                                // иначе для вызова меню вставки потребуется два тапа вместо одного.
+                                setInputKey((key) => key + 1);
+                            }
+                        }, onFocus: (event) => {
+                            if (focused) {
+                                return;
+                            }
                             onFocus?.(event);
-                            refineCaretPosition();
                             if (!event.defaultPrevented) {
                                 setFocused(true);
                                 setFocusVisible(!!inputRef.current?.classList.contains('focus-visible'));
                                 if (invalid) {
                                     // По спеке если инпут помечен как invalid при фокусе содержимое должно очищаться
                                     updateValue('');
+                                    setCaretPosition(0);
                                 }
                             }
                         }, onBlur: (event) => {
@@ -90,73 +118,64 @@ const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'lar
                                 return;
                             }
                             const isLeft = keyboardMatch(event, keyboardKeys.ArrowLeft);
-                            // Если одна из цифр выделена, и мы пытаемся передвинут каретку влево с помощью клавиатуры,
-                            // нужно делать это вручную, так как цифры мы выделяем справо на лево, и при нативном
-                            // перемещении курсо просто встанет перед выделенной цифрой, а refineCaretPosition yсова её
-                            // выделит и поставит каретку в исходное положение. Т.е. без этого кода не получится
-                            // передвинуть каретку влево, если выделена цифра
-                            if (isLeft && selectionRef.current !== null) {
+                            const isRight = keyboardMatch(event, keyboardKeys.ArrowRight);
+                            if (isLeft || isRight) {
                                 event.preventDefault();
-                                moveCaretTo(inputRef, Math.max(0, Math.min(selectionRef.current - 1, digitsCount - 1)), refineCaretPosition);
+                                setCaretPosition((caretPosition) => clamp(caretPosition + (isRight ? 1 : -1), 0, value.length));
                                 return;
                             }
-                            if (keyboardMatch(event, keyboardKeys.Backspace) && selectionRef.current !== null) {
+                            if (keyboardMatches(event, keyboardKeys.DigitKeys)) {
+                                updateValue(`${value.slice(0, caretPos)}${event.key}${value.slice(caretPos + 1)}`);
+                                setCaretPosition((caretPosition) => clamp(caretPosition + 1, 0, digitsCount - 1));
+                                event.preventDefault();
+                                return;
+                            }
+                            const isBackspace = keyboardMatch(event, keyboardKeys.Backspace);
+                            const isDelete = keyboardMatch(event, keyboardKeys.Delete);
+                            if (isBackspace || isDelete) {
                                 // При нажатии backspace действует следующая логика:
                                 // Если каретка находится в позиции последней введенной цифры, то удаляем её
                                 // и оставляем каретку на той же позиции
                                 // Если каретка находится в другой позиции, то удаляем цифру слева от каретки и
                                 // сдвигаем каретку влево
+                                const isLastDigit = caretPos === value.length - 1;
+                                const deleteIndex = clamp(caretPos - (isDelete || isLastDigit ? 0 : 1), 0, digitsCount - 1);
+                                updateValue(`${value.slice(0, deleteIndex)}${value.slice(deleteIndex + 1)}`);
+                                setCaretPosition((caretPosition) => {
+                                    const newPosition = isLastDigit || isDelete ? caretPosition : Math.max(caretPosition - 1, 0);
+                                    return newPosition;
+                                });
                                 event.preventDefault();
-                                const deleteIndex = selectionRef.current === value.length - 1
-                                    ? selectionRef.current
-                                    : Math.max(selectionRef.current - 1, 0);
-                                const newValue = `${value.slice(0, deleteIndex)}${value.slice(deleteIndex + 1)}`;
-                                updateValue(newValue);
-                                if (selectionRef.current !== value.length - 1) {
-                                    moveCaretTo(inputRef, Math.max(selectionRef.current - 1, 0), refineCaretPosition);
-                                    return;
-                                }
-                            }
-                            refineCaretPosition();
-                        }, onChange: (event) => {
-                            updateValue(event.target.value);
-                            if (selectionRef.current !== null) {
-                                // При изменении, если была выделена цифра, то каретку надо сдвинуть на следующую
-                                // позицию вручную
-                                moveCaretTo(inputRef, selectionRef.current + 1, refineCaretPosition);
-                                return;
                             }
-                            refineCaretPosition();
                         }, onPaste: (event) => {
                             event.preventDefault();
                             const pasteValue = event.clipboardData.getData('text').replace(/\D/g, '');
                             if (pasteValue.length === digitsCount) {
                                 updateValue(pasteValue);
-                                moveCaretTo(inputRef, digitsCount, refineCaretPosition);
+                                setCaretPosition(digitsCount - 1);
                                 return;
                             }
-                            const caretPosition = Math.min(getCaretPosition(inputRef), selectionRef.current ?? value.length);
-                            const newValue = `${value.slice(0, caretPosition)}${pasteValue}${value.slice(caretPosition + pasteValue.length)}`.slice(0, digitsCount);
+                            const newValue = `${value.slice(0, caretPos)}${pasteValue}${value.slice(caretPos + pasteValue.length)}`.slice(0, digitsCount);
                             updateValue(newValue);
-                            moveCaretTo(inputRef, caretPosition + pasteValue.length, refineCaretPosition);
-                        } }), jsx("div", { className: styles.digitBoxContainer, children: Array.from({ length: digitsCount }).map((_, index) => (jsx("div", { className: classnames(styles.digitBox), "data-digit-index": index, children: jsx("span", { className: classnames(styles.valueContainer, {
+                            setCaretPosition(Math.min(digitsCount - 1, caretPos + pasteValue.length));
+                        } }, inputKey), jsx("div", { className: styles.digitBoxContainer, children: Array.from({ length: digitsCount }).map((_, index) => (jsx("div", { className: classnames(styles.digitBox), "data-digit-index": index, children: jsx("span", { className: classnames(styles.valueContainer, {
                                     // в позицию ничего не введено, и каретка не находится в этой позиции
                                     [styles.placeholder]: index >= value.length &&
                                         (!focused ||
-                                            (index !== caretPosition &&
-                                                !(caretPosition === digitsCount && index === digitsCount - 1))),
+                                            (index !== caretPos &&
+                                                !(caretPos === digitsCount && index === digitsCount - 1))),
                                     // в позицию введена цифра, каретка находится в этой позиции, фокус
                                     // установлен в инпут, это не крайняя справа цифра из введенных
-                                    [styles.caretLeft]: index === caretPosition && index !== value.length - 1 && focused,
+                                    [styles.caretLeft]: index === caretPos && index !== value.length - 1 && focused,
                                     // в позицию введена цифра, каретка находится в этой позиции, либо в следующей
                                     // если введены все цифры (потому что при вводе последней цифры каретка
                                     // должна уходить за нее), фокус установлен в инпут, это крайняя справа цифра
                                     // из введенных
-                                    [styles.caretRight]: (index === caretPosition ||
-                                        (index === digitsCount - 1 && index === caretPosition - 1)) &&
+                                    [styles.caretRight]: (index === caretPos ||
+                                        (index === digitsCount - 1 && index === caretPos - 1)) &&
                                         index === value.length - 1 &&
                                         focused,
-                                }), "data-qa": `magritte-pincode-input-digit-${index}`, children: value[index] || (caretPosition === index && focused ? '' : '•') }) }, index))) })] }), jsx(FormHelper, { invalid: invalid, description: description, errorMessage: errorMessage, "data-qa": "magritte-pincode-input-message" })] }));
+                                }), "data-qa": `magritte-pincode-input-digit-${index}`, children: value[index] || (caretPos === index && focused ? '' : '•') }) }, index))) }), jsx("div", { className: styles.ghostValue, ref: ghostLastDigitRef, children: value.slice(caretPos, caretPos + 1) })] }), jsx(FormHelper, { invalid: invalid, description: description, errorMessage: errorMessage, "data-qa": "magritte-pincode-input-message" })] }));
 });
 PincodeInput.displayName = 'PincodeInput';

package/PincodeInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PincodeInput.js","sources":["../src/PincodeInput.tsx"],"sourcesContent":["import { type CSSProperties, type FocusEventHandler, useRef, useState, RefObject, forwardRef } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { Selection } from '@hh.ru/magritte-common-text-selection';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\n\nimport styles from './pincodeInput.less';\n\nconst moveCaretTo = (ref: RefObject<HTMLInputElement>, position: number, callback?: VoidFunction) =>\n // Каретка сдвигается при изменении содержимого инпута автоматически\n // Поэтому двигаем её асинхронно, чтобы сдвиг происходил после нативного, иначе она окажется не в нужной позиции\n requestAnimationFrame(() => {\n if (ref.current) {\n Selection.setCaretPosition(ref.current, position);\n callback?.();\n }\n });\n\nconst getCaretPosition = (ref: RefObject<HTMLInputElement>) =>\n ref.current ? (Selection.getCaretPosition(ref.current) ?? 0) : 0;\n\nexport type PincodeInputSize = 'medium' \| 'large';\n\nexport interface PincodeInputProps {\n /*\n Количество цифр в пин-коде, если не указано будет выбрано автоматически\n * в зависимости от размера инпута ( medium - 6, large - 4)\n /\n digitsCount?: number \| null;\n /* Размер инпута /\n size?: PincodeInputSize;\n /* Обработчик изменений /\n onChange?: (value: string) => void;\n /* Обработчик фокуса /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /* Обработчик потери фокуса /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /* Флаг наличия ошибки /\n invalid?: boolean;\n /* Текст описания /\n description?: string;\n /* Текст сообщения об ошибке /\n errorMessage?: string;\n 'data-qa'?: string;\n}\n\nexport const PincodeInput = forwardRef<HTMLDivElement, PincodeInputProps>(\n (\n {\n digitsCount: _digitsCount = null,\n size = 'large',\n invalid = false,\n onFocus,\n onBlur,\n onChange,\n description,\n errorMessage,\n 'data-qa': dataQa = 'magritte-pincode-input',\n },\n ref\n ) => {\n const digitsCount = _digitsCount ?? (size === 'medium' ? 6 : 4);\n const [value, setValue] = useState<string>('');\n const [caretPosition, setCaretPosition] = useState<number>(0);\n const [focused, setFocused] = useState(false);\n const [focusVisible, setFocusVisible] = useState(false);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const selectionRef = useRef<number \| null>(null);\n\n const updateValue = (newValue: string) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n const refineCaretPosition = () => {\n // если попытаться получить позицию каретки синхронно, то получим позицию до изменения\n requestAnimationFrame(() => {\n if (!inputRef.current) {\n return;\n }\n // Когда перемещаемся между цифрами если в позиции введена цифра, то ввод должен заменят именно её\n // а не сдвигать весь текст после нее врпаво, как в обычном инпуте.\n // Поэтому здесь проверяем если в позиции что-то введено, то не просто устанавливаем каретку, а выделяем\n // символ, чтобы при вводе он заменился\n const caretPosition = getCaretPosition(inputRef);\n const value = inputRef.current?.value ?? '';\n const digitNumberToSelect = Math.min(caretPosition, Math.min(value.length, digitsCount - 1));\n const selection = Selection.get(inputRef.current);\n if (selectionRef.current && selection.start !== selection.end) {\n return;\n }\n selectionRef.current = null;\n if (value.length > digitNumberToSelect) {\n Selection.set(inputRef.current, digitNumberToSelect, digitNumberToSelect + 1, 'forward');\n selectionRef.current = digitNumberToSelect;\n }\n setCaretPosition(caretPosition);\n });\n };\n\n return (\n <div ref={ref} data-qa={dataQa}>\n <div\n data-qa=\"magritte-pincode-input-wrapper\"\n className={classnames(styles.pincodeInput, {\n [styles.focus]: focused,\n [styles.focusVisible]: focusVisible,\n [styles.medium]: size === 'medium',\n [styles.invalid]: invalid,\n })}\n onClick={(event) => {\n const caretPosition = Math.min(\n Number((event.target as HTMLElement)?.dataset?.digitIndex ?? value.length),\n value.length\n );\n inputRef.current?.focus();\n moveCaretTo(inputRef, caretPosition);\n refineCaretPosition();\n }}\n // Этот обработчик нужен для того, чтобы не сбрасывался фокус при клике на дочерние элементы\n // Визуально это проявляется как моргание цвета рамки если клик происходит когда инпут в фокусе\n onMouseDown={(event) => event.preventDefault()}\n style={{ '--magritte-pincode-digits-count': digitsCount } as CSSProperties}\n >\n <input\n ref={inputRef}\n autoComplete=\"one-time-code\"\n pattern={`\\\\d{${digitsCount}}`}\n data-qa=\"magritte-pincode-input-field\"\n className={styles.digitsInput}\n type=\"text\"\n inputMode=\"numeric\"\n maxLength={digitsCount}\n value={value}\n onFocus={(event) => {\n onFocus?.(event);\n refineCaretPosition();\n if (!event.defaultPrevented) {\n setFocused(true);\n setFocusVisible(!!inputRef.current?.classList.contains('focus-visible'));\n if (invalid) {\n // По спеке если инпут помечен как invalid при фокусе содержимое должно очищаться\n updateValue('');\n }\n }\n }}\n onBlur={(event) => {\n onBlur?.(event);\n if (!event.defaultPrevented) {\n setFocused(false);\n setFocusVisible(false);\n }\n }}\n onKeyDown={(event) => {\n if (!inputRef.current) {\n return;\n }\n\n const isLeft = keyboardMatch(event, keyboardKeys.ArrowLeft);\n\n // Если одна из цифр выделена, и мы пытаемся передвинут каретку влево с помощью клавиатуры,\n // нужно делать это вручную, так как цифры мы выделяем справо на лево, и при нативном\n // перемещении курсо просто встанет перед выделенной цифрой, а refineCaretPosition yсова её\n // выделит и поставит каретку в исходное положение. Т.е. без этого кода не получится\n // передвинуть каретку влево, если выделена цифра\n if (isLeft && selectionRef.current !== null) {\n event.preventDefault();\n moveCaretTo(\n inputRef,\n Math.max(0, Math.min(selectionRef.current - 1, digitsCount - 1)),\n refineCaretPosition\n );\n return;\n }\n\n if (keyboardMatch(event, keyboardKeys.Backspace) && selectionRef.current !== null) {\n // При нажатии backspace действует следующая логика:\n // Если каретка находится в позиции последней введенной цифры, то удаляем её\n // и оставляем каретку на той же позиции\n // Если каретка находится в другой позиции, то удаляем цифру слева от каретки и\n // сдвигаем каретку влево\n event.preventDefault();\n const deleteIndex =\n selectionRef.current === value.length - 1\n ? selectionRef.current\n : Math.max(selectionRef.current - 1, 0);\n const newValue = `${value.slice(0, deleteIndex)}${value.slice(deleteIndex + 1)}`;\n updateValue(newValue);\n if (selectionRef.current !== value.length - 1) {\n moveCaretTo(inputRef, Math.max(selectionRef.current - 1, 0), refineCaretPosition);\n return;\n }\n }\n\n refineCaretPosition();\n }}\n onChange={(event) => {\n updateValue(event.target.value);\n if (selectionRef.current !== null) {\n // При изменении, если была выделена цифра, то каретку надо сдвинуть на следующую\n // позицию вручную\n moveCaretTo(inputRef, selectionRef.current + 1, refineCaretPosition);\n return;\n }\n refineCaretPosition();\n }}\n onPaste={(event) => {\n event.preventDefault();\n const pasteValue = event.clipboardData.getData('text').replace(/\\D/g, '');\n if (pasteValue.length === digitsCount) {\n updateValue(pasteValue);\n moveCaretTo(inputRef, digitsCount, refineCaretPosition);\n return;\n }\n\n const caretPosition = Math.min(\n getCaretPosition(inputRef),\n selectionRef.current ?? value.length\n );\n const newValue =\n `${value.slice(0, caretPosition)}${pasteValue}${value.slice(caretPosition + pasteValue.length)}`.slice(\n 0,\n digitsCount\n );\n updateValue(newValue);\n moveCaretTo(inputRef, caretPosition + pasteValue.length, refineCaretPosition);\n }}\n />\n <div className={styles.digitBoxContainer}>\n {/ eslint-disable-next-line no-restricted-properties */}\n {Array.from({ length: digitsCount }).map((_, index) => (\n <div key={index} className={classnames(styles.digitBox)} data-digit-index={index}>\n <span\n className={classnames(styles.valueContainer, {\n // в позицию ничего не введено, и каретка не находится в этой позиции\n [styles.placeholder]:\n index >= value.length &&\n (!focused \|\|\n (index !== caretPosition &&\n !(caretPosition === digitsCount && index === digitsCount - 1))),\n // в позицию введена цифра, каретка находится в этой позиции, фокус\n // установлен в инпут, это не крайняя справа цифра из введенных\n [styles.caretLeft]:\n index === caretPosition && index !== value.length - 1 && focused,\n // в позицию введена цифра, каретка находится в этой позиции, либо в следующей\n // если введены все цифры (потому что при вводе последней цифры каретка\n // должна уходить за нее), фокус установлен в инпут, это крайняя справа цифра\n // из введенных\n [styles.caretRight]:\n (index === caretPosition \|\|\n (index === digitsCount - 1 && index === caretPosition - 1)) &&\n index === value.length - 1 &&\n focused,\n })}\n data-qa={`magritte-pincode-input-digit-${index}`}\n >\n {value[index] \|\| (caretPosition === index && focused ? '' : '•')}\n </span>\n </div>\n ))}\n </div>\n </div>\n <FormHelper\n invalid={invalid}\n description={description}\n errorMessage={errorMessage}\n data-qa=\"magritte-pincode-input-message\"\n />\n </div>\n );\n }\n);\n\nPincodeInput.displayName = 'PincodeInput';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
1	+ {"version":3,"file":"PincodeInput.js","sources":["../src/PincodeInput.tsx"],"sourcesContent":["import { type CSSProperties, type FocusEventHandler, useRef, useState, forwardRef, useLayoutEffect } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatch, keyboardMatches } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { useOTP } from '@hh.ru/magritte-ui-pincode-input/useOTP';\n\nimport styles from './pincodeInput.less';\n\nexport type PincodeInputSize = 'medium' \| 'large';\n\nexport interface PincodeInputProps {\n /*\n Количество цифр в пин-коде, если не указано будет выбрано автоматически\n * в зависимости от размера инпута ( medium - 6, large - 4)\n /\n digitsCount?: number \| null;\n /* Размер инпута /\n size?: PincodeInputSize;\n /* Обработчик изменений /\n onChange?: (value: string) => void;\n /* Обработчик фокуса /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /* Обработчик потери фокуса /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /* Флаг наличия ошибки /\n invalid?: boolean;\n /* Текст описания /\n description?: string;\n /* Текст сообщения об ошибке /\n errorMessage?: string;\n /\n Если код предполагается отправлять посредством sms то для автозаполнения на Android требуется получение от\n * пользователя разрешения на доступ к sms. Для этого используется WebOTP API. Часть этого API находится в\n * статусе экспериментального и поддерживается далеко не всеми браузерами. В браузерах которые поддерживают это\n * API у пользователя будет запрошено разрешение, поэтому используйте этот флаг только в случае отправки OTP\n * через sms.\n /\n requestCredentials?: boolean;\n 'data-qa'?: string;\n}\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nexport const PincodeInput = forwardRef<HTMLDivElement, PincodeInputProps>(\n (\n {\n digitsCount: _digitsCount = null,\n size = 'large',\n invalid = false,\n onFocus,\n onBlur,\n onChange,\n description,\n errorMessage,\n requestCredentials = false,\n 'data-qa': dataQa = 'magritte-pincode-input',\n },\n ref\n ) => {\n const digitsCount = _digitsCount ?? (size === 'medium' ? 6 : 4);\n const [value, setValue] = useState<string>('');\n const [caretPosition, setCaretPosition] = useState<number>(0);\n const [focused, setFocused] = useState(false);\n const [focusVisible, setFocusVisible] = useState(false);\n const [inputKey, setInputKey] = useState(0);\n\n const ghostLastDigitRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const autofillValueRef = useRef('');\n\n const updateValue = (newValue: string) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n useOTP((OPTCode) => {\n if (!OPTCode) {\n return;\n }\n updateValue(OPTCode);\n setCaretPosition(OPTCode.length - 1);\n setInputKey((key) => key + 1);\n }, requestCredentials);\n\n // внутри этого хука безопасно не мемоизировать рефколлбек, коллбек который будет возвращен будет мемоизирован\n // и не будет меняться при изменении ссылок на аргументы\n const inputRefMultiplexer = useMultipleRefs(inputRef, (element) => {\n if (element && focused) {\n element.focus();\n }\n });\n\n useLayoutEffect(() => {\n if (!containerRef.current \|\| !ghostLastDigitRef.current) {\n return;\n }\n\n const lastWidth = ghostLastDigitRef.current.getBoundingClientRect().width;\n containerRef.current.style.setProperty('--magritte-pincode-last-digit-width', `${lastWidth}px`);\n }, [caretPosition, value]);\n\n const caretPos = clamp(caretPosition, 0, value.length);\n\n return (\n <div ref={ref} data-qa={dataQa} tabIndex={0} onFocus={() => inputRef.current?.focus()}>\n <div\n data-qa=\"magritte-pincode-input-wrapper\"\n ref={containerRef}\n className={classnames(styles.pincodeInput, {\n [styles.focus]: focused,\n [styles.focusVisible]: focusVisible,\n [styles.medium]: size === 'medium',\n [styles.invalid]: invalid,\n })}\n onMouseDown={(event) => {\n if (event.target === inputRef.current) {\n return;\n }\n event.preventDefault();\n\n const caretPosition = Math.min(\n Number((event.target as HTMLElement)?.dataset?.digitIndex ?? value.length),\n value.length\n );\n\n if (!focused) {\n inputRef.current?.focus();\n }\n\n setCaretPosition(caretPosition);\n }}\n style={\n {\n '--magritte-pincode-digits-count': digitsCount,\n '--magritte-pincode-caret-position': caretPos,\n } as CSSProperties\n }\n >\n <input\n key={inputKey}\n ref={inputRefMultiplexer}\n tabIndex={-1}\n autoComplete=\"one-time-code\"\n pattern={`\\\\d{${digitsCount}}`}\n data-qa=\"magritte-pincode-input-field\"\n className={styles.digitsInput}\n type=\"text\"\n inputMode=\"numeric\"\n maxLength={digitsCount}\n // оставляем инпут всегда пустым, т.к. он нам нужен только для показа контекстного меню вставки,\n // обработки события вставки и обработки фокуса\n value=\"\"\n onChange={(event) => {\n if (!/\\d/.test(event.target.value)) {\n return;\n }\n\n // Вставку в инпут и нажатия клавиш цифр мы перехватываем\n // поэтому если попали сюда, значит использовался autofill (например из sms).\n // На iOS autofill генерит несколько событий, по количеству заполняемых символов.\n // Мы не меняем значение самого инпута, поэтому каждое событие будет содержать только\n // один символ. Сохраняем их и когда их количество достигнет ожидаемого (digitsCount)\n // подставляем в значение\n autofillValueRef.current += event.target.value;\n\n if (autofillValueRef.current.length >= digitsCount) {\n updateValue(autofillValueRef.current.slice(0, digitsCount));\n autofillValueRef.current = '';\n setCaretPosition(digitsCount - 1);\n\n // Кроме того при автозаполнении инпут красится в желтый цвет, что в нашем случае\n // недопустимо т.к. инпут располагается поверх цифр и должен быть прозрачным. Это нельзя\n // переопределить с помощью css, есть только хак когда задают transition для цвета фона\n // это замедлит смену цвета, но в конечном итоге инпут все же поменяет цвет фона.\n // Поэтому меняем key у инпута, чтобы он перемонтировался и браузер не определял его как\n // автозаполненный инпут. Важно после перемонтирования не забыть вернуть в него фокус,\n // иначе для вызова меню вставки потребуется два тапа вместо одного.\n setInputKey((key) => key + 1);\n }\n }}\n onFocus={(event) => {\n if (focused) {\n return;\n }\n onFocus?.(event);\n if (!event.defaultPrevented) {\n setFocused(true);\n setFocusVisible(!!inputRef.current?.classList.contains('focus-visible'));\n if (invalid) {\n // По спеке если инпут помечен как invalid при фокусе содержимое должно очищаться\n updateValue('');\n setCaretPosition(0);\n }\n }\n }}\n onBlur={(event) => {\n onBlur?.(event);\n if (!event.defaultPrevented) {\n setFocused(false);\n setFocusVisible(false);\n }\n }}\n onKeyDown={(event) => {\n if (!inputRef.current) {\n return;\n }\n\n const isLeft = keyboardMatch(event, keyboardKeys.ArrowLeft);\n const isRight = keyboardMatch(event, keyboardKeys.ArrowRight);\n if (isLeft \|\| isRight) {\n event.preventDefault();\n setCaretPosition((caretPosition) =>\n clamp(caretPosition + (isRight ? 1 : -1), 0, value.length)\n );\n return;\n }\n\n if (keyboardMatches(event, keyboardKeys.DigitKeys)) {\n updateValue(`${value.slice(0, caretPos)}${event.key}${value.slice(caretPos + 1)}`);\n setCaretPosition((caretPosition) => clamp(caretPosition + 1, 0, digitsCount - 1));\n event.preventDefault();\n return;\n }\n\n const isBackspace = keyboardMatch(event, keyboardKeys.Backspace);\n const isDelete = keyboardMatch(event, keyboardKeys.Delete);\n\n if (isBackspace \|\| isDelete) {\n // При нажатии backspace действует следующая логика:\n // Если каретка находится в позиции последней введенной цифры, то удаляем её\n // и оставляем каретку на той же позиции\n // Если каретка находится в другой позиции, то удаляем цифру слева от каретки и\n // сдвигаем каретку влево\n\n const isLastDigit = caretPos === value.length - 1;\n const deleteIndex = clamp(\n caretPos - (isDelete \|\| isLastDigit ? 0 : 1),\n 0,\n digitsCount - 1\n );\n updateValue(`${value.slice(0, deleteIndex)}${value.slice(deleteIndex + 1)}`);\n setCaretPosition((caretPosition) => {\n const newPosition =\n isLastDigit \|\| isDelete ? caretPosition : Math.max(caretPosition - 1, 0);\n\n return newPosition;\n });\n\n event.preventDefault();\n }\n }}\n onPaste={(event) => {\n event.preventDefault();\n const pasteValue = event.clipboardData.getData('text').replace(/\\D/g, '');\n if (pasteValue.length === digitsCount) {\n updateValue(pasteValue);\n setCaretPosition(digitsCount - 1);\n return;\n }\n\n const newValue =\n `${value.slice(0, caretPos)}${pasteValue}${value.slice(caretPos + pasteValue.length)}`.slice(\n 0,\n digitsCount\n );\n updateValue(newValue);\n setCaretPosition(Math.min(digitsCount - 1, caretPos + pasteValue.length));\n }}\n />\n <div className={styles.digitBoxContainer}>\n {/ eslint-disable-next-line no-restricted-properties */}\n {Array.from({ length: digitsCount }).map((_, index) => (\n <div key={index} className={classnames(styles.digitBox)} data-digit-index={index}>\n <span\n className={classnames(styles.valueContainer, {\n // в позицию ничего не введено, и каретка не находится в этой позиции\n [styles.placeholder]:\n index >= value.length &&\n (!focused \|\|\n (index !== caretPos &&\n !(caretPos === digitsCount && index === digitsCount - 1))),\n // в позицию введена цифра, каретка находится в этой позиции, фокус\n // установлен в инпут, это не крайняя справа цифра из введенных\n [styles.caretLeft]: index === caretPos && index !== value.length - 1 && focused,\n // в позицию введена цифра, каретка находится в этой позиции, либо в следующей\n // если введены все цифры (потому что при вводе последней цифры каретка\n // должна уходить за нее), фокус установлен в инпут, это крайняя справа цифра\n // из введенных\n [styles.caretRight]:\n (index === caretPos \|\|\n (index === digitsCount - 1 && index === caretPos - 1)) &&\n index === value.length - 1 &&\n focused,\n })}\n data-qa={`magritte-pincode-input-digit-${index}`}\n >\n {value[index] \|\| (caretPos === index && focused ? '' : '•')}\n </span>\n </div>\n ))}\n </div>\n <div className={styles.ghostValue} ref={ghostLastDigitRef}>\n {value.slice(caretPos, caretPos + 1)}\n </div>\n </div>\n <FormHelper\n invalid={invalid}\n description={description}\n errorMessage={errorMessage}\n data-qa=\"magritte-pincode-input-message\"\n />\n </div>\n );\n }\n);\n\nPincodeInput.displayName = 'PincodeInput';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/index.css CHANGED Viewed

@@ -4,6 +4,7 @@
   --magritte-color-component-input-stroke-state-field-focused-v21-1-0:#0070ff;
   --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-1-0:#0070ff7a;
   --magritte-color-component-input-stroke-state-field-invalid-v21-1-0:#ff4d3a;
+  --magritte-color-component-input-stroke-state-negative-focused-accessible-v21-1-0:#ff4d3a7a;
   --magritte-color-component-input-background-field-v21-1-0:#ffffff;
   --magritte-color-component-input-background-state-field-hovered-v21-1-0:#ffffff;
   --magritte-color-component-input-background-state-field-focused-v21-1-0:#ffffff;
@@ -28,6 +29,7 @@
   --magritte-color-component-input-stroke-state-field-focused-v21-1-0:#0070ff;
   --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-1-0:#0070ff7a;
   --magritte-color-component-input-stroke-state-field-invalid-v21-1-0:#ff4d3a;
+  --magritte-color-component-input-stroke-state-negative-focused-accessible-v21-1-0:#ff4d3a7a;
   --magritte-color-component-input-background-field-v21-1-0:#1B1B1B;
   --magritte-color-component-input-background-state-field-hovered-v21-1-0:#1B1B1B;
   --magritte-color-component-input-background-state-field-focused-v21-1-0:#1B1B1B;
@@ -39,17 +41,18 @@
   --magritte-color-component-input-text-state-placeholder-focused-v21-1-0:#535353;
   --magritte-color-component-input-text-state-placeholder-invalid-v21-1-0:#535353;
 }
-.magritte-pincode-input___RpWyq_1-0-2{
+.magritte-pincode-input___RpWyq_1-1-0{
   --magritte-pincode-input-padding-horizontal:20px;
   --magritte-pincode-input-padding-vertical:8px;
   --magritte-pincode-input-gap:6px;
+  --magritte-digit-box-width:calc((100% - (var(--magritte-pincode-input-gap) * (var(--magritte-pincode-digits-count) - 1)) - (var(--magritte-pincode-input-padding-horizontal) * 2)) / var(--magritte-pincode-digits-count));
   box-sizing:border-box;
   height:88px;
-  border:var(--magritte-semantic-border-width-default-v21-1-0) solid var(--magritte-color-component-input-stroke-field-v21-1-0);
+  box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v21-1-0) var(--magritte-color-component-input-stroke-field-v21-1-0);
   border-radius:var(--magritte-static-border-radius-450-v21-1-0);
   background-color:var(--magritte-color-component-input-background-field-v21-1-0);
-  padding:var(--magritte-pincode-input-padding-vertical) var(--magritte-pincode-input-padding-horizontal);
   position:relative;
+  overflow:clip;
   cursor:text;
   font-family:var(--magritte-font-families-body-v21-1-0);
   font-size:32px;
@@ -58,7 +61,7 @@
   line-height:40px;
   color:var(--magritte-color-component-input-text-state-content-focused-v21-1-0);
 }
-.magritte-pincode-input___RpWyq_1-0-2.magritte-medium___wfRSc_1-0-2{
+.magritte-pincode-input___RpWyq_1-1-0.magritte-medium___wfRSc_1-1-0{
   font-size:28px;
   --magritte-pincode-input-padding-horizontal:16px;
   --magritte-pincode-input-padding-vertical:6px;
@@ -66,78 +69,102 @@
   border-radius:var(--magritte-static-border-radius-300-v21-1-0);
   height:76px;
 }
-.magritte-pincode-input___RpWyq_1-0-2:hover{
-  border-color:var(--magritte-color-component-input-stroke-state-field-hovered-v21-1-0);
+.magritte-pincode-input___RpWyq_1-1-0:hover{
+  box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v21-1-0) var(--magritte-color-component-input-stroke-state-field-hovered-v21-1-0);
   background-color:var(--magritte-color-component-input-background-state-field-hovered-v21-1-0);
 }
-.magritte-pincode-input___RpWyq_1-0-2:hover .magritte-placeholder___10kQ0_1-0-2{
+.magritte-pincode-input___RpWyq_1-1-0:hover .magritte-placeholder___10kQ0_1-1-0{
   color:var(--magritte-color-component-input-text-state-placeholder-hovered-v21-1-0);
 }
-.magritte-pincode-input___RpWyq_1-0-2.magritte-focus___IuhXb_1-0-2{
-  border:var(--magritte-semantic-border-width-focused-v21-1-0) solid var(--magritte-color-component-input-stroke-state-field-focused-v21-1-0);
+.magritte-pincode-input___RpWyq_1-1-0.magritte-focus___IuhXb_1-1-0{
+  box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-focused-v21-1-0) var(--magritte-color-component-input-stroke-state-field-focused-v21-1-0);
   background-color:var(--magritte-color-component-input-background-state-field-focused-v21-1-0);
-  padding:var(--magritte-pincode-input-padding-vertical) calc(var(--magritte-pincode-input-padding-horizontal) - 1px);
 }
-.magritte-pincode-input___RpWyq_1-0-2.magritte-focus___IuhXb_1-0-2 .magritte-placeholder___10kQ0_1-0-2{
+.magritte-pincode-input___RpWyq_1-1-0.magritte-focus___IuhXb_1-1-0 .magritte-placeholder___10kQ0_1-1-0{
   color:var(--magritte-color-component-input-text-state-placeholder-focused-v21-1-0);
 }
-.magritte-pincode-input___RpWyq_1-0-2.magritte-invalid___hB8h2_1-0-2{
-  border:var(--magritte-semantic-border-width-default-v21-1-0) solid var(--magritte-color-component-input-stroke-state-field-invalid-v21-1-0);
+.magritte-pincode-input___RpWyq_1-1-0.magritte-invalid___hB8h2_1-1-0{
+  box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v21-1-0) var(--magritte-color-component-input-stroke-state-field-invalid-v21-1-0);
   background-color:var(--magritte-color-component-input-background-state-field-invalid-v21-1-0);
 }
-.magritte-pincode-input___RpWyq_1-0-2.magritte-invalid___hB8h2_1-0-2 .magritte-placeholder___10kQ0_1-0-2{
+.magritte-pincode-input___RpWyq_1-1-0.magritte-invalid___hB8h2_1-1-0 .magritte-placeholder___10kQ0_1-1-0{
   color:var(--magritte-color-component-input-text-state-placeholder-invalid-v21-1-0);
 }
-.magritte-pincode-input___RpWyq_1-0-2.magritte-focus-visible___BN1eD_1-0-2{
+.magritte-pincode-input___RpWyq_1-1-0.magritte-focus-visible___BN1eD_1-1-0{
   outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v21-1-0) solid 4px;
 }
-.magritte-digit-box-container___BqMWw_1-0-2{
+.magritte-pincode-input___RpWyq_1-1-0.magritte-focus-visible___BN1eD_1-1-0.magritte-invalid___hB8h2_1-1-0{
+  outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v21-1-0);
+}
+.magritte-digit-box-container___BqMWw_1-1-0{
   display:flex;
   gap:var(--magritte-pincode-input-gap);
-  position:relative;
-  justify-content:stretch;
+  position:absolute;
+  inset:0;
+  justify-content:center;
   align-items:stretch;
   height:100%;
+  pointer-events:none;
+  z-index:0;
 }
-.magritte-digit-box___6J0Q2_1-0-2{
-  flex:0 0 calc((100% - (var(--magritte-pincode-input-gap) * (var(--magritte-pincode-digits-count) - 1))) / var(--magritte-pincode-digits-count));
+.magritte-digit-box___6J0Q2_1-1-0{
+  flex:0 0 var(--magritte-digit-box-width);
+  pointer-events:auto;
   display:flex;
   align-items:center;
   justify-content:center;
+  user-select:none;
+}
+.magritte-digit-box___6J0Q2_1-1-0::selection{
+  background-color:transparent;
 }
-.magritte-digits-input___4QeLj_1-0-2{
+.magritte-digit-box___6J0Q2_1-1-0::-moz-selection{
+  background-color:transparent;
+}
+.magritte-digits-input___4QeLj_1-1-0{
   display:block;
   position:absolute;
-  inset:0;
+  top:0;
+  bottom:0;
+  --last-digit-width:max(var(--magritte-pincode-last-digit-width), 10px);
+  padding:0 calc(var(--last-digit-width) / 2);
+  left:calc(var(--magritte-pincode-input-padding-horizontal) + (var(--magritte-pincode-caret-position) * var(--magritte-digit-box-width)) + (var(--magritte-pincode-caret-position) * var(--magritte-pincode-input-gap)) + (var(--magritte-digit-box-width) / 2) - var(--last-digit-width) / 2);
+  height:100%;
+  width:var(--last-digit-width);
+  z-index:1;
   border-width:0;
   background:none;
-  opacity:0;
+  color:transparent;
   outline:none;
   appearance:none;
   caret-color:transparent;
-  z-index:0;
-  pointer-events:none;
 }
-.magritte-digits-input___4QeLj_1-0-2::selection{
+.magritte-digits-input___4QeLj_1-1-0::selection{
   background-color:transparent;
+  appearance:none;
 }
-.magritte-digits-input___4QeLj_1-0-2::-moz-selection{
+.magritte-digits-input___4QeLj_1-1-0::-moz-selection{
   background-color:transparent;
+  appearance:none;
 }
-.magritte-caret-left___iZMuA_1-0-2::before,
-.magritte-caret-right___u8wNk_1-0-2::after{
+.magritte-caret-left___iZMuA_1-1-0::before,
+.magritte-caret-right___u8wNk_1-1-0::after{
   content:'';
   block-size:1em;
   border-left:1px solid var(--magritte-color-text-primary-v21-1-0);
-  animation:magritte-caret-blink___-bhg7_1-0-2 1s steps(1) infinite;
+  animation:magritte-caret-blink___-bhg7_1-1-0 1s steps(1) infinite;
 }
-.magritte-placeholder___10kQ0_1-0-2{
+.magritte-placeholder___10kQ0_1-1-0{
   color:var(--magritte-color-component-input-text-placeholder-v21-1-0);
 }
-.magritte-value-container___9JR3e_1-0-2{
+.magritte-value-container___9JR3e_1-1-0{
   pointer-events:none;
 }
-@keyframes magritte-caret-blink___-bhg7_1-0-2{
+.magritte-ghost-value___jPQwY_1-1-0{
+  display:inline-block;
+  visibility:hidden;
+}
+@keyframes magritte-caret-blink___-bhg7_1-1-0{
   50%{
     opacity:0;
   }

package/index.d.ts CHANGED Viewed

	@@ -1 +1,2 @@
1 1	export * from '@hh.ru/magritte-ui-pincode-input/PincodeInput';
2	+ export * from '@hh.ru/magritte-ui-theme-provider';

package/index.js CHANGED Viewed

@@ -1,9 +1,11 @@
 import './index.css';
 export { PincodeInput } from './PincodeInput.js';
+export * from '@hh.ru/magritte-ui-theme-provider';
 import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
-import '@hh.ru/magritte-common-text-selection';
+import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-form-helper';
+import './useOTP.js';
 //# sourceMappingURL=index.js.map

package/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-pincode-input",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -23,13 +23,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@hh.ru/magritte-common-keyboard": "4.0.4",
-    "@hh.ru/magritte-common-text-selection": "0.1.5",
-    "@hh.ru/magritte-ui-form-helper": "1.0.22"
+    "@hh.ru/magritte-common-keyboard": "4.1.0",
+    "@hh.ru/magritte-common-use-multiple-refs": "1.1.5",
+    "@hh.ru/magritte-ui-form-helper": "1.0.22",
+    "@hh.ru/magritte-ui-theme-provider": "1.1.37"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
     "react": ">=18.2.0"
   },
-  "gitHead": "6ae3dbd40e749f4dfd123c76295ec05afc2c79e0"
+  "gitHead": "68b593ee06af120092b98cf659bd9800e496de23"
 }

package/useOTP.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const useOTP: (callback: (OTPValue: string \| null) => void, requestCredentials?: boolean) => void;

package/useOTP.js ADDED Viewed

@@ -0,0 +1,29 @@
+import './index.css';
+import { useRef, useEffect } from 'react';
+const useOTP = (callback, requestCredentials = true) => {
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+    useEffect(() => {
+        if (!('OTPCredential' in window) || !requestCredentials) {
+            return undefined;
+        }
+        const ac = new AbortController();
+        navigator.credentials
+            .get({
+            otp: { transport: ['sms'] },
+            signal: ac.signal,
+        })
+            // ts не знает о типе OTPCredentials
+            .then((otp) => callbackRef.current(otp?.code))
+            .catch(() => {
+            /* WebOTP fail, do nothing */
+        });
+        return () => {
+            ac.abort();
+        };
+    }, [requestCredentials]);
+};
+export { useOTP };
+//# sourceMappingURL=useOTP.js.map

package/useOTP.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useOTP.js","sources":["../src/useOTP.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport const useOTP = (callback: (OTPValue: string | null) => void, requestCredentials: boolean = true): void => {\n const callbackRef = useRef(callback);\n callbackRef.current = callback;\n\n useEffect(() => {\n if (!('OTPCredential' in window) || !requestCredentials) {\n return undefined;\n }\n\n const ac = new AbortController();\n\n navigator.credentials\n .get({\n otp: { transport: ['sms'] },\n signal: ac.signal,\n } as CredentialRequestOptions)\n // ts не знает о типе OTPCredentials\n .then((otp) => callbackRef.current((otp as unknown as { code: string })?.code))\n .catch(() => {\n /* WebOTP fail, do nothing */\n });\n\n return () => {\n ac.abort();\n };\n }, [requestCredentials]);\n};\n"],"names":[],"mappings":";;AAEa,MAAA,MAAM,GAAG,CAAC,QAA2C,EAAE,kBAAA,GAA8B,IAAI,KAAU;AAC5G,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AACrC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IAE/B,SAAS,CAAC,MAAK;QACX,IAAI,EAAE,eAAe,IAAI,MAAM,CAAC,IAAI,CAAC,kBAAkB,EAAE;AACrD,YAAA,OAAO,SAAS,CAAC;SACpB;AAED,QAAA,MAAM,EAAE,GAAG,IAAI,eAAe,EAAE,CAAC;AAEjC,QAAA,SAAS,CAAC,WAAW;AAChB,aAAA,GAAG,CAAC;AACD,YAAA,GAAG,EAAE,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE;YAC3B,MAAM,EAAE,EAAE,CAAC,MAAM;SACQ,CAAC;;AAE7B,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,OAAO,CAAE,GAAmC,EAAE,IAAI,CAAC,CAAC;aAC9E,KAAK,CAAC,MAAK;;AAEZ,SAAC,CAAC,CAAC;AAEP,QAAA,OAAO,MAAK;YACR,EAAE,CAAC,KAAK,EAAE,CAAC;AACf,SAAC,CAAC;AACN,KAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAC7B;;;;"}