@hh.ru/magritte-ui-pincode-input 1.0.1 → 1.0.3

package/PincodeInput.js

@@ -1,82 +1,67 @@
 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 { FormHelper } from '@hh.ru/magritte-ui-form-helper';
 
-var styles = {"pincode-input":"magritte-pincode-input___RpWyq_1-0-1","pincodeInput":"magritte-pincode-input___RpWyq_1-0-1","medium":"magritte-medium___wfRSc_1-0-1","placeholder":"magritte-placeholder___10kQ0_1-0-1","focus":"magritte-focus___IuhXb_1-0-1","invalid":"magritte-invalid___hB8h2_1-0-1","focus-visible":"magritte-focus-visible___BN1eD_1-0-1","focusVisible":"magritte-focus-visible___BN1eD_1-0-1","digit-box-container":"magritte-digit-box-container___BqMWw_1-0-1","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-0-1","digit-box":"magritte-digit-box___6J0Q2_1-0-1","digitBox":"magritte-digit-box___6J0Q2_1-0-1","digits-input":"magritte-digits-input___4QeLj_1-0-1","digitsInput":"magritte-digits-input___4QeLj_1-0-1","caret-left":"magritte-caret-left___iZMuA_1-0-1","caretLeft":"magritte-caret-left___iZMuA_1-0-1","caret-right":"magritte-caret-right___u8wNk_1-0-1","caretRight":"magritte-caret-right___u8wNk_1-0-1","caret-blink":"magritte-caret-blink___-bhg7_1-0-1","caretBlink":"magritte-caret-blink___-bhg7_1-0-1","value-container":"magritte-value-container___9JR3e_1-0-1","valueContainer":"magritte-value-container___9JR3e_1-0-1"};
+var styles = {"pincode-input":"magritte-pincode-input___RpWyq_1-0-3","pincodeInput":"magritte-pincode-input___RpWyq_1-0-3","medium":"magritte-medium___wfRSc_1-0-3","placeholder":"magritte-placeholder___10kQ0_1-0-3","focus":"magritte-focus___IuhXb_1-0-3","invalid":"magritte-invalid___hB8h2_1-0-3","focus-visible":"magritte-focus-visible___BN1eD_1-0-3","focusVisible":"magritte-focus-visible___BN1eD_1-0-3","digit-box-container":"magritte-digit-box-container___BqMWw_1-0-3","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-0-3","digit-box":"magritte-digit-box___6J0Q2_1-0-3","digitBox":"magritte-digit-box___6J0Q2_1-0-3","digits-input":"magritte-digits-input___4QeLj_1-0-3","digitsInput":"magritte-digits-input___4QeLj_1-0-3","caret-left":"magritte-caret-left___iZMuA_1-0-3","caretLeft":"magritte-caret-left___iZMuA_1-0-3","caret-right":"magritte-caret-right___u8wNk_1-0-3","caretRight":"magritte-caret-right___u8wNk_1-0-3","caret-blink":"magritte-caret-blink___-bhg7_1-0-3","caretBlink":"magritte-caret-blink___-bhg7_1-0-3","value-container":"magritte-value-container___9JR3e_1-0-3","valueContainer":"magritte-value-container___9JR3e_1-0-3","ghost-value":"magritte-ghost-value___jPQwY_1-0-3","ghostValue":"magritte-ghost-value___jPQwY_1-0-3"};
 
-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 clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const noop = () => { };
 const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'large', invalid = false, onFocus, onBlur, onChange, description, errorMessage, '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 ghostLastDigitRef = useRef(null);
+    const containerRef = useRef(null);
     const inputRef = useRef(null);
-    const selectionRef = useRef(null);
+    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 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, {
+    const caretPos = clamp(caretPosition, 0, value.length);
+    return (jsxs("div", { ref: ref, "data-qa": dataQa, 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: inputRef, autoComplete: "one-time-code", pattern: `\\d{${digitsCount}}`, "data-qa": "magritte-pincode-input-field", className: styles.digitsInput, type: "text", inputMode: "numeric", maxLength: digitsCount, 
+                        // оставляем инпут всегда пустым, т.к. он нам нужен только для показа контекстного меню вставки,
+                        // обработки события вставки и обработки фокуса
+                        value: "", 
+                        // без change хендлера react пишет warning в консоль
+                        onChange: noop, onFocus: (event) => {
                             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 +75,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();
+                                setCaretPosition((caretPosition) => clamp(caretPosition + (isRight ? 1 : -1), 0, value.length));
+                                return;
+                            }
+                            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();
-                                moveCaretTo(inputRef, Math.max(0, Math.min(selectionRef.current - 1, digitsCount - 1)), refineCaretPosition);
                                 return;
                             }
-                            if (keyboardMatch(event, keyboardKeys.Backspace) && selectionRef.current !== null) {
+                            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);
+                            setCaretPosition(Math.min(digitsCount - 1, caretPos + pasteValue.length));
                         } }), 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

