@rh-support/components 2.1.68 → 2.1.69

package/lib/esm/PhoneInput/CountryData.js

@@ -202,7 +202,7 @@ export const COUNTRY_DATA = [
         '7',
         '... ...-..-..',
         1,
-        ['310', '311', '312', '313', '315', '318', '321', '324', '325', '326', '327', '336', '7172', '73622'],
+        ['310', '311', '312', '313', '315', '318', '321', '324', '325', '326', '327', '336', '727', '7172', '73622'],
     ],
     ['Kenya', ['africa'], 'ke', '254'],
     ['Kiribati', ['oceania'], 'ki', '686'],

package/lib/esm/PhoneInput/PhoneInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAM3B,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,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;IACrB,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACrC;AA4ED,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,qBAoRvC"}
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAO3B,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,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;IACrB,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACrC;AAsFD,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,qBAqNvC"}

package/lib/esm/PhoneInput/PhoneInput.js

@@ -3,11 +3,13 @@ import { InputGroup, InputGroupItem, Spinner, TextInput } from '@patternfly/reac
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
+import isUndefined from 'lodash/isUndefined';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { canadaAreaCodes, COUNTRY_DATA } from './CountryData';
+import { COUNTRY_DATA } from './CountryData';
 const PREFIX = '+';
 const DEFAULT_MASK = '... ... ... ... ..';
+const DEFAULT_FORMAT = PREFIX + DEFAULT_MASK;
 const ALWAYS_DEFAULT_MASK = false;
 // Getting Country phone format
 function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMask) {
@@ -29,6 +31,9 @@ const initializedCountries = COUNTRY_DATA.map((country) => {
         format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, ALWAYS_DEFAULT_MASK),
         priority: country[5] || 0,
         areaCode: country[6] || [],
+        phoneInitials: !isEmpty(country[6]) // dialCode + areaCode
+            ? country[6].map((areaCode) => `${country[3]}${areaCode}`)
+            : [],
     };
     return countryItem;
 });
@@ -44,6 +49,12 @@ const removeAllSpaces = (value) => {
         return '';
     return value === null || value === void 0 ? void 0 : value.replace(/\s+/g, '');
 };
