intl-tel-input 23.0.10 → 23.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "23.0.10",
+  "version": "23.0.11",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",

package/react/README.md

@@ -1,15 +1,16 @@
 # IntlTelInput React Component
-A React component wrapper for the [intl-tel-input](https://github.com/jackocnr/intl-tel-input) JavaScript plugin. View the source [here](https://github.com/jackocnr/intl-tel-input/blob/master/react/src/intl-tel-input/react.tsx).
+A React component wrapper for the [intl-tel-input](https://github.com/jackocnr/intl-tel-input) JavaScript plugin. View the source code [here](https://github.com/jackocnr/intl-tel-input/blob/master/react/src/intl-tel-input/react.tsx).
 
 ## Table of Contents
 - [Demo and Examples](#demo-and-examples)
 - [Getting Started](#getting-started)
 - [Props](#props)
 - [Accessing Instance Methods](#accessing-instance-methods)
+- [Accessing Static Methods](#accessing-static-methods)
 - [Troubleshooting](#troubleshooting)
 
 ## Demo and Examples
-Check out [Storybook](https://intl-tel-input.com/storybook) where you can play with the various options. Alternatively, try it for yourself by downloading the project and opening /react/demo/validation.html (etc) in a browser.
+Check out [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--vanilla) where you can play with the various props. Alternatively, try it for yourself by downloading the project and opening /react/demo/validation.html (etc) in a browser.
 
 ## Getting Started
 ```js
@@ -28,7 +29,7 @@ import "intl-tel-input/styles";
 
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/ValidationApp.tsx) for a more fleshed out example of how to handle validation.
 
-A note on the utils script (~250kb): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import `"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, and point that to your hosted [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file (or just point it to a CDN e.g. "https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.9/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"` instead, 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@23.0.11/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput react component.
@@ -67,7 +68,11 @@ The props to pass to the input element e.g. `className`, `placeholder`, `require
 
 ## Accessing Instance Methods
 
-You can access the instance methods (`setNumber`, `setCountry`, `setPlaceholderNumberType` etc) by passing a ref into the IntlTelInput component (using the `ref` prop), and then calling `ref.current.getInstance()` e.g. `ref.current.getInstance().setNumber(...);`. See the [Set Number demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/SetNumberApp.tsx) for a full example. You can also access the input DOM element in a similar way: `ref.current.getInput()`.
+You can access all of the plugin's [instance methods](https://github.com/jackocnr/intl-tel-input/blob/master/README.md#instance-methods) (`setNumber`, `setCountry`, `setPlaceholderNumberType` etc) by passing a ref into the IntlTelInput component (using the `ref` prop), and then calling `ref.current.getInstance()` e.g. `ref.current.getInstance().setNumber(...);`. See the [Set Number demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/SetNumberApp.tsx) for a full example. You can also access the input DOM element in a similar way: `ref.current.getInput()`.
+
+## Accessing Static Methods
+
+You can access all of the plugin's [static methods](https://github.com/jackocnr/intl-tel-input/blob/master/README.md#static-methods) by importing `intlTelInput` from the same file as the react component e.g. `import { intlTelInput } from "intl-tel-input/react"` (note the lower case "i" in "intlTelInput"). You can then use this as you would with the main plugin e.g. `intlTelInput.getCountryData()` or `intlTelInput.utils.numberType` etc.
 
 ## Troubleshooting
 

package/react/build/IntlTelInput.cjs

@@ -1889,10 +1889,11 @@ var Iti = class {
     const val = useAttribute ? attributeValue : inputValue;
     const dialCode = this._getDialCode(val);
     const isRegionlessNanpNumber = isRegionlessNanp(val);
-    const { initialCountry } = this.options;
+    const { initialCountry, geoIpLookup } = this.options;
+    const isAutoCountry = initialCountry === "auto" && geoIpLookup;
     if (dialCode && !isRegionlessNanpNumber) {
       this._updateCountryFromNumber(val);
-    } else if (initialCountry !== "auto" || overrideAutoCountry) {
+    } else if (!isAutoCountry || overrideAutoCountry) {
       const lowerInitialCountry = initialCountry ? initialCountry.toLowerCase() : "";
       const isValidInitialCountry = lowerInitialCountry && this._getCountryData(lowerInitialCountry, true);
       if (isValidInitialCountry) {
@@ -1971,18 +1972,20 @@ var Iti = class {
   }
   //* Init many requests: utils script / geo ip lookup.
   _initRequests() {
-    if (this.options.utilsScript && !intlTelInput.utils) {
+    const { utilsScript, initialCountry, geoIpLookup } = this.options;
+    if (utilsScript && !intlTelInput.utils) {
       if (intlTelInput.documentReady()) {
-        intlTelInput.loadUtils(this.options.utilsScript);
+        intlTelInput.loadUtils(utilsScript);
       } else {
         window.addEventListener("load", () => {
-          intlTelInput.loadUtils(this.options.utilsScript);
+          intlTelInput.loadUtils(utilsScript);
         });
       }
     } else {
       this.resolveUtilsScriptPromise();
     }
-    if (this.options.initialCountry === "auto" && !this.selectedCountryData.iso2) {
+    const isAutoCountry = initialCountry === "auto" && geoIpLookup;
+    if (isAutoCountry && !this.selectedCountryData.iso2) {
       this._loadAutoCountry();
     } else {
       this.resolveAutoCountryPromise();
@@ -2602,7 +2605,8 @@ var Iti = class {
   handleAutoCountry() {
     if (this.options.initialCountry === "auto" && intlTelInput.autoCountry) {
       this.defaultCountry = intlTelInput.autoCountry;
-      if (!this.telInput.value) {
+      const hasSelectedCountryOrGlobe = this.selectedCountryData.iso2 || this.selectedCountryInner.classList.contains("iti__globe");
+      if (!hasSelectedCountryOrGlobe) {
         this.setCountry(this.defaultCountry);
       }
       this.resolveAutoCountryPromise();
@@ -2780,7 +2784,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.0.10"
+    version: "23.0.11"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.js

@@ -1853,10 +1853,11 @@ var Iti = class {
     const val = useAttribute ? attributeValue : inputValue;
     const dialCode = this._getDialCode(val);
     const isRegionlessNanpNumber = isRegionlessNanp(val);
-    const { initialCountry } = this.options;
+    const { initialCountry, geoIpLookup } = this.options;
+    const isAutoCountry = initialCountry === "auto" && geoIpLookup;
     if (dialCode && !isRegionlessNanpNumber) {
       this._updateCountryFromNumber(val);
-    } else if (initialCountry !== "auto" || overrideAutoCountry) {
+    } else if (!isAutoCountry || overrideAutoCountry) {
       const lowerInitialCountry = initialCountry ? initialCountry.toLowerCase() : "";
       const isValidInitialCountry = lowerInitialCountry && this._getCountryData(lowerInitialCountry, true);
       if (isValidInitialCountry) {
@@ -1935,18 +1936,20 @@ var Iti = class {
   }
   //* Init many requests: utils script / geo ip lookup.
   _initRequests() {
-    if (this.options.utilsScript && !intlTelInput.utils) {
+    const { utilsScript, initialCountry, geoIpLookup } = this.options;
+    if (utilsScript && !intlTelInput.utils) {
       if (intlTelInput.documentReady()) {
-        intlTelInput.loadUtils(this.options.utilsScript);
+        intlTelInput.loadUtils(utilsScript);
       } else {
         window.addEventListener("load", () => {
-          intlTelInput.loadUtils(this.options.utilsScript);
+          intlTelInput.loadUtils(utilsScript);
         });
       }
     } else {
       this.resolveUtilsScriptPromise();
     }
-    if (this.options.initialCountry === "auto" && !this.selectedCountryData.iso2) {
+    const isAutoCountry = initialCountry === "auto" && geoIpLookup;
+    if (isAutoCountry && !this.selectedCountryData.iso2) {
       this._loadAutoCountry();
     } else {
       this.resolveAutoCountryPromise();
@@ -2566,7 +2569,8 @@ var Iti = class {
   handleAutoCountry() {
     if (this.options.initialCountry === "auto" && intlTelInput.autoCountry) {
       this.defaultCountry = intlTelInput.autoCountry;
-      if (!this.telInput.value) {
+      const hasSelectedCountryOrGlobe = this.selectedCountryData.iso2 || this.selectedCountryInner.classList.contains("iti__globe");
+      if (!hasSelectedCountryOrGlobe) {
         this.setCountry(this.defaultCountry);
       }
       this.resolveAutoCountryPromise();
@@ -2744,7 +2748,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.0.10"
+    version: "23.0.11"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -1889,10 +1889,11 @@ var Iti = class {
     const val = useAttribute ? attributeValue : inputValue;
     const dialCode = this._getDialCode(val);
     const isRegionlessNanpNumber = isRegionlessNanp(val);
-    const { initialCountry } = this.options;
+    const { initialCountry, geoIpLookup } = this.options;
+    const isAutoCountry = initialCountry === "auto" && geoIpLookup;
     if (dialCode && !isRegionlessNanpNumber) {
       this._updateCountryFromNumber(val);
-    } else if (initialCountry !== "auto" || overrideAutoCountry) {
+    } else if (!isAutoCountry || overrideAutoCountry) {
       const lowerInitialCountry = initialCountry ? initialCountry.toLowerCase() : "";
       const isValidInitialCountry = lowerInitialCountry && this._getCountryData(lowerInitialCountry, true);
       if (isValidInitialCountry) {
@@ -1971,18 +1972,20 @@ var Iti = class {
   }
   //* Init many requests: utils script / geo ip lookup.
   _initRequests() {
-    if (this.options.utilsScript && !intlTelInput.utils) {
+    const { utilsScript, initialCountry, geoIpLookup } = this.options;
+    if (utilsScript && !intlTelInput.utils) {
       if (intlTelInput.documentReady()) {
-        intlTelInput.loadUtils(this.options.utilsScript);
+        intlTelInput.loadUtils(utilsScript);
       } else {
         window.addEventListener("load", () => {
-          intlTelInput.loadUtils(this.options.utilsScript);
+          intlTelInput.loadUtils(utilsScript);
         });
       }
     } else {
       this.resolveUtilsScriptPromise();
     }
-    if (this.options.initialCountry === "auto" && !this.selectedCountryData.iso2) {
+    const isAutoCountry = initialCountry === "auto" && geoIpLookup;
+    if (isAutoCountry && !this.selectedCountryData.iso2) {
       this._loadAutoCountry();
     } else {
       this.resolveAutoCountryPromise();
@@ -2602,7 +2605,8 @@ var Iti = class {
   handleAutoCountry() {
     if (this.options.initialCountry === "auto" && intlTelInput.autoCountry) {
       this.defaultCountry = intlTelInput.autoCountry;
-      if (!this.telInput.value) {
+      const hasSelectedCountryOrGlobe = this.selectedCountryData.iso2 || this.selectedCountryInner.classList.contains("iti__globe");
+      if (!hasSelectedCountryOrGlobe) {
         this.setCountry(this.defaultCountry);
       }
       this.resolveAutoCountryPromise();
@@ -2780,7 +2784,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.0.10"
+    version: "23.0.11"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -1853,10 +1853,11 @@ var Iti = class {
     const val = useAttribute ? attributeValue : inputValue;
     const dialCode = this._getDialCode(val);
     const isRegionlessNanpNumber = isRegionlessNanp(val);
-    const { initialCountry } = this.options;
+    const { initialCountry, geoIpLookup } = this.options;
+    const isAutoCountry = initialCountry === "auto" && geoIpLookup;
     if (dialCode && !isRegionlessNanpNumber) {
       this._updateCountryFromNumber(val);
-    } else if (initialCountry !== "auto" || overrideAutoCountry) {
+    } else if (!isAutoCountry || overrideAutoCountry) {
       const lowerInitialCountry = initialCountry ? initialCountry.toLowerCase() : "";
       const isValidInitialCountry = lowerInitialCountry && this._getCountryData(lowerInitialCountry, true);
       if (isValidInitialCountry) {
@@ -1935,18 +1936,20 @@ var Iti = class {
   }
   //* Init many requests: utils script / geo ip lookup.
   _initRequests() {
-    if (this.options.utilsScript && !intlTelInput.utils) {
+    const { utilsScript, initialCountry, geoIpLookup } = this.options;
+    if (utilsScript && !intlTelInput.utils) {
       if (intlTelInput.documentReady()) {
-        intlTelInput.loadUtils(this.options.utilsScript);
+        intlTelInput.loadUtils(utilsScript);
       } else {
         window.addEventListener("load", () => {
-          intlTelInput.loadUtils(this.options.utilsScript);
+          intlTelInput.loadUtils(utilsScript);
         });
       }
     } else {
       this.resolveUtilsScriptPromise();
     }
-    if (this.options.initialCountry === "auto" && !this.selectedCountryData.iso2) {
+    const isAutoCountry = initialCountry === "auto" && geoIpLookup;
+    if (isAutoCountry && !this.selectedCountryData.iso2) {
       this._loadAutoCountry();
     } else {
       this.resolveAutoCountryPromise();
@@ -2566,7 +2569,8 @@ var Iti = class {
   handleAutoCountry() {
     if (this.options.initialCountry === "auto" && intlTelInput.autoCountry) {
       this.defaultCountry = intlTelInput.autoCountry;
-      if (!this.telInput.value) {
+      const hasSelectedCountryOrGlobe = this.selectedCountryData.iso2 || this.selectedCountryInner.classList.contains("iti__globe");
+      if (!hasSelectedCountryOrGlobe) {
         this.setCountry(this.defaultCountry);
       }
       this.resolveAutoCountryPromise();
@@ -2744,7 +2748,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.0.10"
+    version: "23.0.11"
   }
 );
 var intl_tel_input_default = intlTelInput;