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

package/dist/number-input.machine.mjs

@@ -18,10 +18,12 @@ import {
   isValueAtMax,
   isValueAtMin,
   isValueWithinRange,
-  snapValueToStep
+  snapValueToStep,
+  mergeWithDefault
 } from "@zag-js/utils";
 import { recordCursor, restoreCursor } from "./cursor.mjs";
 import * as dom from "./number-input.dom.mjs";
+import { defaultTranslations } from "./number-input.translations.mjs";
 import { createFormatter, createParser, formatValue, getDefaultStep, parseValue } from "./number-input.utils.mjs";
 var { choose, guards, createMachine } = setup();
 var { not, and } = guards;
@@ -38,8 +40,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,
@@ -47,17 +47,14 @@ 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"),
@@ -65,7 +62,7 @@ var machine = createMachine({
         onChange(value) {
           const computed = getComputed();
           const valueAsNumber = parseValue(value, { computed, prop });
-          prop("onValueChange")?.({ value, valueAsNumber });
+          prop("onValueChange")?.({ value, valueAsNumber, reason: getEvent().src });
         }
       })),
       hint: bindable(() => ({ defaultValue: null })),
@@ -92,7 +89,15 @@ 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 = mergeWithDefault(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: memo(
       ({ prop }) => [prop("locale"), prop("formatOptions")],
       ([locale, formatOptions]) => createFormatter(locale, formatOptions)
@@ -107,6 +112,7 @@ var machine = createMachine({
       action(["syncInputElement"]);
     });
     track([() => computed("isOutOfRange")], () => {
+      if (!computed("isOutOfRange")) return;
       action(["invokeOnInvalid"]);
     });
     track([() => context.hash("scrubberCursorPoint")], () => {
@@ -115,32 +121,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",
@@ -153,24 +162,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"]
@@ -184,41 +193,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"]
@@ -228,20 +262,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"]
@@ -266,9 +289,13 @@ var machine = createMachine({
         }, 300);
         return () => clearTimeout(id);
       },
-      spinValue({ send }) {
+      preventContextMenu({ scope }) {
+        return 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);
       },
@@ -295,7 +322,8 @@ var machine = createMachine({
         return 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 });
           }
         });
       },
@@ -306,9 +334,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 addDomEvent(inputEl, "wheel", onWheel, { passive: false });
@@ -349,7 +377,7 @@ var machine = createMachine({
           });
         }
         function onMouseup() {
-          send({ type: "SCRUBBER.POINTER_UP" });
+          send({ type: "SCRUBBER.POINTER_UP", src: "scrub" });
         }
         return callAll(addDomEvent(doc, "mousemove", onMousemove, false), addDomEvent(doc, "mouseup", onMouseup, false));
       }
