lite-phone-input 0.3.0 → 0.4.0

package/README.md

@@ -97,6 +97,36 @@ Same API as React. Uses `preact/hooks` directly — no `preact/compat` required.
 </script>
 ```
 
+## Geo IP Lookup
+
+Auto-detect the user's country at mount time using any geo-IP service. The lookup runs once, and the result is ignored if the user has already interacted with the widget.
+
+```js
+const phone = PhoneInput.mount(document.getElementById('phone'), {
+  defaultCountry: 'US',
+  geoIpLookup: (callback) => {
+    // Cloudflare (free, no API key)
+    fetch('/cdn-cgi/trace')
+      .then(res => res.text())
+      .then(text => {
+        const match = text.match(/loc=(\w+)/);
+        callback(match ? match[1] : null);
+      })
+      .catch(() => callback(null));
+  },
+});
+```
+
+```js
+// Alternative: ipapi.co
+geoIpLookup: (callback) => {
+  fetch('https://ipapi.co/json/')
+    .then(res => res.json())
+    .then(data => callback(data.country_code))
+    .catch(() => callback(null));
+}
+```
+
 ## Documentation
 
 | Guide | Description |

package/dist/core/index.d.cts

@@ -65,6 +65,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/core/index.d.ts

@@ -65,6 +65,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.cjs

@@ -3301,6 +3301,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;
@@ -3318,6 +3319,7 @@ var PhoneInput = class _PhoneInput {
       if (this.opts.initialValue) {
         this.setValueInternal(this.opts.initialValue, true);
       }
+      this.invokeGeoIpLookup();
     }
   }
   get isNationalInput() {
@@ -3355,8 +3357,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)) {
@@ -3398,6 +3401,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");
@@ -3497,6 +3510,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("+", "");
     }
@@ -3562,6 +3576,7 @@ var PhoneInput = class _PhoneInput {
     }
   }
   handlePaste(e) {
+    this.userHasInteracted = true;
     e.preventDefault();
     const text = e.clipboardData?.getData("text") ?? "";
     if (!text) return;
@@ -3600,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 ?? [],
@@ -3857,6 +3873,7 @@ var WIDGET_KEYS = /* @__PURE__ */ new Set([
   "initialValue",
   "containerClass",
   "dropdownContainer",
+  "geoIpLookup",
   "onChange",
   "onCountryChange",
   "onValidationChange",
@@ -3914,6 +3931,7 @@ var PhoneInput2 = (0, import_compat.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),