@hh.ru/magritte-ui-pincode-input 2.0.19 → 2.1.1

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 (7) hide show
  1. package/PincodeInput.d.ts +2 -0
  2. package/PincodeInput.js +79 -23
  3. package/PincodeInput.js.map +1 -1
  4. package/index.css +143 -71
  5. package/index.js +3 -0
  6. package/index.js.map +1 -1
  7. package/package.json +6 -4
package/PincodeInput.d.ts CHANGED
@@ -14,6 +14,8 @@ export interface PincodeInputProps {
14
14
  onFocus?: FocusEventHandler<HTMLInputElement>;
15
15
  /** Обработчик потери фокуса */
16
16
  onBlur?: FocusEventHandler<HTMLInputElement>;
17
+ loading?: boolean;
18
+ succeed?: boolean;
17
19
  /** Флаг наличия ошибки */
18
20
  invalid?: boolean;
19
21
  /** Текст описания */
package/PincodeInput.js CHANGED
@@ -1,16 +1,19 @@
1
1
  import './index.css';
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
- import { forwardRef, useState, useRef, useLayoutEffect } from 'react';
3
+ import { forwardRef, useState, useRef, useLayoutEffect, useEffect } from 'react';
4
4
  import classnames from 'classnames';
5
+ import { AnimatePresence, motion } from 'motion/react';
5
6
  import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
6
7
  import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
8
+ import { tokenSemanticAnimationTimeMDuration, tokenSemanticAnimationEaseBaseX1, tokenSemanticAnimationEaseBaseY1, tokenSemanticAnimationEaseBaseX2, tokenSemanticAnimationEaseBaseY2 } from '@hh.ru/magritte-design-tokens/types';
7
9
  import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
10
+ import { CheckCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/variants/icon';
8
11
  import { useOTP } from './useOTP.js';
9
12
 
10
- var styles = {"pincode-input":"magritte-pincode-input___RpWyq_2-0-19","pincodeInput":"magritte-pincode-input___RpWyq_2-0-19","medium":"magritte-medium___wfRSc_2-0-19","placeholder":"magritte-placeholder___10kQ0_2-0-19","focus":"magritte-focus___IuhXb_2-0-19","invalid":"magritte-invalid___hB8h2_2-0-19","focus-visible":"magritte-focus-visible___BN1eD_2-0-19","focusVisible":"magritte-focus-visible___BN1eD_2-0-19","digit-box-container":"magritte-digit-box-container___BqMWw_2-0-19","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-0-19","digit-box":"magritte-digit-box___6J0Q2_2-0-19","digitBox":"magritte-digit-box___6J0Q2_2-0-19","digits-input":"magritte-digits-input___4QeLj_2-0-19","digitsInput":"magritte-digits-input___4QeLj_2-0-19","caret-left":"magritte-caret-left___iZMuA_2-0-19","caretLeft":"magritte-caret-left___iZMuA_2-0-19","caret-right":"magritte-caret-right___u8wNk_2-0-19","caretRight":"magritte-caret-right___u8wNk_2-0-19","caret-blink":"magritte-caret-blink___-bhg7_2-0-19","caretBlink":"magritte-caret-blink___-bhg7_2-0-19","value-container":"magritte-value-container___9JR3e_2-0-19","valueContainer":"magritte-value-container___9JR3e_2-0-19","ghost-value":"magritte-ghost-value___jPQwY_2-0-19","ghostValue":"magritte-ghost-value___jPQwY_2-0-19"};
13
+ var styles = {"pincode-input":"magritte-pincode-input___RpWyq_2-1-1","pincodeInput":"magritte-pincode-input___RpWyq_2-1-1","medium":"magritte-medium___wfRSc_2-1-1","placeholder":"magritte-placeholder___10kQ0_2-1-1","focus":"magritte-focus___IuhXb_2-1-1","invalid":"magritte-invalid___hB8h2_2-1-1","focus-visible":"magritte-focus-visible___BN1eD_2-1-1","focusVisible":"magritte-focus-visible___BN1eD_2-1-1","loading":"magritte-loading___TbW3K_2-1-1","loading-blink":"magritte-loading-blink___IELw-_2-1-1","loadingBlink":"magritte-loading-blink___IELw-_2-1-1","digit-box":"magritte-digit-box___6J0Q2_2-1-1","digitBox":"magritte-digit-box___6J0Q2_2-1-1","succeed":"magritte-succeed___32cIX_2-1-1","succeed-icon":"magritte-succeed-icon___Vag76_2-1-1","succeedIcon":"magritte-succeed-icon___Vag76_2-1-1","digit-box-container":"magritte-digit-box-container___BqMWw_2-1-1","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-1-1","digits-input":"magritte-digits-input___4QeLj_2-1-1","digitsInput":"magritte-digits-input___4QeLj_2-1-1","caret-left":"magritte-caret-left___iZMuA_2-1-1","caretLeft":"magritte-caret-left___iZMuA_2-1-1","caret-right":"magritte-caret-right___u8wNk_2-1-1","caretRight":"magritte-caret-right___u8wNk_2-1-1","caret-blink":"magritte-caret-blink___-bhg7_2-1-1","caretBlink":"magritte-caret-blink___-bhg7_2-1-1","value-container":"magritte-value-container___9JR3e_2-1-1","valueContainer":"magritte-value-container___9JR3e_2-1-1","ghost-value":"magritte-ghost-value___jPQwY_2-1-1","ghostValue":"magritte-ghost-value___jPQwY_2-1-1","current-value":"magritte-current-value___IT1-R_2-1-1","currentValue":"magritte-current-value___IT1-R_2-1-1"};
11
14
 
12
15
  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
13
- const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'large', invalid = false, name, onFocus, onBlur, onChange, description, errorMessage, credentialsRequestId = -1, onOTPCredentialsRequestFail, 'data-qa': dataQa = 'magritte-pincode-input', }, ref) => {
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) => {
14
17
  const digitsCount = _digitsCount ?? (size === 'medium' ? 6 : 4);
15
18
  const [value, setValue] = useState('');
16
19
  const [caretPosition, setCaretPosition] = useState(0);
@@ -21,10 +24,16 @@ const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'lar
21
24
  const containerRef = useRef(null);
22
25
  const inputRef = useRef(null);
23
26
  const autofillValueRef = useRef('');
27
+ const prevValue = useRef('');
28
+ const firstUpdatedIndex = [...Array(digitsCount).keys()].findIndex((_, index) => value[index] !== prevValue.current[index]);
29
+ const interactive = !loading && !succeed;
24
30
  const updateValue = (newValue) => {
25
31
  setValue(newValue);
26
32
  onChange?.(newValue);
27
33
  };
34
+ const syncValues = () => {
35
+ prevValue.current = value;
36
+ };
28
37
  useOTP((OTPCode) => {
29
38
  if (!OTPCode) {
30
39
  return;
@@ -48,12 +57,20 @@ const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'lar
48
57
  const lastWidth = ghostLastDigitRef.current.getBoundingClientRect().width;
49
58
  containerRef.current.style.setProperty('--magritte-pincode-last-digit-width', `${lastWidth}px`);
50
59
  }, [caretPosition, value]);
60
+ useEffect(() => {
61
+ if (!interactive) {
62
+ setFocused(false);
63
+ setFocusVisible(false);
64
+ }
65
+ }, [interactive]);
51
66
  const caretPos = clamp(caretPosition, 0, value.length);
52
- return (jsxs("div", { ref: ref, "data-qa": dataQa, tabIndex: 0, onFocus: () => inputRef.current?.focus(), children: [jsxs("div", { "data-qa": "magritte-pincode-input-wrapper", ref: containerRef, className: classnames(styles.pincodeInput, {
67
+ return (jsxs("div", { ref: ref, "data-qa": dataQa, tabIndex: interactive ? 0 : -1, onFocus: () => inputRef.current?.focus(), children: [jsxs("div", { "data-qa": "magritte-pincode-input-wrapper", ref: containerRef, className: classnames(styles.pincodeInput, {
53
68
  [styles.focus]: focused,
54
69
  [styles.focusVisible]: focusVisible,
55
70
  [styles.medium]: size === 'medium',
56
71
  [styles.invalid]: invalid,
72
+ [styles.loading]: loading,
73
+ [styles.succeed]: succeed,
57
74
  }), onMouseDown: (event) => {
58
75
  if (event.target === inputRef.current) {
59
76
  return;
@@ -67,7 +84,7 @@ const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'lar
67
84
  }, style: {
68
85
  '--magritte-pincode-digits-count': digitsCount,
69
86
  '--magritte-pincode-caret-position': caretPos,
70
- }, children: [jsx("input", { ref: inputRefMultiplexer, tabIndex: -1, autoComplete: "one-time-code", pattern: `\\d{${digitsCount}}`, "data-qa": "magritte-pincode-input-field", className: styles.digitsInput, type: "text", inputMode: "numeric", maxLength: digitsCount,
87
+ }, children: [jsx("input", { ref: inputRefMultiplexer, tabIndex: -1, disabled: !interactive, autoComplete: "one-time-code", pattern: `\\d{${digitsCount}}`, "data-qa": "magritte-pincode-input-field", className: styles.digitsInput, type: "text", inputMode: "numeric", maxLength: digitsCount,
71
88
  // оставляем инпут всегда пустым, т.к. он нам нужен только для показа контекстного меню вставки,
72
89
  // обработки события вставки и обработки фокуса
73
90
  value: "", onChange: (event) => {
@@ -159,24 +176,63 @@ const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'lar
159
176
  const newValue = `${value.slice(0, caretPos)}${pasteValue}${value.slice(caretPos + pasteValue.length)}`.slice(0, digitsCount);
160
177
  updateValue(newValue);
161
178
  setCaretPosition(Math.min(digitsCount - 1, caretPos + pasteValue.length));
162
- } }, inputKey), jsx("div", { className: styles.digitBoxContainer, children: Array.from({ length: digitsCount }).map((_, index) => (jsx("div", { className: classnames(styles.digitBox), "data-digit-index": index, children: jsx("span", { className: classnames(styles.valueContainer, {
163
- // в позицию ничего не введено, и каретка не находится в этой позиции
164
- [styles.placeholder]: index >= value.length &&
165
- (!focused ||
166
- (index !== caretPos &&
167
- !(caretPos === digitsCount && index === digitsCount - 1))),
168
- // в позицию введена цифра, каретка находится в этой позиции, фокус
169
- // установлен в инпут, это не крайняя справа цифра из введенных
170
- [styles.caretLeft]: index === caretPos && index !== value.length - 1 && focused,
171
- // в позицию введена цифра, каретка находится в этой позиции, либо в следующей
172
- // если введены все цифры (потому что при вводе последней цифры каретка
173
- // должна уходить за нее), фокус установлен в инпут, это крайняя справа цифра
174
- // из введенных
175
- [styles.caretRight]: (index === caretPos ||
176
- (index === digitsCount - 1 && index === caretPos - 1)) &&
177
- index === value.length - 1 &&
178
- focused,
179
- }), "data-qa": `magritte-pincode-input-digit-${index}`, children: value[index] || (caretPos === index && focused ? '' : '•') }) }, index))) }), jsx("div", { className: styles.ghostValue, ref: ghostLastDigitRef, children: value.slice(caretPos, caretPos + 1) })] }), jsx(FormHelper, { invalid: invalid, description: description, errorMessage: errorMessage, "data-qa": "magritte-pincode-input-message" }), !!name && jsx("input", { type: "hidden", name: name, value: value })] }));
179
+ } }, inputKey), jsx("div", { className: styles.digitBoxContainer, children: Array.from({ length: digitsCount }).map((_, index) => {
180
+ // Координата из которой прилетает цифра зависит от ее удаленности
181
+ // от первой изменяемой цифры (например при вставке)
182
+ const indent = firstUpdatedIndex !== -1 ? (index - firstUpdatedIndex) * 32 : 0;
183
+ // Анимация зависит от того, на что меняется символ - на точку или цифру
184
+ const variants = {
185
+ hidden: (empty) => {
186
+ return {
187
+ opacity: 0,
188
+ y: empty ? 16 : -16,
189
+ scale: empty ? 0.2 : 0.75,
190
+ };
191
+ },
192
+ animate: { opacity: 1, y: 0, scale: 1 },
193
+ initial: (empty) => {
194
+ return {
195
+ opacity: 0,
196
+ y: empty ? -16 : 16 + indent,
197
+ scale: empty ? 0.2 : 0.75,
198
+ };
199
+ },
200
+ };
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
+ // в позицию введена цифра, каретка находится в этой позиции, фокус
208
+ // установлен в инпут, это не крайняя справа цифра из введенных
209
+ [styles.caretLeft]: index === caretPos && index !== value.length - 1 && focused,
210
+ // в позицию введена цифра, каретка находится в этой позиции, либо в следующей
211
+ // если введены все цифры (потому что при вводе последней цифры каретка
212
+ // должна уходить за нее), фокус установлен в инпут, это крайняя справа цифра
213
+ // из введенных
214
+ [styles.caretRight]: (index === caretPos ||
215
+ (index === digitsCount - 1 && index === caretPos - 1)) &&
216
+ index === value.length - 1 &&
217
+ focused,
218
+ }), "data-qa": `magritte-pincode-input-digit-${index}`, children: jsx(AnimatePresence, { initial: false, onExitComplete: syncValues, custom: value[index] === undefined, children: jsx(motion.div, { variants: variants, initial: "initial", animate: "animate", exit: "hidden", custom: value[index] === undefined, transition: {
219
+ duration: tokenSemanticAnimationTimeMDuration / 1000,
220
+ ease: [
221
+ tokenSemanticAnimationEaseBaseX1,
222
+ tokenSemanticAnimationEaseBaseY1,
223
+ tokenSemanticAnimationEaseBaseX2,
224
+ tokenSemanticAnimationEaseBaseY2,
225
+ ],
226
+ }, className: styles.currentValue, children: value[index] || '•' }, value[index] || '•') }) }) }, index));
227
+ }) }), 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
+ duration: tokenSemanticAnimationTimeMDuration / 1000,
229
+ ease: [
230
+ tokenSemanticAnimationEaseBaseX1,
231
+ tokenSemanticAnimationEaseBaseY1,
232
+ tokenSemanticAnimationEaseBaseX2,
233
+ tokenSemanticAnimationEaseBaseY2,
234
+ ],
235
+ }, children: jsx(CheckCircleFilledSize24, { initialColor: "contrast" }) })) })] }), jsx(FormHelper, { invalid: invalid, description: description, errorMessage: errorMessage, "data-qa": "magritte-pincode-input-message" }), !!name && jsx("input", { type: "hidden", name: name, value: value })] }));
180
236
  });
