@zag-js/pin-input 1.0.2 → 1.1.0

package/dist/index.d.mts

@@ -122,12 +122,16 @@ interface PinInputSchema {
         focusedIndex: number;
     };
     computed: {
+        _value: string[];
         valueLength: number;
         filledValueLength: number;
         isValueComplete: boolean;
         valueAsString: string;
         focusedValue: string;
     };
+    refs: {
+        count: number;
+    };
     event: EventObject;
     action: string;
     effect: string;

package/dist/index.d.ts

@@ -122,12 +122,16 @@ interface PinInputSchema {
         focusedIndex: number;
     };
     computed: {
+        _value: string[];
         valueLength: number;
         filledValueLength: number;
         isValueComplete: boolean;
         valueAsString: string;
         focusedValue: string;
     };
+    refs: {
+        count: number;
+    };
     event: EventObject;
     action: string;
     effect: string;

package/dist/index.js

@@ -233,7 +233,6 @@ var machine = createMachine({
         sync: true,
         value: prop("value"),
         defaultValue: prop("defaultValue"),
-        isEqual: utils.isEqual,
         onChange(value) {
           prop("onValueChange")?.({ value, valueAsString: value.join("") });
         }
@@ -244,23 +243,25 @@ var machine = createMachine({
       }))
     };
   },
