@zag-js/pin-input 0.1.7 → 0.1.10

package/dist/index.mjs

@@ -19,37 +19,85 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // ../../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",
@@ -76,78 +124,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;
@@ -157,35 +157,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}`;
   },
-  getRootEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getRootId(ctx)),
+  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.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;
@@ -218,6 +215,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({
@@ -266,6 +273,9 @@ function connect(state, send, normalize = normalizeProp) {
             },
             ArrowRight() {
               send("ARROW_RIGHT");
+            },
+            Enter() {
+              send("ENTER");
             }
           };
           const key = getEventKey(event, { dir: state.context.dir });
@@ -289,14 +299,13 @@ function connect(state, send, normalize = normalizeProp) {
 }
 
 // src/pin-input.machine.ts
-import { createMachine, guards, ref } from "@zag-js/core";
+import { createMachine, guards } from "@zag-js/core";
 var { and, not } = guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return createMachine({
     id: "pin-input",
     initial: "unknown",
     context: __spreadProps(__spreadValues({
-      uid: "pin-input",
       value: [],
       focusedIndex: -1,
       placeholder: "\u25CB",
@@ -316,7 +325,7 @@ function machine(ctx = {}) {
     watch: {
       focusedIndex: "focusInput",
       value: "invokeOnChange",
-      isValueComplete: ["invokeComplete", "blurFocusedInputIfNeeded"]
+      isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
     },
     on: {
       SET_VALUE: [
@@ -343,11 +352,11 @@ function machine(ctx = {}) {
             {
               guard: "autoFocus",
               target: "focused",
-              actions: ["setupDocument", "setupValue", "setFocusIndexToFirst"]
+              actions: ["setupValue", "setFocusIndexToFirst"]
             },
             {
               target: "idle",
-              actions: ["setupDocument", "setupValue"]
+              actions: "setupValue"
             }
           ]
         }
@@ -399,6 +408,10 @@ function machine(ctx = {}) {
               actions: ["setPrevFocusedIndex", "clearFocusedValue"]
             }
           ],
+          ENTER: {
+            guard: "isValueComplete",
+            actions: "requestFormSubmit"
+          },
           KEY_DOWN: {
             guard: not("isValidValue"),
             actions: ["preventDefault", "invokeOnInvalid"]
@@ -412,7 +425,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;
       },
@@ -421,19 +439,10 @@ function machine(ctx = {}) {
       isDisabled: (ctx2) => !!ctx2.disabled
     },
     actions: {
-      setupDocument: (ctx2, evt) => {
-        if (evt.doc)
-          ctx2.doc = ref(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = 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(() => {
@@ -443,17 +452,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;
@@ -510,6 +520,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();
       }
     }
   });
@@ -544,4 +561,3 @@ export {
   connect,
   machine
 };
-//# sourceMappingURL=index.mjs.map

package/dist/pin-input.connect.d.ts

@@ -1,6 +1,6 @@
-import { PropTypes, ReactPropTypes } from "@zag-js/types";
-import { Send, State } from "./pin-input.types";
-export declare function connect<T extends PropTypes = ReactPropTypes>(state: State, send: Send, normalize?: import("@zag-js/types").NormalizeProps): {
+import type { NormalizeProps, PropTypes } from "@zag-js/types";
+import type { Send, State } from "./pin-input.types";
+export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
     value: string[];
     valueAsString: string;
     isValueComplete: boolean;
@@ -9,8 +9,8 @@ export declare function connect<T extends PropTypes = ReactPropTypes>(state: Sta
     setValueAtIndex(index: number, value: string): void;
     focus(): void;
     rootProps: T["element"];
+    hiddenInputProps: T["input"];
     getInputProps({ index }: {
         index: number;
     }): T["input"];
 };
-//# sourceMappingURL=pin-input.connect.d.ts.map

package/dist/pin-input.dom.d.ts

@@ -1,12 +1,27 @@
-import { MachineContext as Ctx } from "./pin-input.types";
+import type { MachineContext as Ctx } from "./pin-input.types";
 export declare const dom: {
-    getDoc: (ctx: Ctx) => Document;
-    getRootNode: (ctx: Ctx) => Document | ShadowRoot;
+    getRootNode: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Window & typeof globalThis;
+    getActiveElement: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => HTMLElement;
+    getById: <T_1 = HTMLElement>(ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }, id: string) => T_1;
+} & {
     getRootId: (ctx: Ctx) => string;
     getInputId: (ctx: Ctx, id: string) => string;
+    getHiddenInputId: (ctx: Ctx) => string;
     getRootEl: (ctx: Ctx) => HTMLElement;
     getElements: (ctx: Ctx) => HTMLInputElement[];
     getFocusedEl: (ctx: Ctx) => HTMLInputElement;
     getFirstInputEl: (ctx: Ctx) => HTMLInputElement;
+    getHiddenInputEl: (ctx: Ctx) => HTMLInputElement;
 };
-//# sourceMappingURL=pin-input.dom.d.ts.map

package/dist/pin-input.machine.d.ts

@@ -1,3 +1,2 @@
-import { MachineContext, MachineState, UserDefinedContext } from "./pin-input.types";
-export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
-//# sourceMappingURL=pin-input.machine.d.ts.map
+import type { MachineContext, MachineState, UserDefinedContext } from "./pin-input.types";
+export declare function machine(ctx: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;

package/dist/pin-input.types.d.ts

@@ -1,13 +1,22 @@
 import type { StateMachine as S } from "@zag-js/core";
-import type { Context, DirectionProperty } from "@zag-js/types";
+import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
 declare type IntlMessages = {
     inputLabel: (index: number, length: number) => string;
 };
 declare type ElementIds = Partial<{
     root: string;
+    hiddenInput: string;
     input(id: string): string;
 }>;
-declare type PublicContext = DirectionProperty & {
+declare type PublicContext = DirectionProperty & CommonProperties & {
+    /**
+     * The name of the input element. Useful for form submission.
+     */
+    name?: string;
+    /**
+     * The regular expression that the user-entered input value is checked against.
+     */
+    pattern?: string;
     /**
      * The ids of the elements in the pin input. Useful for composition.
      */
@@ -74,7 +83,7 @@ declare type PublicContext = DirectionProperty & {
      */
     messages: IntlMessages;
 };
-export declare type UserDefinedContext = Partial<PublicContext>;
+export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
 declare type ComputedContext = Readonly<{
     /**
      * @computed
@@ -111,4 +120,3 @@ export declare type MachineState = {
 export declare type State = S.State<MachineContext, MachineState>;
 export declare type Send = S.Send<S.AnyEventObject>;
 export {};
-//# sourceMappingURL=pin-input.types.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "description": "Core logic for the pin-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,9 +29,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.6",
-    "@zag-js/dom-utils": "0.1.4",
-    "@zag-js/types": "0.1.2",
+    "@zag-js/core": "0.1.8",
+    "@zag-js/types": "0.2.2"
+  },
+  "devDependencies": {
+    "@zag-js/dom-utils": "0.1.7",
     "@zag-js/utils": "0.1.2"
   },
   "scripts": {

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAC7C,YAAY,EAAE,kBAAkB,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAA"}