@zag-js/pin-input 0.2.6 → 0.2.8

package/dist/index.js

@@ -31,13 +31,37 @@ var import_anatomy = require("@zag-js/anatomy");
 var anatomy = (0, import_anatomy.createAnatomy)("pinInput").parts("root", "label", "hiddenInput", "input", "control");
 var parts = anatomy.build();
 
-// ../../utilities/dom/dist/index.mjs
+// ../../utilities/dom/src/attrs.ts
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
 var ariaAttr = (guard) => {
   return guard ? "true" : void 0;
 };
+
+// ../../utilities/core/src/guard.ts
+var isArray = (v) => Array.isArray(v);
+var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
+
+// ../../utilities/core/src/object.ts
+function compact(obj) {
+  if (obj === void 0)
+    return obj;
+  return Object.fromEntries(
+    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
+  );
+}
+
+// ../../utilities/core/src/warning.ts
+function invariant(...a) {
+  const m = a.length === 1 ? a[0] : a[1];
+  const c = a.length === 2 ? a[0] : true;
+  if (c && process.env.NODE_ENV !== "production") {
+    throw new Error(m);
+  }
+}
+
+// ../../utilities/dom/src/query.ts
 function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
@@ -52,6 +76,10 @@ function getDocument(el) {
     return el;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
+function getWindow(el) {
+  var _a;
+  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+}
 function defineDomHelpers(helpers) {
   const dom2 = {
     getRootNode: (ctx) => {
@@ -64,36 +92,22 @@ function defineDomHelpers(helpers) {
       return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
     },
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
-    createEmitter: (ctx, target) => {
-      const win = dom2.getWin(ctx);
-      return function emit(evt, detail, options) {
-        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
-        const eventName = `zag:${evt}`;
-        const init = { bubbles, cancelable, composed, detail };
-        const event = new win.CustomEvent(eventName, init);
-        target.dispatchEvent(event);
-      };
-    },
-    createListener: (target) => {
-      return function listen(evt, handler) {
-        const eventName = `zag:${evt}`;
-        const listener = (e) => handler(e);
-        target.addEventListener(eventName, listener);
-        return () => target.removeEventListener(eventName, listener);
-      };
-    }
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
   return {
     ...dom2,
     ...helpers
   };
 }
+
+// ../../utilities/dom/src/event.ts
 function getNativeEvent(e) {
   var _a;
   return (_a = e.nativeEvent) != null ? _a : e;
 }
 var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
+
+// ../../utilities/dom/src/keyboard-event.ts
 var rtlKeyMap = {
   ArrowLeft: "ArrowRight",
   ArrowRight: "ArrowLeft"
@@ -118,16 +132,22 @@ function getEventKey(event, options = {}) {
   }
   return key;
 }
+
+// ../../utilities/dom/src/next-tick.ts
 function raf(fn) {
   const id = globalThis.requestAnimationFrame(fn);
   return function cleanup() {
     globalThis.cancelAnimationFrame(id);
   };
 }
+
+// ../../utilities/dom/src/nodelist.ts
 function queryAll(root, selector) {
   var _a;
   return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
 }
+
+// ../../utilities/dom/src/visually-hidden.ts
 var visuallyHiddenStyle = {
   border: "0",
   clip: "rect(0 0 0 0)",
@@ -141,24 +161,6 @@ var visuallyHiddenStyle = {
   wordWrap: "normal"
 };
 
-// ../../utilities/core/dist/index.mjs
-var isArray = (v) => Array.isArray(v);
-var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-function compact(obj) {
-  if (obj === void 0)
-    return obj;
-  return Object.fromEntries(
-    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
-  );
-}
-function invariant(...a) {
-  const m = a.length === 1 ? a[0] : a[1];
-  const c = a.length === 2 ? a[0] : true;
-  if (c && process.env.NODE_ENV !== "production") {
-    throw new Error(m);
-  }
-}
-
 // src/pin-input.dom.ts
 var dom = defineDomHelpers({
   getRootId: (ctx) => {
@@ -333,11 +335,7 @@ function connect(state, send, normalize) {
 // src/pin-input.machine.ts
 var import_core = require("@zag-js/core");
 
-// ../../utilities/form-utils/dist/index.mjs
-function getWindow(el) {
-  var _a;
-  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
-}
+// ../../utilities/form-utils/src/input-event.ts
 function getDescriptor(el, options) {
   var _a;
   const { type, property = "value" } = options;
@@ -386,24 +384,24 @@ function machine(userContext) {
       },
       watch: {
         focusedIndex: ["focusInput", "setInputSelection"],
-        value: ["invokeOnChange", "dispatchInputEvent"],
+        value: ["dispatchInputEvent"],
         isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
       },
       on: {
         SET_VALUE: [
           {
             guard: "hasIndex",
-            actions: "setValueAtIndex"
+            actions: ["setValueAtIndex", "invokeOnChange"]
           },
-          { actions: "setValue" }
+          { actions: ["setValue", "invokeOnChange"] }
         ],
         CLEAR_VALUE: [
           {
             guard: "isDisabled",
-            actions: "clearValue"
+            actions: ["clearValue", "invokeOnChange"]
           },
           {
-            actions: ["clearValue", "setFocusIndexToFirst"]
+            actions: ["clearValue", "invokeOnChange", "setFocusIndexToFirst"]
           }
         ]
       },
@@ -436,19 +434,19 @@ function machine(userContext) {
             INPUT: [
               {
                 guard: and("isFinalValue", "isValidValue"),
-                actions: ["setFocusedValue", "dispatchInputEventIfNeeded"]
+                actions: ["setFocusedValue", "invokeOnChange", "dispatchInputEventIfNeeded"]
               },
               {
                 guard: "isValidValue",
-                actions: ["setFocusedValue", "setNextFocusedIndex", "dispatchInputEventIfNeeded"]
+                actions: ["setFocusedValue", "invokeOnChange", "setNextFocusedIndex", "dispatchInputEventIfNeeded"]
               }
             ],
             PASTE: [
               {
                 guard: "isValidValue",
-                actions: ["setPastedValue", "setLastValueFocusIndex"]
+                actions: ["setPastedValue", "invokeOnChange", "setLastValueFocusIndex"]
               },
-              { actions: "resetFocusedValue" }
+              { actions: ["resetFocusedValue", "invokeOnChange"] }
             ],
             BLUR: {
               target: "idle",
@@ -456,7 +454,7 @@ function machine(userContext) {
             },
             DELETE: {
               guard: "hasValue",
-              actions: "clearFocusedValue"
+              actions: ["clearFocusedValue", "invokeOnChange"]
             },
             ARROW_LEFT: {
               actions: "setPrevFocusedIndex"
@@ -467,10 +465,10 @@ function machine(userContext) {
             BACKSPACE: [
               {
                 guard: "hasValue",
-                actions: "clearFocusedValue"
+                actions: ["clearFocusedValue", "invokeOnChange"]
               },
               {
-                actions: ["setPrevFocusedIndex", "clearFocusedValue"]
+                actions: ["setPrevFocusedIndex", "clearFocusedValue", "invokeOnChange"]
               }
             ],
             ENTER: {
@@ -577,7 +575,7 @@ function machine(userContext) {
         setPastedValue(ctx2, evt) {
           raf(() => {
             const startIndex = ctx2.focusedValue ? 1 : 0;
-            const value = evt.value.substring(startIndex, ctx2.valueLength);
+            const value = evt.value.substring(startIndex, startIndex + ctx2.valueLength);
             assign(ctx2, value);
           });
         },