@zag-js/pin-input 0.21.0 → 0.23.0

package/src/pin-input.connect.ts

@@ -1,11 +1,12 @@
 import { getEventKey, getNativeEvent, isModifiedEvent, type EventKeyMap } from "@zag-js/dom-event"
-import { ariaAttr, dataAttr } from "@zag-js/dom-query"
+import { ariaAttr, dataAttr, getBeforeInputValue } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { invariant } from "@zag-js/utils"
 import { visuallyHiddenStyle } from "@zag-js/visually-hidden"
 import { parts } from "./pin-input.anatomy"
 import { dom } from "./pin-input.dom"
 import type { MachineApi, Send, State } from "./pin-input.types"
+import { isValidValue } from "./pin-input.utils"
 
 export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const isValueComplete = state.context.isValueComplete
@@ -22,19 +23,19 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     valueAsString: state.context.valueAsString,
     isValueComplete: isValueComplete,
 
-    setValue(value: string[]) {
+    setValue(value) {
       if (!Array.isArray(value)) {
         invariant("[pin-input/setValue] value must be an array")
       }
-      send({ type: "SET_VALUE", value })
+      send({ type: "VALUE.SET", value })
     },
 
     clearValue() {
-      send({ type: "CLEAR_VALUE" })
+      send({ type: "VALUE.CLEAR" })
     },
 
-    setValueAtIndex(index: number, value: string) {
-      send({ type: "SET_VALUE", value, index })
+    setValueAtIndex(index, value) {
+      send({ type: "VALUE.SET", value, index })
     },
 
     focus,
@@ -50,12 +51,13 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     labelProps: normalize.label({
       ...parts.label.attrs,
+      dir: state.context.dir,
       htmlFor: dom.getHiddenInputId(state.context),
       id: dom.getLabelId(state.context),
       "data-invalid": dataAttr(isInvalid),
       "data-disabled": dataAttr(state.context.disabled),
       "data-complete": dataAttr(isValueComplete),
-      onClick: (event) => {
+      onClick(event) {
         event.preventDefault()
         focus()
       },
@@ -75,13 +77,16 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     controlProps: normalize.element({
       ...parts.control.attrs,
+      dir: state.context.dir,
       id: dom.getControlId(state.context),
     }),
 
-    getInputProps({ index }: { index: number }) {
+    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(isValueComplete),
@@ -96,59 +101,69 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         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()
+            }
+          } catch {
+            // noop
+          }
+        },
         onChange(event) {
           const evt = getNativeEvent(event)
           const { value } = event.currentTarget
+
           if (evt.inputType === "insertFromPaste" || value.length > 2) {
-            send({ type: "PASTE", value })
+            send({ type: "INPUT.PASTE", value })
             event.preventDefault()
             return
           }
 
           if (evt.inputType === "deleteContentBackward") {
-            send("BACKSPACE")
+            send("INPUT.BACKSPACE")
             return
           }
-          send({ type: "INPUT", value, index })
+
+          send({ type: "INPUT.CHANGE", value, index })
         },
         onKeyDown(event) {
           const evt = getNativeEvent(event)
-          if (evt.isComposing || isModifiedEvent(evt)) return
+          if (isModifiedEvent(evt)) return
 
           const keyMap: EventKeyMap = {
             Backspace() {
-              send("BACKSPACE")
+              send("INPUT.BACKSPACE")
             },
             Delete() {
-              send("DELETE")
+              send("INPUT.DELETE")
             },
             ArrowLeft() {
-              send("ARROW_LEFT")
+              send("INPUT.ARROW_LEFT")
             },
             ArrowRight() {
-              send("ARROW_RIGHT")
+              send("INPUT.ARROW_RIGHT")
             },
             Enter() {
-              send("ENTER")
+              send("INPUT.ENTER")
             },
           }
 
-          const key = getEventKey(event, { dir: state.context.dir })
-          const exec = keyMap[key]
+          const exec = keyMap[getEventKey(event, state.context)]
 
           if (exec) {
             exec(event)
             event.preventDefault()
-          } else {
-            if (key === "Tab") return
-            send({ type: "KEY_DOWN", value: key, preventDefault: () => event.preventDefault() })
           }
         },
         onFocus() {
-          send({ type: "FOCUS", index })
+          send({ type: "INPUT.FOCUS", index })
         },
         onBlur() {
-          send({ type: "BLUR", index })
+          send({ type: "INPUT.BLUR", index })
         },
       })
     },

package/src/pin-input.machine.ts

