@zag-js/number-input 0.0.0-dev-20220714091855 → 0.0.0-dev-20220730064719

package/dist/index.d.ts

@@ -26,6 +26,10 @@ declare type IntlMessages = {
      */
     decrementLabel: string;
 };
+declare type Value = {
+    value: string;
+    valueAsNumber: number;
+};
 declare type PublicContext = DirectionProperty & CommonProperties & {
     /**
      * The ids of the elements in the number input. Useful for composition.
@@ -115,18 +119,23 @@ declare type PublicContext = DirectionProperty & CommonProperties & {
     /**
      * Function invoked when the value changes
      */
-    onChange?: (details: {
-        value: string;
-        valueAsNumber: number;
-    }) => void;
+    onChange?: (details: Value) => void;
     /**
      * Function invoked when the value overflows or underflows the min/max range
      */
-    onInvalid?: (details: {
+    onInvalid?: (details: Value & {
         reason: ValidityState;
-        value: string;
-        valueAsNumber: number;
     }) => void;
+    /**
+     * Function invoked when the number input is focused
+     */
+    onFocus?: (details: Value & {
+        srcElement: HTMLElement | null;
+    }) => void;
+    /**
+     * The value of the input when it is blurred
+     */
+    onBlur?: (details: Value) => void;
     /**
      * The minimum number of fraction digits to use. Possible values are from 0 to 20
      */
@@ -135,6 +144,10 @@ declare type PublicContext = DirectionProperty & CommonProperties & {
      * The maximum number of fraction digits to use. Possible values are from 0 to 20;
      */
     maxFractionDigits?: number;
+    /**
+     * Whether to spin the value when the increment/decrement button is pressed
+     */
+    spinOnPress?: boolean;
 };
 declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
 declare type ComputedContext = Readonly<{
@@ -211,6 +224,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
     setToMax(): void;
     setToMin(): void;
     focus(): void;
+    blur(): void;
     rootProps: T["element"];
     labelProps: T["label"];
     groupProps: T["element"];

package/dist/index.js

@@ -280,6 +280,44 @@ var dom = defineDomHelpers({
   getDecButtonEl: (ctx) => dom.getById(ctx, dom.getDecButtonId(ctx)),
   getScrubberEl: (ctx) => dom.getById(ctx, dom.getScrubberId(ctx)),
   getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
+  getActiveButton: (ctx, hint = ctx.hint) => {
+    let btnEl = null;
+    if (hint === "increment") {
+      btnEl = dom.getIncButtonEl(ctx);
+    }
+    if (hint === "decrement") {
+      btnEl = dom.getDecButtonEl(ctx);
+    }
+    return btnEl;
+  },
+  setupVirtualCursor(ctx) {
+    if (isSafari() || !supportsPointerEvent())
+      return;
+    dom.createVirtualCursor(ctx);
+    return () => {
+      var _a;
+      (_a = dom.getCursorEl(ctx)) == null ? void 0 : _a.remove();
+    };
+  },
+  preventTextSelection(ctx) {
+    const doc = dom.getDoc(ctx);
+    const html = doc.documentElement;
+    const body = doc.body;
+    body.style.pointerEvents = "none";
+    html.style.userSelect = "none";
+    html.style.cursor = "ew-resize";
+    return () => {
+      body.style.pointerEvents = "";
+      html.style.userSelect = "";
+      html.style.cursor = "";
+      if (!html.style.length) {
+        html.removeAttribute("style");
+      }
+      if (!body.style.length) {
+        body.removeAttribute("style");
+      }
+    };
+  },
   getMousementValue(ctx, event) {
     const x = roundToDevicePixel(event.movementX);
     const y = roundToDevicePixel(event.movementY);
@@ -403,6 +441,10 @@ function connect(state, send, normalize) {
       var _a;
       (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
     },
+    blur() {
+      var _a;
+      (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.blur();
+    },
     rootProps: normalize.element({
       id: dom.getRootId(state.context),
       "data-part": "root",
@@ -586,6 +628,7 @@ function machine(ctx) {
       max: Number.MAX_SAFE_INTEGER,
       scrubberCursorPoint: null,
       invalid: false,
+      spinOnPress: true,
       ...ctx,
       messages: {
         incrementLabel: "increment value",
@@ -613,7 +656,8 @@ function machine(ctx) {
     },
     watch: {
       value: ["invokeOnChange"],
-      isOutOfRange: ["invokeOnInvalid"]
+      isOutOfRange: ["invokeOnInvalid"],
+      scrubberCursorPoint: ["setVirtualCursorPosition"]
     },
     on: {
       SET_VALUE: {
@@ -639,6 +683,7 @@ function machine(ctx) {
         }
       },
       idle: {
+        exit: "invokeOnFocus",
         on: {
           PRESS_DOWN: {
             target: "before:spin",
@@ -652,7 +697,7 @@ function machine(ctx) {
         }
       },
       focused: {
-        tags: ["focus"],
+        tags: "focus",
         entry: "focusInput",
         activities: "attachWheelListener",
         on: {
@@ -683,22 +728,22 @@ function machine(ctx) {
             {
               guard: "isInvalidExponential",
               target: "idle",
-              actions: ["clearValue", "clearHint"]
+              actions: ["clearValue", "clearHint", "invokeOnBlur"]
             },
             {
               guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
               target: "idle",
-              actions: ["clampValue", "clearHint"]
+              actions: ["clampValue", "clearHint", "invokeOnBlur"]
             },
             {
               target: "idle",
-              actions: "roundValue"
+              actions: ["roundValue", "invokeOnBlur"]
             }
           ]
         }
       },
       "before:spin": {
-        tags: ["focus"],
+        tags: "focus",
         activities: "trackButtonDisabled",
         entry: (0, import_core.choose)([
           { guard: "isIncrementHint", actions: "increment" },
@@ -707,7 +752,7 @@ function machine(ctx) {
         after: {
           CHANGE_DELAY: {
             target: "spinning",
-            guard: "isInRange"
+            guard: and("isInRange", "spinOnPress")
           }
         },
         on: {
@@ -718,7 +763,7 @@ function machine(ctx) {
         }
       },
       spinning: {
-        tags: ["focus"],
+        tags: "focus",
         activities: "trackButtonDisabled",
         every: [
           {
@@ -740,23 +785,19 @@ function machine(ctx) {
         }
       },
       scrubbing: {
-        tags: ["focus"],
-        entry: ["addCustomCursor", "disableTextSelection"],
-        exit: ["removeCustomCursor", "restoreTextSelection"],
-        activities: ["activatePointerLock", "trackMousemove"],
+        tags: "focus",
+        exit: "clearCursorPoint",
+        activities: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
         on: {
-          POINTER_UP_SCRUBBER: {
-            target: "focused",
-            actions: "clearCursorPoint"
-          },
+          POINTER_UP_SCRUBBER: "focused",
           POINTER_MOVE_SCRUBBER: [
             {
               guard: "isIncrementHint",
-              actions: ["increment", "setCursorPoint", "updateCursor"]
+              actions: ["increment", "setCursorPoint"]
             },
             {
               guard: "isDecrementHint",
-              actions: ["decrement", "setCursorPoint", "updateCursor"]
+              actions: ["decrement", "setCursorPoint"]
             }
           ]
         }
@@ -770,6 +811,7 @@ function machine(ctx) {
     guards: {
       clampOnBlur: (ctx2) => !!ctx2.clampValueOnBlur,
       isAtMin: (ctx2) => ctx2.isAtMin,
+      spinOnPress: (ctx2) => !!ctx2.spinOnPress,
       isAtMax: (ctx2) => ctx2.isAtMax,
       isInRange: (ctx2) => !ctx2.isOutOfRange,
       isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
@@ -778,17 +820,15 @@ function machine(ctx) {
       isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
     },
     activities: {
+      setupVirtualCursor(ctx2) {
+        return dom.setupVirtualCursor(ctx2);
+      },
+      preventTextSelection(ctx2) {
+        return dom.preventTextSelection(ctx2);
+      },
       trackButtonDisabled(ctx2, _evt, { send }) {
-        let btnEl = null;
-        if (ctx2.hint === "increment") {
-          btnEl = dom.getIncButtonEl(ctx2);
-        }
-        if (ctx2.hint === "decrement") {
-          btnEl = dom.getDecButtonEl(ctx2);
-        }
-        return observeAttributes(btnEl, "disabled", function onDisable() {
-          send("PRESS_UP");
-        });
+        const btn = dom.getActiveButton(ctx2, ctx2.hint);
+        return observeAttributes(btn, "disabled", () => send("PRESS_UP"));
       },
       attachWheelListener(ctx2, _evt, { send }) {
         const input = dom.getInputEl(ctx2);
@@ -884,6 +924,29 @@ function machine(ctx) {
           valueAsNumber: ctx2.valueAsNumber
         });
       },
+      invokeOnFocus(ctx2, evt) {
+        var _a;
+        let srcElement = null;
+        if (evt.type === "PRESS_DOWN") {
+          srcElement = dom.getActiveButton(ctx2, evt.hint);
+        } else if (evt.type === "FOCUS") {
+          srcElement = dom.getInputEl(ctx2);
+        } else if (evt.type === "PRESS_DOWN_SCRUBBER") {
+          srcElement = dom.getScrubberEl(ctx2);
+        }
+        (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, {
+          value: ctx2.value,
+          valueAsNumber: ctx2.valueAsNumber,
+          srcElement
+        });
+      },
+      invokeOnBlur(ctx2) {
+        var _a;
+        (_a = ctx2.onBlur) == null ? void 0 : _a.call(ctx2, {
+          value: ctx2.value,
+          valueAsNumber: ctx2.valueAsNumber
+        });
+      },
       invokeOnInvalid(ctx2) {
         var _a;
         if (!ctx2.isOutOfRange)
@@ -908,35 +971,12 @@ function machine(ctx) {
       clearCursorPoint(ctx2) {
         ctx2.scrubberCursorPoint = null;
       },
-      updateCursor(ctx2) {
+      setVirtualCursorPosition(ctx2) {
         const cursor = dom.getCursorEl(ctx2);
         if (!cursor || !ctx2.scrubberCursorPoint)
           return;
         const { x, y } = ctx2.scrubberCursorPoint;
         cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
-      },
-      addCustomCursor(ctx2) {
-        if (isSafari() || !supportsPointerEvent())
-          return;
-        dom.createVirtualCursor(ctx2);
-      },
-      removeCustomCursor(ctx2) {
-        var _a;
-        if (isSafari() || !supportsPointerEvent())
-          return;
-        (_a = dom.getCursorEl(ctx2)) == null ? void 0 : _a.remove();
-      },
-      disableTextSelection(ctx2) {
-        const doc = dom.getDoc(ctx2);
-        doc.body.style.pointerEvents = "none";
-        doc.documentElement.style.userSelect = "none";
-        doc.documentElement.style.cursor = "ew-resize";
-      },
-      restoreTextSelection(ctx2) {
-        const doc = dom.getDoc(ctx2);
-        doc.body.style.pointerEvents = "";
-        doc.documentElement.style.userSelect = "";
-        doc.documentElement.style.cursor = "";
       }
     },
     hookSync: true

package/dist/index.mjs

@@ -253,6 +253,44 @@ var dom = defineDomHelpers({
   getDecButtonEl: (ctx) => dom.getById(ctx, dom.getDecButtonId(ctx)),
   getScrubberEl: (ctx) => dom.getById(ctx, dom.getScrubberId(ctx)),
   getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
+  getActiveButton: (ctx, hint = ctx.hint) => {
+    let btnEl = null;
+    if (hint === "increment") {
+      btnEl = dom.getIncButtonEl(ctx);
+    }
+    if (hint === "decrement") {
+      btnEl = dom.getDecButtonEl(ctx);
+    }
+    return btnEl;
+  },
+  setupVirtualCursor(ctx) {
+    if (isSafari() || !supportsPointerEvent())
+      return;
+    dom.createVirtualCursor(ctx);
+    return () => {
+      var _a;
+      (_a = dom.getCursorEl(ctx)) == null ? void 0 : _a.remove();
+    };
+  },
+  preventTextSelection(ctx) {
+    const doc = dom.getDoc(ctx);
+    const html = doc.documentElement;
+    const body = doc.body;
+    body.style.pointerEvents = "none";
+    html.style.userSelect = "none";
+    html.style.cursor = "ew-resize";
+    return () => {
+      body.style.pointerEvents = "";
+      html.style.userSelect = "";
+      html.style.cursor = "";
+      if (!html.style.length) {
+        html.removeAttribute("style");
+      }
+      if (!body.style.length) {
+        body.removeAttribute("style");
+      }
+    };
+  },
   getMousementValue(ctx, event) {
     const x = roundToDevicePixel(event.movementX);
     const y = roundToDevicePixel(event.movementY);
@@ -376,6 +414,10 @@ function connect(state, send, normalize) {
       var _a;
       (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
     },
+    blur() {
+      var _a;
+      (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.blur();
+    },
     rootProps: normalize.element({
       id: dom.getRootId(state.context),
       "data-part": "root",
@@ -559,6 +601,7 @@ function machine(ctx) {
       max: Number.MAX_SAFE_INTEGER,
       scrubberCursorPoint: null,
       invalid: false,
+      spinOnPress: true,
       ...ctx,
       messages: {
         incrementLabel: "increment value",
@@ -586,7 +629,8 @@ function machine(ctx) {
     },
     watch: {
       value: ["invokeOnChange"],
-      isOutOfRange: ["invokeOnInvalid"]
+      isOutOfRange: ["invokeOnInvalid"],
+      scrubberCursorPoint: ["setVirtualCursorPosition"]
     },
     on: {
       SET_VALUE: {
@@ -612,6 +656,7 @@ function machine(ctx) {
         }
       },
       idle: {
+        exit: "invokeOnFocus",
         on: {
           PRESS_DOWN: {
             target: "before:spin",
@@ -625,7 +670,7 @@ function machine(ctx) {
         }
       },
       focused: {
-        tags: ["focus"],
+        tags: "focus",
         entry: "focusInput",
         activities: "attachWheelListener",
         on: {
@@ -656,22 +701,22 @@ function machine(ctx) {
             {
               guard: "isInvalidExponential",
               target: "idle",
-              actions: ["clearValue", "clearHint"]
+              actions: ["clearValue", "clearHint", "invokeOnBlur"]
             },
             {
               guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
               target: "idle",
-              actions: ["clampValue", "clearHint"]
+              actions: ["clampValue", "clearHint", "invokeOnBlur"]
             },
             {
               target: "idle",
-              actions: "roundValue"
+              actions: ["roundValue", "invokeOnBlur"]
             }
           ]
         }
       },
       "before:spin": {
-        tags: ["focus"],
+        tags: "focus",
         activities: "trackButtonDisabled",
         entry: choose([
           { guard: "isIncrementHint", actions: "increment" },
@@ -680,7 +725,7 @@ function machine(ctx) {
         after: {
           CHANGE_DELAY: {
             target: "spinning",
-            guard: "isInRange"
+            guard: and("isInRange", "spinOnPress")
           }
         },
         on: {
@@ -691,7 +736,7 @@ function machine(ctx) {
         }
       },
       spinning: {
-        tags: ["focus"],
+        tags: "focus",
         activities: "trackButtonDisabled",
         every: [
           {
@@ -713,23 +758,19 @@ function machine(ctx) {
         }
       },
       scrubbing: {
-        tags: ["focus"],
-        entry: ["addCustomCursor", "disableTextSelection"],
-        exit: ["removeCustomCursor", "restoreTextSelection"],
-        activities: ["activatePointerLock", "trackMousemove"],
+        tags: "focus",
+        exit: "clearCursorPoint",
+        activities: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
         on: {
-          POINTER_UP_SCRUBBER: {
-            target: "focused",
-            actions: "clearCursorPoint"
-          },
+          POINTER_UP_SCRUBBER: "focused",
           POINTER_MOVE_SCRUBBER: [
             {
               guard: "isIncrementHint",
-              actions: ["increment", "setCursorPoint", "updateCursor"]
+              actions: ["increment", "setCursorPoint"]
             },
             {
               guard: "isDecrementHint",
-              actions: ["decrement", "setCursorPoint", "updateCursor"]
+              actions: ["decrement", "setCursorPoint"]
             }
           ]
         }
@@ -743,6 +784,7 @@ function machine(ctx) {
     guards: {
       clampOnBlur: (ctx2) => !!ctx2.clampValueOnBlur,
       isAtMin: (ctx2) => ctx2.isAtMin,
+      spinOnPress: (ctx2) => !!ctx2.spinOnPress,
       isAtMax: (ctx2) => ctx2.isAtMax,
       isInRange: (ctx2) => !ctx2.isOutOfRange,
       isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
@@ -751,17 +793,15 @@ function machine(ctx) {
       isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
     },
     activities: {
+      setupVirtualCursor(ctx2) {
+        return dom.setupVirtualCursor(ctx2);
+      },
+      preventTextSelection(ctx2) {
+        return dom.preventTextSelection(ctx2);
+      },
       trackButtonDisabled(ctx2, _evt, { send }) {
-        let btnEl = null;
-        if (ctx2.hint === "increment") {
-          btnEl = dom.getIncButtonEl(ctx2);
-        }
-        if (ctx2.hint === "decrement") {
-          btnEl = dom.getDecButtonEl(ctx2);
-        }
-        return observeAttributes(btnEl, "disabled", function onDisable() {
-          send("PRESS_UP");
-        });
+        const btn = dom.getActiveButton(ctx2, ctx2.hint);
+        return observeAttributes(btn, "disabled", () => send("PRESS_UP"));
       },
       attachWheelListener(ctx2, _evt, { send }) {
         const input = dom.getInputEl(ctx2);
@@ -857,6 +897,29 @@ function machine(ctx) {
           valueAsNumber: ctx2.valueAsNumber
         });
       },
+      invokeOnFocus(ctx2, evt) {
+        var _a;
+        let srcElement = null;
+        if (evt.type === "PRESS_DOWN") {
+          srcElement = dom.getActiveButton(ctx2, evt.hint);
+        } else if (evt.type === "FOCUS") {
+          srcElement = dom.getInputEl(ctx2);
+        } else if (evt.type === "PRESS_DOWN_SCRUBBER") {
+          srcElement = dom.getScrubberEl(ctx2);
+        }
+        (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, {
+          value: ctx2.value,
+          valueAsNumber: ctx2.valueAsNumber,
+          srcElement
+        });
+      },
+      invokeOnBlur(ctx2) {
+        var _a;
+        (_a = ctx2.onBlur) == null ? void 0 : _a.call(ctx2, {
+          value: ctx2.value,
+          valueAsNumber: ctx2.valueAsNumber
+        });
+      },
       invokeOnInvalid(ctx2) {
         var _a;
         if (!ctx2.isOutOfRange)
@@ -881,35 +944,12 @@ function machine(ctx) {
       clearCursorPoint(ctx2) {
         ctx2.scrubberCursorPoint = null;
       },
-      updateCursor(ctx2) {
+      setVirtualCursorPosition(ctx2) {
         const cursor = dom.getCursorEl(ctx2);
         if (!cursor || !ctx2.scrubberCursorPoint)
           return;
         const { x, y } = ctx2.scrubberCursorPoint;
         cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
-      },
-      addCustomCursor(ctx2) {
-        if (isSafari() || !supportsPointerEvent())
-          return;
-        dom.createVirtualCursor(ctx2);
-      },
-      removeCustomCursor(ctx2) {
-        var _a;
-        if (isSafari() || !supportsPointerEvent())
-          return;
-        (_a = dom.getCursorEl(ctx2)) == null ? void 0 : _a.remove();
-      },
-      disableTextSelection(ctx2) {
-        const doc = dom.getDoc(ctx2);
-        doc.body.style.pointerEvents = "none";
-        doc.documentElement.style.userSelect = "none";
-        doc.documentElement.style.cursor = "ew-resize";
-      },
-      restoreTextSelection(ctx2) {
-        const doc = dom.getDoc(ctx2);
-        doc.body.style.pointerEvents = "";
-        doc.documentElement.style.userSelect = "";
-        doc.documentElement.style.cursor = "";
       }
     },
     hookSync: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "0.0.0-dev-20220714091855",
+  "version": "0.0.0-dev-20220730064719",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,13 +29,13 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.0.0-dev-20220714091855",
-    "@zag-js/types": "0.0.0-dev-20220714091855"
+    "@zag-js/core": "0.1.9",
+    "@zag-js/types": "0.2.3"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.0.0-dev-20220714091855",
-    "@zag-js/number-utils": "0.0.0-dev-20220714091855",
-    "@zag-js/utils": "0.0.0-dev-20220714091855"
+    "@zag-js/dom-utils": "0.1.8",
+    "@zag-js/number-utils": "0.1.3",
+    "@zag-js/utils": "0.1.3"
   },
   "scripts": {
     "build-fast": "tsup src/index.ts --format=esm,cjs",