@zag-js/number-input 1.2.0 → 1.3.0

package/dist/index.d.mts

@@ -1,8 +1,8 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { LocaleProperties, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, LocaleProperties, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
 import { NumberFormatter, NumberParser } from '@internationalized/number';
 import * as _zag_js_core from '@zag-js/core';
-import { Service, Machine, EventObject } from '@zag-js/core';
+import { Service, EventObject, Machine } from '@zag-js/core';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber">;
 
@@ -206,7 +206,7 @@ type ComputedContext = Readonly<{
      */
     parser: NumberParser;
 }>;
-type HintValue = "increment" | "decrement" | "set";
+type HintValue = "increment" | "decrement";
 interface PrivateContext {
     /**
      * The hint that determines if we're incrementing or decrementing

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { LocaleProperties, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, LocaleProperties, CommonProperties, PropTypes, NormalizeProps } from '@zag-js/types';
 import { NumberFormatter, NumberParser } from '@internationalized/number';
 import * as _zag_js_core from '@zag-js/core';
-import { Service, Machine, EventObject } from '@zag-js/core';
+import { Service, EventObject, Machine } from '@zag-js/core';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber">;
 
@@ -206,7 +206,7 @@ type ComputedContext = Readonly<{
      */
     parser: NumberParser;
 }>;
-type HintValue = "increment" | "decrement" | "set";
+type HintValue = "increment" | "decrement";
 interface PrivateContext {
     /**
      * The hint that determines if we're incrementing or decrementing

package/dist/index.js

@@ -418,7 +418,7 @@ var machine = createMachine({
       dir: "ltr",
       locale: "en-US",
       focusInputOnChange: true,
-      clampValueOnBlur: true,
+      clampValueOnBlur: !props2.allowOverflow,
       allowOverflow: false,
       inputMode: "decimal",
       pattern: "[0-9]*(.[0-9]+)?",
@@ -493,7 +493,7 @@ var machine = createMachine({
   effects: ["trackFormControl"],
   on: {
     "VALUE.SET": {
-      actions: ["setRawValue", "setHintToSet"]
+      actions: ["setRawValue"]
     },
     "VALUE.CLEAR": {
       actions: ["clearValue"]
@@ -558,6 +558,11 @@ var machine = createMachine({
             target: "idle",
             actions: ["setClampedValue", "clearHint", "invokeOnBlur"]
           },
+          {
+            guard: not("isInRange"),
+            target: "idle",
+            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnInvalid"]
+          },
           {
             target: "idle",
             actions: ["setFormattedValue", "clearHint", "invokeOnBlur"]
@@ -592,11 +597,11 @@ var machine = createMachine({
       on: {
         SPIN: [
           {
-            guard: and(not("isAtMin"), "isIncrementHint"),
+            guard: "isIncrementHint",
             actions: ["increment"]
           },
           {
-            guard: and(not("isAtMax"), "isDecrementHint"),
+            guard: "isDecrementHint",
             actions: ["decrement"]
           }
         ],
@@ -630,9 +635,7 @@ var machine = createMachine({
   implementations: {
     guards: {
       clampValueOnBlur: ({ prop }) => prop("clampValueOnBlur"),
-      isAtMin: ({ computed }) => computed("isAtMin"),
       spinOnPress: ({ prop }) => !!prop("spinOnPress"),
-      isAtMax: ({ computed }) => computed("isAtMax"),
       isInRange: ({ computed }) => !computed("isOutOfRange"),
       isDecrementHint: ({ context, event }) => (event.hint ?? context.get("hint")) === "decrement",
       isIncrementHint: ({ context, event }) => (event.hint ?? context.get("hint")) === "increment",
@@ -724,23 +727,23 @@ var machine = createMachine({
         domQuery.raf(() => inputEl?.focus({ preventScroll: true }));
       },
       increment({ context, event, prop, computed }) {
-        const nextValue = utils.incrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
-        const value = formatValue(utils.clampValue(nextValue, prop("min"), prop("max")), { computed, prop });
-        context.set("value", value);
+        let nextValue = utils.incrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
+        if (!prop("allowOverflow")) nextValue = utils.clampValue(nextValue, prop("min"), prop("max"));
+        context.set("value", formatValue(nextValue, { computed, prop }));
       },
       decrement({ context, event, prop, computed }) {
-        const nextValue = utils.decrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
-        const value = formatValue(utils.clampValue(nextValue, prop("min"), prop("max")), { computed, prop });
-        context.set("value", value);
+        let nextValue = utils.decrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
+        if (!prop("allowOverflow")) nextValue = utils.clampValue(nextValue, prop("min"), prop("max"));
+        context.set("value", formatValue(nextValue, { computed, prop }));
       },
       setClampedValue({ context, prop, computed }) {
         const nextValue = utils.clampValue(computed("valueAsNumber"), prop("min"), prop("max"));
         context.set("value", formatValue(nextValue, { computed, prop }));
       },
       setRawValue({ context, event, prop, computed }) {
-        const parsedValue = parseValue(event.value, { computed, prop });
-        const value = formatValue(utils.clampValue(parsedValue, prop("min"), prop("max")), { computed, prop });
-        context.set("value", value);
+        let nextValue = parseValue(event.value, { computed, prop });
+        if (!prop("allowOverflow")) nextValue = utils.clampValue(nextValue, prop("min"), prop("max"));
+        context.set("value", formatValue(nextValue, { computed, prop }));
       },
       setValue({ context, event }) {
         const value = event.target?.value ?? event.value;
@@ -763,9 +766,6 @@ var machine = createMachine({
       clearHint({ context }) {
         context.set("hint", null);
       },
-      setHintToSet({ context }) {
-        context.set("hint", "set");
-      },
       invokeOnFocus({ computed, prop }) {
         prop("onFocusChange")?.({
           focused: true,
@@ -780,8 +780,8 @@ var machine = createMachine({
           valueAsNumber: computed("valueAsNumber")
         });
       },
-      invokeOnInvalid({ computed, prop }) {
-        if (!computed("isOutOfRange")) return;
+      invokeOnInvalid({ computed, prop, event }) {
+        if (event.type === "INPUT.CHANGE") return;
         const reason = computed("valueAsNumber") > prop("max") ? "rangeOverflow" : "rangeUnderflow";
         prop("onValueInvalid")?.({
           reason,

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { trackFormControl, observeAttributes, addDomEvent, isSafari, requestPointerLock, raf, setElementValue, MAX_Z_INDEX, dataAttr, ariaAttr, isComposingEvent, getEventStep, isLeftClick, getEventPoint, getWindow, isModifierKey } from '@zag-js/dom-query';
-import { isValueAtMin, isValueAtMax, isValueWithinRange, callAll, incrementValue, clampValue, decrementValue, createSplitProps, roundToDpr, wrap } from '@zag-js/utils';
+import { raf, setElementValue, addDomEvent, isSafari, requestPointerLock, observeAttributes, trackFormControl, MAX_Z_INDEX, dataAttr, getEventPoint, getWindow, isLeftClick, ariaAttr, isComposingEvent, getEventStep, isModifierKey } from '@zag-js/dom-query';
+import { isValueAtMax, isValueAtMin, clampValue, decrementValue, incrementValue, callAll, isValueWithinRange, createSplitProps, roundToDpr, wrap } from '@zag-js/utils';
 import { setup, memo } from '@zag-js/core';
 import { NumberParser } from '@internationalized/number';
 import { createProps } from '@zag-js/types';
@@ -416,7 +416,7 @@ var machine = createMachine({
       dir: "ltr",
       locale: "en-US",
       focusInputOnChange: true,
-      clampValueOnBlur: true,
+      clampValueOnBlur: !props2.allowOverflow,
       allowOverflow: false,
       inputMode: "decimal",
       pattern: "[0-9]*(.[0-9]+)?",
@@ -491,7 +491,7 @@ var machine = createMachine({
   effects: ["trackFormControl"],
   on: {
     "VALUE.SET": {
-      actions: ["setRawValue", "setHintToSet"]
+      actions: ["setRawValue"]
     },
     "VALUE.CLEAR": {
       actions: ["clearValue"]
@@ -556,6 +556,11 @@ var machine = createMachine({
             target: "idle",
             actions: ["setClampedValue", "clearHint", "invokeOnBlur"]
           },
+          {
+            guard: not("isInRange"),
+            target: "idle",
+            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnInvalid"]
+          },
           {
             target: "idle",
             actions: ["setFormattedValue", "clearHint", "invokeOnBlur"]
@@ -590,11 +595,11 @@ var machine = createMachine({
       on: {
         SPIN: [
           {
-            guard: and(not("isAtMin"), "isIncrementHint"),
+            guard: "isIncrementHint",
             actions: ["increment"]
           },
           {
-            guard: and(not("isAtMax"), "isDecrementHint"),
+            guard: "isDecrementHint",
             actions: ["decrement"]
           }
         ],
@@ -628,9 +633,7 @@ var machine = createMachine({
   implementations: {
     guards: {
       clampValueOnBlur: ({ prop }) => prop("clampValueOnBlur"),
-      isAtMin: ({ computed }) => computed("isAtMin"),
       spinOnPress: ({ prop }) => !!prop("spinOnPress"),
-      isAtMax: ({ computed }) => computed("isAtMax"),
       isInRange: ({ computed }) => !computed("isOutOfRange"),
       isDecrementHint: ({ context, event }) => (event.hint ?? context.get("hint")) === "decrement",
       isIncrementHint: ({ context, event }) => (event.hint ?? context.get("hint")) === "increment",
@@ -722,23 +725,23 @@ var machine = createMachine({
         raf(() => inputEl?.focus({ preventScroll: true }));
       },
       increment({ context, event, prop, computed }) {
-        const nextValue = incrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
-        const value = formatValue(clampValue(nextValue, prop("min"), prop("max")), { computed, prop });
-        context.set("value", value);
+        let nextValue = incrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
+        if (!prop("allowOverflow")) nextValue = clampValue(nextValue, prop("min"), prop("max"));
+        context.set("value", formatValue(nextValue, { computed, prop }));
       },
       decrement({ context, event, prop, computed }) {
-        const nextValue = decrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
-        const value = formatValue(clampValue(nextValue, prop("min"), prop("max")), { computed, prop });
-        context.set("value", value);
+        let nextValue = decrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
+        if (!prop("allowOverflow")) nextValue = clampValue(nextValue, prop("min"), prop("max"));
+        context.set("value", formatValue(nextValue, { computed, prop }));
       },
       setClampedValue({ context, prop, computed }) {
         const nextValue = clampValue(computed("valueAsNumber"), prop("min"), prop("max"));
         context.set("value", formatValue(nextValue, { computed, prop }));
       },
       setRawValue({ context, event, prop, computed }) {
-        const parsedValue = parseValue(event.value, { computed, prop });
-        const value = formatValue(clampValue(parsedValue, prop("min"), prop("max")), { computed, prop });
-        context.set("value", value);
+        let nextValue = parseValue(event.value, { computed, prop });
+        if (!prop("allowOverflow")) nextValue = clampValue(nextValue, prop("min"), prop("max"));
+        context.set("value", formatValue(nextValue, { computed, prop }));
       },
       setValue({ context, event }) {
         const value = event.target?.value ?? event.value;
@@ -761,9 +764,6 @@ var machine = createMachine({
       clearHint({ context }) {
         context.set("hint", null);
       },
-      setHintToSet({ context }) {
-        context.set("hint", "set");
-      },
       invokeOnFocus({ computed, prop }) {
         prop("onFocusChange")?.({
           focused: true,
@@ -778,8 +778,8 @@ var machine = createMachine({
           valueAsNumber: computed("valueAsNumber")
         });
       },
-      invokeOnInvalid({ computed, prop }) {
-        if (!computed("isOutOfRange")) return;
+      invokeOnInvalid({ computed, prop, event }) {
+        if (event.type === "INPUT.CHANGE") return;
         const reason = computed("valueAsNumber") > prop("max") ? "rangeOverflow" : "rangeUnderflow";
         prop("onValueInvalid")?.({
           reason,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,11 +27,11 @@
   },
   "dependencies": {
     "@internationalized/number": "3.6.0",
-    "@zag-js/anatomy": "1.2.0",
-    "@zag-js/core": "1.2.0",
-    "@zag-js/dom-query": "1.2.0",
-    "@zag-js/types": "1.2.0",
-    "@zag-js/utils": "1.2.0"
+    "@zag-js/anatomy": "1.3.0",
+    "@zag-js/core": "1.3.0",
+    "@zag-js/dom-query": "1.3.0",
+    "@zag-js/types": "1.3.0",
+    "@zag-js/utils": "1.3.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"