@@ -1,18 +1,16 @@
-import { createMachine, guards } from "@zag-js/core"
+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"
 import { dom } from "./pin-input.dom"
 import type { MachineContext, MachineState, UserDefinedContext } from "./pin-input.types"
 
-const { and, not } = guards
-
 export function machine(userContext: UserDefinedContext) {
   const ctx = compact(userContext)
   return createMachine<MachineContext, MachineState>(
     {
       id: "pin-input",
-      initial: ctx.autoFocus ? "focused" : "idle",
+      initial: "idle",
       context: {
         value: [],
         focusedIndex: -1,
@@ -31,40 +29,40 @@ export function machine(userContext: UserDefinedContext) {
         filledValueLength: (ctx) => ctx.value.filter((v) => v?.trim() !== "").length,
         isValueComplete: (ctx) => ctx.valueLength === ctx.filledValueLength,
         valueAsString: (ctx) => ctx.value.join(""),
-        focusedValue: (ctx) => ctx.value[ctx.focusedIndex],
+        focusedValue: (ctx) => ctx.value[ctx.focusedIndex] || "",
       },
 
+      entry: choose([
+        {
+          guard: "autoFocus",
+          actions: ["setupValue", "setFocusIndexToFirst"],
+        },
+        { actions: ["setupValue"] },
+      ]),
+
       watch: {
         focusedIndex: ["focusInput", "selectInputIfNeeded"],
         value: ["syncInputElements"],
         isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"],
       },
 
-      entry: ctx.autoFocus ? ["setupValue", "setFocusIndexToFirst"] : ["setupValue"],
-
       on: {
-        SET_VALUE: [
+        "VALUE.SET": [
           {
             guard: "hasIndex",
             actions: ["setValueAtIndex"],
           },
           { actions: ["setValue"] },
         ],
-        CLEAR_VALUE: [
-          {
-            guard: "isDisabled",
-            actions: ["clearValue"],
-          },
-          {
-            actions: ["clearValue", "setFocusIndexToFirst"],
-          },
-        ],
+        "VALUE.CLEAR": {
+          actions: ["clearValue", "setFocusIndexToFirst"],
+        },
       },
 
       states: {
         idle: {
           on: {
-            FOCUS: {
+            "INPUT.FOCUS": {
               target: "focused",
               actions: "setFocusedIndex",
             },
@@ -72,38 +70,33 @@ export function machine(userContext: UserDefinedContext) {
         },
         focused: {
           on: {
-            INPUT: [
+            "INPUT.CHANGE": [
               {
-                guard: and("isFinalValue", "isValidValue"),
+                guard: "isFinalValue",
                 actions: ["setFocusedValue", "syncInputValue"],
               },
               {
-                guard: "isValidValue",
                 actions: ["setFocusedValue", "setNextFocusedIndex", "syncInputValue"],
               },
             ],
-            PASTE: [
-              {
-                guard: "isValidValue",
-                actions: ["setPastedValue", "setLastValueFocusIndex"],
-              },
-              { actions: ["revertInputValue"] },
-            ],
-            BLUR: {
+            "INPUT.PASTE": {
+              actions: ["setPastedValue", "setLastValueFocusIndex"],
+            },
+            "INPUT.BLUR": {
               target: "idle",
               actions: "clearFocusedIndex",
             },
-            DELETE: {
+            "INPUT.DELETE": {
               guard: "hasValue",
-              actions: ["clearFocusedValue"],
+              actions: "clearFocusedValue",
             },
-            ARROW_LEFT: {
+            "INPUT.ARROW_LEFT": {
               actions: "setPrevFocusedIndex",
             },
-            ARROW_RIGHT: {
+            "INPUT.ARROW_RIGHT": {
               actions: "setNextFocusedIndex",
             },
-            BACKSPACE: [
+            "INPUT.BACKSPACE": [
               {
                 guard: "hasValue",
                 actions: ["clearFocusedValue"],
@@ -112,13 +105,12 @@ export function machine(userContext: UserDefinedContext) {
                 actions: ["setPrevFocusedIndex", "clearFocusedValue"],
               },
             ],
-            ENTER: {
+            "INPUT.ENTER": {
               guard: "isValueComplete",
               actions: "requestFormSubmit",
             },
-            KEY_DOWN: {
-              guard: not("isValidValue"),
-              actions: ["preventDefault", "invokeOnInvalid"],
+            "VALUE.INVALID": {
+              actions: "invokeOnInvalid",
             },
           },
         },
@@ -130,41 +122,27 @@ export function machine(userContext: UserDefinedContext) {
         isValueEmpty: (_ctx, evt) => evt.value === "",
         hasValue: (ctx) => ctx.value[ctx.focusedIndex] !== "",
         isValueComplete: (ctx) => ctx.isValueComplete,
-        isValidValue(ctx, evt) {
-          if (!ctx.pattern) return isValidType(evt.value, ctx.type)
-          const regex = new RegExp(ctx.pattern, "g")
-          return regex.test(evt.value)
-        },
-        isFinalValue(ctx) {
-          return (
-            ctx.filledValueLength + 1 === ctx.valueLength &&
-            ctx.value.findIndex((v) => v.trim() === "") === ctx.focusedIndex
-          )
-        },
-        isLastInputFocused: (ctx) => ctx.focusedIndex === ctx.valueLength - 1,
+        isFinalValue: (ctx) =>
+          ctx.filledValueLength + 1 === ctx.valueLength &&
+          ctx.value.findIndex((v) => v.trim() === "") === ctx.focusedIndex,
         hasIndex: (_ctx, evt) => evt.index !== undefined,
         isDisabled: (ctx) => !!ctx.disabled,
       },
       actions: {
         setupValue(ctx) {
           if (ctx.value.length) return
-          const inputs = dom.getInputEls(ctx)
-          const emptyValues = Array.from<string>({ length: inputs.length }).fill("")
+          const inputEls = dom.getInputEls(ctx)
+          const emptyValues = Array.from<string>({ length: inputEls.length }).fill("")
           assignValue(ctx, emptyValues)
         },
         focusInput(ctx) {
-          raf(() => {
-            if (ctx.focusedIndex === -1) return
-            dom.getFocusedInputEl(ctx)?.focus()
-          })
+          if (ctx.focusedIndex === -1) return
+          dom.getFocusedInputEl(ctx)?.focus({ preventScroll: true })
         },
         selectInputIfNeeded(ctx) {
+          if (!ctx.selectOnFocus || ctx.focusedIndex === -1) return
           raf(() => {
-            if (ctx.focusedIndex === -1) return
-            const input = dom.getFocusedInputEl(ctx)
-            const length = input.value.length
-            input.selectionStart = ctx.selectOnFocus ? 0 : length
-            input.selectionEnd = length
+            dom.getFocusedInputEl(ctx)?.select()
           })
         },
         invokeOnComplete(ctx) {
@@ -239,9 +217,6 @@ export function machine(userContext: UserDefinedContext) {
             ctx.focusedIndex = Math.min(ctx.filledValueLength, ctx.valueLength - 1)
           })
         },
-        preventDefault(_, evt) {
-          evt.preventDefault()
-        },
         blurFocusedInputIfNeeded(ctx) {
           if (!ctx.blurOnComplete) return
           raf(() => {
@@ -258,17 +233,6 @@ export function machine(userContext: UserDefinedContext) {
   )
 }
 
-const REGEX = {
-  numeric: /^[0-9]+$/,
-  alphabetic: /^[A-Za-z]+$/,
-  alphanumeric: /^[a-zA-Z0-9]+$/i,
-}
-
-function isValidType(value: string, type: MachineContext["type"]) {
-  if (!type) return true
-  return !!REGEX[type]?.test(value)
-}
-
 function assignValue(ctx: MachineContext, value: string | string[]) {
   const arr = Array.isArray(value) ? value : value.split("").filter(Boolean)
   arr.forEach((value, index) => {
@@ -280,7 +244,7 @@ function getNextValue(current: string, next: string) {
   let nextValue = next
   if (current[0] === next[0]) nextValue = next[1]
   else if (current[0] === next[1]) nextValue = next[0]
-  return nextValue
+  return nextValue.split("")[nextValue.length - 1]
 }
 
 const invoke = {

package/src/pin-input.utils.ts

@@ -0,0 +1,18 @@
+import type { MachineContext } from "./pin-input.types"
+
+const REGEX = {
+  numeric: /^[0-9]+$/,
+  alphabetic: /^[A-Za-z]+$/,
+  alphanumeric: /^[a-zA-Z0-9]+$/i,
+}
+
+export function isValidType(ctx: MachineContext, value: string) {
+  if (!ctx.type) return true
+  return !!REGEX[ctx.type]?.test(value)
+}
+
+export function isValidValue(ctx: MachineContext, value: string) {
+  if (!ctx.pattern) return isValidType(ctx, value)
+  const regex = new RegExp(ctx.pattern, "g")
+  return regex.test(value)
+}