intl-tel-input 27.2.0 → 27.3.0

package/react/dist/IntlTelInput.js

@@ -1,4 +1,4 @@
-// dist/js/intlTelInput.mjs
+// src/js/data.ts
 var rawCountryData = [
   [
     "af",
@@ -1755,6 +1755,8 @@ for (const c of rawCountryData) {
 var iso2Set = new Set(allCountries.map((c) => c.iso2));
 var isIso2 = (val) => iso2Set.has(val);
 var data_default = allCountries;
+
+// src/js/constants.ts
 var EVENTS = {
   OPEN_COUNTRY_DROPDOWN: "open:countrydropdown",
   CLOSE_COUNTRY_DROPDOWN: "close:countrydropdown",
@@ -1879,6 +1881,8 @@ var ARIA = {
   AUTOCOMPLETE: "aria-autocomplete",
   MODAL: "aria-modal"
 };
+
+// src/js/i18n/en.ts
 var interfaceTranslations = {
   selectedCountryAriaLabel: "Change country for phone number, currently selected ${countryName} (${dialCode})",
   noCountrySelected: "Select country for phone number",
@@ -1897,6 +1901,8 @@ var interfaceTranslations = {
   }
 };
 var en_default = interfaceTranslations;
+
+// src/js/core/options.ts
 var mediaQuery = (q) => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(q).matches;
 var isNarrowViewport = () => mediaQuery(`(max-width: ${LAYOUT.NARROW_VIEWPORT_WIDTH}px)`);
 var computeDefaultUseFullscreenPopup = () => {
@@ -1960,6 +1966,8 @@ var defaults = {
   searchInputClass: "",
   //* Display the international dial code next to the selected flag.
   separateDialCode: false,
+  //* When strictMode rejects a key (etc), play a short feedback animation
+  strictRejectAnimation: false,
   //* Show flags - for both the selected country, and in the country dropdown
   showFlags: true,
   //* Only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length.
@@ -2035,6 +2043,7 @@ var validateOptions = (customOptions) => {
       case "showFlags":
       case "separateDialCode":
       case "strictMode":
+      case "strictRejectAnimation":
       case "useFullscreenPopup":
         if (typeof value !== "boolean") {
           warnOption(key, "a boolean", value);
@@ -2205,8 +2214,12 @@ var applyOptionSideEffects = (o) => {
   }
   o.i18n = { ...en_default, ...o.i18n };
 };
+
+// src/js/helpers/string.ts
 var getNumeric = (s) => s.replace(/\D/g, "");
 var normaliseString = (s = "") => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+
+// src/js/helpers/dom.ts
 var buildClassNames = (flags) => Object.keys(flags).filter((k) => Boolean(flags[k])).join(" ");
 var createEl = (tagName, attrs, container) => {
   const el = document.createElement(tagName);
@@ -2220,6 +2233,8 @@ var createEl = (tagName, attrs, container) => {
   }
   return el;
 };
+
+// src/js/core/icons.ts
 var buildSearchIcon = () => `
   <svg class="iti__search-icon-svg" width="14" height="14" viewBox="0 0 24 24" focusable="false" ${ARIA.HIDDEN}="true">
     <circle cx="11" cy="11" r="7" />
@@ -2245,6 +2260,8 @@ var buildGlobeIcon = () => `
     <path d="M508 213a240 240 0 0 0-449-87l-2 5-2 5c-8 14-13 30-17 46a65 65 0 0 1 56 4c16-10 35-19 56-27l9-3c-6 23-10 48-10 74h-16l4 6c3 4 5 8 6 13h6c0 22 3 44 8 65l2 10-25-10-4 5 12 18 9 3 6 2 8 3 9 26 1 2 16-7h1l-5-13-1-2c24 6 49 9 75 10v26l11 10 7 7v-30l1-13c22 0 44-3 65-8l10-2-21 48-1 1a317 317 0 0 1-14 23l-21 5h-2c6 16 7 33 1 50a240 240 0 0 0 211-265m-401-56-11 6c19-44 54-79 98-98-11 20-21 44-29 69-21 6-40 15-58 23m154 182v4c-29-1-57-6-81-13-7-25-12-52-13-81h94zm0-109h-94c1-29 6-56 13-81 24-7 52-12 81-13zm0-112c-22 1-44 4-65 8l-10 2 12-30 9-17 1-2a332 332 0 0 1 13-23c13-4 26-6 40-7zm187 69 6 4c4 12 6 25 6 38v1h-68c-1-26-4-51-10-74l48 20 1 1 14 8zm-14-44 10 20c-20-11-43-21-68-29-8-25-18-49-29-69 37 16 67 44 87 78M279 49h1c13 1 27 3 39 7l14 23 1 2a343 343 0 0 1 12 26l2 5 6 16c-23-6-48-9-74-10h-1zm0 87h1c29 1 56 6 81 13 7 24 12 51 12 80v1h-94zm2 207h-2v-94h95c-1 29-6 56-13 81-24 7-51 12-80 13m86 60-20 10c11-20 21-43 29-68 25-8 48-18 68-29-16 37-43 67-77 87m87-115-7 5-16 9-2 1a337 337 0 0 1-47 21c6-24 9-49 10-75h68c0 13-2 27-6 39"/>
     <path d="m261 428-2-2-22-21a40 40 0 0 0-32-11h-1a37 37 0 0 0-18 8l-1 1-4 2-2 2-5 4c-9-3-36-31-47-44s-32-45-34-55l3-2a151 151 0 0 0 11-9v-1a39 39 0 0 0 5-48l-3-3-11-19-3-4-5-7h-1l-3-3-4-3-5-2a35 35 0 0 0-16-3h-5c-4 1-14 5-24 11l-4 2-4 3-4 2c-9 8-17 17-18 27a380 380 0 0 0 212 259h3c12 0 25-10 36-21l10-12 6-11a39 39 0 0 0-8-40"/>
   </svg>`;
+
+// src/js/core/countrySearch.ts
 var getMatchedCountries = (countries, query) => {
   const normalisedQuery = normaliseString(query);
   const iso2Matches = [];
@@ -2288,6 +2305,8 @@ var findFirstCountryStartingWith = (countries, query) => {
   }
   return null;
 };
+
+// src/js/core/ui.ts
 var UI = class _UI {
   // private
   #options;
@@ -3216,6 +3235,8 @@ var UI = class _UI {
     this.#listItemByIso2.clear();
   }
 };
+
+// src/js/data/country-data.ts
 var processAllCountries = (options) => {
   const { onlyCountries, excludeCountries } = options;
   if (onlyCountries?.length) {
@@ -3321,6 +3342,8 @@ var cacheSearchTokens = (countries) => {
     c.dialCodePlus = `+${c.dialCode}`;
   }
 };
+
+// src/js/data/intl-regionless.ts
 var regionlessDialCodes = /* @__PURE__ */ new Set([
   "800",
   "808",
@@ -3335,6 +3358,8 @@ var hasRegionlessDialCode = (number) => {
   const dialCode = getNumeric(number).slice(0, 3);
   return number.startsWith("+") && regionlessDialCodes.has(dialCode);
 };
+
+// src/js/format/formatting.ts
 var stripSeparateDialCode = (fullNumber, hasValidDialCode, separateDialCode, selectedCountryData) => {
   if (!separateDialCode || !hasValidDialCode) {
     return fullNumber;
@@ -3352,6 +3377,8 @@ var formatNumberAsYouType = (fullNumber, telInputValue, utils, selectedCountryDa
   }
   return result;
 };
+
+// src/js/format/caret.ts
 var computeNewCaretPosition = (relevantChars, formattedValue, prevCaretPos, isDeleteForwards) => {
   if (prevCaretPos === 0 && !isDeleteForwards) {
     return 0;
@@ -3370,6 +3397,8 @@ var computeNewCaretPosition = (relevantChars, formattedValue, prevCaretPos, isDe
   }
   return formattedValue.length;
 };
+
+// src/js/data/nanp-regionless.ts
 var regionlessNanpAreaCodes = /* @__PURE__ */ new Set([
   "800",
   "822",
@@ -3397,6 +3426,8 @@ var isRegionlessNanp = (number) => {
   }
   return false;
 };
+
+// src/js/core/numerals.ts
 var Numerals = class {
   #userNumeralSet;
   constructor(initialValue) {
@@ -3443,6 +3474,8 @@ var Numerals = class {
     return !this.#userNumeralSet || this.#userNumeralSet === "ascii";
   }
 };
+
+// src/js/intlTelInput.ts
 var nextId = 0;
 var ensureUtils = (methodName) => {
   if (!intlTelInput.utils) {
@@ -3499,9 +3532,7 @@ var Iti = class _Iti {
     this.#numerals = new Numerals(input.value);
     this.promise = this.#createInitPromise(this.#options);
     this.#countries = processAllCountries(this.#options);
-    const { dialCodes, dialCodeMaxLength, dialCodeToIso2Map } = processDialCodes(
-      this.#countries
-    );
+    const { dialCodes, dialCodeMaxLength, dialCodeToIso2Map } = processDialCodes(this.#countries);
     this.#dialCodes = dialCodes;
     this.#dialCodeMaxLength = dialCodeMaxLength;
     this.#dialCodeToIso2Map = dialCodeToIso2Map;
@@ -3683,6 +3714,7 @@ var Iti = class _Iti {
   #handleAndroidStrictReject(inputValue, rejectedInput) {
     const newCaretPos = this.#removeJustTypedChar(inputValue);
     this.#ui.telInputEl.setSelectionRange(newCaretPos, newCaretPos);
+    this.#playStrictRejectAnimation();
     this.#dispatchEvent(EVENTS.STRICT_REJECT, {
       source: "key",
       rejectedInput,
@@ -3742,7 +3774,13 @@ var Iti = class _Iti {
   //* On input event: (1) Update selected country, (2) Format-as-you-type.
   //* Note that this fires AFTER the input is updated.
   #handleInputEvent = (e) => {
-    const { strictMode, formatAsYouType, separateDialCode, allowDropdown, countrySearch } = this.#options;
+    const {
+      strictMode,
+      formatAsYouType,
+      separateDialCode,
+      allowDropdown,
+      countrySearch
+    } = this.#options;
     const detail = e?.detail;
     if (detail?.["isCountryChange"]) {
       return;
@@ -3824,6 +3862,7 @@ var Iti = class _Iti {
     const newCountry = this.#resolveCountryChangeFromNumber(newFullNumber);
     const isChangingDialCode = newCountry !== null;
     if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
+      this.#playStrictRejectAnimation();
       this.#dispatchEvent(EVENTS.STRICT_REJECT, {
         source: "key",
         rejectedInput: e.key,
@@ -3866,6 +3905,7 @@ var Iti = class _Iti {
         coreNumber = intlTelInput.utils.getCoreNumber(newValue, iso2);
       }
       if (!coreNumber) {
+        this.#playStrictRejectAnimation();
         this.#dispatchEvent(EVENTS.STRICT_REJECT, {
           source: "paste",
           rejectedInput: pastedRaw,
@@ -3879,6 +3919,7 @@ var Iti = class _Iti {
           newValue = newValue.slice(0, newValue.length - trimLength);
           rejectReason = "max-length";
         } else {
+          this.#playStrictRejectAnimation();
           this.#dispatchEvent(EVENTS.STRICT_REJECT, {
             source: "paste",
             rejectedInput: pastedRaw,
@@ -3893,6 +3934,9 @@ var Iti = class _Iti {
     input.setSelectionRange(caretPos, caretPos);
     input.dispatchEvent(new InputEvent("input", { bubbles: true }));
     if (rejectReason) {
+      if (pasted.length > 0 && sanitised.length === 0) {
+        this.#playStrictRejectAnimation();
+      }
       this.#dispatchEvent(EVENTS.STRICT_REJECT, {
         source: "paste",
         rejectedInput: pastedRaw,
@@ -3905,6 +3949,21 @@ var Iti = class _Iti {
     const max = Number(this.#ui.telInputEl.getAttribute("maxlength"));
     return max && number.length > max ? number.substring(0, max) : number;
   }
+  //* Play the strict-reject animation (shake, or background-colour flash under prefers-reduced-motion) on the wrapper.
+  //* Called when strictMode rejects the whole input (keystroke, or whole paste).
+  //* Uses the wrapper (not the input) so any separateDialCode / country button move together with the input.
+  #playStrictRejectAnimation() {
+    if (!this.#options.strictRejectAnimation) {
+      return;
+    }
+    const wrapperEl = this.#ui.telInputEl.parentElement;
+    if (!wrapperEl) {
+      return;
+    }
+    wrapperEl.classList.remove("iti__strict-reject-animation");
+    void wrapperEl.offsetWidth;
+    wrapperEl.classList.add("iti__strict-reject-animation");
+  }
   //* Trigger a custom event on the input (typed via ItiEventMap).
   #dispatchEvent(name, detailProps = {}) {
     const e = new CustomEvent(name, {
@@ -4541,7 +4600,7 @@ var intlTelInput = Object.assign(
     attachUtils,
     startedLoadingUtils: false,
     startedLoadingAutoCountry: false,
-    version: "27.2.0"
+    version: "27.3.0"
   }
 );
 var intlTelInput_default = intlTelInput;
@@ -4576,6 +4635,7 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
 }, ref) {
   const inputRef = useRef(null);
   const itiRef = useRef(null);
+  const pluginInputClassesRef = useRef("");
   const lastEmittedNumberRef = useRef(void 0);
   const lastEmittedCountryRef = useRef(void 0);
   const lastEmittedValidityRef = useRef(void 0);
@@ -4642,6 +4702,7 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
       return void 0;
     }
     itiRef.current = intlTelInput_default(inputEl, initOptions);
+    pluginInputClassesRef.current = inputEl.className;
     const handleOpen = () => onOpenCountryDropdownRef.current?.();
     const handleClose = () => onCloseCountryDropdownRef.current?.();
     const handleStrictReject = (e) => {
@@ -4704,6 +4765,8 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   for (const [key, val] of Object.entries(inputProps)) {
     if (ignoredInputProps.has(key)) {
       warnInputProp(key);
+    } else if (key === "className") {
+      sanitizedInputProps[key] = `${pluginInputClassesRef.current} ${val}`;
     } else {
       sanitizedInputProps[key] = val;
     }