@hh.ru/magritte-ui-pincode-input 2.1.2 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/PincodeInput.js +4 -7
  2. package/PincodeInput.js.map +1 -1
  3. package/index.css +48 -37
  4. package/package.json +5 -4
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-1-2","pincodeInput":"magritte-pincode-input___RpWyq_2-1-2","medium":"magritte-medium___wfRSc_2-1-2","placeholder":"magritte-placeholder___10kQ0_2-1-2","focus":"magritte-focus___IuhXb_2-1-2","invalid":"magritte-invalid___hB8h2_2-1-2","focus-visible":"magritte-focus-visible___BN1eD_2-1-2","focusVisible":"magritte-focus-visible___BN1eD_2-1-2","loading":"magritte-loading___TbW3K_2-1-2","loading-blink":"magritte-loading-blink___IELw-_2-1-2","loadingBlink":"magritte-loading-blink___IELw-_2-1-2","digit-box":"magritte-digit-box___6J0Q2_2-1-2","digitBox":"magritte-digit-box___6J0Q2_2-1-2","succeed":"magritte-succeed___32cIX_2-1-2","succeed-icon":"magritte-succeed-icon___Vag76_2-1-2","succeedIcon":"magritte-succeed-icon___Vag76_2-1-2","digit-box-container":"magritte-digit-box-container___BqMWw_2-1-2","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-1-2","digits-input":"magritte-digits-input___4QeLj_2-1-2","digitsInput":"magritte-digits-input___4QeLj_2-1-2","caret-left":"magritte-caret-left___iZMuA_2-1-2","caretLeft":"magritte-caret-left___iZMuA_2-1-2","caret-right":"magritte-caret-right___u8wNk_2-1-2","caretRight":"magritte-caret-right___u8wNk_2-1-2","caret-blink":"magritte-caret-blink___-bhg7_2-1-2","caretBlink":"magritte-caret-blink___-bhg7_2-1-2","value-container":"magritte-value-container___9JR3e_2-1-2","valueContainer":"magritte-value-container___9JR3e_2-1-2","ghost-value":"magritte-ghost-value___jPQwY_2-1-2","ghostValue":"magritte-ghost-value___jPQwY_2-1-2","current-value":"magritte-current-value___IT1-R_2-1-2","currentValue":"magritte-current-value___IT1-R_2-1-2"};
13
+ var styles = {"pincode-input":"magritte-pincode-input___RpWyq_2-2-0","pincodeInput":"magritte-pincode-input___RpWyq_2-2-0","medium":"magritte-medium___wfRSc_2-2-0","focus":"magritte-focus___IuhXb_2-2-0","invalid":"magritte-invalid___hB8h2_2-2-0","loading":"magritte-loading___TbW3K_2-2-0","succeed":"magritte-succeed___32cIX_2-2-0","placeholder":"magritte-placeholder___10kQ0_2-2-0","focus-visible":"magritte-focus-visible___BN1eD_2-2-0","focusVisible":"magritte-focus-visible___BN1eD_2-2-0","loading-blink":"magritte-loading-blink___IELw-_2-2-0","loadingBlink":"magritte-loading-blink___IELw-_2-2-0","digit-box":"magritte-digit-box___6J0Q2_2-2-0","digitBox":"magritte-digit-box___6J0Q2_2-2-0","succeed-icon":"magritte-succeed-icon___Vag76_2-2-0","succeedIcon":"magritte-succeed-icon___Vag76_2-2-0","digit-box-container":"magritte-digit-box-container___BqMWw_2-2-0","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-2-0","digits-input":"magritte-digits-input___4QeLj_2-2-0","digitsInput":"magritte-digits-input___4QeLj_2-2-0","caret-left":"magritte-caret-left___iZMuA_2-2-0","caretLeft":"magritte-caret-left___iZMuA_2-2-0","caret-right":"magritte-caret-right___u8wNk_2-2-0","caretRight":"magritte-caret-right___u8wNk_2-2-0","caret-blink":"magritte-caret-blink___-bhg7_2-2-0","caretBlink":"magritte-caret-blink___-bhg7_2-2-0","value-container":"magritte-value-container___9JR3e_2-2-0","valueContainer":"magritte-value-container___9JR3e_2-2-0","ghost-value":"magritte-ghost-value___jPQwY_2-2-0","ghostValue":"magritte-ghost-value___jPQwY_2-2-0","current-value":"magritte-current-value___IT1-R_2-2-0","currentValue":"magritte-current-value___IT1-R_2-2-0"};
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) => {
@@ -199,11 +199,6 @@ const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'lar
199
199
  },
