intl-tel-input 23.3.2 → 23.4.0

package/react/build/IntlTelInputWithUtils.cjs

@@ -1397,6 +1397,8 @@ var defaults = {
   containerClass: "",
   //* The order of the countries in the dropdown. Defaults to alphabetical.
   countryOrder: null,
+  //* Add a country search input at the top of the dropdown.
+  countrySearch: true,
   //* Modify the auto placeholder.
   customPlaceholder: null,
   //* Append menu to specified element.
@@ -1519,6 +1521,7 @@ var Iti = class {
     if (this.options.separateDialCode) {
       this.options.allowDropdown = true;
       this.options.nationalMode = false;
+      this.options.countrySearch = true;
     }
     if (!this.options.showFlags && !this.options.separateDialCode) {
       this.options.nationalMode = false;
@@ -1671,6 +1674,7 @@ var Iti = class {
       dropdownContainer,
       fixDropdownWidth,
       useFullscreenPopup,
+      countrySearch,
       i18n
     } = this.options;
     let parentClass = "iti";
@@ -1747,26 +1751,28 @@ var Iti = class {
           id: `iti-${this.id}__dropdown-content`,
           class: `iti__dropdown-content iti__hide ${extraClasses}`
         });
-        this.searchInput = createEl(
-          "input",
-          {
-            type: "text",
-            class: "iti__search-input",
-            placeholder: i18n.searchPlaceholder,
-            role: "combobox",
-            "aria-expanded": "true",
-            "aria-label": i18n.searchPlaceholder,
-            "aria-controls": `iti-${this.id}__country-listbox`,
-            "aria-autocomplete": "list",
-            "autocomplete": "off"
-          },
-          this.dropdownContent
-        );
-        this.searchResultsA11yText = createEl(
-          "span",
-          { class: "iti__a11y-text" },
-          this.dropdownContent
-        );
+        if (countrySearch) {
+          this.searchInput = createEl(
+            "input",
+            {
+              type: "text",
+              class: "iti__search-input",
+              placeholder: i18n.searchPlaceholder,
+              role: "combobox",
+              "aria-expanded": "true",
+              "aria-label": i18n.searchPlaceholder,
+              "aria-controls": `iti-${this.id}__country-listbox`,
+              "aria-autocomplete": "list",
+              "autocomplete": "off"
+            },
+            this.dropdownContent
+          );
+          this.searchResultsA11yText = createEl(
+            "span",
+            { class: "iti__a11y-text" },
+            this.dropdownContent
+          );
+        }
         this.countryList = createEl(
           "ul",
           {
@@ -1777,8 +1783,10 @@ var Iti = class {
           },
           this.dropdownContent
         );
-        this._appendListItems(this.countries, "iti__standard");
-        this._updateSearchResultsText();
+        this._appendListItems();
+        if (countrySearch) {
+          this._updateSearchResultsText();
+        }
         if (dropdownContainer) {
           let dropdownClasses = "iti iti--container";
           if (useFullscreenPopup) {
@@ -1813,15 +1821,16 @@ var Iti = class {
       }
     }
   }
-  //* For each of the passed countries: add a country <li> to the countryList <ul> container.
-  _appendListItems(countries, className) {
-    for (let i = 0; i < countries.length; i++) {
-      const c = countries[i];
+  //* For each country: add a country list item <li> to the countryList <ul> container.
+  _appendListItems() {
+    for (let i = 0; i < this.countries.length; i++) {
+      const c = this.countries[i];
+      const extraClass = i === 0 ? "iti__highlight" : "";
       const listItem = createEl(
         "li",
         {
           id: `iti-${this.id}__item-${c.iso2}`,
-          class: `iti__country ${className}`,
+          class: `iti__country ${extraClass}`,
           tabindex: "-1",
           role: "option",
           "data-dial-code": c.dialCode,
@@ -2062,24 +2071,26 @@ var Iti = class {
   }
   //* Open the dropdown.
   _openDropdown() {
-    const { fixDropdownWidth } = this.options;
+    const { fixDropdownWidth, countrySearch } = this.options;
     if (fixDropdownWidth) {
       this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`;
     }
     this.dropdownContent.classList.remove("iti__hide");
     this.selectedCountry.setAttribute("aria-expanded", "true");
     this._setDropdownPosition();
-    const firstCountryItem = this.countryList.firstElementChild;
-    if (firstCountryItem) {
-      this._highlightListItem(firstCountryItem, false);
-      this.countryList.scrollTop = 0;
+    if (countrySearch) {
+      const firstCountryItem = this.countryList.firstElementChild;
+      if (firstCountryItem) {
+        this._highlightListItem(firstCountryItem, false);
+        this.countryList.scrollTop = 0;
+      }
+      this.searchInput.focus();
     }
-    this.searchInput.focus();
     this._bindDropdownListeners();
     this.dropdownArrow.classList.add("iti__arrow--up");
     this._trigger("open:countrydropdown");
   }
-  //* Decide if should position dropdown above or below input (depends on position within viewport, and scroll).
+  //* Set the dropdown position
   _setDropdownPosition() {
     if (this.options.dropdownContainer) {
       this.options.dropdownContainer.appendChild(this.dropdown);
@@ -2125,6 +2136,8 @@ var Iti = class {
       "click",
       this._handleClickOffToClose
     );
+    let query = "";
+    let queryTimer = null;
     this._handleKeydownOnDropdown = (e) => {
       if (["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(e.key)) {
         e.preventDefault();
@@ -2137,29 +2150,56 @@ var Iti = class {
           this._closeDropdown();
         }
       }
-    };
-    document.addEventListener("keydown", this._handleKeydownOnDropdown);
-    const doFilter = () => {
-      const inputQuery = this.searchInput.value.trim();
-      if (inputQuery) {
-        this._filterCountries(inputQuery);
-      } else {
-        this._filterCountries("", true);
+      if (!this.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
+        e.stopPropagation();
+        if (queryTimer) {
+          clearTimeout(queryTimer);
+        }
+        query += e.key.toLowerCase();
+        this._searchForCountry(query);
+        queryTimer = setTimeout(() => {
+          query = "";
+        }, 1e3);
       }
     };
-    let keyupTimer = null;
-    this._handleSearchChange = () => {
-      if (keyupTimer) {
-        clearTimeout(keyupTimer);
+    document.addEventListener("keydown", this._handleKeydownOnDropdown);
+    if (this.options.countrySearch) {
+      const doFilter = () => {
+        const inputQuery = this.searchInput.value.trim();
+        if (inputQuery) {
+          this._filterCountries(inputQuery);
+        } else {
+          this._filterCountries("", true);
+        }
+      };
+      let keyupTimer = null;
+      this._handleSearchChange = () => {
+        if (keyupTimer) {
+          clearTimeout(keyupTimer);
+        }
+        keyupTimer = setTimeout(() => {
+          doFilter();
+          keyupTimer = null;
+        }, 100);
+      };
+      this.searchInput.addEventListener("input", this._handleSearchChange);
+      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;
+      if (startsWith) {
+        const listItem = c.nodeById[this.id];
+        this._highlightListItem(listItem, false);
+        this._scrollTo(listItem);
+        break;
       }
-      keyupTimer = setTimeout(() => {
-        doFilter();
-        keyupTimer = null;
-      }, 100);
-    };
-    this.searchInput.addEventListener("input", this._handleSearchChange);
-    this.searchInput.addEventListener("click", (e) => e.stopPropagation());
+    }
   }
+  //* Country search enabled: Filter the countries according to the search query.
   _filterCountries(query, isReset = false) {
     let noCountriesAddedYet = true;
     this.countryList.innerHTML = "";
@@ -2287,7 +2327,9 @@ var Iti = class {
       this.highlightedItem.setAttribute("aria-selected", "true");
       const activeDescendant = this.highlightedItem.getAttribute("id") || "";
       this.selectedCountry.setAttribute("aria-activedescendant", activeDescendant);
-      this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
+      if (this.options.countrySearch) {
+        this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
+      }
     }
     if (shouldFocus) {
       this.highlightedItem.focus();
@@ -2444,10 +2486,14 @@ var Iti = class {
     if (this.highlightedItem) {
       this.highlightedItem.setAttribute("aria-selected", "false");
     }
-    this.searchInput.removeAttribute("aria-activedescendant");
+    if (this.options.countrySearch) {
+      this.searchInput.removeAttribute("aria-activedescendant");
+    }
     this.dropdownArrow.classList.remove("iti__arrow--up");
     document.removeEventListener("keydown", this._handleKeydownOnDropdown);
-    this.searchInput.removeEventListener("input", this._handleSearchChange);
+    if (this.options.countrySearch) {
+      this.searchInput.removeEventListener("input", this._handleSearchChange);
+    }
     document.documentElement.removeEventListener(
       "click",
       this._handleClickOffToClose
@@ -2758,7 +2804,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.3.2"
+    version: "23.4.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -1361,6 +1361,8 @@ var defaults = {
   containerClass: "",
   //* The order of the countries in the dropdown. Defaults to alphabetical.
   countryOrder: null,
+  //* Add a country search input at the top of the dropdown.
+  countrySearch: true,
   //* Modify the auto placeholder.
   customPlaceholder: null,
   //* Append menu to specified element.
@@ -1483,6 +1485,7 @@ var Iti = class {
     if (this.options.separateDialCode) {
       this.options.allowDropdown = true;
       this.options.nationalMode = false;
+      this.options.countrySearch = true;
     }
     if (!this.options.showFlags && !this.options.separateDialCode) {
       this.options.nationalMode = false;
@@ -1635,6 +1638,7 @@ var Iti = class {
       dropdownContainer,
       fixDropdownWidth,
       useFullscreenPopup,
+      countrySearch,
       i18n
     } = this.options;
     let parentClass = "iti";
@@ -1711,26 +1715,28 @@ var Iti = class {
           id: `iti-${this.id}__dropdown-content`,
           class: `iti__dropdown-content iti__hide ${extraClasses}`
         });
-        this.searchInput = createEl(
-          "input",
-          {
-            type: "text",
-            class: "iti__search-input",
-            placeholder: i18n.searchPlaceholder,
-            role: "combobox",
-            "aria-expanded": "true",
-            "aria-label": i18n.searchPlaceholder,
-            "aria-controls": `iti-${this.id}__country-listbox`,
-            "aria-autocomplete": "list",
-            "autocomplete": "off"
-          },
-          this.dropdownContent
-        );
-        this.searchResultsA11yText = createEl(
-          "span",
-          { class: "iti__a11y-text" },
-          this.dropdownContent
-        );
+        if (countrySearch) {
+          this.searchInput = createEl(
+            "input",
+            {
+              type: "text",
+              class: "iti__search-input",
+              placeholder: i18n.searchPlaceholder,
+              role: "combobox",
+              "aria-expanded": "true",
+              "aria-label": i18n.searchPlaceholder,
+              "aria-controls": `iti-${this.id}__country-listbox`,
+              "aria-autocomplete": "list",
+              "autocomplete": "off"
+            },
+            this.dropdownContent
+          );
+          this.searchResultsA11yText = createEl(
+            "span",
+            { class: "iti__a11y-text" },
+            this.dropdownContent
+          );
+        }
         this.countryList = createEl(
           "ul",
           {
@@ -1741,8 +1747,10 @@ var Iti = class {
           },
           this.dropdownContent
         );
-        this._appendListItems(this.countries, "iti__standard");
-        this._updateSearchResultsText();
+        this._appendListItems();
+        if (countrySearch) {
+          this._updateSearchResultsText();
+        }
         if (dropdownContainer) {
           let dropdownClasses = "iti iti--container";
           if (useFullscreenPopup) {
@@ -1777,15 +1785,16 @@ var Iti = class {
       }
     }
   }
-  //* For each of the passed countries: add a country <li> to the countryList <ul> container.
-  _appendListItems(countries, className) {
-    for (let i = 0; i < countries.length; i++) {
-      const c = countries[i];
+  //* For each country: add a country list item <li> to the countryList <ul> container.
+  _appendListItems() {
+    for (let i = 0; i < this.countries.length; i++) {
+      const c = this.countries[i];
+      const extraClass = i === 0 ? "iti__highlight" : "";
       const listItem = createEl(
         "li",
         {
           id: `iti-${this.id}__item-${c.iso2}`,
-          class: `iti__country ${className}`,
+          class: `iti__country ${extraClass}`,
           tabindex: "-1",
           role: "option",
           "data-dial-code": c.dialCode,
@@ -2026,24 +2035,26 @@ var Iti = class {
   }
   //* Open the dropdown.
   _openDropdown() {
-    const { fixDropdownWidth } = this.options;
+    const { fixDropdownWidth, countrySearch } = this.options;
     if (fixDropdownWidth) {
       this.dropdownContent.style.width = `${this.telInput.offsetWidth}px`;
     }
     this.dropdownContent.classList.remove("iti__hide");
     this.selectedCountry.setAttribute("aria-expanded", "true");
     this._setDropdownPosition();
-    const firstCountryItem = this.countryList.firstElementChild;
-    if (firstCountryItem) {
-      this._highlightListItem(firstCountryItem, false);
-      this.countryList.scrollTop = 0;
+    if (countrySearch) {
+      const firstCountryItem = this.countryList.firstElementChild;
+      if (firstCountryItem) {
+        this._highlightListItem(firstCountryItem, false);
+        this.countryList.scrollTop = 0;
+      }
+      this.searchInput.focus();
     }
-    this.searchInput.focus();
     this._bindDropdownListeners();
     this.dropdownArrow.classList.add("iti__arrow--up");
     this._trigger("open:countrydropdown");
   }
-  //* Decide if should position dropdown above or below input (depends on position within viewport, and scroll).
+  //* Set the dropdown position
   _setDropdownPosition() {
     if (this.options.dropdownContainer) {
       this.options.dropdownContainer.appendChild(this.dropdown);
@@ -2089,6 +2100,8 @@ var Iti = class {
       "click",
       this._handleClickOffToClose
     );
+    let query = "";
+    let queryTimer = null;
     this._handleKeydownOnDropdown = (e) => {
       if (["ArrowUp", "ArrowDown", "Enter", "Escape"].includes(e.key)) {
         e.preventDefault();
@@ -2101,29 +2114,56 @@ var Iti = class {
           this._closeDropdown();
         }
       }
-    };
-    document.addEventListener("keydown", this._handleKeydownOnDropdown);
-    const doFilter = () => {
-      const inputQuery = this.searchInput.value.trim();
-      if (inputQuery) {
-        this._filterCountries(inputQuery);
-      } else {
-        this._filterCountries("", true);
+      if (!this.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
+        e.stopPropagation();
+        if (queryTimer) {
+          clearTimeout(queryTimer);
+        }
+        query += e.key.toLowerCase();
+        this._searchForCountry(query);
+        queryTimer = setTimeout(() => {
+          query = "";
+        }, 1e3);
       }
     };
-    let keyupTimer = null;
-    this._handleSearchChange = () => {
-      if (keyupTimer) {
-        clearTimeout(keyupTimer);
+    document.addEventListener("keydown", this._handleKeydownOnDropdown);
+    if (this.options.countrySearch) {
+      const doFilter = () => {
+        const inputQuery = this.searchInput.value.trim();
+        if (inputQuery) {
+          this._filterCountries(inputQuery);
+        } else {
+          this._filterCountries("", true);
+        }
+      };
+      let keyupTimer = null;
+      this._handleSearchChange = () => {
+        if (keyupTimer) {
+          clearTimeout(keyupTimer);
+        }
+        keyupTimer = setTimeout(() => {
+          doFilter();
+          keyupTimer = null;
+        }, 100);
+      };
+      this.searchInput.addEventListener("input", this._handleSearchChange);
+      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;
+      if (startsWith) {
+        const listItem = c.nodeById[this.id];
+        this._highlightListItem(listItem, false);
+        this._scrollTo(listItem);
+        break;
       }
-      keyupTimer = setTimeout(() => {
-        doFilter();
-        keyupTimer = null;
-      }, 100);
-    };
-    this.searchInput.addEventListener("input", this._handleSearchChange);
-    this.searchInput.addEventListener("click", (e) => e.stopPropagation());
+    }
   }
+  //* Country search enabled: Filter the countries according to the search query.
   _filterCountries(query, isReset = false) {
     let noCountriesAddedYet = true;
     this.countryList.innerHTML = "";
@@ -2251,7 +2291,9 @@ var Iti = class {
       this.highlightedItem.setAttribute("aria-selected", "true");
       const activeDescendant = this.highlightedItem.getAttribute("id") || "";
       this.selectedCountry.setAttribute("aria-activedescendant", activeDescendant);
-      this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
+      if (this.options.countrySearch) {
+        this.searchInput.setAttribute("aria-activedescendant", activeDescendant);
+      }
     }
     if (shouldFocus) {
       this.highlightedItem.focus();
@@ -2408,10 +2450,14 @@ var Iti = class {
     if (this.highlightedItem) {
       this.highlightedItem.setAttribute("aria-selected", "false");
     }
-    this.searchInput.removeAttribute("aria-activedescendant");
+    if (this.options.countrySearch) {
+      this.searchInput.removeAttribute("aria-activedescendant");
+    }
     this.dropdownArrow.classList.remove("iti__arrow--up");
     document.removeEventListener("keydown", this._handleKeydownOnDropdown);
-    this.searchInput.removeEventListener("input", this._handleSearchChange);
+    if (this.options.countrySearch) {
+      this.searchInput.removeEventListener("input", this._handleSearchChange);
+    }
     document.documentElement.removeEventListener(
       "click",
       this._handleClickOffToClose
@@ -2722,7 +2768,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.3.2"
+    version: "23.4.0"
   }
 );
 var intl_tel_input_default = intlTelInput;