mimir-ui-kit 0.0.19 → 0.0.20

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 (3) hide show
  1. package/dist/components/OtpInput/OtpInput.d.ts +8 -13
  2. package/dist/components/OtpInput/OtpInput.js +119 -111
  3. package/package.json +1 -1
package/dist/components/OtpInput/OtpInput.d.ts CHANGED
@@ -1,6 +1,12 @@
1
1
  import { TInputProps } from '../Input';
2
2
 
3
- type TProps = Omit<TInputProps, 'onChange' | 'label'> & {
3
+ /**
4
+ * Компонент ввода одноразового пароля (OTP).
5
+ *
6
+ * Компонент представляет собой набор вводов, каждый из которых может содержать только цифры.
7
+ * Пользователь может вводить цифры в каждый ввод, и при вводе каждой цифры происходит автоматическое переключение на следующий ввод.
8
+ */
9
+ export declare const OtpInput: import('react').ForwardRefExoticComponent<Omit<TInputProps, "label" | "onChange"> & {
4
10
  value?: string;
5
11
  /**
6
12
  * Количество полей ввода.
@@ -14,15 +20,4 @@ type TProps = Omit<TInputProps, 'onChange' | 'label'> & {
14
20
  * Флаг, показывающий нужно ли отображать разделитель между вводами.
15
21
  */
16
22
  needSeparator?: boolean;
17
- };
18
- /**
19
- * Компонент ввода одноразового пароля (OTP).
20
- *
21
- * Компонент представляет собой набор вводов, каждый из которых может содержать только цифры.
22
- * Пользователь может вводить цифры в каждый ввод, и при вводе каждой цифры происходит автоматическое переключение на следующий ввод.
23
- */
24
- export declare const OtpInput: {
25
- ({ value, valueLength, needSeparator, onChange, ...props }: TProps): import("react/jsx-runtime").JSX.Element;
26
- displayName: string;
27
- };
28
- export {};
23
+ } & import('react').RefAttributes<unknown>>;
package/dist/components/OtpInput/OtpInput.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useRef, useMemo, Fragment } from "react";
2
+ import { forwardRef, useRef, useImperativeHandle, useMemo, Fragment } from "react";
3
3
  import { c as classNames } from "../../index-CweZ_OcN.js";
4
4
  import { Input } from "../Input/Input.js";
5
5
  import { RE_DIGIT, ITEMS_PER_SEPARATOR, DEFAULT_VALUE_LENGTH } from "./constants.js";
@@ -12,121 +12,129 @@ const cls = {
12
12
  input,
13
13
  separator
14
14
  };
