@zag-js/pin-input 0.50.0 → 0.51.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.
- package/dist/index.js +1 -507
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -478
- package/dist/index.mjs.map +1 -1
- package/package.json +8 -8
package/dist/index.mjs
CHANGED
|
@@ -1,479 +1,2 @@
|
|
|
1
|
-
// src/pin-input.anatomy.ts
|
|
2
|
-
import { createAnatomy } from "@zag-js/anatomy";
|
|
3
|
-
var anatomy = createAnatomy("pinInput").parts("root", "label", "input", "control");
|
|
4
|
-
var parts = anatomy.build();
|
|
5
|
-
|
|
6
|
-
// src/pin-input.connect.ts
|
|
7
|
-
import { getEventKey, getNativeEvent, isModifierKey } from "@zag-js/dom-event";
|
|
8
|
-
import { ariaAttr, dataAttr, getBeforeInputValue, visuallyHiddenStyle } from "@zag-js/dom-query";
|
|
9
|
-
import { invariant } from "@zag-js/utils";
|
|
10
|
-
|
|
11
|
-
// src/pin-input.dom.ts
|
|
12
|
-
import { createScope, queryAll } from "@zag-js/dom-query";
|
|
13
|
-
var dom = createScope({
|
|
14
|
-
getRootId: (ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`,
|
|
15
|
-
getInputId: (ctx, id) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`,
|
|
16
|
-
getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`,
|
|
17
|
-
getLabelId: (ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`,
|
|
18
|
-
getControlId: (ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`,
|
|
19
|
-
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
20
|
-
getInputEls: (ctx) => {
|
|
21
|
-
const ownerId = CSS.escape(dom.getRootId(ctx));
|
|
22
|
-
const selector = `input[data-ownedby=${ownerId}]`;
|
|
23
|
-
return queryAll(dom.getRootEl(ctx), selector);
|
|
24
|
-
},
|
|
25
|
-
getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
|
|
26
|
-
getFocusedInputEl: (ctx) => dom.getInputEls(ctx)[ctx.focusedIndex],
|
|
27
|
-
getFirstInputEl: (ctx) => dom.getInputEls(ctx)[0],
|
|
28
|
-
getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
// src/pin-input.utils.ts
|
|
32
|
-
var REGEX = {
|
|
33
|
-
numeric: /^[0-9]+$/,
|
|
34
|
-
alphabetic: /^[A-Za-z]+$/,
|
|
35
|
-
alphanumeric: /^[a-zA-Z0-9]+$/i
|
|
36
|
-
};
|
|
37
|
-
function isValidType(ctx, value) {
|
|
38
|
-
if (!ctx.type)
|
|
39
|
-
return true;
|
|
40
|
-
return !!REGEX[ctx.type]?.test(value);
|
|
41
|
-
}
|
|
42
|
-
function isValidValue(ctx, value) {
|
|
43
|
-
if (!ctx.pattern)
|
|
44
|
-
return isValidType(ctx, value);
|
|
45
|
-
const regex = new RegExp(ctx.pattern, "g");
|
|
46
|
-
return regex.test(value);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
// src/pin-input.connect.ts
|
|
50
|
-
function connect(state, send, normalize) {
|
|
51
|
-
const complete = state.context.isValueComplete;
|
|
52
|
-
const invalid = state.context.invalid;
|
|
53
|
-
const focusedIndex = state.context.focusedIndex;
|
|
54
|
-
const translations = state.context.translations;
|
|
55
|
-
function focus() {
|
|
56
|
-
dom.getFirstInputEl(state.context)?.focus();
|
|
57
|
-
}
|
|
58
|
-
return {
|
|
59
|
-
focus,
|
|
60
|
-
value: state.context.value,
|
|
61
|
-
valueAsString: state.context.valueAsString,
|
|
62
|
-
complete,
|
|
63
|
-
setValue(value) {
|
|
64
|
-
if (!Array.isArray(value)) {
|
|
65
|
-
invariant("[pin-input/setValue] value must be an array");
|
|
66
|
-
}
|
|
67
|
-
send({ type: "VALUE.SET", value });
|
|
68
|
-
},
|
|
69
|
-
clearValue() {
|
|
70
|
-
send({ type: "VALUE.CLEAR" });
|
|
71
|
-
},
|
|
72
|
-
setValueAtIndex(index, value) {
|
|
73
|
-
send({ type: "VALUE.SET", value, index });
|
|
74
|
-
},
|
|
75
|
-
rootProps: normalize.element({
|
|
76
|
-
dir: state.context.dir,
|
|
77
|
-
...parts.root.attrs,
|
|
78
|
-
id: dom.getRootId(state.context),
|
|
79
|
-
"data-invalid": dataAttr(invalid),
|
|
80
|
-
"data-disabled": dataAttr(state.context.disabled),
|
|
81
|
-
"data-complete": dataAttr(complete)
|
|
82
|
-
}),
|
|
83
|
-
labelProps: normalize.label({
|
|
84
|
-
...parts.label.attrs,
|
|
85
|
-
dir: state.context.dir,
|
|
86
|
-
htmlFor: dom.getHiddenInputId(state.context),
|
|
87
|
-
id: dom.getLabelId(state.context),
|
|
88
|
-
"data-invalid": dataAttr(invalid),
|
|
89
|
-
"data-disabled": dataAttr(state.context.disabled),
|
|
90
|
-
"data-complete": dataAttr(complete),
|
|
91
|
-
onClick(event) {
|
|
92
|
-
event.preventDefault();
|
|
93
|
-
focus();
|
|
94
|
-
}
|
|
95
|
-
}),
|
|
96
|
-
hiddenInputProps: normalize.input({
|
|
97
|
-
"aria-hidden": true,
|
|
98
|
-
type: "text",
|
|
99
|
-
tabIndex: -1,
|
|
100
|
-
id: dom.getHiddenInputId(state.context),
|
|
101
|
-
name: state.context.name,
|
|
102
|
-
form: state.context.form,
|
|
103
|
-
style: visuallyHiddenStyle,
|
|
104
|
-
maxLength: state.context.valueLength,
|
|
105
|
-
defaultValue: state.context.valueAsString
|
|
106
|
-
}),
|
|
107
|
-
controlProps: normalize.element({
|
|
108
|
-
...parts.control.attrs,
|
|
109
|
-
dir: state.context.dir,
|
|
110
|
-
id: dom.getControlId(state.context)
|
|
111
|
-
}),
|
|
112
|
-
getInputProps(props) {
|
|
113
|
-
const { index } = props;
|
|
114
|
-
const inputType = state.context.type === "numeric" ? "tel" : "text";
|
|
115
|
-
return normalize.input({
|
|
116
|
-
...parts.input.attrs,
|
|
117
|
-
dir: state.context.dir,
|
|
118
|
-
disabled: state.context.disabled,
|
|
119
|
-
"data-disabled": dataAttr(state.context.disabled),
|
|
120
|
-
"data-complete": dataAttr(complete),
|
|
121
|
-
id: dom.getInputId(state.context, index.toString()),
|
|
122
|
-
"data-ownedby": dom.getRootId(state.context),
|
|
123
|
-
"aria-label": translations.inputLabel(index, state.context.valueLength),
|
|
124
|
-
inputMode: state.context.otp || state.context.type === "numeric" ? "numeric" : "text",
|
|
125
|
-
"aria-invalid": ariaAttr(invalid),
|
|
126
|
-
"data-invalid": dataAttr(invalid),
|
|
127
|
-
type: state.context.mask ? "password" : inputType,
|
|
128
|
-
defaultValue: state.context.value[index] || "",
|
|
129
|
-
autoCapitalize: "none",
|
|
130
|
-
autoComplete: state.context.otp ? "one-time-code" : "off",
|
|
131
|
-
placeholder: focusedIndex === index ? "" : state.context.placeholder,
|
|
132
|
-
onBeforeInput(event) {
|
|
133
|
-
try {
|
|
134
|
-
const value = getBeforeInputValue(event);
|
|
135
|
-
const isValid = isValidValue(state.context, value);
|
|
136
|
-
if (!isValid) {
|
|
137
|
-
send({ type: "VALUE.INVALID", value });
|
|
138
|
-
event.preventDefault();
|
|
139
|
-
}
|
|
140
|
-
if (value.length > 2) {
|
|
141
|
-
event.currentTarget.setSelectionRange(0, 1, "forward");
|
|
142
|
-
}
|
|
143
|
-
} catch {
|
|
144
|
-
}
|
|
145
|
-
},
|
|
146
|
-
onChange(event) {
|
|
147
|
-
const evt = getNativeEvent(event);
|
|
148
|
-
const { value } = event.currentTarget;
|
|
149
|
-
if (evt.inputType === "insertFromPaste" || value.length > 2) {
|
|
150
|
-
send({ type: "INPUT.PASTE", value });
|
|
151
|
-
event.target.value = value[0];
|
|
152
|
-
event.preventDefault();
|
|
153
|
-
return;
|
|
154
|
-
}
|
|
155
|
-
if (evt.inputType === "deleteContentBackward") {
|
|
156
|
-
send("INPUT.BACKSPACE");
|
|
157
|
-
return;
|
|
158
|
-
}
|
|
159
|
-
send({ type: "INPUT.CHANGE", value, index });
|
|
160
|
-
},
|
|
161
|
-
onKeyDown(event) {
|
|
162
|
-
if (event.defaultPrevented)
|
|
163
|
-
return;
|
|
164
|
-
const evt = getNativeEvent(event);
|
|
165
|
-
if (evt.isComposing)
|
|
166
|
-
return;
|
|
167
|
-
if (isModifierKey(evt))
|
|
168
|
-
return;
|
|
169
|
-
const keyMap = {
|
|
170
|
-
Backspace() {
|
|
171
|
-
send("INPUT.BACKSPACE");
|
|
172
|
-
},
|
|
173
|
-
Delete() {
|
|
174
|
-
send("INPUT.DELETE");
|
|
175
|
-
},
|
|
176
|
-
ArrowLeft() {
|
|
177
|
-
send("INPUT.ARROW_LEFT");
|
|
178
|
-
},
|
|
179
|
-
ArrowRight() {
|
|
180
|
-
send("INPUT.ARROW_RIGHT");
|
|
181
|
-
},
|
|
182
|
-
Enter() {
|
|
183
|
-
send("INPUT.ENTER");
|
|
184
|
-
}
|
|
185
|
-
};
|
|
186
|
-
const exec = keyMap[getEventKey(event, state.context)];
|
|
187
|
-
if (exec) {
|
|
188
|
-
exec(event);
|
|
189
|
-
event.preventDefault();
|
|
190
|
-
}
|
|
191
|
-
},
|
|
192
|
-
onFocus() {
|
|
193
|
-
send({ type: "INPUT.FOCUS", index });
|
|
194
|
-
},
|
|
195
|
-
onBlur() {
|
|
196
|
-
send({ type: "INPUT.BLUR", index });
|
|
197
|
-
}
|
|
198
|
-
});
|
|
199
|
-
}
|
|
200
|
-
};
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
// src/pin-input.machine.ts
|
|
204
|
-
import { choose, createMachine } from "@zag-js/core";
|
|
205
|
-
import { raf } from "@zag-js/dom-query";
|
|
206
|
-
import { dispatchInputValueEvent } from "@zag-js/form-utils";
|
|
207
|
-
import { compact, isEqual } from "@zag-js/utils";
|
|
208
|
-
function machine(userContext) {
|
|
209
|
-
const ctx = compact(userContext);
|
|
210
|
-
return createMachine(
|
|
211
|
-
{
|
|
212
|
-
id: "pin-input",
|
|
213
|
-
initial: "idle",
|
|
214
|
-
context: {
|
|
215
|
-
value: [],
|
|
216
|
-
placeholder: "\u25CB",
|
|
217
|
-
otp: false,
|
|
218
|
-
type: "numeric",
|
|
219
|
-
...ctx,
|
|
220
|
-
focusedIndex: -1,
|
|
221
|
-
translations: {
|
|
222
|
-
inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
|
|
223
|
-
...ctx.translations
|
|
224
|
-
}
|
|
225
|
-
},
|
|
226
|
-
computed: {
|
|
227
|
-
valueLength: (ctx2) => ctx2.value.length,
|
|
228
|
-
filledValueLength: (ctx2) => ctx2.value.filter((v) => v?.trim() !== "").length,
|
|
229
|
-
isValueComplete: (ctx2) => ctx2.valueLength === ctx2.filledValueLength,
|
|
230
|
-
valueAsString: (ctx2) => ctx2.value.join(""),
|
|
231
|
-
focusedValue: (ctx2) => ctx2.value[ctx2.focusedIndex] || ""
|
|
232
|
-
},
|
|
233
|
-
entry: choose([
|
|
234
|
-
{
|
|
235
|
-
guard: "autoFocus",
|
|
236
|
-
actions: ["setupValue", "setFocusIndexToFirst"]
|
|
237
|
-
},
|
|
238
|
-
{ actions: ["setupValue"] }
|
|
239
|
-
]),
|
|
240
|
-
watch: {
|
|
241
|
-
focusedIndex: ["focusInput", "selectInputIfNeeded"],
|
|
242
|
-
value: ["syncInputElements"],
|
|
243
|
-
isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
|
|
244
|
-
},
|
|
245
|
-
on: {
|
|
246
|
-
"VALUE.SET": [
|
|
247
|
-
{
|
|
248
|
-
guard: "hasIndex",
|
|
249
|
-
actions: ["setValueAtIndex"]
|
|
250
|
-
},
|
|
251
|
-
{ actions: ["setValue"] }
|
|
252
|
-
],
|
|
253
|
-
"VALUE.CLEAR": {
|
|
254
|
-
actions: ["clearValue", "setFocusIndexToFirst"]
|
|
255
|
-
}
|
|
256
|
-
},
|
|
257
|
-
states: {
|
|
258
|
-
idle: {
|
|
259
|
-
on: {
|
|
260
|
-
"INPUT.FOCUS": {
|
|
261
|
-
target: "focused",
|
|
262
|
-
actions: "setFocusedIndex"
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
},
|
|
266
|
-
focused: {
|
|
267
|
-
on: {
|
|
268
|
-
"INPUT.CHANGE": [
|
|
269
|
-
{
|
|
270
|
-
guard: "isFinalValue",
|
|
271
|
-
actions: ["setFocusedValue", "syncInputValue"]
|
|
272
|
-
},
|
|
273
|
-
{
|
|
274
|
-
actions: ["setFocusedValue", "setNextFocusedIndex", "syncInputValue"]
|
|
275
|
-
}
|
|
276
|
-
],
|
|
277
|
-
"INPUT.PASTE": {
|
|
278
|
-
actions: ["setPastedValue", "setLastValueFocusIndex"]
|
|
279
|
-
},
|
|
280
|
-
"INPUT.BLUR": {
|
|
281
|
-
target: "idle",
|
|
282
|
-
actions: "clearFocusedIndex"
|
|
283
|
-
},
|
|
284
|
-
"INPUT.DELETE": {
|
|
285
|
-
guard: "hasValue",
|
|
286
|
-
actions: "clearFocusedValue"
|
|
287
|
-
},
|
|
288
|
-
"INPUT.ARROW_LEFT": {
|
|
289
|
-
actions: "setPrevFocusedIndex"
|
|
290
|
-
},
|
|
291
|
-
"INPUT.ARROW_RIGHT": {
|
|
292
|
-
actions: "setNextFocusedIndex"
|
|
293
|
-
},
|
|
294
|
-
"INPUT.BACKSPACE": [
|
|
295
|
-
{
|
|
296
|
-
guard: "hasValue",
|
|
297
|
-
actions: ["clearFocusedValue"]
|
|
298
|
-
},
|
|
299
|
-
{
|
|
300
|
-
actions: ["setPrevFocusedIndex", "clearFocusedValue"]
|
|
301
|
-
}
|
|
302
|
-
],
|
|
303
|
-
"INPUT.ENTER": {
|
|
304
|
-
guard: "isValueComplete",
|
|
305
|
-
actions: "requestFormSubmit"
|
|
306
|
-
},
|
|
307
|
-
"VALUE.INVALID": {
|
|
308
|
-
actions: "invokeOnInvalid"
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
}
|
|
312
|
-
}
|
|
313
|
-
},
|
|
314
|
-
{
|
|
315
|
-
guards: {
|
|
316
|
-
autoFocus: (ctx2) => !!ctx2.autoFocus,
|
|
317
|
-
isValueEmpty: (_ctx, evt) => evt.value === "",
|
|
318
|
-
hasValue: (ctx2) => ctx2.value[ctx2.focusedIndex] !== "",
|
|
319
|
-
isValueComplete: (ctx2) => ctx2.isValueComplete,
|
|
320
|
-
isFinalValue: (ctx2) => ctx2.filledValueLength + 1 === ctx2.valueLength && ctx2.value.findIndex((v) => v.trim() === "") === ctx2.focusedIndex,
|
|
321
|
-
hasIndex: (_ctx, evt) => evt.index !== void 0,
|
|
322
|
-
isDisabled: (ctx2) => !!ctx2.disabled
|
|
323
|
-
},
|
|
324
|
-
actions: {
|
|
325
|
-
setupValue(ctx2) {
|
|
326
|
-
if (ctx2.value.length)
|
|
327
|
-
return;
|
|
328
|
-
const inputEls = dom.getInputEls(ctx2);
|
|
329
|
-
const emptyValues = Array.from({ length: inputEls.length }).fill("");
|
|
330
|
-
assignValue(ctx2, emptyValues);
|
|
331
|
-
},
|
|
332
|
-
focusInput(ctx2) {
|
|
333
|
-
if (ctx2.focusedIndex === -1)
|
|
334
|
-
return;
|
|
335
|
-
dom.getFocusedInputEl(ctx2)?.focus({ preventScroll: true });
|
|
336
|
-
},
|
|
337
|
-
selectInputIfNeeded(ctx2) {
|
|
338
|
-
if (!ctx2.selectOnFocus || ctx2.focusedIndex === -1)
|
|
339
|
-
return;
|
|
340
|
-
raf(() => {
|
|
341
|
-
dom.getFocusedInputEl(ctx2)?.select();
|
|
342
|
-
});
|
|
343
|
-
},
|
|
344
|
-
invokeOnComplete(ctx2) {
|
|
345
|
-
if (!ctx2.isValueComplete)
|
|
346
|
-
return;
|
|
347
|
-
ctx2.onValueComplete?.({
|
|
348
|
-
value: Array.from(ctx2.value),
|
|
349
|
-
valueAsString: ctx2.valueAsString
|
|
350
|
-
});
|
|
351
|
-
},
|
|
352
|
-
invokeOnInvalid(ctx2, evt) {
|
|
353
|
-
ctx2.onValueInvalid?.({
|
|
354
|
-
value: evt.value,
|
|
355
|
-
index: ctx2.focusedIndex
|
|
356
|
-
});
|
|
357
|
-
},
|
|
358
|
-
clearFocusedIndex(ctx2) {
|
|
359
|
-
ctx2.focusedIndex = -1;
|
|
360
|
-
},
|
|
361
|
-
setFocusedIndex(ctx2, evt) {
|
|
362
|
-
ctx2.focusedIndex = evt.index;
|
|
363
|
-
},
|
|
364
|
-
setValue(ctx2, evt) {
|
|
365
|
-
set.value(ctx2, evt.value);
|
|
366
|
-
},
|
|
367
|
-
setFocusedValue(ctx2, evt) {
|
|
368
|
-
const nextValue = getNextValue(ctx2.focusedValue, evt.value);
|
|
369
|
-
set.valueAtIndex(ctx2, ctx2.focusedIndex, nextValue);
|
|
370
|
-
},
|
|
371
|
-
revertInputValue(ctx2) {
|
|
372
|
-
const inputEl = dom.getFocusedInputEl(ctx2);
|
|
373
|
-
dom.setValue(inputEl, ctx2.focusedValue);
|
|
374
|
-
},
|
|
375
|
-
syncInputValue(ctx2, evt) {
|
|
376
|
-
const inputEl = dom.getInputEl(ctx2, evt.index.toString());
|
|
377
|
-
dom.setValue(inputEl, ctx2.value[evt.index]);
|
|
378
|
-
},
|
|
379
|
-
syncInputElements(ctx2) {
|
|
380
|
-
const inputEls = dom.getInputEls(ctx2);
|
|
381
|
-
inputEls.forEach((inputEl, index) => {
|
|
382
|
-
dom.setValue(inputEl, ctx2.value[index]);
|
|
383
|
-
});
|
|
384
|
-
},
|
|
385
|
-
setPastedValue(ctx2, evt) {
|
|
386
|
-
raf(() => {
|
|
387
|
-
const startIndex = Math.min(ctx2.focusedIndex, ctx2.filledValueLength);
|
|
388
|
-
const left = startIndex > 0 ? ctx2.valueAsString.substring(0, ctx2.focusedIndex) : "";
|
|
389
|
-
const right = evt.value.substring(0, ctx2.valueLength - startIndex);
|
|
390
|
-
const value = left + right;
|
|
391
|
-
set.value(ctx2, value.split(""));
|
|
392
|
-
});
|
|
393
|
-
},
|
|
394
|
-
setValueAtIndex(ctx2, evt) {
|
|
395
|
-
const nextValue = getNextValue(ctx2.focusedValue, evt.value);
|
|
396
|
-
set.valueAtIndex(ctx2, evt.index, nextValue);
|
|
397
|
-
},
|
|
398
|
-
clearValue(ctx2) {
|
|
399
|
-
const nextValue = Array.from({ length: ctx2.valueLength }).fill("");
|
|
400
|
-
set.value(ctx2, nextValue);
|
|
401
|
-
},
|
|
402
|
-
clearFocusedValue(ctx2) {
|
|
403
|
-
set.valueAtIndex(ctx2, ctx2.focusedIndex, "");
|
|
404
|
-
},
|
|
405
|
-
setFocusIndexToFirst(ctx2) {
|
|
406
|
-
ctx2.focusedIndex = 0;
|
|
407
|
-
},
|
|
408
|
-
setNextFocusedIndex(ctx2) {
|
|
409
|
-
ctx2.focusedIndex = Math.min(ctx2.focusedIndex + 1, ctx2.valueLength - 1);
|
|
410
|
-
},
|
|
411
|
-
setPrevFocusedIndex(ctx2) {
|
|
412
|
-
ctx2.focusedIndex = Math.max(ctx2.focusedIndex - 1, 0);
|
|
413
|
-
},
|
|
414
|
-
setLastValueFocusIndex(ctx2) {
|
|
415
|
-
raf(() => {
|
|
416
|
-
ctx2.focusedIndex = Math.min(ctx2.filledValueLength, ctx2.valueLength - 1);
|
|
417
|
-
});
|
|
418
|
-
},
|
|
419
|
-
blurFocusedInputIfNeeded(ctx2) {
|
|
420
|
-
if (!ctx2.blurOnComplete)
|
|
421
|
-
return;
|
|
422
|
-
raf(() => {
|
|
423
|
-
dom.getFocusedInputEl(ctx2)?.blur();
|
|
424
|
-
});
|
|
425
|
-
},
|
|
426
|
-
requestFormSubmit(ctx2) {
|
|
427
|
-
if (!ctx2.name || !ctx2.isValueComplete)
|
|
428
|
-
return;
|
|
429
|
-
const inputEl = dom.getHiddenInputEl(ctx2);
|
|
430
|
-
inputEl?.form?.requestSubmit();
|
|
431
|
-
}
|
|
432
|
-
}
|
|
433
|
-
}
|
|
434
|
-
);
|
|
435
|
-
}
|
|
436
|
-
function assignValue(ctx, value) {
|
|
437
|
-
const arr = Array.isArray(value) ? value : value.split("").filter(Boolean);
|
|
438
|
-
arr.forEach((value2, index) => {
|
|
439
|
-
ctx.value[index] = value2;
|
|
440
|
-
});
|
|
441
|
-
}
|
|
442
|
-
function getNextValue(current, next) {
|
|
443
|
-
let nextValue = next;
|
|
444
|
-
if (current[0] === next[0])
|
|
445
|
-
nextValue = next[1];
|
|
446
|
-
else if (current[0] === next[1])
|
|
447
|
-
nextValue = next[0];
|
|
448
|
-
return nextValue.split("")[nextValue.length - 1];
|
|
449
|
-
}
|
|
450
|
-
var invoke = {
|
|
451
|
-
change(ctx) {
|
|
452
|
-
ctx.onValueChange?.({
|
|
453
|
-
value: Array.from(ctx.value),
|
|
454
|
-
valueAsString: ctx.valueAsString
|
|
455
|
-
});
|
|
456
|
-
const inputEl = dom.getHiddenInputEl(ctx);
|
|
457
|
-
dispatchInputValueEvent(inputEl, { value: ctx.valueAsString });
|
|
458
|
-
}
|
|
459
|
-
};
|
|
460
|
-
var set = {
|
|
461
|
-
value(ctx, value) {
|
|
462
|
-
if (isEqual(ctx.value, value))
|
|
463
|
-
return;
|
|
464
|
-
assignValue(ctx, value);
|
|
465
|
-
invoke.change(ctx);
|
|
466
|
-
},
|
|
467
|
-
valueAtIndex(ctx, index, value) {
|
|
468
|
-
if (isEqual(ctx.value[index], value))
|
|
469
|
-
return;
|
|
470
|
-
ctx.value[index] = value;
|
|
471
|
-
invoke.change(ctx);
|
|
472
|
-
}
|
|
473
|
-
};
|
|
474
|
-
export {
|
|
475
|
-
anatomy,
|
|
476
|
-
connect,
|
|
477
|
-
machine
|
|
478
|
-
};
|
|
1
|
+
import{createAnatomy}from"@zag-js/anatomy";var anatomy=createAnatomy("pinInput").parts("root","label","input","control");var parts=anatomy.build();import{getEventKey,getNativeEvent,isModifierKey}from"@zag-js/dom-event";import{ariaAttr,dataAttr,getBeforeInputValue,visuallyHiddenStyle}from"@zag-js/dom-query";import{invariant}from"@zag-js/utils";import{createScope,queryAll}from"@zag-js/dom-query";var dom=createScope({getRootId:ctx=>ctx.ids?.root??`pin-input:${ctx.id}`,getInputId:(ctx,id)=>ctx.ids?.input?.(id)??`pin-input:${ctx.id}:${id}`,getHiddenInputId:ctx=>ctx.ids?.hiddenInput??`pin-input:${ctx.id}:hidden`,getLabelId:ctx=>ctx.ids?.label??`pin-input:${ctx.id}:label`,getControlId:ctx=>ctx.ids?.control??`pin-input:${ctx.id}:control`,getRootEl:ctx=>dom.getById(ctx,dom.getRootId(ctx)),getInputEls:ctx=>{const ownerId=CSS.escape(dom.getRootId(ctx));const selector=`input[data-ownedby=${ownerId}]`;return queryAll(dom.getRootEl(ctx),selector)},getInputEl:(ctx,id)=>dom.getById(ctx,dom.getInputId(ctx,id)),getFocusedInputEl:ctx=>dom.getInputEls(ctx)[ctx.focusedIndex],getFirstInputEl:ctx=>dom.getInputEls(ctx)[0],getHiddenInputEl:ctx=>dom.getById(ctx,dom.getHiddenInputId(ctx))});var REGEX={numeric:/^[0-9]+$/,alphabetic:/^[A-Za-z]+$/,alphanumeric:/^[a-zA-Z0-9]+$/i};function isValidType(ctx,value){if(!ctx.type)return true;return!!REGEX[ctx.type]?.test(value)}function isValidValue(ctx,value){if(!ctx.pattern)return isValidType(ctx,value);const regex=new RegExp(ctx.pattern,"g");return regex.test(value)}function connect(state,send,normalize){const complete=state.context.isValueComplete;const invalid=state.context.invalid;const focusedIndex=state.context.focusedIndex;const translations=state.context.translations;function focus(){dom.getFirstInputEl(state.context)?.focus()}return{focus,value:state.context.value,valueAsString:state.context.valueAsString,complete,setValue(value){if(!Array.isArray(value)){invariant("[pin-input/setValue] value must be an array")}send({type:"VALUE.SET",value})},clearValue(){send({type:"VALUE.CLEAR"})},setValueAtIndex(index,value){send({type:"VALUE.SET",value,index})},rootProps:normalize.element({dir:state.context.dir,...parts.root.attrs,id:dom.getRootId(state.context),"data-invalid":dataAttr(invalid),"data-disabled":dataAttr(state.context.disabled),"data-complete":dataAttr(complete)}),labelProps:normalize.label({...parts.label.attrs,dir:state.context.dir,htmlFor:dom.getHiddenInputId(state.context),id:dom.getLabelId(state.context),"data-invalid":dataAttr(invalid),"data-disabled":dataAttr(state.context.disabled),"data-complete":dataAttr(complete),onClick(event){event.preventDefault();focus()}}),hiddenInputProps:normalize.input({"aria-hidden":true,type:"text",tabIndex:-1,id:dom.getHiddenInputId(state.context),name:state.context.name,form:state.context.form,style:visuallyHiddenStyle,maxLength:state.context.valueLength,defaultValue:state.context.valueAsString}),controlProps:normalize.element({...parts.control.attrs,dir:state.context.dir,id:dom.getControlId(state.context)}),getInputProps(props){const{index}=props;const inputType=state.context.type==="numeric"?"tel":"text";return normalize.input({...parts.input.attrs,dir:state.context.dir,disabled:state.context.disabled,"data-disabled":dataAttr(state.context.disabled),"data-complete":dataAttr(complete),id:dom.getInputId(state.context,index.toString()),"data-ownedby":dom.getRootId(state.context),"aria-label":translations.inputLabel(index,state.context.valueLength),inputMode:state.context.otp||state.context.type==="numeric"?"numeric":"text","aria-invalid":ariaAttr(invalid),"data-invalid":dataAttr(invalid),type:state.context.mask?"password":inputType,defaultValue:state.context.value[index]||"",autoCapitalize:"none",autoComplete:state.context.otp?"one-time-code":"off",placeholder:focusedIndex===index?"":state.context.placeholder,onBeforeInput(event){try{const value=getBeforeInputValue(event);const isValid=isValidValue(state.context,value);if(!isValid){send({type:"VALUE.INVALID",value});event.preventDefault()}if(value.length>2){event.currentTarget.setSelectionRange(0,1,"forward")}}catch{}},onChange(event){const evt=getNativeEvent(event);const{value}=event.currentTarget;if(evt.inputType==="insertFromPaste"||value.length>2){send({type:"INPUT.PASTE",value});event.target.value=value[0];event.preventDefault();return}if(evt.inputType==="deleteContentBackward"){send("INPUT.BACKSPACE");return}send({type:"INPUT.CHANGE",value,index})},onKeyDown(event){if(event.defaultPrevented)return;const evt=getNativeEvent(event);if(evt.isComposing)return;if(isModifierKey(evt))return;const keyMap={Backspace(){send("INPUT.BACKSPACE")},Delete(){send("INPUT.DELETE")},ArrowLeft(){send("INPUT.ARROW_LEFT")},ArrowRight(){send("INPUT.ARROW_RIGHT")},Enter(){send("INPUT.ENTER")}};const exec=keyMap[getEventKey(event,state.context)];if(exec){exec(event);event.preventDefault()}},onFocus(){send({type:"INPUT.FOCUS",index})},onBlur(){send({type:"INPUT.BLUR",index})}})}}}import{choose,createMachine}from"@zag-js/core";import{raf}from"@zag-js/dom-query";import{dispatchInputValueEvent}from"@zag-js/form-utils";import{compact,isEqual}from"@zag-js/utils";function machine(userContext){const ctx=compact(userContext);return createMachine({id:"pin-input",initial:"idle",context:{value:[],placeholder:"\u25CB",otp:false,type:"numeric",...ctx,focusedIndex:-1,translations:{inputLabel:(index,length)=>`pin code ${index+1} of ${length}`,...ctx.translations}},computed:{valueLength:ctx2=>ctx2.value.length,filledValueLength:ctx2=>ctx2.value.filter(v=>v?.trim()!=="").length,isValueComplete:ctx2=>ctx2.valueLength===ctx2.filledValueLength,valueAsString:ctx2=>ctx2.value.join(""),focusedValue:ctx2=>ctx2.value[ctx2.focusedIndex]||""},entry:choose([{guard:"autoFocus",actions:["setupValue","setFocusIndexToFirst"]},{actions:["setupValue"]}]),watch:{focusedIndex:["focusInput","selectInputIfNeeded"],value:["syncInputElements"],isValueComplete:["invokeOnComplete","blurFocusedInputIfNeeded"]},on:{"VALUE.SET":[{guard:"hasIndex",actions:["setValueAtIndex"]},{actions:["setValue"]}],"VALUE.CLEAR":{actions:["clearValue","setFocusIndexToFirst"]}},states:{idle:{on:{"INPUT.FOCUS":{target:"focused",actions:"setFocusedIndex"}}},focused:{on:{"INPUT.CHANGE":[{guard:"isFinalValue",actions:["setFocusedValue","syncInputValue"]},{actions:["setFocusedValue","setNextFocusedIndex","syncInputValue"]}],"INPUT.PASTE":{actions:["setPastedValue","setLastValueFocusIndex"]},"INPUT.BLUR":{target:"idle",actions:"clearFocusedIndex"},"INPUT.DELETE":{guard:"hasValue",actions:"clearFocusedValue"},"INPUT.ARROW_LEFT":{actions:"setPrevFocusedIndex"},"INPUT.ARROW_RIGHT":{actions:"setNextFocusedIndex"},"INPUT.BACKSPACE":[{guard:"hasValue",actions:["clearFocusedValue"]},{actions:["setPrevFocusedIndex","clearFocusedValue"]}],"INPUT.ENTER":{guard:"isValueComplete",actions:"requestFormSubmit"},"VALUE.INVALID":{actions:"invokeOnInvalid"}}}}},{guards:{autoFocus:ctx2=>!!ctx2.autoFocus,isValueEmpty:(_ctx,evt)=>evt.value==="",hasValue:ctx2=>ctx2.value[ctx2.focusedIndex]!=="",isValueComplete:ctx2=>ctx2.isValueComplete,isFinalValue:ctx2=>ctx2.filledValueLength+1===ctx2.valueLength&&ctx2.value.findIndex(v=>v.trim()==="")===ctx2.focusedIndex,hasIndex:(_ctx,evt)=>evt.index!==void 0,isDisabled:ctx2=>!!ctx2.disabled},actions:{setupValue(ctx2){if(ctx2.value.length)return;const inputEls=dom.getInputEls(ctx2);const emptyValues=Array.from({length:inputEls.length}).fill("");assignValue(ctx2,emptyValues)},focusInput(ctx2){if(ctx2.focusedIndex===-1)return;dom.getFocusedInputEl(ctx2)?.focus({preventScroll:true})},selectInputIfNeeded(ctx2){if(!ctx2.selectOnFocus||ctx2.focusedIndex===-1)return;raf(()=>{dom.getFocusedInputEl(ctx2)?.select()})},invokeOnComplete(ctx2){if(!ctx2.isValueComplete)return;ctx2.onValueComplete?.({value:Array.from(ctx2.value),valueAsString:ctx2.valueAsString})},invokeOnInvalid(ctx2,evt){ctx2.onValueInvalid?.({value:evt.value,index:ctx2.focusedIndex})},clearFocusedIndex(ctx2){ctx2.focusedIndex=-1},setFocusedIndex(ctx2,evt){ctx2.focusedIndex=evt.index},setValue(ctx2,evt){set.value(ctx2,evt.value)},setFocusedValue(ctx2,evt){const nextValue=getNextValue(ctx2.focusedValue,evt.value);set.valueAtIndex(ctx2,ctx2.focusedIndex,nextValue)},revertInputValue(ctx2){const inputEl=dom.getFocusedInputEl(ctx2);dom.setValue(inputEl,ctx2.focusedValue)},syncInputValue(ctx2,evt){const inputEl=dom.getInputEl(ctx2,evt.index.toString());dom.setValue(inputEl,ctx2.value[evt.index])},syncInputElements(ctx2){const inputEls=dom.getInputEls(ctx2);inputEls.forEach((inputEl,index)=>{dom.setValue(inputEl,ctx2.value[index])})},setPastedValue(ctx2,evt){raf(()=>{const startIndex=Math.min(ctx2.focusedIndex,ctx2.filledValueLength);const left=startIndex>0?ctx2.valueAsString.substring(0,ctx2.focusedIndex):"";const right=evt.value.substring(0,ctx2.valueLength-startIndex);const value=left+right;set.value(ctx2,value.split(""))})},setValueAtIndex(ctx2,evt){const nextValue=getNextValue(ctx2.focusedValue,evt.value);set.valueAtIndex(ctx2,evt.index,nextValue)},clearValue(ctx2){const nextValue=Array.from({length:ctx2.valueLength}).fill("");set.value(ctx2,nextValue)},clearFocusedValue(ctx2){set.valueAtIndex(ctx2,ctx2.focusedIndex,"")},setFocusIndexToFirst(ctx2){ctx2.focusedIndex=0},setNextFocusedIndex(ctx2){ctx2.focusedIndex=Math.min(ctx2.focusedIndex+1,ctx2.valueLength-1)},setPrevFocusedIndex(ctx2){ctx2.focusedIndex=Math.max(ctx2.focusedIndex-1,0)},setLastValueFocusIndex(ctx2){raf(()=>{ctx2.focusedIndex=Math.min(ctx2.filledValueLength,ctx2.valueLength-1)})},blurFocusedInputIfNeeded(ctx2){if(!ctx2.blurOnComplete)return;raf(()=>{dom.getFocusedInputEl(ctx2)?.blur()})},requestFormSubmit(ctx2){if(!ctx2.name||!ctx2.isValueComplete)return;const inputEl=dom.getHiddenInputEl(ctx2);inputEl?.form?.requestSubmit()}}})}function assignValue(ctx,value){const arr=Array.isArray(value)?value:value.split("").filter(Boolean);arr.forEach((value2,index)=>{ctx.value[index]=value2})}function getNextValue(current,next){let nextValue=next;if(current[0]===next[0])nextValue=next[1];else if(current[0]===next[1])nextValue=next[0];return nextValue.split("")[nextValue.length-1]}var invoke={change(ctx){ctx.onValueChange?.({value:Array.from(ctx.value),valueAsString:ctx.valueAsString});const inputEl=dom.getHiddenInputEl(ctx);dispatchInputValueEvent(inputEl,{value:ctx.valueAsString})}};var set={value(ctx,value){if(isEqual(ctx.value,value))return;assignValue(ctx,value);invoke.change(ctx)},valueAtIndex(ctx,index,value){if(isEqual(ctx.value[index],value))return;ctx.value[index]=value;invoke.change(ctx)}};export{anatomy,connect,machine};
|
|
479
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/pin-input.anatomy.ts","../src/pin-input.connect.ts","../src/pin-input.dom.ts","../src/pin-input.utils.ts","../src/pin-input.machine.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"pinInput\").parts(\"root\", \"label\", \"input\", \"control\")\nexport const parts = anatomy.build()\n","import { getEventKey, getNativeEvent, isModifierKey, type EventKeyMap } from \"@zag-js/dom-event\"\nimport { ariaAttr, dataAttr, getBeforeInputValue, visuallyHiddenStyle } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { invariant } from \"@zag-js/utils\"\nimport { parts } from \"./pin-input.anatomy\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineApi, Send, State } from \"./pin-input.types\"\nimport { isValidValue } from \"./pin-input.utils\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const complete = state.context.isValueComplete\n const invalid = state.context.invalid\n const focusedIndex = state.context.focusedIndex\n const translations = state.context.translations\n\n function focus() {\n dom.getFirstInputEl(state.context)?.focus()\n }\n\n return {\n focus,\n value: state.context.value,\n valueAsString: state.context.valueAsString,\n complete: complete,\n setValue(value) {\n if (!Array.isArray(value)) {\n invariant(\"[pin-input/setValue] value must be an array\")\n }\n send({ type: \"VALUE.SET\", value })\n },\n clearValue() {\n send({ type: \"VALUE.CLEAR\" })\n },\n setValueAtIndex(index, value) {\n send({ type: \"VALUE.SET\", value, index })\n },\n\n rootProps: normalize.element({\n dir: state.context.dir,\n ...parts.root.attrs,\n id: dom.getRootId(state.context),\n \"data-invalid\": dataAttr(invalid),\n \"data-disabled\": dataAttr(state.context.disabled),\n \"data-complete\": dataAttr(complete),\n }),\n\n labelProps: normalize.label({\n ...parts.label.attrs,\n dir: state.context.dir,\n htmlFor: dom.getHiddenInputId(state.context),\n id: dom.getLabelId(state.context),\n \"data-invalid\": dataAttr(invalid),\n \"data-disabled\": dataAttr(state.context.disabled),\n \"data-complete\": dataAttr(complete),\n onClick(event) {\n event.preventDefault()\n focus()\n },\n }),\n\n hiddenInputProps: normalize.input({\n \"aria-hidden\": true,\n type: \"text\",\n tabIndex: -1,\n id: dom.getHiddenInputId(state.context),\n name: state.context.name,\n form: state.context.form,\n style: visuallyHiddenStyle,\n maxLength: state.context.valueLength,\n defaultValue: state.context.valueAsString,\n }),\n\n controlProps: normalize.element({\n ...parts.control.attrs,\n dir: state.context.dir,\n id: dom.getControlId(state.context),\n }),\n\n getInputProps(props) {\n const { index } = props\n const inputType = state.context.type === \"numeric\" ? \"tel\" : \"text\"\n return normalize.input({\n ...parts.input.attrs,\n dir: state.context.dir,\n disabled: state.context.disabled,\n \"data-disabled\": dataAttr(state.context.disabled),\n \"data-complete\": dataAttr(complete),\n id: dom.getInputId(state.context, index.toString()),\n \"data-ownedby\": dom.getRootId(state.context),\n \"aria-label\": translations.inputLabel(index, state.context.valueLength),\n inputMode: state.context.otp || state.context.type === \"numeric\" ? \"numeric\" : \"text\",\n \"aria-invalid\": ariaAttr(invalid),\n \"data-invalid\": dataAttr(invalid),\n type: state.context.mask ? \"password\" : inputType,\n defaultValue: state.context.value[index] || \"\",\n autoCapitalize: \"none\",\n autoComplete: state.context.otp ? \"one-time-code\" : \"off\",\n placeholder: focusedIndex === index ? \"\" : state.context.placeholder,\n onBeforeInput(event) {\n try {\n const value = getBeforeInputValue(event)\n const isValid = isValidValue(state.context, value)\n if (!isValid) {\n send({ type: \"VALUE.INVALID\", value })\n event.preventDefault()\n }\n\n // select the text so paste always replaces the\n // current input's value regardless of cursor position\n if (value.length > 2) {\n event.currentTarget.setSelectionRange(0, 1, \"forward\")\n }\n } catch {\n // noop\n }\n },\n onChange(event) {\n const evt = getNativeEvent(event)\n const { value } = event.currentTarget\n\n if (evt.inputType === \"insertFromPaste\" || value.length > 2) {\n send({ type: \"INPUT.PASTE\", value })\n // prevent multiple characters being pasted\n // into a single input\n event.target.value = value[0]\n\n event.preventDefault()\n return\n }\n\n if (evt.inputType === \"deleteContentBackward\") {\n send(\"INPUT.BACKSPACE\")\n return\n }\n\n send({ type: \"INPUT.CHANGE\", value, index })\n },\n onKeyDown(event) {\n if (event.defaultPrevented) return\n const evt = getNativeEvent(event)\n\n if (evt.isComposing) return\n if (isModifierKey(evt)) return\n\n const keyMap: EventKeyMap = {\n Backspace() {\n send(\"INPUT.BACKSPACE\")\n },\n Delete() {\n send(\"INPUT.DELETE\")\n },\n ArrowLeft() {\n send(\"INPUT.ARROW_LEFT\")\n },\n ArrowRight() {\n send(\"INPUT.ARROW_RIGHT\")\n },\n Enter() {\n send(\"INPUT.ENTER\")\n },\n }\n\n const exec = keyMap[getEventKey(event, state.context)]\n\n if (exec) {\n exec(event)\n event.preventDefault()\n }\n },\n onFocus() {\n send({ type: \"INPUT.FOCUS\", index })\n },\n onBlur() {\n send({ type: \"INPUT.BLUR\", index })\n },\n })\n },\n }\n}\n","import { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./pin-input.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`,\n getInputId: (ctx: Ctx, id: string) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`,\n getHiddenInputId: (ctx: Ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`,\n getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`,\n getControlId: (ctx: Ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getInputEls: (ctx: Ctx) => {\n const ownerId = CSS.escape(dom.getRootId(ctx))\n const selector = `input[data-ownedby=${ownerId}]`\n return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)\n },\n getInputEl: (ctx: Ctx, id: string) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx, id)),\n getFocusedInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[ctx.focusedIndex],\n getFirstInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[0],\n getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n})\n","import type { MachineContext } from \"./pin-input.types\"\n\nconst REGEX = {\n numeric: /^[0-9]+$/,\n alphabetic: /^[A-Za-z]+$/,\n alphanumeric: /^[a-zA-Z0-9]+$/i,\n}\n\nexport function isValidType(ctx: MachineContext, value: string) {\n if (!ctx.type) return true\n return !!REGEX[ctx.type]?.test(value)\n}\n\nexport function isValidValue(ctx: MachineContext, value: string) {\n if (!ctx.pattern) return isValidType(ctx, value)\n const regex = new RegExp(ctx.pattern, \"g\")\n return regex.test(value)\n}\n","import { choose, createMachine } from \"@zag-js/core\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { dispatchInputValueEvent } from \"@zag-js/form-utils\"\nimport { compact, isEqual } from \"@zag-js/utils\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./pin-input.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"pin-input\",\n initial: \"idle\",\n context: {\n value: [],\n placeholder: \"○\",\n otp: false,\n type: \"numeric\",\n ...ctx,\n focusedIndex: -1,\n translations: {\n inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,\n ...ctx.translations,\n },\n },\n\n computed: {\n valueLength: (ctx) => ctx.value.length,\n filledValueLength: (ctx) => ctx.value.filter((v) => v?.trim() !== \"\").length,\n isValueComplete: (ctx) => ctx.valueLength === ctx.filledValueLength,\n valueAsString: (ctx) => ctx.value.join(\"\"),\n focusedValue: (ctx) => ctx.value[ctx.focusedIndex] || \"\",\n },\n\n entry: choose([\n {\n guard: \"autoFocus\",\n actions: [\"setupValue\", \"setFocusIndexToFirst\"],\n },\n { actions: [\"setupValue\"] },\n ]),\n\n watch: {\n focusedIndex: [\"focusInput\", \"selectInputIfNeeded\"],\n value: [\"syncInputElements\"],\n isValueComplete: [\"invokeOnComplete\", \"blurFocusedInputIfNeeded\"],\n },\n\n on: {\n \"VALUE.SET\": [\n {\n guard: \"hasIndex\",\n actions: [\"setValueAtIndex\"],\n },\n { actions: [\"setValue\"] },\n ],\n \"VALUE.CLEAR\": {\n actions: [\"clearValue\", \"setFocusIndexToFirst\"],\n },\n },\n\n states: {\n idle: {\n on: {\n \"INPUT.FOCUS\": {\n target: \"focused\",\n actions: \"setFocusedIndex\",\n },\n },\n },\n focused: {\n on: {\n \"INPUT.CHANGE\": [\n {\n guard: \"isFinalValue\",\n actions: [\"setFocusedValue\", \"syncInputValue\"],\n },\n {\n actions: [\"setFocusedValue\", \"setNextFocusedIndex\", \"syncInputValue\"],\n },\n ],\n \"INPUT.PASTE\": {\n actions: [\"setPastedValue\", \"setLastValueFocusIndex\"],\n },\n \"INPUT.BLUR\": {\n target: \"idle\",\n actions: \"clearFocusedIndex\",\n },\n \"INPUT.DELETE\": {\n guard: \"hasValue\",\n actions: \"clearFocusedValue\",\n },\n \"INPUT.ARROW_LEFT\": {\n actions: \"setPrevFocusedIndex\",\n },\n \"INPUT.ARROW_RIGHT\": {\n actions: \"setNextFocusedIndex\",\n },\n \"INPUT.BACKSPACE\": [\n {\n guard: \"hasValue\",\n actions: [\"clearFocusedValue\"],\n },\n {\n actions: [\"setPrevFocusedIndex\", \"clearFocusedValue\"],\n },\n ],\n \"INPUT.ENTER\": {\n guard: \"isValueComplete\",\n actions: \"requestFormSubmit\",\n },\n \"VALUE.INVALID\": {\n actions: \"invokeOnInvalid\",\n },\n },\n },\n },\n },\n {\n guards: {\n autoFocus: (ctx) => !!ctx.autoFocus,\n isValueEmpty: (_ctx, evt) => evt.value === \"\",\n hasValue: (ctx) => ctx.value[ctx.focusedIndex] !== \"\",\n isValueComplete: (ctx) => ctx.isValueComplete,\n isFinalValue: (ctx) =>\n ctx.filledValueLength + 1 === ctx.valueLength &&\n ctx.value.findIndex((v) => v.trim() === \"\") === ctx.focusedIndex,\n hasIndex: (_ctx, evt) => evt.index !== undefined,\n isDisabled: (ctx) => !!ctx.disabled,\n },\n actions: {\n setupValue(ctx) {\n if (ctx.value.length) return\n const inputEls = dom.getInputEls(ctx)\n const emptyValues = Array.from<string>({ length: inputEls.length }).fill(\"\")\n assignValue(ctx, emptyValues)\n },\n focusInput(ctx) {\n if (ctx.focusedIndex === -1) return\n dom.getFocusedInputEl(ctx)?.focus({ preventScroll: true })\n },\n selectInputIfNeeded(ctx) {\n if (!ctx.selectOnFocus || ctx.focusedIndex === -1) return\n raf(() => {\n dom.getFocusedInputEl(ctx)?.select()\n })\n },\n invokeOnComplete(ctx) {\n if (!ctx.isValueComplete) return\n ctx.onValueComplete?.({\n value: Array.from(ctx.value),\n valueAsString: ctx.valueAsString,\n })\n },\n invokeOnInvalid(ctx, evt) {\n ctx.onValueInvalid?.({\n value: evt.value,\n index: ctx.focusedIndex,\n })\n },\n clearFocusedIndex(ctx) {\n ctx.focusedIndex = -1\n },\n setFocusedIndex(ctx, evt) {\n ctx.focusedIndex = evt.index\n },\n setValue(ctx, evt) {\n set.value(ctx, evt.value)\n },\n setFocusedValue(ctx, evt) {\n const nextValue = getNextValue(ctx.focusedValue, evt.value)\n set.valueAtIndex(ctx, ctx.focusedIndex, nextValue)\n },\n revertInputValue(ctx) {\n const inputEl = dom.getFocusedInputEl(ctx)\n dom.setValue(inputEl, ctx.focusedValue)\n },\n syncInputValue(ctx, evt) {\n const inputEl = dom.getInputEl(ctx, evt.index.toString())\n dom.setValue(inputEl, ctx.value[evt.index])\n },\n syncInputElements(ctx) {\n const inputEls = dom.getInputEls(ctx)\n inputEls.forEach((inputEl, index) => {\n dom.setValue(inputEl, ctx.value[index])\n })\n },\n setPastedValue(ctx, evt) {\n raf(() => {\n const startIndex = Math.min(ctx.focusedIndex, ctx.filledValueLength)\n\n // keep value left of cursor\n // replace value from curor to end with pasted text\n const left = startIndex > 0 ? ctx.valueAsString.substring(0, ctx.focusedIndex) : \"\"\n const right = evt.value.substring(0, ctx.valueLength - startIndex)\n\n const value = left + right\n\n set.value(ctx, value.split(\"\"))\n })\n },\n setValueAtIndex(ctx, evt) {\n const nextValue = getNextValue(ctx.focusedValue, evt.value)\n set.valueAtIndex(ctx, evt.index, nextValue)\n },\n clearValue(ctx) {\n const nextValue = Array.from<string>({ length: ctx.valueLength }).fill(\"\")\n set.value(ctx, nextValue)\n },\n clearFocusedValue(ctx) {\n set.valueAtIndex(ctx, ctx.focusedIndex, \"\")\n },\n setFocusIndexToFirst(ctx) {\n ctx.focusedIndex = 0\n },\n setNextFocusedIndex(ctx) {\n ctx.focusedIndex = Math.min(ctx.focusedIndex + 1, ctx.valueLength - 1)\n },\n setPrevFocusedIndex(ctx) {\n ctx.focusedIndex = Math.max(ctx.focusedIndex - 1, 0)\n },\n setLastValueFocusIndex(ctx) {\n raf(() => {\n ctx.focusedIndex = Math.min(ctx.filledValueLength, ctx.valueLength - 1)\n })\n },\n blurFocusedInputIfNeeded(ctx) {\n if (!ctx.blurOnComplete) return\n raf(() => {\n dom.getFocusedInputEl(ctx)?.blur()\n })\n },\n requestFormSubmit(ctx) {\n if (!ctx.name || !ctx.isValueComplete) return\n const inputEl = dom.getHiddenInputEl(ctx)\n inputEl?.form?.requestSubmit()\n },\n },\n },\n )\n}\n\nfunction assignValue(ctx: MachineContext, value: string | string[]) {\n const arr = Array.isArray(value) ? value : value.split(\"\").filter(Boolean)\n arr.forEach((value, index) => {\n ctx.value[index] = value\n })\n}\n\nfunction getNextValue(current: string, next: string) {\n let nextValue = next\n if (current[0] === next[0]) nextValue = next[1]\n else if (current[0] === next[1]) nextValue = next[0]\n return nextValue.split(\"\")[nextValue.length - 1]\n}\n\nconst invoke = {\n change(ctx: MachineContext) {\n // callback\n ctx.onValueChange?.({\n value: Array.from(ctx.value),\n valueAsString: ctx.valueAsString,\n })\n\n // form event\n const inputEl = dom.getHiddenInputEl(ctx)\n dispatchInputValueEvent(inputEl, { value: ctx.valueAsString })\n },\n}\n\nconst set = {\n value(ctx: MachineContext, value: string[]) {\n if (isEqual(ctx.value, value)) return\n assignValue(ctx, value)\n invoke.change(ctx)\n },\n valueAtIndex(ctx: MachineContext, index: number, value: string) {\n if (isEqual(ctx.value[index], value)) return\n ctx.value[index] = value\n invoke.change(ctx)\n },\n}\n"],"mappings":"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","names":["ctx","value"]}
|
|
1
|
+
{"version":3,"sources":["../src/pin-input.anatomy.ts","../src/pin-input.connect.ts","../src/pin-input.dom.ts","../src/pin-input.utils.ts","../src/pin-input.machine.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"pinInput\").parts(\"root\", \"label\", \"input\", \"control\")\nexport const parts = anatomy.build()\n","import { getEventKey, getNativeEvent, isModifierKey, type EventKeyMap } from \"@zag-js/dom-event\"\nimport { ariaAttr, dataAttr, getBeforeInputValue, visuallyHiddenStyle } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { invariant } from \"@zag-js/utils\"\nimport { parts } from \"./pin-input.anatomy\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineApi, Send, State } from \"./pin-input.types\"\nimport { isValidValue } from \"./pin-input.utils\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const complete = state.context.isValueComplete\n const invalid = state.context.invalid\n const focusedIndex = state.context.focusedIndex\n const translations = state.context.translations\n\n function focus() {\n dom.getFirstInputEl(state.context)?.focus()\n }\n\n return {\n focus,\n value: state.context.value,\n valueAsString: state.context.valueAsString,\n complete: complete,\n setValue(value) {\n if (!Array.isArray(value)) {\n invariant(\"[pin-input/setValue] value must be an array\")\n }\n send({ type: \"VALUE.SET\", value })\n },\n clearValue() {\n send({ type: \"VALUE.CLEAR\" })\n },\n setValueAtIndex(index, value) {\n send({ type: \"VALUE.SET\", value, index })\n },\n\n rootProps: normalize.element({\n dir: state.context.dir,\n ...parts.root.attrs,\n id: dom.getRootId(state.context),\n \"data-invalid\": dataAttr(invalid),\n \"data-disabled\": dataAttr(state.context.disabled),\n \"data-complete\": dataAttr(complete),\n }),\n\n labelProps: normalize.label({\n ...parts.label.attrs,\n dir: state.context.dir,\n htmlFor: dom.getHiddenInputId(state.context),\n id: dom.getLabelId(state.context),\n \"data-invalid\": dataAttr(invalid),\n \"data-disabled\": dataAttr(state.context.disabled),\n \"data-complete\": dataAttr(complete),\n onClick(event) {\n event.preventDefault()\n focus()\n },\n }),\n\n hiddenInputProps: normalize.input({\n \"aria-hidden\": true,\n type: \"text\",\n tabIndex: -1,\n id: dom.getHiddenInputId(state.context),\n name: state.context.name,\n form: state.context.form,\n style: visuallyHiddenStyle,\n maxLength: state.context.valueLength,\n defaultValue: state.context.valueAsString,\n }),\n\n controlProps: normalize.element({\n ...parts.control.attrs,\n dir: state.context.dir,\n id: dom.getControlId(state.context),\n }),\n\n getInputProps(props) {\n const { index } = props\n const inputType = state.context.type === \"numeric\" ? \"tel\" : \"text\"\n return normalize.input({\n ...parts.input.attrs,\n dir: state.context.dir,\n disabled: state.context.disabled,\n \"data-disabled\": dataAttr(state.context.disabled),\n \"data-complete\": dataAttr(complete),\n id: dom.getInputId(state.context, index.toString()),\n \"data-ownedby\": dom.getRootId(state.context),\n \"aria-label\": translations.inputLabel(index, state.context.valueLength),\n inputMode: state.context.otp || state.context.type === \"numeric\" ? \"numeric\" : \"text\",\n \"aria-invalid\": ariaAttr(invalid),\n \"data-invalid\": dataAttr(invalid),\n type: state.context.mask ? \"password\" : inputType,\n defaultValue: state.context.value[index] || \"\",\n autoCapitalize: \"none\",\n autoComplete: state.context.otp ? \"one-time-code\" : \"off\",\n placeholder: focusedIndex === index ? \"\" : state.context.placeholder,\n onBeforeInput(event) {\n try {\n const value = getBeforeInputValue(event)\n const isValid = isValidValue(state.context, value)\n if (!isValid) {\n send({ type: \"VALUE.INVALID\", value })\n event.preventDefault()\n }\n\n // select the text so paste always replaces the\n // current input's value regardless of cursor position\n if (value.length > 2) {\n event.currentTarget.setSelectionRange(0, 1, \"forward\")\n }\n } catch {\n // noop\n }\n },\n onChange(event) {\n const evt = getNativeEvent(event)\n const { value } = event.currentTarget\n\n if (evt.inputType === \"insertFromPaste\" || value.length > 2) {\n send({ type: \"INPUT.PASTE\", value })\n // prevent multiple characters being pasted\n // into a single input\n event.target.value = value[0]\n\n event.preventDefault()\n return\n }\n\n if (evt.inputType === \"deleteContentBackward\") {\n send(\"INPUT.BACKSPACE\")\n return\n }\n\n send({ type: \"INPUT.CHANGE\", value, index })\n },\n onKeyDown(event) {\n if (event.defaultPrevented) return\n const evt = getNativeEvent(event)\n\n if (evt.isComposing) return\n if (isModifierKey(evt)) return\n\n const keyMap: EventKeyMap = {\n Backspace() {\n send(\"INPUT.BACKSPACE\")\n },\n Delete() {\n send(\"INPUT.DELETE\")\n },\n ArrowLeft() {\n send(\"INPUT.ARROW_LEFT\")\n },\n ArrowRight() {\n send(\"INPUT.ARROW_RIGHT\")\n },\n Enter() {\n send(\"INPUT.ENTER\")\n },\n }\n\n const exec = keyMap[getEventKey(event, state.context)]\n\n if (exec) {\n exec(event)\n event.preventDefault()\n }\n },\n onFocus() {\n send({ type: \"INPUT.FOCUS\", index })\n },\n onBlur() {\n send({ type: \"INPUT.BLUR\", index })\n },\n })\n },\n }\n}\n","import { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./pin-input.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`,\n getInputId: (ctx: Ctx, id: string) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`,\n getHiddenInputId: (ctx: Ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`,\n getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`,\n getControlId: (ctx: Ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getInputEls: (ctx: Ctx) => {\n const ownerId = CSS.escape(dom.getRootId(ctx))\n const selector = `input[data-ownedby=${ownerId}]`\n return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)\n },\n getInputEl: (ctx: Ctx, id: string) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx, id)),\n getFocusedInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[ctx.focusedIndex],\n getFirstInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[0],\n getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n})\n","import type { MachineContext } from \"./pin-input.types\"\n\nconst REGEX = {\n numeric: /^[0-9]+$/,\n alphabetic: /^[A-Za-z]+$/,\n alphanumeric: /^[a-zA-Z0-9]+$/i,\n}\n\nexport function isValidType(ctx: MachineContext, value: string) {\n if (!ctx.type) return true\n return !!REGEX[ctx.type]?.test(value)\n}\n\nexport function isValidValue(ctx: MachineContext, value: string) {\n if (!ctx.pattern) return isValidType(ctx, value)\n const regex = new RegExp(ctx.pattern, \"g\")\n return regex.test(value)\n}\n","import { choose, createMachine } from \"@zag-js/core\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { dispatchInputValueEvent } from \"@zag-js/form-utils\"\nimport { compact, isEqual } from \"@zag-js/utils\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./pin-input.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"pin-input\",\n initial: \"idle\",\n context: {\n value: [],\n placeholder: \"○\",\n otp: false,\n type: \"numeric\",\n ...ctx,\n focusedIndex: -1,\n translations: {\n inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,\n ...ctx.translations,\n },\n },\n\n computed: {\n valueLength: (ctx) => ctx.value.length,\n filledValueLength: (ctx) => ctx.value.filter((v) => v?.trim() !== \"\").length,\n isValueComplete: (ctx) => ctx.valueLength === ctx.filledValueLength,\n valueAsString: (ctx) => ctx.value.join(\"\"),\n focusedValue: (ctx) => ctx.value[ctx.focusedIndex] || \"\",\n },\n\n entry: choose([\n {\n guard: \"autoFocus\",\n actions: [\"setupValue\", \"setFocusIndexToFirst\"],\n },\n { actions: [\"setupValue\"] },\n ]),\n\n watch: {\n focusedIndex: [\"focusInput\", \"selectInputIfNeeded\"],\n value: [\"syncInputElements\"],\n isValueComplete: [\"invokeOnComplete\", \"blurFocusedInputIfNeeded\"],\n },\n\n on: {\n \"VALUE.SET\": [\n {\n guard: \"hasIndex\",\n actions: [\"setValueAtIndex\"],\n },\n { actions: [\"setValue\"] },\n ],\n \"VALUE.CLEAR\": {\n actions: [\"clearValue\", \"setFocusIndexToFirst\"],\n },\n },\n\n states: {\n idle: {\n on: {\n \"INPUT.FOCUS\": {\n target: \"focused\",\n actions: \"setFocusedIndex\",\n },\n },\n },\n focused: {\n on: {\n \"INPUT.CHANGE\": [\n {\n guard: \"isFinalValue\",\n actions: [\"setFocusedValue\", \"syncInputValue\"],\n },\n {\n actions: [\"setFocusedValue\", \"setNextFocusedIndex\", \"syncInputValue\"],\n },\n ],\n \"INPUT.PASTE\": {\n actions: [\"setPastedValue\", \"setLastValueFocusIndex\"],\n },\n \"INPUT.BLUR\": {\n target: \"idle\",\n actions: \"clearFocusedIndex\",\n },\n \"INPUT.DELETE\": {\n guard: \"hasValue\",\n actions: \"clearFocusedValue\",\n },\n \"INPUT.ARROW_LEFT\": {\n actions: \"setPrevFocusedIndex\",\n },\n \"INPUT.ARROW_RIGHT\": {\n actions: \"setNextFocusedIndex\",\n },\n \"INPUT.BACKSPACE\": [\n {\n guard: \"hasValue\",\n actions: [\"clearFocusedValue\"],\n },\n {\n actions: [\"setPrevFocusedIndex\", \"clearFocusedValue\"],\n },\n ],\n \"INPUT.ENTER\": {\n guard: \"isValueComplete\",\n actions: \"requestFormSubmit\",\n },\n \"VALUE.INVALID\": {\n actions: \"invokeOnInvalid\",\n },\n },\n },\n },\n },\n {\n guards: {\n autoFocus: (ctx) => !!ctx.autoFocus,\n isValueEmpty: (_ctx, evt) => evt.value === \"\",\n hasValue: (ctx) => ctx.value[ctx.focusedIndex] !== \"\",\n isValueComplete: (ctx) => ctx.isValueComplete,\n isFinalValue: (ctx) =>\n ctx.filledValueLength + 1 === ctx.valueLength &&\n ctx.value.findIndex((v) => v.trim() === \"\") === ctx.focusedIndex,\n hasIndex: (_ctx, evt) => evt.index !== undefined,\n isDisabled: (ctx) => !!ctx.disabled,\n },\n actions: {\n setupValue(ctx) {\n if (ctx.value.length) return\n const inputEls = dom.getInputEls(ctx)\n const emptyValues = Array.from<string>({ length: inputEls.length }).fill(\"\")\n assignValue(ctx, emptyValues)\n },\n focusInput(ctx) {\n if (ctx.focusedIndex === -1) return\n dom.getFocusedInputEl(ctx)?.focus({ preventScroll: true })\n },\n selectInputIfNeeded(ctx) {\n if (!ctx.selectOnFocus || ctx.focusedIndex === -1) return\n raf(() => {\n dom.getFocusedInputEl(ctx)?.select()\n })\n },\n invokeOnComplete(ctx) {\n if (!ctx.isValueComplete) return\n ctx.onValueComplete?.({\n value: Array.from(ctx.value),\n valueAsString: ctx.valueAsString,\n })\n },\n invokeOnInvalid(ctx, evt) {\n ctx.onValueInvalid?.({\n value: evt.value,\n index: ctx.focusedIndex,\n })\n },\n clearFocusedIndex(ctx) {\n ctx.focusedIndex = -1\n },\n setFocusedIndex(ctx, evt) {\n ctx.focusedIndex = evt.index\n },\n setValue(ctx, evt) {\n set.value(ctx, evt.value)\n },\n setFocusedValue(ctx, evt) {\n const nextValue = getNextValue(ctx.focusedValue, evt.value)\n set.valueAtIndex(ctx, ctx.focusedIndex, nextValue)\n },\n revertInputValue(ctx) {\n const inputEl = dom.getFocusedInputEl(ctx)\n dom.setValue(inputEl, ctx.focusedValue)\n },\n syncInputValue(ctx, evt) {\n const inputEl = dom.getInputEl(ctx, evt.index.toString())\n dom.setValue(inputEl, ctx.value[evt.index])\n },\n syncInputElements(ctx) {\n const inputEls = dom.getInputEls(ctx)\n inputEls.forEach((inputEl, index) => {\n dom.setValue(inputEl, ctx.value[index])\n })\n },\n setPastedValue(ctx, evt) {\n raf(() => {\n const startIndex = Math.min(ctx.focusedIndex, ctx.filledValueLength)\n\n // keep value left of cursor\n // replace value from curor to end with pasted text\n const left = startIndex > 0 ? ctx.valueAsString.substring(0, ctx.focusedIndex) : \"\"\n const right = evt.value.substring(0, ctx.valueLength - startIndex)\n\n const value = left + right\n\n set.value(ctx, value.split(\"\"))\n })\n },\n setValueAtIndex(ctx, evt) {\n const nextValue = getNextValue(ctx.focusedValue, evt.value)\n set.valueAtIndex(ctx, evt.index, nextValue)\n },\n clearValue(ctx) {\n const nextValue = Array.from<string>({ length: ctx.valueLength }).fill(\"\")\n set.value(ctx, nextValue)\n },\n clearFocusedValue(ctx) {\n set.valueAtIndex(ctx, ctx.focusedIndex, \"\")\n },\n setFocusIndexToFirst(ctx) {\n ctx.focusedIndex = 0\n },\n setNextFocusedIndex(ctx) {\n ctx.focusedIndex = Math.min(ctx.focusedIndex + 1, ctx.valueLength - 1)\n },\n setPrevFocusedIndex(ctx) {\n ctx.focusedIndex = Math.max(ctx.focusedIndex - 1, 0)\n },\n setLastValueFocusIndex(ctx) {\n raf(() => {\n ctx.focusedIndex = Math.min(ctx.filledValueLength, ctx.valueLength - 1)\n })\n },\n blurFocusedInputIfNeeded(ctx) {\n if (!ctx.blurOnComplete) return\n raf(() => {\n dom.getFocusedInputEl(ctx)?.blur()\n })\n },\n requestFormSubmit(ctx) {\n if (!ctx.name || !ctx.isValueComplete) return\n const inputEl = dom.getHiddenInputEl(ctx)\n inputEl?.form?.requestSubmit()\n },\n },\n },\n )\n}\n\nfunction assignValue(ctx: MachineContext, value: string | string[]) {\n const arr = Array.isArray(value) ? value : value.split(\"\").filter(Boolean)\n arr.forEach((value, index) => {\n ctx.value[index] = value\n })\n}\n\nfunction getNextValue(current: string, next: string) {\n let nextValue = next\n if (current[0] === next[0]) nextValue = next[1]\n else if (current[0] === next[1]) nextValue = next[0]\n return nextValue.split(\"\")[nextValue.length - 1]\n}\n\nconst invoke = {\n change(ctx: MachineContext) {\n // callback\n ctx.onValueChange?.({\n value: Array.from(ctx.value),\n valueAsString: ctx.valueAsString,\n })\n\n // form event\n const inputEl = dom.getHiddenInputEl(ctx)\n dispatchInputValueEvent(inputEl, { value: ctx.valueAsString })\n },\n}\n\nconst set = {\n value(ctx: MachineContext, value: string[]) {\n if (isEqual(ctx.value, value)) return\n assignValue(ctx, value)\n invoke.change(ctx)\n },\n valueAtIndex(ctx: MachineContext, index: number, value: string) {\n if (isEqual(ctx.value[index], value)) return\n ctx.value[index] = value\n invoke.change(ctx)\n },\n}\n"],"mappings":"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","names":["ctx","value"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/pin-input",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.51.0",
|
|
4
4
|
"description": "Core logic for the pin-input widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -27,13 +27,13 @@
|
|
|
27
27
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@zag-js/anatomy": "0.
|
|
31
|
-
"@zag-js/dom-query": "0.
|
|
32
|
-
"@zag-js/dom-event": "0.
|
|
33
|
-
"@zag-js/form-utils": "0.
|
|
34
|
-
"@zag-js/utils": "0.
|
|
35
|
-
"@zag-js/core": "0.
|
|
36
|
-
"@zag-js/types": "0.
|
|
30
|
+
"@zag-js/anatomy": "0.51.0",
|
|
31
|
+
"@zag-js/dom-query": "0.51.0",
|
|
32
|
+
"@zag-js/dom-event": "0.51.0",
|
|
33
|
+
"@zag-js/form-utils": "0.51.0",
|
|
34
|
+
"@zag-js/utils": "0.51.0",
|
|
35
|
+
"@zag-js/core": "0.51.0",
|
|
36
|
+
"@zag-js/types": "0.51.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"clean-package": "2.2.0"
|