intl-tel-input 26.9.2 → 27.0.0

package/react/{build → dist}/IntlTelInput.js

@@ -1,4 +1,4 @@
-// src/js/intl-tel-input/data.ts
+// dist/js/intlTelInput.mjs
 var rawCountryData = [
   [
     "af",
@@ -1700,8 +1700,6 @@ for (const c of rawCountryData) {
 var iso2Set = new Set(allCountries.map((c) => c.iso2));
 var isIso2 = (val) => iso2Set.has(val);
 var data_default = allCountries;
-
-// src/js/modules/constants.ts
 var EVENTS = {
   OPEN_COUNTRY_DROPDOWN: "open:countrydropdown",
   CLOSE_COUNTRY_DROPDOWN: "close:countrydropdown",
@@ -1821,11 +1819,9 @@ var ARIA = {
   AUTOCOMPLETE: "aria-autocomplete",
   MODAL: "aria-modal"
 };
-
-// src/js/intl-tel-input/i18n/en/index.ts
 var interfaceTranslations = {
-  selectedCountryAriaLabel: "Change country, selected ${countryName} (${dialCode})",
-  noCountrySelected: "Select country",
+  selectedCountryAriaLabel: "Change country for phone number, currently selected ${countryName} (${dialCode})",
+  noCountrySelected: "Select country for phone number",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
   clearSearchAriaLabel: "Clear search",
@@ -1841,8 +1837,6 @@ var interfaceTranslations = {
   }
 };
 var en_default = interfaceTranslations;
-
-// src/js/modules/core/options.ts
 var mq = (q) => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(q).matches;
 var isNarrowViewport = () => mq(`(max-width: ${LAYOUT.NARROW_VIEWPORT_WIDTH}px)`);
 var computeDefaultUseFullscreenPopup = () => {
@@ -1879,7 +1873,7 @@ var defaults = {
   //* Append menu to specified element.
   dropdownContainer: null,
   //* Don't display these countries.
-  excludeCountries: [],
+  excludeCountries: null,
   //* Fix the dropdown width to the input width (rather than being as wide as the longest country name).
   fixDropdownWidth: true,
   //* Format the number as the user types
@@ -1899,7 +1893,7 @@ var defaults = {
   //* National vs international formatting for numbers e.g. placeholders and displaying existing numbers.
   nationalMode: true,
   //* Display only these countries.
-  onlyCountries: [],
+  onlyCountries: null,
   //* Number type to use for placeholders.
   placeholderNumberType: "MOBILE",
   //* Add custom classes to the search input element.
@@ -1917,7 +1911,9 @@ var toString = (val) => JSON.stringify(val);
 var isPlainObject = (val) => Boolean(val) && typeof val === "object" && !Array.isArray(val);
 var isFn = (val) => typeof val === "function";
 var isElLike = (val) => {
-  if (!val || typeof val !== "object") return false;
+  if (!val || typeof val !== "object") {
+    return false;
+  }
   const v = val;
   return v.nodeType === 1 && typeof v.tagName === "string" && typeof v.appendChild === "function";
 };
@@ -2032,9 +2028,13 @@ var validateOptions = (customOptions) => {
         break;
       case "excludeCountries":
       case "onlyCountries": {
-        const filtered = validateIso2Array(key, value);
-        if (filtered !== false) {
-          validatedOptions[key] = filtered;
+        if (value === null) {
+          validatedOptions[key] = value;
+        } else {
+          const filtered = validateIso2Array(key, value);
+          if (filtered !== false) {
+            validatedOptions[key] = filtered;
+          }
         }
         break;
       }
@@ -2118,7 +2118,7 @@ var applyOptionSideEffects = (o) => {
       o.fixDropdownWidth = true;
     }
   }
-  if (o.onlyCountries.length === 1) {
+  if (o.onlyCountries?.length === 1) {
     o.initialCountry = o.onlyCountries[0];
   }
   if (o.separateDialCode) {
@@ -2132,15 +2132,9 @@ var applyOptionSideEffects = (o) => {
   }
   o.i18n = { ...en_default, ...o.i18n };
 };
-
-// src/js/modules/utils/string.ts
 var getNumeric = (s) => s.replace(/\D/g, "");
 var normaliseString = (s = "") => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
-
-// src/js/modules/utils/isAndroid.ts
 var getIsAndroid = () => typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
-
-// src/js/modules/core/countrySearch.ts
 var getMatchedCountries = (countries, query) => {
   const normalisedQuery = normaliseString(query);
   const iso2Matches = [];
@@ -2184,8 +2178,6 @@ var findFirstCountryStartingWith = (countries, query) => {
   }
   return null;
 };
-
-// src/js/modules/utils/dom.ts
 var buildClassNames = (flags) => Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
 var createEl = (tagName, attrs, container) => {
   const el = document.createElement(tagName);
@@ -2199,8 +2191,6 @@ var createEl = (tagName, attrs, container) => {
   }
   return el;
 };
-
-// src/js/modules/core/icons.ts
 var buildSearchIcon = () => `
   <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" ${ARIA.HIDDEN}="true">
     <circle cx="11" cy="11" r="7" />
@@ -2226,32 +2216,14 @@ var buildGlobeIcon = () => `
     <path d="M508 213a240 240 0 0 0-449-87l-2 5-2 5c-8 14-13 30-17 46a65 65 0 0 1 56 4c16-10 35-19 56-27l9-3c-6 23-10 48-10 74h-16l4 6c3 4 5 8 6 13h6c0 22 3 44 8 65l2 10-25-10-4 5 12 18 9 3 6 2 8 3 9 26 1 2 16-7h1l-5-13-1-2c24 6 49 9 75 10v26l11 10 7 7v-30l1-13c22 0 44-3 65-8l10-2-21 48-1 1a317 317 0 0 1-14 23l-21 5h-2c6 16 7 33 1 50a240 240 0 0 0 211-265m-401-56-11 6c19-44 54-79 98-98-11 20-21 44-29 69-21 6-40 15-58 23m154 182v4c-29-1-57-6-81-13-7-25-12-52-13-81h94zm0-109h-94c1-29 6-56 13-81 24-7 52-12 81-13zm0-112c-22 1-44 4-65 8l-10 2 12-30 9-17 1-2a332 332 0 0 1 13-23c13-4 26-6 40-7zm187 69 6 4c4 12 6 25 6 38v1h-68c-1-26-4-51-10-74l48 20 1 1 14 8zm-14-44 10 20c-20-11-43-21-68-29-8-25-18-49-29-69 37 16 67 44 87 78M279 49h1c13 1 27 3 39 7l14 23 1 2a343 343 0 0 1 12 26l2 5 6 16c-23-6-48-9-74-10h-1zm0 87h1c29 1 56 6 81 13 7 24 12 51 12 80v1h-94zm2 207h-2v-94h95c-1 29-6 56-13 81-24 7-51 12-80 13m86 60-20 10c11-20 21-43 29-68 25-8 48-18 68-29-16 37-43 67-77 87m87-115-7 5-16 9-2 1a337 337 0 0 1-47 21c6-24 9-49 10-75h68c0 13-2 27-6 39"/>
     <path d="m261 428-2-2-22-21a40 40 0 0 0-32-11h-1a37 37 0 0 0-18 8l-1 1-4 2-2 2-5 4c-9-3-36-31-47-44s-32-45-34-55l3-2a151 151 0 0 0 11-9v-1a39 39 0 0 0 5-48l-3-3-11-19-3-4-5-7h-1l-3-3-4-3-5-2a35 35 0 0 0-16-3h-5c-4 1-14 5-24 11l-4 2-4 3-4 2c-9 8-17 17-18 27a380 380 0 0 0 212 259h3c12 0 25-10 36-21l10-12 6-11a39 39 0 0 0-8-40"/>
   </svg>`;
-
-// src/js/modules/core/ui.ts
 var UI = class _UI {
-  constructor(input, options, id2) {
-    this.#searchKeyupTimer = null;
-    this.#inlineDropdownHeight = null;
-    this.#dropdownForContainer = null;
-    this.#selectedItem = null;
-    this.highlightedItem = null;
-    input.dataset.intlTelInputId = id2.toString();
-    this.telInput = input;
-    this.#options = options;
-    this.#id = id2;
-    this.hadInitialPlaceholder = Boolean(input.getAttribute("placeholder"));
-    this.#isRTL = !!this.telInput.closest("[dir=rtl]");
-    if (this.#options.separateDialCode) {
-      this.#originalPaddingLeft = this.telInput.style.paddingLeft;
-    }
-  }
   // private
   #options;
   #id;
   #isRTL;
-  #originalPaddingLeft;
+  #originalPaddingLeft = "";
   #countries;
-  #searchKeyupTimer;
+  #searchKeyupTimer = null;
   #inlineDropdownHeight;
   #selectedDialCode;
   #dropdownArrow;
@@ -2260,7 +2232,30 @@ var UI = class _UI {
   #searchNoResults;
   #searchResultsA11yText;
   #dropdownForContainer;
-  #selectedItem;
+  #selectedItem = null;
+  // public
+  telInput;
+  countryContainer;
+  selectedCountry;
+  selectedCountryInner;
+  searchInput;
+  searchClearButton;
+  countryList;
+  hiddenInputPhone;
+  hiddenInputCountry;
+  highlightedItem = null;
+  hadInitialPlaceholder;
+  constructor(input, options, id2) {
+    input.dataset.intlTelInputId = id2.toString();
+    this.telInput = input;
+    this.#options = options;
+    this.#id = id2;
+    this.hadInitialPlaceholder = Boolean(input.getAttribute("placeholder"));
+    this.#isRTL = !!this.telInput.closest("[dir=rtl]");
+    if (this.#options.separateDialCode) {
+      this.#originalPaddingLeft = this.telInput.style.paddingLeft;
+    }
+  }
   // Validate that the provided element is an HTMLInputElement.
   static validateInput(input) {
     const tagName = input?.tagName;
@@ -2276,6 +2271,9 @@ var UI = class _UI {
   generateMarkup(countries) {
     this.#countries = countries;
     this.telInput.classList.add("iti__tel-input");
+    if (!this.telInput.hasAttribute("type")) {
+      this.telInput.setAttribute("type", "tel");
+    }
     if (!this.telInput.hasAttribute("autocomplete")) {
       this.telInput.setAttribute("autocomplete", "tel");
     }
@@ -2495,7 +2493,7 @@ var UI = class _UI {
       },
       this.#dropdownContent
     );
-    this.#searchNoResults.textContent = i18n.searchEmptyState;
+    this.#searchNoResults.textContent = i18n.searchEmptyState ?? null;
   }
   #maybeUpdateInputPaddingAndReveal() {
     if (this.countryContainer) {
@@ -2513,13 +2511,13 @@ var UI = class _UI {
           `input[name="${names.phone}"]`
         );
         if (existingInput) {
-          this.hiddenInput = existingInput;
+          this.hiddenInputPhone = existingInput;
         } else {
-          this.hiddenInput = createEl("input", {
+          this.hiddenInputPhone = createEl("input", {
             type: "hidden",
             name: names.phone
           });
-          wrapper.appendChild(this.hiddenInput);
+          wrapper.appendChild(this.hiddenInputPhone);
         }
       }
       if (names.country) {
@@ -2764,28 +2762,9 @@ var UI = class _UI {
     const wrapper = this.telInput.parentNode;
     wrapper.before(this.telInput);
     wrapper.remove();
-    this.telInput = null;
-    this.countryContainer = null;
-    this.selectedCountry = null;
-    this.selectedCountryInner = null;
-    this.searchInput = null;
-    this.searchClearButton = null;
-    this.countryList = null;
-    this.hiddenInput = null;
-    this.hiddenInputCountry = null;
-    this.highlightedItem = null;
-    this.#selectedDialCode = null;
-    this.#dropdownArrow = null;
-    this.#dropdownContent = null;
-    this.#searchIcon = null;
-    this.#searchNoResults = null;
-    this.#searchResultsA11yText = null;
-    this.#dropdownForContainer = null;
-    this.#selectedItem = null;
     for (const c of this.#countries) {
       delete c.nodeById[this.#id];
     }
-    this.#countries = null;
   }
   // UI: Open the dropdown (DOM only).
   openDropdown() {
@@ -2809,10 +2788,10 @@ var UI = class _UI {
     this.#dropdownContent.classList.remove(CLASSES.HIDE);
     this.selectedCountry.setAttribute(ARIA.EXPANDED, "true");
     if (countrySearch) {
-      const firstCountryItem = this.countryList.firstElementChild;
-      if (firstCountryItem) {
-        this.highlightListItem(firstCountryItem, false);
-        this.countryList.scrollTop = 0;
+      const itemToHighlight = this.#selectedItem ?? this.countryList.firstElementChild;
+      if (itemToHighlight) {
+        this.highlightListItem(itemToHighlight, false);
+        this.scrollCountryListToItem(itemToHighlight);
       }
       if (!dropdownAlwaysOpen) {
         this.searchInput.focus();
@@ -2827,6 +2806,8 @@ var UI = class _UI {
     this.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
     if (countrySearch) {
       this.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
+      this.searchInput.value = "";
+      this.#doFilter();
       if (this.highlightedItem) {
         this.highlightedItem.classList.remove(CLASSES.HIGHLIGHT);
         this.highlightedItem = null;
@@ -2881,7 +2862,9 @@ var UI = class _UI {
   }
   setCountry(selectedCountryData) {
     const { allowDropdown, showFlags, separateDialCode, i18n } = this.#options;
-    const { name, dialCode, iso2 = "" } = selectedCountryData;
+    const name = selectedCountryData?.name;
+    const dialCode = selectedCountryData?.dialCode;
+    const iso2 = selectedCountryData?.iso2 ?? "";
     if (allowDropdown) {
       this.#updateSelectedItem(iso2);
     }
@@ -2909,8 +2892,6 @@ var UI = class _UI {
     }
   }
 };
-
-// src/js/modules/data/country-data.ts
 var processAllCountries = (options) => {
   const { onlyCountries, excludeCountries } = options;
   if (onlyCountries?.length) {
@@ -3014,8 +2995,6 @@ var cacheSearchTokens = (countries) => {
     c.dialCodePlus = `+${c.dialCode}`;
   }
 };
-
-// src/js/modules/data/intl-regionless.ts
 var REGIONLESS_DIAL_CODES = /* @__PURE__ */ new Set([
   "800",
   "808",
@@ -3030,8 +3009,6 @@ var hasRegionlessDialCode = (number) => {
   const dialCode = getNumeric(number).slice(0, 3);
   return number.startsWith("+") && REGIONLESS_DIAL_CODES.has(dialCode);
 };
-
-// src/js/modules/format/formatting.ts
 var beforeSetNumber = (fullNumber, hasValidDialCode, separateDialCode, selectedCountryData) => {
   let number = fullNumber;
   if (separateDialCode) {
@@ -3044,16 +3021,14 @@ var beforeSetNumber = (fullNumber, hasValidDialCode, separateDialCode, selectedC
   return number;
 };
 var formatNumberAsYouType = (fullNumber, telInputValue, utils, selectedCountryData, separateDialCode) => {
-  const result = utils ? utils.formatNumberAsYouType(fullNumber, selectedCountryData.iso2) : fullNumber;
-  const { dialCode } = selectedCountryData;
+  const result = utils ? utils.formatNumberAsYouType(fullNumber, selectedCountryData?.iso2) : fullNumber;
+  const dialCode = selectedCountryData?.dialCode;
   if (separateDialCode && telInputValue.charAt(0) !== "+" && result.includes(`+${dialCode}`)) {
     const afterDialCode = result.split(`+${dialCode}`)[1] || "";
     return afterDialCode.trim();
   }
   return result;
 };
-
-// src/js/modules/format/caret.ts
 var translateCursorPosition = (relevantChars, formattedValue, prevCaretPos, isDeleteForwards) => {
   if (prevCaretPos === 0 && !isDeleteForwards) {
     return 0;
@@ -3072,8 +3047,6 @@ var translateCursorPosition = (relevantChars, formattedValue, prevCaretPos, isDe
   }
   return formattedValue.length;
 };
-
-// src/js/modules/data/nanp-regionless.ts
 var regionlessNanpNumbers = /* @__PURE__ */ new Set([
   "800",
   "822",
@@ -3101,8 +3074,6 @@ var isRegionlessNanp = (number) => {
   }
   return false;
 };
-
-// src/js/modules/core/numerals.ts
 var Numerals = class {
   #userNumeralSet;
   constructor(initialValue) {
@@ -3146,10 +3117,27 @@ var Numerals = class {
     return !this.#userNumeralSet || this.#userNumeralSet === "ascii";
   }
 };
-
-// src/js/intl-tel-input.ts
 var id = 0;
+var ensureUtils = (methodName) => {
+  if (!intlTelInput.utils) {
+    throw new Error(`intlTelInput.utils is required for ${methodName}(). See: https://intl-tel-input.com/docs/utils`);
+  }
+};
+var createDeferred = () => {
+  let resolve;
+  let reject;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+};
 var Iti = class _Iti {
+  //* PUBLIC FIELDS - READONLY
+  //* Can't be private as it's called from intlTelInput convenience wrapper.
+  id;
+  // accessed externally via iti.promise.then(...)
+  promise;
   //* PRIVATE FIELDS
   #ui;
   #options;
@@ -3160,16 +3148,15 @@ var Iti = class _Iti {
   #dialCodeToIso2Map;
   #dialCodes;
   #countryByIso2;
-  #selectedCountryData;
-  #maxCoreNumberLength;
+  #selectedCountryData = null;
+  #maxCoreNumberLength = null;
   #defaultCountry;
+  #destroyed = false;
   #abortController;
-  #dropdownAbortController;
+  #dropdownAbortController = null;
   #numerals;
-  #resolveAutoCountryPromise;
-  #rejectAutoCountryPromise;
-  #resolveUtilsScriptPromise;
-  #rejectUtilsScriptPromise;
+  #autoCountryDeferred;
+  #utilsScriptDeferred;
   constructor(input, customOptions = {}) {
     this.id = id++;
     UI.validateInput(input);
@@ -3202,37 +3189,19 @@ var Iti = class _Iti {
     const { initialCountry, geoIpLookup, loadUtils } = options;
     const needsAutoCountryPromise = initialCountry === INITIAL_COUNTRY.AUTO && Boolean(geoIpLookup);
     const needsUtilsScriptPromise = Boolean(loadUtils) && !intlTelInput.utils;
-    let autoCountryPromise;
     if (needsAutoCountryPromise) {
-      autoCountryPromise = new Promise((resolve, reject) => {
-        this.#resolveAutoCountryPromise = resolve;
-        this.#rejectAutoCountryPromise = reject;
-      });
-    } else {
-      autoCountryPromise = Promise.resolve(void 0);
-      this.#resolveAutoCountryPromise = () => {
-      };
-      this.#rejectAutoCountryPromise = () => {
-      };
+      this.#autoCountryDeferred = createDeferred();
     }
-    let utilsScriptPromise;
     if (needsUtilsScriptPromise) {
-      utilsScriptPromise = new Promise((resolve, reject) => {
-        this.#resolveUtilsScriptPromise = resolve;
-        this.#rejectUtilsScriptPromise = reject;
-      });
-    } else {
-      utilsScriptPromise = Promise.resolve(void 0);
-      this.#resolveUtilsScriptPromise = () => {
-      };
-      this.#rejectUtilsScriptPromise = () => {
-      };
+      this.#utilsScriptDeferred = createDeferred();
     }
-    return Promise.all([autoCountryPromise, utilsScriptPromise]).then(() => {
+    return Promise.all([
+      this.#autoCountryDeferred?.promise,
+      this.#utilsScriptDeferred?.promise
+    ]).then(() => {
     });
   }
   #init() {
-    this.#selectedCountryData = null;
     this.#abortController = new AbortController();
     this.#processCountryData();
     this.#ui.generateMarkup(this.#countries);
@@ -3257,7 +3226,7 @@ var Iti = class _Iti {
   //* 2. Using explicit initialCountry
   #setInitialState(overrideAutoCountry = false) {
     const attributeValueRaw = this.#ui.telInput.getAttribute("value");
-    const attributeValue = this.#numerals.normalise(attributeValueRaw);
+    const attributeValue = this.#numerals.normalise(attributeValueRaw ?? "");
     const inputValue = this.#getTelInputValue();
     const useAttribute = attributeValue && attributeValue.startsWith("+") && (!inputValue || !inputValue.startsWith("+"));
     const val = useAttribute ? attributeValue : inputValue;
@@ -3292,15 +3261,15 @@ var Iti = class _Iti {
     if (this.#options.allowDropdown) {
       this.#initDropdownListeners();
     }
-    if ((this.#ui.hiddenInput || this.#ui.hiddenInputCountry) && this.#ui.telInput.form) {
+    if ((this.#ui.hiddenInputPhone || this.#ui.hiddenInputCountry) && this.#ui.telInput.form) {
       this.#initHiddenInputListener();
     }
   }
   //* Update hidden input on form submit.
   #initHiddenInputListener() {
     const handleHiddenInputSubmit = () => {
-      if (this.#ui.hiddenInput) {
-        this.#ui.hiddenInput.value = this.getNumber();
+      if (this.#ui.hiddenInputPhone) {
+        this.#ui.hiddenInputPhone.value = this.getNumber();
       }
       if (this.#ui.hiddenInputCountry) {
         this.#ui.hiddenInputCountry.value = this.#selectedCountryData?.iso2 || "";
@@ -3369,12 +3338,12 @@ var Iti = class _Iti {
         });
       }
     } else {
-      this.#resolveUtilsScriptPromise();
+      this.#utilsScriptDeferred?.resolve();
     }
     const isAutoCountry = initialCountry === INITIAL_COUNTRY.AUTO && geoIpLookup;
     if (isAutoCountry) {
-      if (this.#selectedCountryData?.iso2) {
-        this.#resolveAutoCountryPromise();
+      if (this.#selectedCountryData) {
+        this.#autoCountryDeferred?.resolve();
       } else {
         this.#loadAutoCountry();
       }
@@ -3469,7 +3438,7 @@ var Iti = class _Iti {
           fullNumber,
           inputValue,
           intlTelInput.utils,
-          this.#selectedCountryData ?? {},
+          this.#selectedCountryData,
           separateDialCode
         );
         const newCaretPos = translateCursorPosition(
@@ -3486,7 +3455,7 @@ var Iti = class _Iti {
           inputValue,
           true,
           separateDialCode,
-          this.#selectedCountryData ?? {}
+          this.#selectedCountryData
         );
         this.#setTelInputValue(cleanNumber);
       }
@@ -3519,8 +3488,8 @@ var Iti = class _Iti {
             const input = this.#ui.telInput;
             const selStart = input.selectionStart;
             const selEnd = input.selectionEnd;
-            const before = inputValue.slice(0, selStart);
-            const after = inputValue.slice(selEnd);
+            const before = inputValue.slice(0, selStart ?? void 0);
+            const after = inputValue.slice(selEnd ?? void 0);
             const newValue = before + e.key + after;
             const newFullNumber = this.#getFullNumber(newValue);
             let hasExceededMaxLength = false;
@@ -3552,8 +3521,8 @@ var Iti = class _Iti {
         const selStart = input.selectionStart;
         const selEnd = input.selectionEnd;
         const inputValue = this.#getTelInputValue();
-        const before = inputValue.slice(0, selStart);
-        const after = inputValue.slice(selEnd);
+        const before = inputValue.slice(0, selStart ?? void 0);
+        const after = inputValue.slice(selEnd ?? void 0);
         const iso2 = this.#selectedCountryData?.iso2;
         const pastedRaw = e.clipboardData.getData("text");
         const pasted = this.#numerals.normalise(pastedRaw);
@@ -3564,7 +3533,7 @@ var Iti = class _Iti {
         const numerics = allowedChars.replace(/\+/g, "");
         const sanitised = hasLeadingPlus && allowLeadingPlus ? `+${numerics}` : numerics;
         let newVal = before + sanitised + after;
-        if (newVal.length > 5) {
+        if (newVal.length > 5 && intlTelInput.utils) {
           let coreNumber = intlTelInput.utils.getCoreNumber(newVal, iso2);
           while (coreNumber.length === 0 && newVal.length > 0) {
             newVal = newVal.slice(0, -1);
@@ -3854,10 +3823,10 @@ var Iti = class _Iti {
   #setCountry(iso2) {
     const prevIso2 = this.#selectedCountryData?.iso2 || "";
     this.#selectedCountryData = iso2 ? this.#countryByIso2.get(iso2) : null;
-    if (this.#selectedCountryData?.iso2) {
+    if (this.#selectedCountryData) {
       this.#defaultCountry = this.#selectedCountryData.iso2;
     }
-    this.#ui.setCountry(this.#selectedCountryData ?? {});
+    this.#ui.setCountry(this.#selectedCountryData);
     this.#updatePlaceholder();
     this.#updateMaxLength();
     return prevIso2 !== iso2;
@@ -3905,14 +3874,14 @@ var Iti = class _Iti {
     const shouldSetPlaceholder = autoPlaceholder === PLACEHOLDER_MODES.AGGRESSIVE || !this.#ui.hadInitialPlaceholder && autoPlaceholder === PLACEHOLDER_MODES.POLITE;
     if (intlTelInput.utils && shouldSetPlaceholder) {
       const numberType = intlTelInput.utils.numberType[placeholderNumberType];
-      let placeholder = this.#selectedCountryData?.iso2 ? intlTelInput.utils.getExampleNumber(
+      let placeholder = this.#selectedCountryData ? intlTelInput.utils.getExampleNumber(
         this.#selectedCountryData.iso2,
         nationalMode,
         numberType
       ) : "";
       placeholder = this.#beforeSetNumber(placeholder);
       if (typeof customPlaceholder === "function") {
-        placeholder = customPlaceholder(placeholder, this.#selectedCountryData ?? {});
+        placeholder = customPlaceholder(placeholder, this.#selectedCountryData);
       }
       this.#ui.telInput.setAttribute("placeholder", placeholder);
     }
@@ -4011,14 +3980,16 @@ var Iti = class _Iti {
       fullNumber,
       hasValidDialCode,
       this.#options.separateDialCode,
-      this.#selectedCountryData ?? {}
+      this.#selectedCountryData
     );
     return this.#cap(number);
   }
   //* Return only the public-facing subset of the selected country data.
   #getPublicCountryData() {
     const d = this.#selectedCountryData;
-    if (!d) return {};
+    if (!d) {
+      return null;
+    }
     const { iso2, dialCode, name } = d;
     return { iso2, dialCode, name };
   }
@@ -4032,32 +4003,32 @@ var Iti = class _Iti {
   //**************************
   //* Called when the geoip call returns.
   #handleAutoCountry() {
-    if (!this.#ui.telInput) {
-      this.#resolveAutoCountryPromise?.();
+    if (this.#destroyed) {
+      this.#autoCountryDeferred?.resolve();
       return;
     }
     if (this.#options.initialCountry === INITIAL_COUNTRY.AUTO && intlTelInput.autoCountry) {
       this.#defaultCountry = intlTelInput.autoCountry;
-      const hasSelectedCountryOrGlobe = this.#selectedCountryData?.iso2 || this.#ui.selectedCountryInner.classList.contains(CLASSES.GLOBE);
+      const hasSelectedCountryOrGlobe = this.#selectedCountryData || this.#ui.selectedCountryInner.classList.contains(CLASSES.GLOBE);
       if (!hasSelectedCountryOrGlobe) {
         this.setCountry(this.#defaultCountry);
       }
-      this.#resolveAutoCountryPromise();
+      this.#autoCountryDeferred?.resolve();
     }
   }
   //* Called when the geoip call fails or times out.
   #handleAutoCountryFailure() {
-    if (!this.#ui.telInput) {
-      this.#rejectAutoCountryPromise?.();
+    if (this.#destroyed) {
+      this.#autoCountryDeferred?.reject();
       return;
     }
     this.#setInitialState(true);
-    this.#rejectAutoCountryPromise();
+    this.#autoCountryDeferred?.reject();
   }
   //* Called when the utils request completes.
   #handleUtils() {
-    if (!this.#ui.telInput) {
-      this.#resolveUtilsScriptPromise?.();
+    if (this.#destroyed) {
+      this.#utilsScriptDeferred?.resolve();
       return;
     }
     if (intlTelInput.utils) {
@@ -4065,74 +4036,77 @@ var Iti = class _Iti {
       if (inputValue) {
         this.#updateValFromNumber(inputValue);
       }
-      if (this.#selectedCountryData?.iso2) {
+      if (this.#selectedCountryData) {
         this.#updatePlaceholder();
         this.#updateMaxLength();
       }
     }
-    this.#resolveUtilsScriptPromise();
+    this.#utilsScriptDeferred?.resolve();
   }
   //* Called when the utils request fails or times out.
   #handleUtilsFailure(error) {
-    if (!this.#ui.telInput) {
-      this.#rejectUtilsScriptPromise?.(error);
+    if (this.#destroyed) {
+      this.#utilsScriptDeferred?.reject(error);
       return;
     }
-    this.#rejectUtilsScriptPromise(error);
+    this.#utilsScriptDeferred?.reject(error);
   }
   //********************
   //*  PUBLIC METHODS
   //********************
   //* Remove plugin.
   destroy() {
-    if (!this.#ui.telInput) {
+    if (this.#destroyed) {
       return;
     }
+    this.#destroyed = true;
     if (this.#options.allowDropdown) {
       this.#closeDropdown(true);
     }
     this.#abortController.abort();
-    this.#abortController = null;
     this.#ui.destroy();
-    delete intlTelInput.instances[this.id];
+    intlTelInput.instances.delete(String(this.id));
   }
-  // check if the instance is still valid (not destroyed/unmounted)
+  // check if the instance is still valid (not destroyed)
   isActive() {
-    return !!this.#ui?.telInput;
+    return !this.#destroyed;
   }
   //* Get the extension from the current number.
   getExtension() {
-    if (intlTelInput.utils && this.#ui.telInput) {
-      return intlTelInput.utils.getExtension(
-        this.#getFullNumber(),
-        this.#selectedCountryData?.iso2
-      );
+    if (this.#destroyed) {
+      return "";
     }
-    return "";
+    ensureUtils("getExtension");
+    return intlTelInput.utils.getExtension(
+      this.#getFullNumber(),
+      this.#selectedCountryData?.iso2
+    );
   }
   //* Format the number to the given format.
   getNumber(format) {
-    if (intlTelInput.utils && this.#ui.telInput) {
-      const iso2 = this.#selectedCountryData?.iso2;
-      const fullNumber = this.#getFullNumber();
-      const formattedNumber = intlTelInput.utils.formatNumber(
-        fullNumber,
-        iso2,
-        format
-      );
-      return this.#numerals.denormalise(formattedNumber);
+    if (this.#destroyed) {
+      return "";
     }
-    return "";
+    ensureUtils("getNumber");
+    const iso2 = this.#selectedCountryData?.iso2;
+    const fullNumber = this.#getFullNumber();
+    const formattedNumber = intlTelInput.utils.formatNumber(
+      fullNumber,
+      iso2,
+      format
+    );
+    return this.#numerals.denormalise(formattedNumber);
   }
   //* Get the type of the entered number e.g. landline/mobile.
   getNumberType() {
-    if (intlTelInput.utils && this.#ui.telInput) {
-      return intlTelInput.utils.getNumberType(
-        this.#getFullNumber(),
-        this.#selectedCountryData?.iso2
-      );
+    if (this.#destroyed) {
+      return SENTINELS.UNKNOWN_NUMBER_TYPE;
     }
-    return SENTINELS.UNKNOWN_NUMBER_TYPE;
+    ensureUtils("getNumberType");
+    return intlTelInput.utils.getNumberType(
+      this.#getFullNumber(),
+      this.#selectedCountryData?.iso2
+    );
   }
   //* Get the country data for the currently selected country.
   getSelectedCountryData() {
@@ -4140,32 +4114,35 @@ var Iti = class _Iti {
   }
   //* Get the validation error.
   getValidationError() {
-    if (intlTelInput.utils && this.#ui.telInput) {
-      const iso2 = this.#selectedCountryData?.iso2;
-      return intlTelInput.utils.getValidationError(this.#getFullNumber(), iso2);
+    if (this.#destroyed) {
+      return SENTINELS.UNKNOWN_VALIDATION_ERROR;
     }
-    return SENTINELS.UNKNOWN_VALIDATION_ERROR;
+    ensureUtils("getValidationError");
+    const iso2 = this.#selectedCountryData?.iso2;
+    return intlTelInput.utils.getValidationError(this.#getFullNumber(), iso2);
   }
   //* Validate the input val using number length only
   isValidNumber() {
+    if (this.#destroyed) {
+      return null;
+    }
+    ensureUtils("isValidNumber");
     const dialCode = this.#selectedCountryData?.dialCode;
     const iso2 = this.#selectedCountryData?.iso2;
-    if (intlTelInput.utils && this.#ui.telInput) {
-      const number = this.#getFullNumber();
-      const coreNumber = intlTelInput.utils.getCoreNumber(number, iso2);
-      if (coreNumber) {
-        if (dialCode === UK.DIAL_CODE) {
-          if (coreNumber[0] === UK.MOBILE_PREFIX && coreNumber.length !== UK.MOBILE_CORE_LENGTH) {
-            return false;
-          }
+    const number = this.#getFullNumber();
+    const coreNumber = intlTelInput.utils.getCoreNumber(number, iso2);
+    if (coreNumber) {
+      if (dialCode === UK.DIAL_CODE) {
+        if (coreNumber[0] === UK.MOBILE_PREFIX && coreNumber.length !== UK.MOBILE_CORE_LENGTH) {
+          return false;
         }
-        const hasAlphaChar = REGEX.ALPHA_UNICODE.test(number);
-        if (!hasAlphaChar && dialCode) {
-          const nationalPortion = number.startsWith("+") ? number.slice(1 + dialCode.length) : number;
-          const nationalDigitCount = getNumeric(nationalPortion).length;
-          if (coreNumber.length > nationalDigitCount) {
-            return false;
-          }
+      }
+      const hasAlphaChar = REGEX.ALPHA_UNICODE.test(number);
+      if (!hasAlphaChar && dialCode) {
+        const nationalPortion = number.startsWith("+") ? number.slice(1 + dialCode.length) : number;
+        const nationalDigitCount = getNumeric(nationalPortion).length;
+        if (coreNumber.length > nationalDigitCount) {
+          return false;
         }
       }
     }
@@ -4173,6 +4150,10 @@ var Iti = class _Iti {
   }
   //* Validate the input val with precise validation
   isValidNumberPrecise() {
+    if (this.#destroyed) {
+      return null;
+    }
+    ensureUtils("isValidNumberPrecise");
     return this.#validateNumber(true);
   }
   #utilsIsPossibleNumber(val) {
@@ -4184,13 +4165,10 @@ var Iti = class _Iti {
   }
   //* Shared internal validation logic to handle alpha character extension rules.
   #validateNumber(precise) {
-    if (!intlTelInput.utils || !this.#ui.telInput) {
-      return null;
-    }
     const { allowNumberExtensions, allowPhonewords } = this.#options;
     const testValidity = (s) => precise ? this.#utilsIsValidNumber(s) : this.#utilsIsPossibleNumber(s);
     const val = this.#getFullNumber();
-    if (!this.#selectedCountryData?.iso2) {
+    if (!this.#selectedCountryData) {
       const isRegionlessDialCode = hasRegionlessDialCode(val);
       if (!isRegionlessDialCode) {
         return false;
@@ -4220,7 +4198,7 @@ var Iti = class _Iti {
   }
   //* Update the selected country, and update the input val accordingly.
   setCountry(iso2) {
-    if (!this.#ui.telInput) {
+    if (this.#destroyed) {
       return;
     }
     const iso2Lower = iso2?.toLowerCase();
@@ -4241,7 +4219,7 @@ var Iti = class _Iti {
   }
   //* Set the input value and update the country.
   setNumber(number) {
-    if (!this.#ui.telInput) {
+    if (this.#destroyed) {
       return;
     }
     const normalisedNumber = this.#numerals.normalise(number);
@@ -4252,16 +4230,17 @@ var Iti = class _Iti {
     }
     this.#trigger(EVENTS.INPUT, { isSetNumber: true });
   }
-  //* Set the placeholder number typ
+  //* Set the placeholder number type
   setPlaceholderNumberType(type) {
-    if (!this.#ui.telInput) {
+    if (this.#destroyed) {
       return;
     }
     this.#options.placeholderNumberType = type;
     this.#updatePlaceholder();
   }
+  // Set the disabled state of the input and dropdown.
   setDisabled(disabled) {
-    if (!this.#ui.telInput) {
+    if (this.#destroyed) {
       return;
     }
     this.#ui.telInput.disabled = disabled;
@@ -4273,6 +4252,20 @@ var Iti = class _Iti {
       }
     }
   }
+  // Set the readonly state of the input and dropdown.
+  setReadonly(readonly) {
+    if (!this.#ui.telInput) {
+      return;
+    }
+    this.#ui.telInput.readOnly = readonly;
+    if (this.#ui.selectedCountry) {
+      if (readonly) {
+        this.#ui.selectedCountry.setAttribute("disabled", "true");
+      } else {
+        this.#ui.selectedCountry.removeAttribute("disabled");
+      }
+    }
+  }
   //********************
   //*  STATIC METHODS
   //********************
@@ -4280,7 +4273,7 @@ var Iti = class _Iti {
   // Kept public so module-level helpers (e.g. attachUtils) can call it, while still allowing
   // access to private instance methods.
   static forEachInstance(method, ...args) {
-    const values = Object.values(intlTelInput.instances);
+    const values = [...intlTelInput.instances.values()];
     const arg = args[0];
     values.forEach((instance) => {
       if (!(instance instanceof _Iti)) {
@@ -4340,7 +4333,7 @@ var attachUtils = (source) => {
 var intlTelInput = Object.assign(
   (input, options) => {
     const iti = new Iti(input, options);
-    intlTelInput.instances[iti.id] = iti;
+    intlTelInput.instances.set(String(iti.id), iti);
     input.iti = iti;
     return iti;
   },
@@ -4353,19 +4346,19 @@ var intlTelInput = Object.assign(
     //* A getter for the plugin instance.
     getInstance: (input) => {
       const id2 = input.dataset.intlTelInputId;
-      return id2 ? intlTelInput.instances[id2] : null;
+      return id2 ? intlTelInput.instances.get(id2) ?? null : null;
     },
     //* A map from instance ID to instance object.
-    instances: {},
+    instances: /* @__PURE__ */ new Map(),
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "26.9.2"
+    version: "27.0.0"
   }
 );
 var intl_tel_input_default = intlTelInput;
 
-// react/src/intl-tel-input/react.tsx
+// react/src/IntlTelInput.tsx
 import React, {
   useRef,
   useEffect,
@@ -4373,27 +4366,29 @@ import React, {
   useImperativeHandle,
   useCallback
 } from "react";
+var warnInputProp = (prop) => {
+  console.warn(`intl-tel-input: ignoring inputProps.${prop} - see docs for more info.`);
+};
+var noop = () => {
+};
 var IntlTelInput = forwardRef(function IntlTelInput2({
-  initialValue = "",
-  onChangeNumber = () => {
-  },
-  onChangeCountry = () => {
-  },
-  onChangeValidity = () => {
-  },
-  onChangeErrorCode = () => {
-  },
+  onChangeNumber = noop,
+  onChangeCountry = noop,
+  onChangeValidity = noop,
+  onChangeErrorCode = noop,
   usePreciseValidation = false,
-  initOptions = {},
   inputProps = {},
-  disabled = void 0
+  disabled = void 0,
+  readOnly = void 0,
+  value = void 0,
+  ...initOptions
 }, ref) {
   const inputRef = useRef(null);
   const itiRef = useRef(null);
-  const lastEmittedNumberRef = useRef();
-  const lastEmittedCountryRef = useRef();
-  const lastEmittedValidityRef = useRef();
-  const lastEmittedErrorCodeRef = useRef();
+  const lastEmittedNumberRef = useRef(void 0);
+  const lastEmittedCountryRef = useRef(void 0);
+  const lastEmittedValidityRef = useRef(void 0);
+  const lastEmittedErrorCodeRef = useRef(void 0);
   useImperativeHandle(ref, () => ({
     getInstance: () => itiRef.current,
     getInput: () => inputRef.current
@@ -4402,8 +4397,8 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
     if (!itiRef.current?.isActive()) {
       return;
     }
-    const num = itiRef.current?.getNumber() || "";
-    const countryIso = itiRef.current?.getSelectedCountryData().iso2 || "";
+    const num = itiRef.current.getNumber() ?? "";
+    const countryIso = itiRef.current.getSelectedCountryData()?.iso2 ?? "";
     if (num !== lastEmittedNumberRef.current) {
       lastEmittedNumberRef.current = num;
       onChangeNumber(num);
@@ -4412,17 +4407,15 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
       lastEmittedCountryRef.current = countryIso;
       onChangeCountry(countryIso);
     }
-    if (itiRef.current) {
-      const isValid = usePreciseValidation ? itiRef.current.isValidNumberPrecise() : itiRef.current.isValidNumber();
-      const errorCode = isValid ? null : itiRef.current.getValidationError();
-      if (isValid !== lastEmittedValidityRef.current) {
-        lastEmittedValidityRef.current = isValid;
-        onChangeValidity(isValid);
-      }
-      if (errorCode !== lastEmittedErrorCodeRef.current) {
-        lastEmittedErrorCodeRef.current = errorCode;
-        onChangeErrorCode(errorCode);
-      }
+    const isValid = (usePreciseValidation ? itiRef.current.isValidNumberPrecise() : itiRef.current.isValidNumber()) ?? false;
+    const errorCode = isValid ? null : itiRef.current.getValidationError();
+    if (isValid !== lastEmittedValidityRef.current) {
+      lastEmittedValidityRef.current = isValid;
+      onChangeValidity(isValid);
+    }
+    if (errorCode !== lastEmittedErrorCodeRef.current) {
+      lastEmittedErrorCodeRef.current = errorCode;
+      onChangeErrorCode(errorCode);
     }
   }, [
     onChangeCountry,
@@ -4443,7 +4436,7 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
     const inputRefCurrent = inputRef.current;
     if (inputRefCurrent) {
       inputRefCurrent.addEventListener("countrychange", update);
-      itiRef.current.promise.then(update);
+      itiRef.current?.promise.then(update);
     }
     return () => {
       if (inputRefCurrent) {
@@ -4456,24 +4449,50 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
       itiRef.current.setDisabled(disabled);
     }
   }, [disabled]);
-  const {
-    value: _value,
-    // disabled: _disabled,
-    ...sanitizedInputProps
-  } = inputProps;
+  useEffect(() => {
+    if (itiRef.current && readOnly !== void 0) {
+      itiRef.current.setReadonly(readOnly);
+    }
+  }, [readOnly]);
+  useEffect(() => {
+    if (!itiRef.current || value === void 0) {
+      return;
+    }
+    itiRef.current.promise.then(() => {
+      if (!itiRef.current?.isActive()) {
+        return;
+      }
+      const next = value ?? "";
+      const currentCanonical = itiRef.current.getNumber() ?? "";
+      const isFocused = document.activeElement === inputRef.current;
+      if (isFocused || currentCanonical === next) {
+        return;
+      }
+      itiRef.current.setNumber(next);
+      update();
+    });
+  }, [value, update]);
+  const ignoredInputProps = /* @__PURE__ */ new Set(["type", "ref", "value", "disabled", "readOnly", "onInput"]);
+  const sanitizedInputProps = {};
+  for (const [key, val] of Object.entries(inputProps)) {
+    if (ignoredInputProps.has(key)) {
+      warnInputProp(key);
+    } else {
+      sanitizedInputProps[key] = val;
+    }
+  }
   return /* @__PURE__ */ React.createElement(
     "input",
     {
       ...sanitizedInputProps,
       type: "tel",
       ref: inputRef,
-      onInput: update,
-      defaultValue: initialValue
+      onInput: update
     }
   );
 });
-var react_default = IntlTelInput;
+var IntlTelInput_default = IntlTelInput;
 export {
-  react_default as default,
+  IntlTelInput_default as default,
   intl_tel_input_default as intlTelInput
 };