181
237
  PincodeInput.displayName = 'PincodeInput';
182
238
 
package/PincodeInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PincodeInput.js","sources":["../src/PincodeInput.tsx"],"sourcesContent":["import { type CSSProperties, type FocusEventHandler, useRef, useState, forwardRef, useLayoutEffect } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { useOTP } from '@hh.ru/magritte-ui-pincode-input/useOTP';\n\nimport styles from './pincodeInput.less';\n\nexport type PincodeInputSize = 'medium' | 'large';\n\nexport interface PincodeInputProps {\n /**\n * Количество цифр в пин-коде, если не указано будет выбрано автоматически\n * в зависимости от размера инпута ( medium - 6, large - 4)\n */\n digitsCount?: number | null;\n /** Размер инпута */\n size?: PincodeInputSize;\n /** Обработчик изменений */\n onChange?: (value: string) => void;\n /** Обработчик фокуса */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /** Обработчик потери фокуса */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /** Флаг наличия ошибки */\n invalid?: boolean;\n /** Текст описания */\n description?: string;\n /** Текст сообщения об ошибке */\n errorMessage?: string;\n /**\n * Позволяет перезапустить процесс ожидания OTP sms. Может использоваться например если пользователь перезапросил\n * отправку OTP sms потому что в первый раз отменил чтение кода из sms. Используйте положительные целые числа.\n * */\n credentialsRequestId?: number;\n /**\n * Обработчик фейла запроса OTP Credentials. Он будет вызываться в т.ч. каждый раз при изменении\n * credentialsRequestId т.к. предыдущий запрос будет прерываться.\n * */\n onOTPCredentialsRequestFail?: (error: Error) => void;\n /**\n * При задании этого пропа создается скрытый инпут с переданным значением name и value равным введенному значению\n */\n name?: string;\n 'data-qa'?: string;\n}\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nexport const PincodeInput = forwardRef<HTMLDivElement, PincodeInputProps>(\n (\n {\n digitsCount: _digitsCount = null,\n size = 'large',\n invalid = false,\n name,\n onFocus,\n onBlur,\n onChange,\n description,\n errorMessage,\n credentialsRequestId = -1,\n onOTPCredentialsRequestFail,\n 'data-qa': dataQa = 'magritte-pincode-input',\n },\n ref\n ) => {\n const digitsCount = _digitsCount ?? (size === 'medium' ? 6 : 4);\n const [value, setValue] = useState<string>('');\n const [caretPosition, setCaretPosition] = useState<number>(0);\n const [focused, setFocused] = useState(false);\n const [focusVisible, setFocusVisible] = useState(false);\n const [inputKey, setInputKey] = useState(0);\n\n const ghostLastDigitRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const autofillValueRef = useRef('');\n\n const updateValue = (newValue: string) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n useOTP(\n (OTPCode) => {\n if (!OTPCode) {\n return;\n }\n const code = OTPCode.slice(0, digitsCount);\n updateValue(code);\n setCaretPosition(code.length - 1);\n setInputKey((key) => key + 1);\n },\n credentialsRequestId,\n onOTPCredentialsRequestFail\n );\n\n // внутри этого хука безопасно не мемоизировать рефколлбек, коллбек который будет возвращен будет мемоизирован\n // и не будет меняться при изменении ссылок на аргументы\n const inputRefMultiplexer = useMultipleRefs(inputRef, (element) => {\n if (element && focused) {\n element.focus();\n }\n });\n\n useLayoutEffect(() => {\n if (!containerRef.current || !ghostLastDigitRef.current) {\n return;\n }\n\n const lastWidth = ghostLastDigitRef.current.getBoundingClientRect().width;\n containerRef.current.style.setProperty('--magritte-pincode-last-digit-width', `${lastWidth}px`);\n }, [caretPosition, value]);\n\n const caretPos = clamp(caretPosition, 0, value.length);\n\n return (\n <div ref={ref} data-qa={dataQa} tabIndex={0} onFocus={() => inputRef.current?.focus()}>\n <div\n data-qa=\"magritte-pincode-input-wrapper\"\n ref={containerRef}\n className={classnames(styles.pincodeInput, {\n [styles.focus]: focused,\n [styles.focusVisible]: focusVisible,\n [styles.medium]: size === 'medium',\n [styles.invalid]: invalid,\n })}\n onMouseDown={(event) => {\n if (event.target === inputRef.current) {\n return;\n }\n event.preventDefault();\n\n const caretPosition = Math.min(\n Number((event.target as HTMLElement)?.dataset?.digitIndex ?? value.length),\n value.length\n );\n\n if (!focused) {\n inputRef.current?.focus();\n }\n\n setCaretPosition(caretPosition);\n }}\n style={\n {\n '--magritte-pincode-digits-count': digitsCount,\n '--magritte-pincode-caret-position': caretPos,\n } as CSSProperties\n }\n >\n <input\n key={inputKey}\n ref={inputRefMultiplexer}\n tabIndex={-1}\n autoComplete=\"one-time-code\"\n pattern={`\\\\d{${digitsCount}}`}\n data-qa=\"magritte-pincode-input-field\"\n className={styles.digitsInput}\n type=\"text\"\n inputMode=\"numeric\"\n maxLength={digitsCount}\n // оставляем инпут всегда пустым, т.к. он нам нужен только для показа контекстного меню вставки,\n // обработки события вставки и обработки фокуса\n value=\"\"\n onChange={(event) => {\n if (/\\D/.test(event.target.value)) {\n return;\n }\n\n // Вставку в инпут и нажатия клавиш цифр мы перехватываем\n // поэтому если попали сюда, значит использовался autofill (например из sms).\n // На iOS autofill генерит несколько событий, по количеству заполняемых символов.\n // Мы не меняем значение самого инпута, поэтому каждое событие будет содержать только\n // один символ. Сохраняем их и когда их количество достигнет ожидаемого (digitsCount)\n // подставляем в значение\n autofillValueRef.current += event.target.value;\n\n if (autofillValueRef.current.length >= digitsCount) {\n updateValue(autofillValueRef.current.slice(0, digitsCount));\n autofillValueRef.current = '';\n setCaretPosition(digitsCount - 1);\n\n // Кроме того при автозаполнении инпут красится в желтый цвет, что в нашем случае\n // недопустимо т.к. инпут располагается поверх цифр и должен быть прозрачным. Это нельзя\n // переопределить с помощью css, есть только хак когда задают transition для цвета фона\n // это замедлит смену цвета, но в конечном итоге инпут все же поменяет цвет фона.\n // Поэтому меняем key у инпута, чтобы он перемонтировался и браузер не определял его как\n // автозаполненный инпут. Важно после перемонтирования не забыть вернуть в него фокус,\n // иначе для вызова меню вставки потребуется два тапа вместо одного.\n setInputKey((key) => key + 1);\n }\n }}\n onFocus={(event) => {\n if (focused) {\n return;\n }\n onFocus?.(event);\n if (!event.defaultPrevented) {\n setFocused(true);\n setFocusVisible(!!inputRef.current?.classList.contains('focus-visible'));\n if (invalid) {\n // По спеке если инпут помечен как invalid при фокусе содержимое должно очищаться\n updateValue('');\n setCaretPosition(0);\n }\n }\n }}\n onBlur={(event) => {\n onBlur?.(event);\n if (!event.defaultPrevented) {\n setFocused(false);\n setFocusVisible(false);\n }\n }}\n onKeyDown={(event) => {\n if (!inputRef.current) {\n return;\n }\n\n const isLeft = keyboardMatch(event, keyboardKeys.ArrowLeft);\n const isRight = keyboardMatch(event, keyboardKeys.ArrowRight);\n if (isLeft || isRight) {\n event.preventDefault();\n setCaretPosition((caretPosition) =>\n clamp(caretPosition + (isRight ? 1 : -1), 0, value.length)\n );\n return;\n }\n\n if (/^\\d$/.test(event.key)) {\n updateValue(`${value.slice(0, caretPos)}${event.key}${value.slice(caretPos + 1)}`);\n setCaretPosition((caretPosition) => clamp(caretPosition + 1, 0, digitsCount - 1));\n event.preventDefault();\n return;\n }\n\n const isBackspace = keyboardMatch(event, keyboardKeys.Backspace);\n const isDelete = keyboardMatch(event, keyboardKeys.Delete);\n\n if (isBackspace || isDelete) {\n // При нажатии backspace действует следующая логика:\n // Если каретка находится в позиции последней введенной цифры, то удаляем её\n // и оставляем каретку на той же позиции\n // Если каретка находится в другой позиции, то удаляем цифру слева от каретки и\n // сдвигаем каретку влево\n\n const isLastDigit = caretPos === value.length - 1;\n const deleteIndex = clamp(\n caretPos - (isDelete || isLastDigit ? 0 : 1),\n 0,\n digitsCount - 1\n );\n updateValue(`${value.slice(0, deleteIndex)}${value.slice(deleteIndex + 1)}`);\n setCaretPosition((caretPosition) => {\n const newPosition =\n isLastDigit || isDelete ? caretPosition : Math.max(caretPosition - 1, 0);\n\n return newPosition;\n });\n\n event.preventDefault();\n }\n }}\n onPaste={(event) => {\n event.preventDefault();\n const pasteValue = event.clipboardData.getData('text').replace(/\\D/g, '');\n if (pasteValue.length === digitsCount) {\n updateValue(pasteValue);\n setCaretPosition(digitsCount - 1);\n return;\n }\n\n const newValue =\n `${value.slice(0, caretPos)}${pasteValue}${value.slice(caretPos + pasteValue.length)}`.slice(\n 0,\n digitsCount\n );\n updateValue(newValue);\n setCaretPosition(Math.min(digitsCount - 1, caretPos + pasteValue.length));\n }}\n />\n <div className={styles.digitBoxContainer}>\n {/* eslint-disable-next-line no-restricted-properties */}\n {Array.from({ length: digitsCount }).map((_, index) => (\n <div key={index} className={classnames(styles.digitBox)} data-digit-index={index}>\n <span\n className={classnames(styles.valueContainer, {\n // в позицию ничего не введено, и каретка не находится в этой позиции\n [styles.placeholder]:\n index >= value.length &&\n (!focused ||\n (index !== caretPos &&\n !(caretPos === digitsCount && index === digitsCount - 1))),\n // в позицию введена цифра, каретка находится в этой позиции, фокус\n // установлен в инпут, это не крайняя справа цифра из введенных\n [styles.caretLeft]: index === caretPos && index !== value.length - 1 && focused,\n // в позицию введена цифра, каретка находится в этой позиции, либо в следующей\n // если введены все цифры (потому что при вводе последней цифры каретка\n // должна уходить за нее), фокус установлен в инпут, это крайняя справа цифра\n // из введенных\n [styles.caretRight]:\n (index === caretPos ||\n (index === digitsCount - 1 && index === caretPos - 1)) &&\n index === value.length - 1 &&\n focused,\n })}\n data-qa={`magritte-pincode-input-digit-${index}`}\n >\n {value[index] || (caretPos === index && focused ? '' : '•')}\n </span>\n </div>\n ))}\n </div>\n <div className={styles.ghostValue} ref={ghostLastDigitRef}>\n {value.slice(caretPos, caretPos + 1)}\n </div>\n </div>\n <FormHelper\n invalid={invalid}\n description={description}\n errorMessage={errorMessage}\n data-qa=\"magritte-pincode-input-message\"\n />\n {!!name && <input type=\"hidden\" name={name} value={value} />}\n </div>\n );\n }\n);\n\nPincodeInput.displayName = 'PincodeInput';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
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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"}
package/index.css CHANGED
@@ -1,61 +1,78 @@
1
1
  :root{
2
- --magritte-color-text-primary-v24-1-0:#000000;
3
- --magritte-color-component-input-stroke-state-field-hovered-v24-1-0:#CCD5DF;
4
- --magritte-color-component-input-stroke-state-field-focused-v24-1-0:#0070ff;
5
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v24-1-0:#0070ff7a;
6
- --magritte-color-component-input-stroke-state-field-invalid-v24-1-0:#ff4d3a;
7
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v24-1-0:#ff4d3a7a;
8
- --magritte-color-component-input-background-field-v24-1-0:#ffffff;
9
- --magritte-color-component-input-background-state-field-hovered-v24-1-0:#ffffff;
10
- --magritte-color-component-input-background-state-field-focused-v24-1-0:#ffffff;
11
- --magritte-color-component-input-background-state-field-invalid-v24-1-0:#ffffff;
12
- --magritte-color-component-input-stroke-field-v24-1-0:#DCE3EB;
13
- --magritte-color-component-input-text-state-content-focused-v24-1-0:#000000;
14
- --magritte-color-component-input-text-state-placeholder-hovered-v24-1-0:#768694;
15
- --magritte-color-component-input-text-state-placeholder-focused-v24-1-0:#AABBCA;
16
- --magritte-color-component-input-text-state-placeholder-invalid-v24-1-0:#AABBCA;
17
- --magritte-color-component-input-text-placeholder-v24-1-0:#AABBCA;
2
+ --magritte-color-background-positive-v24-3-0:#0dc267;
3
+ --magritte-color-text-primary-v24-3-0:#000000;
4
+ --magritte-color-component-input-stroke-state-field-hovered-v24-3-0:#CCD5DF;
5
+ --magritte-color-component-input-stroke-state-field-loading-v24-3-0:#CCD5DF;
6
+ --magritte-color-component-input-stroke-state-field-focused-v24-3-0:#0070ff;
7
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v24-3-0:#0070ff7a;
8
+ --magritte-color-component-input-stroke-state-field-invalid-v24-3-0:#ff4d3a;
9
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v24-3-0:#ff4d3a7a;
10
+ --magritte-color-component-input-background-field-v24-3-0:#ffffff;
11
+ --magritte-color-component-input-background-state-field-loading-v24-3-0:#DCE3EB;
12
+ --magritte-color-component-input-background-state-field-hovered-v24-3-0:#ffffff;
13
+ --magritte-color-component-input-background-state-field-focused-v24-3-0:#ffffff;
14
+ --magritte-color-component-input-background-state-field-invalid-v24-3-0:#ffffff;
15
+ --magritte-color-component-input-stroke-field-v24-3-0:#DCE3EB;
16
+ --magritte-color-component-input-text-state-content-loading-v24-3-0:#768694;
17
+ --magritte-color-component-input-text-state-content-focused-v24-3-0:#000000;
18
+ --magritte-color-component-input-text-state-placeholder-hovered-v24-3-0:#768694;
19
+ --magritte-color-component-input-text-state-placeholder-focused-v24-3-0:#AABBCA;
20
+ --magritte-color-component-input-text-state-placeholder-invalid-v24-3-0:#AABBCA;
21
+ --magritte-color-component-input-text-placeholder-v24-3-0:#AABBCA;
22
+ }
23
+
24
+ :root{
25
+ --magritte-semantic-animation-time-m-duration-v24-3-0:400ms;
26
+ --magritte-semantic-animation-time-xl-duration-v24-3-0:800ms;
27
+ --magritte-semantic-animation-ease-base-timing-function-v24-3-0:cubic-bezier(0.4, 0.24, 0, 1);
18
28
  }
19
29
 
20
30
  .magritte-night-theme{
21
- --magritte-color-text-primary-v24-1-0:#ffffff;
22
- --magritte-color-component-input-stroke-state-field-hovered-v24-1-0:#3B3B3B;
23
- --magritte-color-component-input-background-field-v24-1-0:#111;
24
- --magritte-color-component-input-background-state-field-hovered-v24-1-0:#111;
25
- --magritte-color-component-input-background-state-field-focused-v24-1-0:#111;
26
- --magritte-color-component-input-background-state-field-invalid-v24-1-0:#111;
27
- --magritte-color-component-input-stroke-field-v24-1-0:#303030;
28
- --magritte-color-component-input-text-placeholder-v24-1-0:#535353;
29
- --magritte-color-component-input-text-state-content-focused-v24-1-0:#ffffff;
30
- --magritte-color-component-input-text-state-placeholder-hovered-v24-1-0:#5E5E5E;
31
- --magritte-color-component-input-text-state-placeholder-focused-v24-1-0:#535353;
32
- --magritte-color-component-input-text-state-placeholder-invalid-v24-1-0:#535353;
31
+ --magritte-color-background-positive-v24-3-0:#10b55f;
32
+ --magritte-color-text-primary-v24-3-0:#ffffff;
33
+ --magritte-color-component-input-stroke-state-field-hovered-v24-3-0:#3B3B3B;
34
+ --magritte-color-component-input-stroke-state-field-loading-v24-3-0:#3B3B3B;
35
+ --magritte-color-component-input-background-field-v24-3-0:#111;
36
+ --magritte-color-component-input-background-state-field-hovered-v24-3-0:#111;
37
+ --magritte-color-component-input-background-state-field-loading-v24-3-0:#474747;
38
+ --magritte-color-component-input-background-state-field-focused-v24-3-0:#111;
39
+ --magritte-color-component-input-background-state-field-invalid-v24-3-0:#111;
40
+ --magritte-color-component-input-stroke-field-v24-3-0:#303030;
41
+ --magritte-color-component-input-text-placeholder-v24-3-0:#535353;
42
+ --magritte-color-component-input-text-state-content-loading-v24-3-0:#ABABAB;
43
+ --magritte-color-component-input-text-state-content-focused-v24-3-0:#ffffff;
44
+ --magritte-color-component-input-text-state-placeholder-hovered-v24-3-0:#5E5E5E;
45
+ --magritte-color-component-input-text-state-placeholder-focused-v24-3-0:#535353;
46
+ --magritte-color-component-input-text-state-placeholder-invalid-v24-3-0:#535353;
33
47
  }
34
48
 
35
49
  .magritte-zp-day-theme{
36
- --magritte-color-component-input-stroke-state-field-focused-v24-1-0:#7195AF;
50
+ --magritte-color-component-input-stroke-state-field-focused-v24-3-0:#7195AF;
37
51
  }
38
- .magritte-pincode-input___RpWyq_2-0-19{
52
+ .magritte-pincode-input___RpWyq_2-1-1{
39
53
  --magritte-pincode-input-padding-horizontal:20px;
40
54
  --magritte-pincode-input-padding-vertical:8px;
41
55
  --magritte-pincode-input-gap:6px;
42
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));
43
57
  box-sizing:border-box;
44
58
  height:88px;
45
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-1-0);
59
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-3-0);
46
60
  border-radius:18px;
