@rh-support/components 2.1.5 → 2.1.7

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 +45 -17
  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 +45 -17
  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,eAiNvC"}
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,eAgPvC"}
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
  });
@@ -113,11 +114,14 @@ 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();
120
123
  localPhone = localPhone.replace('(', '').trim();
124
+ localPhone = localPhone.replace(/ +/g, '');
121
125
  // if the user selects a value from the dropdown and the country code is the same as prev, iso2 values shouldn't override
122
126
  if (!isEmpty_1.default(countryObj) && isEqual_1.default(localPhone, countryObj.dialCode)) {
123
127
  return countryObj.format;
@@ -125,25 +129,39 @@ function PhoneInput(props) {
125
129
  let localFormat;
126
130
  // Guessing countries according to user input
127
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
128
135
  const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
129
- if (!isEmpty_1.default(exactCountry)) {
130
- if (isEqual_1.default(exactCountry[0].dialCode.toString(), countryObj.dialCode)) {
136
+ if (!isEmpty_1.default(isCountryCanada)) {
137
+ const canadaCountryObj = initializedCountries.filter((country) => country.iso2.toString() === 'ca');
138
+ setIso2(canadaCountryObj[0].iso2.toString());
139
+ localFormat = canadaCountryObj[0].format.toString();
140
+ onCountryCodeChange && onCountryCodeChange(PREFIX + canadaCountryObj[0].dialCode.toString());
141
+ setFormat(localFormat);
142
+ }
143
+ else if (!isEmpty_1.default(exactCountry)) {
144
+ const localExactCountry = exactCountry.filter((country) => isEqual_1.default(country.priority, 0));
145
+ if (isEqual_1.default(localExactCountry[0].dialCode.toString(), countryObj.dialCode)) {
131
146
  setIso2(countryObj.iso2);
147
+ onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
132
148
  return countryObj.format;
133
149
  }
134
- setIso2(exactCountry[0].iso2.toString());
135
- localFormat = exactCountry[0].format.toString();
136
- onCountryCodeChange && onCountryCodeChange(PREFIX + exactCountry[0].dialCode.toString());
150
+ setIso2(localExactCountry[0].iso2.toString());
151
+ localFormat = localExactCountry[0].format.toString();
152
+ onCountryCodeChange && onCountryCodeChange(PREFIX + localExactCountry[0].dialCode.toString());
137
153
  setFormat(localFormat);
138
154
  }
139
155
  else if (!isEmpty_1.default(possibleCountries)) {
140
- if (isEqual_1.default(possibleCountries[0].dialCode.toString(), countryObj.dialCode)) {
156
+ const localPossibleCountry = possibleCountries.filter((country) => isEqual_1.default(country.priority, 0));
157
+ if (isEqual_1.default(localPossibleCountry[0].dialCode.toString(), countryObj.dialCode)) {
141
158
  setIso2(countryObj.iso2);
159
+ onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
142
160
  return countryObj.format;
143
161
  }
144
- setIso2(possibleCountries[0].iso2.toString());
145
- localFormat = possibleCountries[0].format.toString();
146
- onCountryCodeChange && onCountryCodeChange(PREFIX + possibleCountries[0].dialCode.toString());
162
+ setIso2(localPossibleCountry[0].iso2.toString());
163
+ localFormat = localPossibleCountry[0].format.toString();
164
+ onCountryCodeChange && onCountryCodeChange(PREFIX + localPossibleCountry[0].dialCode.toString());
147
165
  setFormat(localFormat);
148
166
  }
149
167
  else {
@@ -169,8 +187,9 @@ function PhoneInput(props) {
169
187
  if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual_1.default(phone, '-')) {
170
188
  onPhoneValueChange(PREFIX + phone.trim());
171
189
  }
172
- else if (phone.length <= (localFormat === null || localFormat === void 0 ? void 0 : localFormat.length)) {
173
- onPhoneValueChange(phone);
190
+ else {
191
+ // 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
192
+ onPhoneValueChange(phone.slice(0, localFormat.length || 5));
174
193
  }
175
194
  };
176
195
  const onToggle = (isOpen) => {
@@ -231,7 +250,16 @@ function PhoneInput(props) {
231
250
  return;
232
251
  }
233
252
  if (isEmpty_1.default(phoneValue) && isEmpty_1.default(iso2)) {
234
- setCountryObj({ name: '', regions: [''], iso2: '', countryCode: '', dialCode: '', format: '' });
253
+ setCountryObj({
254
+ name: '',
255
+ regions: [''],
256
+ iso2: '',
257
+ countryCode: '',
258
+ dialCode: '',
259
+ format: '',
260
+ priority: 0,
261
+ areaCode: [''],
262
+ });
235
263
  }
236
264
  if (isEmpty_1.default(phoneValue)) {
237
265
  setIso2('');
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,eAiNvC"}
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,eAgPvC"}
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
  });
@@ -87,11 +88,14 @@ 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();
94
97
  localPhone = localPhone.replace('(', '').trim();
98
+ localPhone = localPhone.replace(/ +/g, '');
95
99
  // if the user selects a value from the dropdown and the country code is the same as prev, iso2 values shouldn't override
96
100
  if (!isEmpty(countryObj) && isEqual(localPhone, countryObj.dialCode)) {
97
101
  return countryObj.format;
@@ -99,25 +103,39 @@ export function PhoneInput(props) {
99
103
  let localFormat;
100
104
  // Guessing countries according to user input
101
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
102
109
  const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
103
- if (!isEmpty(exactCountry)) {
104
- if (isEqual(exactCountry[0].dialCode.toString(), countryObj.dialCode)) {
110
+ if (!isEmpty(isCountryCanada)) {
111
+ const canadaCountryObj = initializedCountries.filter((country) => country.iso2.toString() === 'ca');
112
+ setIso2(canadaCountryObj[0].iso2.toString());
113
+ localFormat = canadaCountryObj[0].format.toString();
114
+ onCountryCodeChange && onCountryCodeChange(PREFIX + canadaCountryObj[0].dialCode.toString());
115
+ setFormat(localFormat);
116
+ }
117
+ else if (!isEmpty(exactCountry)) {
118
+ const localExactCountry = exactCountry.filter((country) => isEqual(country.priority, 0));
119
+ if (isEqual(localExactCountry[0].dialCode.toString(), countryObj.dialCode)) {
105
120
  setIso2(countryObj.iso2);
121
+ onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
106
122
  return countryObj.format;
107
123
  }
108
- setIso2(exactCountry[0].iso2.toString());
109
- localFormat = exactCountry[0].format.toString();
110
- onCountryCodeChange && onCountryCodeChange(PREFIX + exactCountry[0].dialCode.toString());
124
+ setIso2(localExactCountry[0].iso2.toString());
125
+ localFormat = localExactCountry[0].format.toString();
126
+ onCountryCodeChange && onCountryCodeChange(PREFIX + localExactCountry[0].dialCode.toString());
111
127
  setFormat(localFormat);
112
128
  }
113
129
  else if (!isEmpty(possibleCountries)) {
114
- if (isEqual(possibleCountries[0].dialCode.toString(), countryObj.dialCode)) {
130
+ const localPossibleCountry = possibleCountries.filter((country) => isEqual(country.priority, 0));
131
+ if (isEqual(localPossibleCountry[0].dialCode.toString(), countryObj.dialCode)) {
115
132
  setIso2(countryObj.iso2);
133
+ onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
116
134
  return countryObj.format;
117
135
  }
118
- setIso2(possibleCountries[0].iso2.toString());
119
- localFormat = possibleCountries[0].format.toString();
120
- onCountryCodeChange && onCountryCodeChange(PREFIX + possibleCountries[0].dialCode.toString());
136
+ setIso2(localPossibleCountry[0].iso2.toString());
137
+ localFormat = localPossibleCountry[0].format.toString();
138
+ onCountryCodeChange && onCountryCodeChange(PREFIX + localPossibleCountry[0].dialCode.toString());
121
139
  setFormat(localFormat);
122
140
  }
123
141
  else {
@@ -143,8 +161,9 @@ export function PhoneInput(props) {
143
161
  if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual(phone, '-')) {
144
162
  onPhoneValueChange(PREFIX + phone.trim());
145
163
  }
146
- else if (phone.length <= (localFormat === null || localFormat === void 0 ? void 0 : localFormat.length)) {
147
- onPhoneValueChange(phone);
164
+ else {
165
+ // 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
166
+ onPhoneValueChange(phone.slice(0, localFormat.length || 5));
148
167
  }
149
168
  };
150
169
  const onToggle = (isOpen) => {
@@ -205,7 +224,16 @@ export function PhoneInput(props) {
205
224
  return;
206
225
  }
207
226
  if (isEmpty(phoneValue) && isEmpty(iso2)) {
208
- setCountryObj({ name: '', regions: [''], iso2: '', countryCode: '', dialCode: '', format: '' });
227
+ setCountryObj({
228
+ name: '',
229
+ regions: [''],
230
+ iso2: '',
231
+ countryCode: '',
232
+ dialCode: '',
233
+ format: '',
234
+ priority: 0,
235
+ areaCode: [''],
236
+ });
209
237
  }
210
238
  if (isEmpty(phoneValue)) {
211
239
  setIso2('');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rh-support/components",
3
- "version": "2.1.5",
3
+ "version": "2.1.7",
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": "4de9544feb2e412e3f3fc6c95843cce2419a026c"
120
+ "gitHead": "ea9b9ee30bf7f2cbb008a2100da620e69f8214e2"
121
121
  }