@rh-support/components 2.1.4 → 2.1.6

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 (11) hide show
  1. package/lib/cjs/PhoneInput/CountryData.d.ts +2 -2
  2. package/lib/cjs/PhoneInput/CountryData.d.ts.map +1 -1
  3. package/lib/cjs/PhoneInput/CountryData.js +47 -54
  4. package/lib/cjs/PhoneInput/PhoneInput.d.ts.map +1 -1
  5. package/lib/cjs/PhoneInput/PhoneInput.js +61 -15
  6. package/lib/esm/PhoneInput/CountryData.d.ts +2 -2
  7. package/lib/esm/PhoneInput/CountryData.d.ts.map +1 -1
  8. package/lib/esm/PhoneInput/CountryData.js +46 -54
  9. package/lib/esm/PhoneInput/PhoneInput.d.ts.map +1 -1
  10. package/lib/esm/PhoneInput/PhoneInput.js +61 -15
  11. package/package.json +2 -2
package/lib/cjs/PhoneInput/CountryData.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- declare const CountryData: (string | number | string[])[][];
2
- export default CountryData;
1
+ export declare const canadaAreaCodes: string[];
2
+ export declare const COUNTRY_DATA: (string | number | string[])[][];
3
3
  //# sourceMappingURL=CountryData.d.ts.map
package/lib/cjs/PhoneInput/CountryData.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CountryData.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/CountryData.ts"],"names":[],"mappings":"AAkBA,QAAA,MAAM,WAAW,kCAyjBhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"CountryData.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/CountryData.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,eAAe,UA2C3B,CAAC;AAEF,eAAO,MAAM,YAAY,kCAsgBxB,CAAC"}
package/lib/cjs/PhoneInput/CountryData.js CHANGED
@@ -17,7 +17,52 @@
17
17
  // ['north-america', 'south-america', 'central-america', 'carribean',
18
18
  // 'eu-union', 'ex-ussr', 'ex-yugos', 'baltic', 'middle-east', 'north-africa']
19
19
  Object.defineProperty(exports, "__esModule", { value: true });