@@ -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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"}
+{"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 { FormHelper } from '@hh.ru/magritte-ui-form-helper';\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    'data-qa'?: string;\n}\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\nconst noop = () => {};\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 ghostLastDigitRef = useRef<HTMLDivElement>(null);\n        const containerRef = useRef<HTMLDivElement>(null);\n        const inputRef = useRef<HTMLInputElement>(null);\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 updateValue = (newValue: string) => {\n            setValue(newValue);\n            onChange?.(newValue);\n        };\n\n        const caretPos = clamp(caretPosition, 0, value.length);\n\n        return (\n            <div ref={ref} data-qa={dataQa}>\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                        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                        // оставляем инпут всегда пустым, т.к. он нам нужен только для показа контекстного меню вставки,\n                        // обработки события вставки и обработки фокуса\n                        value=\"\"\n                        // без change хендлера react пишет warning в консоль\n                        onChange={noop}\n                        onFocus={(event) => {\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

@@ -1,143 +1,170 @@
 :root{
-  --magritte-color-text-primary-v21-0-0:#000000;
-  --magritte-color-component-input-stroke-state-field-hovered-v21-0-0:#CCD5DF;
-  --magritte-color-component-input-stroke-state-field-focused-v21-0-0:#0070ff;
-  --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-0-0:#0070ff7a;
-  --magritte-color-component-input-stroke-state-field-invalid-v21-0-0:#ff4d3a;
-  --magritte-color-component-input-background-field-v21-0-0:#ffffff;
-  --magritte-color-component-input-background-state-field-hovered-v21-0-0:#ffffff;
-  --magritte-color-component-input-background-state-field-focused-v21-0-0:#ffffff;
-  --magritte-color-component-input-background-state-field-invalid-v21-0-0:#ffffff;
-  --magritte-color-component-input-stroke-field-v21-0-0:#DCE3EB;
-  --magritte-color-component-input-text-state-content-focused-v21-0-0:#000000;
-  --magritte-color-component-input-text-state-placeholder-hovered-v21-0-0:#768694;
-  --magritte-color-component-input-text-state-placeholder-focused-v21-0-0:#AABBCA;
-  --magritte-color-component-input-text-state-placeholder-invalid-v21-0-0:#AABBCA;
-  --magritte-color-component-input-text-placeholder-v21-0-0:#AABBCA;
+  --magritte-color-text-primary-v21-1-0:#000000;
+  --magritte-color-component-input-stroke-state-field-hovered-v21-1-0:#CCD5DF;
+  --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;
+  --magritte-color-component-input-background-state-field-invalid-v21-1-0:#ffffff;
+  --magritte-color-component-input-stroke-field-v21-1-0:#DCE3EB;
+  --magritte-color-component-input-text-state-content-focused-v21-1-0:#000000;
+  --magritte-color-component-input-text-state-placeholder-hovered-v21-1-0:#768694;
+  --magritte-color-component-input-text-state-placeholder-focused-v21-1-0:#AABBCA;
+  --magritte-color-component-input-text-state-placeholder-invalid-v21-1-0:#AABBCA;
+  --magritte-color-component-input-text-placeholder-v21-1-0:#AABBCA;
 }
 :root{
-  --magritte-font-families-body-v21-0-0:hh sans;
-  --magritte-semantic-border-width-default-v21-0-0:1px;
-  --magritte-semantic-border-width-focused-v21-0-0:2px;
-  --magritte-static-border-radius-300-v21-0-0:12px;
-  --magritte-static-border-radius-450-v21-0-0:18px;
+  --magritte-font-families-body-v21-1-0:hh sans;
+  --magritte-semantic-border-width-default-v21-1-0:1px;
+  --magritte-semantic-border-width-focused-v21-1-0:2px;
+  --magritte-static-border-radius-300-v21-1-0:12px;
+  --magritte-static-border-radius-450-v21-1-0:18px;
 }
 .magritte-night-theme{
-  --magritte-color-text-primary-v21-0-0:#ffffff;
-  --magritte-color-component-input-stroke-state-field-hovered-v21-0-0:#3B3B3B;
-  --magritte-color-component-input-stroke-state-field-focused-v21-0-0:#0070ff;
-  --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-0-0:#0070ff7a;
-  --magritte-color-component-input-stroke-state-field-invalid-v21-0-0:#ff4d3a;
-  --magritte-color-component-input-background-field-v21-0-0:#1B1B1B;
-  --magritte-color-component-input-background-state-field-hovered-v21-0-0:#1B1B1B;
-  --magritte-color-component-input-background-state-field-focused-v21-0-0:#1B1B1B;
-  --magritte-color-component-input-background-state-field-invalid-v21-0-0:#1B1B1B;
-  --magritte-color-component-input-stroke-field-v21-0-0:#303030;
-  --magritte-color-component-input-text-placeholder-v21-0-0:#535353;
-  --magritte-color-component-input-text-state-content-focused-v21-0-0:#ffffff;
-  --magritte-color-component-input-text-state-placeholder-hovered-v21-0-0:#5E5E5E;
-  --magritte-color-component-input-text-state-placeholder-focused-v21-0-0:#535353;
-  --magritte-color-component-input-text-state-placeholder-invalid-v21-0-0:#535353;
-}
-.magritte-pincode-input___RpWyq_1-0-1{
+  --magritte-color-text-primary-v21-1-0:#ffffff;
+  --magritte-color-component-input-stroke-state-field-hovered-v21-1-0:#3B3B3B;
+  --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;
+  --magritte-color-component-input-background-state-field-invalid-v21-1-0:#1B1B1B;
+  --magritte-color-component-input-stroke-field-v21-1-0:#303030;
+  --magritte-color-component-input-text-placeholder-v21-1-0:#535353;
+  --magritte-color-component-input-text-state-content-focused-v21-1-0:#ffffff;
+  --magritte-color-component-input-text-state-placeholder-hovered-v21-1-0:#5E5E5E;
+  --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-3{
   --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-0-0) solid var(--magritte-color-component-input-stroke-field-v21-0-0);
-  border-radius:var(--magritte-static-border-radius-450-v21-0-0);
-  background-color:var(--magritte-color-component-input-background-field-v21-0-0);
-  padding:var(--magritte-pincode-input-padding-vertical) var(--magritte-pincode-input-padding-horizontal);
+  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);
   position:relative;
+  overflow:clip;
   cursor:text;
-  font-family:var(--magritte-font-families-body-v21-0-0);
+  font-family:var(--magritte-font-families-body-v21-1-0);
   font-size:32px;
   font-style:normal;
   font-weight:normal;
   line-height:40px;
-  color:var(--magritte-color-component-input-text-state-content-focused-v21-0-0);
+  color:var(--magritte-color-component-input-text-state-content-focused-v21-1-0);
 }
