@zag-js/number-input 1.24.1 → 1.25.0

package/dist/index.js

@@ -106,6 +106,83 @@ var createVirtualCursor = (ctx, point) => {
   doc.body.appendChild(el);
 };
 
+// src/cursor.ts
+function recordCursor(inputEl, scope) {
+  if (!inputEl || !scope.isActiveElement(inputEl)) return;
+  try {
+    const { selectionStart: start, selectionEnd: end, value } = inputEl;
+    if (start == null || end == null) return void 0;
+    return { start, end, value };
+  } catch {
+    return void 0;
+  }
+}
+function restoreCursor(inputEl, selection, scope) {
+  if (!inputEl || !scope.isActiveElement(inputEl)) return;
+  if (!selection) {
+    const len = inputEl.value.length;
+    inputEl.setSelectionRange(len, len);
+    return;
+  }
+  try {
+    const newValue = inputEl.value;
+    const { start, end, value: oldValue } = selection;
+    if (newValue === oldValue) {
+      inputEl.setSelectionRange(start, end);
+      return;
+    }
+    const newStart = getNewCursorPosition(oldValue, newValue, start);
+    const newEnd = start === end ? newStart : getNewCursorPosition(oldValue, newValue, end);
+    const clampedStart = Math.max(0, Math.min(newStart, newValue.length));
+    const clampedEnd = Math.max(clampedStart, Math.min(newEnd, newValue.length));
+    inputEl.setSelectionRange(clampedStart, clampedEnd);
+  } catch {
+    const len = inputEl.value.length;
+    inputEl.setSelectionRange(len, len);
+  }
+}
+function getNewCursorPosition(oldValue, newValue, oldPosition) {
+  const beforeCursor = oldValue.slice(0, oldPosition);
+  const afterCursor = oldValue.slice(oldPosition);
+  let prefixLength = 0;
+  const maxPrefixLength = Math.min(beforeCursor.length, newValue.length);
+  for (let i = 0; i < maxPrefixLength; i++) {
+    if (beforeCursor[i] === newValue[i]) {
+      prefixLength = i + 1;
+    } else {
+      break;
+    }
+  }
+  let suffixLength = 0;
+  const maxSuffixLength = Math.min(afterCursor.length, newValue.length - prefixLength);
+  for (let i = 0; i < maxSuffixLength; i++) {
+    const oldIndex = afterCursor.length - 1 - i;
+    const newIndex = newValue.length - 1 - i;
+    if (afterCursor[oldIndex] === newValue[newIndex]) {
+      suffixLength = i + 1;
+    } else {
+      break;
+    }
+  }
+  if (prefixLength >= beforeCursor.length) {
+    return prefixLength;
+  }
+  if (suffixLength >= afterCursor.length) {
+    return newValue.length - suffixLength;
+  }
+  if (prefixLength > 0) {
+    return prefixLength;
+  }
+  if (suffixLength > 0) {
+    return newValue.length - suffixLength;
+  }
+  if (oldValue.length > 0) {
+    const ratio = oldPosition / oldValue.length;
+    return Math.round(ratio * newValue.length);
+  }
+  return newValue.length;
+}
+
 // src/number-input.connect.ts
 function connect(service, normalize) {
   const { state, send, prop, scope, computed } = service;
@@ -227,7 +304,8 @@ function connect(service, normalize) {
           send({ type: "INPUT.BLUR" });
         },
         onInput(event) {
-          send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set" });
+          const selection = recordCursor(event.currentTarget, scope);
+          send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set", selection });
         },
         onBeforeInput(event) {
           try {
@@ -361,49 +439,6 @@ function connect(service, normalize) {
     }
   };
 }
-
-// src/cursor.ts
-function recordCursor(inputEl, scope) {
-  if (!inputEl || !scope.isActiveElement(inputEl)) return;
-  try {
-    const { selectionStart: start, selectionEnd: end, value } = inputEl;
-    const beforeTxt = value.substring(0, start);
-    const afterTxt = value.substring(end);
-    return {
-      start,
-      end,
-      value,
-      beforeTxt,
-      afterTxt
-    };
-  } catch {
-  }
-}
-function restoreCursor(inputEl, selection, scope) {
-  if (!inputEl || !scope.isActiveElement(inputEl)) return;
-  if (!selection) {
-    inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);
-    return;
-  }
-  try {
-    const { value } = inputEl;
-    const { beforeTxt = "", afterTxt = "", start } = selection;
-    let startPos = value.length;
-    if (value.endsWith(afterTxt)) {
-      startPos = value.length - afterTxt.length;
-    } else if (value.startsWith(beforeTxt)) {
-      startPos = beforeTxt.length;
-    } else if (start != null) {
-      const beforeLastChar = beforeTxt[start - 1];
-      const newIndex = value.indexOf(beforeLastChar, start - 1);
-      if (newIndex !== -1) {
-        startPos = newIndex + 1;
-      }
-    }
-    inputEl.setSelectionRange(startPos, startPos);
-  } catch {
-  }
-}
 var createFormatter = (locale, options = {}) => {
   return new Intl.NumberFormat(locale, options);
 };