@@ -380,7 +408,7 @@ var machine = createMachine({
         context.set("value", formatValue(nextValue, { computed, prop }));
       },
       setRawValue({ context, event, prop, computed }) {
-        let nextValue = parseValue(event.value, { computed, prop });
+        let nextValue = typeof event.value === "number" ? event.value : parseValue(event.value, { computed, prop });
         if (!prop("allowOverflow")) nextValue = clampValue(nextValue, prop("min"), prop("max"));
         context.set("value", formatValue(nextValue, { computed, prop }));
       },
@@ -419,8 +447,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,
@@ -428,10 +455,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 }) {
@@ -467,10 +495,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 {

package/dist/number-input.translations.d.mts

@@ -0,0 +1,8 @@
+import { Required } from '@zag-js/types';
+import { IntlTranslations } from './number-input.types.mjs';
+import '@internationalized/number';
+import '@zag-js/core';
+
+declare const defaultTranslations: Required<Pick<IntlTranslations, "incrementLabel" | "decrementLabel">>;
+
+export { defaultTranslations };

package/dist/number-input.translations.d.ts

@@ -0,0 +1,8 @@
+import { Required } from '@zag-js/types';
+import { IntlTranslations } from './number-input.types.js';
+import '@internationalized/number';
+import '@zag-js/core';
+
+declare const defaultTranslations: Required<Pick<IntlTranslations, "incrementLabel" | "decrementLabel">>;
+
+export { defaultTranslations };

package/dist/number-input.translations.js

@@ -0,0 +1,33 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/number-input.translations.ts
+var number_input_translations_exports = {};
+__export(number_input_translations_exports, {
+  defaultTranslations: () => defaultTranslations
+});
+module.exports = __toCommonJS(number_input_translations_exports);
+var defaultTranslations = {
+  incrementLabel: "increment value",
+  decrementLabel: "decrease value"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defaultTranslations
+});

package/dist/number-input.translations.mjs

@@ -0,0 +1,8 @@
+// src/number-input.translations.ts
+var defaultTranslations = {
+  incrementLabel: "increment value",
+  decrementLabel: "decrease value"
+};
+export {
+  defaultTranslations
+};

package/dist/number-input.types.d.mts

@@ -1,16 +1,26 @@
 import { NumberParser } from '@internationalized/number';
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { PropTypes, RequiredBy, LocaleProperties, CommonProperties } from '@zag-js/types';
+import { PropTypes, LocaleProperties, CommonProperties } from '@zag-js/types';
 
+/**
+ * The reason for the number input value change
+ */
+type ValueChangeReason = "input-change" | "input-blur" | "keyboard" | "increment-press" | "decrement-press" | "wheel" | "scrub" | "script";
 interface ValueChangeDetails {
     value: string;
     valueAsNumber: number;
+    reason?: ValueChangeReason | undefined;
 }
-interface FocusChangeDetails extends ValueChangeDetails {
+interface FocusChangeDetails {
+    value: string;
+    valueAsNumber: number;
     focused: boolean;
 }
 type ValidityState = "rangeUnderflow" | "rangeOverflow";
-interface ValueInvalidDetails extends ValueChangeDetails {
+/** Detached from `ValueChangeDetails`: here `reason` is why the value is invalid. */
+interface ValueInvalidDetails {
+    value: string;
+    valueAsNumber: number;
     reason: ValidityState;
 }
 type InputMode = "text" | "tel" | "numeric" | "decimal";
@@ -143,7 +153,8 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      */
     onFocusChange?: ((details: FocusChangeDetails) => void) | undefined;
     /**
-     * Function invoked when the value is committed (when the input is blurred or the Enter key is pressed)
+     * Function invoked when the value settles: the input is blurred or `Enter` is pressed, a stepper
+     * or scrub gesture ends, or a key or wheel step completes.
      */
     onValueCommit?: ((details: ValueChangeDetails) => void) | undefined;
     /**
@@ -183,7 +194,7 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      */
     snapOnStep?: boolean | undefined;
 }
-type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "spinOnPress" | "min" | "max" | "largeStep" | "smallStep" | "scrubberPixelSensitivity" | "scrubberDirection" | "snapOnStep";
+type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "step" | "largeStep" | "smallStep" | "spinOnPress" | "min" | "max" | "scrubberPixelSensitivity" | "scrubberDirection" | "snapOnStep";
 type ComputedContext = Readonly<{
     /**
      * The value of the input as a number
@@ -273,9 +284,10 @@ interface PrivateContext {
     visualScale: number;
 }
 interface NumberInputSchema {
-    state: "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
+    state: "idle" | "focused" | "pressed" | "pressed.waiting" | "pressed.repeating" | "scrubbing";
     tag: "focus";
-    props: RequiredBy<NumberInputProps, PropsWithDefault>;
+    props: NumberInputProps;
+    defaultPropKey: PropsWithDefault;
     context: PrivateContext;
     computed: ComputedContext;
     action: string;
@@ -285,6 +297,54 @@ interface NumberInputSchema {
 }
 type NumberInputService = Service<NumberInputSchema>;
 type NumberInputMachine = Machine<NumberInputSchema>;
+interface RootState {
+    /**
+     * Whether the number input is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the number input is focused.
+     */
+    focused: boolean;
+    /**
+     * Whether the number input is invalid.
+     */
+    invalid: boolean;
+    /**
+     * Whether the number input is being scrubbed.
+     */
+    scrubbing: boolean;
+}
+interface InputState {
+    /**
+     * Whether the input is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the input is invalid.
+     */
+    invalid: boolean;
+    /**
+     * Whether the input is read-only.
+     */
+    readOnly: boolean;
+    /**
+     * Whether the input is being scrubbed.
+     */
+    scrubbing: boolean;
+}
+interface IncrementTriggerState {
+    /**
+     * Whether the increment trigger is disabled.
+     */
+    disabled: boolean;
+}
+interface DecrementTriggerState {
+    /**
+     * Whether the decrement trigger is disabled.
+     */
+    disabled: boolean;
+}
 interface NumberInputApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the input is focused.
@@ -338,15 +398,31 @@ interface NumberInputApi<T extends PropTypes = PropTypes> {
      * Function to focus the input.
      */
     focus: VoidFunction;
+    /**
+     * Returns the state of the root.
+     */
+    getRootState: () => RootState;
     getRootProps: () => T["element"];
     getLabelProps: () => T["label"];
     getControlProps: () => T["element"];
     getValueTextProps: () => T["element"];
+    /**
+     * Returns the state of the input.
+     */
+    getInputState: () => InputState;
     getInputProps: () => T["input"];
+    /**
+     * Returns the state of the decrement trigger.
+     */
+    getDecrementTriggerState: () => DecrementTriggerState;
     getDecrementTriggerProps: () => T["button"];
+    /**
+     * Returns the state of the increment trigger.
+     */
+    getIncrementTriggerState: () => IncrementTriggerState;
     getIncrementTriggerProps: () => T["button"];
     getScrubberProps: () => T["element"];
     getScrubberCursorProps: () => T["element"];
 }
 
-export type { ElementIds, FocusChangeDetails, HintValue, InputMode, IntlTranslations, NumberInputApi, NumberInputMachine, NumberInputProps, NumberInputSchema, NumberInputService, ValidityState, ValueChangeDetails, ValueInvalidDetails };
+export type { DecrementTriggerState, ElementIds, FocusChangeDetails, HintValue, IncrementTriggerState, InputMode, InputState, IntlTranslations, NumberInputApi, NumberInputMachine, NumberInputProps, NumberInputSchema, NumberInputService, RootState, ValidityState, ValueChangeDetails, ValueChangeReason, ValueInvalidDetails };