47
- background-color:var(--magritte-color-component-input-background-field-v24-1-0);
61
+ background-color:var(--magritte-color-component-input-background-field-v24-3-0);
48
62
  position:relative;
49
63
  overflow:clip;
50
64
  cursor:text;
65
+ transition-property:background-color;
66
+ transition-duration:var(--magritte-semantic-animation-time-m-duration-v24-3-0);
67
+ transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-3-0);
51
68
  font-family:hh sans;
52
69
  font-size:32px;
53
70
  font-style:normal;
54
71
  font-weight:normal;
55
72
  line-height:40px;
56
- color:var(--magritte-color-component-input-text-state-content-focused-v24-1-0);
73
+ color:var(--magritte-color-component-input-text-state-content-focused-v24-3-0);
57
74
  }
58
- .magritte-pincode-input___RpWyq_2-0-19.magritte-medium___wfRSc_2-0-19{
75
+ .magritte-pincode-input___RpWyq_2-1-1.magritte-medium___wfRSc_2-1-1{
59
76
  font-size:28px;
60
77
  --magritte-pincode-input-padding-horizontal:16px;
61
78
  --magritte-pincode-input-padding-vertical:6px;
@@ -63,34 +80,65 @@
63
80
  border-radius:12px;
64
81
  height:76px;
65
82
  }
66
- .magritte-pincode-input___RpWyq_2-0-19:hover{
67
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-1-0);
68
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-1-0);
83
+ .magritte-pincode-input___RpWyq_2-1-1: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);
86
+ }
87
+ .magritte-pincode-input___RpWyq_2-1-1:hover .magritte-placeholder___10kQ0_2-1-1{
88
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-3-0);
69
89
  }