-.magritte-pincode-input___RpWyq_1-0-1.magritte-medium___wfRSc_1-0-1{
+.magritte-pincode-input___RpWyq_1-0-3.magritte-medium___wfRSc_1-0-3{
   font-size:28px;
   --magritte-pincode-input-padding-horizontal:16px;
   --magritte-pincode-input-padding-vertical:6px;
   --magritte-pincode-input-gap:4px;
-  border-radius:var(--magritte-static-border-radius-300-v21-0-0);
+  border-radius:var(--magritte-static-border-radius-300-v21-1-0);
   height:76px;
 }
-.magritte-pincode-input___RpWyq_1-0-1:hover{
-  border-color:var(--magritte-color-component-input-stroke-state-field-hovered-v21-0-0);
-  background-color:var(--magritte-color-component-input-background-state-field-hovered-v21-0-0);
+.magritte-pincode-input___RpWyq_1-0-3: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-1:hover .magritte-placeholder___10kQ0_1-0-1{
-  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v21-0-0);
+.magritte-pincode-input___RpWyq_1-0-3:hover .magritte-placeholder___10kQ0_1-0-3{
+  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v21-1-0);
 }
-.magritte-pincode-input___RpWyq_1-0-1.magritte-focus___IuhXb_1-0-1{
-  border:var(--magritte-semantic-border-width-focused-v21-0-0) solid var(--magritte-color-component-input-stroke-state-field-focused-v21-0-0);
-  background-color:var(--magritte-color-component-input-background-state-field-focused-v21-0-0);
-  padding:var(--magritte-pincode-input-padding-vertical) calc(var(--magritte-pincode-input-padding-horizontal) - 1px);
+.magritte-pincode-input___RpWyq_1-0-3.magritte-focus___IuhXb_1-0-3{
+  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);
 }
-.magritte-pincode-input___RpWyq_1-0-1.magritte-focus___IuhXb_1-0-1 .magritte-placeholder___10kQ0_1-0-1{
-  color:var(--magritte-color-component-input-text-state-placeholder-focused-v21-0-0);
+.magritte-pincode-input___RpWyq_1-0-3.magritte-focus___IuhXb_1-0-3 .magritte-placeholder___10kQ0_1-0-3{
+  color:var(--magritte-color-component-input-text-state-placeholder-focused-v21-1-0);
 }
-.magritte-pincode-input___RpWyq_1-0-1.magritte-invalid___hB8h2_1-0-1{
-  border:var(--magritte-semantic-border-width-default-v21-0-0) solid var(--magritte-color-component-input-stroke-state-field-invalid-v21-0-0);
-  background-color:var(--magritte-color-component-input-background-state-field-invalid-v21-0-0);
+.magritte-pincode-input___RpWyq_1-0-3.magritte-invalid___hB8h2_1-0-3{
+  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-1.magritte-invalid___hB8h2_1-0-1 .magritte-placeholder___10kQ0_1-0-1{
-  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v21-0-0);
+.magritte-pincode-input___RpWyq_1-0-3.magritte-invalid___hB8h2_1-0-3 .magritte-placeholder___10kQ0_1-0-3{
+  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v21-1-0);
 }
-.magritte-pincode-input___RpWyq_1-0-1.magritte-focus-visible___BN1eD_1-0-1{
-  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v21-0-0) solid 4px;
+.magritte-pincode-input___RpWyq_1-0-3.magritte-focus-visible___BN1eD_1-0-3{
+  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v21-1-0) solid 4px;
 }
-.magritte-digit-box-container___BqMWw_1-0-1{
+.magritte-pincode-input___RpWyq_1-0-3.magritte-focus-visible___BN1eD_1-0-3.magritte-invalid___hB8h2_1-0-3{
+  outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v21-1-0);
+}
+.magritte-digit-box-container___BqMWw_1-0-3{
   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-1{
-  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-0-3{
+  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-0-3::selection{
+  background-color:transparent;
 }
-.magritte-digits-input___4QeLj_1-0-1{
+.magritte-digit-box___6J0Q2_1-0-3::-moz-selection{
+  background-color:transparent;
+}
+.magritte-digits-input___4QeLj_1-0-3{
   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-1::selection{
+.magritte-digits-input___4QeLj_1-0-3::selection{
   background-color:transparent;
+  appearance:none;
 }
-.magritte-digits-input___4QeLj_1-0-1::-moz-selection{
+.magritte-digits-input___4QeLj_1-0-3::-moz-selection{
   background-color:transparent;
+  appearance:none;
 }
-.magritte-caret-left___iZMuA_1-0-1::before,
-.magritte-caret-right___u8wNk_1-0-1::after{
+.magritte-caret-left___iZMuA_1-0-3::before,
+.magritte-caret-right___u8wNk_1-0-3::after{
   content:'';
   block-size:1em;
-  border-left:1px solid var(--magritte-color-text-primary-v21-0-0);
-  animation:magritte-caret-blink___-bhg7_1-0-1 1s steps(1) infinite;
+  border-left:1px solid var(--magritte-color-text-primary-v21-1-0);
+  animation:magritte-caret-blink___-bhg7_1-0-3 1s steps(1) infinite;
 }
-.magritte-placeholder___10kQ0_1-0-1{
-  color:var(--magritte-color-component-input-text-placeholder-v21-0-0);
+.magritte-placeholder___10kQ0_1-0-3{
+  color:var(--magritte-color-component-input-text-placeholder-v21-1-0);
 }
-.magritte-value-container___9JR3e_1-0-1{
+.magritte-value-container___9JR3e_1-0-3{
   pointer-events:none;
 }
-@keyframes magritte-caret-blink___-bhg7_1-0-1{
+.magritte-ghost-value___jPQwY_1-0-3{
+  display:inline-block;
+  visibility:hidden;
+}
+@keyframes magritte-caret-blink___-bhg7_1-0-3{
   50%{
     opacity:0;
   }

package/index.js

@@ -4,6 +4,5 @@ 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-ui-form-helper';
 //# sourceMappingURL=index.js.map

package/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-pincode-input",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -23,13 +23,12 @@
     "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.21"
+    "@hh.ru/magritte-common-keyboard": "4.1.0",
+    "@hh.ru/magritte-ui-form-helper": "1.0.22"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
     "react": ">=18.2.0"
   },
-  "gitHead": "75a6b12c08b7ca443e43da143a22adfc91282816"
+  "gitHead": "d271475c7ce8c1d6fc8b33ed345f1d9a6dcd8835"
 }