@rh-support/components 2.1.5 → 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 +47 -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 +47 -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,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
  });
@@ -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,41 @@ 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
+ if (isEqual_1.default(canadaCountryObj[0].dialCode.toString(), countryObj.dialCode)) {
131
139
  setIso2(countryObj.iso2);
132
140
  return countryObj.format;
133
141
  }
134
- setIso2(exactCountry[0].iso2.toString());
135
- localFormat = exactCountry[0].format.toString();
136
- onCountryCodeChange && onCountryCodeChange(PREFIX + exactCountry[0].dialCode.toString());
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());
137
156
  setFormat(localFormat);
138
157
  }
139
158
  else if (!isEmpty_1.default(possibleCountries)) {
140
- if (isEqual_1.default(possibleCountries[0].dialCode.toString(), countryObj.dialCode)) {
159
+ const localPossibleCountry = possibleCountries.filter((country) => isEqual_1.default(country.priority, 0));
160
+ if (isEqual_1.default(localPossibleCountry[0].dialCode.toString(), countryObj.dialCode)) {
141
161
  setIso2(countryObj.iso2);
142
162
  return countryObj.format;
143
163
  }
144
- setIso2(possibleCountries[0].iso2.toString());
145
- localFormat = possibleCountries[0].format.toString();
146
- onCountryCodeChange && onCountryCodeChange(PREFIX + possibleCountries[0].dialCode.toString());
164
+ setIso2(localPossibleCountry[0].iso2.toString());
165
+ localFormat = localPossibleCountry[0].format.toString();
166
+ onCountryCodeChange && onCountryCodeChange(PREFIX + localPossibleCountry[0].dialCode.toString());
147
167
  setFormat(localFormat);
148
168
  }
149
169
  else {
@@ -169,8 +189,9 @@ function PhoneInput(props) {
169
189
  if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual_1.default(phone, '-')) {
170
190
  onPhoneValueChange(PREFIX + phone.trim());
171
191
  }
172
- else if (phone.length <= (localFormat === null || localFormat === void 0 ? void 0 : localFormat.length)) {
173
- 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));
174
195
  }
175
196
  };
176
197
  const onToggle = (isOpen) => {
@@ -231,7 +252,16 @@ function PhoneInput(props) {
231
252
  return;
232
253
  }
233
254
  if (isEmpty_1.default(phoneValue) && isEmpty_1.default(iso2)) {
234
- setCountryObj({ name: '', regions: [''], iso2: '', countryCode: '', dialCode: '', format: '' });
255
+ setCountryObj({
256
+ name: '',
257
+ regions: [''],
258
+ iso2: '',
259
+ countryCode: '',
260
+ dialCode: '',
261
+ format: '',
262
+ priority: 0,
263
+ areaCode: [''],
264
+ });
235
265
  }
236
266
  if (isEmpty_1.default(phoneValue)) {
237
267
  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,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
  });
@@ -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,41 @@ 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
+ if (isEqual(canadaCountryObj[0].dialCode.toString(), countryObj.dialCode)) {
105
113
  setIso2(countryObj.iso2);
106
114
  return countryObj.format;
107
115
  }
108
- setIso2(exactCountry[0].iso2.toString());
109
- localFormat = exactCountry[0].format.toString();
110
- onCountryCodeChange && onCountryCodeChange(PREFIX + exactCountry[0].dialCode.toString());
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());
111
130
  setFormat(localFormat);
112
131
  }
113
132
  else if (!isEmpty(possibleCountries)) {
114
- if (isEqual(possibleCountries[0].dialCode.toString(), countryObj.dialCode)) {
133
+ const localPossibleCountry = possibleCountries.filter((country) => isEqual(country.priority, 0));
134
+ if (isEqual(localPossibleCountry[0].dialCode.toString(), countryObj.dialCode)) {
115
135
  setIso2(countryObj.iso2);
116
136
  return countryObj.format;
117
137
  }
118
- setIso2(possibleCountries[0].iso2.toString());
119
- localFormat = possibleCountries[0].format.toString();
120
- onCountryCodeChange && onCountryCodeChange(PREFIX + possibleCountries[0].dialCode.toString());
138
+ setIso2(localPossibleCountry[0].iso2.toString());
139
+ localFormat = localPossibleCountry[0].format.toString();
140
+ onCountryCodeChange && onCountryCodeChange(PREFIX + localPossibleCountry[0].dialCode.toString());
121
141
  setFormat(localFormat);
122
142
  }
123
143
  else {
@@ -143,8 +163,9 @@ export function PhoneInput(props) {
143
163
  if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual(phone, '-')) {
144
164
  onPhoneValueChange(PREFIX + phone.trim());
145
165
  }
146
- else if (phone.length <= (localFormat === null || localFormat === void 0 ? void 0 : localFormat.length)) {
147
- 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));
148
169
  }
149
170
  };
150
171
  const onToggle = (isOpen) => {
@@ -205,7 +226,16 @@ export function PhoneInput(props) {
205
226
  return;
206
227
  }
207
228
  if (isEmpty(phoneValue) && isEmpty(iso2)) {
208
- setCountryObj({ name: '', regions: [''], iso2: '', countryCode: '', dialCode: '', format: '' });
229
+ setCountryObj({
230
+ name: '',
231
+ regions: [''],
232
+ iso2: '',
233
+ countryCode: '',
234
+ dialCode: '',
235
+ format: '',
236
+ priority: 0,
237
+ areaCode: [''],
238
+ });
209
239
  }
210
240
  if (isEmpty(phoneValue)) {
211
241
  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.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": "4de9544feb2e412e3f3fc6c95843cce2419a026c"
120
+ "gitHead": "18d4816c03d679b40b4523e266e375e44344492a"
121
121
  }