+  refs() {
+    return {
+      count: 0
+    };
+  },
   computed: {
-    valueLength: ({ context }) => context.get("value").length,
-    filledValueLength: ({ context }) => context.get("value").filter((v) => v?.trim() !== "").length,
-    isValueComplete: ({ context }) => {
-      const value = context.get("value");
-      const filledValueLength = value.filter((v) => v?.trim() !== "").length;
-      return value.length === filledValueLength;
-    },
-    valueAsString: ({ context }) => context.get("value").join(""),
-    focusedValue: ({ context }) => context.get("value")[context.get("focusedIndex")] || ""
+    _value: ({ context, refs }) => fill(context.get("value"), refs.get("count")),
+    valueLength: ({ computed }) => computed("_value").length,
+    filledValueLength: ({ computed }) => computed("_value").filter((v) => v?.trim() !== "").length,
+    isValueComplete: ({ computed }) => computed("valueLength") === computed("filledValueLength"),
+    valueAsString: ({ computed }) => computed("_value").join(""),
+    focusedValue: ({ computed, context }) => computed("_value")[context.get("focusedIndex")] || ""
   },
   entry: choose([
     {
       guard: "autoFocus",
-      actions: ["setupValue", "setFocusIndexToFirst"]
+      actions: ["setInputCount", "setFocusIndexToFirst"]
     },
-    { actions: ["setupValue"] }
+    { actions: ["setInputCount"] }
   ]),
   watch({ action, track, context, computed }) {
     track([() => context.get("focusedIndex")], () => {
@@ -296,18 +297,15 @@ var machine = createMachine({
     },
     focused: {
       on: {
-        "INPUT.CHANGE": [
-          {
-            guard: "isFinalValue",
-            actions: ["setFocusedValue", "syncInputValue"]
-          },
-          {
-            actions: ["setFocusedValue", "setNextFocusedIndex", "syncInputValue"]
-          }
-        ],
+        "INPUT.CHANGE": {
+          actions: ["setFocusedValue", "syncInputValue", "setNextFocusedIndex"]
+        },
         "INPUT.PASTE": {
           actions: ["setPastedValue", "setLastValueFocusIndex"]
         },
+        "INPUT.FOCUS": {
+          actions: ["setFocusedIndex"]
+        },
         "INPUT.BLUR": {
           target: "idle",
           actions: ["clearFocusedIndex"]
@@ -346,7 +344,6 @@ var machine = createMachine({
       autoFocus: ({ prop }) => !!prop("autoFocus"),
       hasValue: ({ context }) => context.get("value")[context.get("focusedIndex")] !== "",
       isValueComplete: ({ computed }) => computed("isValueComplete"),
-      isFinalValue: ({ context, computed }) => computed("filledValueLength") + 1 === computed("valueLength") && context.get("value").findIndex((v) => v.trim() === "") === context.get("focusedIndex"),
       hasIndex: ({ event }) => event.index !== void 0
     },
     actions: {
@@ -354,13 +351,9 @@ var machine = createMachine({
         const inputEl = getHiddenInputEl(scope);
         domQuery.dispatchInputValueEvent(inputEl, { value: computed("valueAsString") });
       },
-      setupValue({ context, scope }) {
-        queueMicrotask(() => {
-          if (context.get("value").length) return;
-          const inputEls = getInputEls(scope);
-          const emptyValues = Array.from({ length: inputEls.length }).fill("");
-          context.set("value", emptyValues);
-        });
+      setInputCount({ scope, refs }) {
+        const inputEls = getInputEls(scope);
+        refs.set("count", inputEls.length);
       },
       focusInput({ context, scope }) {
         const focusedIndex = context.get("focusedIndex");
@@ -374,10 +367,10 @@ var machine = createMachine({
           getInputElAtIndex(scope, focusedIndex)?.select();
         });
       },
-      invokeOnComplete({ context, computed, prop }) {
+      invokeOnComplete({ computed, prop }) {
         if (!computed("isValueComplete")) return;
         prop("onValueComplete")?.({
-          value: Array.from(context.get("value")),
+          value: computed("_value"),
           valueAsString: computed("valueAsString")
         });
       },
@@ -393,31 +386,30 @@ var machine = createMachine({
       setFocusedIndex({ context, event }) {
         context.set("focusedIndex", event.index);
       },
-      setValue({ context, event }) {
-        context.set("value", event.value);
+      setValue({ context, event, refs }) {
+        const value = fill(event.value, refs.get("count"));
+        context.set("value", value);
       },
       setFocusedValue({ context, event, computed }) {
         const focusedValue = computed("focusedValue");
-        const nextValue = getNextValue(focusedValue, event.value);
-        context.set("value", (prev) => {
-          const next = [...prev];
-          next[context.get("focusedIndex")] = nextValue;
-          return next;
-        });
+        const focusedIndex = context.get("focusedIndex");
+        const value = getNextValue(focusedValue, event.value);
+        context.set("value", utils.setValueAtIndex(computed("_value"), focusedIndex, value));
       },
       revertInputValue({ context, computed, scope }) {
         const inputEl = getInputElAtIndex(scope, context.get("focusedIndex"));
-        domQuery.setElementValue(inputEl, computed("focusedValue"));
+        inputEl.value = computed("focusedValue");
       },
       syncInputValue({ context, event, scope }) {
         const value = context.get("value");
         const inputEl = getInputElAtIndex(scope, event.index);
-        domQuery.setElementValue(inputEl, value[event.index]);
+        inputEl.value = value[event.index];
       },
       syncInputElements({ context, scope }) {
         const inputEls = getInputEls(scope);
+        const value = context.get("value");
         inputEls.forEach((inputEl, index) => {
-          domQuery.setElementValue(inputEl, context.get("value")[index]);
+          inputEl.value = value[index];
         });
       },
       setPastedValue({ context, event, computed }) {
@@ -428,30 +420,22 @@ var machine = createMachine({
           const startIndex = Math.min(focusedIndex, filledValueLength);
           const left = startIndex > 0 ? valueAsString.substring(0, focusedIndex) : "";
           const right = event.value.substring(0, computed("valueLength") - startIndex);
-          const value = left + right;
-          context.set("value", value.split(""));
+          const value = fill(`${left}${right}`.split(""), computed("valueLength"));
+          context.set("value", value);
         });
       },
       setValueAtIndex({ context, event, computed }) {
         const nextValue = getNextValue(computed("focusedValue"), event.value);
-        context.set("value", (prev) => {
-          const next = [...prev];
-          next[event.index] = nextValue;
-          return next;
-        });
+        context.set("value", utils.setValueAtIndex(computed("_value"), event.index, nextValue));
       },
-      clearValue({ context, computed }) {
-        const nextValue = Array.from({ length: computed("valueLength") }).fill("");
+      clearValue({ context, refs }) {
+        const nextValue = Array.from({ length: refs.get("count") }).fill("");
         context.set("value", nextValue);
       },
-      clearFocusedValue({ context }) {
+      clearFocusedValue({ context, computed }) {
         const focusedIndex = context.get("focusedIndex");
         if (focusedIndex === -1) return;
-        context.set("value", (prev) => {
-          const next = [...prev];
-          next[focusedIndex] = "";
-          return next;
-        });
+        context.set("value", utils.setValueAtIndex(computed("_value"), focusedIndex, ""));
       },
       setFocusIndexToFirst({ context }) {
         context.set("focusedIndex", 0);
@@ -487,6 +471,9 @@ function getNextValue(current, next) {
   else if (current[0] === next[1]) nextValue = next[0];
   return nextValue.split("")[nextValue.length - 1];
 }
+function fill(value, count) {
+  return Array.from({ length: count }).fill("").map((v, i) => value[i] || v);
+}
 var props = types.createProps()([
   "autoFocus",
   "blurOnComplete",

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { dispatchInputValueEvent, raf, setElementValue, queryAll, dataAttr, visuallyHiddenStyle, ariaAttr, getBeforeInputValue, getNativeEvent, isComposingEvent, isModifierKey, getEventKey } from '@zag-js/dom-query';
-import { isEqual, createSplitProps, invariant } from '@zag-js/utils';
+import { dispatchInputValueEvent, raf, queryAll, dataAttr, visuallyHiddenStyle, ariaAttr, getBeforeInputValue, getNativeEvent, isComposingEvent, isModifierKey, getEventKey } from '@zag-js/dom-query';
+import { setValueAtIndex, createSplitProps, invariant } from '@zag-js/utils';
 import { setup } from '@zag-js/core';
 import { createProps } from '@zag-js/types';
 
@@ -231,7 +231,6 @@ var machine = createMachine({
         sync: true,
         value: prop("value"),
         defaultValue: prop("defaultValue"),
-        isEqual,
         onChange(value) {
           prop("onValueChange")?.({ value, valueAsString: value.join("") });
         }
@@ -242,23 +241,25 @@ var machine = createMachine({
       }))
     };
   },
+  refs() {
+    return {
+      count: 0
+    };
+  },
   computed: {
-    valueLength: ({ context }) => context.get("value").length,
-    filledValueLength: ({ context }) => context.get("value").filter((v) => v?.trim() !== "").length,
-    isValueComplete: ({ context }) => {
-      const value = context.get("value");
-      const filledValueLength = value.filter((v) => v?.trim() !== "").length;
-      return value.length === filledValueLength;
-    },
-    valueAsString: ({ context }) => context.get("value").join(""),
-    focusedValue: ({ context }) => context.get("value")[context.get("focusedIndex")] || ""
+    _value: ({ context, refs }) => fill(context.get("value"), refs.get("count")),
+    valueLength: ({ computed }) => computed("_value").length,
+    filledValueLength: ({ computed }) => computed("_value").filter((v) => v?.trim() !== "").length,
+    isValueComplete: ({ computed }) => computed("valueLength") === computed("filledValueLength"),
+    valueAsString: ({ computed }) => computed("_value").join(""),
+    focusedValue: ({ computed, context }) => computed("_value")[context.get("focusedIndex")] || ""
   },
   entry: choose([
     {
       guard: "autoFocus",
-      actions: ["setupValue", "setFocusIndexToFirst"]
+      actions: ["setInputCount", "setFocusIndexToFirst"]
     },
-    { actions: ["setupValue"] }
+    { actions: ["setInputCount"] }
   ]),
   watch({ action, track, context, computed }) {
     track([() => context.get("focusedIndex")], () => {
@@ -294,18 +295,15 @@ var machine = createMachine({
     },
     focused: {
       on: {
-        "INPUT.CHANGE": [
-          {
-            guard: "isFinalValue",
-            actions: ["setFocusedValue", "syncInputValue"]
-          },
-          {
-            actions: ["setFocusedValue", "setNextFocusedIndex", "syncInputValue"]
-          }
-        ],
+        "INPUT.CHANGE": {
+          actions: ["setFocusedValue", "syncInputValue", "setNextFocusedIndex"]
+        },
         "INPUT.PASTE": {
           actions: ["setPastedValue", "setLastValueFocusIndex"]
         },
+        "INPUT.FOCUS": {
+          actions: ["setFocusedIndex"]
+        },
         "INPUT.BLUR": {
           target: "idle",
           actions: ["clearFocusedIndex"]
@@ -344,7 +342,6 @@ var machine = createMachine({
       autoFocus: ({ prop }) => !!prop("autoFocus"),
       hasValue: ({ context }) => context.get("value")[context.get("focusedIndex")] !== "",
       isValueComplete: ({ computed }) => computed("isValueComplete"),
-      isFinalValue: ({ context, computed }) => computed("filledValueLength") + 1 === computed("valueLength") && context.get("value").findIndex((v) => v.trim() === "") === context.get("focusedIndex"),
       hasIndex: ({ event }) => event.index !== void 0
     },
     actions: {
@@ -352,13 +349,9 @@ var machine = createMachine({
         const inputEl = getHiddenInputEl(scope);
         dispatchInputValueEvent(inputEl, { value: computed("valueAsString") });
       },
-      setupValue({ context, scope }) {
-        queueMicrotask(() => {
-          if (context.get("value").length) return;
-          const inputEls = getInputEls(scope);
-          const emptyValues = Array.from({ length: inputEls.length }).fill("");
-          context.set("value", emptyValues);
-        });
+      setInputCount({ scope, refs }) {
+        const inputEls = getInputEls(scope);
+        refs.set("count", inputEls.length);
       },
       focusInput({ context, scope }) {
         const focusedIndex = context.get("focusedIndex");
@@ -372,10 +365,10 @@ var machine = createMachine({
           getInputElAtIndex(scope, focusedIndex)?.select();
         });
       },
-      invokeOnComplete({ context, computed, prop }) {
+      invokeOnComplete({ computed, prop }) {
         if (!computed("isValueComplete")) return;
         prop("onValueComplete")?.({
-          value: Array.from(context.get("value")),
+          value: computed("_value"),
           valueAsString: computed("valueAsString")
         });
       },
@@ -391,31 +384,30 @@ var machine = createMachine({
       setFocusedIndex({ context, event }) {
         context.set("focusedIndex", event.index);
       },
-      setValue({ context, event }) {
-        context.set("value", event.value);
+      setValue({ context, event, refs }) {
+        const value = fill(event.value, refs.get("count"));
+        context.set("value", value);
       },
       setFocusedValue({ context, event, computed }) {
         const focusedValue = computed("focusedValue");
-        const nextValue = getNextValue(focusedValue, event.value);
-        context.set("value", (prev) => {
-          const next = [...prev];
-          next[context.get("focusedIndex")] = nextValue;
-          return next;
-        });
+        const focusedIndex = context.get("focusedIndex");
+        const value = getNextValue(focusedValue, event.value);
+        context.set("value", setValueAtIndex(computed("_value"), focusedIndex, value));
       },
       revertInputValue({ context, computed, scope }) {
         const inputEl = getInputElAtIndex(scope, context.get("focusedIndex"));
-        setElementValue(inputEl, computed("focusedValue"));
+        inputEl.value = computed("focusedValue");
       },
       syncInputValue({ context, event, scope }) {
         const value = context.get("value");
         const inputEl = getInputElAtIndex(scope, event.index);
-        setElementValue(inputEl, value[event.index]);
+        inputEl.value = value[event.index];
       },
       syncInputElements({ context, scope }) {
         const inputEls = getInputEls(scope);
+        const value = context.get("value");
         inputEls.forEach((inputEl, index) => {
-          setElementValue(inputEl, context.get("value")[index]);
+          inputEl.value = value[index];
         });
       },
       setPastedValue({ context, event, computed }) {
@@ -426,30 +418,22 @@ var machine = createMachine({
           const startIndex = Math.min(focusedIndex, filledValueLength);
           const left = startIndex > 0 ? valueAsString.substring(0, focusedIndex) : "";
           const right = event.value.substring(0, computed("valueLength") - startIndex);
-          const value = left + right;
-          context.set("value", value.split(""));
+          const value = fill(`${left}${right}`.split(""), computed("valueLength"));
+          context.set("value", value);
         });
       },
       setValueAtIndex({ context, event, computed }) {
         const nextValue = getNextValue(computed("focusedValue"), event.value);
-        context.set("value", (prev) => {
-          const next = [...prev];
-          next[event.index] = nextValue;
-          return next;
-        });
+        context.set("value", setValueAtIndex(computed("_value"), event.index, nextValue));
       },
-      clearValue({ context, computed }) {
-        const nextValue = Array.from({ length: computed("valueLength") }).fill("");
+      clearValue({ context, refs }) {
+        const nextValue = Array.from({ length: refs.get("count") }).fill("");
         context.set("value", nextValue);
       },
-      clearFocusedValue({ context }) {
+      clearFocusedValue({ context, computed }) {
         const focusedIndex = context.get("focusedIndex");
         if (focusedIndex === -1) return;
-        context.set("value", (prev) => {
-          const next = [...prev];
-          next[focusedIndex] = "";
-          return next;
-        });
+        context.set("value", setValueAtIndex(computed("_value"), focusedIndex, ""));
       },
       setFocusIndexToFirst({ context }) {
         context.set("focusedIndex", 0);
@@ -485,6 +469,9 @@ function getNextValue(current, next) {
   else if (current[0] === next[1]) nextValue = next[0];
   return nextValue.split("")[nextValue.length - 1];
 }
+function fill(value, count) {
+  return Array.from({ length: count }).fill("").map((v, i) => value[i] || v);
+}
 var props = createProps()([
   "autoFocus",
   "blurOnComplete",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "1.0.2",
+  "version": "1.1.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.0.2",
-    "@zag-js/dom-query": "1.0.2",
-    "@zag-js/utils": "1.0.2",
-    "@zag-js/core": "1.0.2",
-    "@zag-js/types": "1.0.2"
+    "@zag-js/anatomy": "1.1.0",
+    "@zag-js/utils": "1.1.0",
+    "@zag-js/dom-query": "1.1.0",
+    "@zag-js/core": "1.1.0",
+    "@zag-js/types": "1.1.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"