intl-tel-input 24.5.2 → 24.6.1

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();
@@ -2783,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.
@@ -3071,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;
@@ -3113,7 +3146,9 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "24.5.2"
+    startedLoadingUtilsScript: false,
+    startedLoadingAutoCountry: false,
+    version: "24.6.1"
   }
 );
 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;

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();
@@ -2747,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.
@@ -3035,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;
@@ -3077,7 +3110,9 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "24.5.2"
+    startedLoadingUtilsScript: false,
+    startedLoadingAutoCountry: false,
+    version: "24.6.1"
   }
 );
 var intl_tel_input_default = intlTelInput;