@rh-support/components 2.0.13 → 2.1.1

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 (7) hide show
  1. package/lib/cjs/PhoneInput/PhoneInput.d.ts.map +1 -1
  2. package/lib/cjs/PhoneInput/PhoneInput.js +24 -20
  3. package/lib/cjs/PhoneInput/PhoneInput.scss +0 -4
  4. package/lib/esm/PhoneInput/PhoneInput.d.ts.map +1 -1
  5. package/lib/esm/PhoneInput/PhoneInput.js +24 -20
  6. package/lib/esm/PhoneInput/PhoneInput.scss +0 -4
  7. package/package.json +6 -6
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;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAsOvC"}
1
+ {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAS3B,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;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAwOvC"}
package/lib/cjs/PhoneInput/PhoneInput.js CHANGED
@@ -28,7 +28,6 @@ const react_core_1 = require("@patternfly/react-core");
28
28
  const lodash_1 = require("lodash");
29
29
  const react_1 = __importStar(require("react"));
30
30
  const react_i18next_1 = require("react-i18next");
31
- // import { usePrevious } from '../hooks/usePrevious';
32
31
  const CountryData_1 = __importDefault(require("./CountryData"));
33
32
  function PhoneInput(props) {
34
33
  const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid } = props;
@@ -37,8 +36,8 @@ function PhoneInput(props) {
37
36
  const [iso2, setIso2] = react_1.useState('');
38
37
  const [formattedNumber, setFormattedNumber] = react_1.useState('');
39
38
  const [format, setFormat] = react_1.useState('');
40
- const prefix = '+';
41
- const defaultMask = '... ... ... ... ..';
39
+ const PREFIX = '+';
40
+ const DEFAULT_MASK = '... ... ... ... ..';
42
41
  const alwaysDefaultMask = false;
43
42
  const [countryObj, setCountryObj] = react_1.useState({
44
43
  name: '',
@@ -64,27 +63,27 @@ function PhoneInput(props) {
64
63
  iso2: country[2],
65
64
  countryCode: country[3],
66
65
  dialCode: country[3],
67
- format: getMask(prefix, country[3], country[4], defaultMask, alwaysDefaultMask),
66
+ format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, alwaysDefaultMask),
68
67
  priority: country[5] || 0,
69
68
  };
70
69
  return countryItem;
71
70
  });
72
71
  const setLocalFormat = (phoneNumber) => {
73
- let localPhone = phoneNumber.replace(prefix, '');
72
+ let localPhone = phoneNumber.replace(PREFIX, '').trim();
73
+ let localFormat;
74
74
  // Guessing countries according to user input
75
75
  const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
76
76
  const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
77
- let localFormat;
78
77
  if (!lodash_1.isEmpty(exactCountry)) {
79
78
  setIso2(exactCountry[0].iso2.toString());
80
79
  localFormat = exactCountry[0].format.toString();
81
- onCountryCodeChange && onCountryCodeChange(prefix + exactCountry[0].dialCode.toString());
80
+ onCountryCodeChange && onCountryCodeChange(PREFIX + exactCountry[0].dialCode.toString());
82
81
  setFormat(localFormat);
83
82
  }
84
83
  else if (!lodash_1.isEmpty(possibleCountries)) {
85
84
  setIso2(possibleCountries[0].iso2.toString());
86
85
  localFormat = possibleCountries[0].format.toString();
87
- onCountryCodeChange && onCountryCodeChange(prefix + possibleCountries[0].dialCode.toString());
86
+ onCountryCodeChange && onCountryCodeChange(PREFIX + possibleCountries[0].dialCode.toString());
88
87
  setFormat(localFormat);
89
88
  }
90
89
  else {
@@ -96,7 +95,7 @@ function PhoneInput(props) {
96
95
  return localFormat;
97
96
  };
98
97
  const onPhoneChange = (phone) => {
99
- if (lodash_1.isEmpty(phone.replace(prefix, ''))) {
98
+ if (lodash_1.isEmpty(phone.trim()) || lodash_1.isEmpty(phone.replace(PREFIX, '').trim())) {
100
99
  setFormattedNumber('');
101
100
  onPhoneValueChange('');
102
101
  }
@@ -106,10 +105,10 @@ function PhoneInput(props) {
106
105
  const localFormat = setLocalFormat(phone);
107
106
  const _formattedNumber = formatNumber(phone, localFormat);
108
107
  setFormattedNumber(_formattedNumber);
109
- if (!phoneValue.startsWith(prefix) && regex.test(phone) && !lodash_1.isEqual(phone, '-')) {
110
- onPhoneValueChange(prefix + phone);
108
+ if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !lodash_1.isEqual(phone, '-')) {
109
+ onPhoneValueChange(PREFIX + phone.trim());
111
110
  }
112
- else if (phone.length <= _formattedNumber.length) {
111
+ else if (phone.length <= localFormat.length) {
113
112
  onPhoneValueChange(phone);
114
113
  }
115
114
  };
@@ -132,16 +131,17 @@ function PhoneInput(props) {
132
131
  const onFilter = (_, value) => {
133
132
  if (!value)
134
133
  return getOptions(initializedCountries);
135
- const input = new RegExp(value, 'i');
136
- const newOptions = initializedCountries.filter((country) => input.test(country.name.toString()));
134
+ const newOptions = initializedCountries.filter((country) => {
135
+ const countryStr = `${country.name.toString()} (+${country.countryCode.toString()})`.toLowerCase();
136
+ return countryStr.includes(value.toLowerCase());
137
+ });
137
138
  return getOptions(newOptions);
138
139
  };
139
140
  // Formatting phone numbers according to country
140
141
  const formatNumber = (fullPhoneNumber, localFormat) => {
141
- if (lodash_1.isEmpty(fullPhoneNumber)) {
142
+ if (lodash_1.isEmpty(fullPhoneNumber))
142
143
  return '';
143
- }
144
- let localPhone = fullPhoneNumber.replace(prefix, '');
144
+ let localPhone = fullPhoneNumber.replace(PREFIX, '');
145
145
  if (lodash_1.isEmpty(localPhone))
146
146
  return '';
147
147
  // Formatting inputted number
@@ -179,11 +179,11 @@ function PhoneInput(props) {
179
179
  // eslint-disable-next-line react-hooks/exhaustive-deps
180
180
  }, []);
181
181
  react_1.useEffect(() => {
182
- if (!lodash_1.isEmpty(countryObj.iso2) && `${prefix}${countryObj.dialCode}` !== countryCode) {
182
+ if (!lodash_1.isEmpty(countryObj.iso2) && `${PREFIX}${countryObj.dialCode}` !== countryCode) {
183
183
  setIso2(countryObj.iso2);
184
184
  setFormat(countryObj.format);
185
- onPhoneValueChange(`${prefix}${countryObj.dialCode}`);
186
- setFormattedNumber(`${prefix}${countryObj.dialCode}`);
185
+ onPhoneValueChange(`${PREFIX}${countryObj.dialCode}`);
186
+ setFormattedNumber(`${PREFIX}${countryObj.dialCode}`);
187
187
  }
188
188
  // eslint-disable-next-line react-hooks/exhaustive-deps
189
189
  }, [countryObj]);
@@ -193,6 +193,10 @@ function PhoneInput(props) {
193
193
  setInvalid && setInvalid(false);
194
194
  setFormattedNumber('');
195
195
  }
196
+ if (lodash_1.isEqual(phoneValue.trim(), PREFIX) && lodash_1.isEmpty(iso2)) {
197
+ onPhoneValueChange('');
198
+ setFormattedNumber('');
199
+ }
196
200
  // eslint-disable-next-line react-hooks/exhaustive-deps
197
201
  }, [phoneValue]);
198
202
  return (react_1.default.createElement(react_core_1.InputGroup, { className: "phone-number-input" },
package/lib/cjs/PhoneInput/PhoneInput.scss CHANGED
@@ -739,10 +739,6 @@
739
739
  }
740
740
  }
741
741
 
742
- div.pf-c-input-group.phone-number-input {
743
- margin: -5px;
744
- }
745
-
746
742
  .phone-number-input {
747
743
  position: relative;
748
744
  .phone-number-select button {
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;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAsOvC"}
1
+ {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAS3B,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;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAwOvC"}
package/lib/esm/PhoneInput/PhoneInput.js CHANGED
@@ -3,7 +3,6 @@ import { InputGroup, Select, SelectOption, SelectVariant, Spinner, TextInput } f
3
3
  import { isEmpty, isEqual } from 'lodash';
4
4
  import React, { useEffect, useState } from 'react';
5
5
  import { useTranslation } from 'react-i18next';
6
- // import { usePrevious } from '../hooks/usePrevious';
7
6
  import CountryData from './CountryData';
8
7
  export function PhoneInput(props) {
9
8
  const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid } = props;
@@ -12,8 +11,8 @@ export function PhoneInput(props) {
12
11
  const [iso2, setIso2] = useState('');
13
12
  const [formattedNumber, setFormattedNumber] = useState('');
14
13
  const [format, setFormat] = useState('');
15
- const prefix = '+';
16
- const defaultMask = '... ... ... ... ..';
14
+ const PREFIX = '+';
15
+ const DEFAULT_MASK = '... ... ... ... ..';
17
16
  const alwaysDefaultMask = false;
18
17
  const [countryObj, setCountryObj] = useState({
19
18
  name: '',
@@ -39,27 +38,27 @@ export function PhoneInput(props) {
39
38
  iso2: country[2],
40
39
  countryCode: country[3],
41
40
  dialCode: country[3],
42
- format: getMask(prefix, country[3], country[4], defaultMask, alwaysDefaultMask),
41
+ format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, alwaysDefaultMask),
43
42
  priority: country[5] || 0,
44
43
  };
45
44
  return countryItem;
46
45
  });
47
46
  const setLocalFormat = (phoneNumber) => {
48
- let localPhone = phoneNumber.replace(prefix, '');
47
+ let localPhone = phoneNumber.replace(PREFIX, '').trim();
48
+ let localFormat;
49
49
  // Guessing countries according to user input
50
50
  const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
51
51
  const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
52
- let localFormat;
53
52
  if (!isEmpty(exactCountry)) {
54
53
  setIso2(exactCountry[0].iso2.toString());
55
54
  localFormat = exactCountry[0].format.toString();
56
- onCountryCodeChange && onCountryCodeChange(prefix + exactCountry[0].dialCode.toString());
55
+ onCountryCodeChange && onCountryCodeChange(PREFIX + exactCountry[0].dialCode.toString());
57
56
  setFormat(localFormat);
58
57
  }
59
58
  else if (!isEmpty(possibleCountries)) {
60
59
  setIso2(possibleCountries[0].iso2.toString());
61
60
  localFormat = possibleCountries[0].format.toString();
62
- onCountryCodeChange && onCountryCodeChange(prefix + possibleCountries[0].dialCode.toString());
61
+ onCountryCodeChange && onCountryCodeChange(PREFIX + possibleCountries[0].dialCode.toString());
63
62
  setFormat(localFormat);
64
63
  }
65
64
  else {
@@ -71,7 +70,7 @@ export function PhoneInput(props) {
71
70
  return localFormat;
72
71
  };
73
72
  const onPhoneChange = (phone) => {
74
- if (isEmpty(phone.replace(prefix, ''))) {
73
+ if (isEmpty(phone.trim()) || isEmpty(phone.replace(PREFIX, '').trim())) {
75
74
  setFormattedNumber('');
76
75
  onPhoneValueChange('');
77
76
  }
@@ -81,10 +80,10 @@ export function PhoneInput(props) {
81
80
  const localFormat = setLocalFormat(phone);
82
81
  const _formattedNumber = formatNumber(phone, localFormat);
83
82
  setFormattedNumber(_formattedNumber);
84
- if (!phoneValue.startsWith(prefix) && regex.test(phone) && !isEqual(phone, '-')) {
85
- onPhoneValueChange(prefix + phone);
83
+ if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual(phone, '-')) {
84
+ onPhoneValueChange(PREFIX + phone.trim());
86
85
  }
87
- else if (phone.length <= _formattedNumber.length) {
86
+ else if (phone.length <= localFormat.length) {
88
87
  onPhoneValueChange(phone);
89
88
  }
90
89
  };
@@ -107,16 +106,17 @@ export function PhoneInput(props) {
107
106
  const onFilter = (_, value) => {
108
107
  if (!value)
109
108
  return getOptions(initializedCountries);
110
- const input = new RegExp(value, 'i');
111
- const newOptions = initializedCountries.filter((country) => input.test(country.name.toString()));
109
+ const newOptions = initializedCountries.filter((country) => {
110
+ const countryStr = `${country.name.toString()} (+${country.countryCode.toString()})`.toLowerCase();
111
+ return countryStr.includes(value.toLowerCase());
112
+ });
112
113
  return getOptions(newOptions);
113
114
  };
114
115
  // Formatting phone numbers according to country
115
116
  const formatNumber = (fullPhoneNumber, localFormat) => {
116
- if (isEmpty(fullPhoneNumber)) {
117
+ if (isEmpty(fullPhoneNumber))
117
118
  return '';
118
- }
119
- let localPhone = fullPhoneNumber.replace(prefix, '');
119
+ let localPhone = fullPhoneNumber.replace(PREFIX, '');
120
120
  if (isEmpty(localPhone))
121
121
  return '';
122
122
  // Formatting inputted number
@@ -154,11 +154,11 @@ export function PhoneInput(props) {
154
154
  // eslint-disable-next-line react-hooks/exhaustive-deps
155
155
  }, []);
156
156
  useEffect(() => {
157
- if (!isEmpty(countryObj.iso2) && `${prefix}${countryObj.dialCode}` !== countryCode) {
157
+ if (!isEmpty(countryObj.iso2) && `${PREFIX}${countryObj.dialCode}` !== countryCode) {
158
158
  setIso2(countryObj.iso2);
159
159
  setFormat(countryObj.format);
160
- onPhoneValueChange(`${prefix}${countryObj.dialCode}`);
161
- setFormattedNumber(`${prefix}${countryObj.dialCode}`);
160
+ onPhoneValueChange(`${PREFIX}${countryObj.dialCode}`);
161
+ setFormattedNumber(`${PREFIX}${countryObj.dialCode}`);
162
162
  }
163
163
  // eslint-disable-next-line react-hooks/exhaustive-deps
164
164
  }, [countryObj]);
@@ -168,6 +168,10 @@ export function PhoneInput(props) {
168
168
  setInvalid && setInvalid(false);
169
169
  setFormattedNumber('');
170
170
  }
171
+ if (isEqual(phoneValue.trim(), PREFIX) && isEmpty(iso2)) {
172
+ onPhoneValueChange('');
173
+ setFormattedNumber('');
174
+ }
171
175
  // eslint-disable-next-line react-hooks/exhaustive-deps
172
176
  }, [phoneValue]);
173
177
  return (React.createElement(InputGroup, { className: "phone-number-input" },
package/lib/esm/PhoneInput/PhoneInput.scss CHANGED
@@ -739,10 +739,6 @@
739
739
  }
740
740
  }
741
741
 
742
- div.pf-c-input-group.phone-number-input {
743
- margin: -5px;
744
- }
745
-
746
742
  .phone-number-input {
747
743
  position: relative;
748
744
  .phone-number-select button {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rh-support/components",
3
- "version": "2.0.13",
3
+ "version": "2.1.1",
4
4
  "description": "Contains all reusabel components for support app",
5
5
  "author": "Vikas Rathee <vrathee@redhat.com>",
6
6
  "license": "ISC",
@@ -55,7 +55,7 @@
55
55
  "copy:img:cjs": "../../node_modules/.bin/copyfiles -V -u 1 -a 'src/**/*.png' 'src/**/*.jpg' 'src/**/*.gif' lib/cjs"
56
56
  },
57
57
  "peerDependencies": {
58
- "@cee-eng/hydrajs": "4.15.82",
58
+ "@cee-eng/hydrajs": "4.15.86",
59
59
  "@cee-eng/ui-toolkit": "1.1.6",
60
60
  "@patternfly/patternfly": "4.196.7",
61
61
  "@patternfly/react-core": "4.264.0",
@@ -74,14 +74,14 @@
74
74
  "use-deep-compare-effect": "^1.6.1"
75
75
  },
76
76
  "dependencies": {
77
- "@cee-eng/hydrajs": "4.15.82",
77
+ "@cee-eng/hydrajs": "4.15.86",
78
78
  "@cee-eng/ui-toolkit": "1.1.6",
79
79
  "@patternfly/patternfly": "4.196.7",
80
80
  "@patternfly/react-core": "4.264.0",
81
81
  "@patternfly/react-table": "4.111.33",
82
82
  "@rh-support/types": "2.0.2",
83
- "@rh-support/user-permissions": "2.0.11",
84
- "@rh-support/utils": "2.0.11",
83
+ "@rh-support/user-permissions": "2.1.1",
84
+ "@rh-support/utils": "2.1.0",
85
85
  "dompurify": "^2.2.6",
86
86
  "downshift": "^6.0.5",
87
87
  "js-worker-search": "^1.4.1",
@@ -117,5 +117,5 @@
117
117
  "defaults and supports es6-module",
118
118
  "maintained node versions"
119
119
  ],
120
- "gitHead": "85c2e3c4430046b6e7e7b5efbee6ed47d7941feb"
120
+ "gitHead": "edc82728887d89d9975d36c7a08b2ab6d7b73085"
121
121
  }