@hh.ru/magritte-ui-pincode-input 1.3.4 → 1.4.0

package/PincodeInput.d.ts

@@ -30,6 +30,10 @@ export interface PincodeInputProps {
      * credentialsRequestId т.к. предыдущий запрос будет прерываться.
      * */
     onOTPCredentialsRequestFail?: (error: Error) => void;
+    /**
+     * При задании этого пропа создается скрытый инпут с переданным значением name и value равным введенному значению
+     */
+    name?: string;
     'data-qa'?: string;
 }
 export declare const PincodeInput: import("react").ForwardRefExoticComponent<PincodeInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/PincodeInput.js

@@ -2,15 +2,15 @@ import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useRef, useLayoutEffect } from 'react';
 import classnames from 'classnames';
-import { keyboardMatch, keyboardKeys, keyboardMatches } from '@hh.ru/magritte-common-keyboard';
+import { keyboardMatch, keyboardKeys } 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-3-4","pincodeInput":"magritte-pincode-input___RpWyq_1-3-4","medium":"magritte-medium___wfRSc_1-3-4","placeholder":"magritte-placeholder___10kQ0_1-3-4","focus":"magritte-focus___IuhXb_1-3-4","invalid":"magritte-invalid___hB8h2_1-3-4","focus-visible":"magritte-focus-visible___BN1eD_1-3-4","focusVisible":"magritte-focus-visible___BN1eD_1-3-4","digit-box-container":"magritte-digit-box-container___BqMWw_1-3-4","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-3-4","digit-box":"magritte-digit-box___6J0Q2_1-3-4","digitBox":"magritte-digit-box___6J0Q2_1-3-4","digits-input":"magritte-digits-input___4QeLj_1-3-4","digitsInput":"magritte-digits-input___4QeLj_1-3-4","caret-left":"magritte-caret-left___iZMuA_1-3-4","caretLeft":"magritte-caret-left___iZMuA_1-3-4","caret-right":"magritte-caret-right___u8wNk_1-3-4","caretRight":"magritte-caret-right___u8wNk_1-3-4","caret-blink":"magritte-caret-blink___-bhg7_1-3-4","caretBlink":"magritte-caret-blink___-bhg7_1-3-4","value-container":"magritte-value-container___9JR3e_1-3-4","valueContainer":"magritte-value-container___9JR3e_1-3-4","ghost-value":"magritte-ghost-value___jPQwY_1-3-4","ghostValue":"magritte-ghost-value___jPQwY_1-3-4"};
+var styles = {"pincode-input":"magritte-pincode-input___RpWyq_1-4-0","pincodeInput":"magritte-pincode-input___RpWyq_1-4-0","medium":"magritte-medium___wfRSc_1-4-0","placeholder":"magritte-placeholder___10kQ0_1-4-0","focus":"magritte-focus___IuhXb_1-4-0","invalid":"magritte-invalid___hB8h2_1-4-0","focus-visible":"magritte-focus-visible___BN1eD_1-4-0","focusVisible":"magritte-focus-visible___BN1eD_1-4-0","digit-box-container":"magritte-digit-box-container___BqMWw_1-4-0","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-4-0","digit-box":"magritte-digit-box___6J0Q2_1-4-0","digitBox":"magritte-digit-box___6J0Q2_1-4-0","digits-input":"magritte-digits-input___4QeLj_1-4-0","digitsInput":"magritte-digits-input___4QeLj_1-4-0","caret-left":"magritte-caret-left___iZMuA_1-4-0","caretLeft":"magritte-caret-left___iZMuA_1-4-0","caret-right":"magritte-caret-right___u8wNk_1-4-0","caretRight":"magritte-caret-right___u8wNk_1-4-0","caret-blink":"magritte-caret-blink___-bhg7_1-4-0","caretBlink":"magritte-caret-blink___-bhg7_1-4-0","value-container":"magritte-value-container___9JR3e_1-4-0","valueContainer":"magritte-value-container___9JR3e_1-4-0","ghost-value":"magritte-ghost-value___jPQwY_1-4-0","ghostValue":"magritte-ghost-value___jPQwY_1-4-0"};
 
 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, credentialsRequestId = -1, onOTPCredentialsRequestFail, 'data-qa': dataQa = 'magritte-pincode-input', }, ref) => {
+const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'large', invalid = false, name, onFocus, onBlur, onChange, description, errorMessage, credentialsRequestId = -1, onOTPCredentialsRequestFail, 'data-qa': dataQa = 'magritte-pincode-input', }, ref) => {
     const digitsCount = _digitsCount ?? (size === 'medium' ? 6 : 4);
     const [value, setValue] = useState('');
     const [caretPosition, setCaretPosition] = useState(0);
@@ -125,7 +125,7 @@ const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'lar
                                 setCaretPosition((caretPosition) => clamp(caretPosition + (isRight ? 1 : -1), 0, value.length));
                                 return;
                             }