70
- .magritte-pincode-input___RpWyq_2-0-19:hover .magritte-placeholder___10kQ0_2-0-19{
71
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-1-0);
90
+ .magritte-pincode-input___RpWyq_2-1-1.magritte-focus___IuhXb_2-1-1{
91
+ box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v24-3-0);
92
+ background-color:var(--magritte-color-component-input-background-state-field-focused-v24-3-0);
72
93
  }
73
- .magritte-pincode-input___RpWyq_2-0-19.magritte-focus___IuhXb_2-0-19{
74
- box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v24-1-0);
75
- background-color:var(--magritte-color-component-input-background-state-field-focused-v24-1-0);
94
+ .magritte-pincode-input___RpWyq_2-1-1.magritte-focus___IuhXb_2-1-1 .magritte-placeholder___10kQ0_2-1-1{
95
+ color:var(--magritte-color-component-input-text-state-placeholder-focused-v24-3-0);
76
96
  }
77
- .magritte-pincode-input___RpWyq_2-0-19.magritte-focus___IuhXb_2-0-19 .magritte-placeholder___10kQ0_2-0-19{
78
- color:var(--magritte-color-component-input-text-state-placeholder-focused-v24-1-0);
97
+ .magritte-pincode-input___RpWyq_2-1-1.magritte-invalid___hB8h2_2-1-1{
98
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v24-3-0);
99
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v24-3-0);
79
100
  }
