@yamada-ui/pin-input 0.2.6 → 0.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-WNHBQS2L.mjs → chunk-UWLEAKTM.mjs} +33 -13
- package/dist/index.js +27 -12
- package/dist/index.mjs +1 -1
- package/dist/pin-input.js +27 -12
- package/dist/pin-input.mjs +1 -1
- package/package.json +6 -6
|
@@ -20,7 +20,12 @@ import {
|
|
|
20
20
|
filterUndefined,
|
|
21
21
|
getValidChildren
|
|
22
22
|
} from "@yamada-ui/utils";
|
|
23
|
-
import {
|
|
23
|
+
import {
|
|
24
|
+
useCallback,
|
|
25
|
+
useEffect,
|
|
26
|
+
useId,
|
|
27
|
+
useState
|
|
28
|
+
} from "react";
|
|
24
29
|
import { jsx } from "react/jsx-runtime";
|
|
25
30
|
var toArray = (value) => value == null ? void 0 : value.split("");
|
|
26
31
|
var validate = (value, type) => {
|
|
@@ -103,17 +108,20 @@ var PinInput = forwardRef(
|
|
|
103
108
|
},
|
|
104
109
|
[values, setValues, descendants, onComplete, focusNext]
|
|
105
110
|
);
|
|
106
|
-
const getNextValue = useCallback(
|
|
107
|
-
|
|
108
|
-
|
|
111
|
+
const getNextValue = useCallback(
|
|
112
|
+
(value2, eventValue) => {
|
|
113
|
+
let nextValue = eventValue;
|
|
114
|
+
if (!(value2 == null ? void 0 : value2.length))
|
|
115
|
+
return nextValue;
|
|
116
|
+
if (value2[0] === eventValue.charAt(0)) {
|
|
117
|
+
nextValue = eventValue.charAt(1);
|
|
118
|
+
} else if (value2[0] === eventValue.charAt(1)) {
|
|
119
|
+
nextValue = eventValue.charAt(0);
|
|
120
|
+
}
|
|
109
121
|
return nextValue;
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
nextValue = eventValue.charAt(0);
|
|
114
|
-
}
|
|
115
|
-
return nextValue;
|
|
116
|
-
}, []);
|
|
122
|
+
},
|
|
123
|
+
[]
|
|
124
|
+
);
|
|
117
125
|
const getInputProps = useCallback(
|
|
118
126
|
({
|
|
119
127
|
index,
|
|
@@ -143,7 +151,10 @@ var PinInput = forwardRef(
|
|
|
143
151
|
setMoveFocus(true);
|
|
144
152
|
}
|
|
145
153
|
};
|
|
146
|
-
const onKeyDown = ({
|
|
154
|
+
const onKeyDown = ({
|
|
155
|
+
key,
|
|
156
|
+
target
|
|
157
|
+
}) => {
|
|
147
158
|
var _a;
|
|
148
159
|
if (key !== "Backspace" || !manageFocus)
|
|
149
160
|
return;
|
|
@@ -202,7 +213,16 @@ var PinInput = forwardRef(
|
|
|
202
213
|
for (let i = 0; i < fileds; i++) {
|
|
203
214
|
cloneChildren.push(/* @__PURE__ */ jsx(PinInputField, {}, i));
|
|
204
215
|
}
|
|
205
|
-
return /* @__PURE__ */ jsx(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(PinInputProvider, { value: { getInputProps, styles }, children: /* @__PURE__ */ jsx(
|
|
216
|
+
return /* @__PURE__ */ jsx(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(PinInputProvider, { value: { getInputProps, styles }, children: /* @__PURE__ */ jsx(
|
|
217
|
+
ui.div,
|
|
218
|
+
{
|
|
219
|
+
ref,
|
|
220
|
+
className: cx("ui-pin-input", className),
|
|
221
|
+
...rest,
|
|
222
|
+
__css: css,
|
|
223
|
+
children: cloneChildren
|
|
224
|
+
}
|
|
225
|
+
) }) });
|
|
206
226
|
}
|
|
207
227
|
);
|
|
208
228
|
var PinInputField = forwardRef(
|
package/dist/index.js
CHANGED
|
@@ -114,17 +114,20 @@ var PinInput = (0, import_core.forwardRef)(
|
|
|
114
114
|
},
|
|
115
115
|
[values, setValues, descendants, onComplete, focusNext]
|
|
116
116
|
);
|
|
117
|
-
const getNextValue = (0, import_react.useCallback)(
|
|
118
|
-
|
|
119
|
-
|
|
117
|
+
const getNextValue = (0, import_react.useCallback)(
|
|
118
|
+
(value2, eventValue) => {
|
|
119
|
+
let nextValue = eventValue;
|
|
120
|
+
if (!(value2 == null ? void 0 : value2.length))
|
|
121
|
+
return nextValue;
|
|
122
|
+
if (value2[0] === eventValue.charAt(0)) {
|
|
123
|
+
nextValue = eventValue.charAt(1);
|
|
124
|
+
} else if (value2[0] === eventValue.charAt(1)) {
|
|
125
|
+
nextValue = eventValue.charAt(0);
|
|
126
|
+
}
|
|
120
127
|
return nextValue;
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
nextValue = eventValue.charAt(0);
|
|
125
|
-
}
|
|
126
|
-
return nextValue;
|
|
127
|
-
}, []);
|
|
128
|
+
},
|
|
129
|
+
[]
|
|
130
|
+
);
|
|
128
131
|
const getInputProps = (0, import_react.useCallback)(
|
|
129
132
|
({
|
|
130
133
|
index,
|
|
@@ -154,7 +157,10 @@ var PinInput = (0, import_core.forwardRef)(
|
|
|
154
157
|
setMoveFocus(true);
|
|
155
158
|
}
|
|
156
159
|
};
|
|
157
|
-
const onKeyDown = ({
|
|
160
|
+
const onKeyDown = ({
|
|
161
|
+
key,
|
|
162
|
+
target
|
|
163
|
+
}) => {
|
|
158
164
|
var _a;
|
|
159
165
|
if (key !== "Backspace" || !manageFocus)
|
|
160
166
|
return;
|
|
@@ -213,7 +219,16 @@ var PinInput = (0, import_core.forwardRef)(
|
|
|
213
219
|
for (let i = 0; i < fileds; i++) {
|
|
214
220
|
cloneChildren.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputField, {}, i));
|
|
215
221
|
}
|
|
216
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputProvider, { value: { getInputProps, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
222
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputProvider, { value: { getInputProps, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
223
|
+
import_core.ui.div,
|
|
224
|
+
{
|
|
225
|
+
ref,
|
|
226
|
+
className: (0, import_utils.cx)("ui-pin-input", className),
|
|
227
|
+
...rest,
|
|
228
|
+
__css: css,
|
|
229
|
+
children: cloneChildren
|
|
230
|
+
}
|
|
231
|
+
) }) });
|
|
217
232
|
}
|
|
218
233
|
);
|
|
219
234
|
var PinInputField = (0, import_core.forwardRef)(
|
package/dist/index.mjs
CHANGED
package/dist/pin-input.js
CHANGED
|
@@ -112,17 +112,20 @@ var PinInput = (0, import_core.forwardRef)(
|
|
|
112
112
|
},
|
|
113
113
|
[values, setValues, descendants, onComplete, focusNext]
|
|
114
114
|
);
|
|
115
|
-
const getNextValue = (0, import_react.useCallback)(
|
|
116
|
-
|
|
117
|
-
|
|
115
|
+
const getNextValue = (0, import_react.useCallback)(
|
|
116
|
+
(value2, eventValue) => {
|
|
117
|
+
let nextValue = eventValue;
|
|
118
|
+
if (!(value2 == null ? void 0 : value2.length))
|
|
119
|
+
return nextValue;
|
|
120
|
+
if (value2[0] === eventValue.charAt(0)) {
|
|
121
|
+
nextValue = eventValue.charAt(1);
|
|
122
|
+
} else if (value2[0] === eventValue.charAt(1)) {
|
|
123
|
+
nextValue = eventValue.charAt(0);
|
|
124
|
+
}
|
|
118
125
|
return nextValue;
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
nextValue = eventValue.charAt(0);
|
|
123
|
-
}
|
|
124
|
-
return nextValue;
|
|
125
|
-
}, []);
|
|
126
|
+
},
|
|
127
|
+
[]
|
|
128
|
+
);
|
|
126
129
|
const getInputProps = (0, import_react.useCallback)(
|
|
127
130
|
({
|
|
128
131
|
index,
|
|
@@ -152,7 +155,10 @@ var PinInput = (0, import_core.forwardRef)(
|
|
|
152
155
|
setMoveFocus(true);
|
|
153
156
|
}
|
|
154
157
|
};
|
|
155
|
-
const onKeyDown = ({
|
|
158
|
+
const onKeyDown = ({
|
|
159
|
+
key,
|
|
160
|
+
target
|
|
161
|
+
}) => {
|
|
156
162
|
var _a;
|
|
157
163
|
if (key !== "Backspace" || !manageFocus)
|
|
158
164
|
return;
|
|
@@ -211,7 +217,16 @@ var PinInput = (0, import_core.forwardRef)(
|
|
|
211
217
|
for (let i = 0; i < fileds; i++) {
|
|
212
218
|
cloneChildren.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputField, {}, i));
|
|
213
219
|
}
|
|
214
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputProvider, { value: { getInputProps, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
220
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputProvider, { value: { getInputProps, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
221
|
+
import_core.ui.div,
|
|
222
|
+
{
|
|
223
|
+
ref,
|
|
224
|
+
className: (0, import_utils.cx)("ui-pin-input", className),
|
|
225
|
+
...rest,
|
|
226
|
+
__css: css,
|
|
227
|
+
children: cloneChildren
|
|
228
|
+
}
|
|
229
|
+
) }) });
|
|
215
230
|
}
|
|
216
231
|
);
|
|
217
232
|
var PinInputField = (0, import_core.forwardRef)(
|
package/dist/pin-input.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/pin-input",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.8",
|
|
4
4
|
"description": "Yamada UI pin input component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"url": "https://github.com/hirotomoyamada/yamada-ui/issues"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@yamada-ui/core": "0.5.
|
|
39
|
-
"@yamada-ui/utils": "0.1.
|
|
40
|
-
"@yamada-ui/form-control": "0.2.
|
|
41
|
-
"@yamada-ui/use-descendant": "0.1.
|
|
42
|
-
"@yamada-ui/use-controllable-state": "0.1.
|
|
38
|
+
"@yamada-ui/core": "0.5.2",
|
|
39
|
+
"@yamada-ui/utils": "0.1.4",
|
|
40
|
+
"@yamada-ui/form-control": "0.2.7",
|
|
41
|
+
"@yamada-ui/use-descendant": "0.1.5",
|
|
42
|
+
"@yamada-ui/use-controllable-state": "0.1.5"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"react": "^18.0.0",
|