@zag-js/number-input 2.0.0-next.0 → 2.0.0-next.2

package/dist/number-input.machine.js

@@ -38,12 +38,13 @@ var import_dom_query = require("@zag-js/dom-query");
 var import_utils = require("@zag-js/utils");
 var import_cursor = require("./cursor.js");
 var dom = __toESM(require("./number-input.dom.js"));
-var import_number_input = require("./number-input.utils.js");
+var import_number_input = require("./number-input.translations.js");
+var import_number_input2 = require("./number-input.utils.js");
 var { choose, guards, createMachine } = (0, import_core.setup)();
 var { not, and } = guards;
 var machine = createMachine({
   props({ props }) {
-    const step = (0, import_number_input.getDefaultStep)(props.step, props.formatOptions);
+    const step = (0, import_number_input2.getDefaultStep)(props.step, props.formatOptions);
     return {
       dir: "ltr",
       locale: "en-US",
@@ -54,8 +55,6 @@ var machine = createMachine({
       pattern: "-?[0-9]*(.[0-9]+)?",
       defaultValue: "",
       step,
-      largeStep: props.largeStep ?? step * 10,
-      smallStep: props.smallStep ?? step * 0.1,
       min: Number.MIN_SAFE_INTEGER,
       max: Number.MAX_SAFE_INTEGER,
       spinOnPress: true,
@@ -63,25 +62,22 @@ var machine = createMachine({
       scrubberDirection: "horizontal",
       snapOnStep: false,
       ...props,
-      translations: {
-        incrementLabel: "increment value",
-        decrementLabel: "decrease value",
-        ...props.translations
-      }
+      largeStep: props.largeStep ?? 10 * step,
+      smallStep: props.smallStep ?? step / 10
     };
   },
   initialState() {
     return "idle";
   },
-  context({ prop, bindable, getComputed }) {
+  context({ prop, bindable, getComputed, getEvent }) {
     return {
       value: bindable(() => ({
         defaultValue: prop("defaultValue"),
         value: prop("value"),
         onChange(value) {
           const computed = getComputed();
-          const valueAsNumber = (0, import_number_input.parseValue)(value, { computed, prop });
-          prop("onValueChange")?.({ value, valueAsNumber });
+          const valueAsNumber = (0, import_number_input2.parseValue)(value, { computed, prop });
+          prop("onValueChange")?.({ value, valueAsNumber, reason: getEvent().src });
         }
       })),
       hint: bindable(() => ({ defaultValue: null })),
@@ -99,8 +95,8 @@ var machine = createMachine({
   },
   computed: {
     isRtl: ({ prop }) => prop("dir") === "rtl",
-    valueAsNumber: ({ context, computed, prop }) => (0, import_number_input.parseValue)(context.get("value"), { computed, prop }),
-    formattedValue: ({ computed, prop }) => (0, import_number_input.formatValue)(computed("valueAsNumber"), { computed, prop }),
+    valueAsNumber: ({ context, computed, prop }) => (0, import_number_input2.parseValue)(context.get("value"), { computed, prop }),
+    formattedValue: ({ computed, prop }) => (0, import_number_input2.formatValue)(computed("valueAsNumber"), { computed, prop }),
     isAtMin: ({ computed, prop }) => (0, import_utils.isValueAtMin)(computed("valueAsNumber"), prop("min")),
     isAtMax: ({ computed, prop }) => (0, import_utils.isValueAtMax)(computed("valueAsNumber"), prop("max")),
     isOutOfRange: ({ computed, prop }) => !(0, import_utils.isValueWithinRange)(computed("valueAsNumber"), prop("min"), prop("max")),
@@ -108,14 +104,22 @@ var machine = createMachine({
     isDisabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled"),
     canIncrement: ({ prop, computed }) => prop("allowOverflow") || !computed("isAtMax"),
     canDecrement: ({ prop, computed }) => prop("allowOverflow") || !computed("isAtMin"),
-    valueText: ({ prop, context }) => prop("translations").valueText?.(context.get("value")),
+    // Only useful when the display differs from `aria-valuenow`, as with currency or percent.
+    valueText: ({ prop, context, computed }) => {
+      const translations = (0, import_utils.mergeWithDefault)(import_number_input.defaultTranslations, prop("translations"));
+      const custom = translations.valueText?.(context.get("value"));
+      if (custom) return custom;
+      if (computed("isValueEmpty")) return void 0;
+      const formatted = computed("formattedValue");
+      return formatted === String(computed("valueAsNumber")) ? void 0 : formatted;
+    },
     formatter: (0, import_core.memo)(
       ({ prop }) => [prop("locale"), prop("formatOptions")],
-      ([locale, formatOptions]) => (0, import_number_input.createFormatter)(locale, formatOptions)
+      ([locale, formatOptions]) => (0, import_number_input2.createFormatter)(locale, formatOptions)
     ),
     parser: (0, import_core.memo)(
       ({ prop }) => [prop("locale"), prop("formatOptions")],
-      ([locale, formatOptions]) => (0, import_number_input.createParser)(locale, formatOptions)
+      ([locale, formatOptions]) => (0, import_number_input2.createParser)(locale, formatOptions)
     )
   },
   watch({ track, action, context, computed, prop }) {
@@ -123,6 +127,7 @@ var machine = createMachine({
       action(["syncInputElement"]);
     });
     track([() => computed("isOutOfRange")], () => {
+      if (!computed("isOutOfRange")) return;
       action(["invokeOnInvalid"]);
     });
     track([() => context.hash("scrubberCursorPoint")], () => {
@@ -131,32 +136,35 @@ var machine = createMachine({
   },
   effects: ["trackFormControl", "detectPointerLock"],
   on: {
+    "INPUT.FOCUS": {
+      actions: ["invokeOnFocus"]
+    },
     "VALUE.SET": {
-      actions: ["setRawValue"]
+      actions: ["setRawValue", "invokeOnValueCommit"]
     },
     "VALUE.CLEAR": {
-      actions: ["clearValue"]
+      actions: ["clearValue", "invokeOnValueCommit"]
     },
     "VALUE.INCREMENT": {
-      actions: ["increment"]
+      actions: ["increment", "invokeOnValueCommit"]
     },
     "VALUE.DECREMENT": {
-      actions: ["decrement"]
+      actions: ["decrement", "invokeOnValueCommit"]
     }
   },
   states: {
     idle: {
       on: {
         "TRIGGER.PRESS_DOWN": [
-          { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
+          { guard: "isTouchPointer", target: "pressed", actions: ["setHint"] },
           {
-            target: "before:spin",
-            actions: ["focusInput", "invokeOnFocus", "setHint"]
+            target: "pressed",
+            actions: ["focusInput", "setHint"]
           }
         ],
         "SCRUBBER.PRESS_DOWN": {
           target: "scrubbing",
-          actions: ["focusInput", "invokeOnFocus", "setHint", "setCursorPoint"]
+          actions: ["focusInput", "setHint", "setCursorPoint"]
         },
         "INPUT.FOCUS": {
           target: "focused",
@@ -169,24 +177,24 @@ var machine = createMachine({
       effects: ["attachWheelListener"],
       on: {
         "TRIGGER.PRESS_DOWN": [
-          { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
-          { target: "before:spin", actions: ["focusInput", "setHint"] }
+          { guard: "isTouchPointer", target: "pressed", actions: ["setHint"] },
+          { target: "pressed", actions: ["focusInput", "setHint"] }
         ],
         "SCRUBBER.PRESS_DOWN": {
           target: "scrubbing",
           actions: ["focusInput", "setHint", "setCursorPoint"]
         },
         "INPUT.ARROW_UP": {
-          actions: ["increment"]
+          actions: ["increment", "invokeOnValueCommit"]
         },
         "INPUT.ARROW_DOWN": {
-          actions: ["decrement"]
+          actions: ["decrement", "invokeOnValueCommit"]
         },
         "INPUT.HOME": {
-          actions: ["decrementToMin"]
+          actions: ["decrementToMin", "invokeOnValueCommit"]
         },
         "INPUT.END": {
-          actions: ["incrementToMax"]
+          actions: ["incrementToMax", "invokeOnValueCommit"]
         },
         "INPUT.CHANGE": {
           actions: ["setValue", "setHint"]
@@ -200,41 +208,66 @@ var machine = createMachine({
           {
             guard: not("isInRange"),
             target: "idle",
-            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnInvalid", "invokeOnValueCommit"]
+            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
           },
           {
             target: "idle",
             actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
           }
         ],
+        // No target, so the input stays focused. It must not report a blur.
         "INPUT.ENTER": {
-          actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
+          actions: ["setFormattedValue", "clearHint", "invokeOnValueCommit"]
         }
       }
     },
-    "before:spin": {
+    pressed: {
       tags: ["focus"],
-      effects: ["trackButtonDisabled", "waitForChangeDelay"],
-      entry: choose([
-        { guard: "isIncrementHint", actions: ["increment"] },
-        { guard: "isDecrementHint", actions: ["decrement"] }
-      ]),
+      initial: "waiting",
+      effects: ["trackButtonDisabled", "preventContextMenu"],
       on: {
-        CHANGE_DELAY: {
-          target: "spinning",
-          guard: and("isInRange", "spinOnPress")
-        },
         "TRIGGER.PRESS_UP": [
-          { guard: "isTouchPointer", target: "focused", actions: ["clearHint"] },
-          { target: "focused", actions: ["focusInput", "clearHint"] }
+          { guard: "isTouchPointer", target: "focused", actions: ["clearHint", "invokeOnValueCommit"] },
+          { target: "focused", actions: ["focusInput", "clearHint", "invokeOnValueCommit"] }
         ]
+      },
+      states: {
+        waiting: {
+          effects: ["waitForChangeDelay"],
+          entry: choose([
+            { guard: "isIncrementHint", actions: ["increment"] },
+            { guard: "isDecrementHint", actions: ["decrement"] }
+          ]),
+          on: {
+            CHANGE_DELAY: {
+              target: "repeating",
+              guard: and("isInRange", "spinOnPress")
+            }
+          }
+        },
+        repeating: {
+          effects: ["spinValue"],
+          on: {
+            SPIN: [
+              {
+                guard: "isIncrementHint",
+                actions: ["increment"]
+              },
+              {
+                guard: "isDecrementHint",
+                actions: ["decrement"]
+              }
+            ]
+          }
+        }
       }
     },
-    spinning: {
+    scrubbing: {
       tags: ["focus"],
-      effects: ["trackButtonDisabled", "spinValue"],
+      effects: ["activatePointerLock", "trackMousemove", "preventTextSelection", "trackVisualViewport"],
+      entry: ["clearCumulativeDelta"],
       on: {
-        SPIN: [
+        "SCRUBBER.STEP": [
           {
             guard: "isIncrementHint",
             actions: ["increment"]
@@ -244,20 +277,9 @@ var machine = createMachine({
             actions: ["decrement"]
           }
         ],
-        "TRIGGER.PRESS_UP": {
-          target: "focused",
-          actions: ["focusInput", "clearHint"]
-        }
-      }
-    },
-    scrubbing: {
-      tags: ["focus"],
-      effects: ["activatePointerLock", "trackMousemove", "preventTextSelection", "trackVisualViewport"],
-      entry: ["clearCumulativeDelta"],
-      on: {
         "SCRUBBER.POINTER_UP": {
           target: "focused",
-          actions: ["focusInput", "clearCursorPoint", "clearCumulativeDelta"]
+          actions: ["focusInput", "clearCursorPoint", "clearCumulativeDelta", "invokeOnValueCommit"]
         },
         "SCRUBBER.POINTER_MOVE": {
           actions: ["accumulateDelta", "setCursorPoint"]
@@ -282,9 +304,13 @@ var machine = createMachine({
         }, 300);
         return () => clearTimeout(id);
       },
-      spinValue({ send }) {
+      preventContextMenu({ scope }) {
+        return (0, import_dom_query.addDomEvent)(scope.getWin(), "contextmenu", (event) => event.preventDefault());
+      },
+      spinValue({ send, context }) {
         const id = setInterval(() => {
-          send({ type: "SPIN" });
+          const src = context.get("hint") === "increment" ? "increment-press" : "decrement-press";
+          send({ type: "SPIN", src });
         }, 50);
         return () => clearInterval(id);
       },
@@ -311,7 +337,8 @@ var machine = createMachine({
         return (0, import_dom_query.observeAttributes)(btn, {
           attributes: ["disabled"],
           callback() {
-            send({ type: "TRIGGER.PRESS_UP", src: "attr" });
+            const src = hint === "increment" ? "increment-press" : "decrement-press";
+            send({ type: "TRIGGER.PRESS_UP", src });
           }
         });
       },
@@ -322,9 +349,9 @@ var machine = createMachine({
           event.preventDefault();
           const dir = Math.sign(event.deltaY) * -1;
           if (dir === 1) {
-            send({ type: "VALUE.INCREMENT" });
+            send({ type: "VALUE.INCREMENT", src: "wheel" });
           } else if (dir === -1) {
-            send({ type: "VALUE.DECREMENT" });
+            send({ type: "VALUE.DECREMENT", src: "wheel" });
           }
         }
         return (0, import_dom_query.addDomEvent)(inputEl, "wheel", onWheel, { passive: false });
@@ -365,7 +392,7 @@ var machine = createMachine({
           });
         }
         function onMouseup() {
-          send({ type: "SCRUBBER.POINTER_UP" });
+          send({ type: "SCRUBBER.POINTER_UP", src: "scrub" });
         }
         return (0, import_utils.callAll)((0, import_dom_query.addDomEvent)(doc, "mousemove", onMousemove, false), (0, import_dom_query.addDomEvent)(doc, "mouseup", onMouseup, false));
       }
@@ -382,23 +409,23 @@ var machine = createMachine({
         if (!prop("allowOverflow")) nextValue = (0, import_utils.clampValue)(nextValue, prop("min"), prop("max"));
         if (prop("snapOnStep"))
           nextValue = (0, import_utils.snapValueToStep)(nextValue, prop("min"), prop("max"), event.step ?? prop("step"));
-        context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
+        context.set("value", (0, import_number_input2.formatValue)(nextValue, { computed, prop }));
       },
       decrement({ context, event, prop, computed }) {
         let nextValue = (0, import_utils.decrementValue)(computed("valueAsNumber"), event.step ?? prop("step"));
         if (!prop("allowOverflow")) nextValue = (0, import_utils.clampValue)(nextValue, prop("min"), prop("max"));
         if (prop("snapOnStep"))
           nextValue = (0, import_utils.snapValueToStep)(nextValue, prop("min"), prop("max"), event.step ?? prop("step"));
-        context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
+        context.set("value", (0, import_number_input2.formatValue)(nextValue, { computed, prop }));
       },
       setClampedValue({ context, prop, computed }) {
         const nextValue = (0, import_utils.clampValue)(computed("valueAsNumber"), prop("min"), prop("max"));
-        context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
+        context.set("value", (0, import_number_input2.formatValue)(nextValue, { computed, prop }));
       },
       setRawValue({ context, event, prop, computed }) {
-        let nextValue = (0, import_number_input.parseValue)(event.value, { computed, prop });
+        let nextValue = typeof event.value === "number" ? event.value : (0, import_number_input2.parseValue)(event.value, { computed, prop });
         if (!prop("allowOverflow")) nextValue = (0, import_utils.clampValue)(nextValue, prop("min"), prop("max"));
-        context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
+        context.set("value", (0, import_number_input2.formatValue)(nextValue, { computed, prop }));
       },
       setValue({ context, event }) {
         const value = event.target?.value ?? event.value;
@@ -408,11 +435,11 @@ var machine = createMachine({
         context.set("value", "");
       },
       incrementToMax({ context, prop, computed }) {
-        const value = (0, import_number_input.formatValue)(prop("max"), { computed, prop });
+        const value = (0, import_number_input2.formatValue)(prop("max"), { computed, prop });
         context.set("value", value);
       },
       decrementToMin({ context, prop, computed }) {
-        const value = (0, import_number_input.formatValue)(prop("min"), { computed, prop });
+        const value = (0, import_number_input2.formatValue)(prop("min"), { computed, prop });
         context.set("value", value);
       },
       setHint({ context, event }) {
@@ -435,8 +462,7 @@ var machine = createMachine({
           valueAsNumber: computed("valueAsNumber")
         });
       },
-      invokeOnInvalid({ computed, prop, event }) {
-        if (event.type === "INPUT.CHANGE") return;
+      invokeOnInvalid({ computed, prop }) {
         const reason = computed("valueAsNumber") > prop("max") ? "rangeOverflow" : "rangeUnderflow";
         prop("onValueInvalid")?.({
           reason,
@@ -444,10 +470,11 @@ var machine = createMachine({
           valueAsNumber: computed("valueAsNumber")
         });
       },
-      invokeOnValueCommit({ computed, prop }) {
+      invokeOnValueCommit({ computed, prop, event }) {
         prop("onValueCommit")?.({
           value: computed("formattedValue"),
-          valueAsNumber: computed("valueAsNumber")
+          valueAsNumber: computed("valueAsNumber"),
+          reason: event.src
         });
       },
       syncInputElement({ context, event, computed, scope }) {
@@ -483,10 +510,8 @@ var machine = createMachine({
         if (Math.abs(newDelta) >= sensitivity) {
           const step = prop("step");
           const hint = event.hint;
-          if (hint === "increment") {
-            send({ type: "VALUE.INCREMENT", step });
-          } else if (hint === "decrement") {
-            send({ type: "VALUE.DECREMENT", step });
+          if (hint === "increment" || hint === "decrement") {
+            send({ type: "SCRUBBER.STEP", step, hint, src: "scrub" });
           }
           context.set("cumulativeDelta", newDelta % sensitivity);
         } else {