@rh-support/components 2.4.10-beta.6 → 2.5.1

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

@@ -1,4 +1,5 @@
 import './PhoneInput.scss';
+import React from 'react';
 interface IProps {
     phoneValue: string;
     countryCode?: string;
@@ -9,11 +10,23 @@ interface IProps {
     setInvalid?: (boolean: any) => void;
     isLoading?: boolean;
     isDisabled?: boolean;
+    shouldNotSetCountryCode?: boolean;
 }
+export declare const getExactCountry: (phoneNumber: string) => any[] | {
+    name: string | number | string[];
+    regions: string | number | string[];
+    iso2: string | number | string[];
+    countryCode: string | number | string[];
+    dialCode: string | number | string[];
+    format: string;
+    priority: string | number | string[];
+    areaCode: string | number | string[];
+    phoneInitials: string[];
+};
 export declare const getPhoneObj: (phoneNumber: string) => {
     countryCode: string;
     phoneLine: string;
 };
-export declare function PhoneInput(props: IProps): JSX.Element;
+export declare function PhoneInput(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=PhoneInput.d.ts.map

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;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;AA4DD,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAiPvC"}
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAO3B,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,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;AAoDD,eAAO,MAAM,eAAe,gBAAiB,MAAM;;;;;;;;;;CAmClD,CAAC;AAqCF,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAgB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,qBA+LvC"}

package/lib/esm/PhoneInput/PhoneInput.js

@@ -1,12 +1,16 @@
 import './PhoneInput.scss';
-import { InputGroup, Select, SelectOption, SelectVariant, Spinner, TextInput } from '@patternfly/react-core';
+import { InputGroup, InputGroupItem, Spinner, TextInput } from '@patternfly/react-core';
+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';
+import { FlagSvgs } from './FlagSvgs';
 const PREFIX = '+';
-const DEFAULT_MASK = '... ... ... ... ..';
+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) {
@@ -28,26 +32,73 @@ 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;
 });
