intl-tel-input 25.13.1 → 25.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "25.13.1",
+  "version": "25.13.2",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",

package/react/README.md

@@ -30,7 +30,7 @@ import "intl-tel-input/styles";
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/validation/ValidationApp.tsx) for a more fleshed-out example of how to handle validation.
 
 ## Utils Script
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize), then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.1/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize), then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.2/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput React component.

package/react/build/IntlTelInput.cjs

@@ -2272,6 +2272,7 @@ var buildClearIcon = (id2) => {
 var UI = class {
   constructor(input, options, id2) {
     this.highlightedItem = null;
+    this.selectedItem = null;
     input.dataset.intlTelInputId = id2.toString();
     this.telInput = input;
     this.options = options;
@@ -2533,8 +2534,7 @@ var UI = class {
     for (let i = 0; i < this.countries.length; i++) {
       const c = this.countries[i];
       const liClass = buildClassNames({
-        [CLASSES.COUNTRY_ITEM]: true,
-        [CLASSES.HIGHLIGHT]: i === 0
+        [CLASSES.COUNTRY_ITEM]: true
       });
       const listItem = createEl("li", {
         id: `iti-${this.id}__item-${c.iso2}`,
@@ -2637,17 +2637,15 @@ var UI = class {
       container.scrollTop = newScrollTop - heightDifference;
     }
   }
-  //* Remove highlighting from other list items and highlight the given item.
+  //* Remove highlighting from the previous list item and highlight the new one.
   highlightListItem(listItem, shouldFocus) {
     const prevItem = this.highlightedItem;
     if (prevItem) {
       prevItem.classList.remove(CLASSES.HIGHLIGHT);
-      prevItem.setAttribute(ARIA.SELECTED, "false");
     }
     this.highlightedItem = listItem;
     if (this.highlightedItem) {
       this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
-      this.highlightedItem.setAttribute(ARIA.SELECTED, "true");
       if (this.options.countrySearch) {
         const activeDescendant = this.highlightedItem.getAttribute("id") || "";
         this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
@@ -2657,6 +2655,21 @@ var UI = class {
       this.highlightedItem.focus();
     }
   }
+  updateSelectedItem(iso2) {
+    if (this.selectedItem && this.selectedItem.dataset.countryCode !== iso2) {
+      this.selectedItem.setAttribute(ARIA.SELECTED, "false");
+      this.selectedItem = null;
+    }
+    if (iso2 && !this.selectedItem) {
+      const newListItem = this.countryList.querySelector(
+        `[data-country-code="${iso2}"]`
+      );
+      if (newListItem) {
+        newListItem.setAttribute(ARIA.SELECTED, "true");
+        this.selectedItem = newListItem;
+      }
+    }
+  }
   //* Country search: Filter the country list to the given array of countries.
   filterCountries(matchedCountries) {
     this.countryList.innerHTML = "";
@@ -2708,6 +2721,7 @@ var UI = class {
     this.hiddenInput = null;
     this.hiddenInputCountry = null;
     this.highlightedItem = null;
+    this.selectedItem = null;
     for (const c of this.countries) {
       delete c.nodeById[this.id];
     }
@@ -3636,11 +3650,14 @@ var Iti = class _Iti {
     }
     return null;
   }
-  //* Update the selected country, dial code (if separateDialCode), placeholder, title, and active list item.
+  //* Update the selected country, dial code (if separateDialCode), placeholder, title, and selected list item.
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(iso2) {
-    const { separateDialCode, showFlags, i18n } = this.options;
+    const { separateDialCode, showFlags, i18n, allowDropdown } = this.options;
     const prevIso2 = this.selectedCountryData.iso2 || "";
+    if (allowDropdown) {
+      this.ui.updateSelectedItem(iso2);
+    }
     this.selectedCountryData = iso2 ? this.countryByIso2.get(iso2) : {};
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
@@ -3747,11 +3764,12 @@ var Iti = class _Iti {
     }
     this.ui.dropdownContent.classList.add(CLASSES.HIDE);
     this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
-    if (this.ui.highlightedItem) {
-      this.ui.highlightedItem.setAttribute(ARIA.SELECTED, "false");
-    }
     if (this.options.countrySearch) {
       this.ui.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
+      if (this.ui.highlightedItem) {
+        this.ui.highlightedItem.classList.remove(CLASSES.HIGHLIGHT);
+        this.ui.highlightedItem = null;
+      }
     }
     this.ui.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
     this.dropdownAbortController.abort();
@@ -4088,7 +4106,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.13.1"
+    version: "25.13.2"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.d.ts

@@ -262,7 +262,7 @@ declare module "modules/core/icons" {
     export const buildClearIcon: (id: number) => string;
 }
 declare module "modules/core/ui" {
-    import { Country } from "intl-tel-input/data";
+    import { Country, Iso2 } from "intl-tel-input/data";
     import { AllOptions } from "modules/types/public-api";
     export default class UI {
         private readonly options;
@@ -287,6 +287,7 @@ declare module "modules/core/ui" {
         hiddenInput: HTMLInputElement;
         hiddenInputCountry: HTMLInputElement;
         highlightedItem: HTMLElement | null;
+        selectedItem: HTMLElement | null;
         readonly hadInitialPlaceholder: boolean;
         constructor(input: HTMLInputElement, options: AllOptions, id: number);
         generateMarkup(countries: Country[]): void;
@@ -303,6 +304,7 @@ declare module "modules/core/ui" {
         updateSearchResultsA11yText(): void;
         scrollTo(element: HTMLElement): void;
         highlightListItem(listItem: HTMLElement | null, shouldFocus: boolean): void;
+        updateSelectedItem(iso2: Iso2 | ""): void;
         filterCountries(matchedCountries: Country[]): void;
         destroy(): void;
     }

package/react/build/IntlTelInput.js

@@ -2236,6 +2236,7 @@ var buildClearIcon = (id2) => {
 var UI = class {
   constructor(input, options, id2) {
     this.highlightedItem = null;
+    this.selectedItem = null;
     input.dataset.intlTelInputId = id2.toString();
     this.telInput = input;
     this.options = options;
@@ -2497,8 +2498,7 @@ var UI = class {
     for (let i = 0; i < this.countries.length; i++) {
       const c = this.countries[i];
       const liClass = buildClassNames({
-        [CLASSES.COUNTRY_ITEM]: true,
-        [CLASSES.HIGHLIGHT]: i === 0
+        [CLASSES.COUNTRY_ITEM]: true
       });
       const listItem = createEl("li", {
         id: `iti-${this.id}__item-${c.iso2}`,
@@ -2601,17 +2601,15 @@ var UI = class {
       container.scrollTop = newScrollTop - heightDifference;
     }
   }
-  //* Remove highlighting from other list items and highlight the given item.
+  //* Remove highlighting from the previous list item and highlight the new one.
   highlightListItem(listItem, shouldFocus) {
     const prevItem = this.highlightedItem;
     if (prevItem) {
       prevItem.classList.remove(CLASSES.HIGHLIGHT);
-      prevItem.setAttribute(ARIA.SELECTED, "false");
     }
     this.highlightedItem = listItem;
     if (this.highlightedItem) {
       this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
-      this.highlightedItem.setAttribute(ARIA.SELECTED, "true");
       if (this.options.countrySearch) {
         const activeDescendant = this.highlightedItem.getAttribute("id") || "";
         this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
@@ -2621,6 +2619,21 @@ var UI = class {
       this.highlightedItem.focus();
     }
   }
+  updateSelectedItem(iso2) {
+    if (this.selectedItem && this.selectedItem.dataset.countryCode !== iso2) {
+      this.selectedItem.setAttribute(ARIA.SELECTED, "false");
+      this.selectedItem = null;
+    }
+    if (iso2 && !this.selectedItem) {
+      const newListItem = this.countryList.querySelector(
+        `[data-country-code="${iso2}"]`
+      );
+      if (newListItem) {
+        newListItem.setAttribute(ARIA.SELECTED, "true");
+        this.selectedItem = newListItem;
+      }
+    }
+  }
   //* Country search: Filter the country list to the given array of countries.
   filterCountries(matchedCountries) {
     this.countryList.innerHTML = "";
@@ -2672,6 +2685,7 @@ var UI = class {
     this.hiddenInput = null;
     this.hiddenInputCountry = null;
     this.highlightedItem = null;
+    this.selectedItem = null;
     for (const c of this.countries) {
       delete c.nodeById[this.id];
     }
@@ -3600,11 +3614,14 @@ var Iti = class _Iti {
     }
     return null;
   }
-  //* Update the selected country, dial code (if separateDialCode), placeholder, title, and active list item.
+  //* Update the selected country, dial code (if separateDialCode), placeholder, title, and selected list item.
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(iso2) {
-    const { separateDialCode, showFlags, i18n } = this.options;
+    const { separateDialCode, showFlags, i18n, allowDropdown } = this.options;
     const prevIso2 = this.selectedCountryData.iso2 || "";
+    if (allowDropdown) {
+      this.ui.updateSelectedItem(iso2);
+    }
     this.selectedCountryData = iso2 ? this.countryByIso2.get(iso2) : {};
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
@@ -3711,11 +3728,12 @@ var Iti = class _Iti {
     }
     this.ui.dropdownContent.classList.add(CLASSES.HIDE);
     this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
-    if (this.ui.highlightedItem) {
-      this.ui.highlightedItem.setAttribute(ARIA.SELECTED, "false");
-    }
     if (this.options.countrySearch) {
       this.ui.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
+      if (this.ui.highlightedItem) {
+        this.ui.highlightedItem.classList.remove(CLASSES.HIGHLIGHT);
+        this.ui.highlightedItem = null;
+      }
     }
     this.ui.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
     this.dropdownAbortController.abort();
@@ -4052,7 +4070,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.13.1"
+    version: "25.13.2"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -2272,6 +2272,7 @@ var buildClearIcon = (id2) => {
 var UI = class {
   constructor(input, options, id2) {
     this.highlightedItem = null;
+    this.selectedItem = null;
     input.dataset.intlTelInputId = id2.toString();
     this.telInput = input;
     this.options = options;
@@ -2533,8 +2534,7 @@ var UI = class {
     for (let i = 0; i < this.countries.length; i++) {
       const c = this.countries[i];
       const liClass = buildClassNames({
-        [CLASSES.COUNTRY_ITEM]: true,
-        [CLASSES.HIGHLIGHT]: i === 0
+        [CLASSES.COUNTRY_ITEM]: true
       });
       const listItem = createEl("li", {
         id: `iti-${this.id}__item-${c.iso2}`,
@@ -2637,17 +2637,15 @@ var UI = class {
       container.scrollTop = newScrollTop - heightDifference;
     }
   }
-  //* Remove highlighting from other list items and highlight the given item.
+  //* Remove highlighting from the previous list item and highlight the new one.
   highlightListItem(listItem, shouldFocus) {
     const prevItem = this.highlightedItem;
     if (prevItem) {
       prevItem.classList.remove(CLASSES.HIGHLIGHT);
-      prevItem.setAttribute(ARIA.SELECTED, "false");
     }
     this.highlightedItem = listItem;
     if (this.highlightedItem) {
       this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
-      this.highlightedItem.setAttribute(ARIA.SELECTED, "true");
       if (this.options.countrySearch) {
         const activeDescendant = this.highlightedItem.getAttribute("id") || "";
         this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
@@ -2657,6 +2655,21 @@ var UI = class {
       this.highlightedItem.focus();
     }
   }
+  updateSelectedItem(iso2) {
+    if (this.selectedItem && this.selectedItem.dataset.countryCode !== iso2) {
+      this.selectedItem.setAttribute(ARIA.SELECTED, "false");
+      this.selectedItem = null;
+    }
+    if (iso2 && !this.selectedItem) {
+      const newListItem = this.countryList.querySelector(
+        `[data-country-code="${iso2}"]`
+      );
+      if (newListItem) {
+        newListItem.setAttribute(ARIA.SELECTED, "true");
+        this.selectedItem = newListItem;
+      }
+    }
+  }
   //* Country search: Filter the country list to the given array of countries.
   filterCountries(matchedCountries) {
     this.countryList.innerHTML = "";
@@ -2708,6 +2721,7 @@ var UI = class {
     this.hiddenInput = null;
     this.hiddenInputCountry = null;
     this.highlightedItem = null;
+    this.selectedItem = null;
     for (const c of this.countries) {
       delete c.nodeById[this.id];
     }
@@ -3636,11 +3650,14 @@ var Iti = class _Iti {
     }
     return null;
   }
-  //* Update the selected country, dial code (if separateDialCode), placeholder, title, and active list item.
+  //* Update the selected country, dial code (if separateDialCode), placeholder, title, and selected list item.
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(iso2) {
-    const { separateDialCode, showFlags, i18n } = this.options;
+    const { separateDialCode, showFlags, i18n, allowDropdown } = this.options;
     const prevIso2 = this.selectedCountryData.iso2 || "";
+    if (allowDropdown) {
+      this.ui.updateSelectedItem(iso2);
+    }
     this.selectedCountryData = iso2 ? this.countryByIso2.get(iso2) : {};
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
@@ -3747,11 +3764,12 @@ var Iti = class _Iti {
     }
     this.ui.dropdownContent.classList.add(CLASSES.HIDE);
     this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
-    if (this.ui.highlightedItem) {
-      this.ui.highlightedItem.setAttribute(ARIA.SELECTED, "false");
-    }
     if (this.options.countrySearch) {
       this.ui.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
+      if (this.ui.highlightedItem) {
+        this.ui.highlightedItem.classList.remove(CLASSES.HIGHLIGHT);
+        this.ui.highlightedItem = null;
+      }
     }
     this.ui.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
     this.dropdownAbortController.abort();
@@ -4088,7 +4106,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.13.1"
+    version: "25.13.2"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -2236,6 +2236,7 @@ var buildClearIcon = (id2) => {
 var UI = class {
   constructor(input, options, id2) {
     this.highlightedItem = null;
+    this.selectedItem = null;
     input.dataset.intlTelInputId = id2.toString();
     this.telInput = input;
     this.options = options;
@@ -2497,8 +2498,7 @@ var UI = class {
     for (let i = 0; i < this.countries.length; i++) {
       const c = this.countries[i];
       const liClass = buildClassNames({
-        [CLASSES.COUNTRY_ITEM]: true,
-        [CLASSES.HIGHLIGHT]: i === 0
+        [CLASSES.COUNTRY_ITEM]: true
       });
       const listItem = createEl("li", {
         id: `iti-${this.id}__item-${c.iso2}`,
@@ -2601,17 +2601,15 @@ var UI = class {
       container.scrollTop = newScrollTop - heightDifference;
     }
   }
-  //* Remove highlighting from other list items and highlight the given item.
+  //* Remove highlighting from the previous list item and highlight the new one.
   highlightListItem(listItem, shouldFocus) {
     const prevItem = this.highlightedItem;
     if (prevItem) {
       prevItem.classList.remove(CLASSES.HIGHLIGHT);
-      prevItem.setAttribute(ARIA.SELECTED, "false");
     }
     this.highlightedItem = listItem;
     if (this.highlightedItem) {
       this.highlightedItem.classList.add(CLASSES.HIGHLIGHT);
-      this.highlightedItem.setAttribute(ARIA.SELECTED, "true");
       if (this.options.countrySearch) {
         const activeDescendant = this.highlightedItem.getAttribute("id") || "";
         this.searchInput.setAttribute(ARIA.ACTIVE_DESCENDANT, activeDescendant);
@@ -2621,6 +2619,21 @@ var UI = class {
       this.highlightedItem.focus();
     }
   }
+  updateSelectedItem(iso2) {
+    if (this.selectedItem && this.selectedItem.dataset.countryCode !== iso2) {
+      this.selectedItem.setAttribute(ARIA.SELECTED, "false");
+      this.selectedItem = null;
+    }
+    if (iso2 && !this.selectedItem) {
+      const newListItem = this.countryList.querySelector(
+        `[data-country-code="${iso2}"]`
+      );
+      if (newListItem) {
+        newListItem.setAttribute(ARIA.SELECTED, "true");
+        this.selectedItem = newListItem;
+      }
+    }
+  }
   //* Country search: Filter the country list to the given array of countries.
   filterCountries(matchedCountries) {
     this.countryList.innerHTML = "";
@@ -2672,6 +2685,7 @@ var UI = class {
     this.hiddenInput = null;
     this.hiddenInputCountry = null;
     this.highlightedItem = null;
+    this.selectedItem = null;
     for (const c of this.countries) {
       delete c.nodeById[this.id];
     }
@@ -3600,11 +3614,14 @@ var Iti = class _Iti {
     }
     return null;
   }
-  //* Update the selected country, dial code (if separateDialCode), placeholder, title, and active list item.
+  //* Update the selected country, dial code (if separateDialCode), placeholder, title, and selected list item.
   //* Note: called from _setInitialState, _updateCountryFromNumber, _selectListItem, setCountry.
   _setCountry(iso2) {
-    const { separateDialCode, showFlags, i18n } = this.options;
+    const { separateDialCode, showFlags, i18n, allowDropdown } = this.options;
     const prevIso2 = this.selectedCountryData.iso2 || "";
+    if (allowDropdown) {
+      this.ui.updateSelectedItem(iso2);
+    }
     this.selectedCountryData = iso2 ? this.countryByIso2.get(iso2) : {};
     if (this.selectedCountryData.iso2) {
       this.defaultCountry = this.selectedCountryData.iso2;
@@ -3711,11 +3728,12 @@ var Iti = class _Iti {
     }
     this.ui.dropdownContent.classList.add(CLASSES.HIDE);
     this.ui.selectedCountry.setAttribute(ARIA.EXPANDED, "false");
-    if (this.ui.highlightedItem) {
-      this.ui.highlightedItem.setAttribute(ARIA.SELECTED, "false");
-    }
     if (this.options.countrySearch) {
       this.ui.searchInput.removeAttribute(ARIA.ACTIVE_DESCENDANT);
+      if (this.ui.highlightedItem) {
+        this.ui.highlightedItem.classList.remove(CLASSES.HIGHLIGHT);
+        this.ui.highlightedItem = null;
+      }
     }
     this.ui.dropdownArrow.classList.remove(CLASSES.ARROW_UP);
     this.dropdownAbortController.abort();
@@ -4052,7 +4070,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.13.1"
+    version: "25.13.2"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/vue/README.md

@@ -34,7 +34,7 @@ See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master
 "vue:demo": "vite --config vue/demo/[demo variant]/vite.config.js"
 ```
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.1/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `loadUtils` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.13.2/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.