intl-tel-input 23.0.9 → 23.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "23.0.9",
+  "version": "23.0.11",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",
@@ -37,6 +37,7 @@
     "eslint-plugin-jasmine": "^4.1.3",
     "eslint-plugin-jest": "^28.5.0",
     "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "evenizer": "^0.1.17",
     "google-closure-compiler": "^20240317.0.0",
     "google-closure-library": "^20230802.0.0",
@@ -123,6 +124,7 @@
     },
     "./i18n": "./build/js/i18n/index.js",
     "./i18n/*": "./build/js/i18n/*/index.js",
+    "./styles": "./build/css/intlTelInput.css",
     "./*": "./*"
   },
   "typesVersions": {
@@ -136,6 +138,9 @@
     }
   },
   "jest": {
-    "moduleDirectories": ["node_modules", "build/js"]
+    "moduleDirectories": [
+      "node_modules",
+      "build/js"
+    ]
   }
 }

package/react/README.md

@@ -1,5 +1,37 @@
-# Props
+# IntlTelInput React Component
+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/?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
+import IntlTelInput from "intl-tel-input/react";
+import "intl-tel-input/styles";
+
+<IntlTelInput
+    onChangeNumber={setNumber}
+    onChangeValidity={setIsValid}
+    initOptions={{
+        initialCountry: "us",
+        utilsScript: "path/to/utils.js",
+    }}
+/>
+```
+
+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 (~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.
 
 **initialValue**  
@@ -33,3 +65,27 @@ An object containing all of the [initialisation options](https://github.com/jack
 **inputProps**  
 Type: `Object`  
 The props to pass to the input element e.g. `className`, `placeholder`, `required`, `disabled`, `onBlur` etc.
+
+## Accessing Instance Methods
+
+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
+
+**Error when toggle presence of IntlTelInput component**  
+
+Error message: `Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.`
+
+Solution: wrap the component in a div e.g.
+
+```js
+{showIntlTelInput && (
+    <div>
+        <IntlTelInput />
+    </div>
+)}
+```

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();
@@ -2017,24 +2020,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;
@@ -2076,10 +2080,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);
   }
@@ -2600,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();
@@ -2729,7 +2735,7 @@ var Iti = class {
     if (countryChanged) {
       this._triggerCountryChange();
     }
-    this._trigger("input");
+    this._trigger("input", { isSetNumber: true });
   }
   //* Set the placeholder number typ
   setPlaceholderNumberType(type) {
@@ -2778,7 +2784,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;
@@ -2805,7 +2811,7 @@ var IntlTelInput = (0, import_react.forwardRef)(function IntlTelInput2({
     getInstance: () => itiRef.current,
     getInput: () => inputRef.current
   }));
-  const update = () => {
+  const update = (0, import_react.useCallback)(() => {
     const num = itiRef.current?.getNumber() || "";
     const countryIso = itiRef.current?.getSelectedCountryData().iso2 || "";
     onChangeNumber(num);
@@ -2821,11 +2827,18 @@ var IntlTelInput = (0, import_react.forwardRef)(function IntlTelInput2({
         onChangeErrorCode(errorCode);
       }
     }
-  };
+  }, [onChangeCountry, onChangeErrorCode, onChangeNumber, onChangeValidity, usePreciseValidation]);
+  (0, import_react.useEffect)(() => {
+    if (inputRef.current) {
+      itiRef.current = intl_tel_input_default(inputRef.current, initOptions);
+    }
+    return () => {
+      itiRef.current?.destroy();
+    };
+  }, []);
   (0, import_react.useEffect)(() => {
     const inputRefCurrent = inputRef.current;
     if (inputRefCurrent) {
-      itiRef.current = intl_tel_input_default(inputRefCurrent, initOptions);
       inputRefCurrent.addEventListener("countrychange", update);
       itiRef.current.promise.then(update);
     }
@@ -2833,9 +2846,8 @@ var IntlTelInput = (0, import_react.forwardRef)(function IntlTelInput2({
       if (inputRefCurrent) {
         inputRefCurrent.removeEventListener("countrychange", update);
       }
-      itiRef.current?.destroy();
     };
-  }, []);
+  }, [update]);
   return /* @__PURE__ */ import_react.default.createElement(
     "input",
     {

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();
@@ -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,13 +2748,13 @@ 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;
 
 // react/src/intl-tel-input/react.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 = () => {
@@ -2769,7 +2775,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);
@@ -2785,11 +2791,18 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
         onChangeErrorCode(errorCode);
       }
     }
-  };
+  }, [onChangeCountry, onChangeErrorCode, onChangeNumber, onChangeValidity, usePreciseValidation]);
+  useEffect(() => {
+    if (inputRef.current) {
+      itiRef.current = intl_tel_input_default(inputRef.current, initOptions);
+    }
+    return () => {
+      itiRef.current?.destroy();
+    };
+  }, []);
   useEffect(() => {
     const inputRefCurrent = inputRef.current;
     if (inputRefCurrent) {
-      itiRef.current = intl_tel_input_default(inputRefCurrent, initOptions);
       inputRefCurrent.addEventListener("countrychange", update);
       itiRef.current.promise.then(update);
     }
@@ -2797,9 +2810,8 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
       if (inputRefCurrent) {
         inputRefCurrent.removeEventListener("countrychange", update);
       }
-      itiRef.current?.destroy();
     };
-  }, []);
+  }, [update]);
   return /* @__PURE__ */ React.createElement(
     "input",
     {

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();
@@ -2017,24 +2020,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;
@@ -2076,10 +2080,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);
   }
@@ -2600,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();
@@ -2729,7 +2735,7 @@ var Iti = class {
     if (countryChanged) {
       this._triggerCountryChange();
     }
-    this._trigger("input");
+    this._trigger("input", { isSetNumber: true });
   }
   //* Set the placeholder number typ
   setPlaceholderNumberType(type) {
@@ -2778,7 +2784,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;
@@ -9003,7 +9009,7 @@ var IntlTelInput = (0, import_react.forwardRef)(function IntlTelInput2({
     getInstance: () => itiRef.current,
     getInput: () => inputRef.current
   }));
-  const update = () => {
+  const update = (0, import_react.useCallback)(() => {
     const num = itiRef.current?.getNumber() || "";
     const countryIso = itiRef.current?.getSelectedCountryData().iso2 || "";
     onChangeNumber(num);
@@ -9019,11 +9025,18 @@ var IntlTelInput = (0, import_react.forwardRef)(function IntlTelInput2({
         onChangeErrorCode(errorCode);
       }
     }
-  };
+  }, [onChangeCountry, onChangeErrorCode, onChangeNumber, onChangeValidity, usePreciseValidation]);
+  (0, import_react.useEffect)(() => {
+    if (inputRef.current) {
+      itiRef.current = intlTelInputWithUtils_default(inputRef.current, initOptions);
+    }
+    return () => {
+      itiRef.current?.destroy();
+    };
+  }, []);
   (0, import_react.useEffect)(() => {
     const inputRefCurrent = inputRef.current;
     if (inputRefCurrent) {
-      itiRef.current = intlTelInputWithUtils_default(inputRefCurrent, initOptions);
       inputRefCurrent.addEventListener("countrychange", update);
       itiRef.current.promise.then(update);
     }
@@ -9031,9 +9044,8 @@ var IntlTelInput = (0, import_react.forwardRef)(function IntlTelInput2({
       if (inputRefCurrent) {
         inputRefCurrent.removeEventListener("countrychange", update);
       }
-      itiRef.current?.destroy();
     };
-  }, []);
+  }, [update]);
   return /* @__PURE__ */ import_react.default.createElement(
     "input",
     {