intl-tel-input 23.0.9 → 23.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "23.0.9",
+  "version": "23.0.10",
   "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,36 @@
-# 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 [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)
+- [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.
+
+## 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 (~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").
+
+## Props
 Here's a list of all of the current props you can pass to the IntlTelInput react component.
 
 **initialValue**  
@@ -33,3 +64,23 @@ 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 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()`.
+
+## 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

@@ -2017,24 +2017,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 +2077,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);
   }
@@ -2729,7 +2731,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 +2780,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.0.9"
+    version: "23.0.10"
   }
 );
 var intl_tel_input_default = intlTelInput;
@@ -2805,7 +2807,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 +2823,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 +2842,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

@@ -1981,24 +1981,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 +2041,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);
   }
@@ -2693,7 +2695,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 +2744,13 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.0.9"
+    version: "23.0.10"
   }
 );
 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 +2771,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 +2787,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 +2806,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

@@ -2017,24 +2017,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 +2077,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);
   }
@@ -2729,7 +2731,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 +2780,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.0.9"
+    version: "23.0.10"
   }
 );
 var intl_tel_input_default = intlTelInput;
@@ -9003,7 +9005,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 +9021,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 +9040,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/IntlTelInputWithUtils.js

@@ -1981,24 +1981,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 +2041,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);
   }
@@ -2693,7 +2695,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 +2744,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.0.9"
+    version: "23.0.10"
   }
 );
 var intl_tel_input_default = intlTelInput;
@@ -8946,7 +8948,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 +8969,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 +8985,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 +9004,8 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
       if (inputRefCurrent) {
         inputRefCurrent.removeEventListener("countrychange", update);
       }
-      itiRef.current?.destroy();
     };
-  }, []);
+  }, [update]);
   return /* @__PURE__ */ React.createElement(
     "input",
     {