15
- const OtpInput = ({
16
- value = "",
17
- valueLength = DEFAULT_VALUE_LENGTH,
18
- needSeparator = true,
19
- onChange,
20
- ...props
21
- }) => {
22
- const inputRefs = useRef([]);
23
- const valueItems = useMemo(() => {
24
- const valueArray = value.split("");
25
- const items = [];
26
- for (let i = 0; i < valueLength; i++) {
27
- const char = valueArray[i];
28
- if (RE_DIGIT.test(char)) {
29
- items.push(char);
30
- } else {
31
- items.push("");
15
+ const OtpInput = forwardRef(
16
+ ({
17
+ value = "",
18
+ valueLength = DEFAULT_VALUE_LENGTH,
19
+ needSeparator = true,
20
+ onChange,
21
+ ...props
22
+ }, ref) => {
23
+ const inputRefs = useRef([]);
24
+ useImperativeHandle(ref, () => ({
25
+ focus: () => {
26
+ var _a;
27
+ (_a = inputRefs.current[0]) == null ? void 0 : _a.focus();
32
28
  }
33
- }
34
- return items;
35
- }, [value, valueLength]);
36
- const handleFocusToNextInput = (index) => {
37
- var _a;
38
- if (index < valueLength - 1) {
39
- (_a = inputRefs.current[index + 1]) == null ? void 0 : _a.focus();
40
- }
41
- };
42
- const handleFocusToPrevInput = (index) => {
43
- var _a;
44
- if (index > 0) {
45
- (_a = inputRefs.current[index - 1]) == null ? void 0 : _a.focus();
46
- }
47
- };
48
- const handleChange = (e, index) => {
49
- const target = e.target;
50
- let targetValue = target.value.trim();
51
- const isTargetValueDigit = RE_DIGIT.test(targetValue);
52
- if (!isTargetValueDigit && targetValue !== "") {
53
- return;
54
- }
55
- const nextInputEl = inputRefs.current[index + 1];
56
- if (!isTargetValueDigit && nextInputEl && nextInputEl.value !== "") {
57
- return;
58
- }
59
- targetValue = isTargetValueDigit ? targetValue : " ";
60
- const targetValueLength = targetValue.length;
61
- if (targetValueLength === 1) {
62
- const newValue = value.substring(0, index) + targetValue + value.substring(index + 1);
63
- onChange == null ? void 0 : onChange(newValue);
64
- if (isTargetValueDigit) {
65
- handleFocusToNextInput(index);
29
+ }));
30
+ const valueItems = useMemo(() => {
31
+ const valueArray = value.split("");
32
+ const items = [];
33
+ for (let i = 0; i < valueLength; i++) {
34
+ const char = valueArray[i];
35
+ if (RE_DIGIT.test(char)) {
36
+ items.push(char);
37
+ } else {
38
+ items.push("");
39
+ }
40
+ }
41
+ return items;
42
+ }, [value, valueLength]);
43
+ const handleFocusToNextInput = (index) => {
44
+ var _a;
45
+ if (index < valueLength - 1) {
46
+ (_a = inputRefs.current[index + 1]) == null ? void 0 : _a.focus();
66
47
  }
67
- } else if (targetValueLength === valueLength) {
68
- onChange == null ? void 0 : onChange(targetValue);
69
- target.blur();
70
- }
71
- };
72
- const handleKeyDown = (e, index) => {
73
- const { key } = e;
74
- const target = e.target;
75
- switch (key) {
76
- case "ArrowRight":
77
- case "ArrowDown": {
78
- e.preventDefault();
79
- return handleFocusToNextInput(index);
48
+ };
49
+ const handleFocusToPrevInput = (index) => {
50
+ var _a;
51
+ if (index > 0) {
52
+ (_a = inputRefs.current[index - 1]) == null ? void 0 : _a.focus();
80
53
  }
81
- case "ArrowLeft":
82
- case "ArrowUp": {
83
- e.preventDefault();
84
- return handleFocusToPrevInput(index);
54
+ };
55
+ const handleChange = (e, index) => {
56
+ const target = e.target;
57
+ let targetValue = target.value.trim();
58
+ const isTargetValueDigit = RE_DIGIT.test(targetValue);
59
+ if (!isTargetValueDigit && targetValue !== "") {
60
+ return;
85
61
  }
86
- }
87
- const targetValue = target.value;
88
- target.setSelectionRange(0, targetValue.length);
89
- if (e.key !== "Backspace" || targetValue !== "") {
90
- return;
91
- }
92
- const newValue = `${value.substring(0, index - 1)} ${value.substring(index)}`;
93
- onChange == null ? void 0 : onChange(newValue);
94
- handleFocusToPrevInput(index);
95
- };
96
- const handleFocus = (e, index) => {
97
- const target = e.target;
98
- const prevInputEl = inputRefs.current[index - 1];
99
- if (prevInputEl && prevInputEl.value === "") {
100
- prevInputEl.focus();
101
- }
102
- target.setSelectionRange(0, target.value.length);
103
- };
104
- return /* @__PURE__ */ jsx("div", { className: classNames(cls.otp), children: valueItems.map((digit, idx) => {
105
- const nextIndex = idx + 1;
106
- const showSeparator = needSeparator && nextIndex % ITEMS_PER_SEPARATOR === 0 && nextIndex !== valueItems.length;
107
- return /* @__PURE__ */ jsxs(Fragment, { children: [
108
- /* @__PURE__ */ jsx(
109
- Input,
110
- {
111
- ref: (el) => inputRefs.current[idx] = el,
112
- type: "text",
113
- inputMode: "numeric",
114
- autoComplete: "one-time-code",
115
- pattern: "\\d{1}",
116
- maxLength: 1,
117
- value: digit,
118
- className: cls.input,
119
- wrapperClassName: cls["input-wrapper"],
120
- onChange: (e) => handleChange(e, idx),
121
- onKeyDown: (e) => handleKeyDown(e, idx),
122
- onFocus: (e) => handleFocus(e, idx),
123
- ...props
62
+ const nextInputEl = inputRefs.current[index + 1];
63
+ if (!isTargetValueDigit && nextInputEl && nextInputEl.value !== "") {
64
+ return;
65
+ }
66
+ targetValue = isTargetValueDigit ? targetValue : " ";
67
+ const targetValueLength = targetValue.length;
68
+ if (targetValueLength === 1) {
69
+ const newValue = value.substring(0, index) + targetValue + value.substring(index + 1);
70
+ onChange == null ? void 0 : onChange(newValue);
71
+ if (isTargetValueDigit) {
72
+ handleFocusToNextInput(index);
124
73
  }
125
- ),
126
- showSeparator && /* @__PURE__ */ jsx("span", { className: classNames(cls.separator) })
127
- ] }, idx);
128
- }) });
129
- };
74
+ } else if (targetValueLength === valueLength) {
75
+ onChange == null ? void 0 : onChange(targetValue);
76
+ target.blur();
77
+ }
78
+ };
79
+ const handleKeyDown = (e, index) => {
80
+ const { key } = e;
81
+ const target = e.target;
82
+ switch (key) {
83
+ case "ArrowRight":
84
+ case "ArrowDown": {
85
+ e.preventDefault();
86
+ return handleFocusToNextInput(index);
87
+ }
88
+ case "ArrowLeft":
89
+ case "ArrowUp": {
90
+ e.preventDefault();
91
+ return handleFocusToPrevInput(index);
92
+ }
93
+ }
94
+ const targetValue = target.value;
95
+ target.setSelectionRange(0, targetValue.length);
96
+ if (e.key !== "Backspace" || targetValue !== "") {
97
+ return;
98
+ }
99
+ const newValue = `${value.substring(0, index - 1)} ${value.substring(index)}`;
100
+ onChange == null ? void 0 : onChange(newValue);
101
+ handleFocusToPrevInput(index);
102
+ };
103
+ const handleFocus = (e, index) => {
104
+ const target = e.target;
105
+ const prevInputEl = inputRefs.current[index - 1];
106
+ if (prevInputEl && prevInputEl.value === "") {
107
+ prevInputEl.focus();
108
+ }
109
+ target.setSelectionRange(0, target.value.length);
110
+ };
111
+ return /* @__PURE__ */ jsx("div", { className: classNames(cls.otp), children: valueItems.map((digit, idx) => {
112
+ const nextIndex = idx + 1;
113
+ const showSeparator = needSeparator && nextIndex % ITEMS_PER_SEPARATOR === 0 && nextIndex !== valueItems.length;
114
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
115
+ /* @__PURE__ */ jsx(
116
+ Input,
117
+ {
118
+ ref: (el) => inputRefs.current[idx] = el,
119
+ type: "text",
120
+ inputMode: "numeric",
121
+ autoComplete: "one-time-code",
122
+ pattern: "\\d{1}",
123
+ maxLength: 1,
124
+ value: digit,
125
+ className: cls.input,
126
+ wrapperClassName: cls["input-wrapper"],
127
+ onChange: (e) => handleChange(e, idx),
128
+ onKeyDown: (e) => handleKeyDown(e, idx),
129
+ onFocus: (e) => handleFocus(e, idx),
130
+ ...props
131
+ }
132
+ ),
133
+ showSeparator && /* @__PURE__ */ jsx("span", { className: classNames(cls.separator) })
134
+ ] }, idx);
135
+ }) });
136
+ }
137
+ );
130
138
  OtpInput.displayName = "OtpInput";
131
139
  export {
132
140
  OtpInput
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mimir-ui-kit",
3
3
  "private": false,
4
- "version": "0.0.19",
4
+ "version": "0.0.20",
5
5
  "type": "module",
6
6
  "exports": "./dist/index.js",
7
7
  "module": "./dist/index.js",