lite-phone-input 0.3.0 → 0.5.0

package/dist/preact/index.d.cts

@@ -46,6 +46,7 @@ interface PhoneInputOptions {
     initialValue?: string;
     containerClass?: string;
     dropdownContainer?: HTMLElement;
+    geoIpLookup?: (callback: (countryCode: string | null) => void) => void;
     onChange?: (e164: string, country: Country, validation: ValidationResult) => void;
     onCountryChange?: (country: Country) => void;
     onValidationChange?: (validation: ValidationResult) => void;

package/dist/preact/index.d.ts

@@ -46,6 +46,7 @@ interface PhoneInputOptions {
     initialValue?: string;
     containerClass?: string;
     dropdownContainer?: HTMLElement;
+    geoIpLookup?: (callback: (countryCode: string | null) => void) => void;
     onChange?: (e164: string, country: Country, validation: ValidationResult) => void;
     onCountryChange?: (country: Country) => void;
     onValidationChange?: (validation: ValidationResult) => void;

package/dist/preact/index.js

@@ -2810,7 +2810,27 @@ var phone_countries_default = [
 // src/core/format.ts
 var TRAILING_SEP = /[\s\-]+$/;
 var FALLBACK_GROUP = /(.{4})(?=.)/g;
-var NON_ASCII_DIGITS = /[\u0660-\u0669\u06F0-\u06F9]/g;
+var NUMERAL_BASES = [
+  1632,
+  // Arabic-Indic  ٠-٩
+  1776,
+  // Persian        ۰-۹
+  2406,
+  // Devanagari     ०-९
+  2534,
+  // Bengali        ০-৯
+  3664,
+  // Thai           ๐-๙
+  3792,
+  // Lao            ໐-໙
+  4160,
+  // Myanmar        ၀-၉
+  6112,
+  // Khmer          ០-៩
+  65296
+  // Fullwidth      ０-９
+];
+var NON_ASCII_DIGITS = /[\u0660-\u0669\u06F0-\u06F9\u0966-\u096F\u09E6-\u09EF\u0E50-\u0E59\u0ED0-\u0ED9\u1040-\u1049\u17E0-\u17E9\uFF10-\uFF19]/g;
 function isRelevantChar(ch) {
   const c = ch.charCodeAt(0);
   return c >= 48 && c <= 57 || c === 43;
@@ -2860,9 +2880,18 @@ function extractDigits(value) {
 function normalizeNumerals(value) {
   return value.replace(NON_ASCII_DIGITS, (c) => {
     const code = c.charCodeAt(0);
-    return code <= 1641 ? String(code - 1632) : String(code - 1776);
+    for (const base of NUMERAL_BASES) {
+      if (code >= base && code <= base + 9) {
+        return String(code - base);
+      }
+    }
+    return c;
   });
 }
+function isNonAsciiDigit(ch) {
+  const code = ch.charCodeAt(0);
+  return NUMERAL_BASES.some((base) => code >= base && code <= base + 9);
+}
 
 // src/core/countries.ts
 function getFlag(code) {
@@ -3275,6 +3304,7 @@ var PhoneInput = class _PhoneInput {
   constructor(el, options) {
     this.nationalDigits = "";
     this.displayInternational = false;
+    this.userHasInteracted = false;
     this.lastValidation = null;
     this.dropdown = null;
     this.dialCodeEl = null;
@@ -3292,6 +3322,7 @@ var PhoneInput = class _PhoneInput {
       if (this.opts.initialValue) {
         this.setValueInternal(this.opts.initialValue, true);
       }
+      this.invokeGeoIpLookup();
     }
   }
   get isNationalInput() {
@@ -3329,8 +3360,9 @@ var PhoneInput = class _PhoneInput {
     return validatePhone(this.nationalDigits, this.selectedCountry);
   }
   setOptions(opts) {
+    const { geoIpLookup: _, ...rest } = opts;
     const prev = { ...this.opts };
-    Object.assign(this.opts, opts);
+    Object.assign(this.opts, rest);
     if (opts.allowedCountries !== void 0 || opts.excludedCountries !== void 0) {
       this.countries = this.filterCountries(getAllCountries());
       if (!this.countries.find((c) => c.code === this.selectedCountry.code)) {
@@ -3372,6 +3404,16 @@ var PhoneInput = class _PhoneInput {
     }
     this.el.innerHTML = "";
   }
+  invokeGeoIpLookup() {
+    const lookup = this.opts.geoIpLookup;
+    if (!lookup) return;
+    this.opts.geoIpLookup = void 0;
+    const signal = this.ac.signal;
+    lookup((countryCode) => {
+      if (signal.aborted || this.userHasInteracted || !countryCode) return;
+      this.setCountry(countryCode);
+    });
+  }
   // --- DOM Construction ---
   buildDOM() {
     this.containerEl = document.createElement("div");
@@ -3471,6 +3513,7 @@ var PhoneInput = class _PhoneInput {
     this.inputEl.addEventListener("paste", (e) => this.handlePaste(e), { signal });
   }
   handleInput(e) {
+    this.userHasInteracted = true;
     if (this.opts.strict !== false && e.data === "+" && this.isNationalInput) {
       this.inputEl.value = this.inputEl.value.replace("+", "");
     }
@@ -3486,7 +3529,7 @@ var PhoneInput = class _PhoneInput {
       const formatted = this.formatNationalValue(digits);
       const np = this.shouldPrependPrefix ? this.selectedCountry.nationalPrefix : "";
       const display = !digits && np && extractDigits(raw).length > 0 ? np : digits && np ? np + formatted : formatted;
-      const newCursor = this.getNationalCursor(this.inputEl.value, oldCursor, formatted);
+      const newCursor = this.getNationalCursor(raw, oldCursor, formatted);
       this.inputEl.value = display;
       this.inputEl.setSelectionRange(newCursor, newCursor);
     } else {
@@ -3513,7 +3556,7 @@ var PhoneInput = class _PhoneInput {
       } else {
         formatted = this.formatNationalValue(national);
       }
-      const newCursor = getCursorPosition(this.inputEl.value, oldCursor, formatted);
+      const newCursor = getCursorPosition(raw, oldCursor, formatted);
       this.inputEl.value = formatted;
       this.inputEl.setSelectionRange(newCursor, newCursor);
     }
@@ -3528,14 +3571,12 @@ var PhoneInput = class _PhoneInput {
     if (!this.isNationalInput && e.key === "+" && this.inputEl.selectionStart === 0) {
       return;
     }
-    if (e.key.length === 1 && !/\d/.test(e.key)) {
-      const code = e.key.charCodeAt(0);
-      if (!(code >= 1632 && code <= 1641 || code >= 1776 && code <= 1785)) {
-        e.preventDefault();
-      }
+    if (e.key.length === 1 && !/\d/.test(e.key) && !isNonAsciiDigit(e.key)) {
+      e.preventDefault();
     }
   }
   handlePaste(e) {
+    this.userHasInteracted = true;
     e.preventDefault();
     const text = e.clipboardData?.getData("text") ?? "";
     if (!text) return;
@@ -3574,6 +3615,7 @@ var PhoneInput = class _PhoneInput {
   // --- Dropdown ---
   openDropdown() {
     if (this.dropdown) return;
+    this.userHasInteracted = true;
     this.dropdown = new Dropdown({
       countries: this.countries,
       preferredCountries: this.opts.preferredCountries ?? [],
@@ -3831,6 +3873,7 @@ var WIDGET_KEYS = /* @__PURE__ */ new Set([
   "initialValue",
   "containerClass",
   "dropdownContainer",
+  "geoIpLookup",
   "onChange",
   "onCountryChange",
   "onValidationChange",
@@ -3888,6 +3931,7 @@ var PhoneInput2 = forwardRef(
         hiddenInput: p.hiddenInput,
         containerClass: p.containerClass,
         dropdownContainer: p.dropdownContainer,
+        geoIpLookup: p.geoIpLookup,
         initialValue: p.initialValue,
         inputAttributes,
         onChange: (e164, country, validation) => propsRef.current.onChange?.(e164, country, validation),