80
- .magritte-pincode-input___RpWyq_2-0-19.magritte-invalid___hB8h2_2-0-19{
81
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v24-1-0);
82
- background-color:var(--magritte-color-component-input-background-state-field-invalid-v24-1-0);
101
+ .magritte-pincode-input___RpWyq_2-1-1.magritte-invalid___hB8h2_2-1-1 .magritte-placeholder___10kQ0_2-1-1{
102
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v24-3-0);
83
103
  }
84
- .magritte-pincode-input___RpWyq_2-0-19.magritte-invalid___hB8h2_2-0-19 .magritte-placeholder___10kQ0_2-0-19{
85
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v24-1-0);
104
+ .magritte-pincode-input___RpWyq_2-1-1.magritte-focus-visible___BN1eD_2-1-1{
105
+ outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-3-0) solid 4px;
86
106
  }
87
- .magritte-pincode-input___RpWyq_2-0-19.magritte-focus-visible___BN1eD_2-0-19{
88
- outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-1-0) solid 4px;
107
+ .magritte-pincode-input___RpWyq_2-1-1.magritte-focus-visible___BN1eD_2-1-1.magritte-invalid___hB8h2_2-1-1{
108
+ outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-3-0);
89
109
  }
90
- .magritte-pincode-input___RpWyq_2-0-19.magritte-focus-visible___BN1eD_2-0-19.magritte-invalid___hB8h2_2-0-19{
91
- outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-1-0);
110
+ .magritte-pincode-input___RpWyq_2-1-1.magritte-loading___TbW3K_2-1-1{
111
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-loading-v24-3-0);
112
+ background-color:var(--magritte-color-component-input-background-state-field-loading-v24-3-0);
113
+ color:var(--magritte-color-component-input-text-state-content-loading-v24-3-0);
114
+ pointer-events:none;
115
+ animation-delay:400ms;
116
+ animation-name:magritte-loading-blink___IELw-_2-1-1;
117
+ 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
+ animation-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-3-0);
119
+ animation-iteration-count:infinite;
120
+ }
121
+ .magritte-pincode-input___RpWyq_2-1-1.magritte-loading___TbW3K_2-1-1 .magritte-digit-box___6J0Q2_2-1-1{
122
+ pointer-events:none;
92
123
  }
