@zag-js/pin-input 0.1.7 → 0.1.10

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export { connect } from "./pin-input.connect";
 export { machine } from "./pin-input.machine";
 export type { UserDefinedContext as Context } from "./pin-input.types";
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -42,37 +43,85 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // ../../utilities/dom/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
 var ariaAttr = (guard) => {
   return guard ? "true" : void 0;
 };
-function nextTick(fn) {
-  const set = /* @__PURE__ */ new Set();
-  function raf2(fn2) {
-    const id = globalThis.requestAnimationFrame(fn2);
-    set.add(() => globalThis.cancelAnimationFrame(id));
-  }
-  raf2(() => raf2(fn));
-  return function cleanup() {
-    set.forEach(function(fn2) {
-      fn2();
-    });
-  };
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
 }
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(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) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
+  return __spreadValues2(__spreadValues2({}, dom2), helpers);
 }
-var isDom = () => typeof window !== "undefined";
-var isTouchDevice = isDom() && !!navigator.maxTouchPoints;
 function getNativeEvent(e) {
   var _a;
   return (_a = e.nativeEvent) != null ? _a : e;
 }
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
+function getDescriptor(el, options) {
+  var _a;
+  const { type, property } = options;
+  const proto = getWindow(el)[type].prototype;
+  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+}
+function dispatchInputValueEvent(el, value) {
+  var _a;
+  if (!el)
+    return;
+  const win = getWindow(el);
+  if (!(el instanceof win.HTMLInputElement))
+    return;
+  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
+  (_a = desc.set) == null ? void 0 : _a.call(el, value);
+  const event = new win.Event("input", { bubbles: true });
+  el.dispatchEvent(event);
+}
 var rtlKeyMap = {
   ArrowLeft: "ArrowRight",
   ArrowRight: "ArrowLeft",
@@ -99,78 +148,30 @@ function getEventKey(event, options = {}) {
   }
   return key;
 }
+function raf(fn) {
+  const id = globalThis.requestAnimationFrame(fn);
+  return function cleanup() {
+    globalThis.cancelAnimationFrame(id);
+  };
+}
 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
+var visuallyHiddenStyle = {
+  border: "0",
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: "0",
+  position: "absolute",
+  width: "1px",
+  whiteSpace: "nowrap",
+  wordWrap: "normal"
 };
 
-// ../../types/dist/index.mjs
-function createNormalizer(fn) {
-  return new Proxy({}, {
-    get() {
-      return fn;
-    }
-  });
-}
-var normalizeProp = createNormalizer((v) => v);
-
 // ../../utilities/core/dist/index.mjs
-var fromLength = (length) => Array.from(Array(length).keys());
-var isDom2 = () => typeof window !== "undefined";
-var isTouchDevice2 = isDom2() && !!navigator.maxTouchPoints;
-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;
@@ -180,35 +181,32 @@ function invariant(...a) {
 }
 
 // src/pin-input.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