200
200
  };
201
201
  return (jsx("div", { className: classnames(styles.digitBox), "data-digit-index": index, children: jsx("span", { className: classnames(styles.valueContainer, {
202
- // в позицию ничего не введено, и каретка не находится в этой позиции
203
- [styles.placeholder]: index >= value.length &&
204
- (!focused ||
205
- (index !== caretPos &&
206
- !(caretPos === digitsCount && index === digitsCount - 1))),
207
202
  // в позицию введена цифра, каретка находится в этой позиции, фокус
208
203
  // установлен в инпут, это не крайняя справа цифра из введенных
209
204
  [styles.caretLeft]: index === caretPos && index !== value.length - 1 && focused,
@@ -223,7 +218,9 @@ const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'lar
223
218
  tokenSemanticAnimationEaseBaseX2,
224
219
  tokenSemanticAnimationEaseBaseY2,
225
220
  ],
226
- }, className: styles.currentValue, children: value[index] || '•' }, value[index] || '•') }) }) }, index));
221
+ }, "data-qa": `magritte-pincode-input-digit-${index}-value`, className: classnames(styles.currentValue, {
222
+ [styles.placeholder]: !value[index],
223
+ }), children: value[index] || '•' }, value[index] || '•') }) }) }, index));
227
224
  }) }), jsx("div", { className: styles.ghostValue, ref: ghostLastDigitRef, children: value.slice(caretPos, caretPos + 1) }), jsx(AnimatePresence, { children: succeed && (jsx(motion.span, { className: styles.succeedIcon, initial: { opacity: 0, scale: 0.75 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.75 }, transition: {
228
225
  duration: tokenSemanticAnimationTimeMDuration / 1000,
229
226
  ease: [
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} 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 [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 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 [styles.placeholder]:\n index >= value.length &&\n (!focused ||\n (index !== caretPos &&\n !(caretPos === digitsCount && index === digitsCount - 1))),\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 className={styles.currentValue}\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 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} 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 [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 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 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
@@ -49,7 +49,7 @@
49
49
  .magritte-zp-day-theme{
50
50
  --magritte-color-component-input-stroke-state-field-focused-v24-3-0:#7195AF;
51
51
  }
52
- .magritte-pincode-input___RpWyq_2-1-2{
52
+ .magritte-pincode-input___RpWyq_2-2-0{
53
53
  --magritte-pincode-input-padding-horizontal:20px;
54
54
  --magritte-pincode-input-padding-vertical:8px;
55
55
  --magritte-pincode-input-gap:6px;
@@ -72,7 +72,7 @@
72
72
  line-height:40px;
73
73
  color:var(--magritte-color-component-input-text-state-content-focused-v24-3-0);
74
74
  }
75
- .magritte-pincode-input___RpWyq_2-1-2.magritte-medium___wfRSc_2-1-2{
75
+ .magritte-pincode-input___RpWyq_2-2-0.magritte-medium___wfRSc_2-2-0{
76
76
  font-size:28px;
77
77
  --magritte-pincode-input-padding-horizontal:16px;
78
78
  --magritte-pincode-input-padding-vertical:6px;
@@ -80,56 +80,67 @@
80
80
  border-radius:12px;
81
81
  height:76px;
82
82
  }
83
- .magritte-pincode-input___RpWyq_2-1-2:hover{
84
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-3-0);
85
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-3-0);
83
+ @media (min-width: 1020px){
84
+ body.magritte-old-layout .magritte-pincode-input___RpWyq_2-2-0:not(.magritte-focus___IuhXb_2-2-0):not(.magritte-invalid___hB8h2_2-2-0):not(.magritte-loading___TbW3K_2-2-0):not(.magritte-succeed___32cIX_2-2-0):hover{
85
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-3-0);
86
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-3-0);
87
+ }
88
+ body.magritte-old-layout .magritte-pincode-input___RpWyq_2-2-0:not(.magritte-focus___IuhXb_2-2-0):not(.magritte-invalid___hB8h2_2-2-0):not(.magritte-loading___TbW3K_2-2-0):not(.magritte-succeed___32cIX_2-2-0):hover .magritte-placeholder___10kQ0_2-2-0{
89
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-3-0);
90
+ }
86
91
  }
87
- .magritte-pincode-input___RpWyq_2-1-2:hover .magritte-placeholder___10kQ0_2-1-2{
88
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-3-0);
92
+ @media (min-width: 1024px){
93
+ body:not(.magritte-old-layout) .magritte-pincode-input___RpWyq_2-2-0:not(.magritte-focus___IuhXb_2-2-0):not(.magritte-invalid___hB8h2_2-2-0):not(.magritte-loading___TbW3K_2-2-0):not(.magritte-succeed___32cIX_2-2-0):hover{
94
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-3-0);
95
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-3-0);
96
+ }
97
+ body:not(.magritte-old-layout) .magritte-pincode-input___RpWyq_2-2-0:not(.magritte-focus___IuhXb_2-2-0):not(.magritte-invalid___hB8h2_2-2-0):not(.magritte-loading___TbW3K_2-2-0):not(.magritte-succeed___32cIX_2-2-0):hover .magritte-placeholder___10kQ0_2-2-0{
98
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-3-0);
99
+ }
89
100
  }
90
- .magritte-pincode-input___RpWyq_2-1-2.magritte-focus___IuhXb_2-1-2{
101
+ .magritte-pincode-input___RpWyq_2-2-0.magritte-focus___IuhXb_2-2-0{
91
102
  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v24-3-0);
92
103
  background-color:var(--magritte-color-component-input-background-state-field-focused-v24-3-0);
93
104
  }
94
- .magritte-pincode-input___RpWyq_2-1-2.magritte-focus___IuhXb_2-1-2 .magritte-placeholder___10kQ0_2-1-2{
105
+ .magritte-pincode-input___RpWyq_2-2-0.magritte-focus___IuhXb_2-2-0 .magritte-placeholder___10kQ0_2-2-0{
95
106
  color:var(--magritte-color-component-input-text-state-placeholder-focused-v24-3-0);
96
107
  }
97
- .magritte-pincode-input___RpWyq_2-1-2.magritte-invalid___hB8h2_2-1-2{
108
+ .magritte-pincode-input___RpWyq_2-2-0.magritte-invalid___hB8h2_2-2-0{
98
109
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v24-3-0);
99
110
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v24-3-0);
100
111
  }
101
- .magritte-pincode-input___RpWyq_2-1-2.magritte-invalid___hB8h2_2-1-2 .magritte-placeholder___10kQ0_2-1-2{
112
+ .magritte-pincode-input___RpWyq_2-2-0.magritte-invalid___hB8h2_2-2-0 .magritte-placeholder___10kQ0_2-2-0{
102
113
  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v24-3-0);
103
114
  }
104
- .magritte-pincode-input___RpWyq_2-1-2.magritte-focus-visible___BN1eD_2-1-2{
115
+ .magritte-pincode-input___RpWyq_2-2-0.magritte-focus-visible___BN1eD_2-2-0{
105
116
  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-3-0) solid 4px;
106
117
  }
107
- .magritte-pincode-input___RpWyq_2-1-2.magritte-focus-visible___BN1eD_2-1-2.magritte-invalid___hB8h2_2-1-2{
118
+ .magritte-pincode-input___RpWyq_2-2-0.magritte-focus-visible___BN1eD_2-2-0.magritte-invalid___hB8h2_2-2-0{
108
119
  outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-3-0);
109
120
  }
110
- .magritte-pincode-input___RpWyq_2-1-2.magritte-loading___TbW3K_2-1-2{
121
+ .magritte-pincode-input___RpWyq_2-2-0.magritte-loading___TbW3K_2-2-0{
111
122
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-loading-v24-3-0);
112
123
  background-color:var(--magritte-color-component-input-background-state-field-loading-v24-3-0);
113
124
  color:var(--magritte-color-component-input-text-state-content-loading-v24-3-0);
114
125
  pointer-events:none;
115
126
  animation-delay:400ms;
116
- animation-name:magritte-loading-blink___IELw-_2-1-2;
127
+ animation-name:magritte-loading-blink___IELw-_2-2-0;
117
128
  animation-duration:calc(var(--magritte-semantic-animation-time-xl-duration-v24-3-0) + var(--magritte-semantic-animation-time-m-duration-v24-3-0) + 200ms);
118
129
  animation-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-3-0);
119
130
  animation-iteration-count:infinite;
120
131
  }
121
- .magritte-pincode-input___RpWyq_2-1-2.magritte-loading___TbW3K_2-1-2 .magritte-digit-box___6J0Q2_2-1-2{
132
+ .magritte-pincode-input___RpWyq_2-2-0.magritte-loading___TbW3K_2-2-0 .magritte-digit-box___6J0Q2_2-2-0{
122
133
  pointer-events:none;
123
134
  }
124
- .magritte-pincode-input___RpWyq_2-1-2.magritte-succeed___32cIX_2-1-2{
135
+ .magritte-pincode-input___RpWyq_2-2-0.magritte-succeed___32cIX_2-2-0{
125
136
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-3-0);
126
137
  background-color:var(--magritte-color-background-positive-v24-3-0);
127
138
  }
128
- .magritte-pincode-input___RpWyq_2-1-2.magritte-succeed___32cIX_2-1-2 .magritte-digit-box___6J0Q2_2-1-2{
139
+ .magritte-pincode-input___RpWyq_2-2-0.magritte-succeed___32cIX_2-2-0 .magritte-digit-box___6J0Q2_2-2-0{
129
140
  opacity:0;
130
141
  visibility:hidden;
131
142
  }
132
- .magritte-succeed-icon___Vag76_2-1-2{
143
+ .magritte-succeed-icon___Vag76_2-2-0{
133
144
  position:absolute;
134
145
  inset:0;
135
146
  display:flex;
@@ -138,7 +149,7 @@
138
149
  pointer-events:none;
139
150
  z-index:1;
140
151
  }
141
- .magritte-digit-box-container___BqMWw_2-1-2{
152
+ .magritte-digit-box-container___BqMWw_2-2-0{
142
153
  display:flex;
143
154
  gap:var(--magritte-pincode-input-gap);
144
155
  position:absolute;
@@ -149,7 +160,7 @@
149
160
  pointer-events:none;
150
161
  z-index:0;
151
162
  }
152
- .magritte-digit-box___6J0Q2_2-1-2{
163
+ .magritte-digit-box___6J0Q2_2-2-0{
153
164
  flex:0 0 var(--magritte-digit-box-width);
154
165
  pointer-events:auto;
155
166
  display:flex;
@@ -160,13 +171,13 @@
160
171
  transition-duration:var(--magritte-semantic-animation-time-m-duration-v24-3-0);
161
172
  transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-3-0);
162
173
  }
163
- .magritte-digit-box___6J0Q2_2-1-2::selection{
174
+ .magritte-digit-box___6J0Q2_2-2-0::selection{
164
175
  background-color:transparent;
165
176
  }
166
- .magritte-digit-box___6J0Q2_2-1-2::-moz-selection{
177
+ .magritte-digit-box___6J0Q2_2-2-0::-moz-selection{
167
178
  background-color:transparent;
168
179
  }
169
- .magritte-digits-input___4QeLj_2-1-2{
180
+ .magritte-digits-input___4QeLj_2-2-0{
170
181
  display:block;
171
182
  position:absolute;
172
183
  top:0;
@@ -184,50 +195,50 @@
184
195
  appearance:none;
185
196
  caret-color:transparent;
186
197
  }
187
- .magritte-digits-input___4QeLj_2-1-2::selection{
198
+ .magritte-digits-input___4QeLj_2-2-0::selection{
188
199
  background-color:transparent;
189
200
  appearance:none;
190
201
  }
191
- .magritte-digits-input___4QeLj_2-1-2::-moz-selection{
202
+ .magritte-digits-input___4QeLj_2-2-0::-moz-selection{
192
203
  background-color:transparent;
193
204
  appearance:none;
194
205
  }
195
- .magritte-caret-left___iZMuA_2-1-2::before,
196
- .magritte-caret-right___u8wNk_2-1-2::after{
206
+ .magritte-caret-left___iZMuA_2-2-0::before,
207
+ .magritte-caret-right___u8wNk_2-2-0::after{
197
208
  content:'';
198
209
  position:absolute;
199
210
  top:50%;
200
211
  transform:translateY(-50%);
201
212
  block-size:1em;
202
213
  border-left:1px solid var(--magritte-color-text-primary-v24-3-0);
203
- animation:magritte-caret-blink___-bhg7_2-1-2 1s steps(1) infinite;
214
+ animation:magritte-caret-blink___-bhg7_2-2-0 1s steps(1) infinite;
204
215
  }
205
- .magritte-caret-left___iZMuA_2-1-2::before{
216
+ .magritte-caret-left___iZMuA_2-2-0::before{
206
217
  left:-1px;
207
218
  }
208
- .magritte-caret-right___u8wNk_2-1-2::after{
219
+ .magritte-caret-right___u8wNk_2-2-0::after{
209
220
  right:-1px;
210
221
  }
211
- .magritte-placeholder___10kQ0_2-1-2{
222
+ .magritte-placeholder___10kQ0_2-2-0{
212
223
  color:var(--magritte-color-component-input-text-placeholder-v24-3-0);
213
224
  }
214
- .magritte-value-container___9JR3e_2-1-2{
225
+ .magritte-value-container___9JR3e_2-2-0{
215
226
  pointer-events:none;
216
227
  position:relative;
217
228
  min-width:20px;
218
229
  text-align:center;
219
230
  display:grid;
220
231
  }
221
- .magritte-ghost-value___jPQwY_2-1-2{
232
+ .magritte-ghost-value___jPQwY_2-2-0{
222
233
  display:inline-block;
223
234
  visibility:hidden;
224
235
  }
225
- @keyframes magritte-caret-blink___-bhg7_2-1-2{
236
+ @keyframes magritte-caret-blink___-bhg7_2-2-0{
226
237
  50%{
227
238
  opacity:0;
228
239
  }
229
240
  }
230
- @keyframes magritte-loading-blink___IELw-_2-1-2{
241
+ @keyframes magritte-loading-blink___IELw-_2-2-0{
231
242
  0%{
232
243
  opacity:1;
233
244
  }
@@ -241,7 +252,7 @@
241
252
  opacity:1;
242
253
  }
243
254
  }
244
- .magritte-current-value___IT1-R_2-1-2{
255
+ .magritte-current-value___IT1-R_2-2-0{
245
256
  display:inline-block;
246
257
  grid-area:1 / 1;
247
258
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-pincode-input",
3
- "version": "2.1.2",
3
+ "version": "2.2.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -25,8 +25,9 @@
25
25
  "@hh.ru/magritte-common-keyboard": "4.1.5",
26
26
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.10",
27
27
  "@hh.ru/magritte-design-tokens": "24.3.0",
28
- "@hh.ru/magritte-ui-form-helper": "2.0.21",
29
- "@hh.ru/magritte-ui-icon": "13.7.3",
28
+ "@hh.ru/magritte-ui-breakpoint": "6.0.5",
29
+ "@hh.ru/magritte-ui-form-helper": "2.0.23",
30
+ "@hh.ru/magritte-ui-icon": "13.7.5",
30
31
  "@hh.ru/magritte-ui-mock-component": "1.1.6"
31
32
  },
32
33
  "peerDependencies": {
@@ -34,5 +35,5 @@
34
35
  "motion": "^12.23.12",
35
36
  "react": ">=18.2.0"
36
37
  },
37
- "gitHead": "993ab7db5b0e21a46325640127f7abe9abfe799f"
38
+ "gitHead": "5b5fe13d8bd8ac942de2e1fa6e1fa9627272cfe4"
38
39
  }