intl-tel-input 25.13.0 → 25.13.2

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];
     }
@@ -2707,11 +2721,11 @@ var translateCountryNames = (countries, options) => {
     }
   }
 };
-var processDialCodes = (countries, options) => {
+var processDialCodes = (countries) => {
   const dialCodes = /* @__PURE__ */ new Set();
   let dialCodeMaxLen = 0;
   const dialCodeToIso2Map = {};
-  const _addToDialCodeMap = (iso2, dialCode, priority) => {
+  const _addToDialCodeMap = (iso2, dialCode) => {
     if (!iso2 || !dialCode) {
       return;
     }
@@ -2725,10 +2739,10 @@ var processDialCodes = (countries, options) => {
     if (iso2List.includes(iso2)) {
       return;
     }
-    const index = priority !== void 0 ? priority : iso2List.length;
-    iso2List[index] = iso2;
+    iso2List.push(iso2);
   };
-  for (const c of countries) {
+  const countriesSortedByPriority = [...countries].sort((a, b) => a.priority - b.priority);
+  for (const c of countriesSortedByPriority) {
     if (!dialCodes.has(c.dialCode)) {
       dialCodes.add(c.dialCode);
     }
@@ -2736,14 +2750,7 @@ var processDialCodes = (countries, options) => {
       const partialDialCode = c.dialCode.substring(0, k);
       _addToDialCodeMap(c.iso2, partialDialCode);
     }
-    _addToDialCodeMap(c.iso2, c.dialCode, c.priority);
-  }
-  if (options.onlyCountries.length || options.excludeCountries.length) {
-    dialCodes.forEach((dialCode) => {
-      dialCodeToIso2Map[dialCode] = dialCodeToIso2Map[dialCode].filter(Boolean);
-    });
-  }
-  for (const c of countries) {
+    _addToDialCodeMap(c.iso2, c.dialCode);
     if (c.areaCodes) {
       const rootIso2Code = dialCodeToIso2Map[c.dialCode][0];
       for (const areaCode of c.areaCodes) {
@@ -2878,8 +2885,7 @@ var Iti = class _Iti {
     this.promise = this._createInitPromises();
     this.countries = processAllCountries(this.options);
     const { dialCodes, dialCodeMaxLen, dialCodeToIso2Map } = processDialCodes(
-      this.countries,
-      this.options
+      this.countries
     );
     this.dialCodes = dialCodes;
     this.dialCodeMaxLen = dialCodeMaxLen;
@@ -3608,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;
@@ -3719,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();
@@ -4060,7 +4070,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtilsScript: false,
     startedLoadingAutoCountry: false,
-    version: "25.13.0"
+    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.0/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.