intl-tel-input 19.2.1 → 19.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/build/js/data.js +1 -1
  2. package/build/js/data.min.js +1 -1
  3. package/build/js/intlTelInput-jquery.js +2 -2
  4. package/build/js/intlTelInput-jquery.min.js +2 -2
  5. package/build/js/intlTelInput.js +2 -2
  6. package/build/js/intlTelInput.min.js +2 -2
  7. package/composer.json +1 -1
  8. package/package.json +2 -2
  9. package/react/build/IntlTelInput.cjs.js +2 -2
  10. package/react/build/IntlTelInput.cjs.js.map +3 -3
  11. package/react/build/IntlTelInput.esm.js +2 -2
  12. package/react/build/IntlTelInput.esm.js.map +3 -3
  13. package/react/demo/SimpleApp.js +18 -0
  14. package/react/demo/{DemoApp.js → ValidationApp.js} +3 -3
  15. package/react/demo/simple-bundle.js +25010 -0
  16. package/react/demo/{index.html → simple.html} +1 -1
  17. package/react/demo/{demo-bundle.js → validation-bundle.js} +25 -22
  18. package/react/demo/validation.html +18 -0
  19. package/react/src/IntlTelInput.js +18 -15
package/react/demo/{index.html → simple.html} RENAMED
@@ -12,7 +12,7 @@
12
12
  <body>
13
13
  <h1>IntlTelInput React Component</h1>
14
14
  <div id="app"></div>
15
- <script src="./demo-bundle.js"></script>
15
+ <script src="./simple-bundle.js"></script>
16
16
  </body>
17
17
 
18
18
  </html>