+const removeAllChars = (value) => {
+    if (!value)
+        return '';
+    // to remove all chars, brackets and have only digits
+    return value === null || value === void 0 ? void 0 : value.replace(/[^0-9]/g, '');
+};
 // Formatting phone numbers according to country
 const formatNumber = (fullPhoneNumber, localFormat) => {
     if (isEmpty(fullPhoneNumber))
@@ -76,20 +87,20 @@ const formatNumber = (fullPhoneNumber, localFormat) => {
 };
 // return phoneline and countrycode for any given phone
 export const getPhoneObj = (phoneNumber) => {
-    let localPhone = phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.replace(/[^0-9]/g, '');
+    let localPhone = removeAllChars(phoneNumber);
     let countryCode = '';
     // Guessing countries according to user input
     const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
     const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
     if (!isEmpty(exactCountry)) {
-        countryCode = exactCountry[0].dialCode.toString();
+        countryCode = PREFIX + exactCountry[0].dialCode.toString();
     }
     else if (!isEmpty(possibleCountries)) {
-        countryCode = possibleCountries[0].dialCode.toString();
+        countryCode = PREFIX + possibleCountries[0].dialCode.toString();
     }
     return {
-        countryCode: PREFIX + countryCode,
-        phoneLine: localPhone === null || localPhone === void 0 ? void 0 : localPhone.substring(countryCode.length, localPhone.length),
+        countryCode: countryCode,
+        phoneLine: localPhone === null || localPhone === void 0 ? void 0 : localPhone.substring(trimAndReplacePlusFromPhone(countryCode).length, localPhone.length),
     };
 };
 export function PhoneInput(props) {
@@ -98,78 +109,46 @@ export function PhoneInput(props) {
     const [isOpen, setIsOpen] = useState(false);
     const [iso2, setIso2] = useState('');
     const [formattedNumber, setFormattedNumber] = useState('');
-    const [format, setFormat] = useState('');
-    const [phoneWithoutCountryCode, setPhoneWithoutCountryCode] = useState('');
-    const [countryObj, setCountryObj] = useState({
-        name: '', // Country name
-        regions: [''], // Surronding regions
-        iso2: '', // Alpha 2 code Eg. For United States - 'US'
-        countryCode: '', // Country Telephone Code (For US, 1)
-        dialCode: '', // Dial Code (For US, Canada, 1)
-        format: '', // Number Format (For US, '(...) ...-....' )
-        priority: 0, // To prioritize countries with same dial code
-        areaCode: [''], // Area codes of a country
-    });
     const setLocalFormat = (phoneNumber) => {
-        let localPhone = phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.replace(PREFIX, '').trim();
-        localPhone = localPhone === null || localPhone === void 0 ? void 0 : localPhone.replace('(', '').trim();
-        localPhone = localPhone === null || localPhone === void 0 ? void 0 : localPhone.replace(/ +/g, '');
+        const localPhone = removeAllChars(phoneNumber);
         if (shouldNotSetCountryCode) {
-            return PREFIX + DEFAULT_MASK; // default format for portal phone without country code
-        }
-        if (!isEmpty(countryObj) && isEqual(localPhone, countryObj.dialCode)) {
-            // if the user selects a value from the dropdown and the country code is the same as prev, iso2 values shouldn't override
-            onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
-            return countryObj.format;
+            return DEFAULT_FORMAT; // default format for portal phone without country code
         }
         let localFormat;
         // Guessing countries according to user input
         const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
-        const canadaDialCode = '1';
-        const canadaCountryPhone = canadaAreaCodes.map((areaCode) => canadaDialCode + areaCode);
-        const isCountryCanada = canadaCountryPhone.filter((phone) => localPhone.startsWith(phone)); // checks if phone is Canadian
-        const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
-        if (!isEmpty(isCountryCanada)) {
-            const canadaCountryObj = initializedCountries.filter((country) => country.iso2.toString() === 'ca');
-            setIso2(canadaCountryObj[0].iso2.toString());
-            localFormat = canadaCountryObj[0].format.toString();
-            onCountryCodeChange && onCountryCodeChange(PREFIX + canadaCountryObj[0].dialCode.toString());
-            setFormat(localFormat);
-        }
-        else if (!isEmpty(exactCountry)) {
-            const localExactCountry = exactCountry.filter((country) => isEqual(country.priority, 0));
-            if (isEqual(localExactCountry[0].dialCode.toString(), countryObj.dialCode)) {
-                setIso2(countryObj.iso2);
-                onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
-                return countryObj.format;
+        const possibleCountriesPhoneInitials = possibleCountries.map((country) => country.phoneInitials);
+        // Function to find the matching country index based on user phone input
+        const findMatchingIndex = (possibleCountry, phone) => {
+            for (let i = 0; i < possibleCountry.length; i++) {
+                const country = possibleCountry[i];
+                for (let j = 0; j < country.length; j++) {
+                    if (phone.startsWith(country[j])) {
+                        return i;
+                    }
+                }
             }
-            setIso2(localExactCountry[0].iso2.toString());
-            localFormat = localExactCountry[0].format.toString();
-            onCountryCodeChange && onCountryCodeChange(PREFIX + localExactCountry[0].dialCode.toString());
-            setFormat(localFormat);
-        }
-        else if (!isEmpty(possibleCountries)) {
-            const localPossibleCountry = possibleCountries.filter((country) => isEqual(country.priority, 0));
-            if (isEqual(localPossibleCountry[0].dialCode.toString(), countryObj.dialCode)) {
-                setIso2(countryObj.iso2);
-                onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
-                return countryObj.format;
-            }
-            setIso2(localPossibleCountry[0].iso2.toString());
-            localFormat = localPossibleCountry[0].format.toString();
-            onCountryCodeChange && onCountryCodeChange(PREFIX + localPossibleCountry[0].dialCode.toString());
-            setFormat(localFormat);
+            return -1; // Return -1 if no match is found
+        };
+        const countryMatchingIndex = findMatchingIndex(possibleCountriesPhoneInitials, localPhone);
+        const defaultCountry = possibleCountries.filter((country) => (localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString())) && isEqual(country.priority, 0));
+        const possibleDefaultCountry = !isUndefined(defaultCountry[0]) ? defaultCountry[0] : []; // default country when phone didn't match with any country's area code
+        const exactCountry = countryMatchingIndex < 0 ? possibleDefaultCountry : possibleCountries[countryMatchingIndex];
+        if (!isEmpty(exactCountry)) {
+            setIso2(exactCountry['iso2'].toString());
+            localFormat = exactCountry['format'].toString();
+            onCountryCodeChange && onCountryCodeChange(PREFIX + exactCountry['dialCode'].toString());
         }
         else {
-            // if the exact and possible are not the
+            // if there are not matched possible countries
             setIso2('');
-            localFormat = format;
+            localFormat = DEFAULT_FORMAT;
             onCountryCodeChange && onCountryCodeChange('');
         }
         return localFormat;
     };
     const onPhoneChange = (phone) => {
-        if (isEmpty(phone === null || phone === void 0 ? void 0 : phone.trim()) || isEmpty(phone === null || phone === void 0 ? void 0 : phone.replace(PREFIX, '').trim())) {
+        if (isEmpty(removeAllSpaces(phone)) || isEmpty(trimAndReplacePlusFromPhone(phone))) {
             setFormattedNumber('');
             onPhoneValueChange('');
             setInvalid && setInvalid(false);
@@ -184,15 +163,18 @@ export function PhoneInput(props) {
             onPhoneValueChange(PREFIX + phone.trim());
         }
         else {
-            // 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
-            onPhoneValueChange(phone.slice(0, localFormat.length || 5));
+            onPhoneValueChange(phone.slice(0, localFormat.length));
         }
     };
     const onToggle = (isOpen) => {
         setIsOpen(isOpen);
     };
     const onCountrySelect = (event, selection) => {
-        setCountryObj(selection);
+        const prevCountryCode = !shouldNotSetCountryCode // fetching previous country code to remove it from the phone
+            ? trimAndReplacePlusFromPhone(getPhoneObj(phoneValue).countryCode)
+            : '';
+        const phoneWithoutCountryCode = removeAllChars(phoneValue).replace(prevCountryCode, '');
+        onPhoneValueChange(`${PREFIX}${selection.countryCode} ${trimAndReplacePlusFromPhone(phoneWithoutCountryCode)}`);
         setIsOpen(!isOpen);
     };
     const getOptions = (options) => {
@@ -217,18 +199,6 @@ export function PhoneInput(props) {
         React.createElement("div", { className: "pf-v5-u-display-inline-flex" },
             React.createElement("div", { className: `flag ${iso2}`, style: { marginRight: '5px' } }),
             iso2.toUpperCase())));
-    useEffect(() => {
-        if (!isEmpty(countryObj.iso2) && `${PREFIX}${countryObj.dialCode}` !== countryCode) {
-            if (shouldNotSetCountryCode) {
-                onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.dialCode);
-            }
-            setIso2(countryObj.iso2);
-            setFormat(countryObj.format);
-            onPhoneValueChange(`${PREFIX}${countryObj.dialCode} ${trimAndReplacePlusFromPhone(phoneWithoutCountryCode)}`);
-            setFormattedNumber(`${PREFIX}${countryObj.dialCode} ${trimAndReplacePlusFromPhone(phoneWithoutCountryCode)}`);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [countryObj]);
     useEffect(() => {
         // when user types +, it will be replaced by empty string
         if (isEqual(phoneValue === null || phoneValue === void 0 ? void 0 : phoneValue.trim(), PREFIX) && isEmpty(iso2)) {
@@ -236,33 +206,17 @@ export function PhoneInput(props) {
             setFormattedNumber('');
             return;
         }
-        if (isEmpty(phoneValue) && isEmpty(iso2)) {
-            setCountryObj({
-                name: '',
-                regions: [''],
-                iso2: '',
-                countryCode: '',
-                dialCode: '',
-                format: '',
-                priority: 0,
-                areaCode: [''],
-            });
-        }
         if (isEmpty(phoneValue)) {
             setIso2('');
             setInvalid && setInvalid(false);
             setFormattedNumber('');
             onPhoneValueChange('');
-            setPhoneWithoutCountryCode('');
         }
         else {
             onPhoneValueChange(phoneValue);
             const localFormat = setLocalFormat(phoneValue);
             const _formattedNumber = formatNumber(phoneValue, localFormat);
             setFormattedNumber(_formattedNumber);
-            // to have phone without country code so it can populated with the newly selected country code
-            // instead of keeping it just country code
-            setPhoneWithoutCountryCode(removeAllSpaces(phoneValue).replace(countryCode, ''));
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [phoneValue]);
@@ -275,7 +229,6 @@ export function PhoneInput(props) {
             onCountryCodeChange && onCountryCodeChange('');
         }
         else {
-            setIso2(countryObj.iso2);
             onCountryCodeChange && onCountryCodeChange(PREFIX + countryCode);
         }
         onPhoneValueChange && onPhoneValueChange(removeAllSpaces(phoneValue)); // removing trailing and in between spaces

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/components",
-    "version": "2.1.68",
+    "version": "2.1.69",
     "description": "Contains all reusabel components for support app",
     "author": "Vikas Rathee <vrathee@redhat.com>",
     "license": "ISC",
@@ -109,5 +109,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "7ee3ae4d2a39a3f70d898ea5026e558be0ba5ab4"
+    "gitHead": "8720a44261dd585266b2cfdf2bf5092a0cec88d0"
 }