@telixon/web-sdk 1.0.0 → 1.0.1

package/README.md

@@ -5,6 +5,7 @@ The DOM adapter for [`@telixon/core`](https://www.npmjs.com/package/@telixon/cor
 [![conformance](https://img.shields.io/endpoint?url=https://proof.telixon.dev/parity-badge.json)](https://proof.telixon.dev/parity.html)
 [![benchmarks](https://img.shields.io/endpoint?url=https://proof.telixon.dev/bench-badge.json)](https://proof.telixon.dev/benchmark.html)
 [![initial bundle](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fregistry.npmjs.org%2F%40telixon%2Fweb-sdk%2Flatest&query=%24.bundleSize&label=initial%20bundle&color=26997b)](https://www.npmjs.com/package/@telixon/web-sdk)
+[![downloads](https://img.shields.io/npm/dm/%40telixon%2Fweb-sdk?color=26997b&label=downloads)](https://www.npmjs.com/package/@telixon/web-sdk)
 
 **[Documentation](https://telixon.dev/web-sdk/)** · **[Live demo](https://telixon.dev/web-sdk/guides/complete-field/)**
 

package/dist/index.js

@@ -78,7 +78,8 @@ function createInternationalController(options) {
   return createInternationalInputController(config);
 }
 function buildController(options) {
-  return options.mode === "national" ? createNationalController(options) : createInternationalController(options);
+  const seeded = options.initialValue === void 0 && options.input.value !== "" ? { ...options, initialValue: options.input.value } : options;
+  return seeded.mode === "national" ? createNationalController(seeded) : createInternationalController(seeded);
 }
 
 // src/modules/phone-input/utils/derive-state.ts
@@ -202,12 +203,27 @@ function createPhoneInput(options) {
     change();
     notify(buildState());
   }
+  function reconcile() {
+    const domValue = input.value;
+    if (domValue === inputController.currentState.value) return;
+    commit(() => inputController.setValue(domValue));
+  }
   function handleCompositionEnd(event) {
     if (event.target !== input) return;
-    if (!event.data) return;
-    const start = input.selectionStart ?? 0;
-    const end = input.selectionEnd ?? 0;
-    commit(() => inputController.insert(input.value, event.data, start, end));
+    const data = event.data ?? "";
+    const value = input.value;
+    const caret = input.selectionStart ?? value.length;
+    const start = caret - data.length;
+    if (data !== "" && start >= 0 && value.slice(start, caret) === data) {
+      commit(() => inputController.insert(value.slice(0, start) + value.slice(caret), data, start, start));
+      return;
+    }
+    reconcile();
+  }
+  function handleInput(event) {
+    if (event.target !== input) return;
+    if (event instanceof InputEvent && event.isComposing) return;
+    reconcile();
   }
   function handleBeforeInput(event) {
     if (event.target !== input) return;
@@ -296,6 +312,7 @@ function createPhoneInput(options) {
   }
   input.addEventListener("compositionend", handleCompositionEnd);
   input.addEventListener("beforeinput", handleBeforeInput);
+  input.addEventListener("input", handleInput);
   input.addEventListener("keydown", handleKeyDown);
   notify(buildState());
   return {
@@ -346,6 +363,7 @@ function createPhoneInput(options) {
       ATTACHED_INPUTS.delete(input);
       input.removeEventListener("compositionend", handleCompositionEnd);
       input.removeEventListener("beforeinput", handleBeforeInput);
+      input.removeEventListener("input", handleInput);
       input.removeEventListener("keydown", handleKeyDown);
       listeners.clear();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telixon/web-sdk",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "DOM adapter for @telixon/core: two headless widgets, PhoneInput driving a plain <input> and RegionList feeding region pickers.",
   "keywords": [
     "phone-input",
@@ -37,10 +37,10 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@telixon/core": "^1.0.0"
+    "@telixon/core": "^1.1.1"
   },
   "engines": {
     "node": ">=18"
   },
-  "bundleSize": "3.77 kB brotli"
+  "bundleSize": "3.92 kB brotli"
 }