@zag-js/pin-input 0.1.1 → 0.1.4

package/dist/index.js

@@ -46,7 +46,7 @@ var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
 var ariaAttr = (guard) => {
-  return guard ? true : void 0;
+  return guard ? "true" : void 0;
 };
 function nextTick(fn) {
   const set = /* @__PURE__ */ new Set();
@@ -61,6 +61,12 @@ function nextTick(fn) {
     });
   };
 }
+function raf(fn) {
+  const id = globalThis.requestAnimationFrame(fn);
+  return function cleanup() {
+    globalThis.cancelAnimationFrame(id);
+  };
+}
 function getNativeEvent(event) {
   var _a;
   return (_a = event.nativeEvent) != null ? _a : event;
@@ -95,6 +101,58 @@ function queryAll(root, selector) {
   var _a;
   return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
 }
+function itemById(v, id) {
+  return v.find((node) => node.id === id);
+}
+function indexOfId(v, id) {
+  const item = itemById(v, id);
+  return item ? v.indexOf(item) : -1;
+}
+var getValueText = (item) => {
+  var _a, _b;
+  return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
+};
+var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
+var wrap = (v, idx) => {
+  return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
+};
+function findByText(v, text, currentId) {
+  const index = currentId ? indexOfId(v, currentId) : -1;
+  let items = currentId ? wrap(v, index) : v;
+  const isSingleKey = text.length === 1;
+  if (isSingleKey) {
+    items = items.filter((item) => item.id !== currentId);
+  }
+  return items.find((item) => match(getValueText(item), text));
+}
+function findByTypeahead(_items, options) {
+  const { state: state2, activeId, key, timeout = 350 } = options;
+  const search = state2.keysSoFar + key;
+  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+  const query2 = isRepeated ? search[0] : search;
+  let items = _items.slice();
+  const next = findByText(items, query2, activeId);
+  function cleanup() {
+    clearTimeout(state2.timer);
+    state2.timer = -1;
+  }
+  function update(value) {
+    state2.keysSoFar = value;
+    cleanup();
+    if (value !== "") {
+      state2.timer = +setTimeout(() => {
+        update("");
+        cleanup();
+      }, timeout);
+    }
+  }
+  update(search);
+  return next;
+}
+findByTypeahead.defaultOptions = {
+  keysSoFar: "",
+  timer: -1
+};
 
 // ../../types/dist/index.mjs
 function createNormalizer(fn) {
@@ -104,7 +162,7 @@ var normalizeProp = createNormalizer((v) => v);
 
 // ../../utilities/core/dist/index.mjs
 var fromLength = (length) => Array.from(Array(length).keys());
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey || v.shiftKey;
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 function invariant(...a) {
   const m = a.length === 1 ? a[0] : a[1];
   const c = a.length === 2 ? a[0] : true;
@@ -119,6 +177,10 @@ var dom = {
     var _a;
     return (_a = ctx.doc) != null ? _a : document;
   },
+  getRootNode: (ctx) => {
+    var _a;
+    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
+  },
   getRootId: (ctx) => {
     var _a, _b;
     return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input:${ctx.uid}`;
@@ -127,7 +189,7 @@ var dom = {
     var _a, _b, _c;
     return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) != null ? _c : `pin-input:${ctx.uid}:${id}`;
   },
-  getRootEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getRootId(ctx)),
+  getRootEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getRootId(ctx)),
   getElements: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
     const selector = `input[data-ownedby=${ownerId}]`;
@@ -160,10 +222,8 @@ function connect(state, send, normalize = normalizeProp) {
       send({ type: "SET_VALUE", value, index });
     },
     focus() {
-      nextTick(() => {
-        var _a;
-        (_a = dom.getFirstInputEl(state.context)) == null ? void 0 : _a.focus();
-      });
+      var _a;
+      (_a = dom.getFirstInputEl(state.context)) == null ? void 0 : _a.focus();
     },
     rootProps: normalize.element({
       dir: state.context.dir,
@@ -195,7 +255,7 @@ function connect(state, send, normalize = normalizeProp) {
           const evt = getNativeEvent(event);
           if (evt.isComposing)
             return;
-          const value = event.target.value;
+          const { value } = event.currentTarget;
           if (evt.inputType === "insertFromPaste" || value.length > 2) {
             send({ type: "PASTE", value });
             event.preventDefault();
@@ -322,10 +382,6 @@ function machine(ctx = {}) {
               guard: and("isFinalValue", "isValidValue"),
               actions: "setFocusedValue"
             },
-            {
-              guard: and("hasValue", "isValidValue"),
-              actions: ["replaceFocusedValue", "setNextFocusedIndex"]
-            },
             {
               guard: "isValidValue",
               actions: ["setFocusedValue", "setNextFocusedIndex"]
@@ -383,6 +439,8 @@ function machine(ctx = {}) {
       setupDocument: (ctx2, evt) => {
         if (evt.doc)
           ctx2.doc = (0, import_core.ref)(evt.doc);
+        if (evt.root)
+          ctx2.rootNode = (0, import_core.ref)(evt.root);
         ctx2.uid = evt.id;
       },
       setupValue: (ctx2) => {
@@ -393,7 +451,7 @@ function machine(ctx = {}) {
         });
       },
       focusInput: (ctx2) => {
-        nextTick(() => {
+        raf(() => {
           var _a;
           if (ctx2.focusedIndex === -1)
             return;
@@ -419,27 +477,23 @@ function machine(ctx = {}) {
       clearFocusedIndex: (ctx2) => {
         ctx2.focusedIndex = -1;
       },
-      setValue: (ctx2, event) => {
-        assign(ctx2, event.value);
-      },
-      setFocusedIndex: (ctx2, event) => {
-        ctx2.focusedIndex = event.index;
+      setValue: (ctx2, evt) => {
+        assign(ctx2, evt.value);
       },
-      setFocusedValue: (ctx2, event) => {
-        ctx2.value[ctx2.focusedIndex] = event.value;
+      setFocusedIndex: (ctx2, evt) => {
+        ctx2.focusedIndex = evt.index;
       },
-      replaceFocusedValue: (ctx2, evt) => {
-        const val = ctx2.value[ctx2.focusedIndex];
-        ctx2.value[ctx2.focusedIndex] = evt.value.replace(val, "").charAt(0);
+      setFocusedValue: (ctx2, evt) => {
+        ctx2.value[ctx2.focusedIndex] = lastChar(evt.value);
       },
       setPastedValue(ctx2, evt) {
-        nextTick(() => {
-          const value = evt.value.substr(0, ctx2.valueLength);
+        raf(() => {
+          const value = evt.value.substring(0, ctx2.valueLength);
           assign(ctx2, value.split("").filter(Boolean));
         });
       },
       setValueAtIndex: (ctx2, evt) => {
-        ctx2.value[evt.index] = evt.value;
+        ctx2.value[evt.index] = lastChar(evt.value);
       },
       clearValue: (ctx2) => {
         assign(ctx2, "");
@@ -457,7 +511,7 @@ function machine(ctx = {}) {
         ctx2.focusedIndex = Math.max(ctx2.focusedIndex - 1, 0);
       },
       setLastValueFocusIndex: (ctx2) => {
-        nextTick(() => {
+        raf(() => {
           ctx2.focusedIndex = Math.min(ctx2.filledValueLength, ctx2.valueLength - 1);
         });
       },
@@ -467,7 +521,7 @@ function machine(ctx = {}) {
       blurFocusedInputIfNeeded(ctx2) {
         if (!ctx2.blurOnComplete)
           return;
-        nextTick(() => {
+        raf(() => {
           var _a;
           (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.blur();
         });
@@ -487,7 +541,8 @@ function isValidType(value, type) {
   return !!((_a = REGEX[type]) == null ? void 0 : _a.test(value));
 }
 function assign(ctx, value) {
-  for (let i = 0; i < ctx.value.length; i++) {
+  const len = ctx.value.length;
+  for (let i = 0; i < len; i++) {
     if (Array.isArray(value)) {
       if (!value[i])
         continue;
@@ -497,4 +552,7 @@ function assign(ctx, value) {
     }
   }
 }
+function lastChar(value) {
+  return value.charAt(value.length - 1);
+}
 //# sourceMappingURL=index.js.map