@zag-js/number-input 0.1.0 → 0.1.3

package/dist/index.js

@@ -58,6 +58,12 @@ function nextTick(fn) {
     });
   };
 }
+function raf(fn) {
+  const id = globalThis.requestAnimationFrame(fn);
+  return function cleanup() {
+    globalThis.cancelAnimationFrame(id);
+  };
+}
 var noop = () => {
 };
 var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
@@ -161,6 +167,30 @@ function observeAttributes(node, attributes, fn) {
   obs.observe(node, { attributes: true, attributeFilter: attrs });
   return () => obs.disconnect();
 }
+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 addPointerlockChangeListener(doc, fn) {
   return addDomEvent(doc, "pointerlockchange", fn, false);
 }
@@ -201,6 +231,34 @@ function requestPointerLock(doc, handlers = {}) {
     exit();
   };
 }
+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
+};
 
 // ../../utilities/number/dist/index.mjs
 var __defProp2 = Object.defineProperty;
@@ -223,11 +281,11 @@ var __spreadValues2 = (a, b) => {
   return a;
 };
 var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
-var nf = new Intl.NumberFormat("en-US", { style: "decimal" });
+var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
 function formatter(n) {
   return parseFloat(nf.format(n));
 }
-function wrap(num, max) {
+function wrap2(num, max) {
   return (num % max + max) % max;
 }
 function round(v, t2) {
@@ -245,9 +303,16 @@ function roundToPx(num) {
 function clamp(v, o) {
   return Math.min(Math.max(valueOf(v), o.min), o.max);
 }
-function countDecimals(v) {
-  var _a, _b;
-  return (_b = (_a = nf.formatToParts(v).find((p) => p.type === "fraction")) == null ? void 0 : _a.value.length) != null ? _b : 0;
+function countDecimals(value) {
+  if (!Number.isFinite(value))
+    return 0;
+  let e = 1;
+  let p = 0;
+  while (Math.round(value * e) / e !== value) {
+    e *= 10;
+    p += 1;
+  }
+  return p;
 }
 var increment = (v, s) => formatter(valueOf(v) + s);
 var decrement = (v, s) => formatter(valueOf(v) - s);
@@ -261,9 +326,7 @@ function valueOf(v) {
 function getMaxPrecision(o) {
   var _a;
   const stepPrecision = countDecimals(o.step);
-  const val = valueOf(o.value);
-  const valuePrecision = Number.isNaN(val) ? stepPrecision : Math.max(countDecimals(val), stepPrecision);
-  return Math.max(valuePrecision, (_a = o.precision) != null ? _a : 0);
+  return Math.max(stepPrecision, (_a = o.precision) != null ? _a : 0);
 }
 function roundToPrecision(v, o) {
   return round(v, getMaxPrecision(__spreadProps2(__spreadValues2({}, o), { value: v })));
@@ -352,7 +415,7 @@ var dom = {
     const win = dom.getWin(ctx);
     const width = win.innerWidth;
     const half = roundToPx(7.5);
-    point.x = wrap(point.x + half, width) - half;
+    point.x = wrap2(point.x + half, width) - half;
     return { hint, point };
   },
   createVirtualCursor(ctx) {
@@ -382,15 +445,23 @@ var dom = {
   }
 };
 
+// ../../utilities/core/dist/index.mjs
+var pipe2 = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
+var ua = (v) => isDom() && v.test(navigator.userAgent);
+var isDom = () => !!(typeof window !== "undefined");
+var isSafari = () => ua(/^((?!chrome|android).)*safari/i);
+var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
+
 // src/number-input.utils.ts
 var utils = {
   isValidNumericEvent: (ctx, event) => {
     var _a, _b;
     if (event.key == null)
       return true;
-    const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
-    const isSingleCharacterKey = event.key.length === 1;
-    if (isModifierKey || !isSingleCharacterKey)
+    const isModifier = isModifiedEvent(event);
+    const isSingleKey = event.key.length === 1;
+    if (isModifier || !isSingleKey)
       return true;
     return (_b = (_a = ctx.validateCharacter) == null ? void 0 : _a.call(ctx, event.key)) != null ? _b : utils.isFloatingPoint(event.key);
   },
@@ -459,10 +530,8 @@ function connect(state, send, normalize = normalizeProp) {
       send({ type: "SET_VALUE", value: state.context.min });
     },
     focus() {
-      nextTick(() => {
-        var _a;
-        (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
-      });
+      var _a;
+      (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
     },
     rootProps: normalize.element({
       id: dom.getRootId(state.context),
@@ -609,15 +678,6 @@ function connect(state, send, normalize = normalizeProp) {
 
 // src/number-input.machine.ts
 var import_core = require("@zag-js/core");
-
-// ../../utilities/core/dist/index.mjs
-var pipe2 = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
-var ua = (v) => isDom() && v.test(navigator.userAgent);
-var isDom = () => !!(typeof window !== "undefined");
-var isSafari = () => ua(/^((?!chrome|android).)*safari/i);
-var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
-
-// src/number-input.machine.ts
 var { not, and } = import_core.guards;
 function machine(ctx = {}) {
   return (0, import_core.createMachine)({
@@ -722,7 +782,7 @@ function machine(ctx = {}) {
             actions: "setToMax"
           },
           CHANGE: {
-            actions: ["setValue", "setSelectionRange", "setHint"]
+            actions: ["setValue", "setHint"]
           },
           BLUR: [
             {
@@ -736,6 +796,7 @@ function machine(ctx = {}) {
               actions: ["clampValue", "clearHint"]
             },
             {
+              target: "idle",
               actions: ["roundValue"]
             }
           ]
@@ -756,7 +817,7 @@ function machine(ctx = {}) {
         on: {
           PRESS_UP: {
             target: "focused",
-            actions: ["clearHint", "restoreSelection"]
+            actions: "clearHint"
           }
         }
       },
@@ -778,7 +839,7 @@ function machine(ctx = {}) {
         on: {
           PRESS_UP: {
             target: "focused",
-            actions: ["clearHint", "restoreSelection"]
+            actions: "clearHint"
           }
         }
       },
@@ -890,7 +951,7 @@ function machine(ctx = {}) {
         if (!ctx2.focusInputOnChange)
           return;
         const input = dom.getInputEl(ctx2);
-        nextTick(() => input == null ? void 0 : input.focus());
+        raf(() => input == null ? void 0 : input.focus());
       },
       increment(ctx2, evt) {
         ctx2.value = utils.increment(ctx2, evt.step);
@@ -927,20 +988,6 @@ function machine(ctx = {}) {
       setHintToSet(ctx2) {
         ctx2.hint = "set";
       },
-      setSelectionRange(ctx2, evt) {
-        ctx2.inputSelection = {
-          start: evt.target.selectionStart,
-          end: evt.target.selectionEnd
-        };
-      },
-      restoreSelection(ctx2) {
-        var _a, _b, _c;
-        const input = dom.getInputEl(ctx2);
-        if (!input || !ctx2.inputSelection)
-          return;
-        input.selectionStart = (_b = ctx2.inputSelection.start) != null ? _b : (_a = input.value) == null ? void 0 : _a.length;
-        input.selectionEnd = (_c = ctx2.inputSelection.end) != null ? _c : input.selectionStart;
-      },
       invokeOnChange(ctx2) {
         var _a;
         (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value, valueAsNumber: ctx2.valueAsNumber });