@zag-js/number-input 1.22.1 → 1.23.0

package/dist/index.js

@@ -111,7 +111,8 @@ function connect(service, normalize) {
   const { state, send, prop, scope, computed } = service;
   const focused = state.hasTag("focus");
   const disabled = computed("isDisabled");
-  const readOnly = prop("readOnly");
+  const readOnly = !!prop("readOnly");
+  const required = !!prop("required");
   const scrubbing = state.matches("scrubbing");
   const empty = computed("isValueEmpty");
   const invalid = computed("isOutOfRange") || !!prop("invalid");
@@ -163,6 +164,7 @@ function connect(service, normalize) {
         "data-disabled": domQuery.dataAttr(disabled),
         "data-focus": domQuery.dataAttr(focused),
         "data-invalid": domQuery.dataAttr(invalid),
+        "data-required": domQuery.dataAttr(required),
         "data-scrubbing": domQuery.dataAttr(scrubbing),
         id: getLabelId(scope),
         htmlFor: getInputId(scope)
@@ -361,8 +363,8 @@ function connect(service, normalize) {
 }
 
 // src/cursor.ts
-function recordCursor(inputEl) {
-  if (!inputEl || inputEl.ownerDocument.activeElement !== inputEl) return;
+function recordCursor(inputEl, scope) {
+  if (!inputEl || !scope.isActiveElement(inputEl)) return;
   try {
     const { selectionStart: start, selectionEnd: end, value } = inputEl;
     const beforeTxt = value.substring(0, start);
@@ -377,8 +379,8 @@ function recordCursor(inputEl) {
   } catch {
   }
 }
-function restoreCursor(inputEl, selection) {
-  if (!inputEl || inputEl.ownerDocument.activeElement !== inputEl) return;
+function restoreCursor(inputEl, selection, scope) {
+  if (!inputEl || !scope.isActiveElement(inputEl)) return;
   if (!selection) {
     inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);
     return;
@@ -493,11 +495,11 @@ var machine = createMachine({
     valueText: ({ prop, context }) => prop("translations").valueText?.(context.get("value")),
     formatter: core.memo(
       ({ prop }) => [prop("locale"), prop("formatOptions")],
-      (locale, formatOptions) => createFormatter(locale, formatOptions)
+      ([locale, formatOptions]) => createFormatter(locale, formatOptions)
     ),
     parser: core.memo(
       ({ prop }) => [prop("locale"), prop("formatOptions")],
-      (locale, formatOptions) => createParser(locale, formatOptions)
+      ([locale, formatOptions]) => createParser(locale, formatOptions)
     )
   },
   watch({ track, action, context, computed, prop }) {
@@ -813,10 +815,10 @@ var machine = createMachine({
       syncInputElement({ context, event, computed, scope }) {
         const value = event.type.endsWith("CHANGE") ? context.get("value") : computed("formattedValue");
         const inputEl = getInputEl(scope);
-        const sel = recordCursor(inputEl);
+        const sel = recordCursor(inputEl, scope);
         domQuery.raf(() => {
           domQuery.setElementValue(inputEl, value);
-          restoreCursor(inputEl, sel);
+          restoreCursor(inputEl, sel, scope);
         });
       },
       setFormattedValue({ context, computed }) {

package/dist/index.mjs

@@ -109,7 +109,8 @@ function connect(service, normalize) {
   const { state, send, prop, scope, computed } = service;
   const focused = state.hasTag("focus");
   const disabled = computed("isDisabled");
-  const readOnly = prop("readOnly");
+  const readOnly = !!prop("readOnly");
+  const required = !!prop("required");
   const scrubbing = state.matches("scrubbing");
   const empty = computed("isValueEmpty");
   const invalid = computed("isOutOfRange") || !!prop("invalid");
@@ -161,6 +162,7 @@ function connect(service, normalize) {
         "data-disabled": dataAttr(disabled),
         "data-focus": dataAttr(focused),
         "data-invalid": dataAttr(invalid),
+        "data-required": dataAttr(required),
         "data-scrubbing": dataAttr(scrubbing),
         id: getLabelId(scope),
         htmlFor: getInputId(scope)
@@ -359,8 +361,8 @@ function connect(service, normalize) {
 }
 
 // src/cursor.ts
-function recordCursor(inputEl) {
-  if (!inputEl || inputEl.ownerDocument.activeElement !== inputEl) return;
+function recordCursor(inputEl, scope) {
+  if (!inputEl || !scope.isActiveElement(inputEl)) return;
   try {
     const { selectionStart: start, selectionEnd: end, value } = inputEl;
     const beforeTxt = value.substring(0, start);
@@ -375,8 +377,8 @@ function recordCursor(inputEl) {
   } catch {
   }
 }
-function restoreCursor(inputEl, selection) {
-  if (!inputEl || inputEl.ownerDocument.activeElement !== inputEl) return;
+function restoreCursor(inputEl, selection, scope) {
+  if (!inputEl || !scope.isActiveElement(inputEl)) return;
   if (!selection) {
     inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);
     return;
@@ -491,11 +493,11 @@ var machine = createMachine({
     valueText: ({ prop, context }) => prop("translations").valueText?.(context.get("value")),
     formatter: memo(
       ({ prop }) => [prop("locale"), prop("formatOptions")],
-      (locale, formatOptions) => createFormatter(locale, formatOptions)
+      ([locale, formatOptions]) => createFormatter(locale, formatOptions)
     ),
     parser: memo(
       ({ prop }) => [prop("locale"), prop("formatOptions")],
-      (locale, formatOptions) => createParser(locale, formatOptions)
+      ([locale, formatOptions]) => createParser(locale, formatOptions)
     )
   },
   watch({ track, action, context, computed, prop }) {
@@ -811,10 +813,10 @@ var machine = createMachine({
       syncInputElement({ context, event, computed, scope }) {
         const value = event.type.endsWith("CHANGE") ? context.get("value") : computed("formattedValue");
         const inputEl = getInputEl(scope);
-        const sel = recordCursor(inputEl);
+        const sel = recordCursor(inputEl, scope);
         raf(() => {
           setElementValue(inputEl, value);
-          restoreCursor(inputEl, sel);
+          restoreCursor(inputEl, sel, scope);
         });
       },
       setFormattedValue({ context, computed }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "1.22.1",
+  "version": "1.23.0",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,12 +26,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@internationalized/number": "3.6.4",
-    "@zag-js/anatomy": "1.22.1",
-    "@zag-js/core": "1.22.1",
-    "@zag-js/dom-query": "1.22.1",
-    "@zag-js/types": "1.22.1",
-    "@zag-js/utils": "1.22.1"
+    "@internationalized/number": "3.6.5",
+    "@zag-js/anatomy": "1.23.0",
+    "@zag-js/core": "1.23.0",
+    "@zag-js/dom-query": "1.23.0",
+    "@zag-js/types": "1.23.0",
+    "@zag-js/utils": "1.23.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"