intl-tel-input 23.7.4 → 23.8.0

package/package.json

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

package/react/README.md

@@ -29,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 (~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.0/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput react component.
@@ -64,7 +64,11 @@ 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.
+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`._
+
+**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`._
 
 ## Accessing Instance Methods
 

package/react/build/IntlTelInput.cjs

@@ -2770,6 +2770,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 +2821,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.7.4"
+    version: "23.8.0"
   }
 );
 var intl_tel_input_default = intlTelInput;
@@ -2832,7 +2840,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 +2886,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

@@ -973,6 +973,7 @@ declare module "intl-tel-input" {
         setCountry(iso2: string): void;
         setNumber(number: string): void;
         setPlaceholderNumberType(type: NumberType): void;
+        setDisabled(disabled: boolean): void;
     }
     const intlTelInput: IntlTelInputInterface;
     export default intlTelInput;
@@ -991,6 +992,7 @@ declare module "intl-tel-input/react" {
         usePreciseValidation?: boolean;
         initOptions?: SomeOptions;
         inputProps?: object;
+        disabled?: boolean | undefined;
     };
     export type IntlTelInputRef = {
         getInstance: () => Iti | null;
@@ -1021,6 +1023,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

@@ -2734,6 +2734,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 +2785,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.7.4"
+    version: "23.8.0"
   }
 );
 var intl_tel_input_default = intlTelInput;
@@ -2796,7 +2804,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 +2850,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

@@ -2770,6 +2770,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 +2821,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.7.4"
+    version: "23.8.0"
   }
 );
 var intl_tel_input_default = intlTelInput;
@@ -9048,7 +9056,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 +9102,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

@@ -2734,6 +2734,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 +2785,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "23.7.4"
+    version: "23.8.0"
   }
 );
 var intl_tel_input_default = intlTelInput;
@@ -9012,7 +9020,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 +9066,11 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
       }
     };
   }, [update]);
+  useEffect(() => {
+    if (itiRef.current && disabled !== void 0) {
+      itiRef.current.setDisabled(disabled);
+    }
+  }, [disabled]);
   return /* @__PURE__ */ React.createElement(
     "input",
     {