@zag-js/pin-input 0.15.0 → 0.17.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.d.mts +39 -39
- package/dist/index.d.ts +39 -39
- package/dist/index.js +74 -64
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +74 -64
- package/dist/index.mjs.map +1 -1
- package/package.json +9 -9
- package/src/index.ts +1 -1
- package/src/pin-input.connect.ts +3 -3
- package/src/pin-input.dom.ts +3 -3
- package/src/pin-input.machine.ts +76 -60
- package/src/pin-input.types.ts +36 -36
package/dist/index.mjs
CHANGED
|
@@ -18,14 +18,14 @@ var dom = createScope({
|
|
|
18
18
|
getLabelId: (ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`,
|
|
19
19
|
getControlId: (ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`,
|
|
20
20
|
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
21
|
-
|
|
21
|
+
getInputEls: (ctx) => {
|
|
22
22
|
const ownerId = CSS.escape(dom.getRootId(ctx));
|
|
23
23
|
const selector = `input[data-ownedby=${ownerId}]`;
|
|
24
24
|
return queryAll(dom.getRootEl(ctx), selector);
|
|
25
25
|
},
|
|
26
26
|
getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
|
|
27
|
-
getFocusedInputEl: (ctx) => dom.
|
|
28
|
-
getFirstInputEl: (ctx) => dom.
|
|
27
|
+
getFocusedInputEl: (ctx) => dom.getInputEls(ctx)[ctx.focusedIndex],
|
|
28
|
+
getFirstInputEl: (ctx) => dom.getInputEls(ctx)[0],
|
|
29
29
|
getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
|
|
30
30
|
});
|
|
31
31
|
|
|
@@ -197,8 +197,8 @@ function machine(userContext) {
|
|
|
197
197
|
focusedValue: (ctx2) => ctx2.value[ctx2.focusedIndex]
|
|
198
198
|
},
|
|
199
199
|
watch: {
|
|
200
|
-
focusedIndex: ["focusInput", "
|
|
201
|
-
value: ["
|
|
200
|
+
focusedIndex: ["focusInput", "selectInputIfNeeded"],
|
|
201
|
+
value: ["syncInputElements"],
|
|
202
202
|
isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
|
|
203
203
|
},
|
|
204
204
|
entry: ctx.autoFocus ? ["setupValue", "setFocusIndexToFirst"] : ["setupValue"],
|
|
@@ -206,17 +206,17 @@ function machine(userContext) {
|
|
|
206
206
|
SET_VALUE: [
|
|
207
207
|
{
|
|
208
208
|
guard: "hasIndex",
|
|
209
|
-
actions: ["setValueAtIndex"
|
|
209
|
+
actions: ["setValueAtIndex"]
|
|
210
210
|
},
|
|
211
|
-
{ actions: ["setValue"
|
|
211
|
+
{ actions: ["setValue"] }
|
|
212
212
|
],
|
|
213
213
|
CLEAR_VALUE: [
|
|
214
214
|
{
|
|
215
215
|
guard: "isDisabled",
|
|
216
|
-
actions: ["clearValue"
|
|
216
|
+
actions: ["clearValue"]
|
|
217
217
|
},
|
|
218
218
|
{
|
|
219
|
-
actions: ["clearValue", "
|
|
219
|
+
actions: ["clearValue", "setFocusIndexToFirst"]
|
|
220
220
|
}
|
|
221
221
|
]
|
|
222
222
|
},
|
|
@@ -234,19 +234,19 @@ function machine(userContext) {
|
|
|
234
234
|
INPUT: [
|
|
235
235
|
{
|
|
236
236
|
guard: and("isFinalValue", "isValidValue"),
|
|
237
|
-
actions: ["setFocusedValue", "
|
|
237
|
+
actions: ["setFocusedValue", "syncInputValue"]
|
|
238
238
|
},
|
|
239
239
|
{
|
|
240
240
|
guard: "isValidValue",
|
|
241
|
-
actions: ["setFocusedValue", "
|
|
241
|
+
actions: ["setFocusedValue", "setNextFocusedIndex", "syncInputValue"]
|
|
242
242
|
}
|
|
243
243
|
],
|
|
244
244
|
PASTE: [
|
|
245
245
|
{
|
|
246
246
|
guard: "isValidValue",
|
|
247
|
-
actions: ["setPastedValue", "
|
|
247
|
+
actions: ["setPastedValue", "setLastValueFocusIndex"]
|
|
248
248
|
},
|
|
249
|
-
{ actions: ["
|
|
249
|
+
{ actions: ["revertInputValue"] }
|
|
250
250
|
],
|
|
251
251
|
BLUR: {
|
|
252
252
|
target: "idle",
|
|
@@ -254,7 +254,7 @@ function machine(userContext) {
|
|
|
254
254
|
},
|
|
255
255
|
DELETE: {
|
|
256
256
|
guard: "hasValue",
|
|
257
|
-
actions: ["clearFocusedValue"
|
|
257
|
+
actions: ["clearFocusedValue"]
|
|
258
258
|
},
|
|
259
259
|
ARROW_LEFT: {
|
|
260
260
|
actions: "setPrevFocusedIndex"
|
|
@@ -265,10 +265,10 @@ function machine(userContext) {
|
|
|
265
265
|
BACKSPACE: [
|
|
266
266
|
{
|
|
267
267
|
guard: "hasValue",
|
|
268
|
-
actions: ["clearFocusedValue"
|
|
268
|
+
actions: ["clearFocusedValue"]
|
|
269
269
|
},
|
|
270
270
|
{
|
|
271
|
-
actions: ["setPrevFocusedIndex", "clearFocusedValue"
|
|
271
|
+
actions: ["setPrevFocusedIndex", "clearFocusedValue"]
|
|
272
272
|
}
|
|
273
273
|
],
|
|
274
274
|
ENTER: {
|
|
@@ -289,13 +289,13 @@ function machine(userContext) {
|
|
|
289
289
|
isValueEmpty: (_ctx, evt) => evt.value === "",
|
|
290
290
|
hasValue: (ctx2) => ctx2.value[ctx2.focusedIndex] !== "",
|
|
291
291
|
isValueComplete: (ctx2) => ctx2.isValueComplete,
|
|
292
|
-
isValidValue
|
|
292
|
+
isValidValue(ctx2, evt) {
|
|
293
293
|
if (!ctx2.pattern)
|
|
294
294
|
return isValidType(evt.value, ctx2.type);
|
|
295
295
|
const regex = new RegExp(ctx2.pattern, "g");
|
|
296
296
|
return regex.test(evt.value);
|
|
297
297
|
},
|
|
298
|
-
isFinalValue
|
|
298
|
+
isFinalValue(ctx2) {
|
|
299
299
|
return ctx2.filledValueLength + 1 === ctx2.valueLength && ctx2.value.findIndex((v) => v.trim() === "") === ctx2.focusedIndex;
|
|
300
300
|
},
|
|
301
301
|
isLastInputFocused: (ctx2) => ctx2.focusedIndex === ctx2.valueLength - 1,
|
|
@@ -303,21 +303,21 @@ function machine(userContext) {
|
|
|
303
303
|
isDisabled: (ctx2) => !!ctx2.disabled
|
|
304
304
|
},
|
|
305
305
|
actions: {
|
|
306
|
-
setupValue
|
|
306
|
+
setupValue(ctx2) {
|
|
307
307
|
if (ctx2.value.length)
|
|
308
308
|
return;
|
|
309
|
-
const inputs = dom.
|
|
309
|
+
const inputs = dom.getInputEls(ctx2);
|
|
310
310
|
const emptyValues = Array.from({ length: inputs.length }).fill("");
|
|
311
|
-
|
|
311
|
+
assignValue(ctx2, emptyValues);
|
|
312
312
|
},
|
|
313
|
-
focusInput
|
|
313
|
+
focusInput(ctx2) {
|
|
314
314
|
raf(() => {
|
|
315
315
|
if (ctx2.focusedIndex === -1)
|
|
316
316
|
return;
|
|
317
317
|
dom.getFocusedInputEl(ctx2)?.focus();
|
|
318
318
|
});
|
|
319
319
|
},
|
|
320
|
-
|
|
320
|
+
selectInputIfNeeded(ctx2) {
|
|
321
321
|
raf(() => {
|
|
322
322
|
if (ctx2.focusedIndex === -1)
|
|
323
323
|
return;
|
|
@@ -327,76 +327,69 @@ function machine(userContext) {
|
|
|
327
327
|
input.selectionEnd = length;
|
|
328
328
|
});
|
|
329
329
|
},
|
|
330
|
-
invokeOnComplete
|
|
330
|
+
invokeOnComplete(ctx2) {
|
|
331
331
|
if (!ctx2.isValueComplete)
|
|
332
332
|
return;
|
|
333
333
|
ctx2.onComplete?.({ value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
|
|
334
334
|
},
|
|
335
|
-
|
|
336
|
-
ctx2.onChange?.({ value: Array.from(ctx2.value) });
|
|
337
|
-
},
|
|
338
|
-
dispatchInputEvent: (ctx2) => {
|
|
339
|
-
const inputEl = dom.getHiddenInputEl(ctx2);
|
|
340
|
-
dispatchInputValueEvent(inputEl, { value: ctx2.valueAsString });
|
|
341
|
-
},
|
|
342
|
-
invokeOnInvalid: (ctx2, evt) => {
|
|
335
|
+
invokeOnInvalid(ctx2, evt) {
|
|
343
336
|
ctx2.onInvalid?.({ value: evt.value, index: ctx2.focusedIndex });
|
|
344
337
|
},
|
|
345
|
-
clearFocusedIndex
|
|
338
|
+
clearFocusedIndex(ctx2) {
|
|
346
339
|
ctx2.focusedIndex = -1;
|
|
347
340
|
},
|
|
348
|
-
|
|
349
|
-
assign(ctx2, evt.value);
|
|
350
|
-
},
|
|
351
|
-
setFocusedIndex: (ctx2, evt) => {
|
|
341
|
+
setFocusedIndex(ctx2, evt) {
|
|
352
342
|
ctx2.focusedIndex = evt.index;
|
|
353
343
|
},
|
|
354
|
-
|
|
355
|
-
|
|
344
|
+
setValue(ctx2, evt) {
|
|
345
|
+
set.value(ctx2, evt.value);
|
|
346
|
+
},
|
|
347
|
+
setFocusedValue(ctx2, evt) {
|
|
348
|
+
const nextValue = getNextValue(ctx2.focusedValue, evt.value);
|
|
349
|
+
set.valueAtIndex(ctx2, ctx2.focusedIndex, nextValue);
|
|
350
|
+
},
|
|
351
|
+
revertInputValue(ctx2) {
|
|
352
|
+
const inputEl = dom.getFocusedInputEl(ctx2);
|
|
353
|
+
dom.setValue(inputEl, ctx2.focusedValue);
|
|
356
354
|
},
|
|
357
355
|
syncInputValue(ctx2, evt) {
|
|
358
|
-
const
|
|
359
|
-
|
|
360
|
-
return;
|
|
361
|
-
input.value = ctx2.value[evt.index];
|
|
356
|
+
const inputEl = dom.getInputEl(ctx2, evt.index.toString());
|
|
357
|
+
dom.setValue(inputEl, ctx2.value[evt.index]);
|
|
362
358
|
},
|
|
363
359
|
syncInputElements(ctx2) {
|
|
364
|
-
const
|
|
365
|
-
|
|
366
|
-
|
|
360
|
+
const inputEls = dom.getInputEls(ctx2);
|
|
361
|
+
inputEls.forEach((inputEl, index) => {
|
|
362
|
+
dom.setValue(inputEl, ctx2.value[index]);
|
|
367
363
|
});
|
|
368
364
|
},
|
|
369
365
|
setPastedValue(ctx2, evt) {
|
|
370
366
|
raf(() => {
|
|
371
367
|
const startIndex = ctx2.focusedValue ? 1 : 0;
|
|
372
368
|
const value = evt.value.substring(startIndex, startIndex + ctx2.valueLength);
|
|
373
|
-
|
|
369
|
+
set.value(ctx2, value);
|
|
374
370
|
});
|
|
375
371
|
},
|
|
376
|
-
setValueAtIndex
|
|
377
|
-
|
|
372
|
+
setValueAtIndex(ctx2, evt) {
|
|
373
|
+
const nextValue = getNextValue(ctx2.focusedValue, evt.value);
|
|
374
|
+
set.valueAtIndex(ctx2, evt.index, nextValue);
|
|
378
375
|
},
|
|
379
|
-
clearValue
|
|
376
|
+
clearValue(ctx2) {
|
|
380
377
|
const nextValue = Array.from({ length: ctx2.valueLength }).fill("");
|
|
381
|
-
|
|
378
|
+
set.value(ctx2, nextValue);
|
|
382
379
|
},
|
|
383
|
-
clearFocusedValue
|
|
384
|
-
|
|
380
|
+
clearFocusedValue(ctx2) {
|
|
381
|
+
set.valueAtIndex(ctx2, ctx2.focusedIndex, "");
|
|
385
382
|
},
|
|
386
|
-
|
|
387
|
-
const input = dom.getFocusedInputEl(ctx2);
|
|
388
|
-
input.value = ctx2.focusedValue;
|
|
389
|
-
},
|
|
390
|
-
setFocusIndexToFirst: (ctx2) => {
|
|
383
|
+
setFocusIndexToFirst(ctx2) {
|
|
391
384
|
ctx2.focusedIndex = 0;
|
|
392
385
|
},
|
|
393
|
-
setNextFocusedIndex
|
|
386
|
+
setNextFocusedIndex(ctx2) {
|
|
394
387
|
ctx2.focusedIndex = Math.min(ctx2.focusedIndex + 1, ctx2.valueLength - 1);
|
|
395
388
|
},
|
|
396
|
-
setPrevFocusedIndex
|
|
389
|
+
setPrevFocusedIndex(ctx2) {
|
|
397
390
|
ctx2.focusedIndex = Math.max(ctx2.focusedIndex - 1, 0);
|
|
398
391
|
},
|
|
399
|
-
setLastValueFocusIndex
|
|
392
|
+
setLastValueFocusIndex(ctx2) {
|
|
400
393
|
raf(() => {
|
|
401
394
|
ctx2.focusedIndex = Math.min(ctx2.filledValueLength, ctx2.valueLength - 1);
|
|
402
395
|
});
|
|
@@ -414,8 +407,8 @@ function machine(userContext) {
|
|
|
414
407
|
requestFormSubmit(ctx2) {
|
|
415
408
|
if (!ctx2.name || !ctx2.isValueComplete)
|
|
416
409
|
return;
|
|
417
|
-
const
|
|
418
|
-
|
|
410
|
+
const inputEl = dom.getHiddenInputEl(ctx2);
|
|
411
|
+
inputEl?.form?.requestSubmit();
|
|
419
412
|
}
|
|
420
413
|
}
|
|
421
414
|
}
|
|
@@ -431,7 +424,7 @@ function isValidType(value, type) {
|
|
|
431
424
|
return true;
|
|
432
425
|
return !!REGEX[type]?.test(value);
|
|
433
426
|
}
|
|
434
|
-
function
|
|
427
|
+
function assignValue(ctx, value) {
|
|
435
428
|
const arr = Array.isArray(value) ? value : value.split("").filter(Boolean);
|
|
436
429
|
arr.forEach((value2, index) => {
|
|
437
430
|
ctx.value[index] = value2;
|
|
@@ -445,6 +438,23 @@ function getNextValue(current, next) {
|
|
|
445
438
|
nextValue = next[0];
|
|
446
439
|
return nextValue;
|
|
447
440
|
}
|
|
441
|
+
var invoke = {
|
|
442
|
+
change(ctx) {
|
|
443
|
+
ctx.onChange?.({ value: Array.from(ctx.value) });
|
|
444
|
+
const inputEl = dom.getHiddenInputEl(ctx);
|
|
445
|
+
dispatchInputValueEvent(inputEl, { value: ctx.valueAsString });
|
|
446
|
+
}
|
|
447
|
+
};
|
|
448
|
+
var set = {
|
|
449
|
+
value(ctx, values) {
|
|
450
|
+
assignValue(ctx, values);
|
|
451
|
+
invoke.change(ctx);
|
|
452
|
+
},
|
|
453
|
+
valueAtIndex(ctx, index, value) {
|
|
454
|
+
ctx.value[index] = value;
|
|
455
|
+
invoke.change(ctx);
|
|
456
|
+
}
|
|
457
|
+
};
|
|
448
458
|
export {
|
|
449
459
|
anatomy,
|
|
450
460
|
connect,
|
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.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 { type EventKeyMap, getEventKey, getNativeEvent, isModifiedEvent } from \"@zag-js/dom-event\"\nimport { ariaAttr, dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { invariant } from \"@zag-js/utils\"\nimport { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./pin-input.anatomy\"\nimport { dom } from \"./pin-input.dom\"\nimport type { PublicApi, Send, State } from \"./pin-input.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {\n const isValueComplete = state.context.isValueComplete\n const isInvalid = 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 value: state.context.value,\n valueAsString: state.context.valueAsString,\n isValueComplete: isValueComplete,\n\n setValue(value: string[]) {\n if (!Array.isArray(value)) {\n invariant(\"[pin-input/setValue] value must be an array\")\n }\n send({ type: \"SET_VALUE\", value })\n },\n\n clearValue() {\n send({ type: \"CLEAR_VALUE\" })\n },\n\n setValueAtIndex(index: number, value: string) {\n send({ type: \"SET_VALUE\", value, index })\n },\n\n focus,\n\n rootProps: normalize.element({\n dir: state.context.dir,\n ...parts.root.attrs,\n id: dom.getRootId(state.context),\n \"data-invalid\": dataAttr(isInvalid),\n \"data-disabled\": dataAttr(state.context.disabled),\n \"data-complete\": dataAttr(isValueComplete),\n }),\n\n labelProps: normalize.label({\n ...parts.label.attrs,\n htmlFor: dom.getHiddenInputId(state.context),\n id: dom.getLabelId(state.context),\n \"data-invalid\": dataAttr(isInvalid),\n \"data-disabled\": dataAttr(state.context.disabled),\n \"data-complete\": dataAttr(isValueComplete),\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 id: dom.getControlId(state.context),\n }),\n\n getInputProps({ index }: { index: number }) {\n const inputType = state.context.type === \"numeric\" ? \"tel\" : \"text\"\n return normalize.input({\n ...parts.input.attrs,\n disabled: state.context.disabled,\n \"data-disabled\": dataAttr(state.context.disabled),\n \"data-complete\": dataAttr(isValueComplete),\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(isInvalid),\n \"data-invalid\": dataAttr(isInvalid),\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 onChange(event) {\n const evt = getNativeEvent(event)\n const { value } = event.currentTarget\n if (evt.inputType === \"insertFromPaste\" || value.length > 2) {\n send({ type: \"PASTE\", value })\n event.preventDefault()\n return\n }\n\n if (evt.inputType === \"deleteContentBackward\") {\n send(\"BACKSPACE\")\n return\n }\n send({ type: \"INPUT\", value, index })\n },\n onKeyDown(event) {\n const evt = getNativeEvent(event)\n if (evt.isComposing || isModifiedEvent(evt)) return\n\n const keyMap: EventKeyMap = {\n Backspace() {\n send(\"BACKSPACE\")\n },\n Delete() {\n send(\"DELETE\")\n },\n ArrowLeft() {\n send(\"ARROW_LEFT\")\n },\n ArrowRight() {\n send(\"ARROW_RIGHT\")\n },\n Enter() {\n send(\"ENTER\")\n },\n }\n\n const key = getEventKey(event, { dir: state.context.dir })\n const exec = keyMap[key]\n\n if (exec) {\n exec(event)\n event.preventDefault()\n } else {\n if (key === \"Tab\") return\n send({ type: \"KEY_DOWN\", value: key, preventDefault: () => event.preventDefault() })\n }\n },\n onFocus() {\n send({ type: \"FOCUS\", index })\n },\n onBlur() {\n send({ type: \"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 getElements: (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.getElements(ctx)[ctx.focusedIndex],\n getFirstInputEl: (ctx: Ctx) => dom.getElements(ctx)[0],\n getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { dispatchInputValueEvent } from \"@zag-js/form-utils\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./pin-input.types\"\n\nconst { and, not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"pin-input\",\n initial: ctx.autoFocus ? \"focused\" : \"idle\",\n context: {\n value: [],\n focusedIndex: -1,\n placeholder: \"○\",\n otp: false,\n type: \"numeric\",\n ...ctx,\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 watch: {\n focusedIndex: [\"focusInput\", \"setInputSelection\"],\n value: [\"dispatchInputEvent\", \"syncInputElements\"],\n isValueComplete: [\"invokeOnComplete\", \"blurFocusedInputIfNeeded\"],\n },\n\n entry: ctx.autoFocus ? [\"setupValue\", \"setFocusIndexToFirst\"] : [\"setupValue\"],\n\n on: {\n SET_VALUE: [\n {\n guard: \"hasIndex\",\n actions: [\"setValueAtIndex\", \"invokeOnChange\"],\n },\n { actions: [\"setValue\", \"invokeOnChange\"] },\n ],\n CLEAR_VALUE: [\n {\n guard: \"isDisabled\",\n actions: [\"clearValue\", \"invokeOnChange\"],\n },\n {\n actions: [\"clearValue\", \"invokeOnChange\", \"setFocusIndexToFirst\"],\n },\n ],\n },\n\n states: {\n idle: {\n on: {\n FOCUS: {\n target: \"focused\",\n actions: \"setFocusedIndex\",\n },\n },\n },\n focused: {\n on: {\n INPUT: [\n {\n guard: and(\"isFinalValue\", \"isValidValue\"),\n actions: [\"setFocusedValue\", \"invokeOnChange\", \"syncInputValue\"],\n },\n {\n guard: \"isValidValue\",\n actions: [\"setFocusedValue\", \"invokeOnChange\", \"setNextFocusedIndex\", \"syncInputValue\"],\n },\n ],\n PASTE: [\n {\n guard: \"isValidValue\",\n actions: [\"setPastedValue\", \"invokeOnChange\", \"setLastValueFocusIndex\"],\n },\n { actions: [\"resetFocusedValue\", \"invokeOnChange\"] },\n ],\n BLUR: {\n target: \"idle\",\n actions: \"clearFocusedIndex\",\n },\n DELETE: {\n guard: \"hasValue\",\n actions: [\"clearFocusedValue\", \"invokeOnChange\"],\n },\n ARROW_LEFT: {\n actions: \"setPrevFocusedIndex\",\n },\n ARROW_RIGHT: {\n actions: \"setNextFocusedIndex\",\n },\n BACKSPACE: [\n {\n guard: \"hasValue\",\n actions: [\"clearFocusedValue\", \"invokeOnChange\"],\n },\n {\n actions: [\"setPrevFocusedIndex\", \"clearFocusedValue\", \"invokeOnChange\"],\n },\n ],\n ENTER: {\n guard: \"isValueComplete\",\n actions: \"requestFormSubmit\",\n },\n KEY_DOWN: {\n guard: not(\"isValidValue\"),\n actions: [\"preventDefault\", \"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 isValidValue: (ctx, evt) => {\n if (!ctx.pattern) return isValidType(evt.value, ctx.type)\n const regex = new RegExp(ctx.pattern, \"g\")\n return regex.test(evt.value)\n },\n isFinalValue: (ctx) => {\n return (\n ctx.filledValueLength + 1 === ctx.valueLength &&\n ctx.value.findIndex((v) => v.trim() === \"\") === ctx.focusedIndex\n )\n },\n isLastInputFocused: (ctx) => ctx.focusedIndex === ctx.valueLength - 1,\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 inputs = dom.getElements(ctx)\n const emptyValues = Array.from<string>({ length: inputs.length }).fill(\"\")\n assign(ctx, emptyValues)\n },\n focusInput: (ctx) => {\n raf(() => {\n if (ctx.focusedIndex === -1) return\n dom.getFocusedInputEl(ctx)?.focus()\n })\n },\n setInputSelection: (ctx) => {\n raf(() => {\n if (ctx.focusedIndex === -1) return\n const input = dom.getFocusedInputEl(ctx)\n const length = input.value.length\n input.selectionStart = ctx.selectOnFocus ? 0 : length\n input.selectionEnd = length\n })\n },\n invokeOnComplete: (ctx) => {\n if (!ctx.isValueComplete) return\n ctx.onComplete?.({ value: Array.from(ctx.value), valueAsString: ctx.valueAsString })\n },\n invokeOnChange: (ctx) => {\n ctx.onChange?.({ value: Array.from(ctx.value) })\n },\n dispatchInputEvent: (ctx) => {\n const inputEl = dom.getHiddenInputEl(ctx)\n dispatchInputValueEvent(inputEl, { value: ctx.valueAsString })\n },\n invokeOnInvalid: (ctx, evt) => {\n ctx.onInvalid?.({ value: evt.value, index: ctx.focusedIndex })\n },\n clearFocusedIndex: (ctx) => {\n ctx.focusedIndex = -1\n },\n setValue: (ctx, evt) => {\n assign(ctx, evt.value)\n },\n setFocusedIndex: (ctx, evt) => {\n ctx.focusedIndex = evt.index\n },\n setFocusedValue: (ctx, evt) => {\n ctx.value[ctx.focusedIndex] = getNextValue(ctx.focusedValue, evt.value)\n },\n syncInputValue(ctx, evt) {\n const input = dom.getInputEl(ctx, evt.index.toString())\n if (!input) return\n input.value = ctx.value[evt.index]\n },\n syncInputElements(ctx) {\n const inputs = dom.getElements(ctx)\n inputs.forEach((input, index) => {\n input.value = ctx.value[index]\n })\n },\n setPastedValue(ctx, evt) {\n raf(() => {\n const startIndex = ctx.focusedValue ? 1 : 0\n const value = evt.value.substring(startIndex, startIndex + ctx.valueLength)\n assign(ctx, value)\n })\n },\n setValueAtIndex: (ctx, evt) => {\n ctx.value[evt.index] = getNextValue(ctx.focusedValue, evt.value)\n },\n clearValue: (ctx) => {\n const nextValue = Array.from<string>({ length: ctx.valueLength }).fill(\"\")\n assign(ctx, nextValue)\n },\n clearFocusedValue: (ctx) => {\n ctx.value[ctx.focusedIndex] = \"\"\n },\n resetFocusedValue: (ctx) => {\n const input = dom.getFocusedInputEl(ctx)\n input.value = ctx.focusedValue\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 preventDefault(_, evt) {\n evt.preventDefault()\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 input = dom.getHiddenInputEl(ctx)\n input?.form?.requestSubmit()\n },\n },\n },\n )\n}\n\nconst REGEX = {\n numeric: /^[0-9]+$/,\n alphabetic: /^[A-Za-z]+$/,\n alphanumeric: /^[a-zA-Z0-9]+$/i,\n}\n\nfunction isValidType(value: string, type: MachineContext[\"type\"]) {\n if (!type) return true\n return !!REGEX[type]?.test(value)\n}\n\nfunction assign(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\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.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, isModifiedEvent, type EventKeyMap } from \"@zag-js/dom-event\"\nimport { ariaAttr, dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { invariant } from \"@zag-js/utils\"\nimport { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./pin-input.anatomy\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineApi, Send, State } from \"./pin-input.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const isValueComplete = state.context.isValueComplete\n const isInvalid = 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 value: state.context.value,\n valueAsString: state.context.valueAsString,\n isValueComplete: isValueComplete,\n\n setValue(value: string[]) {\n if (!Array.isArray(value)) {\n invariant(\"[pin-input/setValue] value must be an array\")\n }\n send({ type: \"SET_VALUE\", value })\n },\n\n clearValue() {\n send({ type: \"CLEAR_VALUE\" })\n },\n\n setValueAtIndex(index: number, value: string) {\n send({ type: \"SET_VALUE\", value, index })\n },\n\n focus,\n\n rootProps: normalize.element({\n dir: state.context.dir,\n ...parts.root.attrs,\n id: dom.getRootId(state.context),\n \"data-invalid\": dataAttr(isInvalid),\n \"data-disabled\": dataAttr(state.context.disabled),\n \"data-complete\": dataAttr(isValueComplete),\n }),\n\n labelProps: normalize.label({\n ...parts.label.attrs,\n htmlFor: dom.getHiddenInputId(state.context),\n id: dom.getLabelId(state.context),\n \"data-invalid\": dataAttr(isInvalid),\n \"data-disabled\": dataAttr(state.context.disabled),\n \"data-complete\": dataAttr(isValueComplete),\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 id: dom.getControlId(state.context),\n }),\n\n getInputProps({ index }: { index: number }) {\n const inputType = state.context.type === \"numeric\" ? \"tel\" : \"text\"\n return normalize.input({\n ...parts.input.attrs,\n disabled: state.context.disabled,\n \"data-disabled\": dataAttr(state.context.disabled),\n \"data-complete\": dataAttr(isValueComplete),\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(isInvalid),\n \"data-invalid\": dataAttr(isInvalid),\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 onChange(event) {\n const evt = getNativeEvent(event)\n const { value } = event.currentTarget\n if (evt.inputType === \"insertFromPaste\" || value.length > 2) {\n send({ type: \"PASTE\", value })\n event.preventDefault()\n return\n }\n\n if (evt.inputType === \"deleteContentBackward\") {\n send(\"BACKSPACE\")\n return\n }\n send({ type: \"INPUT\", value, index })\n },\n onKeyDown(event) {\n const evt = getNativeEvent(event)\n if (evt.isComposing || isModifiedEvent(evt)) return\n\n const keyMap: EventKeyMap = {\n Backspace() {\n send(\"BACKSPACE\")\n },\n Delete() {\n send(\"DELETE\")\n },\n ArrowLeft() {\n send(\"ARROW_LEFT\")\n },\n ArrowRight() {\n send(\"ARROW_RIGHT\")\n },\n Enter() {\n send(\"ENTER\")\n },\n }\n\n const key = getEventKey(event, { dir: state.context.dir })\n const exec = keyMap[key]\n\n if (exec) {\n exec(event)\n event.preventDefault()\n } else {\n if (key === \"Tab\") return\n send({ type: \"KEY_DOWN\", value: key, preventDefault: () => event.preventDefault() })\n }\n },\n onFocus() {\n send({ type: \"FOCUS\", index })\n },\n onBlur() {\n send({ type: \"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 { createMachine, guards } from \"@zag-js/core\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { dispatchInputValueEvent } from \"@zag-js/form-utils\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./pin-input.types\"\n\nconst { and, not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"pin-input\",\n initial: ctx.autoFocus ? \"focused\" : \"idle\",\n context: {\n value: [],\n focusedIndex: -1,\n placeholder: \"○\",\n otp: false,\n type: \"numeric\",\n ...ctx,\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 watch: {\n focusedIndex: [\"focusInput\", \"selectInputIfNeeded\"],\n value: [\"syncInputElements\"],\n isValueComplete: [\"invokeOnComplete\", \"blurFocusedInputIfNeeded\"],\n },\n\n entry: ctx.autoFocus ? [\"setupValue\", \"setFocusIndexToFirst\"] : [\"setupValue\"],\n\n on: {\n SET_VALUE: [\n {\n guard: \"hasIndex\",\n actions: [\"setValueAtIndex\"],\n },\n { actions: [\"setValue\"] },\n ],\n CLEAR_VALUE: [\n {\n guard: \"isDisabled\",\n actions: [\"clearValue\"],\n },\n {\n actions: [\"clearValue\", \"setFocusIndexToFirst\"],\n },\n ],\n },\n\n states: {\n idle: {\n on: {\n FOCUS: {\n target: \"focused\",\n actions: \"setFocusedIndex\",\n },\n },\n },\n focused: {\n on: {\n INPUT: [\n {\n guard: and(\"isFinalValue\", \"isValidValue\"),\n actions: [\"setFocusedValue\", \"syncInputValue\"],\n },\n {\n guard: \"isValidValue\",\n actions: [\"setFocusedValue\", \"setNextFocusedIndex\", \"syncInputValue\"],\n },\n ],\n PASTE: [\n {\n guard: \"isValidValue\",\n actions: [\"setPastedValue\", \"setLastValueFocusIndex\"],\n },\n { actions: [\"revertInputValue\"] },\n ],\n BLUR: {\n target: \"idle\",\n actions: \"clearFocusedIndex\",\n },\n DELETE: {\n guard: \"hasValue\",\n actions: [\"clearFocusedValue\"],\n },\n ARROW_LEFT: {\n actions: \"setPrevFocusedIndex\",\n },\n ARROW_RIGHT: {\n actions: \"setNextFocusedIndex\",\n },\n BACKSPACE: [\n {\n guard: \"hasValue\",\n actions: [\"clearFocusedValue\"],\n },\n {\n actions: [\"setPrevFocusedIndex\", \"clearFocusedValue\"],\n },\n ],\n ENTER: {\n guard: \"isValueComplete\",\n actions: \"requestFormSubmit\",\n },\n KEY_DOWN: {\n guard: not(\"isValidValue\"),\n actions: [\"preventDefault\", \"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 isValidValue(ctx, evt) {\n if (!ctx.pattern) return isValidType(evt.value, ctx.type)\n const regex = new RegExp(ctx.pattern, \"g\")\n return regex.test(evt.value)\n },\n isFinalValue(ctx) {\n return (\n ctx.filledValueLength + 1 === ctx.valueLength &&\n ctx.value.findIndex((v) => v.trim() === \"\") === ctx.focusedIndex\n )\n },\n isLastInputFocused: (ctx) => ctx.focusedIndex === ctx.valueLength - 1,\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 inputs = dom.getInputEls(ctx)\n const emptyValues = Array.from<string>({ length: inputs.length }).fill(\"\")\n assignValue(ctx, emptyValues)\n },\n focusInput(ctx) {\n raf(() => {\n if (ctx.focusedIndex === -1) return\n dom.getFocusedInputEl(ctx)?.focus()\n })\n },\n selectInputIfNeeded(ctx) {\n raf(() => {\n if (ctx.focusedIndex === -1) return\n const input = dom.getFocusedInputEl(ctx)\n const length = input.value.length\n input.selectionStart = ctx.selectOnFocus ? 0 : length\n input.selectionEnd = length\n })\n },\n invokeOnComplete(ctx) {\n if (!ctx.isValueComplete) return\n ctx.onComplete?.({ value: Array.from(ctx.value), valueAsString: ctx.valueAsString })\n },\n invokeOnInvalid(ctx, evt) {\n ctx.onInvalid?.({ value: evt.value, index: ctx.focusedIndex })\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 = ctx.focusedValue ? 1 : 0\n const value = evt.value.substring(startIndex, startIndex + ctx.valueLength)\n set.value(ctx, value)\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 preventDefault(_, evt) {\n evt.preventDefault()\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\nconst REGEX = {\n numeric: /^[0-9]+$/,\n alphabetic: /^[A-Za-z]+$/,\n alphanumeric: /^[a-zA-Z0-9]+$/i,\n}\n\nfunction isValidType(value: string, type: MachineContext[\"type\"]) {\n if (!type) return true\n return !!REGEX[type]?.test(value)\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\n}\n\nconst invoke = {\n change(ctx: MachineContext) {\n // callback\n ctx.onChange?.({ value: Array.from(ctx.value) })\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, values: string[]) {\n assignValue(ctx, values)\n invoke.change(ctx)\n },\n valueAtIndex(ctx: MachineContext, index: number, value: string) {\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.17.0",
|
|
4
4
|
"description": "Core logic for the pin-input widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -27,14 +27,14 @@
|
|
|
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/visually-hidden": "0.
|
|
35
|
-
"@zag-js/utils": "0.
|
|
36
|
-
"@zag-js/core": "0.
|
|
37
|
-
"@zag-js/types": "0.
|
|
30
|
+
"@zag-js/anatomy": "0.17.0",
|
|
31
|
+
"@zag-js/dom-query": "0.17.0",
|
|
32
|
+
"@zag-js/dom-event": "0.17.0",
|
|
33
|
+
"@zag-js/form-utils": "0.17.0",
|
|
34
|
+
"@zag-js/visually-hidden": "0.17.0",
|
|
35
|
+
"@zag-js/utils": "0.17.0",
|
|
36
|
+
"@zag-js/core": "0.17.0",
|
|
37
|
+
"@zag-js/types": "0.17.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"clean-package": "2.2.0"
|
package/src/index.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { anatomy } from "./pin-input.anatomy"
|
|
2
2
|
export { connect } from "./pin-input.connect"
|
|
3
3
|
export { machine } from "./pin-input.machine"
|
|
4
|
-
export type { UserDefinedContext as Context,
|
|
4
|
+
export type { UserDefinedContext as Context, MachineApi as Api } from "./pin-input.types"
|
package/src/pin-input.connect.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getEventKey, getNativeEvent, isModifiedEvent, type EventKeyMap } from "@zag-js/dom-event"
|
|
2
2
|
import { ariaAttr, dataAttr } from "@zag-js/dom-query"
|
|
3
3
|
import type { NormalizeProps, PropTypes } from "@zag-js/types"
|
|
4
4
|
import { invariant } from "@zag-js/utils"
|
|
5
5
|
import { visuallyHiddenStyle } from "@zag-js/visually-hidden"
|
|
6
6
|
import { parts } from "./pin-input.anatomy"
|
|
7
7
|
import { dom } from "./pin-input.dom"
|
|
8
|
-
import type {
|
|
8
|
+
import type { MachineApi, Send, State } from "./pin-input.types"
|
|
9
9
|
|
|
10
|
-
export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>):
|
|
10
|
+
export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
|
|
11
11
|
const isValueComplete = state.context.isValueComplete
|
|
12
12
|
const isInvalid = state.context.invalid
|
|
13
13
|
const focusedIndex = state.context.focusedIndex
|
package/src/pin-input.dom.ts
CHANGED
|
@@ -9,13 +9,13 @@ export const dom = createScope({
|
|
|
9
9
|
getControlId: (ctx: Ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`,
|
|
10
10
|
|
|
11
11
|
getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
|
|
12
|
-
|
|
12
|
+
getInputEls: (ctx: Ctx) => {
|
|
13
13
|
const ownerId = CSS.escape(dom.getRootId(ctx))
|
|
14
14
|
const selector = `input[data-ownedby=${ownerId}]`
|
|
15
15
|
return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)
|
|
16
16
|
},
|
|
17
17
|
getInputEl: (ctx: Ctx, id: string) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx, id)),
|
|
18
|
-
getFocusedInputEl: (ctx: Ctx) => dom.
|
|
19
|
-
getFirstInputEl: (ctx: Ctx) => dom.
|
|
18
|
+
getFocusedInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[ctx.focusedIndex],
|
|
19
|
+
getFirstInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[0],
|
|
20
20
|
getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),
|
|
21
21
|
})
|