+const trimAndReplacePlusFromPhone = (value) => {
+    var _a;
+    if (!value)
+        return '';
+    return (_a = value === null || value === void 0 ? void 0 : value.trim()) === null || _a === void 0 ? void 0 : _a.replace('+', '');
+};
+const removeAllSpaces = (value) => {
+    // to remove all trailing and in between spaces
+    if (!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, '');
+};
+// guess exact country for any given phone
+export const getExactCountry = (phoneNumber) => {
+    let localPhone = removeAllChars(phoneNumber);
+    // Guessing countries according to user input
+    const possibleCountries = initializedCountries === null || initializedCountries === void 0 ? void 0 : initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
+    const possibleCountriesPhoneInitials = possibleCountries === null || possibleCountries === void 0 ? void 0 : 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 === null || possibleCountry === void 0 ? void 0 : possibleCountry.length); i++) {
+            const country = possibleCountry[i];
+            for (let j = 0; j < (country === null || country === void 0 ? void 0 : country.length); j++) {
+                if (phone.startsWith(country[j])) {
+                    return i;
+                }
+            }
+        }
+        return -1; // Return -1 if no match is found
+    };
+    const countryMatchingIndex = findMatchingIndex(possibleCountriesPhoneInitials, localPhone);
+    const defaultCountry = possibleCountries === null || possibleCountries === void 0 ? void 0 : possibleCountries.filter((country) => (localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString())) && isEqual(country.priority, 0));
+    const possibleDefaultCountry = !isEmpty(defaultCountry[0]) && !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];
+    return exactCountry;
+};
 // Formatting phone numbers according to country
 const formatNumber = (fullPhoneNumber, localFormat) => {
+    var _a;
     if (isEmpty(fullPhoneNumber))
         return '';
-    let localPhone = fullPhoneNumber.replace(PREFIX, '');
+    let localPhone = fullPhoneNumber === null || fullPhoneNumber === void 0 ? void 0 : fullPhoneNumber.replace(PREFIX, '');
+    localPhone = removeAllSpaces(localPhone);
     if (isEmpty(localPhone))
         return '';
     // Formatting inputted number
     let phone = '';
     [...fullPhoneNumber].forEach((ele) => {
         if (ele >= '0' && ele <= '9') {
-            phone = phone.concat(ele);
+            phone = phone === null || phone === void 0 ? void 0 : phone.concat(ele);
         }
     });
     let pattern = '';
     let i = 0;
-    for (let j = 0; j < (localFormat === null || localFormat === void 0 ? void 0 : localFormat.length) && i < phone.length; j++) {
+    for (let j = 0; j < (localFormat === null || localFormat === void 0 ? void 0 : localFormat.length) && i < (phone === null || phone === void 0 ? void 0 : phone.length); j++) {
         if (localFormat[j] === '.') {
             pattern += phone[i];
             i++;
@@ -56,100 +107,55 @@ const formatNumber = (fullPhoneNumber, localFormat) => {
             pattern += localFormat[j];
         }
     }
+    const isPatternWithPrefix = (_a = pattern === null || pattern === void 0 ? void 0 : pattern.replace(/\s+/g, '')) === null || _a === void 0 ? void 0 : _a.startsWith(PREFIX);
+    pattern = isPatternWithPrefix ? pattern : !isEmpty(isPatternWithPrefix) ? PREFIX + pattern : '';
     return pattern;
 };
 // return phoneline and countrycode for any given phone
 export const getPhoneObj = (phoneNumber) => {
-    let localPhone = phoneNumber.replace(/[^0-9]/g, '');
+    var _a;
+    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();
+    const exactCountry = getExactCountry(localPhone);
+    if (!isEmpty(exactCountry) && !isEmpty(exactCountry['dialCode'].toString())) {
+        countryCode = PREFIX + exactCountry['dialCode'].toString();
     }
-    else if (!isEmpty(possibleCountries)) {
-        countryCode = possibleCountries[0].dialCode.toString();
+    else {
+        countryCode = '';
     }
     return {
-        countryCode: PREFIX + countryCode,
-        phoneLine: localPhone.substring(countryCode.length, localPhone.length),
+        countryCode: countryCode,
+        phoneLine: localPhone === null || localPhone === void 0 ? void 0 : localPhone.substring((_a = trimAndReplacePlusFromPhone(countryCode)) === null || _a === void 0 ? void 0 : _a.length, localPhone === null || localPhone === void 0 ? void 0 : localPhone.length),
     };
 };
 export function PhoneInput(props) {
-    const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid } = props;
+    const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid, shouldNotSetCountryCode, } = props;
     const { t } = useTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const [iso2, setIso2] = useState('');
     const [formattedNumber, setFormattedNumber] = useState('');
-    const [format, setFormat] = useState('');
-    const [countryObj, setCountryObj] = useState({
-        name: '',
-        regions: [''],
-        iso2: '',
-        countryCode: '',
-        dialCode: '',
-        format: '',
-        priority: 0,
-        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, '');
-        // if the user selects a value from the dropdown and the country code is the same as prev, iso2 values shouldn't override
-        if (!isEmpty(countryObj) && isEqual(localPhone, countryObj.dialCode)) {
-            onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.countryCode);
-            return countryObj.format;
+        const localPhone = removeAllChars(phoneNumber);
+        if (shouldNotSetCountryCode) {
+            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;
-            }
-            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);
+        const exactCountry = getExactCountry(localPhone);
+        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);
@@ -160,25 +166,32 @@ export function PhoneInput(props) {
         const localFormat = setLocalFormat(phone);
         const _formattedNumber = formatNumber(phone, localFormat);
         setFormattedNumber(_formattedNumber);
-        if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual(phone, '-')) {
-            onPhoneValueChange(PREFIX + phone.trim());
+        if (!(phone === null || phone === void 0 ? void 0 : phone.trim().startsWith(PREFIX)) && regex.test(phone) && !isEqual(phone, '-')) {
+            onPhoneValueChange(PREFIX + (phone === null || phone === void 0 ? void 0 : 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 === null || phone === void 0 ? void 0 : phone.slice(0, localFormat === null || localFormat === void 0 ? void 0 : localFormat.length));
         }
     };
     const onToggle = (isOpen) => {
         setIsOpen(isOpen);
     };
     const onCountrySelect = (event, selection) => {
-        setCountryObj(selection);
+        var _a, _b;
+        const prevCountryCode = !shouldNotSetCountryCode // fetching previous country code to remove it from the phone
+            ? trimAndReplacePlusFromPhone((_a = getPhoneObj(phoneValue)) === null || _a === void 0 ? void 0 : _a.countryCode)
+            : '';
+        const phoneWithoutCountryCode = (_b = removeAllChars(phoneValue)) === null || _b === void 0 ? void 0 : _b.replace(prevCountryCode, '');
+        const formattedPhone = `${PREFIX}${selection.countryCode}${phoneWithoutCountryCode}`;
+        const localFormattedPhone = setLocalFormat(formattedPhone);
+        onPhoneValueChange(formatNumber(formattedPhone, localFormattedPhone));
         setIsOpen(!isOpen);
     };
     const getOptions = (options) => {
         return options.map((country) => (React.createElement(SelectOption, { key: country.iso2, value: country },
-            React.createElement("div", { className: "pf-u-display-inline-flex" },
-                React.createElement("div", { className: `flag ${country.iso2}`, style: { marginRight: '8px' } }),
+            React.createElement("div", { className: "pf-v5-u-display-inline-flex" },
+                React.createElement("svg", { className: "flag-class-select" },
+                    React.createElement("use", { xlinkHref: `#cc_${country.iso2}` })),
                 country.name,
                 " (+",
                 country.dialCode,
@@ -194,30 +207,10 @@ export function PhoneInput(props) {
         return getOptions(newOptions);
     };
     const placeholder = (React.createElement("div", { className: "phone-number-select-placeholder" },
-        React.createElement("div", { className: "pf-u-display-inline-flex" },
-            React.createElement("div", { className: `flag ${iso2}`, style: { marginRight: '5px' } }),
+        React.createElement("div", { className: "pf-v5-u-display-inline-flex" },
+            React.createElement("svg", { className: "flag-class-selected" },
+                React.createElement("use", { xlinkHref: `#cc_${iso2}` })),
             iso2.toUpperCase())));
-    useEffect(() => {
-        if (isEmpty(phoneValue)) {
-            setInvalid && setInvalid(false);
-            return;
-        }
-        if (isEmpty(iso2)) {
-            const localFormat = setLocalFormat(phoneValue);
-            const _formattedNumber = formatNumber(phoneValue, localFormat);
-            setFormattedNumber(_formattedNumber);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    useEffect(() => {
-        if (!isEmpty(countryObj.iso2) && `${PREFIX}${countryObj.dialCode}` !== countryCode) {
-            setIso2(countryObj.iso2);
-            setFormat(countryObj.format);
-            onPhoneValueChange(`${PREFIX}${countryObj.dialCode}`);
-            setFormattedNumber(`${PREFIX}${countryObj.dialCode}`);
-        }
-        // 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)) {
@@ -225,18 +218,6 @@ 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);
@@ -251,9 +232,29 @@ export function PhoneInput(props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [phoneValue]);
+    // For first time user whose phone is fetched from portal without country code
+    // For phone length less or equal to 10 country code shouldn't be fetched to avoid faulty phone population
+    // shouldNotSetCountryCode flag from ContactPhoneNumber
+    useEffect(() => {
+        if (shouldNotSetCountryCode) {
+            setIso2('');
+            onCountryCodeChange && onCountryCodeChange('');
+        }
+        else {
+            onCountryCodeChange && onCountryCodeChange(PREFIX + countryCode);
+        }
+        onPhoneValueChange && onPhoneValueChange(removeAllSpaces(phoneValue)); // removing trailing and in between spaces
+        const localFormat = setLocalFormat(phoneValue);
+        const _formattedNumber = formatNumber(phoneValue, localFormat);
+        setFormattedNumber(_formattedNumber);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shouldNotSetCountryCode]);
     return (React.createElement(InputGroup, { className: "phone-number-input" },
-        React.createElement("div", null,
-            React.createElement(Select, { variant: SelectVariant.single, "data-tracking-id": "case-phone-number-country-code", className: "phone-number-select", onToggle: onToggle, onSelect: onCountrySelect, isOpen: isOpen, placeholderText: iso2 && phoneValue !== '' ? placeholder : 'Country Code', onFilter: onFilter, hasInlineFilter: true, inlineFilterPlaceholderText: t('Search'), isDisabled: props.isDisabled }, getOptions(initializedCountries))),
-        React.createElement(TextInput, { id: "case-phone-number", "data-tracking-id": "case-phone-number", placeholder: "55-555-5555", value: formattedNumber ? formattedNumber : phoneValue, onChange: onPhoneChange, validated: validations, isDisabled: props.isDisabled }),
-        props.isLoading && React.createElement(Spinner, { isSVG: true, size: "lg", className: "pf-u-ml-2xl pf-u-mr-xl phone-spinner" })));
+        React.createElement(FlagSvgs, null),
+        React.createElement(InputGroupItem, null,
+            React.createElement("div", null,
+                React.createElement(Select, { variant: SelectVariant.single, "data-tracking-id": "case-phone-number-country-code", className: "phone-number-select", onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onCountrySelect, isOpen: isOpen, placeholderText: iso2 && phoneValue !== '' ? placeholder : 'Country Code', onFilter: onFilter, hasInlineFilter: true, inlineFilterPlaceholderText: t('Search'), isDisabled: props.isDisabled, toggleAriaLabel: "Country Code" }, getOptions(initializedCountries)))),
+        React.createElement(InputGroupItem, { style: { width: '100%' } },
+            React.createElement(TextInput, { id: "case-phone-number", "data-tracking-id": "case-phone-number", placeholder: "55-555-5555", value: formattedNumber ? formattedNumber : phoneValue, onChange: (_event, phone) => onPhoneChange(phone), validated: validations, isDisabled: props.isDisabled, "aria-label": "Case owner's phone number" })),
+        props.isLoading && React.createElement(Spinner, { size: "lg", className: "pf-v5-u-ml-2xl pf-v5-u-mr-xl phone-spinner" })));
 }