intl-tel-input 29.3.0 → 29.4.0

package/dist/js/intlTelInputWithUtils.js

@@ -1,5 +1,5 @@
 /*
- * International Telephone Input v29.3.0
+ * International Telephone Input v29.4.0
  * git+https://github.com/jackocnr/intl-tel-input.git
  * Licensed under the MIT license
  */
@@ -2008,7 +2008,7 @@ var _factory = (() => {
     customPlaceholder: null,
     //* Always show the dropdown
     dropdownAlwaysOpen: false,
-    //* Optional DOM element to append the dropdown to (used to escape ancestors with overflow:hidden, or to mount in a custom container). Only consulted in dropdown rendering; ignored when the country selector renders as a fullscreen popup.
+    //* Optional DOM element to append the dropdown to (used to escape ancestors with overflow:hidden, or to mount in a custom container). Only consulted in dropdown rendering; ignored when the country selector renders as a fullscreen popup (see fullscreenParent).
     dropdownParent: null,
     //* Don't display these countries.
     excludeCountries: null,
@@ -2016,6 +2016,8 @@ var _factory = (() => {
     matchDropdownWidth: true,
     //* Format the number as the user types
     formatAsYouType: true,
+    //* Optional DOM element to append the fullscreen popup to, instead of document.body (e.g. a modal <dialog>, where a body-mounted popup would be unreachable). Only consulted in fullscreen rendering (see dropdownParent for the dropdown). Null means document.body, which is resolved on open rather than here, as document may not exist yet (e.g. SSR).
+    fullscreenParent: null,
     //* Inject hidden inputs with the names returned from this function, and on submit, populate them with the full number and selected country iso2.
     hiddenInputs: null,
     //* Translations for the core library UI strings e.g. search input placeholder, country names.
@@ -2199,8 +2201,9 @@ var _factory = (() => {
           validatedOptions[key] = value;
           break;
         case "dropdownParent":
+        case "fullscreenParent":
           if (value !== null && !isElLike(value)) {
-            warnOption("dropdownParent", "an HTMLElement or null", value);
+            warnOption(key, "an HTMLElement or null", value);
             break;
           }
           validatedOptions[key] = value;
@@ -2764,6 +2767,9 @@ var _factory = (() => {
         },
         this.#countrySelectorEl
       );
+      if (!countrySearch) {
+        this.#countryListEl.setAttribute("tabindex", "0");
+      }
       this.#appendListItems();
       if (countrySearch) {
         this.#updateSearchResultsA11yText();
@@ -2784,11 +2790,12 @@ var _factory = (() => {
         this.#countryContainerEl.appendChild(this.#countrySelectorEl);
       }
     }
-    //* Resolve the DOM element to attach the country selector to. Fullscreen always uses document.body; dropdown uses the consumer-supplied dropdownParent (if any); otherwise the country selector renders inline within the input wrapper (no detached element).
+    //* Resolve the DOM element to attach the country selector to. Fullscreen is always detached: it uses the consumer-supplied fullscreenParent, falling back to document.body; dropdown uses the consumer-supplied dropdownParent (if any); otherwise the country selector renders inline within the input wrapper (no detached element).
+    //* NOTE: these are deliberately two separate options. For the dropdown, setting a parent switches it from inline to detached rendering (pos:fixed, positioned against the input), whereas the fullscreen popup is detached regardless, so its parent only relocates it. Sharing one option would force a detached dropdown on anyone who only needs to move the fullscreen popup e.g. into a modal <dialog> (issue #2199).
     #getDetachedParent() {
-      const { countrySelectorMode, dropdownParent } = this.#options;
+      const { countrySelectorMode, dropdownParent, fullscreenParent } = this.#options;
       if (countrySelectorMode === COUNTRY_SELECTOR_MODE.FULLSCREEN) {
-        return document.body;
+        return fullscreenParent ?? document.body;
       }
       if (countrySelectorMode === COUNTRY_SELECTOR_MODE.DROPDOWN) {
         return dropdownParent;
@@ -2914,7 +2921,6 @@ var _factory = (() => {
         const listItem = createEl("li", {
           id: `iti-${this.#id}__item-${c.iso2}`,
           class: liClass,
-          tabindex: "-1",
           role: "option",
           [ARIA.SELECTED]: "false"
         });
@@ -3106,18 +3112,20 @@ var _factory = (() => {
         container.scrollTop = offsetTop - containerRect.height + elementRect.height;
       }
     }
+    //* The element that holds focus while the country selector is open: the search input, or (when countrySearch is disabled) the country list itself.
+    #getOpenFocusEl() {
+      return this.#options.countrySearch ? this.#searchInputEl : this.#countryListEl;
+    }
     //* Remove highlighting from the previous list item and highlight the new one.
     #highlightListItem(listItem, doScroll = true) {
       this.#highlightedListItemEl?.classList.remove(CLASSES.HIGHLIGHT);
       if (listItem) {
         listItem.classList.add(CLASSES.HIGHLIGHT);
-        if (this.#options.countrySearch) {
-          const activeDescendant = listItem.getAttribute("id") || "";
-          this.#searchInputEl.setAttribute(
-            ARIA.ACTIVE_DESCENDANT,
-            activeDescendant
-          );
-        }
+        const activeDescendant = listItem.getAttribute("id") || "";
+        this.#getOpenFocusEl().setAttribute(
+          ARIA.ACTIVE_DESCENDANT,
+          activeDescendant
+        );
         if (doScroll) {
           this.#scrollCountryListToItem(listItem);
         }
@@ -3196,7 +3204,7 @@ var _factory = (() => {
     //* Open the country selector: create a fresh AbortController, do the DOM work, and wire up all
     //* open-state listeners (which invoke the caller's onSelect / onClose callbacks).
     openCountrySelector(onSelect, onClose) {
-      const { countrySearch, dropdownAlwaysOpen } = this.#options;
+      const { dropdownAlwaysOpen } = this.#options;
       this.#countrySelectorAbortController = new AbortController();
       if (this.#options.countrySelectorMode !== COUNTRY_SELECTOR_MODE.FULLSCREEN) {
         this.#ensureInlineDropdownSizeMeasured();
@@ -3219,10 +3227,11 @@ var _factory = (() => {
       if (itemToHighlight) {
         this.#highlightListItem(itemToHighlight);
       }
-      if (countrySearch && !dropdownAlwaysOpen) {
-        this.#searchInputEl.focus();
+      if (!dropdownAlwaysOpen) {
+        this.#getOpenFocusEl().focus();
       }
       if (this.#options.countrySelectorMode === COUNTRY_SELECTOR_MODE.FULLSCREEN && this.#detachedCountrySelectorEl && window.visualViewport) {
+        this.#adjustFullscreenPopupToViewport();
         window.visualViewport.addEventListener(
           "resize",
           () => {
@@ -3339,6 +3348,20 @@ var _factory = (() => {
       };
       this.#selectedCountryEl?.addEventListener("keydown", handleKeydown, { signal });
       this.#countrySelectorEl?.addEventListener("keydown", handleKeydown, { signal });
+      if (this.#detachedCountrySelectorEl) {
+        this.#countrySelectorEl?.addEventListener(
+          "keydown",
+          (e) => {
+            if (e.key === KEYS.TAB) {
+              e.preventDefault();
+              onEscape();
+              const focusEl = e.shiftKey ? this.#selectedCountryEl : this.telInputEl;
+              focusEl.focus();
+            }
+          },
+          { signal }
+        );
+      }
     }
     //* Wire up country search input listener: typing filters the list, the clear button resets it.
     #bindSearchInputListener(signal) {
@@ -3436,8 +3459,8 @@ var _factory = (() => {
       this.#countrySelectorAbortController = null;
       this.#countrySelectorEl.classList.add(CLASSES.HIDE);
       this.#selectedCountryEl.setAttribute(ARIA.EXPANDED, "false");
+      this.#getOpenFocusEl().removeAttribute(ARIA.ACTIVE_DESCENDANT);
       if (countrySearch) {
-        this.#searchInputEl.removeAttribute(ARIA.ACTIVE_DESCENDANT);
         this.#searchInputEl.value = "";
         this.#applySearchFilter();
         if (this.#highlightedListItemEl) {
@@ -3450,6 +3473,7 @@ var _factory = (() => {
         this.#detachedCountrySelectorEl.remove();
         this.#detachedCountrySelectorEl.style.top = "";
         this.#detachedCountrySelectorEl.style.bottom = "";
+        this.#detachedCountrySelectorEl.style.height = "";
         this.#detachedCountrySelectorEl.style.paddingLeft = "";
         this.#detachedCountrySelectorEl.style.paddingRight = "";
       } else {
@@ -3515,8 +3539,7 @@ var _factory = (() => {
       if (!vv || !this.#detachedCountrySelectorEl) {
         return;
       }
-      const virtualKeyboardHeight = window.innerHeight - vv.height;
-      this.#detachedCountrySelectorEl.style.bottom = `${virtualKeyboardHeight}px`;
+      this.#detachedCountrySelectorEl.style.height = `${vv.height}px`;
     }
     // UI: Whether the country selector is currently open (visible).
     isCountrySelectorOpen() {
@@ -4986,7 +5009,7 @@ var _factory = (() => {
       attachUtils,
       startedLoadingUtils: false,
       startedLoadingAutoCountry: false,
-      version: "29.3.0",
+      version: "29.4.0",
       NUMBER_FORMAT,
       NUMBER_TYPE,
       VALIDATION_ERROR,