93
- .magritte-digit-box-container___BqMWw_2-0-19{
124
+ .magritte-pincode-input___RpWyq_2-1-1.magritte-succeed___32cIX_2-1-1{
125
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-3-0);
126
+ background-color:var(--magritte-color-background-positive-v24-3-0);
127
+ }
128
+ .magritte-pincode-input___RpWyq_2-1-1.magritte-succeed___32cIX_2-1-1 .magritte-digit-box___6J0Q2_2-1-1{
129
+ opacity:0;
130
+ visibility:hidden;
131
+ }
132
+ .magritte-succeed-icon___Vag76_2-1-1{
133
+ position:absolute;
134
+ inset:0;
135
+ display:flex;
136
+ align-items:center;
137
+ justify-content:center;
138
+ pointer-events:none;
139
+ z-index:1;
140
+ }
141
+ .magritte-digit-box-container___BqMWw_2-1-1{
94
142
  display:flex;
95
143
  gap:var(--magritte-pincode-input-gap);
96
144
  position:absolute;
@@ -101,21 +149,24 @@
101
149
  pointer-events:none;
102
150
  z-index:0;
103
151
  }
104
- .magritte-digit-box___6J0Q2_2-0-19{
152
+ .magritte-digit-box___6J0Q2_2-1-1{
105
153
  flex:0 0 var(--magritte-digit-box-width);
106
154
  pointer-events:auto;
107
155
  display:flex;
108
156
  align-items:center;
109
157
  justify-content:center;
110
158
  user-select:none;
159
+ transition-property:opacity, visibility;
160
+ transition-duration:var(--magritte-semantic-animation-time-m-duration-v24-3-0);
161
+ transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-3-0);
111
162
  }
