@zag-js/pin-input 1.1.0 → 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,6 +125,7 @@ interface PinInputSchema {
     context: {
         value: string[];
         focusedIndex: number;
+        count: number;
     };
     computed: {
         _value: string[];
@@ -129,9 +135,6 @@ interface PinInputSchema {
         valueAsString: string;
         focusedValue: string;
     };
-    refs: {
-        count: number;
-    };
     event: EventObject;
     action: string;
     effect: string;
@@ -155,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,6 +125,7 @@ interface PinInputSchema {
     context: {
         value: string[];
         focusedIndex: number;
+        count: number;
     };
     computed: {
         _value: string[];
@@ -129,9 +135,6 @@ interface PinInputSchema {
         valueAsString: string;
         focusedValue: string;
     };
-    refs: {
-        count: number;
-    };
     event: EventObject;
     action: string;
     effect: string;
@@ -155,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,7 +232,6 @@ var machine = createMachine({
   context({ prop, bindable }) {
     return {
       value: bindable(() => ({
-        sync: true,
         value: prop("value"),
         defaultValue: prop("defaultValue"),
         onChange(value) {
@@ -240,16 +241,15 @@ var machine = createMachine({
       focusedIndex: bindable(() => ({
         sync: true,
         defaultValue: -1
+      })),
+      // TODO: Move this to `props` in next major version
+      count: bindable(() => ({
+        defaultValue: prop("count")
       }))
     };
   },
-  refs() {
-    return {
-      count: 0
-    };
-  },
   computed: {
-    _value: ({ context, refs }) => fill(context.get("value"), refs.get("count")),
+    _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"),
@@ -351,9 +351,10 @@ var machine = createMachine({
         const inputEl = getHiddenInputEl(scope);
         domQuery.dispatchInputValueEvent(inputEl, { value: computed("valueAsString") });
       },
-      setInputCount({ scope, refs }) {
+      setInputCount({ scope, context, prop }) {
+        if (prop("count")) return;
         const inputEls = getInputEls(scope);
-        refs.set("count", inputEls.length);
+        context.set("count", inputEls.length);
       },
       focusInput({ context, scope }) {
         const focusedIndex = context.get("focusedIndex");
@@ -386,8 +387,8 @@ var machine = createMachine({
       setFocusedIndex({ context, event }) {
         context.set("focusedIndex", event.index);
       },
-      setValue({ context, event, refs }) {
-        const value = fill(event.value, refs.get("count"));
+      setValue({ context, event }) {
+        const value = fill(event.value, context.get("count"));
         context.set("value", value);
       },
       setFocusedValue({ context, event, computed }) {
@@ -412,24 +413,27 @@ var machine = createMachine({
           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 = fill(`${left}${right}`.split(""), computed("valueLength"));
-          context.set("value", value);
+          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", utils.setValueAtIndex(computed("_value"), event.index, nextValue));
       },
-      clearValue({ context, refs }) {
-        const nextValue = Array.from({ length: refs.get("count") }).fill("");
+      clearValue({ context }) {
+        const nextValue = Array.from({ length: context.get("count") }).fill("");
         context.set("value", nextValue);
       },
       clearFocusedValue({ context, computed }) {
@@ -477,6 +481,8 @@ function fill(value, count) {
 var props = types.createProps()([
   "autoFocus",
   "blurOnComplete",
+  "count",
+  "defaultValue",
   "dir",
   "disabled",
   "form",
@@ -490,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

@@ -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,7 +230,6 @@ var machine = createMachine({
   context({ prop, bindable }) {
     return {
       value: bindable(() => ({
-        sync: true,
         value: prop("value"),
         defaultValue: prop("defaultValue"),
         onChange(value) {
@@ -238,16 +239,15 @@ var machine = createMachine({
       focusedIndex: bindable(() => ({
         sync: true,
         defaultValue: -1
+      })),
+      // TODO: Move this to `props` in next major version
+      count: bindable(() => ({
+        defaultValue: prop("count")
       }))
     };
   },
-  refs() {
-    return {
-      count: 0
-    };
-  },
   computed: {
-    _value: ({ context, refs }) => fill(context.get("value"), refs.get("count")),
+    _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"),
@@ -349,9 +349,10 @@ var machine = createMachine({
         const inputEl = getHiddenInputEl(scope);
         dispatchInputValueEvent(inputEl, { value: computed("valueAsString") });
       },
-      setInputCount({ scope, refs }) {
+      setInputCount({ scope, context, prop }) {
+        if (prop("count")) return;
         const inputEls = getInputEls(scope);
-        refs.set("count", inputEls.length);
+        context.set("count", inputEls.length);
       },
       focusInput({ context, scope }) {
         const focusedIndex = context.get("focusedIndex");
@@ -384,8 +385,8 @@ var machine = createMachine({
       setFocusedIndex({ context, event }) {
         context.set("focusedIndex", event.index);
       },
-      setValue({ context, event, refs }) {
-        const value = fill(event.value, refs.get("count"));
+      setValue({ context, event }) {
+        const value = fill(event.value, context.get("count"));
         context.set("value", value);
       },
       setFocusedValue({ context, event, computed }) {
@@ -410,24 +411,27 @@ var machine = createMachine({
           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 = fill(`${left}${right}`.split(""), computed("valueLength"));
-          context.set("value", value);
+          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", setValueAtIndex(computed("_value"), event.index, nextValue));
       },
-      clearValue({ context, refs }) {
-        const nextValue = Array.from({ length: refs.get("count") }).fill("");
+      clearValue({ context }) {
+        const nextValue = Array.from({ length: context.get("count") }).fill("");
         context.set("value", nextValue);
       },
       clearFocusedValue({ context, computed }) {
@@ -475,6 +479,8 @@ function fill(value, count) {
 var props = createProps()([
   "autoFocus",
   "blurOnComplete",
+  "count",
+  "defaultValue",
   "dir",
   "disabled",
   "form",
@@ -488,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.1.0",
+  "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.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"
+    "@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"