@hh.ru/magritte-ui-pincode-input 2.4.3 → 2.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/PincodeInput.js +1 -1
- package/PincodeInput.js.map +1 -1
- package/index.css +106 -106
- package/index.mock.js.map +1 -1
- package/package.json +9 -9
- package/useOTP.js.map +1 -1
package/PincodeInput.js
CHANGED
|
@@ -10,7 +10,7 @@ import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
|
|
|
10
10
|
import { CheckCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/variants/icon';
|
|
11
11
|
import { useOTP } from './useOTP.js';
|
|
12
12
|
|
|
13
|
-
var styles = {"pincode-input":"magritte-pincode-input___RpWyq_2-4-
|
|
13
|
+
var styles = {"pincode-input":"magritte-pincode-input___RpWyq_2-4-4","pincodeInput":"magritte-pincode-input___RpWyq_2-4-4","medium":"magritte-medium___wfRSc_2-4-4","focus":"magritte-focus___IuhXb_2-4-4","invalid":"magritte-invalid___hB8h2_2-4-4","loading":"magritte-loading___TbW3K_2-4-4","succeed":"magritte-succeed___32cIX_2-4-4","placeholder":"magritte-placeholder___10kQ0_2-4-4","focus-visible":"magritte-focus-visible___BN1eD_2-4-4","focusVisible":"magritte-focus-visible___BN1eD_2-4-4","loading-blink":"magritte-loading-blink___IELw-_2-4-4","loadingBlink":"magritte-loading-blink___IELw-_2-4-4","digit-box":"magritte-digit-box___6J0Q2_2-4-4","digitBox":"magritte-digit-box___6J0Q2_2-4-4","succeed-icon":"magritte-succeed-icon___Vag76_2-4-4","succeedIcon":"magritte-succeed-icon___Vag76_2-4-4","digit-box-container":"magritte-digit-box-container___BqMWw_2-4-4","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-4-4","digits-input":"magritte-digits-input___4QeLj_2-4-4","digitsInput":"magritte-digits-input___4QeLj_2-4-4","caret-left":"magritte-caret-left___iZMuA_2-4-4","caretLeft":"magritte-caret-left___iZMuA_2-4-4","caret-right":"magritte-caret-right___u8wNk_2-4-4","caretRight":"magritte-caret-right___u8wNk_2-4-4","caret-blink":"magritte-caret-blink___-bhg7_2-4-4","caretBlink":"magritte-caret-blink___-bhg7_2-4-4","value-container":"magritte-value-container___9JR3e_2-4-4","valueContainer":"magritte-value-container___9JR3e_2-4-4","ghost-value":"magritte-ghost-value___jPQwY_2-4-4","ghostValue":"magritte-ghost-value___jPQwY_2-4-4","current-value":"magritte-current-value___IT1-R_2-4-4","currentValue":"magritte-current-value___IT1-R_2-4-4"};
|
|
14
14
|
|
|
15
15
|
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
|
16
16
|
const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'large', invalid = false, loading = false, succeed = false, name, onFocus, onBlur, onChange, description, errorMessage, credentialsRequestId = -1, onOTPCredentialsRequestFail, 'data-qa': dataQa = 'magritte-pincode-input', }, ref) => {
|
package/PincodeInput.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PincodeInput.js","sources":["../src/PincodeInput.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type FocusEventHandler,\n useRef,\n useState,\n forwardRef,\n useLayoutEffect,\n useEffect,\n useId,\n} from 'react';\nimport classnames from 'classnames';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport {\n tokenSemanticAnimationEaseBaseX1,\n tokenSemanticAnimationEaseBaseX2,\n tokenSemanticAnimationEaseBaseY1,\n tokenSemanticAnimationEaseBaseY2,\n tokenSemanticAnimationTimeMDuration,\n} from '@hh.ru/magritte-design-tokens/types';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { CheckCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/variants/icon';\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 loading?: boolean;\n succeed?: boolean;\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 loading = false,\n succeed = 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 descriptionId = useId();\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 const prevValue = useRef<string>('');\n const firstUpdatedIndex = [...Array(digitsCount).keys()].findIndex(\n (_, index) => value[index] !== prevValue.current[index]\n );\n\n const interactive = !loading && !succeed;\n\n const updateValue = (newValue: string) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n const syncValues = () => {\n prevValue.current = value;\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 useEffect(() => {\n if (!interactive) {\n setFocused(false);\n setFocusVisible(false);\n }\n }, [interactive]);\n\n const caretPos = clamp(caretPosition, 0, value.length);\n\n return (\n <div ref={ref} data-qa={dataQa} tabIndex={interactive ? 0 : -1} 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 [styles.loading]: loading,\n [styles.succeed]: succeed,\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 disabled={!interactive}\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 aria-invalid={invalid}\n aria-describedby={descriptionId}\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 // Координата из которой прилетает цифра зависит от ее удаленности\n // от первой изменяемой цифры (например при вставке)\n const indent = firstUpdatedIndex !== -1 ? (index - firstUpdatedIndex) * 32 : 0;\n\n // Анимация зависит от того, на что меняется символ - на точку или цифру\n const variants = {\n hidden: (empty: boolean) => {\n return {\n opacity: 0,\n y: empty ? 16 : -16,\n scale: empty ? 0.2 : 0.75,\n };\n },\n animate: { opacity: 1, y: 0, scale: 1 },\n initial: (empty: boolean) => {\n return {\n opacity: 0,\n y: empty ? -16 : 16 + indent,\n scale: empty ? 0.2 : 0.75,\n };\n },\n };\n\n return (\n <div key={index} className={classnames(styles.digitBox)} data-digit-index={index}>\n <span\n className={classnames(styles.valueContainer, {\n // в позицию введена цифра, каретка находится в этой позиции, фокус\n // установлен в инпут, это не крайняя справа цифра из введенных\n [styles.caretLeft]:\n 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 <AnimatePresence\n initial={false}\n onExitComplete={syncValues}\n custom={value[index] === undefined}\n >\n <motion.div\n key={value[index] || '•'}\n variants={variants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"hidden\"\n custom={value[index] === undefined}\n transition={{\n duration: tokenSemanticAnimationTimeMDuration / 1000,\n ease: [\n tokenSemanticAnimationEaseBaseX1,\n tokenSemanticAnimationEaseBaseY1,\n tokenSemanticAnimationEaseBaseX2,\n tokenSemanticAnimationEaseBaseY2,\n ],\n }}\n data-qa={`magritte-pincode-input-digit-${index}-value`}\n className={classnames(styles.currentValue, {\n [styles.placeholder]: !value[index],\n })}\n >\n {value[index] || '•'}\n </motion.div>\n </AnimatePresence>\n </span>\n </div>\n );\n })}\n </div>\n <div className={styles.ghostValue} ref={ghostLastDigitRef}>\n {value.slice(caretPos, caretPos + 1)}\n </div>\n <AnimatePresence>\n {succeed && (\n <motion.span\n className={styles.succeedIcon}\n initial={{ opacity: 0, scale: 0.75 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.75 }}\n transition={{\n duration: tokenSemanticAnimationTimeMDuration / 1000,\n ease: [\n tokenSemanticAnimationEaseBaseX1,\n tokenSemanticAnimationEaseBaseY1,\n tokenSemanticAnimationEaseBaseX2,\n tokenSemanticAnimationEaseBaseY2,\n ],\n }}\n >\n <CheckCircleFilledSize24 initialColor=\"contrast\" />\n </motion.span>\n )}\n </AnimatePresence>\n </div>\n <FormHelper\n descriptionId={descriptionId}\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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"}
|
|
1
|
+
{"version":3,"file":"PincodeInput.js","sources":["src/PincodeInput.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type FocusEventHandler,\n useRef,\n useState,\n forwardRef,\n useLayoutEffect,\n useEffect,\n useId,\n} from 'react';\nimport classnames from 'classnames';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport {\n tokenSemanticAnimationEaseBaseX1,\n tokenSemanticAnimationEaseBaseX2,\n tokenSemanticAnimationEaseBaseY1,\n tokenSemanticAnimationEaseBaseY2,\n tokenSemanticAnimationTimeMDuration,\n} from '@hh.ru/magritte-design-tokens/types';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { CheckCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/variants/icon';\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 loading?: boolean;\n succeed?: boolean;\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 loading = false,\n succeed = 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 descriptionId = useId();\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 const prevValue = useRef<string>('');\n const firstUpdatedIndex = [...Array(digitsCount).keys()].findIndex(\n (_, index) => value[index] !== prevValue.current[index]\n );\n\n const interactive = !loading && !succeed;\n\n const updateValue = (newValue: string) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n const syncValues = () => {\n prevValue.current = value;\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 useEffect(() => {\n if (!interactive) {\n setFocused(false);\n setFocusVisible(false);\n }\n }, [interactive]);\n\n const caretPos = clamp(caretPosition, 0, value.length);\n\n return (\n <div ref={ref} data-qa={dataQa} tabIndex={interactive ? 0 : -1} 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 [styles.loading]: loading,\n [styles.succeed]: succeed,\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 disabled={!interactive}\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 aria-invalid={invalid}\n aria-describedby={descriptionId}\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 // Координата из которой прилетает цифра зависит от ее удаленности\n // от первой изменяемой цифры (например при вставке)\n const indent = firstUpdatedIndex !== -1 ? (index - firstUpdatedIndex) * 32 : 0;\n\n // Анимация зависит от того, на что меняется символ - на точку или цифру\n const variants = {\n hidden: (empty: boolean) => {\n return {\n opacity: 0,\n y: empty ? 16 : -16,\n scale: empty ? 0.2 : 0.75,\n };\n },\n animate: { opacity: 1, y: 0, scale: 1 },\n initial: (empty: boolean) => {\n return {\n opacity: 0,\n y: empty ? -16 : 16 + indent,\n scale: empty ? 0.2 : 0.75,\n };\n },\n };\n\n return (\n <div key={index} className={classnames(styles.digitBox)} data-digit-index={index}>\n <span\n className={classnames(styles.valueContainer, {\n // в позицию введена цифра, каретка находится в этой позиции, фокус\n // установлен в инпут, это не крайняя справа цифра из введенных\n [styles.caretLeft]:\n 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 <AnimatePresence\n initial={false}\n onExitComplete={syncValues}\n custom={value[index] === undefined}\n >\n <motion.div\n key={value[index] || '•'}\n variants={variants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"hidden\"\n custom={value[index] === undefined}\n transition={{\n duration: tokenSemanticAnimationTimeMDuration / 1000,\n ease: [\n tokenSemanticAnimationEaseBaseX1,\n tokenSemanticAnimationEaseBaseY1,\n tokenSemanticAnimationEaseBaseX2,\n tokenSemanticAnimationEaseBaseY2,\n ],\n }}\n data-qa={`magritte-pincode-input-digit-${index}-value`}\n className={classnames(styles.currentValue, {\n [styles.placeholder]: !value[index],\n })}\n >\n {value[index] || '•'}\n </motion.div>\n </AnimatePresence>\n </span>\n </div>\n );\n })}\n </div>\n <div className={styles.ghostValue} ref={ghostLastDigitRef}>\n {value.slice(caretPos, caretPos + 1)}\n </div>\n <AnimatePresence>\n {succeed && (\n <motion.span\n className={styles.succeedIcon}\n initial={{ opacity: 0, scale: 0.75 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.75 }}\n transition={{\n duration: tokenSemanticAnimationTimeMDuration / 1000,\n ease: [\n tokenSemanticAnimationEaseBaseX1,\n tokenSemanticAnimationEaseBaseY1,\n tokenSemanticAnimationEaseBaseX2,\n tokenSemanticAnimationEaseBaseY2,\n ],\n }}\n >\n <CheckCircleFilledSize24 initialColor=\"contrast\" />\n </motion.span>\n )}\n </AnimatePresence>\n </div>\n <FormHelper\n descriptionId={descriptionId}\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
CHANGED
|
@@ -1,78 +1,78 @@
|
|
|
1
1
|
:root{
|
|
2
|
-
--magritte-color-background-positive-v24-4-
|
|
3
|
-
--magritte-color-text-primary-v24-4-
|
|
4
|
-
--magritte-color-component-input-stroke-state-field-hovered-v24-4-
|
|
5
|
-
--magritte-color-component-input-stroke-state-field-loading-v24-4-
|
|
6
|
-
--magritte-color-component-input-stroke-state-field-focused-v24-4-
|
|
7
|
-
--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-4-
|
|
8
|
-
--magritte-color-component-input-stroke-state-field-invalid-v24-4-
|
|
9
|
-
--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-4-
|
|
10
|
-
--magritte-color-component-input-background-field-v24-4-
|
|
11
|
-
--magritte-color-component-input-background-state-field-loading-v24-4-
|
|
12
|
-
--magritte-color-component-input-background-state-field-hovered-v24-4-
|
|
13
|
-
--magritte-color-component-input-background-state-field-focused-v24-4-
|
|
14
|
-
--magritte-color-component-input-background-state-field-invalid-v24-4-
|
|
15
|
-
--magritte-color-component-input-stroke-field-v24-4-
|
|
16
|
-
--magritte-color-component-input-text-state-content-loading-v24-4-
|
|
17
|
-
--magritte-color-component-input-text-state-content-focused-v24-4-
|
|
18
|
-
--magritte-color-component-input-text-state-placeholder-hovered-v24-4-
|
|
19
|
-
--magritte-color-component-input-text-state-placeholder-focused-v24-4-
|
|
20
|
-
--magritte-color-component-input-text-state-placeholder-invalid-v24-4-
|
|
21
|
-
--magritte-color-component-input-text-placeholder-v24-4-
|
|
2
|
+
--magritte-color-background-positive-v24-4-1:#0dc267;
|
|
3
|
+
--magritte-color-text-primary-v24-4-1:#000000;
|
|
4
|
+
--magritte-color-component-input-stroke-state-field-hovered-v24-4-1:#CCD5DF;
|
|
5
|
+
--magritte-color-component-input-stroke-state-field-loading-v24-4-1:#CCD5DF;
|
|
6
|
+
--magritte-color-component-input-stroke-state-field-focused-v24-4-1:#0070ff;
|
|
7
|
+
--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-4-1:#0070ff7a;
|
|
8
|
+
--magritte-color-component-input-stroke-state-field-invalid-v24-4-1:#ff4d3a;
|
|
9
|
+
--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-4-1:#ff4d3a7a;
|
|
10
|
+
--magritte-color-component-input-background-field-v24-4-1:#ffffff;
|
|
11
|
+
--magritte-color-component-input-background-state-field-loading-v24-4-1:#DCE3EB;
|
|
12
|
+
--magritte-color-component-input-background-state-field-hovered-v24-4-1:#ffffff;
|
|
13
|
+
--magritte-color-component-input-background-state-field-focused-v24-4-1:#ffffff;
|
|
14
|
+
--magritte-color-component-input-background-state-field-invalid-v24-4-1:#ffffff;
|
|
15
|
+
--magritte-color-component-input-stroke-field-v24-4-1:#DCE3EB;
|
|
16
|
+
--magritte-color-component-input-text-state-content-loading-v24-4-1:#768694;
|
|
17
|
+
--magritte-color-component-input-text-state-content-focused-v24-4-1:#000000;
|
|
18
|
+
--magritte-color-component-input-text-state-placeholder-hovered-v24-4-1:#768694;
|
|
19
|
+
--magritte-color-component-input-text-state-placeholder-focused-v24-4-1:#AABBCA;
|
|
20
|
+
--magritte-color-component-input-text-state-placeholder-invalid-v24-4-1:#AABBCA;
|
|
21
|
+
--magritte-color-component-input-text-placeholder-v24-4-1:#AABBCA;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
:root{
|
|
25
|
-
--magritte-semantic-animation-time-m-duration-v24-4-
|
|
26
|
-
--magritte-semantic-animation-time-xl-duration-v24-4-
|
|
27
|
-
--magritte-semantic-animation-ease-base-timing-function-v24-4-
|
|
25
|
+
--magritte-semantic-animation-time-m-duration-v24-4-1:400ms;
|
|
26
|
+
--magritte-semantic-animation-time-xl-duration-v24-4-1:800ms;
|
|
27
|
+
--magritte-semantic-animation-ease-base-timing-function-v24-4-1:cubic-bezier(0.4, 0.24, 0, 1);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.magritte-night-theme{
|
|
31
|
-
--magritte-color-background-positive-v24-4-
|
|
32
|
-
--magritte-color-text-primary-v24-4-
|
|
33
|
-
--magritte-color-component-input-stroke-state-field-hovered-v24-4-
|
|
34
|
-
--magritte-color-component-input-stroke-state-field-loading-v24-4-
|
|
35
|
-
--magritte-color-component-input-background-field-v24-4-
|
|
36
|
-
--magritte-color-component-input-background-state-field-hovered-v24-4-
|
|
37
|
-
--magritte-color-component-input-background-state-field-loading-v24-4-
|
|
38
|
-
--magritte-color-component-input-background-state-field-focused-v24-4-
|
|
39
|
-
--magritte-color-component-input-background-state-field-invalid-v24-4-
|
|
40
|
-
--magritte-color-component-input-stroke-field-v24-4-
|
|
41
|
-
--magritte-color-component-input-text-placeholder-v24-4-
|
|
42
|
-
--magritte-color-component-input-text-state-content-loading-v24-4-
|
|
43
|
-
--magritte-color-component-input-text-state-content-focused-v24-4-
|
|
44
|
-
--magritte-color-component-input-text-state-placeholder-hovered-v24-4-
|
|
45
|
-
--magritte-color-component-input-text-state-placeholder-focused-v24-4-
|
|
46
|
-
--magritte-color-component-input-text-state-placeholder-invalid-v24-4-
|
|
31
|
+
--magritte-color-background-positive-v24-4-1:#10b55f;
|
|
32
|
+
--magritte-color-text-primary-v24-4-1:#ffffff;
|
|
33
|
+
--magritte-color-component-input-stroke-state-field-hovered-v24-4-1:#3B3B3B;
|
|
34
|
+
--magritte-color-component-input-stroke-state-field-loading-v24-4-1:#3B3B3B;
|
|
35
|
+
--magritte-color-component-input-background-field-v24-4-1:#111;
|
|
36
|
+
--magritte-color-component-input-background-state-field-hovered-v24-4-1:#111;
|
|
37
|
+
--magritte-color-component-input-background-state-field-loading-v24-4-1:#474747;
|
|
38
|
+
--magritte-color-component-input-background-state-field-focused-v24-4-1:#111;
|
|
39
|
+
--magritte-color-component-input-background-state-field-invalid-v24-4-1:#111;
|
|
40
|
+
--magritte-color-component-input-stroke-field-v24-4-1:#303030;
|
|
41
|
+
--magritte-color-component-input-text-placeholder-v24-4-1:#535353;
|
|
42
|
+
--magritte-color-component-input-text-state-content-loading-v24-4-1:#ABABAB;
|
|
43
|
+
--magritte-color-component-input-text-state-content-focused-v24-4-1:#ffffff;
|
|
44
|
+
--magritte-color-component-input-text-state-placeholder-hovered-v24-4-1:#5E5E5E;
|
|
45
|
+
--magritte-color-component-input-text-state-placeholder-focused-v24-4-1:#535353;
|
|
46
|
+
--magritte-color-component-input-text-state-placeholder-invalid-v24-4-1:#535353;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.magritte-zp-day-theme{
|
|
50
|
-
--magritte-color-component-input-stroke-state-field-focused-v24-4-
|
|
50
|
+
--magritte-color-component-input-stroke-state-field-focused-v24-4-1:#7195AF;
|
|
51
51
|
}
|
|
52
|
-
.magritte-pincode-input___RpWyq_2-4-
|
|
52
|
+
.magritte-pincode-input___RpWyq_2-4-4{
|
|
53
53
|
--magritte-pincode-input-padding-horizontal:20px;
|
|
54
54
|
--magritte-pincode-input-padding-vertical:8px;
|
|
55
55
|
--magritte-pincode-input-gap:6px;
|
|
56
56
|
--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));
|
|
57
57
|
box-sizing:border-box;
|
|
58
58
|
height:88px;
|
|
59
|
-
box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-4-
|
|
59
|
+
box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-4-1);
|
|
60
60
|
border-radius:18px;
|
|
61
|
-
background-color:var(--magritte-color-component-input-background-field-v24-4-
|
|
61
|
+
background-color:var(--magritte-color-component-input-background-field-v24-4-1);
|
|
62
62
|
position:relative;
|
|
63
63
|
overflow:clip;
|
|
64
64
|
cursor:text;
|
|
65
65
|
transition-property:background-color;
|
|
66
|
-
transition-duration:var(--magritte-semantic-animation-time-m-duration-v24-4-
|
|
67
|
-
transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-4-
|
|
66
|
+
transition-duration:var(--magritte-semantic-animation-time-m-duration-v24-4-1);
|
|
67
|
+
transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-4-1);
|
|
68
68
|
font-family:hh sans;
|
|
69
69
|
font-size:32px;
|
|
70
70
|
font-style:normal;
|
|
71
71
|
font-weight:normal;
|
|
72
72
|
line-height:40px;
|
|
73
|
-
color:var(--magritte-color-component-input-text-state-content-focused-v24-4-
|
|
73
|
+
color:var(--magritte-color-component-input-text-state-content-focused-v24-4-1);
|
|
74
74
|
}
|
|
75
|
-
.magritte-pincode-input___RpWyq_2-4-
|
|
75
|
+
.magritte-pincode-input___RpWyq_2-4-4.magritte-medium___wfRSc_2-4-4{
|
|
76
76
|
font-size:28px;
|
|
77
77
|
--magritte-pincode-input-padding-horizontal:16px;
|
|
78
78
|
--magritte-pincode-input-padding-vertical:6px;
|
|
@@ -81,66 +81,66 @@
|
|
|
81
81
|
height:76px;
|
|
82
82
|
}
|
|
83
83
|
@media (min-width: 1020px){
|
|
84
|
-
body.magritte-old-layout .magritte-pincode-input___RpWyq_2-4-
|
|
85
|
-
box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-4-
|
|
86
|
-
background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-4-
|
|
84
|
+
body.magritte-old-layout .magritte-pincode-input___RpWyq_2-4-4:not(.magritte-focus___IuhXb_2-4-4):not(.magritte-invalid___hB8h2_2-4-4):not(.magritte-loading___TbW3K_2-4-4):not(.magritte-succeed___32cIX_2-4-4):hover{
|
|
85
|
+
box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-4-1);
|
|
86
|
+
background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-4-1);
|
|
87
87
|
}
|
|
88
|
-
body.magritte-old-layout .magritte-pincode-input___RpWyq_2-4-
|
|
89
|
-
color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-4-
|
|
88
|
+
body.magritte-old-layout .magritte-pincode-input___RpWyq_2-4-4:not(.magritte-focus___IuhXb_2-4-4):not(.magritte-invalid___hB8h2_2-4-4):not(.magritte-loading___TbW3K_2-4-4):not(.magritte-succeed___32cIX_2-4-4):hover .magritte-placeholder___10kQ0_2-4-4{
|
|
89
|
+
color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-4-1);
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
@media (min-width: 1024px){
|
|
93
|
-
body:not(.magritte-old-layout) .magritte-pincode-input___RpWyq_2-4-
|
|
94
|
-
box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-4-
|
|
95
|
-
background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-4-
|
|
93
|
+
body:not(.magritte-old-layout) .magritte-pincode-input___RpWyq_2-4-4:not(.magritte-focus___IuhXb_2-4-4):not(.magritte-invalid___hB8h2_2-4-4):not(.magritte-loading___TbW3K_2-4-4):not(.magritte-succeed___32cIX_2-4-4):hover{
|
|
94
|
+
box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-4-1);
|
|
95
|
+
background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-4-1);
|
|
96
96
|
}
|
|
97
|
-
body:not(.magritte-old-layout) .magritte-pincode-input___RpWyq_2-4-
|
|
98
|
-
color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-4-
|
|
97
|
+
body:not(.magritte-old-layout) .magritte-pincode-input___RpWyq_2-4-4:not(.magritte-focus___IuhXb_2-4-4):not(.magritte-invalid___hB8h2_2-4-4):not(.magritte-loading___TbW3K_2-4-4):not(.magritte-succeed___32cIX_2-4-4):hover .magritte-placeholder___10kQ0_2-4-4{
|
|
98
|
+
color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-4-1);
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
|
-
.magritte-pincode-input___RpWyq_2-4-
|
|
102
|
-
box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v24-4-
|
|
103
|
-
background-color:var(--magritte-color-component-input-background-state-field-focused-v24-4-
|
|
101
|
+
.magritte-pincode-input___RpWyq_2-4-4.magritte-focus___IuhXb_2-4-4{
|
|
102
|
+
box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v24-4-1);
|
|
103
|
+
background-color:var(--magritte-color-component-input-background-state-field-focused-v24-4-1);
|
|
104
104
|
}
|
|
105
|
-
.magritte-pincode-input___RpWyq_2-4-
|
|
106
|
-
color:var(--magritte-color-component-input-text-state-placeholder-focused-v24-4-
|
|
105
|
+
.magritte-pincode-input___RpWyq_2-4-4.magritte-focus___IuhXb_2-4-4 .magritte-placeholder___10kQ0_2-4-4{
|
|
106
|
+
color:var(--magritte-color-component-input-text-state-placeholder-focused-v24-4-1);
|
|
107
107
|
}
|
|
108
|
-
.magritte-pincode-input___RpWyq_2-4-
|
|
109
|
-
box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v24-4-
|
|
110
|
-
background-color:var(--magritte-color-component-input-background-state-field-invalid-v24-4-
|
|
108
|
+
.magritte-pincode-input___RpWyq_2-4-4.magritte-invalid___hB8h2_2-4-4{
|
|
109
|
+
box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v24-4-1);
|
|
110
|
+
background-color:var(--magritte-color-component-input-background-state-field-invalid-v24-4-1);
|
|
111
111
|
}
|
|
112
|
-
.magritte-pincode-input___RpWyq_2-4-
|
|
113
|
-
color:var(--magritte-color-component-input-text-state-placeholder-invalid-v24-4-
|
|
112
|
+
.magritte-pincode-input___RpWyq_2-4-4.magritte-invalid___hB8h2_2-4-4 .magritte-placeholder___10kQ0_2-4-4{
|
|
113
|
+
color:var(--magritte-color-component-input-text-state-placeholder-invalid-v24-4-1);
|
|
114
114
|
}
|
|
115
|
-
.magritte-pincode-input___RpWyq_2-4-
|
|
116
|
-
outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-4-
|
|
115
|
+
.magritte-pincode-input___RpWyq_2-4-4.magritte-focus-visible___BN1eD_2-4-4{
|
|
116
|
+
outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-4-1) solid 4px;
|
|
117
117
|
}
|
|
118
|
-
.magritte-pincode-input___RpWyq_2-4-
|
|
119
|
-
outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-4-
|
|
118
|
+
.magritte-pincode-input___RpWyq_2-4-4.magritte-focus-visible___BN1eD_2-4-4.magritte-invalid___hB8h2_2-4-4{
|
|
119
|
+
outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-4-1);
|
|
120
120
|
}
|
|
121
|
-
.magritte-pincode-input___RpWyq_2-4-
|
|
122
|
-
box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-loading-v24-4-
|
|
123
|
-
background-color:var(--magritte-color-component-input-background-state-field-loading-v24-4-
|
|
124
|
-
color:var(--magritte-color-component-input-text-state-content-loading-v24-4-
|
|
121
|
+
.magritte-pincode-input___RpWyq_2-4-4.magritte-loading___TbW3K_2-4-4{
|
|
122
|
+
box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-loading-v24-4-1);
|
|
123
|
+
background-color:var(--magritte-color-component-input-background-state-field-loading-v24-4-1);
|
|
124
|
+
color:var(--magritte-color-component-input-text-state-content-loading-v24-4-1);
|
|
125
125
|
pointer-events:none;
|
|
126
126
|
animation-delay:400ms;
|
|
127
|
-
animation-name:magritte-loading-blink___IELw-_2-4-
|
|
128
|
-
animation-duration:calc(var(--magritte-semantic-animation-time-xl-duration-v24-4-
|
|
129
|
-
animation-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-4-
|
|
127
|
+
animation-name:magritte-loading-blink___IELw-_2-4-4;
|
|
128
|
+
animation-duration:calc(var(--magritte-semantic-animation-time-xl-duration-v24-4-1) + var(--magritte-semantic-animation-time-m-duration-v24-4-1) + 200ms);
|
|
129
|
+
animation-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-4-1);
|
|
130
130
|
animation-iteration-count:infinite;
|
|
131
131
|
}
|
|
132
|
-
.magritte-pincode-input___RpWyq_2-4-
|
|
132
|
+
.magritte-pincode-input___RpWyq_2-4-4.magritte-loading___TbW3K_2-4-4 .magritte-digit-box___6J0Q2_2-4-4{
|
|
133
133
|
pointer-events:none;
|
|
134
134
|
}
|
|
135
|
-
.magritte-pincode-input___RpWyq_2-4-
|
|
136
|
-
box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-4-
|
|
137
|
-
background-color:var(--magritte-color-background-positive-v24-4-
|
|
135
|
+
.magritte-pincode-input___RpWyq_2-4-4.magritte-succeed___32cIX_2-4-4{
|
|
136
|
+
box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-4-1);
|
|
137
|
+
background-color:var(--magritte-color-background-positive-v24-4-1);
|
|
138
138
|
}
|
|
139
|
-
.magritte-pincode-input___RpWyq_2-4-
|
|
139
|
+
.magritte-pincode-input___RpWyq_2-4-4.magritte-succeed___32cIX_2-4-4 .magritte-digit-box___6J0Q2_2-4-4{
|
|
140
140
|
opacity:0;
|
|
141
141
|
visibility:hidden;
|
|
142
142
|
}
|
|
143
|
-
.magritte-succeed-icon___Vag76_2-4-
|
|
143
|
+
.magritte-succeed-icon___Vag76_2-4-4{
|
|
144
144
|
position:absolute;
|
|
145
145
|
inset:0;
|
|
146
146
|
display:flex;
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
pointer-events:none;
|
|
150
150
|
z-index:1;
|
|
151
151
|
}
|
|
152
|
-
.magritte-digit-box-container___BqMWw_2-4-
|
|
152
|
+
.magritte-digit-box-container___BqMWw_2-4-4{
|
|
153
153
|
display:flex;
|
|
154
154
|
gap:var(--magritte-pincode-input-gap);
|
|
155
155
|
position:absolute;
|
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
pointer-events:none;
|
|
161
161
|
z-index:0;
|
|
162
162
|
}
|
|
163
|
-
.magritte-digit-box___6J0Q2_2-4-
|
|
163
|
+
.magritte-digit-box___6J0Q2_2-4-4{
|
|
164
164
|
flex:0 0 var(--magritte-digit-box-width);
|
|
165
165
|
pointer-events:auto;
|
|
166
166
|
display:flex;
|
|
@@ -168,16 +168,16 @@
|
|
|
168
168
|
justify-content:center;
|
|
169
169
|
user-select:none;
|
|
170
170
|
transition-property:opacity, visibility;
|
|
171
|
-
transition-duration:var(--magritte-semantic-animation-time-m-duration-v24-4-
|
|
172
|
-
transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-4-
|
|
171
|
+
transition-duration:var(--magritte-semantic-animation-time-m-duration-v24-4-1);
|
|
172
|
+
transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-4-1);
|
|
173
173
|
}
|
|
174
|
-
.magritte-digit-box___6J0Q2_2-4-
|
|
174
|
+
.magritte-digit-box___6J0Q2_2-4-4::selection{
|
|
175
175
|
background-color:transparent;
|
|
176
176
|
}
|
|
177
|
-
.magritte-digit-box___6J0Q2_2-4-
|
|
177
|
+
.magritte-digit-box___6J0Q2_2-4-4::-moz-selection{
|
|
178
178
|
background-color:transparent;
|
|
179
179
|
}
|
|
180
|
-
.magritte-digits-input___4QeLj_2-4-
|
|
180
|
+
.magritte-digits-input___4QeLj_2-4-4{
|
|
181
181
|
display:block;
|
|
182
182
|
position:absolute;
|
|
183
183
|
top:0;
|
|
@@ -195,50 +195,50 @@
|
|
|
195
195
|
appearance:none;
|
|
196
196
|
caret-color:transparent;
|
|
197
197
|
}
|
|
198
|
-
.magritte-digits-input___4QeLj_2-4-
|
|
198
|
+
.magritte-digits-input___4QeLj_2-4-4::selection{
|
|
199
199
|
background-color:transparent;
|
|
200
200
|
appearance:none;
|
|
201
201
|
}
|
|
202
|
-
.magritte-digits-input___4QeLj_2-4-
|
|
202
|
+
.magritte-digits-input___4QeLj_2-4-4::-moz-selection{
|
|
203
203
|
background-color:transparent;
|
|
204
204
|
appearance:none;
|
|
205
205
|
}
|
|
206
|
-
.magritte-caret-left___iZMuA_2-4-
|
|
207
|
-
.magritte-caret-right___u8wNk_2-4-
|
|
206
|
+
.magritte-caret-left___iZMuA_2-4-4::before,
|
|
207
|
+
.magritte-caret-right___u8wNk_2-4-4::after{
|
|
208
208
|
content:'';
|
|
209
209
|
position:absolute;
|
|
210
210
|
top:50%;
|
|
211
211
|
transform:translateY(-50%);
|
|
212
212
|
block-size:1em;
|
|
213
|
-
border-left:1px solid var(--magritte-color-text-primary-v24-4-
|
|
214
|
-
animation:magritte-caret-blink___-bhg7_2-4-
|
|
213
|
+
border-left:1px solid var(--magritte-color-text-primary-v24-4-1);
|
|
214
|
+
animation:magritte-caret-blink___-bhg7_2-4-4 1s steps(1) infinite;
|
|
215
215
|
}
|
|
216
|
-
.magritte-caret-left___iZMuA_2-4-
|
|
216
|
+
.magritte-caret-left___iZMuA_2-4-4::before{
|
|
217
217
|
left:-1px;
|
|
218
218
|
}
|
|
219
|
-
.magritte-caret-right___u8wNk_2-4-
|
|
219
|
+
.magritte-caret-right___u8wNk_2-4-4::after{
|
|
220
220
|
right:-1px;
|
|
221
221
|
}
|
|
222
|
-
.magritte-placeholder___10kQ0_2-4-
|
|
223
|
-
color:var(--magritte-color-component-input-text-placeholder-v24-4-
|
|
222
|
+
.magritte-placeholder___10kQ0_2-4-4{
|
|
223
|
+
color:var(--magritte-color-component-input-text-placeholder-v24-4-1);
|
|
224
224
|
}
|
|
225
|
-
.magritte-value-container___9JR3e_2-4-
|
|
225
|
+
.magritte-value-container___9JR3e_2-4-4{
|
|
226
226
|
pointer-events:none;
|
|
227
227
|
position:relative;
|
|
228
228
|
min-width:20px;
|
|
229
229
|
text-align:center;
|
|
230
230
|
display:grid;
|
|
231
231
|
}
|
|
232
|
-
.magritte-ghost-value___jPQwY_2-4-
|
|
232
|
+
.magritte-ghost-value___jPQwY_2-4-4{
|
|
233
233
|
display:inline-block;
|
|
234
234
|
visibility:hidden;
|
|
235
235
|
}
|
|
236
|
-
@keyframes magritte-caret-blink___-bhg7_2-4-
|
|
236
|
+
@keyframes magritte-caret-blink___-bhg7_2-4-4{
|
|
237
237
|
50%{
|
|
238
238
|
opacity:0;
|
|
239
239
|
}
|
|
240
240
|
}
|
|
241
|
-
@keyframes magritte-loading-blink___IELw-_2-4-
|
|
241
|
+
@keyframes magritte-loading-blink___IELw-_2-4-4{
|
|
242
242
|
0%{
|
|
243
243
|
opacity:1;
|
|
244
244
|
}
|
|
@@ -252,7 +252,7 @@
|
|
|
252
252
|
opacity:1;
|
|
253
253
|
}
|
|
254
254
|
}
|
|
255
|
-
.magritte-current-value___IT1-R_2-4-
|
|
255
|
+
.magritte-current-value___IT1-R_2-4-4{
|
|
256
256
|
display:inline-block;
|
|
257
257
|
grid-area:1 / 1;
|
|
258
258
|
}
|
package/index.mock.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mock.js","sources":["
|
|
1
|
+
{"version":3,"file":"index.mock.js","sources":["src/index.mock.ts"],"sourcesContent":["import { ForwardRefExoticComponent } from 'react';\n\nimport { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport { type PincodeInputSize, type PincodeInputProps } from '@hh.ru/magritte-ui-pincode-input/PincodeInput';\n\nexport const PincodeInput: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent(\n 'PincodeInput',\n undefined,\n {\n withChildren: false,\n }\n);\n"],"names":[],"mappings":";;MAMa,YAAY,GAAuD,aAAa,CACzF,cAAc,EACd,SAAS,EACT;AACI,IAAA,YAAY,EAAE,KAAK;AACtB,CAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-pincode-input",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.4",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -22,18 +22,18 @@
|
|
|
22
22
|
"access": "public"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@hh.ru/magritte-common-keyboard": "4.3.
|
|
26
|
-
"@hh.ru/magritte-common-use-multiple-refs": "1.1.
|
|
27
|
-
"@hh.ru/magritte-design-tokens": "24.4.
|
|
28
|
-
"@hh.ru/magritte-ui-breakpoint": "6.0.
|
|
29
|
-
"@hh.ru/magritte-ui-form-helper": "2.1.
|
|
30
|
-
"@hh.ru/magritte-ui-icon": "13.11.
|
|
31
|
-
"@hh.ru/magritte-ui-mock-component": "1.1.
|
|
25
|
+
"@hh.ru/magritte-common-keyboard": "4.3.1",
|
|
26
|
+
"@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
|
|
27
|
+
"@hh.ru/magritte-design-tokens": "24.4.1",
|
|
28
|
+
"@hh.ru/magritte-ui-breakpoint": "6.0.7",
|
|
29
|
+
"@hh.ru/magritte-ui-form-helper": "2.1.2",
|
|
30
|
+
"@hh.ru/magritte-ui-icon": "13.11.1",
|
|
31
|
+
"@hh.ru/magritte-ui-mock-component": "1.1.7"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"classnames": ">=2.3.2",
|
|
35
35
|
"motion": "^12.23.12",
|
|
36
36
|
"react": ">=18.2.0"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "ec7d56f576ca5581c2acb5010b53bbfb8da52962"
|
|
39
39
|
}
|
package/useOTP.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOTP.js","sources":["
|
|
1
|
+
{"version":3,"file":"useOTP.js","sources":["src/useOTP.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport const useOTP = (\n callback: (OTPValue: string | null) => void,\n credentialsRequestId: number,\n onCredetialsRequestFail?: (error: Error) => void\n): void => {\n const callbackRef = useRef(callback);\n const onFailCallbackRef = useRef(onCredetialsRequestFail);\n callbackRef.current = callback;\n onFailCallbackRef.current = onCredetialsRequestFail;\n\n useEffect(() => {\n if (!('OTPCredential' in window) || !navigator?.credentials) {\n return undefined;\n }\n\n const ac = new AbortController();\n\n navigator.credentials\n .get({\n otp: { transport: ['sms'] },\n signal: ac.signal,\n } as CredentialRequestOptions)\n // ts не знает о типе OTPCredentials\n .then((otp) => callbackRef.current((otp as unknown as { code: string })?.code))\n .catch((error) => {\n onFailCallbackRef.current?.(error as Error);\n });\n\n return () => {\n ac.abort();\n };\n }, [credentialsRequestId]);\n};\n"],"names":[],"mappings":";;AAEa,MAAA,MAAM,GAAG,CAClB,QAA2C,EAC3C,oBAA4B,EAC5B,uBAAgD,KAC1C;AACN,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AACrC,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC;AAC1D,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;AAC/B,IAAA,iBAAiB,CAAC,OAAO,GAAG,uBAAuB,CAAC;IAEpD,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,EAAE,eAAe,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE;AACzD,YAAA,OAAO,SAAS,CAAC;SACpB;AAED,QAAA,MAAM,EAAE,GAAG,IAAI,eAAe,EAAE,CAAC;AAEjC,QAAA,SAAS,CAAC,WAAW;AAChB,aAAA,GAAG,CAAC;AACD,YAAA,GAAG,EAAE,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE;YAC3B,MAAM,EAAE,EAAE,CAAC,MAAM;SACQ,CAAC;;AAE7B,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,OAAO,CAAE,GAAmC,EAAE,IAAI,CAAC,CAAC;AAC9E,aAAA,KAAK,CAAC,CAAC,KAAK,KAAI;AACb,YAAA,iBAAiB,CAAC,OAAO,GAAG,KAAc,CAAC,CAAC;AAChD,SAAC,CAAC,CAAC;AAEP,QAAA,OAAO,MAAK;YACR,EAAE,CAAC,KAAK,EAAE,CAAC;AACf,SAAC,CAAC;AACN,KAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;AAC/B;;;;"}
|