intl-tel-input 24.5.1 → 24.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "24.5.1",
+  "version": "24.6.0",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",
@@ -24,6 +24,7 @@
   "license": "MIT",
   "author": "Jack O'Connor (http://jackocnr.com)",
   "devDependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.25.7",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.2.74",
@@ -31,6 +32,7 @@
     "@typescript-eslint/eslint-plugin": "^8.1.0",
     "@typescript-eslint/parser": "^8.1.0",
     "@vitejs/plugin-vue": "^5.1.2",
+    "babel-plugin-add-module-exports": "^1.0.4",
     "cspell": "^8.6.1",
     "esbuild": "^0.23.0",
     "eslint": "^8.57.0",
@@ -46,6 +48,7 @@
     "grunt": "^1.6.1",
     "grunt-bump": "^0.8.0",
     "grunt-cli": "^1.2.0",
+    "grunt-contrib-connect": "^5.0.0",
     "grunt-contrib-cssmin": "^5.0.0",
     "grunt-contrib-jasmine": "^4.0.0",
     "grunt-contrib-watch": "^1.1.0",
@@ -98,7 +101,8 @@
     "build:img": "grunt img",
     "build:react": "grunt react",
     "build:vue": "grunt vue",
-    "vue:demo": "vite --config vue/demo/validation/vite.config.js"
+    "vue:demo": "vite --config vue/demo/validation/vite.config.js",
+    "server": "grunt test:interactive"
   },
   "style": "build/css/intlTelInput.css",
   "main": "./build/js/intlTelInput.js",
@@ -150,11 +154,5 @@
         "react/build/IntlTelInput.d.ts"
       ]
     }
-  },
-  "jest": {
-    "moduleDirectories": [
-      "node_modules",
-      "build/js"
-    ]
   }
 }

package/react/README.md

@@ -28,7 +28,7 @@ import "intl-tel-input/styles";
 
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/validation/ValidationApp.tsx) for a more fleshed-out example of how to handle validation.
 
-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/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `utilsScript` 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 `utilsScript` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@24.5.1/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/reactWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `utilsScript` 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 `utilsScript` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@24.6.0/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput React component.

package/react/build/IntlTelInput.cjs

@@ -1659,6 +1659,8 @@ var defaults = {
   i18n: {},
   //* Initial country.
   initialCountry: "",
+  //* Specify the path to the libphonenumber script to enable validation/formatting.
+  loadUtilsOnInit: "",
   //* National vs international formatting for numbers e.g. placeholders and displaying existing numbers.
   nationalMode: true,
   //* Display only these countries.
@@ -1679,7 +1681,7 @@ var defaults = {
       navigator.userAgent
     ) || window.innerWidth <= 500
   ) : false,
-  //* Specify the path to the libphonenumber script to enable validation/formatting.
+  //* Deprecated! Use `loadUtilsOnInit` instead.
   utilsScript: "",
   //* The number type to enforce during validation.
   validationNumberType: "MOBILE"
@@ -1741,9 +1743,9 @@ var createEl = (name, attrs, container) => {
   }
   return el;
 };
