intl-tel-input 25.5.2 → 25.8.0

package/react/build/IntlTelInput.js

@@ -1324,18 +1324,18 @@ var rawCountryData = [
   ]
 ];
 var allCountries = [];
-for (let i = 0; i < rawCountryData.length; i++) {
-  const c = rawCountryData[i];
-  allCountries[i] = {
+for (const c of rawCountryData) {
+  allCountries.push({
     name: "",
-    // this is now populated in the plugin
+    // populated in the plugin
     iso2: c[0],
     dialCode: c[1],
     priority: c[2] || 0,
     areaCodes: c[3] || null,
     nodeById: {},
+    // populated by the plugin
     nationalPrefix: c[4] || null
-  };
+  });
 }
 var data_default = allCountries;
 
@@ -1592,6 +1592,7 @@ var interfaceTranslations = {
   noCountrySelected: "No country selected",
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
+  clearSearchAriaLabel: "Clear search",
   zeroSearchResults: "No results found",
   oneSearchResult: "1 result found",
   multipleSearchResults: "${count} results found",
@@ -1606,10 +1607,23 @@ var allTranslations = { ...countries_default, ...interface_default };
 var en_default = allTranslations;
 
 // src/js/intl-tel-input.ts
-for (let i = 0; i < data_default.length; i++) {
-  data_default[i].name = en_default[data_default[i].iso2];
+for (const c of data_default) {
+  c.name = en_default[c.iso2];
 }
 var id = 0;
+var mq = (q) => {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(q).matches;
+};
+var computeDefaultUseFullscreenPopup = () => {
+  if (typeof navigator !== "undefined" && typeof window !== "undefined") {
+    const isMobileUserAgent = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    const isNarrowViewport = mq("(max-width: 500px)");
+    const isShortViewport = mq("(max-height: 600px)");
+    const isCoarsePointer = mq("(pointer: coarse)");
+    return isMobileUserAgent || isNarrowViewport || isCoarsePointer && isShortViewport;
+  }
+  return false;
+};
 var defaults = {
   //* Whether or not to allow the dropdown.
   allowDropdown: true,
@@ -1656,13 +1670,7 @@ var defaults = {
   //* Only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length.
   strictMode: false,
   //* Use full screen popup instead of dropdown for country list.
-  useFullscreenPopup: typeof navigator !== "undefined" && typeof window !== "undefined" ? (
-    //* We cannot just test screen size as some smartphones/website meta tags will report desktop resolutions.
-    //* Note: to target Android Mobiles (and not Tablets), we must find 'Android' and 'Mobile'
-    /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-      navigator.userAgent
-    ) || window.innerWidth <= 500
-  ) : false,
+  useFullscreenPopup: computeDefaultUseFullscreenPopup(),
   //* The number type to enforce during validation.
   validationNumberTypes: ["MOBILE"]
 };
@@ -1690,7 +1698,7 @@ var normaliseString = (s = "") => s.normalize("NFD").replace(/[\u0300-\u036f]/g,
 var isRegionlessNanp = (number) => {
   const numeric = getNumeric(number);
   if (numeric.charAt(0) === "1") {
-    const areaCode = numeric.substr(1, 3);
+    const areaCode = numeric.substring(1, 4);
     return regionlessNanpNumbers.includes(areaCode);
   }
   return false;
@@ -1713,8 +1721,8 @@ var translateCursorPosition = (relevantChars, formattedValue, prevCaretPos, isDe
   }
   return formattedValue.length;
 };
-var createEl = (name, attrs, container) => {
-  const el = document.createElement(name);
+var createEl = (tagName, attrs, container) => {
+  const el = document.createElement(tagName);
   if (attrs) {
     Object.entries(attrs).forEach(([key, value]) => el.setAttribute(key, value));
   }
@@ -1727,7 +1735,14 @@ var forEachInstance = (method, ...args) => {
   const { instances } = intlTelInput;
   Object.values(instances).forEach((instance) => instance[method](...args));
 };
-var Iti = class {
+var Iti = class _Iti {
+  /**
+   * Build a space-delimited class string from an object map of className -> truthy/falsey.
+   * Only keys with truthy values are included.
+   */
+  static _buildClassNames(flags) {
+    return Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
+  }
   constructor(input, customOptions = {}) {
     this.id = id++;
     this.telInput = input;
@@ -1790,6 +1805,16 @@ var Iti = class {
     this._processDialCodes();
     this._translateCountryNames();
     this._sortCountries();
+    this.countryByIso2 = new Map(this.countries.map((c) => [c.iso2, c]));
+    this._cacheSearchTokens();
+  }
+  //* Precompute and cache country search tokens to speed up filtering
+  _cacheSearchTokens() {
+    for (const c of this.countries) {
+      c.normalisedName = normaliseString(c.name);
+      c.initials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
+      c.dialCodePlus = `+${c.dialCode}`;
+    }
   }
   //* Sort countries by countryOrder option (if present), then name.
   _sortCountries() {
@@ -1821,13 +1846,12 @@ var Iti = class {
     if (!this.dialCodeToIso2Map.hasOwnProperty(dialCode)) {
       this.dialCodeToIso2Map[dialCode] = [];
     }
-    for (let i = 0; i < this.dialCodeToIso2Map[dialCode].length; i++) {
-      if (this.dialCodeToIso2Map[dialCode][i] === iso2) {
-        return;
-      }
+    const iso2List = this.dialCodeToIso2Map[dialCode];
+    if (iso2List.includes(iso2)) {
+      return;
     }
-    const index = priority !== void 0 ? priority : this.dialCodeToIso2Map[dialCode].length;
-    this.dialCodeToIso2Map[dialCode][index] = iso2;
+    const index = priority !== void 0 ? priority : iso2List.length;
+    iso2List[index] = iso2;
   }
   //* Process onlyCountries or excludeCountries array if present.
   _processAllCountries() {
@@ -1852,33 +1876,30 @@ var Iti = class {
   }
   //* Translate Countries by object literal provided on config.
   _translateCountryNames() {
-    for (let i = 0; i < this.countries.length; i++) {
-      const iso2 = this.countries[i].iso2.toLowerCase();
+    for (const c of this.countries) {
+      const iso2 = c.iso2.toLowerCase();
       if (this.options.i18n.hasOwnProperty(iso2)) {
-        this.countries[i].name = this.options.i18n[iso2];
+        c.name = this.options.i18n[iso2];
       }
     }
   }
   //* Generate this.dialCodes and this.dialCodeToIso2Map.
   _processDialCodes() {
-    this.dialCodes = {};
+    this.dialCodes = /* @__PURE__ */ new Set();
     this.dialCodeMaxLen = 0;
     this.dialCodeToIso2Map = {};
-    for (let i = 0; i < this.countries.length; i++) {
-      const c = this.countries[i];
-      if (!this.dialCodes[c.dialCode]) {
-        this.dialCodes[c.dialCode] = true;
+    for (const c of this.countries) {
+      if (!this.dialCodes.has(c.dialCode)) {
+        this.dialCodes.add(c.dialCode);
       }
       this._addToDialCodeMap(c.iso2, c.dialCode, c.priority);
     }
-    for (let i = 0; i < this.countries.length; i++) {
-      const c = this.countries[i];
+    for (const c of this.countries) {
       if (c.areaCodes) {
         const rootIso2Code = this.dialCodeToIso2Map[c.dialCode][0];
-        for (let j = 0; j < c.areaCodes.length; j++) {
-          const areaCode = c.areaCodes[j];
+        for (const areaCode of c.areaCodes) {
           for (let k = 1; k < areaCode.length; k++) {
-            const partialAreaCode = areaCode.substr(0, k);
+            const partialAreaCode = areaCode.substring(0, k);
             const partialDialCode = c.dialCode + partialAreaCode;
             this._addToDialCodeMap(rootIso2Code, partialDialCode);
             this._addToDialCodeMap(c.iso2, partialDialCode);
@@ -1906,20 +1927,14 @@ var Iti = class {
       countrySearch,
       i18n
     } = this.options;
-    let parentClass = "iti";
-    if (allowDropdown) {
-      parentClass += " iti--allow-dropdown";
-    }
-    if (showFlags) {
-      parentClass += " iti--show-flags";
-    }
-    if (containerClass) {
-      parentClass += ` ${containerClass}`;
-    }
-    if (!useFullscreenPopup) {
-      parentClass += " iti--inline-dropdown";
-    }
-    const wrapper = createEl("div", { class: parentClass });
+    const parentClasses = _Iti._buildClassNames({
+      "iti": true,
+      "iti--allow-dropdown": allowDropdown,
+      "iti--show-flags": showFlags,
+      "iti--inline-dropdown": !useFullscreenPopup,
+      [containerClass]: Boolean(containerClass)
+    });
+    const wrapper = createEl("div", { class: parentClasses });
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
     if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
@@ -1940,9 +1955,8 @@ var Iti = class {
             class: "iti__selected-country",
             "aria-expanded": "false",
             "aria-label": this.options.i18n.selectedCountryAriaLabel,
-            "aria-haspopup": "true",
-            "aria-controls": `iti-${this.id}__dropdown-content`,
-            "role": "combobox"
+            "aria-haspopup": "dialog",
+            "aria-controls": `iti-${this.id}__dropdown-content`
           },
           this.countryContainer
         );
@@ -1981,15 +1995,38 @@ var Iti = class {
         const extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
         this.dropdownContent = createEl("div", {
           id: `iti-${this.id}__dropdown-content`,
-          class: `iti__dropdown-content iti__hide ${extraClasses}`
+          class: `iti__dropdown-content iti__hide ${extraClasses}`,
+          role: "dialog",
+          "aria-modal": "true"
         });
         if (countrySearch) {
+          const searchWrapper = createEl(
+            "div",
+            { class: "iti__search-input-wrapper" },
+            this.dropdownContent
+          );
+          this.searchIcon = createEl(
+            "span",
+            {
+              class: "iti__search-icon",
+              "aria-hidden": "true"
+            },
+            searchWrapper
+          );
+          this.searchIcon.innerHTML = `
+            <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" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>`;
           this.searchInput = createEl(
             "input",
             {
-              type: "text",
+              id: `iti-${this.id}__search-input`,
+              // Chrome says inputs need either a name or an id
+              type: "search",
               class: "iti__search-input",
               placeholder: i18n.searchPlaceholder,
+              // role=combobox + aria-autocomplete=list + aria-activedescendant allows maintaining focus on the search input while allowing users to navigate search results with up/down keyboard keys
               role: "combobox",
               "aria-expanded": "true",
               "aria-label": i18n.searchPlaceholder,
@@ -1997,13 +2034,42 @@ var Iti = class {
               "aria-autocomplete": "list",
               "autocomplete": "off"
             },
-            this.dropdownContent
+            searchWrapper
+          );
+          this.searchClearButton = createEl(
+            "button",
+            {
+              type: "button",
+              class: "iti__search-clear iti__hide",
+              "aria-label": i18n.clearSearchAriaLabel,
+              tabindex: "-1"
+            },
+            searchWrapper
           );
+          const maskId = `iti-${this.id}-clear-mask`;
+          this.searchClearButton.innerHTML = `
+            <svg class="iti__search-clear-svg" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+              <mask id="${maskId}" maskUnits="userSpaceOnUse">
+                <rect width="16" height="16" fill="white" />
+                <path d="M5.2 5.2 L10.8 10.8 M10.8 5.2 L5.2 10.8" stroke="black" stroke-linecap="round" class="iti__search-clear-x" />
+              </mask>
+              <circle cx="8" cy="8" r="8" class="iti__search-clear-bg" mask="url(#${maskId})" />
+            </svg>`;
           this.searchResultsA11yText = createEl(
             "span",
             { class: "iti__a11y-text" },
             this.dropdownContent
           );
+          this.searchNoResults = createEl(
+            "div",
+            {
+              class: "iti__no-results iti__hide",
+              "aria-hidden": "true"
+              // all a11y messaging happens in this.searchResultsA11yText
+            },
+            this.dropdownContent
+          );
+          this.searchNoResults.textContent = i18n.zeroSearchResults;
         }
         this.countryList = createEl(
           "ul",
@@ -2017,18 +2083,16 @@ var Iti = class {
         );
         this._appendListItems();
         if (countrySearch) {
-          this._updateSearchResultsText();
+          this._updateSearchResultsA11yText();
         }
         if (dropdownContainer) {
-          let dropdownClasses = "iti iti--container";
-          if (containerClass) {
-            dropdownClasses += ` ${containerClass}`;
-          }
-          if (useFullscreenPopup) {
-            dropdownClasses += " iti--fullscreen-popup";
-          } else {
-            dropdownClasses += " iti--inline-dropdown";
-          }
+          const dropdownClasses = _Iti._buildClassNames({
+            "iti": true,
+            "iti--container": true,
+            "iti--fullscreen-popup": useFullscreenPopup,
+            "iti--inline-dropdown": !useFullscreenPopup,
+            [containerClass]: Boolean(containerClass)
+          });
           this.dropdown = createEl("div", { class: dropdownClasses });
           this.dropdown.appendChild(this.dropdownContent);
         } else {
@@ -2313,7 +2377,7 @@ var Iti = class {
   //* Adhere to the input's maxlength attr.
   _cap(number) {
     const max = parseInt(this.telInput.getAttribute("maxlength") || "", 10);
-    return max && number.length > max ? number.substr(0, max) : number;
+    return max && number.length > max ? number.substring(0, max) : number;
   }
   //* Trigger a custom event on the input.
   _trigger(name, detailProps = {}) {
@@ -2426,6 +2490,11 @@ var Iti = class {
         } else {
           this._filterCountries("", true);
         }
+        if (this.searchInput.value) {
+          this.searchClearButton.classList.remove("iti__hide");
+        } else {
+          this.searchClearButton.classList.add("iti__hide");
+        }
       };
       let keyupTimer = null;
       this._handleSearchChange = () => {
@@ -2438,14 +2507,20 @@ var Iti = class {
         }, 100);
       };
       this.searchInput.addEventListener("input", this._handleSearchChange);
+      this._handleSearchClear = (e) => {
+        e.stopPropagation();
+        this.searchInput.value = "";
+        this.searchInput.focus();
+        doFilter();
+      };
+      this.searchClearButton.addEventListener("click", this._handleSearchClear);
       this.searchInput.addEventListener("click", (e) => e.stopPropagation());
     }
   }
   //* Hidden search (countrySearch disabled): Find the first list item whose name starts with the query string.
   _searchForCountry(query) {
-    for (let i = 0; i < this.countries.length; i++) {
-      const c = this.countries[i];
-      const startsWith = c.name.substr(0, query.length).toLowerCase() === query;
+    for (const c of this.countries) {
+      const startsWith = c.name.substring(0, query.length).toLowerCase() === query;
       if (startsWith) {
         const listItem = c.nodeById[this.id];
         this._highlightListItem(listItem, false);
@@ -2466,23 +2541,20 @@ var Iti = class {
     const dialCodeMatches = [];
     const dialCodeContains = [];
     const initialsMatches = [];
-    for (let i = 0; i < this.countries.length; i++) {
-      const c = this.countries[i];
-      const normalisedCountryName = normaliseString(c.name);
-      const countryInitials = c.name.split(/[^a-zA-ZÀ-ÿа-яА-Я]/).map((word) => word[0]).join("").toLowerCase();
+    for (const c of this.countries) {
       if (isReset || queryLength === 0) {
         nameContains.push(c);
-      } else if (c.iso2.toLowerCase() === normalisedQuery) {
+      } else if (c.iso2 === normalisedQuery) {
         iso2Matches.push(c);
-      } else if (normalisedCountryName.startsWith(normalisedQuery)) {
+      } else if (c.normalisedName.startsWith(normalisedQuery)) {
         nameStartWith.push(c);
-      } else if (normalisedCountryName.includes(normalisedQuery)) {
+      } else if (c.normalisedName.includes(normalisedQuery)) {
         nameContains.push(c);
-      } else if (normalisedQuery === c.dialCode || normalisedQuery === `+${c.dialCode}`) {
+      } else if (normalisedQuery === c.dialCode || normalisedQuery === c.dialCodePlus) {
         dialCodeMatches.push(c);
-      } else if (`+${c.dialCode}`.includes(normalisedQuery)) {
+      } else if (c.dialCodePlus.includes(normalisedQuery)) {
         dialCodeContains.push(c);
-      } else if (countryInitials.includes(normalisedQuery)) {
+      } else if (c.initials.includes(normalisedQuery)) {
         initialsMatches.push(c);
       }
     }
@@ -2506,12 +2578,17 @@ var Iti = class {
     }
     if (noCountriesAddedYet) {
       this._highlightListItem(null, false);
+      if (this.searchNoResults) {
+        this.searchNoResults.classList.remove("iti__hide");
+      }
+    } else if (this.searchNoResults) {
+      this.searchNoResults.classList.add("iti__hide");
     }
     this.countryList.scrollTop = 0;
-    this._updateSearchResultsText();
+    this._updateSearchResultsA11yText();
   }
   //* Update search results text (for a11y).
-  _updateSearchResultsText() {
+  _updateSearchResultsA11yText() {
     const { i18n } = this.options;
     const count = this.countryList.childElementCount;
     let searchText;
@@ -2602,9 +2679,9 @@ var Iti = class {
       const alreadySelected = selectedIso2 && iso2Codes.includes(selectedIso2) && !hasAreaCodesButNoneMatched;
       const isRegionlessNanpNumber = selectedDialCode === "1" && isRegionlessNanp(numeric);
       if (!isRegionlessNanpNumber && !alreadySelected) {
-        for (let j = 0; j < iso2Codes.length; j++) {
-          if (iso2Codes[j]) {
-            return iso2Codes[j];
+        for (const iso2 of iso2Codes) {
+          if (iso2) {
+            return iso2;
           }
         }
       }
@@ -2626,9 +2703,8 @@ var Iti = class {
     if (this.highlightedItem) {
       this.highlightedItem.classList.add("iti__highlight");
       this.highlightedItem.setAttribute("aria-selected", "true");
-      const activeDescendant = this.highlightedItem.getAttribute("id") || "";
-      this.selectedCountry.setAttribute("aria-activedescendant", activeDescendant);
       if (this.options.countrySearch) {
+        const activeDescendant = this.highlightedItem.getAttribute("id") || "";
         this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
       }
     }
@@ -2637,12 +2713,11 @@ var Iti = class {
     }
   }
   //* Find the country data for the given iso2 code
-  //* the ignoreOnlyCountriesOption is only used during init() while parsing the onlyCountries array
+  //* the allowFail option is only used during init() for the initialCountry option, and for the iso2 returned from geoIpLookup - in these 2 cases we don't want to error out
   _getCountryData(iso2, allowFail) {
-    for (let i = 0; i < this.countries.length; i++) {
-      if (this.countries[i].iso2 === iso2) {
-        return this.countries[i];
-      }
+    const country = this.countryByIso2.get(iso2);
+    if (country) {
+      return country;
     }
     if (allowFail) {
       return null;
@@ -2793,7 +2868,6 @@ var Iti = class {
   _closeDropdown() {
     this.dropdownContent.classList.add("iti__hide");
     this.selectedCountry.setAttribute("aria-expanded", "false");
-    this.selectedCountry.removeAttribute("aria-activedescendant");
     if (this.highlightedItem) {
       this.highlightedItem.setAttribute("aria-selected", "false");
     }
@@ -2801,9 +2875,9 @@ var Iti = class {
       this.searchInput.removeAttribute("aria-activedescendant");
     }
     this.dropdownArrow.classList.remove("iti__arrow--up");
-    document.removeEventListener("keydown", this._handleKeydownOnDropdown);
     if (this.options.countrySearch) {
       this.searchInput.removeEventListener("input", this._handleSearchChange);
+      this.searchClearButton.removeEventListener("click", this._handleSearchClear);
     }
     document.documentElement.removeEventListener(
       "click",
@@ -2873,11 +2947,11 @@ var Iti = class {
           numericChars += c;
           if (includeAreaCode) {
             if (this.dialCodeToIso2Map[numericChars]) {
-              dialCode = number.substr(0, i + 1);
+              dialCode = number.substring(0, i + 1);
             }
           } else {
-            if (this.dialCodes[numericChars]) {
-              dialCode = number.substr(0, i + 1);
+            if (this.dialCodes.has(numericChars)) {
+              dialCode = number.substring(0, i + 1);
               break;
             }
           }
@@ -2910,7 +2984,7 @@ var Iti = class {
       if (dialCode) {
         dialCode = `+${this.selectedCountryData.dialCode}`;
         const start = number[dialCode.length] === " " || number[dialCode.length] === "-" ? dialCode.length + 1 : dialCode.length;
-        number = number.substr(start);
+        number = number.substring(start);
       }
     }
     return this._cap(number);
@@ -3044,38 +3118,32 @@ var Iti = class {
     }
     return -99;
   }
-  //* Validate the input val
+  //* Validate the input val (with precise=false)
   isValidNumber() {
-    if (!this.selectedCountryData.iso2) {
-      return false;
-    }
-    const val = this._getFullNumber();
-    const alphaCharPosition = val.search(/\p{L}/u);
-    if (alphaCharPosition > -1) {
-      const beforeAlphaChar = val.substring(0, alphaCharPosition);
-      const beforeAlphaIsValid = this._utilsIsPossibleNumber(beforeAlphaChar);
-      const isValid = this._utilsIsPossibleNumber(val);
-      return beforeAlphaIsValid && isValid;
-    }
-    return this._utilsIsPossibleNumber(val);
+    return this._validateNumber(false);
+  }
+  //* Validate the input val (with precise=true)
+  isValidNumberPrecise() {
+    return this._validateNumber(true);
   }
   _utilsIsPossibleNumber(val) {
     return intlTelInput.utils ? intlTelInput.utils.isPossibleNumber(val, this.selectedCountryData.iso2, this.options.validationNumberTypes) : null;
   }
-  //* Validate the input val (precise)
-  isValidNumberPrecise() {
+  //* Shared internal validation logic to handle alpha character extension rules.
+  _validateNumber(precise) {
     if (!this.selectedCountryData.iso2) {
       return false;
     }
     const val = this._getFullNumber();
     const alphaCharPosition = val.search(/\p{L}/u);
+    const testValidity = (s) => precise ? this._utilsIsValidNumber(s) : this._utilsIsPossibleNumber(s);
     if (alphaCharPosition > -1) {
       const beforeAlphaChar = val.substring(0, alphaCharPosition);
-      const beforeAlphaIsValid = this._utilsIsValidNumber(beforeAlphaChar);
-      const isValid = this._utilsIsValidNumber(val);
+      const beforeAlphaIsValid = testValidity(beforeAlphaChar);
+      const isValid = testValidity(val);
       return beforeAlphaIsValid && isValid;
     }
-    return this._utilsIsValidNumber(val);
+    return testValidity(val);
   }
   _utilsIsValidNumber(val) {
     return intlTelInput.utils ? intlTelInput.utils.isValidNumber(val, this.selectedCountryData.iso2, this.options.validationNumberTypes) : null;
@@ -3167,7 +3235,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.5.2"
+    version: "25.8.0"
   }
 );
 var intl_tel_input_default = intlTelInput;