@zag-js/pin-input 1.36.0 → 1.38.0

package/dist/pin-input.connect.js

@@ -123,12 +123,16 @@ function connect(service, normalize) {
     getInputProps(props) {
       const { index } = props;
       const inputType = prop("type") === "numeric" ? "tel" : "text";
+      const valueLength = computed("valueLength");
+      const tabbableIndex = focusedIndex !== -1 ? focusedIndex : Math.min(computed("filledValueLength"), valueLength - 1);
       return normalize.input({
         ...import_pin_input.parts.input.attrs,
         dir: prop("dir"),
         disabled,
+        tabIndex: index === tabbableIndex ? 0 : -1,
         "data-disabled": (0, import_dom_query.dataAttr)(disabled),
         "data-complete": (0, import_dom_query.dataAttr)(complete),
+        "data-filled": (0, import_dom_query.dataAttr)(context.get("value")[index] !== ""),
         id: dom.getInputId(scope, index.toString()),
         "data-index": index,
         "data-ownedby": dom.getRootId(scope),
@@ -136,6 +140,7 @@ function connect(service, normalize) {
         inputMode: prop("otp") || prop("type") === "numeric" ? "numeric" : "text",
         "aria-invalid": (0, import_dom_query.ariaAttr)(invalid),
         "data-invalid": (0, import_dom_query.dataAttr)(invalid),
+        enterKeyHint: index === valueLength - 1 ? "done" : "next",
         type: prop("mask") ? "password" : inputType,
         defaultValue: context.get("value")[index] || "",
         readOnly,
@@ -143,8 +148,10 @@ function connect(service, normalize) {
         autoComplete: prop("otp") ? "one-time-code" : "off",
         placeholder: focusedIndex === index ? "" : prop("placeholder"),
         onPaste(event) {
-          const pastedValue = event.clipboardData?.getData("text/plain");
+          let pastedValue = event.clipboardData?.getData("text/plain");
           if (!pastedValue) return;
+          const transformer = prop("sanitizeValue");
+          if (transformer) pastedValue = transformer(pastedValue);
           const isValid = (0, import_pin_input2.isValidValue)(pastedValue, prop("type"), prop("pattern"));
           if (!isValid) {
             send({ type: "VALUE.INVALID", value: pastedValue });
@@ -185,6 +192,10 @@ function connect(service, normalize) {
             send({ type: "INPUT.BACKSPACE" });
             return;
           }
+          if (evt.inputType === "deleteByCut") {
+            send({ type: "INPUT.DELETE" });
+            return;
+          }
           if (value === computed("focusedValue")) return;
           send({ type: "INPUT.CHANGE", value, index });
         },
@@ -192,6 +203,11 @@ function connect(service, normalize) {
           if (event.defaultPrevented) return;
           if ((0, import_dom_query.isComposingEvent)(event)) return;
           if ((0, import_dom_query.isModifierKey)(event)) return;
+          if (event.key.length === 1 && computed("focusedValue") === event.key) {
+            event.preventDefault();
+            send({ type: "INPUT.ADVANCE" });
+            return;
+          }
           const keyMap = {
             Backspace() {
               send({ type: "INPUT.BACKSPACE" });
@@ -207,6 +223,12 @@ function connect(service, normalize) {
             },
             Enter() {
               send({ type: "INPUT.ENTER" });
+            },
+            Home() {
+              send({ type: "INPUT.HOME" });
+            },
+            End() {
+              send({ type: "INPUT.END" });
             }
           };
           const exec = keyMap[(0, import_dom_query.getEventKey)(event, {

package/dist/pin-input.connect.mjs

@@ -99,12 +99,16 @@ function connect(service, normalize) {
     getInputProps(props) {
       const { index } = props;
       const inputType = prop("type") === "numeric" ? "tel" : "text";
+      const valueLength = computed("valueLength");
+      const tabbableIndex = focusedIndex !== -1 ? focusedIndex : Math.min(computed("filledValueLength"), valueLength - 1);
       return normalize.input({
         ...parts.input.attrs,
         dir: prop("dir"),
         disabled,
+        tabIndex: index === tabbableIndex ? 0 : -1,
         "data-disabled": dataAttr(disabled),
         "data-complete": dataAttr(complete),
+        "data-filled": dataAttr(context.get("value")[index] !== ""),
         id: dom.getInputId(scope, index.toString()),
         "data-index": index,
         "data-ownedby": dom.getRootId(scope),
@@ -112,6 +116,7 @@ function connect(service, normalize) {
         inputMode: prop("otp") || prop("type") === "numeric" ? "numeric" : "text",
         "aria-invalid": ariaAttr(invalid),
         "data-invalid": dataAttr(invalid),
+        enterKeyHint: index === valueLength - 1 ? "done" : "next",
         type: prop("mask") ? "password" : inputType,
         defaultValue: context.get("value")[index] || "",
         readOnly,
@@ -119,8 +124,10 @@ function connect(service, normalize) {
         autoComplete: prop("otp") ? "one-time-code" : "off",
         placeholder: focusedIndex === index ? "" : prop("placeholder"),
         onPaste(event) {
-          const pastedValue = event.clipboardData?.getData("text/plain");
+          let pastedValue = event.clipboardData?.getData("text/plain");
           if (!pastedValue) return;
+          const transformer = prop("sanitizeValue");
+          if (transformer) pastedValue = transformer(pastedValue);
           const isValid = isValidValue(pastedValue, prop("type"), prop("pattern"));
           if (!isValid) {
             send({ type: "VALUE.INVALID", value: pastedValue });
@@ -161,6 +168,10 @@ function connect(service, normalize) {
             send({ type: "INPUT.BACKSPACE" });
             return;
           }
+          if (evt.inputType === "deleteByCut") {
+            send({ type: "INPUT.DELETE" });
+            return;
+          }
           if (value === computed("focusedValue")) return;
           send({ type: "INPUT.CHANGE", value, index });
         },
@@ -168,6 +179,11 @@ function connect(service, normalize) {
           if (event.defaultPrevented) return;
           if (isComposingEvent(event)) return;
           if (isModifierKey(event)) return;
+          if (event.key.length === 1 && computed("focusedValue") === event.key) {
+            event.preventDefault();
+            send({ type: "INPUT.ADVANCE" });
+            return;
+          }
           const keyMap = {
             Backspace() {
               send({ type: "INPUT.BACKSPACE" });
@@ -183,6 +199,12 @@ function connect(service, normalize) {
             },
             Enter() {
               send({ type: "INPUT.ENTER" });
+            },
+            Home() {
+              send({ type: "INPUT.HOME" });
+            },
+            End() {
+              send({ type: "INPUT.END" });
             }
           };
           const exec = keyMap[getEventKey(event, {

package/dist/pin-input.machine.js

@@ -98,7 +98,7 @@ var machine = createMachine({
       action(["syncInputElements", "dispatchInputEvent"]);
     });
     track([() => computed("isValueComplete")], () => {
-      action(["invokeOnComplete", "blurFocusedInputIfNeeded"]);
+      action(["invokeOnComplete", "blurFocusedInputIfNeeded", "autoSubmitIfNeeded"]);
     });
   },
   on: {
@@ -125,13 +125,16 @@ var machine = createMachine({
     focused: {
       on: {
         "INPUT.CHANGE": {
-          actions: ["setFocusedValue", "syncInputValue", "setNextFocusedIndex"]
+          actions: ["setFocusedValue", "syncInputValue", "advanceFocusedIndex"]
+        },
+        "INPUT.ADVANCE": {
+          actions: ["advanceFocusedIndex"]
         },
         "INPUT.PASTE": {
           actions: ["setPastedValue", "setLastValueFocusIndex"]
         },
         "INPUT.FOCUS": {
-          actions: ["setFocusedIndex"]
+          actions: ["setFocusedIndex", "focusInput"]
         },
         "INPUT.BLUR": {
           target: "idle",
@@ -147,10 +150,16 @@ var machine = createMachine({
         "INPUT.ARROW_RIGHT": {
           actions: ["setNextFocusedIndex"]
         },
+        "INPUT.HOME": {
+          actions: ["setFocusIndexToFirst"]
+        },
+        "INPUT.END": {
+          actions: ["setFocusIndexToLast"]
+        },
         "INPUT.BACKSPACE": [
           {
             guard: "hasValue",
-            actions: ["clearFocusedValue"]
+            actions: ["clearFocusedValue", "setPrevFocusedIndex"]
           },
           {
             actions: ["setPrevFocusedIndex", "clearFocusedValue"]
@@ -186,7 +195,9 @@ var machine = createMachine({
       focusInput({ context, scope }) {
         const focusedIndex = context.get("focusedIndex");
         if (focusedIndex === -1) return;
-        dom.getInputElAtIndex(scope, focusedIndex)?.focus({ preventScroll: true });
+        queueMicrotask(() => {
+          dom.getInputElAtIndex(scope, focusedIndex)?.focus({ preventScroll: true });
+        });
       },
       selectInputIfNeeded({ context, prop, scope }) {
         const focusedIndex = context.get("focusedIndex");
@@ -211,8 +222,9 @@ var machine = createMachine({
       clearFocusedIndex({ context }) {
         context.set("focusedIndex", -1);
       },
-      setFocusedIndex({ context, event }) {
-        context.set("focusedIndex", event.index);
+      setFocusedIndex({ context, event, computed }) {
+        const maxIndex = Math.min(computed("filledValueLength"), computed("valueLength") - 1);
+        context.set("focusedIndex", Math.min(event.index, maxIndex));
       },
       setValue({ context, event }) {
         const value = fill(event.value, context.get("count"));
@@ -270,14 +282,25 @@ var machine = createMachine({
       clearFocusedValue({ context, computed }) {
         const focusedIndex = context.get("focusedIndex");
         if (focusedIndex === -1) return;
-        context.set("value", (0, import_utils.setValueAtIndex)(computed("_value"), focusedIndex, ""));
+        const value = [...computed("_value")];
+        value.splice(focusedIndex, 1);
+        value.push("");
+        context.set("value", value);
       },
       setFocusIndexToFirst({ context }) {
         context.set("focusedIndex", 0);
       },
-      setNextFocusedIndex({ context, computed }) {
+      setFocusIndexToLast({ context, computed }) {
+        context.set("focusedIndex", Math.max(computed("filledValueLength") - 1, 0));
+      },
+      advanceFocusedIndex({ context, computed }) {
         context.set("focusedIndex", Math.min(context.get("focusedIndex") + 1, computed("valueLength") - 1));
       },
+      setNextFocusedIndex({ context, computed }) {
+        const nextIndex = context.get("focusedIndex") + 1;
+        const maxIndex = Math.min(computed("filledValueLength"), computed("valueLength") - 1);
+        context.set("focusedIndex", Math.min(nextIndex, maxIndex));
+      },
       setPrevFocusedIndex({ context }) {
         context.set("focusedIndex", Math.max(context.get("focusedIndex") - 1, 0));
       },
@@ -286,8 +309,8 @@ var machine = createMachine({
           context.set("focusedIndex", Math.min(computed("filledValueLength"), computed("valueLength") - 1));
         });
       },
-      blurFocusedInputIfNeeded({ context, prop, scope }) {
-        if (!prop("blurOnComplete")) return;
+      blurFocusedInputIfNeeded({ context, computed, prop, scope }) {
+        if (!prop("blurOnComplete") || !computed("isValueComplete")) return;
         (0, import_dom_query.raf)(() => {
           dom.getInputElAtIndex(scope, context.get("focusedIndex"))?.blur();
         });
@@ -296,6 +319,11 @@ var machine = createMachine({
         if (!prop("name") || !computed("isValueComplete")) return;
         const inputEl = dom.getHiddenInputEl(scope);
         inputEl?.form?.requestSubmit();
+      },
+      autoSubmitIfNeeded({ computed, prop, scope }) {
+        if (!prop("autoSubmit") || !computed("isValueComplete")) return;
+        const inputEl = dom.getHiddenInputEl(scope);
+        inputEl?.form?.requestSubmit();
       }
     }
   }

package/dist/pin-input.machine.mjs

@@ -64,7 +64,7 @@ var machine = createMachine({
       action(["syncInputElements", "dispatchInputEvent"]);
     });
     track([() => computed("isValueComplete")], () => {
-      action(["invokeOnComplete", "blurFocusedInputIfNeeded"]);
+      action(["invokeOnComplete", "blurFocusedInputIfNeeded", "autoSubmitIfNeeded"]);
     });
   },
   on: {
@@ -91,13 +91,16 @@ var machine = createMachine({
     focused: {
       on: {
         "INPUT.CHANGE": {
-          actions: ["setFocusedValue", "syncInputValue", "setNextFocusedIndex"]
+          actions: ["setFocusedValue", "syncInputValue", "advanceFocusedIndex"]
+        },
+        "INPUT.ADVANCE": {
+          actions: ["advanceFocusedIndex"]
         },
         "INPUT.PASTE": {
           actions: ["setPastedValue", "setLastValueFocusIndex"]
         },
         "INPUT.FOCUS": {
-          actions: ["setFocusedIndex"]
+          actions: ["setFocusedIndex", "focusInput"]
         },
         "INPUT.BLUR": {
           target: "idle",
@@ -113,10 +116,16 @@ var machine = createMachine({
         "INPUT.ARROW_RIGHT": {
           actions: ["setNextFocusedIndex"]
         },
+        "INPUT.HOME": {
+          actions: ["setFocusIndexToFirst"]
+        },
+        "INPUT.END": {
+          actions: ["setFocusIndexToLast"]
+        },
         "INPUT.BACKSPACE": [
           {
             guard: "hasValue",
-            actions: ["clearFocusedValue"]
+            actions: ["clearFocusedValue", "setPrevFocusedIndex"]
           },
           {
             actions: ["setPrevFocusedIndex", "clearFocusedValue"]
@@ -152,7 +161,9 @@ var machine = createMachine({
       focusInput({ context, scope }) {
         const focusedIndex = context.get("focusedIndex");
         if (focusedIndex === -1) return;
-        dom.getInputElAtIndex(scope, focusedIndex)?.focus({ preventScroll: true });
+        queueMicrotask(() => {
+          dom.getInputElAtIndex(scope, focusedIndex)?.focus({ preventScroll: true });
+        });
       },
       selectInputIfNeeded({ context, prop, scope }) {
         const focusedIndex = context.get("focusedIndex");
@@ -177,8 +188,9 @@ var machine = createMachine({
       clearFocusedIndex({ context }) {
         context.set("focusedIndex", -1);
       },
-      setFocusedIndex({ context, event }) {
-        context.set("focusedIndex", event.index);
+      setFocusedIndex({ context, event, computed }) {
+        const maxIndex = Math.min(computed("filledValueLength"), computed("valueLength") - 1);
+        context.set("focusedIndex", Math.min(event.index, maxIndex));
       },
       setValue({ context, event }) {
         const value = fill(event.value, context.get("count"));
@@ -236,14 +248,25 @@ var machine = createMachine({
       clearFocusedValue({ context, computed }) {
         const focusedIndex = context.get("focusedIndex");
         if (focusedIndex === -1) return;
-        context.set("value", setValueAtIndex(computed("_value"), focusedIndex, ""));
+        const value = [...computed("_value")];
+        value.splice(focusedIndex, 1);
+        value.push("");
+        context.set("value", value);
       },
       setFocusIndexToFirst({ context }) {
         context.set("focusedIndex", 0);
       },
-      setNextFocusedIndex({ context, computed }) {
+      setFocusIndexToLast({ context, computed }) {
+        context.set("focusedIndex", Math.max(computed("filledValueLength") - 1, 0));
+      },
+      advanceFocusedIndex({ context, computed }) {
         context.set("focusedIndex", Math.min(context.get("focusedIndex") + 1, computed("valueLength") - 1));
       },
+      setNextFocusedIndex({ context, computed }) {
+        const nextIndex = context.get("focusedIndex") + 1;
+        const maxIndex = Math.min(computed("filledValueLength"), computed("valueLength") - 1);
+        context.set("focusedIndex", Math.min(nextIndex, maxIndex));
+      },
       setPrevFocusedIndex({ context }) {
         context.set("focusedIndex", Math.max(context.get("focusedIndex") - 1, 0));
       },
@@ -252,8 +275,8 @@ var machine = createMachine({
           context.set("focusedIndex", Math.min(computed("filledValueLength"), computed("valueLength") - 1));
         });
       },
-      blurFocusedInputIfNeeded({ context, prop, scope }) {
-        if (!prop("blurOnComplete")) return;
+      blurFocusedInputIfNeeded({ context, computed, prop, scope }) {
+        if (!prop("blurOnComplete") || !computed("isValueComplete")) return;
         raf(() => {
           dom.getInputElAtIndex(scope, context.get("focusedIndex"))?.blur();
         });
@@ -262,6 +285,11 @@ var machine = createMachine({
         if (!prop("name") || !computed("isValueComplete")) return;
         const inputEl = dom.getHiddenInputEl(scope);
         inputEl?.form?.requestSubmit();
+      },
+      autoSubmitIfNeeded({ computed, prop, scope }) {
+        if (!prop("autoSubmit") || !computed("isValueComplete")) return;
+        const inputEl = dom.getHiddenInputEl(scope);
+        inputEl?.form?.requestSubmit();
       }
     }
   }

package/dist/pin-input.props.js

@@ -28,6 +28,7 @@ var import_types = require("@zag-js/types");
 var import_utils = require("@zag-js/utils");
 var props = (0, import_types.createProps)()([
   "autoFocus",
+  "autoSubmit",
   "blurOnComplete",
   "count",
   "defaultValue",
@@ -44,6 +45,7 @@ var props = (0, import_types.createProps)()([
   "onValueComplete",
   "onValueInvalid",
   "otp",
+  "sanitizeValue",
   "pattern",
   "placeholder",
   "readOnly",

package/dist/pin-input.props.mjs

@@ -3,6 +3,7 @@ import { createProps } from "@zag-js/types";
 import { createSplitProps } from "@zag-js/utils";
 var props = createProps()([
   "autoFocus",
+  "autoSubmit",
   "blurOnComplete",
   "count",
   "defaultValue",
@@ -19,6 +20,7 @@ var props = createProps()([
   "onValueComplete",
   "onValueInvalid",
   "otp",
+  "sanitizeValue",
   "pattern",
   "placeholder",
   "readOnly",

package/dist/pin-input.types.d.mts

@@ -96,6 +96,10 @@ interface PinInputProps extends DirectionProperty, CommonProperties {
      * If `true`, the input's value will be masked just like `type=password`
      */
     mask?: boolean | undefined;
+    /**
+     * Whether to auto-submit the owning form when all inputs are filled.
+     */
+    autoSubmit?: boolean | undefined;
     /**
      * Whether to blur the input when the value is complete
      */
@@ -104,6 +108,12 @@ interface PinInputProps extends DirectionProperty, CommonProperties {
      * Whether to select input value when input is focused
      */
     selectOnFocus?: boolean | undefined;
+    /**
+     * Function to sanitize pasted values before validation.
+     * Useful for stripping dashes, spaces, or other formatting.
+     * @example (value) => value.replace(/-/g, "")
+     */
+    sanitizeValue?: ((value: string) => string) | undefined;
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
      */

package/dist/pin-input.types.d.ts

@@ -96,6 +96,10 @@ interface PinInputProps extends DirectionProperty, CommonProperties {
      * If `true`, the input's value will be masked just like `type=password`
      */
     mask?: boolean | undefined;
+    /**
+     * Whether to auto-submit the owning form when all inputs are filled.
+     */
+    autoSubmit?: boolean | undefined;
     /**
      * Whether to blur the input when the value is complete
      */
@@ -104,6 +108,12 @@ interface PinInputProps extends DirectionProperty, CommonProperties {
      * Whether to select input value when input is focused
      */
     selectOnFocus?: boolean | undefined;
+    /**
+     * Function to sanitize pasted values before validation.
+     * Useful for stripping dashes, spaces, or other formatting.
+     * @example (value) => value.replace(/-/g, "")
+     */
+    sanitizeValue?: ((value: string) => string) | undefined;
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
      */

package/package.json

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