@@ -815,7 +850,7 @@ 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, scope);
+        const sel = event.selection;
         domQuery.raf(() => {
           domQuery.setElementValue(inputEl, value);
           restoreCursor(inputEl, sel, scope);

package/dist/index.mjs

@@ -104,6 +104,83 @@ var createVirtualCursor = (ctx, point) => {
   doc.body.appendChild(el);
 };
 
+// src/cursor.ts
+function recordCursor(inputEl, scope) {
+  if (!inputEl || !scope.isActiveElement(inputEl)) return;
+  try {
+    const { selectionStart: start, selectionEnd: end, value } = inputEl;
+    if (start == null || end == null) return void 0;
+    return { start, end, value };
+  } catch {
+    return void 0;
+  }
+}
+function restoreCursor(inputEl, selection, scope) {
+  if (!inputEl || !scope.isActiveElement(inputEl)) return;
+  if (!selection) {
+    const len = inputEl.value.length;
+    inputEl.setSelectionRange(len, len);
+    return;
+  }
+  try {
+    const newValue = inputEl.value;
+    const { start, end, value: oldValue } = selection;
+    if (newValue === oldValue) {
+      inputEl.setSelectionRange(start, end);
+      return;
+    }
+    const newStart = getNewCursorPosition(oldValue, newValue, start);
+    const newEnd = start === end ? newStart : getNewCursorPosition(oldValue, newValue, end);
+    const clampedStart = Math.max(0, Math.min(newStart, newValue.length));
+    const clampedEnd = Math.max(clampedStart, Math.min(newEnd, newValue.length));
+    inputEl.setSelectionRange(clampedStart, clampedEnd);
+  } catch {
+    const len = inputEl.value.length;
+    inputEl.setSelectionRange(len, len);
+  }
+}
+function getNewCursorPosition(oldValue, newValue, oldPosition) {
+  const beforeCursor = oldValue.slice(0, oldPosition);
+  const afterCursor = oldValue.slice(oldPosition);
+  let prefixLength = 0;
+  const maxPrefixLength = Math.min(beforeCursor.length, newValue.length);
+  for (let i = 0; i < maxPrefixLength; i++) {
+    if (beforeCursor[i] === newValue[i]) {
+      prefixLength = i + 1;
+    } else {
+      break;
+    }
+  }
+  let suffixLength = 0;
+  const maxSuffixLength = Math.min(afterCursor.length, newValue.length - prefixLength);
+  for (let i = 0; i < maxSuffixLength; i++) {
+    const oldIndex = afterCursor.length - 1 - i;
+    const newIndex = newValue.length - 1 - i;
+    if (afterCursor[oldIndex] === newValue[newIndex]) {
+      suffixLength = i + 1;
+    } else {
+      break;
+    }
+  }
+  if (prefixLength >= beforeCursor.length) {
+    return prefixLength;
+  }
+  if (suffixLength >= afterCursor.length) {
+    return newValue.length - suffixLength;
+  }
+  if (prefixLength > 0) {
+    return prefixLength;
+  }
+  if (suffixLength > 0) {
+    return newValue.length - suffixLength;
+  }
+  if (oldValue.length > 0) {
+    const ratio = oldPosition / oldValue.length;
+    return Math.round(ratio * newValue.length);
+  }
+  return newValue.length;
+}
+
 // src/number-input.connect.ts
 function connect(service, normalize) {
   const { state, send, prop, scope, computed } = service;
@@ -225,7 +302,8 @@ function connect(service, normalize) {
           send({ type: "INPUT.BLUR" });
         },
         onInput(event) {
-          send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set" });
+          const selection = recordCursor(event.currentTarget, scope);
+          send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set", selection });
         },
         onBeforeInput(event) {
           try {
@@ -359,49 +437,6 @@ function connect(service, normalize) {
     }
   };
 }
-
-// src/cursor.ts
-function recordCursor(inputEl, scope) {
-  if (!inputEl || !scope.isActiveElement(inputEl)) return;
-  try {
-    const { selectionStart: start, selectionEnd: end, value } = inputEl;
-    const beforeTxt = value.substring(0, start);
-    const afterTxt = value.substring(end);
-    return {
-      start,
-      end,
-      value,
-      beforeTxt,
-      afterTxt
-    };
-  } catch {
-  }
-}
-function restoreCursor(inputEl, selection, scope) {
-  if (!inputEl || !scope.isActiveElement(inputEl)) return;
-  if (!selection) {
-    inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);
-    return;
-  }
-  try {
-    const { value } = inputEl;
-    const { beforeTxt = "", afterTxt = "", start } = selection;
-    let startPos = value.length;
-    if (value.endsWith(afterTxt)) {
-      startPos = value.length - afterTxt.length;
-    } else if (value.startsWith(beforeTxt)) {
-      startPos = beforeTxt.length;
-    } else if (start != null) {
-      const beforeLastChar = beforeTxt[start - 1];
-      const newIndex = value.indexOf(beforeLastChar, start - 1);
-      if (newIndex !== -1) {
-        startPos = newIndex + 1;
-      }
-    }
-    inputEl.setSelectionRange(startPos, startPos);
-  } catch {
-  }
-}
 var createFormatter = (locale, options = {}) => {
   return new Intl.NumberFormat(locale, options);
 };
@@ -813,7 +848,7 @@ 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, scope);
+        const sel = event.selection;
         raf(() => {
           setElementValue(inputEl, value);
           restoreCursor(inputEl, sel, scope);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "1.24.1",
+  "version": "1.25.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.5",
-    "@zag-js/anatomy": "1.24.1",
-    "@zag-js/core": "1.24.1",
-    "@zag-js/dom-query": "1.24.1",
-    "@zag-js/types": "1.24.1",
-    "@zag-js/utils": "1.24.1"
+    "@zag-js/anatomy": "1.25.0",
+    "@zag-js/core": "1.25.0",
+    "@zag-js/dom-query": "1.25.0",
+    "@zag-js/types": "1.25.0",
+    "@zag-js/utils": "1.25.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"