@zag-js/pin-input 1.0.2 → 1.2.0

package/dist/index.d.mts

@@ -112,6 +112,11 @@ interface PinInputProps extends DirectionProperty, CommonProperties {
      * Specifies the localized strings that identifies the accessibility elements and their states
      */
     translations?: IntlTranslations | undefined;
+    /**
+     * The number of inputs to render to improve SSR aria attributes.
+     * This will be required in next major version.
+     */
+    count?: number | undefined;
 }
 type PropsWithDefault = "placeholder" | "otp" | "type" | "defaultValue";
 interface PinInputSchema {
@@ -120,8 +125,10 @@ interface PinInputSchema {
     context: {
         value: string[];
         focusedIndex: number;
+        count: number;
     };
     computed: {
+        _value: string[];
         valueLength: number;
         filledValueLength: number;
         isValueComplete: boolean;
@@ -151,6 +158,14 @@ interface PinInputApi<T extends PropTypes = PropTypes> {
      * Whether all inputs are filled.
      */
     complete: boolean;
+    /**
+     * The number of inputs to render
+     */
+    count: number;
+    /**
+     * The array of input values.
+     */
+    items: number[];
     /**
      * Function to set the value of the inputs.
      */

package/dist/index.d.ts

@@ -112,6 +112,11 @@ interface PinInputProps extends DirectionProperty, CommonProperties {
      * Specifies the localized strings that identifies the accessibility elements and their states
      */
     translations?: IntlTranslations | undefined;
+    /**
+     * The number of inputs to render to improve SSR aria attributes.
+     * This will be required in next major version.
+     */
+    count?: number | undefined;
 }
 type PropsWithDefault = "placeholder" | "otp" | "type" | "defaultValue";
 interface PinInputSchema {
@@ -120,8 +125,10 @@ interface PinInputSchema {
     context: {
         value: string[];
         focusedIndex: number;
+        count: number;
     };
     computed: {
+        _value: string[];
         valueLength: number;
         filledValueLength: number;
         isValueComplete: boolean;
@@ -151,6 +158,14 @@ interface PinInputApi<T extends PropTypes = PropTypes> {
      * Whether all inputs are filled.
      */
     complete: boolean;
+    /**
+     * The number of inputs to render
+     */
+    count: number;
+    /**
+     * The array of input values.
+     */
+    items: number[];
     /**
      * Function to set the value of the inputs.
      */

package/dist/index.js

@@ -52,6 +52,8 @@ function connect(service, normalize) {
   }
   return {
     focus,
+    count: context.get("count"),
+    items: Array.from({ length: context.get("count") }).map((_, i) => i),
     value: context.get("value"),
     valueAsString: computed("valueAsString"),
     complete,
@@ -216,7 +218,7 @@ var machine = createMachine({
       placeholder: "\u25CB",
       otp: false,
       type: "numeric",
-      defaultValue: [],
+      defaultValue: props2.count ? fill([], props2.count) : [],
       ...props2,
       translations: {
         inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
@@ -230,10 +232,8 @@ var machine = createMachine({
   context({ prop, bindable }) {
     return {
       value: bindable(() => ({
-        sync: true,
         value: prop("value"),
         defaultValue: prop("defaultValue"),
-        isEqual: utils.isEqual,
         onChange(value) {
           prop("onValueChange")?.({ value, valueAsString: value.join("") });
         }
@@ -241,26 +241,27 @@ var machine = createMachine({
       focusedIndex: bindable(() => ({
         sync: true,
         defaultValue: -1
+      })),
+      // TODO: Move this to `props` in next major version
+      count: bindable(() => ({
+        defaultValue: prop("count")
       }))
     };
   },
   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 }) => fill(context.get("value"), context.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,10 @@ 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, context, prop }) {
+        if (prop("count")) return;
+        const inputEls = getInputEls(scope);
+        context.set("count", inputEls.length);
       },
       focusInput({ context, scope }) {
         const focusedIndex = context.get("focusedIndex");
@@ -374,10 +368,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")
         });
       },
@@ -394,64 +388,58 @@ var machine = createMachine({
         context.set("focusedIndex", event.index);
       },
       setValue({ context, event }) {
-        context.set("value", event.value);
+        const value = fill(event.value, context.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 }) {
+      setPastedValue({ context, event, computed, flush }) {
         domQuery.raf(() => {
           const valueAsString = computed("valueAsString");
           const focusedIndex = context.get("focusedIndex");
+          const valueLength = computed("valueLength");
           const filledValueLength = computed("filledValueLength");
           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 right = event.value.substring(0, valueLength - startIndex);
+          const value = fill(`${left}${right}`.split(""), valueLength);
+          flush(() => {
+            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 }) {
+        const nextValue = Array.from({ length: context.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,9 +475,14 @@ 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",
+  "count",
+  "defaultValue",
   "dir",
   "disabled",
   "form",
@@ -503,15 +496,14 @@ var props = types.createProps()([
   "onValueComplete",
   "onValueInvalid",
   "otp",
-  "readOnly",
   "pattern",
   "placeholder",
+  "readOnly",
   "required",
   "selectOnFocus",
   "translations",
   "type",
-  "value",
-  "defaultValue"
+  "value"
 ]);
 var splitProps = utils.createSplitProps(props);
 

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';
 
@@ -50,6 +50,8 @@ function connect(service, normalize) {
   }
   return {
     focus,
+    count: context.get("count"),
+    items: Array.from({ length: context.get("count") }).map((_, i) => i),
     value: context.get("value"),
     valueAsString: computed("valueAsString"),
     complete,
@@ -214,7 +216,7 @@ var machine = createMachine({
       placeholder: "\u25CB",
       otp: false,
       type: "numeric",
-      defaultValue: [],
+      defaultValue: props2.count ? fill([], props2.count) : [],
       ...props2,
       translations: {
         inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
@@ -228,10 +230,8 @@ var machine = createMachine({
   context({ prop, bindable }) {
     return {
       value: bindable(() => ({
-        sync: true,
         value: prop("value"),
         defaultValue: prop("defaultValue"),
-        isEqual,
         onChange(value) {
           prop("onValueChange")?.({ value, valueAsString: value.join("") });
         }
@@ -239,26 +239,27 @@ var machine = createMachine({
       focusedIndex: bindable(() => ({
         sync: true,
         defaultValue: -1
+      })),
+      // TODO: Move this to `props` in next major version
+      count: bindable(() => ({
+        defaultValue: prop("count")
       }))
     };
   },
   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 }) => fill(context.get("value"), context.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,10 @@ 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, context, prop }) {
+        if (prop("count")) return;
+        const inputEls = getInputEls(scope);
+        context.set("count", inputEls.length);
       },
       focusInput({ context, scope }) {
         const focusedIndex = context.get("focusedIndex");
@@ -372,10 +366,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")
         });
       },
@@ -392,64 +386,58 @@ var machine = createMachine({
         context.set("focusedIndex", event.index);
       },
       setValue({ context, event }) {
-        context.set("value", event.value);
+        const value = fill(event.value, context.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 }) {
+      setPastedValue({ context, event, computed, flush }) {
         raf(() => {
           const valueAsString = computed("valueAsString");
           const focusedIndex = context.get("focusedIndex");
+          const valueLength = computed("valueLength");
           const filledValueLength = computed("filledValueLength");
           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 right = event.value.substring(0, valueLength - startIndex);
+          const value = fill(`${left}${right}`.split(""), valueLength);
+          flush(() => {
+            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 }) {
+        const nextValue = Array.from({ length: context.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,9 +473,14 @@ 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",
+  "count",
+  "defaultValue",
   "dir",
   "disabled",
   "form",
@@ -501,15 +494,14 @@ var props = createProps()([
   "onValueComplete",
   "onValueInvalid",
   "otp",
-  "readOnly",
   "pattern",
   "placeholder",
+  "readOnly",
   "required",
   "selectOnFocus",
   "translations",
   "type",
-  "value",
-  "defaultValue"
+  "value"
 ]);
 var splitProps = createSplitProps(props);
 

package/package.json

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