package/react/demo/{demo-bundle.js → validation-bundle.js} RENAMED
@@ -24299,8 +24299,8 @@ var require_IntlTelInput_cjs = __commonJS({
24299
24299
  };
24300
24300
  var G = (p, h, f, m) => {
24301
24301
  if (h && typeof h == "object" || typeof h == "function")
24302
- for (let _ of tt(h))
24303
- !it.call(p, _) && _ !== f && A(p, _, { get: () => h[_], enumerable: !(m = X(h, _)) || m.enumerable });
24302
+ for (let C of tt(h))
24303
+ !it.call(p, C) && C !== f && A(p, C, { get: () => h[C], enumerable: !(m = X(h, C)) || m.enumerable });
24304
24304
  return p;
24305
24305
  };
24306
24306
  var x = (p, h, f) => (f = p != null ? Q(et(p)) : {}, G(h || !p || !p.__esModule ? A(f, "default", { value: p, enumerable: true }) : f, p));
@@ -24315,7 +24315,7 @@ var require_IntlTelInput_cjs = __commonJS({
24315
24315
  var m = h[f];
24316
24316
  h[f] = { name: m[0], iso2: m[1], dialCode: m[2], priority: m[3] || 0, areaCodes: m[4] || null };
24317
24317
  }
24318
- function _(s) {
24318
+ function C(s) {
24319
24319
  for (var n = 1; n < arguments.length; n++) {
24320
24320
  var t = arguments[n] != null ? Object(arguments[n]) : {}, e = Object.keys(t);
24321
24321
  typeof Object.getOwnPropertySymbols == "function" && e.push.apply(e, Object.getOwnPropertySymbols(t).filter(function(i) {
@@ -24330,9 +24330,9 @@ var require_IntlTelInput_cjs = __commonJS({
24330
24330
  return n = M(n), n in s ? Object.defineProperty(s, n, { value: t, enumerable: true, configurable: true, writable: true }) : s[n] = t, s;
24331
24331
  }
24332
24332
  function b(s, n) {
24333
- return P(s) || F(s, n) || I(s, n) || C();
24333
+ return P(s) || F(s, n) || I(s, n) || _();
24334
24334
  }
24335
- function C() {
24335
+ function _() {
24336
24336
  throw new TypeError(`Invalid attempt to destructure non-iterable instance.
24337
24337
  In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`);
24338
24338
  }
@@ -24514,7 +24514,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
24514
24514
  var y = this._createEl("div", { class: g });
24515
24515
  this.telInput.parentNode.insertBefore(y, this.telInput);
24516
24516
  var D = e || o || i;
24517
- if (D && (this.flagsContainer = this._createEl("div", { class: "iti__flag-container" }, y)), y.appendChild(this.telInput), D && (this.selectedFlag = this._createEl("div", _({ class: "iti__selected-flag" }, e && { role: "combobox", "aria-haspopup": "listbox", "aria-controls": "iti-".concat(this.id, "__country-listbox"), "aria-expanded": "false", "aria-label": this.options.i18n.selectedCountryAriaLabel || "Selected country" }), this.flagsContainer)), o && (this.selectedFlagInner = this._createEl("div", { class: "iti__flag" }, this.selectedFlag)), this.selectedFlag && this.telInput.disabled && this.selectedFlag.setAttribute("aria-disabled", "true"), i && (this.selectedDialCode = this._createEl("div", { class: "iti__selected-dial-code" }, this.selectedFlag)), e) {
24517
+ if (D && (this.flagsContainer = this._createEl("div", { class: "iti__flag-container" }, y)), y.appendChild(this.telInput), D && (this.selectedFlag = this._createEl("div", C({ class: "iti__selected-flag" }, e && { role: "combobox", "aria-haspopup": "listbox", "aria-controls": "iti-".concat(this.id, "__country-listbox"), "aria-expanded": "false", "aria-label": this.options.i18n.selectedCountryAriaLabel || "Selected country" }), this.flagsContainer)), o && (this.selectedFlagInner = this._createEl("div", { class: "iti__flag" }, this.selectedFlag)), this.selectedFlag && this.telInput.disabled && this.selectedFlag.setAttribute("aria-disabled", "true"), i && (this.selectedDialCode = this._createEl("div", { class: "iti__selected-dial-code" }, this.selectedFlag)), e) {
24518
24518
  this.telInput.disabled || this.selectedFlag.setAttribute("tabindex", "0"), this.dropdownArrow = this._createEl("div", { class: "iti__arrow" }, this.selectedFlag);
24519
24519
  var J = u ? "" : "iti--flexible-dropdown-width";
24520
24520
  if (this.dropdownContent = this._createEl("div", { class: "iti__dropdown-content iti__hide ".concat(J) }), v && (this.searchInput = this._createEl("input", { type: "text", class: "iti__search-input", placeholder: this.options.i18n.searchPlaceholder || "Search" }, this.dropdownContent)), this.countryList = this._createEl("ul", { class: "iti__country-list", id: "iti-".concat(this.id, "__country-listbox"), role: "listbox", "aria-label": this.options.i18n.countryListAriaLabel || "List of countries" }, this.dropdownContent), this.preferredCountries.length && !v && (this._appendListItems(this.preferredCountries, "iti__preferred", true), this._createEl("li", { class: "iti__divider", "aria-hidden": "true" }, this.countryList)), this._appendListItems(this.countries, "iti__standard"), l) {
@@ -24888,7 +24888,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
24888
24888
  j(s);
24889
24889
  }
24890
24890
  return null;
24891
- }, L.defaults = B, L.version = "19.2.0", function(s, n) {
24891
+ }, L.defaults = B, L.version = "19.2.2", function(s, n) {
24892
24892
  var t = new Y(s, n);
24893
24893
  return t._init(), s.setAttribute("data-intl-tel-input-id", t.id), window.intlTelInputGlobals.instances[t.id] = t, t;
24894
24894
  };
@@ -24901,28 +24901,31 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
24901
24901
  var w = x(require_react());
24902
24902
  var d = x(require_prop_types());
24903
24903
  var K = x(R());
24904
- var O = ({ initialValue: p, setCountryIso: h, setNumber: f, setIsValid: m, setErrorCode: _, initOptions: N }) => {
24905
- let b = (0, w.useRef)(null), C = (0, w.useRef)(null), I = () => {
24906
- let k = C.current.getNumber(), F = C.current.getSelectedCountryData().iso2;
24907
- if (f(k), h(F), C.current.isValidNumber())
24908
- m(true), _(null);
24904
+ var O = ({ initialValue: p, onChangeNumber: h, onChangeCountry: f, onChangeValidity: m, onChangeErrorCode: C, initOptions: N }) => {
24905
+ let b = (0, w.useRef)(null), _ = (0, w.useRef)(null), I = () => {
24906
+ let k = _.current.getNumber(), F = _.current.getSelectedCountryData().iso2;
24907
+ if (h(k), f(F), _.current.isValidNumber())
24908
+ m(true), C(null);
24909
24909
  else {
24910
- let P = C.current.getValidationError();
24911
- m(false), _(P);
24910
+ let P = _.current.getValidationError();
24911
+ m(false), C(P);
24912
24912
  }
24913
24913
  };
24914
- return (0, w.useEffect)(() => (C.current = (0, K.default)(b.current, N), b.current.addEventListener("countrychange", I), () => {
24915
- b.current.removeEventListener("countrychange", I), C.current.destroy();
24914
+ return (0, w.useEffect)(() => (_.current = (0, K.default)(b.current, N), b.current.addEventListener("countrychange", I), () => {
24915
+ b.current.removeEventListener("countrychange", I), _.current.destroy();
24916
24916
  }), []), w.default.createElement("input", { type: "phone", ref: b, onInput: I, defaultValue: p });
24917
24917
  };
24918
- O.propTypes = { initialValue: d.default.string, setNumber: d.default.func.isRequired, setCountryIso: d.default.func, setIsValid: d.default.func.isRequired, setErrorCode: d.default.func.isRequired, initOptions: d.default.shape({ allowDropdown: d.default.bool, autoInsertDialCode: d.default.bool, autoPlaceholder: d.default.string, containerClass: d.default.string, countrySearch: d.default.bool, customPlaceholder: d.default.func, dropdownContainer: d.default.node, excludeCountries: d.default.arrayOf(d.default.string), fixDropdownWidth: d.default.bool, formatAsYouType: d.default.bool, formatOnDisplay: d.default.bool, geoIpLookup: d.default.func, hiddenInput: d.default.func, i18n: d.default.objectOf(d.default.string), initialCountry: d.default.string, nationalMode: d.default.bool, onlyCountries: d.default.arrayOf(d.default.string), placeholderNumberType: d.default.string, preferredCountries: d.default.arrayOf(d.default.string), showFlags: d.default.bool, showSelectedDialCode: d.default.bool, useFullscreenPopup: d.default.bool, utilsScript: d.default.string }) };
24919
- O.defaultProps = { initialValue: "", setCountryIso: () => {
24918
+ O.propTypes = { initialValue: d.default.string, onChangeNumber: d.default.func, onChangeCountry: d.default.func, onChangeValidity: d.default.func, onChangeErrorCode: d.default.func, initOptions: d.default.shape({ allowDropdown: d.default.bool, autoInsertDialCode: d.default.bool, autoPlaceholder: d.default.string, containerClass: d.default.string, countrySearch: d.default.bool, customPlaceholder: d.default.func, dropdownContainer: d.default.node, excludeCountries: d.default.arrayOf(d.default.string), fixDropdownWidth: d.default.bool, formatAsYouType: d.default.bool, formatOnDisplay: d.default.bool, geoIpLookup: d.default.func, hiddenInput: d.default.func, i18n: d.default.objectOf(d.default.string), initialCountry: d.default.string, nationalMode: d.default.bool, onlyCountries: d.default.arrayOf(d.default.string), placeholderNumberType: d.default.string, preferredCountries: d.default.arrayOf(d.default.string), showFlags: d.default.bool, showSelectedDialCode: d.default.bool, useFullscreenPopup: d.default.bool, utilsScript: d.default.string }) };
24919
+ O.defaultProps = { initialValue: "", onChangeNumber: () => {
24920
+ }, onChangeCountry: () => {
24921
+ }, onChangeValidity: () => {
24922
+ }, onChangeErrorCode: () => {
24920
24923
  }, initOptions: {} };
24921
24924
  var st = O;
24922
24925
  }
24923
24926
  });
24924
24927
 
24925
- // react/demo/DemoApp.js
24928
+ // react/demo/ValidationApp.js
24926
24929
  var import_react = __toESM(require_react());
24927
24930
  var import_client = __toESM(require_client());
24928
24931
  var import_IntlTelInput = __toESM(require_IntlTelInput_cjs());
@@ -24949,9 +24952,9 @@ var DemoApp = () => {
24949
24952
  return /* @__PURE__ */ import_react.default.createElement("form", null, /* @__PURE__ */ import_react.default.createElement(
24950
24953
  import_IntlTelInput.default,
24951
24954
  {
24952
- setNumber,
24953
- setIsValid,
24954
- setErrorCode,
24955
+ onChangeNumber: setNumber,
24956
+ onChangeValidity: setIsValid,
24957
+ onChangeErrorCode: setErrorCode,
24955
24958
  initOptions: {
24956
24959
  initialCountry: "us",
24957
24960
  utilsScript: "../../build/js/utils.js"
package/react/demo/validation.html ADDED
@@ -0,0 +1,18 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <title>IntlTelInput React Component</title>
8
+ <link rel="stylesheet" href="../../build/css/intlTelInput.css" />
9
+ <link rel="stylesheet" href="../../build/css/demo.css" />
10
+ </head>
11
+
12
+ <body>
13
+ <h1>IntlTelInput React Component</h1>
14
+ <div id="app"></div>
15
+ <script src="./validation-bundle.js"></script>
16
+ </body>
17
+
18
+ </html>
package/react/src/IntlTelInput.js CHANGED
@@ -5,10 +5,10 @@ import intlTelInput from "../../build/js/intlTelInput";
5
5
 
6
6
  const IntlTelInput = ({
7
7
  initialValue,
8
- setCountryIso,
9
- setNumber,
10
- setIsValid,
11
- setErrorCode,
8
+ onChangeNumber,
9
+ onChangeCountry,
10
+ onChangeValidity,
11
+ onChangeErrorCode,
12
12
  initOptions,
13
13
  }) => {
14
14
  const inputRef = useRef(null);
@@ -20,16 +20,16 @@ const IntlTelInput = ({
20
20
  // note: this number will be in standard E164 format, but any container component can use
21
21
  // intlTelInputUtils.formatNumber() to convert this to another format
22
22
  // as well as intlTelInputUtils.getNumberType() etc. if need be
23
- setNumber(num);
24
- setCountryIso(countryIso);
23
+ onChangeNumber(num);
24
+ onChangeCountry(countryIso);
25
25
 
26
26
  if (itiRef.current.isValidNumber()) {
27
- setIsValid(true);
28
- setErrorCode(null);
27
+ onChangeValidity(true);
28
+ onChangeErrorCode(null);
29
29
  } else {
30
30
  const errorCode = itiRef.current.getValidationError();
31
- setIsValid(false);
32
- setErrorCode(errorCode);
31
+ onChangeValidity(false);
32
+ onChangeErrorCode(errorCode);
33
33
  }
34
34
  };
35
35
 
@@ -54,10 +54,10 @@ const IntlTelInput = ({
54
54
 
55
55
  IntlTelInput.propTypes = {
56
56
  initialValue: PropTypes.string,
57
- setNumber: PropTypes.func.isRequired,
58
- setCountryIso: PropTypes.func,
59
- setIsValid: PropTypes.func.isRequired,
60
- setErrorCode: PropTypes.func.isRequired,
57
+ onChangeNumber: PropTypes.func,
58
+ onChangeCountry: PropTypes.func,
59
+ onChangeValidity: PropTypes.func,
60
+ onChangeErrorCode: PropTypes.func,
61
61
  initOptions: PropTypes.shape({
62
62
  allowDropdown: PropTypes.bool,
63
63
  autoInsertDialCode: PropTypes.bool,
@@ -87,7 +87,10 @@ IntlTelInput.propTypes = {
87
87
 
88
88
  IntlTelInput.defaultProps = {
89
89
  initialValue: "",
90
- setCountryIso: () => {},
90
+ onChangeNumber: () => {},
91
+ onChangeCountry: () => {},
92
+ onChangeValidity: () => {},
93
+ onChangeErrorCode: () => {},
91
94
  initOptions: {},
92
95
  };
93
96