@intl-tel-input/react 29.4.0 → 29.5.0

package/dist/IntlTelInput.js

@@ -1772,6 +1772,7 @@ var ITI_SLOTS = [
   "selectedDialCode",
   "countrySelector",
   "countrySelectorContainer",
+  "closeButton",
   "searchWrapper",
   "searchIcon",
   "searchInput",
@@ -1926,6 +1927,7 @@ var interfaceTranslations = {
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
   clearSearchAriaLabel: "Clear search",
+  closeCountrySelectorAriaLabel: "Close",
   searchEmptyState: "No results found",
   searchSummaryAria(count) {
     if (count === 0) {
@@ -2351,6 +2353,11 @@ var buildClearIcon = (id) => {
     ]]
   );
 };
+var buildCloseIcon = () => buildSvg(
+  ["svg", { class: "iti__close-button-svg", width: 20, height: 20, viewBox: "0 0 16 16", focusable: "false", [ARIA.HIDDEN]: "true" }, [
+    ["path", { d: "M3 3 L13 13 M13 3 L3 13" }]
+  ]]
+);
 var buildCheckIcon = () => buildSvg(
   ["svg", { class: "iti__country-check-svg", width: 14, height: 14, viewBox: "0 0 16 16", fill: "currentColor", focusable: "false", [ARIA.HIDDEN]: "true" }, [
     ["path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" }]
@@ -2524,6 +2531,7 @@ var UI = class {
   #selectedDialCodeEl;
   #arrowEl;
   #countrySelectorEl;
+  #closeButtonEl;
   #searchIconEl;
   #searchInputEl;
   #searchClearButtonEl;
@@ -2723,6 +2731,9 @@ var UI = class {
     if (this.#isRTL) {
       this.#countrySelectorEl.setAttribute("dir", "rtl");
     }
+    if (isFullscreen) {
+      this.#buildCloseButton();
+    }
     if (countrySearch) {
       this.#buildSearchUI();
     }
@@ -2771,6 +2782,21 @@ var UI = class {
     }
     return null;
   }
+  //* Fullscreen popup only: a close button, as the backdrop (tap to close) is not discoverable, and is unreachable for screen reader users.
+  //* It lives inside the country selector (role=dialog, aria-modal) so assistive tech can reach it, but the CSS positions it out in the corner of the backdrop.
+  #buildCloseButton() {
+    this.#closeButtonEl = createEl(
+      "button",
+      {
+        type: "button",
+        class: this.#withSlotClass("closeButton", "iti__close-button"),
+        [ARIA.LABEL]: this.#options.uiTranslations.closeCountrySelectorAriaLabel,
+        tabindex: "-1"
+      },
+      this.#countrySelectorEl
+    );
+    this.#closeButtonEl.appendChild(buildCloseIcon());
+  }
   #buildSearchUI() {
     const { uiTranslations, searchInputClass } = this.#options;
     const searchWrapper = createEl(
@@ -3216,7 +3242,7 @@ var UI = class {
     this.#bindCountrySelectorOpenListeners(onSelect, onClose);
   }
   //* Wire up all listeners needed while the country selector is open: list-item hover (highlight),
-  //* list-item click & enter key (select), click-off & escape (close), search input (filter),
+  //* list-item click & enter key (select), click-off, close button & escape (close), search input (filter),
   //* (when countrySearch disabled) typed-char hidden search, and (when the country selector is in an
   //* external container) update (fixed) position on scroll/resize.
   #bindCountrySelectorOpenListeners(onSelect, onClose) {
@@ -3227,6 +3253,14 @@ var UI = class {
       this.#bindOutsideClickToClose(signal, onClose);
     }
     this.#bindCountrySelectorKeydownListener(signal, onSelect, onClose);
+    this.#closeButtonEl?.addEventListener(
+      "click",
+      () => {
+        onClose();
+        this.#selectedCountryEl.focus();
+      },
+      { signal }
+    );
     if (this.#options.countrySearch) {
       this.#bindSearchInputListener(signal);
     }
@@ -3442,7 +3476,7 @@ var UI = class {
       this.#detachedCountrySelectorEl.remove();
       this.#detachedCountrySelectorEl.style.top = "";
       this.#detachedCountrySelectorEl.style.bottom = "";
-      this.#detachedCountrySelectorEl.style.height = "";
+      this.#detachedCountrySelectorEl.style.removeProperty("--iti-virtual-keyboard-height");
       this.#detachedCountrySelectorEl.style.paddingLeft = "";
       this.#detachedCountrySelectorEl.style.paddingRight = "";
     } else {
@@ -3501,14 +3535,16 @@ var UI = class {
     this.telInputEl.style.anchorName = existing && existing !== "none" ? `${existing}, ${anchorName}` : anchorName;
     this.#detachedCountrySelectorEl.style.positionAnchor = anchorName;
   }
-  // Adjust the fullscreen popup dimensions to match the visual viewport,
-  // so it stays above the virtual keyboard on mobile devices.
+  // Tell the CSS how much of the fullscreen popup is covered by the virtual keyboard, so it can fit the
+  // country selector above it, while the popup itself (the dark backdrop) stays fullscreen behind the keyboard.
   #adjustFullscreenPopupToViewport() {
     const vv = window.visualViewport;
-    if (!vv || !this.#detachedCountrySelectorEl) {
+    const popup = this.#detachedCountrySelectorEl;
+    if (!vv || !popup) {
       return;
     }
-    this.#detachedCountrySelectorEl.style.height = `${vv.height}px`;
+    const virtualKeyboardHeight = Math.max(0, popup.offsetHeight - vv.height);
+    popup.style.setProperty("--iti-virtual-keyboard-height", `${virtualKeyboardHeight}px`);
   }
   // UI: Whether the country selector is currently open (visible).
   isCountrySelectorOpen() {
@@ -4978,7 +5014,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "29.4.0",
+    version: "29.5.0",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR,

package/dist/IntlTelInputWithUtils.js

@@ -1772,6 +1772,7 @@ var ITI_SLOTS = [
   "selectedDialCode",
   "countrySelector",
   "countrySelectorContainer",
+  "closeButton",
   "searchWrapper",
   "searchIcon",
   "searchInput",
@@ -1926,6 +1927,7 @@ var interfaceTranslations = {
   countryListAriaLabel: "List of countries",
   searchPlaceholder: "Search",
   clearSearchAriaLabel: "Clear search",
+  closeCountrySelectorAriaLabel: "Close",
   searchEmptyState: "No results found",
   searchSummaryAria(count) {
     if (count === 0) {
@@ -2351,6 +2353,11 @@ var buildClearIcon = (id) => {
     ]]
   );
 };
+var buildCloseIcon = () => buildSvg(
+  ["svg", { class: "iti__close-button-svg", width: 20, height: 20, viewBox: "0 0 16 16", focusable: "false", [ARIA.HIDDEN]: "true" }, [
+    ["path", { d: "M3 3 L13 13 M13 3 L3 13" }]
+  ]]
+);
 var buildCheckIcon = () => buildSvg(
   ["svg", { class: "iti__country-check-svg", width: 14, height: 14, viewBox: "0 0 16 16", fill: "currentColor", focusable: "false", [ARIA.HIDDEN]: "true" }, [
     ["path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" }]
@@ -2524,6 +2531,7 @@ var UI = class {
   #selectedDialCodeEl;
   #arrowEl;
   #countrySelectorEl;
+  #closeButtonEl;
   #searchIconEl;
   #searchInputEl;
   #searchClearButtonEl;
@@ -2723,6 +2731,9 @@ var UI = class {
     if (this.#isRTL) {
       this.#countrySelectorEl.setAttribute("dir", "rtl");
     }
+    if (isFullscreen) {
+      this.#buildCloseButton();
+    }
     if (countrySearch) {
       this.#buildSearchUI();
     }
@@ -2771,6 +2782,21 @@ var UI = class {
     }
     return null;
   }
+  //* Fullscreen popup only: a close button, as the backdrop (tap to close) is not discoverable, and is unreachable for screen reader users.
+  //* It lives inside the country selector (role=dialog, aria-modal) so assistive tech can reach it, but the CSS positions it out in the corner of the backdrop.
+  #buildCloseButton() {
+    this.#closeButtonEl = createEl(
+      "button",
+      {
+        type: "button",
+        class: this.#withSlotClass("closeButton", "iti__close-button"),
+        [ARIA.LABEL]: this.#options.uiTranslations.closeCountrySelectorAriaLabel,
+        tabindex: "-1"
+      },
+      this.#countrySelectorEl
+    );
+    this.#closeButtonEl.appendChild(buildCloseIcon());
+  }
   #buildSearchUI() {
     const { uiTranslations, searchInputClass } = this.#options;
     const searchWrapper = createEl(
@@ -3216,7 +3242,7 @@ var UI = class {
     this.#bindCountrySelectorOpenListeners(onSelect, onClose);
   }
   //* Wire up all listeners needed while the country selector is open: list-item hover (highlight),
-  //* list-item click & enter key (select), click-off & escape (close), search input (filter),
+  //* list-item click & enter key (select), click-off, close button & escape (close), search input (filter),
   //* (when countrySearch disabled) typed-char hidden search, and (when the country selector is in an
   //* external container) update (fixed) position on scroll/resize.
   #bindCountrySelectorOpenListeners(onSelect, onClose) {
@@ -3227,6 +3253,14 @@ var UI = class {
       this.#bindOutsideClickToClose(signal, onClose);
     }
     this.#bindCountrySelectorKeydownListener(signal, onSelect, onClose);
+    this.#closeButtonEl?.addEventListener(
+      "click",
+      () => {
+        onClose();
+        this.#selectedCountryEl.focus();
+      },
+      { signal }
+    );
     if (this.#options.countrySearch) {
       this.#bindSearchInputListener(signal);
     }
@@ -3442,7 +3476,7 @@ var UI = class {
       this.#detachedCountrySelectorEl.remove();
       this.#detachedCountrySelectorEl.style.top = "";
       this.#detachedCountrySelectorEl.style.bottom = "";
-      this.#detachedCountrySelectorEl.style.height = "";
+      this.#detachedCountrySelectorEl.style.removeProperty("--iti-virtual-keyboard-height");
       this.#detachedCountrySelectorEl.style.paddingLeft = "";
       this.#detachedCountrySelectorEl.style.paddingRight = "";
     } else {
@@ -3501,14 +3535,16 @@ var UI = class {
     this.telInputEl.style.anchorName = existing && existing !== "none" ? `${existing}, ${anchorName}` : anchorName;
     this.#detachedCountrySelectorEl.style.positionAnchor = anchorName;
   }
-  // Adjust the fullscreen popup dimensions to match the visual viewport,
-  // so it stays above the virtual keyboard on mobile devices.
+  // Tell the CSS how much of the fullscreen popup is covered by the virtual keyboard, so it can fit the
+  // country selector above it, while the popup itself (the dark backdrop) stays fullscreen behind the keyboard.
   #adjustFullscreenPopupToViewport() {
     const vv = window.visualViewport;
-    if (!vv || !this.#detachedCountrySelectorEl) {
+    const popup = this.#detachedCountrySelectorEl;
+    if (!vv || !popup) {
       return;
     }
-    this.#detachedCountrySelectorEl.style.height = `${vv.height}px`;
+    const virtualKeyboardHeight = Math.max(0, popup.offsetHeight - vv.height);
+    popup.style.setProperty("--iti-virtual-keyboard-height", `${virtualKeyboardHeight}px`);
   }
   // UI: Whether the country selector is currently open (visible).
   isCountrySelectorOpen() {
@@ -4978,7 +5014,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "29.4.0",
+    version: "29.5.0",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intl-tel-input/react",
-  "version": "29.4.0",
+  "version": "29.5.0",
   "description": "A React component for intl-tel-input, for entering, formatting, and validating international telephone numbers",
   "type": "module",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "README.md"
   ],
   "dependencies": {
-    "intl-tel-input": "^29.4.0"
+    "intl-tel-input": "^29.5.0"
   },
   "peerDependencies": {
     "react": ">=18",