@zag-js/pin-input 1.2.0 → 1.3.0

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import * as _zag_js_core from '@zag-js/core';
-import { Service, Machine, EventObject } from '@zag-js/core';
-import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
+import { EventObject, Service, Machine } from '@zag-js/core';
+import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control">;
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import * as _zag_js_core from '@zag-js/core';
-import { Service, Machine, EventObject } from '@zag-js/core';
-import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
+import { EventObject, Service, Machine } from '@zag-js/core';
+import { RequiredBy, DirectionProperty, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control">;
 

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 = {
@@ -200,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 });
         }
       });
@@ -234,6 +238,7 @@ var machine = createMachine({
       value: bindable(() => ({
         value: prop("value"),
         defaultValue: prop("defaultValue"),
+        isEqual: utils.isEqual,
         onChange(value) {
           prop("onValueChange")?.({ value, valueAsString: value.join("") });
         }
@@ -399,18 +404,18 @@ 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, flush }) {

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
-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 { raf, dispatchInputValueEvent, queryAll, dataAttr, ariaAttr, isHTMLElement, isComposingEvent, isModifierKey, getEventKey, getNativeEvent, getBeforeInputValue, visuallyHiddenStyle } from '@zag-js/dom-query';
+import { setValueAtIndex, isEqual, 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 = {
@@ -198,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 });
         }
       });
@@ -232,6 +236,7 @@ var machine = createMachine({
       value: bindable(() => ({
         value: prop("value"),
         defaultValue: prop("defaultValue"),
+        isEqual,
         onChange(value) {
           prop("onValueChange")?.({ value, valueAsString: value.join("") });
         }
@@ -397,18 +402,18 @@ 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, flush }) {

package/package.json

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