-                            if (keyboardMatches(event, keyboardKeys.DigitKeys)) {
+                            if (/^\d$/.test(event.key)) {
                                 updateValue(`${value.slice(0, caretPos)}${event.key}${value.slice(caretPos + 1)}`);
                                 setCaretPosition((caretPosition) => clamp(caretPosition + 1, 0, digitsCount - 1));
                                 event.preventDefault();
@@ -176,7 +176,7 @@ const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'lar
                                         (index === digitsCount - 1 && index === caretPos - 1)) &&
                                         index === value.length - 1 &&
                                         focused,
-                                }), "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" })] }));
+                                }), "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" }), !!name && jsx("input", { type: "hidden", name: name, value: value })] }));
 });
 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, 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     * Позволяет перезапустить процесс ожидания OTP sms. Может использоваться например если пользователь перезапросил\n     * отправку OTP sms потому что в первый раз отменил чтение кода из sms. Используйте положительные целые числа.\n     * */\n    credentialsRequestId?: number;\n    /**\n     * Обработчик фейла запроса OTP Credentials. Он будет вызываться в т.ч. каждый раз при изменении\n     * credentialsRequestId т.к. предыдущий запрос будет прерываться.\n     * */\n    onOTPCredentialsRequestFail?: (error: Error) => void;\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            credentialsRequestId = -1,\n            onOTPCredentialsRequestFail,\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(\n            (OTPCode) => {\n                if (!OTPCode) {\n                    return;\n                }\n                const code = OTPCode.slice(0, digitsCount);\n                updateValue(code);\n                setCaretPosition(code.length - 1);\n                setInputKey((key) => key + 1);\n            },\n            credentialsRequestId,\n            onOTPCredentialsRequestFail\n        );\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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"}
+{"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 } 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     * Позволяет перезапустить процесс ожидания OTP sms. Может использоваться например если пользователь перезапросил\n     * отправку OTP sms потому что в первый раз отменил чтение кода из sms. Используйте положительные целые числа.\n     * */\n    credentialsRequestId?: number;\n    /**\n     * Обработчик фейла запроса OTP Credentials. Он будет вызываться в т.ч. каждый раз при изменении\n     * credentialsRequestId т.к. предыдущий запрос будет прерываться.\n     * */\n    onOTPCredentialsRequestFail?: (error: Error) => void;\n    /**\n     * При задании этого пропа создается скрытый инпут с переданным значением name и value равным введенному значению\n     */\n    name?: string;\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            name,\n            onFocus,\n            onBlur,\n            onChange,\n            description,\n            errorMessage,\n            credentialsRequestId = -1,\n            onOTPCredentialsRequestFail,\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(\n            (OTPCode) => {\n                if (!OTPCode) {\n                    return;\n                }\n                const code = OTPCode.slice(0, digitsCount);\n                updateValue(code);\n                setCaretPosition(code.length - 1);\n                setInputKey((key) => key + 1);\n            },\n            credentialsRequestId,\n            onOTPCredentialsRequestFail\n        );\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 (/^\\d$/.test(event.key)) {\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                {!!name && <input type=\"hidden\" name={name} value={value} />}\n            </div>\n        );\n    }\n);\n\nPincodeInput.displayName = 'PincodeInput';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/index.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-pincode-input",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -25,13 +25,13 @@
   "dependencies": {
     "@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.25",
+    "@hh.ru/magritte-ui-form-helper": "1.0.26",
     "@hh.ru/magritte-ui-mock-component": "1.0.12",
-    "@hh.ru/magritte-ui-theme-provider": "1.1.40"
+    "@hh.ru/magritte-ui-theme-provider": "1.1.41"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
     "react": ">=18.2.0"
   },
-  "gitHead": "f0580e3372548c1cf344118a05710a20826f423d"
+  "gitHead": "2160e00c55fc0118da55262fd3f89dd915696a77"
 }