npm - @zag-js/pin-input - Versions diffs - 0.53.0 → 0.55.0 - Mend

@zag-js/pin-input 0.53.0 → 0.55.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.

Files changed (9) hide show

package/dist/index.d.mts +4 -4
package/dist/index.d.ts +4 -4
package/dist/index.js +514 -1
package/dist/index.js.map +1 -1
package/dist/index.mjs +485 -1
package/dist/index.mjs.map +1 -1
package/package.json +8 -8
package/src/pin-input.connect.ts +48 -40
package/src/pin-input.types.ts +4 -4

package/dist/index.mjs.map CHANGED Viewed

	@@ -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, isComposingEvent, 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\n if (isComposingEvent(event)) return\n if (isModifierKey(event)) 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, isComposingEvent, 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 getRootProps() {\n return 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\n getLabelProps() {\n return 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\n getHiddenInputProps() {\n return 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\n getControlProps() {\n return normalize.element({\n ...parts.control.attrs,\n dir: state.context.dir,\n id: dom.getControlId(state.context),\n })\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\n if (isComposingEvent(event)) return\n if (isModifierKey(event)) 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 Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "0.53.0",
+  "version": "0.55.0",
   "description": "Core logic for the pin-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,13 +27,13 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.53.0",
-    "@zag-js/dom-query": "0.53.0",
-    "@zag-js/dom-event": "0.53.0",
-    "@zag-js/form-utils": "0.53.0",
-    "@zag-js/utils": "0.53.0",
-    "@zag-js/core": "0.53.0",
-    "@zag-js/types": "0.53.0"
+    "@zag-js/anatomy": "0.55.0",
+    "@zag-js/dom-query": "0.55.0",
+    "@zag-js/dom-event": "0.55.0",
+    "@zag-js/form-utils": "0.55.0",
+    "@zag-js/utils": "0.55.0",
+    "@zag-js/core": "0.55.0",
+    "@zag-js/types": "0.55.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/pin-input.connect.ts CHANGED Viewed

@@ -35,46 +35,54 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       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),
-    }),
+    getRootProps() {
+      return 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),
+      })
+    },
+    getLabelProps() {
+      return 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()
+        },
+      })
+    },
+    getHiddenInputProps() {
+      return 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,
+      })
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        dir: state.context.dir,
+        id: dom.getControlId(state.context),
+      })
+    },
     getInputProps(props) {
       const { index } = props

package/src/pin-input.types.ts CHANGED Viewed

@@ -194,9 +194,9 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
    * Function to focus the pin-input. This will focus the first input.
    */
   focus: () => void
-  rootProps: T["element"]
-  labelProps: T["label"]
-  hiddenInputProps: T["input"]
-  controlProps: T["element"]
+  getRootProps(): T["element"]
+  getLabelProps(): T["label"]
+  getHiddenInputProps(): T["input"]
+  getControlProps(): T["element"]
   getInputProps(props: InputProps): T["input"]
 }