@zag-js/number-input 0.1.14 → 0.1.15

package/dist/index.js

@@ -52,11 +52,8 @@ function getPlatform() {
 }
 var pt = (v) => isDom() && v.test(getPlatform());
 var vn = (v) => isDom() && v.test(navigator.vendor);
-var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
-var isMac = () => pt(/^Mac/) && !isTouchDevice;
 var isSafari = () => isApple() && vn(/apple/i);
 var isApple = () => pt(/mac|iphone|ipad|ipod/i);
-var isIos = () => isApple() && !isMac();
 function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
@@ -473,7 +470,7 @@ function connect(state, send, normalize) {
       name: state.context.name,
       id: dom.getInputId(state.context),
       role: "spinbutton",
-      value: state.context.formattedValue,
+      defaultValue: state.context.formattedValue,
       pattern: state.context.pattern,
       inputMode: state.context.inputMode,
       "aria-invalid": isInvalid || void 0,
@@ -485,7 +482,7 @@ function connect(state, send, normalize) {
       autoCorrect: "off",
       spellCheck: "false",
       type: "text",
-      "aria-roledescription": !isIos() ? "number field" : void 0,
+      "aria-roledescription": "numberfield",
       "aria-valuemin": state.context.min,
       "aria-valuemax": state.context.max,
       "aria-valuenow": isNaN(state.context.valueAsNumber) ? void 0 : state.context.valueAsNumber,
@@ -611,6 +608,28 @@ var callAll2 = (...fns) => (...a) => {
   });
 };
 
+// ../../utilities/form-utils/dist/index.mjs
+function getWindow(el) {
+  return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
+}
+function getDescriptor(el, options) {
+  const { type, property } = options;
+  const proto = getWindow(el)[type].prototype;
+  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
+}
+function dispatchInputValueEvent(el, value) {
+  var _a;
+  if (!el)
+    return;
+  const win = getWindow(el);
+  if (!(el instanceof win.HTMLInputElement))
+    return;
+  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
+  (_a = desc.set) == null ? void 0 : _a.call(el, value);
+  const event = new win.Event("input", { bubbles: true });
+  el.dispatchEvent(event);
+}
+
 // src/number-input.machine.ts
 var { not, and } = import_core.guards;
 function machine(ctx) {
@@ -659,14 +678,20 @@ function machine(ctx) {
         }
       },
       watch: {
-        value: ["invokeOnChange"],
+        value: ["invokeOnChange", "dispatchChangeEvent"],
         isOutOfRange: ["invokeOnInvalid"],
         scrubberCursorPoint: ["setVirtualCursorPosition"]
       },
       on: {
-        SET_VALUE: {
-          actions: ["setValue", "setHintToSet"]
-        },
+        SET_VALUE: [
+          {
+            guard: "clampOnBlur",
+            actions: ["setValue", "clampValue", "setHintToSet"]
+          },
+          {
+            actions: ["setValue", "setHintToSet"]
+          }
+        ],
         CLEAR_VALUE: {
           actions: ["clearValue"]
         },
@@ -985,6 +1010,9 @@ function machine(ctx) {
             return;
           const { x, y } = ctx2.scrubberCursorPoint;
           cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
+        },
+        dispatchChangeEvent(ctx2) {
+          dispatchInputValueEvent(dom.getInputEl(ctx2), ctx2.formattedValue);
         }
       },
       hookSync: true

package/dist/index.mjs

@@ -25,11 +25,8 @@ function getPlatform() {
 }
 var pt = (v) => isDom() && v.test(getPlatform());
 var vn = (v) => isDom() && v.test(navigator.vendor);
-var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
-var isMac = () => pt(/^Mac/) && !isTouchDevice;
 var isSafari = () => isApple() && vn(/apple/i);
 var isApple = () => pt(/mac|iphone|ipad|ipod/i);
-var isIos = () => isApple() && !isMac();
 function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
@@ -446,7 +443,7 @@ function connect(state, send, normalize) {
       name: state.context.name,
       id: dom.getInputId(state.context),
       role: "spinbutton",
-      value: state.context.formattedValue,
+      defaultValue: state.context.formattedValue,
       pattern: state.context.pattern,
       inputMode: state.context.inputMode,
       "aria-invalid": isInvalid || void 0,
@@ -458,7 +455,7 @@ function connect(state, send, normalize) {
       autoCorrect: "off",
       spellCheck: "false",
       type: "text",
-      "aria-roledescription": !isIos() ? "number field" : void 0,
+      "aria-roledescription": "numberfield",
       "aria-valuemin": state.context.min,
       "aria-valuemax": state.context.max,
       "aria-valuenow": isNaN(state.context.valueAsNumber) ? void 0 : state.context.valueAsNumber,
@@ -584,6 +581,28 @@ var callAll2 = (...fns) => (...a) => {
   });
 };
 
+// ../../utilities/form-utils/dist/index.mjs
+function getWindow(el) {
+  return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
+}
+function getDescriptor(el, options) {
+  const { type, property } = options;
+  const proto = getWindow(el)[type].prototype;
+  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
+}
+function dispatchInputValueEvent(el, value) {
+  var _a;
+  if (!el)
+    return;
+  const win = getWindow(el);
+  if (!(el instanceof win.HTMLInputElement))
+    return;
+  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
+  (_a = desc.set) == null ? void 0 : _a.call(el, value);
+  const event = new win.Event("input", { bubbles: true });
+  el.dispatchEvent(event);
+}
+
 // src/number-input.machine.ts
 var { not, and } = guards;
 function machine(ctx) {
@@ -632,14 +651,20 @@ function machine(ctx) {
         }
       },
       watch: {
-        value: ["invokeOnChange"],
+        value: ["invokeOnChange", "dispatchChangeEvent"],
         isOutOfRange: ["invokeOnInvalid"],
         scrubberCursorPoint: ["setVirtualCursorPosition"]
       },
       on: {
-        SET_VALUE: {
-          actions: ["setValue", "setHintToSet"]
-        },
+        SET_VALUE: [
+          {
+            guard: "clampOnBlur",
+            actions: ["setValue", "clampValue", "setHintToSet"]
+          },
+          {
+            actions: ["setValue", "setHintToSet"]
+          }
+        ],
         CLEAR_VALUE: {
           actions: ["clearValue"]
         },
@@ -958,6 +983,9 @@ function machine(ctx) {
             return;
           const { x, y } = ctx2.scrubberCursorPoint;
           cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
+        },
+        dispatchChangeEvent(ctx2) {
+          dispatchInputValueEvent(dom.getInputEl(ctx2), ctx2.formattedValue);
         }
       },
       hookSync: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,10 +30,11 @@
   },
   "dependencies": {
     "@zag-js/core": "0.1.9",
-    "@zag-js/types": "0.2.3"
+    "@zag-js/types": "0.2.4"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.1.9",
+    "@zag-js/dom-utils": "0.1.10",
+    "@zag-js/form-utils": "0.1.0",
     "@zag-js/number-utils": "0.1.3",
     "@zag-js/utils": "0.1.3"
   },