-var forEachInstance = (method) => {
+var forEachInstance = (method, ...args) => {
   const { instances } = intlTelInput;
-  Object.values(instances).forEach((instance) => instance[method]());
+  Object.values(instances).forEach((instance) => instance[method](...args));
 };
 var Iti = class {
   constructor(input, customOptions = {}) {
@@ -2191,14 +2193,21 @@ var Iti = class {
   }
   //* Init many requests: utils script / geo ip lookup.
   _initRequests() {
-    const { utilsScript, initialCountry, geoIpLookup } = this.options;
-    if (utilsScript && !intlTelInput.utils) {
+    let { loadUtilsOnInit, utilsScript, initialCountry, geoIpLookup } = this.options;
+    if (!loadUtilsOnInit && utilsScript) {
+      console.warn("intl-tel-input: The `utilsScript` option is deprecated and will be removed in a future release! Please use the `loadUtilsOnInit` option instead.");
+      loadUtilsOnInit = utilsScript;
+    }
+    if (loadUtilsOnInit && !intlTelInput.utils) {
+      this._handlePageLoad = () => {
+        window.removeEventListener("load", this._handlePageLoad);
+        intlTelInput.loadUtils(loadUtilsOnInit)?.catch(() => {
+        });
+      };
       if (intlTelInput.documentReady()) {
-        intlTelInput.loadUtils(utilsScript);
+        this._handlePageLoad();
       } else {
-        window.addEventListener("load", () => {
-          intlTelInput.loadUtils(utilsScript);
-        });
+        window.addEventListener("load", this._handlePageLoad);
       }
     } else {
       this.resolveUtilsScriptPromise();
@@ -2295,13 +2304,17 @@ var Iti = class {
             const isInitialPlus = !alreadyHasPlus && this.telInput.selectionStart === 0 && e.key === "+";
             const isNumeric = /^[0-9]$/.test(e.key);
             const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
-            const fullNumber = this._getFullNumber();
-            const coreNumber = intlTelInput.utils.getCoreNumber(fullNumber, this.selectedCountryData.iso2);
-            const hasReachedMaxLength = this.maxCoreNumberLength && coreNumber.length >= this.maxCoreNumberLength;
-            const selectedText = value.substring(this.telInput.selectionStart, this.telInput.selectionEnd);
-            const hasSelectedDigit = /\d/.test(selectedText);
-            const isChangingDialCode = isInitialPlus ? true : this._isChangingDialCode(e.key);
-            if (!isAllowedChar || hasReachedMaxLength && !hasSelectedDigit && !isChangingDialCode) {
+            const newValue = value.slice(0, this.telInput.selectionStart) + e.key + value.slice(this.telInput.selectionEnd);
+            const newFullNumber = this._getFullNumber(newValue);
+            const coreNumber = intlTelInput.utils.getCoreNumber(newFullNumber, this.selectedCountryData.iso2);
+            const hasExceededMaxLength = this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength;
+            let isChangingDialCode = false;
+            if (alreadyHasPlus) {
+              const currentCountry = this.selectedCountryData.iso2;
+              const newCountry = this._getCountryFromNumber(newFullNumber);
+              isChangingDialCode = newCountry !== currentCountry;
+            }
+            if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
               e.preventDefault();
             }
           }
@@ -2310,17 +2323,6 @@ var Iti = class {
       this.telInput.addEventListener("keydown", this._handleKeydownEvent);
     }
   }
-  _isChangingDialCode(char) {
-    const value = this.telInput.value;
-    if (value.charAt(0) === "+") {
-      const currentCountry = this.selectedCountryData.iso2;
-      const newValue = value.slice(0, this.telInput.selectionStart) + char + value.slice(this.telInput.selectionEnd);
-      const newFullNumber = this._getFullNumber(newValue);
-      const newCountry = this._getCountryFromNumber(newFullNumber);
-      return newCountry !== currentCountry;
-    }
-    return false;
-  }
   //* Adhere to the input's maxlength attr.
   _cap(number) {
     const max = parseInt(this.telInput.getAttribute("maxlength") || "", 10);
@@ -2664,22 +2666,26 @@ var Iti = class {
   //* Update the maximum valid number length for the currently selected country.
   _updateMaxLength() {
     const { strictMode, placeholderNumberType, validationNumberType } = this.options;
+    const { iso2 } = this.selectedCountryData;
     if (strictMode && intlTelInput.utils) {
-      if (this.selectedCountryData.iso2) {
+      if (iso2) {
         const numberType = intlTelInput.utils.numberType[placeholderNumberType];
         let exampleNumber = intlTelInput.utils.getExampleNumber(
-          this.selectedCountryData.iso2,
+          iso2,
           false,
           numberType,
           true
         );
         let validNumber = exampleNumber;
-        while (intlTelInput.utils.isPossibleNumber(exampleNumber, this.selectedCountryData.iso2, validationNumberType)) {
+        while (intlTelInput.utils.isPossibleNumber(exampleNumber, iso2, validationNumberType)) {
           validNumber = exampleNumber;
           exampleNumber += "0";
         }
-        const coreNumber = intlTelInput.utils.getCoreNumber(validNumber, this.selectedCountryData.iso2);
+        const coreNumber = intlTelInput.utils.getCoreNumber(validNumber, iso2);
         this.maxCoreNumberLength = coreNumber.length;
+        if (iso2 === "by") {
+          this.maxCoreNumberLength = coreNumber.length + 1;
+        }
       } else {
         this.maxCoreNumberLength = null;
       }
@@ -2786,6 +2792,9 @@ var Iti = class {
         this.dropdown.parentNode.removeChild(this.dropdown);
       }
     }
+    if (this._handlePageLoad) {
+      window.removeEventListener("load", this._handlePageLoad);
+    }
     this._trigger("close:countrydropdown");
   }
   //* Check if an element is visible within it's container, else scroll until it is.
@@ -3074,22 +3083,43 @@ var Iti = class {
     }
   }
 };
-var loadUtils = (path) => {
+var loadUtils = (source) => {
   if (!intlTelInput.utils && !intlTelInput.startedLoadingUtilsScript) {
-    intlTelInput.startedLoadingUtilsScript = true;
-    return new Promise((resolve, reject) => {
-      import(
+    let loadCall;
+    if (typeof source === "string") {
+      loadCall = import(
         /* webpackIgnore: true */
         /* @vite-ignore */
-        path
-      ).then(({ default: utils }) => {
-        intlTelInput.utils = utils;
-        forEachInstance("handleUtils");
-        resolve(true);
-      }).catch(() => {
-        forEachInstance("rejectUtilsScriptPromise");
-        reject();
-      });
+        source
+      );
+    } else if (typeof source === "function") {
+      try {
+        loadCall = source();
+        if (!(loadCall instanceof Promise)) {
+          throw new TypeError(`The function passed to loadUtils must return a promise for the utilities module, not ${typeof loadCall}`);
+        }
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    } else {
+      return Promise.reject(new TypeError(`The argument passed to loadUtils must be a URL string or a function that returns a promise for the utilities module, not ${typeof source}`));
+    }
+    intlTelInput.startedLoadingUtilsScript = true;
+    return loadCall.then((module2) => {
+      const utils = module2?.default;
+      if (!utils || typeof utils !== "object") {
+        if (typeof source === "string") {
+          throw new TypeError(`The module loaded from ${source} did not set utils as its default export.`);
+        } else {
+          throw new TypeError("The loader function passed to loadUtils did not resolve to a module object with utils as its default export.");
+        }
+      }
+      intlTelInput.utils = utils;
+      forEachInstance("handleUtils");
+      return true;
+    }).catch((error) => {
+      forEachInstance("rejectUtilsScriptPromise", error);
+      throw error;
     });
   }
   return null;
@@ -3116,7 +3146,9 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "24.5.1"
+    startedLoadingUtilsScript: false,
+    startedLoadingAutoCountry: false,
+    version: "24.6.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.d.ts

@@ -286,6 +286,9 @@ declare module "intl-tel-input/i18n/en" {
 declare module "intl-tel-input" {
     import { Country } from "intl-tel-input/data";
     import { I18n } from "intl-tel-input/i18n/types";
+    type UtilsLoader = () => Promise<{
+        default: ItiUtils;
+    }>;
     interface IntlTelInputInterface {
         (input: HTMLInputElement, options?: SomeOptions): Iti;
         autoCountry?: string;
@@ -296,9 +299,9 @@ declare module "intl-tel-input" {
         instances: {
             [key: string]: Iti;
         };
-        loadUtils: (path: string) => Promise<unknown> | null;
-        startedLoadingAutoCountry?: boolean;
-        startedLoadingUtilsScript?: boolean;
+        loadUtils: (source: string | UtilsLoader) => Promise<unknown> | null;
+        startedLoadingAutoCountry: boolean;
+        startedLoadingUtilsScript: boolean;
         version: string | undefined;
         utils?: ItiUtils;
     }
@@ -345,6 +348,7 @@ declare module "intl-tel-input" {
         }) | null;
         i18n: I18n;
         initialCountry: string;
+        loadUtilsOnInit: string | UtilsLoader;
         nationalMode: boolean;
         onlyCountries: string[];
         placeholderNumberType: NumberType;
@@ -352,7 +356,8 @@ declare module "intl-tel-input" {
         separateDialCode: boolean;
         strictMode: boolean;
         useFullscreenPopup: boolean;
-        utilsScript: string;
+        /** @deprecated Please use the `loadUtilsOnInit` option. */
+        utilsScript: string | UtilsLoader;
         validationNumberType: NumberType | null;
     }
     export type SomeOptions = Partial<AllOptions>;
@@ -400,6 +405,7 @@ declare module "intl-tel-input" {
         private _handleClickOffToClose;
         private _handleKeydownOnDropdown;
         private _handleSearchChange;
+        private _handlePageLoad;
         private resolveAutoCountryPromise;
         private rejectAutoCountryPromise;
         private resolveUtilsScriptPromise;
@@ -422,7 +428,6 @@ declare module "intl-tel-input" {
         private _loadAutoCountry;
         private _openDropdownWithPlus;
         private _initTelInputListeners;
-        private _isChangingDialCode;
         private _cap;
         private _trigger;
         private _openDropdown;

package/react/build/IntlTelInput.js

@@ -1623,6 +1623,8 @@ var defaults = {
   i18n: {},
   //* Initial country.
   initialCountry: "",
+  //* Specify the path to the libphonenumber script to enable validation/formatting.
+  loadUtilsOnInit: "",
   //* National vs international formatting for numbers e.g. placeholders and displaying existing numbers.
   nationalMode: true,
   //* Display only these countries.
@@ -1643,7 +1645,7 @@ var defaults = {
       navigator.userAgent
     ) || window.innerWidth <= 500
   ) : false,
-  //* Specify the path to the libphonenumber script to enable validation/formatting.
+  //* Deprecated! Use `loadUtilsOnInit` instead.
   utilsScript: "",
   //* The number type to enforce during validation.
   validationNumberType: "MOBILE"
@@ -1705,9 +1707,9 @@ var createEl = (name, attrs, container) => {
   }
   return el;
 };
-var forEachInstance = (method) => {
+var forEachInstance = (method, ...args) => {
   const { instances } = intlTelInput;
-  Object.values(instances).forEach((instance) => instance[method]());
+  Object.values(instances).forEach((instance) => instance[method](...args));
 };
 var Iti = class {
   constructor(input, customOptions = {}) {
@@ -2155,14 +2157,21 @@ var Iti = class {
   }
   //* Init many requests: utils script / geo ip lookup.
   _initRequests() {
-    const { utilsScript, initialCountry, geoIpLookup } = this.options;
-    if (utilsScript && !intlTelInput.utils) {
+    let { loadUtilsOnInit, utilsScript, initialCountry, geoIpLookup } = this.options;
+    if (!loadUtilsOnInit && utilsScript) {
+      console.warn("intl-tel-input: The `utilsScript` option is deprecated and will be removed in a future release! Please use the `loadUtilsOnInit` option instead.");
+      loadUtilsOnInit = utilsScript;
+    }
+    if (loadUtilsOnInit && !intlTelInput.utils) {
+      this._handlePageLoad = () => {
+        window.removeEventListener("load", this._handlePageLoad);
+        intlTelInput.loadUtils(loadUtilsOnInit)?.catch(() => {
+        });
+      };
       if (intlTelInput.documentReady()) {
-        intlTelInput.loadUtils(utilsScript);
+        this._handlePageLoad();
       } else {
-        window.addEventListener("load", () => {
-          intlTelInput.loadUtils(utilsScript);
-        });
+        window.addEventListener("load", this._handlePageLoad);
       }
     } else {
       this.resolveUtilsScriptPromise();
@@ -2259,13 +2268,17 @@ var Iti = class {
             const isInitialPlus = !alreadyHasPlus && this.telInput.selectionStart === 0 && e.key === "+";
             const isNumeric = /^[0-9]$/.test(e.key);
             const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
-            const fullNumber = this._getFullNumber();
-            const coreNumber = intlTelInput.utils.getCoreNumber(fullNumber, this.selectedCountryData.iso2);
-            const hasReachedMaxLength = this.maxCoreNumberLength && coreNumber.length >= this.maxCoreNumberLength;
-            const selectedText = value.substring(this.telInput.selectionStart, this.telInput.selectionEnd);
-            const hasSelectedDigit = /\d/.test(selectedText);
-            const isChangingDialCode = isInitialPlus ? true : this._isChangingDialCode(e.key);
-            if (!isAllowedChar || hasReachedMaxLength && !hasSelectedDigit && !isChangingDialCode) {
+            const newValue = value.slice(0, this.telInput.selectionStart) + e.key + value.slice(this.telInput.selectionEnd);
+            const newFullNumber = this._getFullNumber(newValue);
+            const coreNumber = intlTelInput.utils.getCoreNumber(newFullNumber, this.selectedCountryData.iso2);
+            const hasExceededMaxLength = this.maxCoreNumberLength && coreNumber.length > this.maxCoreNumberLength;
+            let isChangingDialCode = false;
+            if (alreadyHasPlus) {
+              const currentCountry = this.selectedCountryData.iso2;
+              const newCountry = this._getCountryFromNumber(newFullNumber);
+              isChangingDialCode = newCountry !== currentCountry;
+            }
+            if (!isAllowedChar || hasExceededMaxLength && !isChangingDialCode && !isInitialPlus) {
               e.preventDefault();
             }
           }
@@ -2274,17 +2287,6 @@ var Iti = class {
       this.telInput.addEventListener("keydown", this._handleKeydownEvent);
     }
   }
-  _isChangingDialCode(char) {
-    const value = this.telInput.value;
-    if (value.charAt(0) === "+") {
-      const currentCountry = this.selectedCountryData.iso2;
-      const newValue = value.slice(0, this.telInput.selectionStart) + char + value.slice(this.telInput.selectionEnd);
-      const newFullNumber = this._getFullNumber(newValue);
-      const newCountry = this._getCountryFromNumber(newFullNumber);
-      return newCountry !== currentCountry;
-    }
-    return false;
-  }
   //* Adhere to the input's maxlength attr.
   _cap(number) {
     const max = parseInt(this.telInput.getAttribute("maxlength") || "", 10);
@@ -2628,22 +2630,26 @@ var Iti = class {
   //* Update the maximum valid number length for the currently selected country.
   _updateMaxLength() {
     const { strictMode, placeholderNumberType, validationNumberType } = this.options;
+    const { iso2 } = this.selectedCountryData;
     if (strictMode && intlTelInput.utils) {
-      if (this.selectedCountryData.iso2) {
+      if (iso2) {
         const numberType = intlTelInput.utils.numberType[placeholderNumberType];
         let exampleNumber = intlTelInput.utils.getExampleNumber(
-          this.selectedCountryData.iso2,
+          iso2,
           false,
           numberType,
           true
         );
         let validNumber = exampleNumber;
-        while (intlTelInput.utils.isPossibleNumber(exampleNumber, this.selectedCountryData.iso2, validationNumberType)) {
+        while (intlTelInput.utils.isPossibleNumber(exampleNumber, iso2, validationNumberType)) {
           validNumber = exampleNumber;
           exampleNumber += "0";
         }
-        const coreNumber = intlTelInput.utils.getCoreNumber(validNumber, this.selectedCountryData.iso2);
+        const coreNumber = intlTelInput.utils.getCoreNumber(validNumber, iso2);
         this.maxCoreNumberLength = coreNumber.length;
+        if (iso2 === "by") {
+          this.maxCoreNumberLength = coreNumber.length + 1;
+        }
       } else {
         this.maxCoreNumberLength = null;
       }
@@ -2750,6 +2756,9 @@ var Iti = class {
         this.dropdown.parentNode.removeChild(this.dropdown);
       }
     }
+    if (this._handlePageLoad) {
+      window.removeEventListener("load", this._handlePageLoad);
+    }
     this._trigger("close:countrydropdown");
   }
   //* Check if an element is visible within it's container, else scroll until it is.
@@ -3038,22 +3047,43 @@ var Iti = class {
     }
   }
 };
-var loadUtils = (path) => {
+var loadUtils = (source) => {
   if (!intlTelInput.utils && !intlTelInput.startedLoadingUtilsScript) {
-    intlTelInput.startedLoadingUtilsScript = true;
-    return new Promise((resolve, reject) => {
-      import(
+    let loadCall;
+    if (typeof source === "string") {
+      loadCall = import(
         /* webpackIgnore: true */
         /* @vite-ignore */
-        path
-      ).then(({ default: utils }) => {
-        intlTelInput.utils = utils;
-        forEachInstance("handleUtils");
-        resolve(true);
-      }).catch(() => {
-        forEachInstance("rejectUtilsScriptPromise");
-        reject();
-      });
+        source
+      );
+    } else if (typeof source === "function") {
+      try {
+        loadCall = source();
+        if (!(loadCall instanceof Promise)) {
+          throw new TypeError(`The function passed to loadUtils must return a promise for the utilities module, not ${typeof loadCall}`);
+        }
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    } else {
+      return Promise.reject(new TypeError(`The argument passed to loadUtils must be a URL string or a function that returns a promise for the utilities module, not ${typeof source}`));
+    }
+    intlTelInput.startedLoadingUtilsScript = true;
+    return loadCall.then((module) => {
+      const utils = module?.default;
+      if (!utils || typeof utils !== "object") {
+        if (typeof source === "string") {
+          throw new TypeError(`The module loaded from ${source} did not set utils as its default export.`);
+        } else {
+          throw new TypeError("The loader function passed to loadUtils did not resolve to a module object with utils as its default export.");
+        }
+      }
+      intlTelInput.utils = utils;
+      forEachInstance("handleUtils");
+      return true;
+    }).catch((error) => {
+      forEachInstance("rejectUtilsScriptPromise", error);
+      throw error;
     });
   }
   return null;
@@ -3080,7 +3110,9 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "24.5.1"
+    startedLoadingUtilsScript: false,
+    startedLoadingAutoCountry: false,
+    version: "24.6.0"
   }
 );
 var intl_tel_input_default = intlTelInput;