20
- const CountryData = [
20
+ exports.COUNTRY_DATA = exports.canadaAreaCodes = void 0;
21
+ exports.canadaAreaCodes = [
22
+ '204',
23
+ '226',
24
+ '236',
25
+ '249',
26
+ '250',
27
+ '289',
28
+ '306',
29
+ '343',
30
+ '365',
31
+ '387',
32
+ '403',
33
+ '416',
34
+ '418',
35
+ '431',
36
+ '437',
37
+ '438',
38
+ '450',
39
+ '506',
40
+ '514',
41
+ '519',
42
+ '548',
43
+ '579',
44
+ '581',
45
+ '587',
46
+ '604',
47
+ '613',
48
+ '639',
49
+ '647',
50
+ '672',
51
+ '705',
52
+ '709',
53
+ '742',
54
+ '778',
55
+ '780',
56
+ '782',
57
+ '807',
58
+ '819',
59
+ '825',
60
+ '867',
61
+ '873',
62
+ '902',
63
+ '905',
64
+ ];
65
+ exports.COUNTRY_DATA = [
21
66
  ['Afghanistan', ['asia'], 'af', '93'],
22
67
  ['Albania', ['europe'], 'al', '355'],
23
68
  ['Algeria', ['africa', 'north-africa'], 'dz', '213'],
@@ -90,58 +135,7 @@ const CountryData = [
90
135
  ['Burundi', ['africa'], 'bi', '257'],
91
136
  ['Cambodia', ['asia'], 'kh', '855'],
92
137
  ['Cameroon', ['africa'], 'cm', '237'],
93
- [
94
- 'Canada',
95
- ['america', 'north-america'],
96
- 'ca',
97
- '1',
98
- '(...) ...-....',
99
- 1,
100
- [
101
- '204',
102
- '226',
103
- '236',
104
- '249',
105
- '250',
106
- '289',
107
- '306',
108
- '343',
109
- '365',
110
- '387',
111
- '403',
112
- '416',
113
- '418',
114
- '431',
115
- '437',
116
- '438',
117
- '450',
118
- '506',
119
- '514',
120
- '519',
121
- '548',
122
- '579',
123
- '581',
124
- '587',
125
- '604',
126
- '613',
127
- '639',
128
- '647',
129
- '672',
130
- '705',
131
- '709',
132
- '742',
133
- '778',
134
- '780',
135
- '782',
136
- '807',
137
- '819',
138
- '825',
139
- '867',
140
- '873',
141
- '902',
142
- '905',
143
- ],
144
- ],
138
+ ['Canada', ['america', 'north-america'], 'ca', '1', '(...) ...-....', 1, exports.canadaAreaCodes],
145
139
  ['Cape Verde', ['africa'], 'cv', '238'],
146
140
  ['Caribbean Netherlands', ['america', 'carribean'], 'bq', '599', '', 1],
147
141
  ['Central African Republic', ['africa'], 'cf', '236'],
@@ -587,4 +581,3 @@ const CountryData = [
587
581
  ['Zambia', ['africa'], 'zm', '260'],
588
582
  ['Zimbabwe', ['africa'], 'zw', '263'],
589
583
  ];
590
- exports.default = CountryData;
package/lib/cjs/PhoneInput/PhoneInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AA0DD,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eA+LvC"}
1
+ {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AA2DD,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAmPvC"}
package/lib/cjs/PhoneInput/PhoneInput.js CHANGED
@@ -29,10 +29,10 @@ const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
29
29
  const isEqual_1 = __importDefault(require("lodash/isEqual"));
30
30
  const react_1 = __importStar(require("react"));
31
31
  const react_i18next_1 = require("react-i18next");
32
- const CountryData_1 = __importDefault(require("./CountryData"));
32
+ const CountryData_1 = require("./CountryData");
33
33
  const PREFIX = '+';
34
34
  const DEFAULT_MASK = '... ... ... ... ..';
35
- const alwaysDefaultMask = false;
35
+ const ALWAYS_DEFAULT_MASK = false;
36
36
  // Getting Country phone format
37
37
  function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMask) {
38
38
  if (!predefinedMask || alwaysDefaultMask) {
@@ -42,15 +42,16 @@ function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMas
42
42
  return prefix + ''.padEnd(dialCode.length, '.') + ' ' + predefinedMask;
43
43
  }
44
44
  }
45
- const initializedCountries = CountryData_1.default.map((country) => {
45
+ const initializedCountries = CountryData_1.COUNTRY_DATA.map((country) => {
46
46
  const countryItem = {
47
47
  name: country[0],
48
48
  regions: country[1],
49
49
  iso2: country[2],
50
50
  countryCode: country[3],
51
51
  dialCode: country[3],
52
- format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, alwaysDefaultMask),
52
+ format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, ALWAYS_DEFAULT_MASK),
53
53
  priority: country[5] || 0,
54
+ areaCode: country[6] || [],
54
55
  };
55
56
  return countryItem;
56
57
  });
@@ -70,7 +71,7 @@ const formatNumber = (fullPhoneNumber, localFormat) => {
70
71
  });
71
72
  let pattern = '';
72
73
  let i = 0;
73
- for (let j = 0; j < localFormat.length && i < phone.length; j++) {
74
+ for (let j = 0; j < (localFormat === null || localFormat === void 0 ? void 0 : localFormat.length) && i < phone.length; j++) {
74
75
  if (localFormat[j] === '.') {
75
76
  pattern += phone[i];
76
77
  i++;
@@ -113,24 +114,56 @@ function PhoneInput(props) {
113
114
  iso2: '',
114
115
  countryCode: '',
115
116
  dialCode: '',
116
- format: '', // Number Format (For US, '(...) ...-....' )
117
+ format: '',
118
+ priority: 0,
119
+ areaCode: [''], // Area codes of a country
117
120
  });
118
121
  const setLocalFormat = (phoneNumber) => {
119
122
  let localPhone = phoneNumber.replace(PREFIX, '').trim();
123
+ localPhone = localPhone.replace('(', '').trim();
124
+ localPhone = localPhone.replace(/ +/g, '');
125
+ // if the user selects a value from the dropdown and the country code is the same as prev, iso2 values shouldn't override
126
+ if (!isEmpty_1.default(countryObj) && isEqual_1.default(localPhone, countryObj.dialCode)) {
127
+ return countryObj.format;
128
+ }
120
129
  let localFormat;
121
130
  // Guessing countries according to user input
122
131
  const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
132
+ const canadaDialCode = '1';
133
+ const canadaCountryPhone = CountryData_1.canadaAreaCodes.map((areaCode) => canadaDialCode + areaCode);
134
+ const isCountryCanada = canadaCountryPhone.filter((phone) => localPhone.startsWith(phone)); // checks if phone is Canadian
123
135
  const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
124
- if (!isEmpty_1.default(exactCountry)) {
125
- setIso2(exactCountry[0].iso2.toString());
126
- localFormat = exactCountry[0].format.toString();
127
- onCountryCodeChange && onCountryCodeChange(PREFIX + exactCountry[0].dialCode.toString());
136
+ if (!isEmpty_1.default(isCountryCanada)) {
137
+ const canadaCountryObj = initializedCountries.filter((country) => country.iso2.toString() === 'ca');
138
+ if (isEqual_1.default(canadaCountryObj[0].dialCode.toString(), countryObj.dialCode)) {
139
+ setIso2(countryObj.iso2);
140
+ return countryObj.format;
141
+ }
142
+ setIso2(canadaCountryObj[0].iso2.toString());
143
+ localFormat = canadaCountryObj[0].format.toString();
144
+ onCountryCodeChange && onCountryCodeChange(PREFIX + canadaCountryObj[0].dialCode.toString());
145
+ setFormat(localFormat);
146
+ }
147
+ else if (!isEmpty_1.default(exactCountry)) {
148
+ const localExactCountry = exactCountry.filter((country) => isEqual_1.default(country.priority, 0));
149
+ if (isEqual_1.default(localExactCountry[0].dialCode.toString(), countryObj.dialCode)) {
150
+ setIso2(countryObj.iso2);
151
+ return countryObj.format;
152
+ }
153
+ setIso2(localExactCountry[0].iso2.toString());
154
+ localFormat = localExactCountry[0].format.toString();
155
+ onCountryCodeChange && onCountryCodeChange(PREFIX + localExactCountry[0].dialCode.toString());
128
156
  setFormat(localFormat);
129
157
  }
130
158
  else if (!isEmpty_1.default(possibleCountries)) {
131
- setIso2(possibleCountries[0].iso2.toString());
132
- localFormat = possibleCountries[0].format.toString();
133
- onCountryCodeChange && onCountryCodeChange(PREFIX + possibleCountries[0].dialCode.toString());
159
+ const localPossibleCountry = possibleCountries.filter((country) => isEqual_1.default(country.priority, 0));
160
+ if (isEqual_1.default(localPossibleCountry[0].dialCode.toString(), countryObj.dialCode)) {
161
+ setIso2(countryObj.iso2);
162
+ return countryObj.format;
163
+ }
164
+ setIso2(localPossibleCountry[0].iso2.toString());
165
+ localFormat = localPossibleCountry[0].format.toString();
166
+ onCountryCodeChange && onCountryCodeChange(PREFIX + localPossibleCountry[0].dialCode.toString());
134
167
  setFormat(localFormat);
135
168
  }
136
169
  else {
@@ -156,8 +189,9 @@ function PhoneInput(props) {
156
189
  if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual_1.default(phone, '-')) {
157
190
  onPhoneValueChange(PREFIX + phone.trim());
158
191
  }
159
- else if (phone.length <= localFormat.length) {
160
- onPhoneValueChange(phone);
192
+ else {
193
+ // to allow users to edit phone from between but not from right end, 5 is max length of any country code used when local format is empty
194
+ onPhoneValueChange(phone.slice(0, localFormat.length || 5));
161
195
  }
162
196
  };
163
197
  const onToggle = (isOpen) => {
@@ -217,6 +251,18 @@ function PhoneInput(props) {
217
251
  setFormattedNumber('');
218
252
  return;
219
253
  }
254
+ if (isEmpty_1.default(phoneValue) && isEmpty_1.default(iso2)) {
255
+ setCountryObj({
256
+ name: '',
257
+ regions: [''],
258
+ iso2: '',
259
+ countryCode: '',
260
+ dialCode: '',
261
+ format: '',
262
+ priority: 0,
263
+ areaCode: [''],
264
+ });
265
+ }
220
266
  if (isEmpty_1.default(phoneValue)) {
221
267
  setIso2('');
222
268
  setInvalid && setInvalid(false);
package/lib/esm/PhoneInput/CountryData.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- declare const CountryData: (string | number | string[])[][];
2
- export default CountryData;
1
+ export declare const canadaAreaCodes: string[];
2
+ export declare const COUNTRY_DATA: (string | number | string[])[][];
3
3
  //# sourceMappingURL=CountryData.d.ts.map
package/lib/esm/PhoneInput/CountryData.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CountryData.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/CountryData.ts"],"names":[],"mappings":"AAkBA,QAAA,MAAM,WAAW,kCAyjBhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"CountryData.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/CountryData.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,eAAe,UA2C3B,CAAC;AAEF,eAAO,MAAM,YAAY,kCAsgBxB,CAAC"}
package/lib/esm/PhoneInput/CountryData.js CHANGED
@@ -15,7 +15,51 @@
15
15
  // Sub-regions:
16
16
  // ['north-america', 'south-america', 'central-america', 'carribean',
17
17
  // 'eu-union', 'ex-ussr', 'ex-yugos', 'baltic', 'middle-east', 'north-africa']
18
- const CountryData = [
18
+ export const canadaAreaCodes = [
19
+ '204',
20
+ '226',
21
+ '236',
22
+ '249',
23
+ '250',
24
+ '289',
25
+ '306',
26
+ '343',
27
+ '365',
28
+ '387',
29
+ '403',
30
+ '416',
31
+ '418',
32
+ '431',
33
+ '437',
34
+ '438',
35
+ '450',
36
+ '506',
37
+ '514',
38
+ '519',
39
+ '548',
40
+ '579',
41
+ '581',
42
+ '587',
43
+ '604',
44
+ '613',
45
+ '639',
46
+ '647',
47
+ '672',
48
+ '705',
49
+ '709',
50
+ '742',
51
+ '778',
52
+ '780',
53
+ '782',
54
+ '807',
55
+ '819',
56
+ '825',
57
+ '867',
58
+ '873',
59
+ '902',
60
+ '905',
61
+ ];
62
+ export const COUNTRY_DATA = [
19
63
  ['Afghanistan', ['asia'], 'af', '93'],
20
64
  ['Albania', ['europe'], 'al', '355'],
21
65
  ['Algeria', ['africa', 'north-africa'], 'dz', '213'],
@@ -88,58 +132,7 @@ const CountryData = [
88
132
  ['Burundi', ['africa'], 'bi', '257'],
89
133
  ['Cambodia', ['asia'], 'kh', '855'],
90
134
  ['Cameroon', ['africa'], 'cm', '237'],
91
- [
92
- 'Canada',
93
- ['america', 'north-america'],
94
- 'ca',
95
- '1',
96
- '(...) ...-....',
97
- 1,
98
- [
99
- '204',
100
- '226',
101
- '236',
102
- '249',
103
- '250',
104
- '289',
105
- '306',
106
- '343',
107
- '365',
108
- '387',
109
- '403',
110
- '416',
111
- '418',
112
- '431',
113
- '437',
114
- '438',
115
- '450',
116
- '506',
117
- '514',
118
- '519',
119
- '548',
120
- '579',
121
- '581',
122
- '587',
123
- '604',
124
- '613',
125
- '639',
126
- '647',
127
- '672',
128
- '705',
129
- '709',
130
- '742',
131
- '778',
132
- '780',
133
- '782',
134
- '807',
135
- '819',
136
- '825',
137
- '867',
138
- '873',
139
- '902',
140
- '905',
141
- ],
142
- ],
135
+ ['Canada', ['america', 'north-america'], 'ca', '1', '(...) ...-....', 1, canadaAreaCodes],
143
136
  ['Cape Verde', ['africa'], 'cv', '238'],
144
137
  ['Caribbean Netherlands', ['america', 'carribean'], 'bq', '599', '', 1],
145
138
  ['Central African Republic', ['africa'], 'cf', '236'],
@@ -585,4 +578,3 @@ const CountryData = [
585
578
  ['Zambia', ['africa'], 'zm', '260'],
586
579
  ['Zimbabwe', ['africa'], 'zw', '263'],
587
580
  ];
588
- export default CountryData;
package/lib/esm/PhoneInput/PhoneInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AA0DD,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eA+LvC"}
1
+ {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AA2DD,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAmPvC"}
package/lib/esm/PhoneInput/PhoneInput.js CHANGED
@@ -4,10 +4,10 @@ import isEmpty from 'lodash/isEmpty';
4
4
  import isEqual from 'lodash/isEqual';
5
5
  import React, { useEffect, useState } from 'react';
6
6
  import { useTranslation } from 'react-i18next';
7
- import CountryData from './CountryData';
7
+ import { canadaAreaCodes, COUNTRY_DATA } from './CountryData';
8
8
  const PREFIX = '+';
9
9
  const DEFAULT_MASK = '... ... ... ... ..';
10
- const alwaysDefaultMask = false;
10
+ const ALWAYS_DEFAULT_MASK = false;
11
11
  // Getting Country phone format
12
12
  function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMask) {
13
13
  if (!predefinedMask || alwaysDefaultMask) {
@@ -17,15 +17,16 @@ function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMas
17
17
  return prefix + ''.padEnd(dialCode.length, '.') + ' ' + predefinedMask;
18
18
  }
19
19
  }
20
- const initializedCountries = CountryData.map((country) => {
20
+ const initializedCountries = COUNTRY_DATA.map((country) => {
21
21
  const countryItem = {
22
22
  name: country[0],
23
23
  regions: country[1],
24
24
  iso2: country[2],
25
25
  countryCode: country[3],
26
26
  dialCode: country[3],
27
- format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, alwaysDefaultMask),
27
+ format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, ALWAYS_DEFAULT_MASK),
28
28
  priority: country[5] || 0,
29
+ areaCode: country[6] || [],
29
30
  };
30
31
  return countryItem;
31
32
  });
@@ -45,7 +46,7 @@ const formatNumber = (fullPhoneNumber, localFormat) => {
45
46
  });
46
47
  let pattern = '';
47
48
  let i = 0;
48
- for (let j = 0; j < localFormat.length && i < phone.length; j++) {
49
+ for (let j = 0; j < (localFormat === null || localFormat === void 0 ? void 0 : localFormat.length) && i < phone.length; j++) {
49
50
  if (localFormat[j] === '.') {
50
51
  pattern += phone[i];
51
52
  i++;
@@ -87,24 +88,56 @@ export function PhoneInput(props) {
87
88
  iso2: '',
88
89
  countryCode: '',
89
90
  dialCode: '',
90
- format: '', // Number Format (For US, '(...) ...-....' )
91
+ format: '',
92
+ priority: 0,
93
+ areaCode: [''], // Area codes of a country
91
94
  });
92
95
  const setLocalFormat = (phoneNumber) => {
93
96
  let localPhone = phoneNumber.replace(PREFIX, '').trim();
97
+ localPhone = localPhone.replace('(', '').trim();
98
+ localPhone = localPhone.replace(/ +/g, '');
99
+ // if the user selects a value from the dropdown and the country code is the same as prev, iso2 values shouldn't override
100
+ if (!isEmpty(countryObj) && isEqual(localPhone, countryObj.dialCode)) {
101
+ return countryObj.format;
102
+ }
94
103
  let localFormat;
95
104
  // Guessing countries according to user input
96
105
  const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
106
+ const canadaDialCode = '1';
107
+ const canadaCountryPhone = canadaAreaCodes.map((areaCode) => canadaDialCode + areaCode);
108
+ const isCountryCanada = canadaCountryPhone.filter((phone) => localPhone.startsWith(phone)); // checks if phone is Canadian
97
109
  const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
98
- if (!isEmpty(exactCountry)) {
99
- setIso2(exactCountry[0].iso2.toString());
100
- localFormat = exactCountry[0].format.toString();
101
- onCountryCodeChange && onCountryCodeChange(PREFIX + exactCountry[0].dialCode.toString());
110
+ if (!isEmpty(isCountryCanada)) {
111
+ const canadaCountryObj = initializedCountries.filter((country) => country.iso2.toString() === 'ca');
112
+ if (isEqual(canadaCountryObj[0].dialCode.toString(), countryObj.dialCode)) {
113
+ setIso2(countryObj.iso2);
114
+ return countryObj.format;
115
+ }
116
+ setIso2(canadaCountryObj[0].iso2.toString());
117
+ localFormat = canadaCountryObj[0].format.toString();
118
+ onCountryCodeChange && onCountryCodeChange(PREFIX + canadaCountryObj[0].dialCode.toString());
119
+ setFormat(localFormat);
120
+ }
121
+ else if (!isEmpty(exactCountry)) {
122
+ const localExactCountry = exactCountry.filter((country) => isEqual(country.priority, 0));
123
+ if (isEqual(localExactCountry[0].dialCode.toString(), countryObj.dialCode)) {
124
+ setIso2(countryObj.iso2);
125
+ return countryObj.format;
126
+ }
127
+ setIso2(localExactCountry[0].iso2.toString());
128
+ localFormat = localExactCountry[0].format.toString();
129
+ onCountryCodeChange && onCountryCodeChange(PREFIX + localExactCountry[0].dialCode.toString());
102
130
  setFormat(localFormat);
103
131
  }
104
132
  else if (!isEmpty(possibleCountries)) {
105
- setIso2(possibleCountries[0].iso2.toString());
106
- localFormat = possibleCountries[0].format.toString();
107
- onCountryCodeChange && onCountryCodeChange(PREFIX + possibleCountries[0].dialCode.toString());
133
+ const localPossibleCountry = possibleCountries.filter((country) => isEqual(country.priority, 0));
134
+ if (isEqual(localPossibleCountry[0].dialCode.toString(), countryObj.dialCode)) {
135
+ setIso2(countryObj.iso2);
136
+ return countryObj.format;
137
+ }
138
+ setIso2(localPossibleCountry[0].iso2.toString());
139
+ localFormat = localPossibleCountry[0].format.toString();
140
+ onCountryCodeChange && onCountryCodeChange(PREFIX + localPossibleCountry[0].dialCode.toString());
108
141
  setFormat(localFormat);
109
142
  }
110
143
  else {
@@ -130,8 +163,9 @@ export function PhoneInput(props) {
130
163
  if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual(phone, '-')) {
131
164
  onPhoneValueChange(PREFIX + phone.trim());
132
165
  }
133
- else if (phone.length <= localFormat.length) {
134
- onPhoneValueChange(phone);
166
+ else {
167
+ // to allow users to edit phone from between but not from right end, 5 is max length of any country code used when local format is empty
168
+ onPhoneValueChange(phone.slice(0, localFormat.length || 5));
135
169
  }
136
170
  };
137
171
  const onToggle = (isOpen) => {
@@ -191,6 +225,18 @@ export function PhoneInput(props) {
191
225
  setFormattedNumber('');
192
226
  return;
193
227
  }
228
+ if (isEmpty(phoneValue) && isEmpty(iso2)) {
229
+ setCountryObj({
230
+ name: '',
231
+ regions: [''],
232
+ iso2: '',
233
+ countryCode: '',
234
+ dialCode: '',
235
+ format: '',
236
+ priority: 0,
237
+ areaCode: [''],
238
+ });
239
+ }
194
240
  if (isEmpty(phoneValue)) {
195
241
  setIso2('');
196
242
  setInvalid && setInvalid(false);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rh-support/components",
3
- "version": "2.1.4",
3
+ "version": "2.1.6",
4
4
  "description": "Contains all reusabel components for support app",
5
5
  "author": "Vikas Rathee <vrathee@redhat.com>",
6
6
  "license": "ISC",
@@ -117,5 +117,5 @@
117
117
  "defaults and supports es6-module",
118
118
  "maintained node versions"
119
119
  ],
120
- "gitHead": "d0220cf8078eb0da56f34f1cf0598edad0704669"
120
+ "gitHead": "18d4816c03d679b40b4523e266e375e44344492a"
121
121
  }