@zag-js/pin-input 1.1.0 → 1.2.1

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

@@ -23,6 +23,10 @@ var getInputEls = (ctx) => {
 var getInputElAtIndex = (ctx, index) => getInputEls(ctx)[index];
 var getFirstInputEl = (ctx) => getInputEls(ctx)[0];
 var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+var setInputValue = (inputEl, value) => {
+  inputEl.value = value;
+  inputEl.setAttribute("value", value);
+};
 
 // src/pin-input.utils.ts
 var REGEX = {
@@ -52,6 +56,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,
@@ -198,11 +204,11 @@ function connect(service, normalize) {
           }
         },
         onFocus() {
-          queueMicrotask(() => {
-            send({ type: "INPUT.FOCUS", index });
-          });
+          send({ type: "INPUT.FOCUS", index });
         },
-        onBlur() {
+        onBlur(event) {
+          const target = event.relatedTarget;
+          if (domQuery.isHTMLElement(target) && target.dataset.ownedby === getRootId(scope)) return;
           send({ type: "INPUT.BLUR", index });
         }
       });
@@ -216,7 +222,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 +236,6 @@ var machine = createMachine({
   context({ prop, bindable }) {
     return {
       value: bindable(() => ({
-        sync: true,
         value: prop("value"),
         defaultValue: prop("defaultValue"),
         onChange(value) {
@@ -240,16 +245,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 +355,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 +391,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 }) {
@@ -398,38 +403,41 @@ var machine = createMachine({
       },
       revertInputValue({ context, computed, scope }) {
         const inputEl = getInputElAtIndex(scope, context.get("focusedIndex"));
-        inputEl.value = computed("focusedValue");
+        setInputValue(inputEl, computed("focusedValue"));
       },
       syncInputValue({ context, event, scope }) {
         const value = context.get("value");
         const inputEl = getInputElAtIndex(scope, event.index);
-        inputEl.value = value[event.index];
+        setInputValue(inputEl, value[event.index]);
       },
       syncInputElements({ context, scope }) {
         const inputEls = getInputEls(scope);
         const value = context.get("value");
         inputEls.forEach((inputEl, index) => {
-          inputEl.value = value[index];
+          setInputValue(inputEl, 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 +485,8 @@ function fill(value, count) {
 var props = types.createProps()([
   "autoFocus",
   "blurOnComplete",
+  "count",
+  "defaultValue",
   "dir",
   "disabled",
   "form",
@@ -490,15 +500,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,5 +1,5 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { dispatchInputValueEvent, raf, queryAll, dataAttr, visuallyHiddenStyle, ariaAttr, getBeforeInputValue, getNativeEvent, isComposingEvent, isModifierKey, getEventKey } from '@zag-js/dom-query';
+import { dispatchInputValueEvent, raf, queryAll, dataAttr, visuallyHiddenStyle, ariaAttr, getBeforeInputValue, getNativeEvent, isComposingEvent, isModifierKey, getEventKey, isHTMLElement } 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';
@@ -21,6 +21,10 @@ var getInputEls = (ctx) => {
 var getInputElAtIndex = (ctx, index) => getInputEls(ctx)[index];
 var getFirstInputEl = (ctx) => getInputEls(ctx)[0];
 var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+var setInputValue = (inputEl, value) => {
+  inputEl.value = value;
+  inputEl.setAttribute("value", value);
+};
 
 // src/pin-input.utils.ts
 var REGEX = {
@@ -50,6 +54,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,
@@ -196,11 +202,11 @@ function connect(service, normalize) {
           }
         },
         onFocus() {
-          queueMicrotask(() => {
-            send({ type: "INPUT.FOCUS", index });
-          });
+          send({ type: "INPUT.FOCUS", index });
         },
-        onBlur() {
+        onBlur(event) {
+          const target = event.relatedTarget;
+          if (isHTMLElement(target) && target.dataset.ownedby === getRootId(scope)) return;
           send({ type: "INPUT.BLUR", index });
         }
       });
@@ -214,7 +220,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 +234,6 @@ var machine = createMachine({
   context({ prop, bindable }) {
     return {
       value: bindable(() => ({
-        sync: true,
         value: prop("value"),
         defaultValue: prop("defaultValue"),
         onChange(value) {
@@ -238,16 +243,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 +353,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 +389,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 }) {
@@ -396,38 +401,41 @@ var machine = createMachine({
       },
       revertInputValue({ context, computed, scope }) {
         const inputEl = getInputElAtIndex(scope, context.get("focusedIndex"));
-        inputEl.value = computed("focusedValue");
+        setInputValue(inputEl, computed("focusedValue"));
       },
       syncInputValue({ context, event, scope }) {
         const value = context.get("value");
         const inputEl = getInputElAtIndex(scope, event.index);
-        inputEl.value = value[event.index];
+        setInputValue(inputEl, value[event.index]);
       },
       syncInputElements({ context, scope }) {
         const inputEls = getInputEls(scope);
         const value = context.get("value");
         inputEls.forEach((inputEl, index) => {
-          inputEl.value = value[index];
+          setInputValue(inputEl, 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 +483,8 @@ function fill(value, count) {
 var props = createProps()([
   "autoFocus",
   "blurOnComplete",
+  "count",
+  "defaultValue",
   "dir",
   "disabled",
   "form",
@@ -488,15 +498,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.1",
   "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.1",
+    "@zag-js/dom-query": "1.2.1",
+    "@zag-js/utils": "1.2.1",
+    "@zag-js/core": "1.2.1",
+    "@zag-js/types": "1.2.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"