+var dom = defineDomHelpers({
   getRootId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input:${ctx.uid}`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input:${ctx.id}`;
   },
   getInputId: (ctx, id) => {
     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}`;
+    return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) != null ? _c : `pin-input:${ctx.id}:${id}`;
+  },
+  getHiddenInputId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.hiddenInput) != null ? _b : `pin-input:${ctx.id}:hidden`;
   },
-  getRootEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getRootId(ctx)),
+  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getElements: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
     const selector = `input[data-ownedby=${ownerId}]`;
     return queryAll(dom.getRootEl(ctx), selector);
   },
   getFocusedEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
-  getFirstInputEl: (ctx) => dom.getElements(ctx)[0]
-};
+  getFirstInputEl: (ctx) => dom.getElements(ctx)[0],
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
+});
 
 // src/pin-input.connect.ts
-function connect(state, send, normalize = normalizeProp) {
+function connect(state, send, normalize) {
   const isValueComplete = state.context.isValueComplete;
   const isInvalid = state.context.invalid;
   const focusedIndex = state.context.focusedIndex;
@@ -241,6 +239,16 @@ function connect(state, send, normalize = normalizeProp) {
       "data-disabled": dataAttr(state.context.disabled),
       "data-complete": dataAttr(isValueComplete)
     }),
+    hiddenInputProps: normalize.input({
+      "aria-hidden": true,
+      type: "text",
+      tabIndex: -1,
+      id: dom.getHiddenInputId(state.context),
+      name: state.context.name,
+      style: visuallyHiddenStyle,
+      maxLength: state.context.valueLength,
+      defaultValue: state.context.valueAsString
+    }),
     getInputProps({ index }) {
       const inputType = state.context.type === "numeric" ? "tel" : "text";
       return normalize.input({
@@ -289,6 +297,9 @@ function connect(state, send, normalize = normalizeProp) {
             },
             ArrowRight() {
               send("ARROW_RIGHT");
+            },
+            Enter() {
+              send("ENTER");
             }
           };
           const key = getEventKey(event, { dir: state.context.dir });
@@ -314,12 +325,11 @@ function connect(state, send, normalize = normalizeProp) {
 // src/pin-input.machine.ts
 var import_core = require("@zag-js/core");
 var { and, not } = import_core.guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return (0, import_core.createMachine)({
     id: "pin-input",
     initial: "unknown",
     context: __spreadProps(__spreadValues({
-      uid: "pin-input",
       value: [],
       focusedIndex: -1,
       placeholder: "\u25CB",
@@ -339,7 +349,7 @@ function machine(ctx = {}) {
     watch: {
       focusedIndex: "focusInput",
       value: "invokeOnChange",
-      isValueComplete: ["invokeComplete", "blurFocusedInputIfNeeded"]
+      isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
     },
     on: {
       SET_VALUE: [
@@ -366,11 +376,11 @@ function machine(ctx = {}) {
             {
               guard: "autoFocus",
               target: "focused",
-              actions: ["setupDocument", "setupValue", "setFocusIndexToFirst"]
+              actions: ["setupValue", "setFocusIndexToFirst"]
             },
             {
               target: "idle",
-              actions: ["setupDocument", "setupValue"]
+              actions: "setupValue"
             }
           ]
         }
@@ -422,6 +432,10 @@ function machine(ctx = {}) {
               actions: ["setPrevFocusedIndex", "clearFocusedValue"]
             }
           ],
+          ENTER: {
+            guard: "isValueComplete",
+            actions: "requestFormSubmit"
+          },
           KEY_DOWN: {
             guard: not("isValidValue"),
             actions: ["preventDefault", "invokeOnInvalid"]
@@ -435,7 +449,12 @@ function machine(ctx = {}) {
       isValueEmpty: (_ctx, evt) => evt.value === "",
       hasValue: (ctx2) => ctx2.value[ctx2.focusedIndex] !== "",
       isValueComplete: (ctx2) => ctx2.isValueComplete,
-      isValidValue: (ctx2, evt) => isValidType(evt.value, ctx2.type),
+      isValidValue: (ctx2, evt) => {
+        if (!ctx2.pattern)
+          return isValidType(evt.value, ctx2.type);
+        const regex = new RegExp(ctx2.pattern, "g");
+        return regex.test(evt.value);
+      },
       isFinalValue: (ctx2) => {
         return ctx2.filledValueLength + 1 === ctx2.valueLength && ctx2.value.findIndex((v) => v.trim() === "") === ctx2.focusedIndex;
       },
@@ -444,19 +463,10 @@ function machine(ctx = {}) {
       isDisabled: (ctx2) => !!ctx2.disabled
     },
     actions: {
-      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) => {
-        nextTick(() => {
-          const inputs = dom.getElements(ctx2);
-          const empty = fromLength(inputs.length).map(() => "");
-          ctx2.value = Object.assign(empty, ctx2.value);
-        });
+        const inputs = dom.getElements(ctx2);
+        const empty = Array.from({ length: inputs.length }).map(() => "");
+        ctx2.value = Object.assign(empty, ctx2.value);
       },
       focusInput: (ctx2) => {
         raf(() => {
@@ -466,17 +476,18 @@ function machine(ctx = {}) {
           (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.focus();
         });
       },
-      invokeComplete: (ctx2) => {
+      invokeOnComplete: (ctx2) => {
         var _a;
-        if (ctx2.isValueComplete) {
-          (_a = ctx2.onComplete) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
-        }
+        if (!ctx2.isValueComplete)
+          return;
+        (_a = ctx2.onComplete) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
       },
       invokeOnChange: (ctx2, evt) => {
         var _a;
-        if (evt.type !== "SETUP") {
-          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value) });
-        }
+        if (evt.type === "SETUP")
+          return;
+        (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value) });
+        dispatchInputValueEvent(dom.getHiddenInputEl(ctx2), ctx2.valueAsString);
       },
       invokeOnInvalid: (ctx2, evt) => {
         var _a;
@@ -533,6 +544,13 @@ function machine(ctx = {}) {
           var _a;
           (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.blur();
         });
+      },
+      requestFormSubmit(ctx2) {
+        var _a;
+        if (!ctx2.name)
+          return;
+        const input = dom.getHiddenInputEl(ctx2);
+        (_a = input == null ? void 0 : input.form) == null ? void 0 : _a.requestSubmit();
       }
     }
   });
@@ -563,4 +581,3 @@ function assign(ctx, value) {
 function lastChar(value) {
   return value.charAt(value.length - 1);
 }
-//# sourceMappingURL=index.js.map