intl-tel-input 23.7.4 → 23.8.1

package/package.json

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

package/react/README.md

@@ -27,45 +27,49 @@ 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.
+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.7.4/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.8.1/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput react component.
 
+**disabled**    
+Type: `Boolean`, Default: `false`   
+Sets the disabled attribute of both the telephone input and selected country button. _Note: we recommend using this instead of `inputProps.disabled`._
+
 **initialValue**  
 Type: `String`
 The initial value to put in the input. This will get auto-formatted on init (according to `formatOnDisplay` initialisation option). IntlTelInput is an uncontrolled input, and so will ignore any changes to this value.
 
-**onChangeNumber**  
-Type: `Function`  
-A handler to be called when the number changes. It will be passed the new number.
+**initOptions**  
+Type: `Object`  
+An object containing all of the [initialisation options](https://github.com/jackocnr/intl-tel-input?tab=readme-ov-file#initialisation-options) to pass to the plugin. You can use these exactly the same as when using the plugin with pure JavaScript.
+
+**inputProps**  
+Type: `Object`  
+The props to pass to the input element e.g. `className`, `placeholder`, `required`, `onBlur` etc. _Note: we recommend using the separate `disabled` prop instead of `inputProps.disabled`._
 
 **onChangeCountry**  
 Type: `Function`  
 A handler to be called when the selected country changes. It will be passed the new country iso2 code e.g. "gb" for UK.
 
-**onChangeValidity**  
-Type: `Function`  
-A handler to be called when the number validity changes e.g. to true/false. It will be passed the new isValid boolean.
-
 **onChangeErrorCode**  
 Type: `Function`  
 A handler to be called when the number validation error changes. It will be passed the new error code (or `null`).
 
+**onChangeNumber**  
+Type: `Function`  
+A handler to be called when the number changes. It will be passed the new number.
+
+**onChangeValidity**  
+Type: `Function`  
+A handler to be called when the number validity changes e.g. to true/false. It will be passed the new isValid boolean.
+
 **usePreciseValidation**  
 Type: `Boolean`, Default: `false`  
 By default we use `isValidNumber` for validation, but if you'd rather use `isValidNumberPrecise` you can set this to `true`.
 
-**initOptions**  
-Type: `Object`  
-An object containing all of the [initialisation options](https://github.com/jackocnr/intl-tel-input?tab=readme-ov-file#initialisation-options) to pass to the plugin. You can use these exactly the same as when using the plugin with pure JavaScript.
-
-**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()`.

package/react/build/IntlTelInput.cjs

@@ -1992,6 +1992,9 @@ var Iti = class {
   _initTelInputListeners() {
     const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay } = this.options;
     let userOverrideFormatting = false;
+    if (/\p{L}/u.test(this.telInput.value)) {
+      userOverrideFormatting = true;
+    }
     const openDropdownWithPlus = () => {
       this._openDropdown();
       this.searchInput.value = "+";
@@ -2732,17 +2735,31 @@ var Iti = class {
   //* Validate the input val
   isValidNumber() {
     const val = this._getFullNumber();
-    if (/\p{L}/u.test(val)) {
-      return false;
+    const alphaCharPosition = val.search(/\p{L}/u);
+    if (alphaCharPosition > -1) {
+      const beforeAlphaChar = val.substring(0, alphaCharPosition);
+      const beforeAlphaIsValid = this._utilsIsPossibleNumber(beforeAlphaChar);
+      const isValid = this._utilsIsPossibleNumber(val);
+      return beforeAlphaIsValid && isValid;
     }
+    return this._utilsIsPossibleNumber(val);
+  }
+  _utilsIsPossibleNumber(val) {
     return intlTelInput.utils ? intlTelInput.utils.isPossibleNumber(val, this.selectedCountryData.iso2, this.options.validationNumberType) : null;
   }
   //* Validate the input val (precise)
   isValidNumberPrecise() {
     const val = this._getFullNumber();
-    if (/\p{L}/u.test(val)) {
-      return false;
+    const alphaCharPosition = val.search(/\p{L}/u);
+    if (alphaCharPosition > -1) {
+      const beforeAlphaChar = val.substring(0, alphaCharPosition);
+      const beforeAlphaIsValid = this._utilsIsValidNumber(beforeAlphaChar);
+      const isValid = this._utilsIsValidNumber(val);
+      return beforeAlphaIsValid && isValid;
     }
+    return this._utilsIsValidNumber(val);
+  }
+  _utilsIsValidNumber(val) {
     return intlTelInput.utils ? intlTelInput.utils.isValidNumber(val, this.selectedCountryData.iso2) : null;
   }
   //* Update the selected country, and update the input val accordingly.
@@ -2770,6 +2787,14 @@ var Iti = class {
     this.options.placeholderNumberType = type;
     this._updatePlaceholder();
   }
+  setDisabled(disabled) {
+    this.telInput.disabled = disabled;
+    if (disabled) {
+      this.selectedCountry.setAttribute("disabled", "true");
+    } else {
+      this.selectedCountry.removeAttribute("disabled");
+    }
+  }
 };
 var loadUtils = (path) => {
   if (!intlTelInput.utils && !intlTelInput.startedLoadingUtilsScript) {
@@ -2813,7 +2838,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.7.4"
+    version: "23.8.1"
   }
 );
 var intl_tel_input_default = intlTelInput;
@@ -2832,7 +2857,8 @@ var IntlTelInput = (0, import_react.forwardRef)(function IntlTelInput2({
   },
   usePreciseValidation = false,
   initOptions = {},
-  inputProps = {}
+  inputProps = {},
+  disabled = void 0
 }, ref) {
   const inputRef = (0, import_react.useRef)(null);
   const itiRef = (0, import_react.useRef)(null);
@@ -2877,6 +2903,11 @@ var IntlTelInput = (0, import_react.forwardRef)(function IntlTelInput2({
       }
     };
   }, [update]);
+  (0, import_react.useEffect)(() => {
+    if (itiRef.current && disabled !== void 0) {
+      itiRef.current.setDisabled(disabled);
+    }
+  }, [disabled]);
   return /* @__PURE__ */ import_react.default.createElement(
     "input",
     {

package/react/build/IntlTelInput.d.ts

@@ -969,10 +969,13 @@ declare module "intl-tel-input" {
         getSelectedCountryData(): SelectedCountryData;
         getValidationError(): number;
         isValidNumber(): boolean | null;
+        private _utilsIsPossibleNumber;
         isValidNumberPrecise(): boolean | null;
+        private _utilsIsValidNumber;
         setCountry(iso2: string): void;
         setNumber(number: string): void;
         setPlaceholderNumberType(type: NumberType): void;
+        setDisabled(disabled: boolean): void;
     }
     const intlTelInput: IntlTelInputInterface;
     export default intlTelInput;
@@ -991,6 +994,7 @@ declare module "intl-tel-input/react" {
         usePreciseValidation?: boolean;
         initOptions?: SomeOptions;
         inputProps?: object;
+        disabled?: boolean | undefined;
     };
     export type IntlTelInputRef = {
         getInstance: () => Iti | null;
@@ -1021,6 +1025,7 @@ declare module "intl-tel-input/reactWithUtils" {
         usePreciseValidation?: boolean;
         initOptions?: SomeOptions;
         inputProps?: object;
+        disabled?: boolean | undefined;
     };
     export type IntlTelInputRef = {
         getInstance: () => Iti | null;

package/react/build/IntlTelInput.js

@@ -1956,6 +1956,9 @@ var Iti = class {
   _initTelInputListeners() {
     const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay } = this.options;
     let userOverrideFormatting = false;
+    if (/\p{L}/u.test(this.telInput.value)) {
+      userOverrideFormatting = true;
+    }
     const openDropdownWithPlus = () => {
       this._openDropdown();
       this.searchInput.value = "+";
@@ -2696,17 +2699,31 @@ var Iti = class {
   //* Validate the input val
   isValidNumber() {
     const val = this._getFullNumber();
-    if (/\p{L}/u.test(val)) {
-      return false;
+    const alphaCharPosition = val.search(/\p{L}/u);
+    if (alphaCharPosition > -1) {
+      const beforeAlphaChar = val.substring(0, alphaCharPosition);
+      const beforeAlphaIsValid = this._utilsIsPossibleNumber(beforeAlphaChar);
+      const isValid = this._utilsIsPossibleNumber(val);
+      return beforeAlphaIsValid && isValid;
     }
+    return this._utilsIsPossibleNumber(val);
+  }
+  _utilsIsPossibleNumber(val) {
     return intlTelInput.utils ? intlTelInput.utils.isPossibleNumber(val, this.selectedCountryData.iso2, this.options.validationNumberType) : null;
   }
   //* Validate the input val (precise)
   isValidNumberPrecise() {
     const val = this._getFullNumber();
-    if (/\p{L}/u.test(val)) {
-      return false;
+    const alphaCharPosition = val.search(/\p{L}/u);
+    if (alphaCharPosition > -1) {
+      const beforeAlphaChar = val.substring(0, alphaCharPosition);
+      const beforeAlphaIsValid = this._utilsIsValidNumber(beforeAlphaChar);
+      const isValid = this._utilsIsValidNumber(val);
+      return beforeAlphaIsValid && isValid;
     }
+    return this._utilsIsValidNumber(val);
+  }
+  _utilsIsValidNumber(val) {
     return intlTelInput.utils ? intlTelInput.utils.isValidNumber(val, this.selectedCountryData.iso2) : null;
   }
   //* Update the selected country, and update the input val accordingly.
@@ -2734,6 +2751,14 @@ var Iti = class {
     this.options.placeholderNumberType = type;
     this._updatePlaceholder();
   }
+  setDisabled(disabled) {
+    this.telInput.disabled = disabled;
+    if (disabled) {
+      this.selectedCountry.setAttribute("disabled", "true");
+    } else {
+      this.selectedCountry.removeAttribute("disabled");
+    }
+  }
 };
 var loadUtils = (path) => {
   if (!intlTelInput.utils && !intlTelInput.startedLoadingUtilsScript) {
@@ -2777,7 +2802,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.7.4"
+    version: "23.8.1"
   }
 );
 var intl_tel_input_default = intlTelInput;
@@ -2796,7 +2821,8 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   },
   usePreciseValidation = false,
   initOptions = {},
-  inputProps = {}
+  inputProps = {},
+  disabled = void 0
 }, ref) {
   const inputRef = useRef(null);
   const itiRef = useRef(null);
@@ -2841,6 +2867,11 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
       }
     };
   }, [update]);
+  useEffect(() => {
+    if (itiRef.current && disabled !== void 0) {
+      itiRef.current.setDisabled(disabled);
+    }
+  }, [disabled]);
   return /* @__PURE__ */ React.createElement(
     "input",
     {

package/react/build/IntlTelInputWithUtils.cjs

@@ -1992,6 +1992,9 @@ var Iti = class {
   _initTelInputListeners() {
     const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay } = this.options;
     let userOverrideFormatting = false;
+    if (/\p{L}/u.test(this.telInput.value)) {
+      userOverrideFormatting = true;
+    }
     const openDropdownWithPlus = () => {
       this._openDropdown();
       this.searchInput.value = "+";
@@ -2732,17 +2735,31 @@ var Iti = class {
   //* Validate the input val
   isValidNumber() {
     const val = this._getFullNumber();
-    if (/\p{L}/u.test(val)) {
-      return false;
+    const alphaCharPosition = val.search(/\p{L}/u);
+    if (alphaCharPosition > -1) {
+      const beforeAlphaChar = val.substring(0, alphaCharPosition);
+      const beforeAlphaIsValid = this._utilsIsPossibleNumber(beforeAlphaChar);
+      const isValid = this._utilsIsPossibleNumber(val);
+      return beforeAlphaIsValid && isValid;
     }
+    return this._utilsIsPossibleNumber(val);
+  }
+  _utilsIsPossibleNumber(val) {
     return intlTelInput.utils ? intlTelInput.utils.isPossibleNumber(val, this.selectedCountryData.iso2, this.options.validationNumberType) : null;
   }
   //* Validate the input val (precise)
   isValidNumberPrecise() {
     const val = this._getFullNumber();
-    if (/\p{L}/u.test(val)) {
-      return false;
+    const alphaCharPosition = val.search(/\p{L}/u);
+    if (alphaCharPosition > -1) {
+      const beforeAlphaChar = val.substring(0, alphaCharPosition);
+      const beforeAlphaIsValid = this._utilsIsValidNumber(beforeAlphaChar);
+      const isValid = this._utilsIsValidNumber(val);
+      return beforeAlphaIsValid && isValid;
     }
+    return this._utilsIsValidNumber(val);
+  }
+  _utilsIsValidNumber(val) {
     return intlTelInput.utils ? intlTelInput.utils.isValidNumber(val, this.selectedCountryData.iso2) : null;
   }
   //* Update the selected country, and update the input val accordingly.
@@ -2770,6 +2787,14 @@ var Iti = class {
     this.options.placeholderNumberType = type;
     this._updatePlaceholder();
   }
+  setDisabled(disabled) {
+    this.telInput.disabled = disabled;
+    if (disabled) {
+      this.selectedCountry.setAttribute("disabled", "true");
+    } else {
+      this.selectedCountry.removeAttribute("disabled");
+    }
+  }
 };
 var loadUtils = (path) => {
   if (!intlTelInput.utils && !intlTelInput.startedLoadingUtilsScript) {
@@ -2813,7 +2838,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.7.4"
+    version: "23.8.1"
   }
 );
 var intl_tel_input_default = intlTelInput;
@@ -9048,7 +9073,8 @@ var IntlTelInput = (0, import_react.forwardRef)(function IntlTelInput2({
   },
   usePreciseValidation = false,
   initOptions = {},
-  inputProps = {}
+  inputProps = {},
+  disabled = void 0
 }, ref) {
   const inputRef = (0, import_react.useRef)(null);
   const itiRef = (0, import_react.useRef)(null);
@@ -9093,6 +9119,11 @@ var IntlTelInput = (0, import_react.forwardRef)(function IntlTelInput2({
       }
     };
   }, [update]);
+  (0, import_react.useEffect)(() => {
+    if (itiRef.current && disabled !== void 0) {
+      itiRef.current.setDisabled(disabled);
+    }
+  }, [disabled]);
   return /* @__PURE__ */ import_react.default.createElement(
     "input",
     {

package/react/build/IntlTelInputWithUtils.js

@@ -1956,6 +1956,9 @@ var Iti = class {
   _initTelInputListeners() {
     const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay } = this.options;
     let userOverrideFormatting = false;
+    if (/\p{L}/u.test(this.telInput.value)) {
+      userOverrideFormatting = true;
+    }
     const openDropdownWithPlus = () => {
       this._openDropdown();
       this.searchInput.value = "+";
@@ -2696,17 +2699,31 @@ var Iti = class {
   //* Validate the input val
   isValidNumber() {
     const val = this._getFullNumber();
-    if (/\p{L}/u.test(val)) {
-      return false;
+    const alphaCharPosition = val.search(/\p{L}/u);
+    if (alphaCharPosition > -1) {
+      const beforeAlphaChar = val.substring(0, alphaCharPosition);
+      const beforeAlphaIsValid = this._utilsIsPossibleNumber(beforeAlphaChar);
+      const isValid = this._utilsIsPossibleNumber(val);
+      return beforeAlphaIsValid && isValid;
     }
+    return this._utilsIsPossibleNumber(val);
+  }
+  _utilsIsPossibleNumber(val) {
     return intlTelInput.utils ? intlTelInput.utils.isPossibleNumber(val, this.selectedCountryData.iso2, this.options.validationNumberType) : null;
   }
   //* Validate the input val (precise)
   isValidNumberPrecise() {
     const val = this._getFullNumber();
-    if (/\p{L}/u.test(val)) {
-      return false;
+    const alphaCharPosition = val.search(/\p{L}/u);
+    if (alphaCharPosition > -1) {
+      const beforeAlphaChar = val.substring(0, alphaCharPosition);
+      const beforeAlphaIsValid = this._utilsIsValidNumber(beforeAlphaChar);
+      const isValid = this._utilsIsValidNumber(val);
+      return beforeAlphaIsValid && isValid;
     }
+    return this._utilsIsValidNumber(val);
+  }
+  _utilsIsValidNumber(val) {
     return intlTelInput.utils ? intlTelInput.utils.isValidNumber(val, this.selectedCountryData.iso2) : null;
   }
   //* Update the selected country, and update the input val accordingly.
@@ -2734,6 +2751,14 @@ var Iti = class {
     this.options.placeholderNumberType = type;
     this._updatePlaceholder();
   }
+  setDisabled(disabled) {
+    this.telInput.disabled = disabled;
+    if (disabled) {
+      this.selectedCountry.setAttribute("disabled", "true");
+    } else {
+      this.selectedCountry.removeAttribute("disabled");
+    }
+  }
 };
 var loadUtils = (path) => {
   if (!intlTelInput.utils && !intlTelInput.startedLoadingUtilsScript) {
@@ -2777,7 +2802,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.7.4"
+    version: "23.8.1"
   }
 );
 var intl_tel_input_default = intlTelInput;
@@ -9012,7 +9037,8 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   },
   usePreciseValidation = false,
   initOptions = {},
-  inputProps = {}
+  inputProps = {},
+  disabled = void 0
 }, ref) {
   const inputRef = useRef(null);
   const itiRef = useRef(null);
@@ -9057,6 +9083,11 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
       }
     };
   }, [update]);
+  useEffect(() => {
+    if (itiRef.current && disabled !== void 0) {
+      itiRef.current.setDisabled(disabled);
+    }
+  }, [disabled]);
   return /* @__PURE__ */ React.createElement(
     "input",
     {