intl-tel-input 23.0.9 → 23.0.11

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();
@@ -1981,24 +1984,25 @@ var Iti = class {
   }
   //* Initialize the tel input listeners.
   _initTelInputListeners() {
-    const { strictMode, formatAsYouType, separateDialCode } = this.options;
+    const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay } = this.options;
     let userOverrideFormatting = false;
     this._handleInputEvent = (e) => {
       if (this._updateCountryFromNumber(this.telInput.value)) {
         this._triggerCountryChange();
       }
-      const isFormattingChar = e && e.data && /[^+0-9]/.test(e.data);
-      const isPaste = e && e.inputType === "insertFromPaste" && this.telInput.value;
+      const isFormattingChar = e?.data && /[^+0-9]/.test(e.data);
+      const isPaste = e?.inputType === "insertFromPaste" && this.telInput.value;
       if (isFormattingChar || isPaste && !strictMode) {
         userOverrideFormatting = true;
       } else if (!/[^+0-9]/.test(this.telInput.value)) {
         userOverrideFormatting = false;
       }
-      if (formatAsYouType && !userOverrideFormatting) {
+      const disableFormatOnSetNumber = e?.detail && e.detail["isSetNumber"] && !formatOnDisplay;
+      if (formatAsYouType && !userOverrideFormatting && !disableFormatOnSetNumber) {
         const currentCaretPos = this.telInput.selectionStart || 0;
         const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos);
         const relevantCharsBeforeCaret = valueBeforeCaret.replace(/[^+0-9]/g, "").length;
-        const isDeleteForwards = e && e.inputType === "deleteContentForward";
+        const isDeleteForwards = e?.inputType === "deleteContentForward";
         const formattedValue = this._formatNumberAsYouType();
         const newCaretPos = translateCursorPosition(relevantCharsBeforeCaret, formattedValue, currentCaretPos, isDeleteForwards);
         this.telInput.value = formattedValue;
@@ -2040,10 +2044,11 @@ var Iti = class {
     return max && number.length > max ? number.substr(0, max) : number;
   }
   //* Trigger a custom event on the input.
-  _trigger(name) {
-    const e = new Event(name, {
+  _trigger(name, detailProps = {}) {
+    const e = new CustomEvent(name, {
       bubbles: true,
-      cancelable: true
+      cancelable: true,
+      detail: detailProps
     });
     this.telInput.dispatchEvent(e);
   }
@@ -2564,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();
@@ -2693,7 +2699,7 @@ var Iti = class {
     if (countryChanged) {
       this._triggerCountryChange();
     }
-    this._trigger("input");
+    this._trigger("input", { isSetNumber: true });
   }
   //* Set the placeholder number typ
   setPlaceholderNumberType(type) {
@@ -2742,7 +2748,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.0.9"
+    version: "23.0.11"
   }
 );
 var intl_tel_input_default = intlTelInput;
@@ -8946,7 +8952,7 @@ intl_tel_input_default.utils = utils_default;
 var intlTelInputWithUtils_default = intl_tel_input_default;
 
 // react/src/intl-tel-input/reactWithUtils.tsx
-import React, { useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+import React, { useRef, useEffect, forwardRef, useImperativeHandle, useCallback } from "react";
 var IntlTelInput = forwardRef(function IntlTelInput2({
   initialValue = "",
   onChangeNumber = () => {
@@ -8967,7 +8973,7 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
     getInstance: () => itiRef.current,
     getInput: () => inputRef.current
   }));
-  const update = () => {
+  const update = useCallback(() => {
     const num = itiRef.current?.getNumber() || "";
     const countryIso = itiRef.current?.getSelectedCountryData().iso2 || "";
     onChangeNumber(num);
@@ -8983,11 +8989,18 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
         onChangeErrorCode(errorCode);
       }
     }
-  };
+  }, [onChangeCountry, onChangeErrorCode, onChangeNumber, onChangeValidity, usePreciseValidation]);
+  useEffect(() => {
+    if (inputRef.current) {
+      itiRef.current = intlTelInputWithUtils_default(inputRef.current, initOptions);
+    }
+    return () => {
+      itiRef.current?.destroy();
+    };
+  }, []);
   useEffect(() => {
     const inputRefCurrent = inputRef.current;
     if (inputRefCurrent) {
-      itiRef.current = intlTelInputWithUtils_default(inputRefCurrent, initOptions);
       inputRefCurrent.addEventListener("countrychange", update);
       itiRef.current.promise.then(update);
     }
@@ -8995,9 +9008,8 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
       if (inputRefCurrent) {
         inputRefCurrent.removeEventListener("countrychange", update);
       }
-      itiRef.current?.destroy();
     };
-  }, []);
+  }, [update]);
   return /* @__PURE__ */ React.createElement(
     "input",
     {