@zag-js/number-input 1.34.0 → 1.35.0

package/dist/number-input.machine.js

@@ -0,0 +1,460 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/number-input.machine.ts
+var number_input_machine_exports = {};
+__export(number_input_machine_exports, {
+  machine: () => machine
+});
+module.exports = __toCommonJS(number_input_machine_exports);
+var import_core = require("@zag-js/core");
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+var import_cursor = require("./cursor.cjs");
+var dom = __toESM(require("./number-input.dom.cjs"));
+var import_number_input = require("./number-input.utils.cjs");
+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);
+    return {
+      dir: "ltr",
+      locale: "en-US",
+      focusInputOnChange: true,
+      clampValueOnBlur: !props.allowOverflow,
+      allowOverflow: false,
+      inputMode: "decimal",
+      pattern: "-?[0-9]*(.[0-9]+)?",
+      defaultValue: "",
+      step,
+      min: Number.MIN_SAFE_INTEGER,
+      max: Number.MAX_SAFE_INTEGER,
+      spinOnPress: true,
+      ...props,
+      translations: {
+        incrementLabel: "increment value",
+        decrementLabel: "decrease value",
+        ...props.translations
+      }
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable, getComputed }) {
+    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 });
+        }
+      })),
+      hint: bindable(() => ({ defaultValue: null })),
+      scrubberCursorPoint: bindable(() => ({
+        defaultValue: null,
+        hash(value) {
+          return value ? `x:${value.x}, y:${value.y}` : "";
+        }
+      })),
+      fieldsetDisabled: bindable(() => ({ defaultValue: false }))
+    };
+  },
+  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 }),
+    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")),
+    isValueEmpty: ({ context }) => context.get("value") === "",
+    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")),
+    formatter: (0, import_core.memo)(
+      ({ prop }) => [prop("locale"), prop("formatOptions")],
+      ([locale, formatOptions]) => (0, import_number_input.createFormatter)(locale, formatOptions)
+    ),
+    parser: (0, import_core.memo)(
+      ({ prop }) => [prop("locale"), prop("formatOptions")],
+      ([locale, formatOptions]) => (0, import_number_input.createParser)(locale, formatOptions)
+    )
+  },
+  watch({ track, action, context, computed, prop }) {
+    track([() => context.get("value"), () => prop("locale"), () => JSON.stringify(prop("formatOptions"))], () => {
+      action(["syncInputElement"]);
+    });
+    track([() => computed("isOutOfRange")], () => {
+      action(["invokeOnInvalid"]);
+    });
+    track([() => context.hash("scrubberCursorPoint")], () => {
+      action(["setVirtualCursorPosition"]);
+    });
+  },
+  effects: ["trackFormControl"],
+  on: {
+    "VALUE.SET": {
+      actions: ["setRawValue"]
+    },
+    "VALUE.CLEAR": {
+      actions: ["clearValue"]
+    },
+    "VALUE.INCREMENT": {
+      actions: ["increment"]
+    },
+    "VALUE.DECREMENT": {
+      actions: ["decrement"]
+    }
+  },
+  states: {
+    idle: {
+      on: {
+        "TRIGGER.PRESS_DOWN": [
+          { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
+          {
+            target: "before:spin",
+            actions: ["focusInput", "invokeOnFocus", "setHint"]
+          }
+        ],
+        "SCRUBBER.PRESS_DOWN": {
+          target: "scrubbing",
+          actions: ["focusInput", "invokeOnFocus", "setHint", "setCursorPoint"]
+        },
+        "INPUT.FOCUS": {
+          target: "focused",
+          actions: ["focusInput", "invokeOnFocus"]
+        }
+      }
+    },
+    focused: {
+      tags: ["focus"],
+      effects: ["attachWheelListener"],
+      on: {
+        "TRIGGER.PRESS_DOWN": [
+          { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
+          { target: "before:spin", actions: ["focusInput", "setHint"] }
+        ],
+        "SCRUBBER.PRESS_DOWN": {
+          target: "scrubbing",
+          actions: ["focusInput", "setHint", "setCursorPoint"]
+        },
+        "INPUT.ARROW_UP": {
+          actions: ["increment"]
+        },
+        "INPUT.ARROW_DOWN": {
+          actions: ["decrement"]
+        },
+        "INPUT.HOME": {
+          actions: ["decrementToMin"]
+        },
+        "INPUT.END": {
+          actions: ["incrementToMax"]
+        },
+        "INPUT.CHANGE": {
+          actions: ["setValue", "setHint"]
+        },
+        "INPUT.BLUR": [
+          {
+            guard: and("clampValueOnBlur", not("isInRange")),
+            target: "idle",
+            actions: ["setClampedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
+          },
+          {
+            guard: not("isInRange"),
+            target: "idle",
+            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnInvalid", "invokeOnValueCommit"]
+          },
+          {
+            target: "idle",
+            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
+          }
+        ],
+        "INPUT.ENTER": {
+          actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
+        }
+      }
+    },
+    "before:spin": {
+      tags: ["focus"],
+      effects: ["trackButtonDisabled", "waitForChangeDelay"],
+      entry: choose([
+        { guard: "isIncrementHint", actions: ["increment"] },
+        { guard: "isDecrementHint", actions: ["decrement"] }
+      ]),
+      on: {
+        CHANGE_DELAY: {
+          target: "spinning",
+          guard: and("isInRange", "spinOnPress")
+        },
+        "TRIGGER.PRESS_UP": [
+          { guard: "isTouchPointer", target: "focused", actions: ["clearHint"] },
+          { target: "focused", actions: ["focusInput", "clearHint"] }
+        ]
+      }
+    },
+    spinning: {
+      tags: ["focus"],
+      effects: ["trackButtonDisabled", "spinValue"],
+      on: {
+        SPIN: [
+          {
+            guard: "isIncrementHint",
+            actions: ["increment"]
+          },
+          {
+            guard: "isDecrementHint",
+            actions: ["decrement"]
+          }
+        ],
+        "TRIGGER.PRESS_UP": {
+          target: "focused",
+          actions: ["focusInput", "clearHint"]
+        }
+      }
+    },
+    scrubbing: {
+      tags: ["focus"],
+      effects: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
+      on: {
+        "SCRUBBER.POINTER_UP": {
+          target: "focused",
+          actions: ["focusInput", "clearCursorPoint"]
+        },
+        "SCRUBBER.POINTER_MOVE": [
+          {
+            guard: "isIncrementHint",
+            actions: ["increment", "setCursorPoint"]
+          },
+          {
+            guard: "isDecrementHint",
+            actions: ["decrement", "setCursorPoint"]
+          }
+        ]
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      clampValueOnBlur: ({ prop }) => prop("clampValueOnBlur"),
+      spinOnPress: ({ prop }) => !!prop("spinOnPress"),
+      isInRange: ({ computed }) => !computed("isOutOfRange"),
+      isDecrementHint: ({ context, event }) => (event.hint ?? context.get("hint")) === "decrement",
+      isIncrementHint: ({ context, event }) => (event.hint ?? context.get("hint")) === "increment",
+      isTouchPointer: ({ event }) => event.pointerType === "touch"
+    },
+    effects: {
+      waitForChangeDelay({ send }) {
+        const id = setTimeout(() => {
+          send({ type: "CHANGE_DELAY" });
+        }, 300);
+        return () => clearTimeout(id);
+      },
+      spinValue({ send }) {
+        const id = setInterval(() => {
+          send({ type: "SPIN" });
+        }, 50);
+        return () => clearInterval(id);
+      },
+      trackFormControl({ context, scope }) {
+        const inputEl = dom.getInputEl(scope);
+        return (0, import_dom_query.trackFormControl)(inputEl, {
+          onFieldsetDisabledChange(disabled) {
+            context.set("fieldsetDisabled", disabled);
+          },
+          onFormReset() {
+            context.set("value", context.initial("value"));
+          }
+        });
+      },
+      setupVirtualCursor({ context, scope }) {
+        const point = context.get("scrubberCursorPoint");
+        return dom.setupVirtualCursor(scope, point);
+      },
+      preventTextSelection({ scope }) {
+        return dom.preventTextSelection(scope);
+      },
+      trackButtonDisabled({ context, scope, send }) {
+        const hint = context.get("hint");
+        const btn = dom.getPressedTriggerEl(scope, hint);
+        return (0, import_dom_query.observeAttributes)(btn, {
+          attributes: ["disabled"],
+          callback() {
+            send({ type: "TRIGGER.PRESS_UP", src: "attr" });
+          }
+        });
+      },
+      attachWheelListener({ scope, send, prop }) {
+        const inputEl = dom.getInputEl(scope);
+        if (!inputEl || !scope.isActiveElement(inputEl) || !prop("allowMouseWheel")) return;
+        function onWheel(event) {
+          event.preventDefault();
+          const dir = Math.sign(event.deltaY) * -1;
+          if (dir === 1) {
+            send({ type: "VALUE.INCREMENT" });
+          } else if (dir === -1) {
+            send({ type: "VALUE.DECREMENT" });
+          }
+        }
+        return (0, import_dom_query.addDomEvent)(inputEl, "wheel", onWheel, { passive: false });
+      },
+      activatePointerLock({ scope }) {
+        if ((0, import_dom_query.isSafari)()) return;
+        return (0, import_dom_query.requestPointerLock)(scope.getDoc());
+      },
+      trackMousemove({ scope, send, context, computed }) {
+        const doc = scope.getDoc();
+        function onMousemove(event) {
+          const point = context.get("scrubberCursorPoint");
+          const isRtl = computed("isRtl");
+          const value = dom.getMousemoveValue(scope, { point, isRtl, event });
+          if (!value.hint) return;
+          send({
+            type: "SCRUBBER.POINTER_MOVE",
+            hint: value.hint,
+            point: value.point
+          });
+        }
+        function onMouseup() {
+          send({ type: "SCRUBBER.POINTER_UP" });
+        }
+        return (0, import_utils.callAll)((0, import_dom_query.addDomEvent)(doc, "mousemove", onMousemove, false), (0, import_dom_query.addDomEvent)(doc, "mouseup", onMouseup, false));
+      }
+    },
+    actions: {
+      focusInput({ scope, prop }) {
+        if (!prop("focusInputOnChange")) return;
+        const inputEl = dom.getInputEl(scope);
+        if (scope.isActiveElement(inputEl)) return;
+        (0, import_dom_query.raf)(() => inputEl?.focus({ preventScroll: true }));
+      },
+      increment({ context, event, prop, computed }) {
+        let nextValue = (0, import_utils.incrementValue)(computed("valueAsNumber"), event.step ?? prop("step"));
+        if (!prop("allowOverflow")) nextValue = (0, import_utils.clampValue)(nextValue, prop("min"), prop("max"));
+        context.set("value", (0, import_number_input.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"));
+        context.set("value", (0, import_number_input.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 }));
+      },
+      setRawValue({ context, event, prop, computed }) {
+        let nextValue = (0, import_number_input.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 }));
+      },
+      setValue({ context, event }) {
+        const value = event.target?.value ?? event.value;
+        context.set("value", value);
+      },
+      clearValue({ context }) {
+        context.set("value", "");
+      },
+      incrementToMax({ context, prop, computed }) {
+        const value = (0, import_number_input.formatValue)(prop("max"), { computed, prop });
+        context.set("value", value);
+      },
+      decrementToMin({ context, prop, computed }) {
+        const value = (0, import_number_input.formatValue)(prop("min"), { computed, prop });
+        context.set("value", value);
+      },
+      setHint({ context, event }) {
+        context.set("hint", event.hint);
+      },
+      clearHint({ context }) {
+        context.set("hint", null);
+      },
+      invokeOnFocus({ computed, prop }) {
+        prop("onFocusChange")?.({
+          focused: true,
+          value: computed("formattedValue"),
+          valueAsNumber: computed("valueAsNumber")
+        });
+      },
+      invokeOnBlur({ computed, prop }) {
+        prop("onFocusChange")?.({
+          focused: false,
+          value: computed("formattedValue"),
+          valueAsNumber: computed("valueAsNumber")
+        });
+      },
+      invokeOnInvalid({ computed, prop, event }) {
+        if (event.type === "INPUT.CHANGE") return;
+        const reason = computed("valueAsNumber") > prop("max") ? "rangeOverflow" : "rangeUnderflow";
+        prop("onValueInvalid")?.({
+          reason,
+          value: computed("formattedValue"),
+          valueAsNumber: computed("valueAsNumber")
+        });
+      },
+      invokeOnValueCommit({ computed, prop }) {
+        prop("onValueCommit")?.({
+          value: computed("formattedValue"),
+          valueAsNumber: computed("valueAsNumber")
+        });
+      },
+      syncInputElement({ context, event, computed, scope }) {
+        const value = event.type.endsWith("CHANGE") ? context.get("value") : computed("formattedValue");
+        const inputEl = dom.getInputEl(scope);
+        const sel = event.selection ?? (0, import_cursor.recordCursor)(inputEl, scope);
+        (0, import_dom_query.raf)(() => {
+          (0, import_dom_query.setElementValue)(inputEl, value);
+          (0, import_cursor.restoreCursor)(inputEl, sel, scope);
+        });
+      },
+      setFormattedValue({ context, computed, action }) {
+        context.set("value", computed("formattedValue"));
+        action(["syncInputElement"]);
+      },
+      setCursorPoint({ context, event }) {
+        context.set("scrubberCursorPoint", event.point);
+      },
+      clearCursorPoint({ context }) {
+        context.set("scrubberCursorPoint", null);
+      },
+      setVirtualCursorPosition({ context, scope }) {
+        const cursorEl = dom.getCursorEl(scope);
+        const point = context.get("scrubberCursorPoint");
+        if (!cursorEl || !point) return;
+        cursorEl.style.transform = `translate3d(${point.x}px, ${point.y}px, 0px)`;
+      }
+    }
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  machine
+});