112
- .magritte-digit-box___6J0Q2_2-0-19::selection{
163
+ .magritte-digit-box___6J0Q2_2-1-1::selection{
113
164
  background-color:transparent;
114
165
  }
115
- .magritte-digit-box___6J0Q2_2-0-19::-moz-selection{
166
+ .magritte-digit-box___6J0Q2_2-1-1::-moz-selection{
116
167
  background-color:transparent;
117
168
  }
118
- .magritte-digits-input___4QeLj_2-0-19{
169
+ .magritte-digits-input___4QeLj_2-1-1{
119
170
  display:block;
120
171
  position:absolute;
121
172
  top:0;
@@ -133,43 +184,64 @@
133
184
  appearance:none;
134
185
  caret-color:transparent;
135
186
  }
136
- .magritte-digits-input___4QeLj_2-0-19::selection{
187
+ .magritte-digits-input___4QeLj_2-1-1::selection{
137
188
  background-color:transparent;
138
189
  appearance:none;
139
190
  }
140
- .magritte-digits-input___4QeLj_2-0-19::-moz-selection{
191
+ .magritte-digits-input___4QeLj_2-1-1::-moz-selection{
141
192
  background-color:transparent;
142
193
  appearance:none;
143
194
  }
144
- .magritte-caret-left___iZMuA_2-0-19::before,
145
- .magritte-caret-right___u8wNk_2-0-19::after{
195
+ .magritte-caret-left___iZMuA_2-1-1::before,
196
+ .magritte-caret-right___u8wNk_2-1-1::after{
146
197
  content:'';
147
198
  position:absolute;
148
199
  top:50%;
149
200
  transform:translateY(-50%);
150
201
  block-size:1em;
151
- border-left:1px solid var(--magritte-color-text-primary-v24-1-0);
152
- animation:magritte-caret-blink___-bhg7_2-0-19 1s steps(1) infinite;
202
+ border-left:1px solid var(--magritte-color-text-primary-v24-3-0);
203
+ animation:magritte-caret-blink___-bhg7_2-1-1 1s steps(1) infinite;
153
204
  }
154
- .magritte-caret-left___iZMuA_2-0-19::before{
205
+ .magritte-caret-left___iZMuA_2-1-1::before{
155
206
  left:-1px;
156
207
  }
157
- .magritte-caret-right___u8wNk_2-0-19::after{
208
+ .magritte-caret-right___u8wNk_2-1-1::after{
158
209
  right:-1px;
159
210
  }
160
- .magritte-placeholder___10kQ0_2-0-19{
161
- color:var(--magritte-color-component-input-text-placeholder-v24-1-0);
211
+ .magritte-placeholder___10kQ0_2-1-1{
212
+ color:var(--magritte-color-component-input-text-placeholder-v24-3-0);
162
213
  }
163
- .magritte-value-container___9JR3e_2-0-19{
214
+ .magritte-value-container___9JR3e_2-1-1{
164
215
  pointer-events:none;
165
216
  position:relative;
217
+ min-width:20px;
218
+ text-align:center;
219
+ display:grid;
166
220
  }
167
- .magritte-ghost-value___jPQwY_2-0-19{
221
+ .magritte-ghost-value___jPQwY_2-1-1{
168
222
  display:inline-block;
169
223
  visibility:hidden;
170
224
  }
171
- @keyframes magritte-caret-blink___-bhg7_2-0-19{
225
+ @keyframes magritte-caret-blink___-bhg7_2-1-1{
172
226
  50%{
173
227
  opacity:0;
174
228
  }
175
229
  }
230
+ @keyframes magritte-loading-blink___IELw-_2-1-1{
231
+ 0%{
232
+ opacity:1;
233
+ }
234
+ 14%{
235
+ opacity:1;
236
+ }
237
+ 42%{
238
+ opacity:0.5;
239
+ }
240
+ 100%{
241
+ opacity:1;
242
+ }
243
+ }
244
+ .magritte-current-value___IT1-R_2-1-1{
245
+ display:inline-block;
246
+ grid-area:1 / 1;
247
+ }
package/index.js CHANGED
@@ -3,8 +3,11 @@ export { PincodeInput } from './PincodeInput.js';
3
3
  import 'react/jsx-runtime';
4
4
  import 'react';
5
5
  import 'classnames';
6
+ import 'motion/react';
6
7
  import '@hh.ru/magritte-common-keyboard';
7
8
  import '@hh.ru/magritte-common-use-multiple-refs';
9
+ import '@hh.ru/magritte-design-tokens/types';
8
10
  import '@hh.ru/magritte-ui-form-helper';
11
+ import '@hh.ru/magritte-ui-icon/variants/icon';
9
12
  import './useOTP.js';
10
13
  //# sourceMappingURL=index.js.map
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-pincode-input",
3
- "version": "2.0.19",
3
+ "version": "2.1.1",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -24,13 +24,15 @@
24
24
  "dependencies": {
25
25
  "@hh.ru/magritte-common-keyboard": "4.1.4",
26
26
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.10",
27
- "@hh.ru/magritte-design-tokens": "24.1.0",
28
- "@hh.ru/magritte-ui-form-helper": "2.0.18",
27
+ "@hh.ru/magritte-design-tokens": "24.3.0",
28
+ "@hh.ru/magritte-ui-form-helper": "2.0.20",
29
+ "@hh.ru/magritte-ui-icon": "13.7.2",
29
30
  "@hh.ru/magritte-ui-mock-component": "1.1.6"
30
31
  },
31
32
  "peerDependencies": {
32
33
  "classnames": ">=2.3.2",
34
+ "motion": "^12.23.12",
33
35
  "react": ">=18.2.0"
34
36
  },
35
- "gitHead": "81e0b1e650f82a70a40388933c4e124e1d9903eb"
37
+ "gitHead": "73a784449ee871c609c8343c11b43207551f3793"
36
38
  }