intl-tel-input 29.1.1 → 29.1.3

package/dist/js/intlTelInput.mjs

@@ -13,8 +13,8 @@ var rawCountryData = [
     // Åland Islands (AKA Aland Islands)
     "358",
     1,
-    ["18", "4"],
-    // (4 is a mobile range shared with FI)
+    ["18", "4", "50"],
+    // (4 and 50 are mobile ranges shared with FI)
     // NOTE: https://en.wikipedia.org/wiki/Telephone%20numbers%20in%20%C3%85land says some 4XXX ranges (e.g. 4570) are specific to AX, but LPN doesn't respect this (https://libphonenumber.appspot.com/phonenumberparser?number=%2B3584570123456 says region=FI) so we won't either. Also it's too much of a maintenance burden to keep track of. Keep the 4 area code range here so that if the user selects AX and types this kind of number, we wont change the flag to FI. Whereas if they type a FI-only range then we will.
     "0"
   ],
@@ -561,8 +561,8 @@ var rawCountryData = [
     // Finland
     "358",
     0,
-    ["4"],
-    // (mobile range shared with AX)
+    ["4", "50"],
+    // (mobile ranges shared with AX)
     "0"
   ],
   [
@@ -669,7 +669,8 @@ var rawCountryData = [
     // Guernsey
     "44",
     1,
-    ["1481", "7781", "7839", "7911"],
+    //* Only 79111 and 79117 belong to GG - the rest of 7911 is GB (e.g. 79110).
+    ["1481", "7781", "7839", "79111", "79117"],
     "0"
   ],
   [
@@ -800,7 +801,8 @@ var rawCountryData = [
     // Jersey
     "44",
     3,
-    ["1534", "7509", "7700", "7797", "7829", "7937"],
+    //* Only 77003/77007/77008 belong to JE - the rest of 7700 is GB (e.g. 77001).
+    ["1534", "7509", "77003", "77007", "77008", "7797", "7829", "7937"],
     "0"
   ],
   [
@@ -995,7 +997,7 @@ var rawCountryData = [
     // Mayotte
     "262",
     1,
-    ["269", "639"],
+    ["2689", "269", "639", "7093"],
     "0"
   ],
   [
@@ -2455,7 +2457,7 @@ var Numerals = class _Numerals {
 
 // packages/core/src/js/core/ui.ts
 var supportsCssAnchor = typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("anchor-name: --x");
-var UI = class _UI {
+var UI = class {
   // private
   #options;
   #id;
@@ -2465,6 +2467,7 @@ var UI = class _UI {
   #searchTokens;
   #searchDebounceTimer = null;
   #inlineDropdownHeight;
+  #cssAnchorPositioningDone = false;
   #countryContainerEl;
   #selectedCountryEl;
   #selectedFlagEl;
@@ -2657,16 +2660,6 @@ var UI = class _UI {
     if (countrySearch) {
       this.#updateSearchResultsA11yText();
     }
-    if (!isFullscreen) {
-      const { height, width } = this.#getHiddenInlineDropdownSize();
-      this.#inlineDropdownHeight = height;
-      if (countrySearch) {
-        this.#countrySelectorEl.style.height = `${height}px`;
-        if (!matchDropdownWidth && width > 0) {
-          this.#countrySelectorEl.style.width = `${width}px`;
-        }
-      }
-    }
     if (detachedParent) {
       const wrapperClasses = buildClassNames({
         iti: true,
@@ -2677,9 +2670,6 @@ var UI = class _UI {
       });
       this.#detachedCountrySelectorEl = createEl("div", { class: wrapperClasses });
       this.#detachedCountrySelectorEl.appendChild(this.#countrySelectorEl);
-      if (!isFullscreen) {
-        this.#setupCssAnchorPositioning();
-      }
     } else {
       this.#countryContainerEl.appendChild(this.#countrySelectorEl);
     }
@@ -2852,24 +2842,16 @@ var UI = class _UI {
     });
     this.#resizeObserver.observe(this.#selectedCountryEl);
   }
-  static #getBody() {
-    let body;
-    try {
-      body = window.top.document.body;
-    } catch (e) {
-      body = document.body;
-    }
-    return body;
-  }
   //* When input is in a hidden container during init, we cannot calculate the selected country width.
   //* Fix: clone the markup, make it invisible, add it to the end of the DOM, and then measure it's width.
   //* To get the right styling to apply, all we need is a shallow clone of the container,
   //* and then to inject a deep clone of the selectedCountryEl element.
+  //* Measures in the LOCAL document.body: appending to the local body escapes any hidden ancestor container, and the input's own frame is where intl-tel-input's styles live (so the clone lays out correctly). We deliberately do NOT escape to window.top: that only measures correctly in the rare case where the top frame also loads the library's styles, and measures wrong when it doesn't (e.g. a same-origin iframe whose outer frame lacks the styles — cf. #2178). If the local frame itself isn't laid out yet (e.g. an iframe hidden during init), this returns 0 and the caller falls back to a sane constant; the ResizeObserver in #observeSelectedCountryResize then corrects the padding once the input becomes visible.
   #getHiddenSelectedCountryWidth() {
     if (!this.telInputEl.parentNode) {
       return 0;
     }
-    const body = _UI.#getBody();
+    const body = document.body;
     const containerClone = this.telInputEl.parentNode.cloneNode(
       false
     );
@@ -2885,21 +2867,43 @@ var UI = class _UI {
     body.removeChild(containerClone);
     return width;
   }
-  // Get the dropdown size (before it is added to the DOM)
+  //* Measure the inline dropdown size once, lazily, on first open — see #getHiddenInlineDropdownSize for why measuring forces a reflow. Memoised via #inlineDropdownHeight so subsequent opens are free.
+  //* Captured for two uses: (1) on open, decide whether to position the dropdown above or below the input; (2) when countrySearch is enabled, pin the dropdown height (and, when matchDropdownWidth is disabled, width) so it doesn't jump around as the country list is filtered.
+  #ensureInlineDropdownSizeMeasured() {
+    if (this.#inlineDropdownHeight !== void 0) {
+      return;
+    }
+    const { countrySearch, matchDropdownWidth } = this.#options;
+    const { height, width } = this.#getHiddenInlineDropdownSize();
+    this.#inlineDropdownHeight = height;
+    if (countrySearch) {
+      this.#countrySelectorEl.style.height = `${height}px`;
+      if (!matchDropdownWidth && width > 0) {
+        this.#countrySelectorEl.style.width = `${width}px`;
+      }
+    }
+  }
+  // Measure the dropdown by moving it into a temporary hidden container on the body (it needs the right ancestor classes to lay out correctly). Restores it to its original position afterwards — a no-op during init (when it is still detached) but required when called lazily on first open (when it is already inserted).
+  //* Deliberately measures in the LOCAL document.body (not window.top): this runs on first open, when the input's own frame is visibly rendered and styled. Escaping to the top frame breaks when the input is inside a same-origin iframe whose outer frame lacks intl-tel-input's styles (e.g. Storybook), as the dropdown would then be measured unstyled and come out far too tall (issue #2178).
   #getHiddenInlineDropdownSize() {
-    const body = _UI.#getBody();
-    this.#countrySelectorEl.classList.remove(CLASSES.HIDE);
+    const body = document.body;
+    const selectorEl = this.#countrySelectorEl;
+    const originalParent = selectorEl.parentNode;
+    const originalNextSibling = selectorEl.nextSibling;
+    selectorEl.classList.remove(CLASSES.HIDE);
     const tempContainer = createEl("div", {
       class: "iti iti--inline-country-selector"
     });
-    tempContainer.appendChild(this.#countrySelectorEl);
+    tempContainer.appendChild(selectorEl);
     tempContainer.style.visibility = "hidden";
     body.appendChild(tempContainer);
-    const height = this.#countrySelectorEl.offsetHeight;
-    const width = this.#countrySelectorEl.offsetWidth;
+    const height = selectorEl.offsetHeight;
+    const width = selectorEl.offsetWidth;
     body.removeChild(tempContainer);
-    tempContainer.style.visibility = "";
-    this.#countrySelectorEl.classList.add(CLASSES.HIDE);
+    selectorEl.classList.add(CLASSES.HIDE);
+    if (originalParent) {
+      originalParent.insertBefore(selectorEl, originalNextSibling);
+    }
     return {
       height: height > 0 ? height : LAYOUT.FALLBACK_DROPDOWN_HEIGHT,
       width
@@ -3063,6 +3067,9 @@ var UI = class _UI {
   openCountrySelector(onSelect, onClose) {
     const { countrySearch, dropdownAlwaysOpen } = this.#options;
     this.#countrySelectorAbortController = new AbortController();
+    if (this.#options.countrySelectorMode !== COUNTRY_SELECTOR_MODE.FULLSCREEN) {
+      this.#ensureInlineDropdownSizeMeasured();
+    }
     this.ensureDropdownWidthSet();
     if (this.#detachedCountrySelectorEl) {
       this.#injectAndPositionDetachedCountrySelector();
@@ -3335,7 +3342,10 @@ var UI = class _UI {
         this.#detachedCountrySelectorEl.style.paddingLeft = `${inputPos.left}px`;
         this.#detachedCountrySelectorEl.style.paddingRight = `${window.innerWidth - inputPos.right}px`;
       }
-    } else if (!supportsCssAnchor) {
+    } else {
+      this.#setupCssAnchorPositioning();
+    }
+    if (!isFullscreen && !supportsCssAnchor) {
       const inputPos = this.telInputEl.getBoundingClientRect();
       this.#detachedCountrySelectorEl.style.left = `${inputPos.left}px`;
       if (this.#shouldPositionDropdownBelowInput()) {
@@ -3348,13 +3358,17 @@ var UI = class _UI {
     detachedParent.appendChild(this.#detachedCountrySelectorEl);
   }
   //* Wire up CSS Anchor Positioning between the input and the detached country selector using a
-  //* unique anchor name per instance. Called once at build time — the matching styles in
+  //* unique anchor name per instance. Called lazily on first open (memoised) — the matching styles in
   //* intlTelInput.css only take effect in browsers that support anchor(); elsewhere these
   //* properties are inert. We append our name to any existing anchor-name (read via
   //* getComputedStyle so we pick up CSS-defined values), so consumer-set anchors on the input
   //* are preserved. Caveat: this snapshots the consumer's value once — if they later change
   //* anchor-name via CSS (e.g. a class swap), our inline write will shadow the change.
   #setupCssAnchorPositioning() {
+    if (this.#cssAnchorPositioningDone) {
+      return;
+    }
+    this.#cssAnchorPositioningDone = true;
     const anchorName = `--iti-anchor-${this.#id}`;
     const existing = getComputedStyle(this.telInputEl).anchorName;
     this.telInputEl.style.anchorName = existing && existing !== "none" ? `${existing}, ${anchorName}` : anchorName;
@@ -4829,7 +4843,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "29.1.1",
+    version: "29.1.3",
     NUMBER_FORMAT,
     NUMBER_TYPE,
     VALIDATION_ERROR,