@rh-support/components 2.1.60 → 2.1.61-beta.1

package/lib/esm/PaginatedList/PaginatedList.d.ts

@@ -12,6 +12,7 @@ interface IProps {
     onPerPageSelect?: (pageSize: number) => void;
     perPageOptions?: PaginationProps['perPageOptions'];
     errorMessage?: string;
+    setPaginatedListLength?: React.Dispatch<React.SetStateAction<number | undefined>>;
 }
 export declare function PaginatedList(props: IProps): React.JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"PaginatedList.d.ts","sourceRoot":"","sources":["../../../src/PaginatedList/PaginatedList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,eAAe,EAElB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,UAAU,MAAM;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBA4D1C"}
+{"version":3,"file":"PaginatedList.d.ts","sourceRoot":"","sources":["../../../src/PaginatedList/PaginatedList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,eAAe,EAElB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,UAAU,MAAM;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;CACrF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBAwE1C"}

package/lib/esm/PaginatedList/PaginatedList.js

@@ -14,6 +14,15 @@ export function PaginatedList(props) {
     if (!props.serverPaginated) {
         listItems = listItems.slice(indexOfFirstShownElement, indexOfFirstShownElement + pageSize);
     }
+    useEffect(() => {
+        // Only update the external state if the prop function is provided
+        if (props.setPaginatedListLength) {
+            // Calculate the length based on current page and perPage, or directly use listItems.length
+            listItems &&
+                props.setPaginatedListLength(listItems.slice(indexOfFirstShownElement, indexOfFirstShownElement + pageSize).length);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.listItems.length]);
     const onSetPage = (event, pageNumber) => {
         setCurrentPage(pageNumber);
         props.onSetPage && props.onSetPage(pageNumber);

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

@@ -10,6 +10,7 @@ interface IProps {
     setInvalid?: (boolean: any) => void;
     isLoading?: boolean;
     isDisabled?: boolean;
+    shouldNotSetCountryCode?: boolean;
 }
 export declare const getPhoneObj: (phoneNumber: string) => {
     countryCode: string;

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;CACxB;AA4DD,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,qBAuPvC"}
+{"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"}

package/lib/esm/PhoneInput/PhoneInput.js

@@ -32,11 +32,24 @@ const initializedCountries = COUNTRY_DATA.map((country) => {
     };
     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, '');
+};
 // Formatting phone numbers according to country
 const formatNumber = (fullPhoneNumber, localFormat) => {
     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
@@ -48,7 +61,7 @@ const formatNumber = (fullPhoneNumber, localFormat) => {
     });
     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++;
@@ -57,11 +70,13 @@ const formatNumber = (fullPhoneNumber, localFormat) => {
             pattern += localFormat[j];
         }
     }
+    const isPatternWithPrefix = pattern.replace(/\s+/g, '').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, '');
+    let localPhone = phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.replace(/[^0-9]/g, '');
     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()));
@@ -74,16 +89,17 @@ export const getPhoneObj = (phoneNumber) => {
     }
     return {
         countryCode: PREFIX + countryCode,
-        phoneLine: localPhone.substring(countryCode.length, localPhone.length),
+        phoneLine: localPhone === null || localPhone === void 0 ? void 0 : localPhone.substring(countryCode.length, 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 [phoneWithoutCountryCode, setPhoneWithoutCountryCode] = useState('');
     const [countryObj, setCountryObj] = useState({
         name: '', // Country name
         regions: [''], // Surronding regions
@@ -98,8 +114,11 @@ export function PhoneInput(props) {
         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 (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;
         }
@@ -198,24 +217,15 @@ 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(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) {
+            if (shouldNotSetCountryCode) {
+                onCountryCodeChange && onCountryCodeChange(PREFIX + countryObj.dialCode);
+            }
             setIso2(countryObj.iso2);
             setFormat(countryObj.format);
-            onPhoneValueChange(`${PREFIX}${countryObj.dialCode}`);
-            setFormattedNumber(`${PREFIX}${countryObj.dialCode}`);
+            onPhoneValueChange(`${PREFIX}${countryObj.dialCode} ${trimAndReplacePlusFromPhone(phoneWithoutCountryCode)}`);
+            setFormattedNumber(`${PREFIX}${countryObj.dialCode} ${trimAndReplacePlusFromPhone(phoneWithoutCountryCode)}`);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [countryObj]);
@@ -243,15 +253,37 @@ export function PhoneInput(props) {
             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]);
+    // 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 {
+            setIso2(countryObj.iso2);
+            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(InputGroupItem, null,
             React.createElement("div", null,

package/lib/esm/TopContentSearch/TopContentSearch.d.ts

@@ -7,8 +7,10 @@ interface IProps {
     topContentData: ITopContentList[];
     enableEventTracking?: boolean;
     onSearch: (searchVal: string, searchResults: ITopContentList[]) => void;
+    searchQuery?: string;
+    setSearchQuery?: Function;
 }
 export declare const getTopContentUrl: (contentUrl: string) => string;
-export declare function TopContentSearch({ topContentData, topContentResultsWrapperRef, onSearch, dataTrackingId, enableEventTracking, }: IProps): React.JSX.Element;
+export declare function TopContentSearch({ topContentData, topContentResultsWrapperRef, onSearch, dataTrackingId, enableEventTracking, searchQuery, setSearchQuery, }: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=TopContentSearch.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TopContentSearch.d.ts","sourceRoot":"","sources":["../../../src/TopContentSearch/TopContentSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,2DAA2D,CAAC;AAQ5F,OAAO,KAA4D,MAAM,OAAO,CAAC;AAGjF,UAAU,MAAM;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,2BAA2B,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACzD,cAAc,EAAE,eAAe,EAAE,CAAC;IAClC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAC3E;AAED,eAAO,MAAM,gBAAgB,eAAgB,MAAM,WASlD,CAAC;AAOF,wBAAgB,gBAAgB,CAAC,EAC7B,cAAmB,EACnB,2BAA6C,EAC7C,QAAQ,EACR,cAAc,EACd,mBAA2B,GAC9B,EAAE,MAAM,qBA8GR"}
+{"version":3,"file":"TopContentSearch.d.ts","sourceRoot":"","sources":["../../../src/TopContentSearch/TopContentSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,2DAA2D,CAAC;AAQ5F,OAAO,KAA4D,MAAM,OAAO,CAAC;AAGjF,UAAU,MAAM;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,2BAA2B,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACzD,cAAc,EAAE,eAAe,EAAE,CAAC;IAClC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,QAAQ,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,eAAgB,MAAM,WASlD,CAAC;AAOF,wBAAgB,gBAAgB,CAAC,EAC7B,cAAmB,EACnB,2BAA6C,EAC7C,QAAQ,EACR,cAAc,EACd,mBAA2B,EAC3B,WAAgB,EAChB,cAAc,GACjB,EAAE,MAAM,qBAwHR"}

package/lib/esm/TopContentSearch/TopContentSearch.js

@@ -31,8 +31,8 @@ var CustomEvents;
     CustomEvents["inputChange"] = "top-content-filter-input-change";
     CustomEvents["inputClear"] = "top-content-filter-input-clear";
 })(CustomEvents || (CustomEvents = {}));
-export function TopContentSearch({ topContentData = [], topContentResultsWrapperRef = { current: {} }, onSearch, dataTrackingId, enableEventTracking = false, }) {
-    const [searchText, setSearchText] = useState('');
+export function TopContentSearch({ topContentData = [], topContentResultsWrapperRef = { current: {} }, onSearch, dataTrackingId, enableEventTracking = false, searchQuery = '', setSearchQuery, }) {
+    const [searchText, setSearchText] = useState(searchQuery);
     const { t } = useTranslation();
     const searchWorkerRef = useRef(new SearchApi({
         indexMode: INDEX_MODES.ALL_SUBSTRINGS,
@@ -56,8 +56,9 @@ export function TopContentSearch({ topContentData = [], topContentResultsWrapper
         dtmTrackEvent(searchWrapperRef, eventName, event);
     };
     const highlightSearchResults = useCallback((searchTerm) => {
+        var _a;
         // highlight search term present in contents only. Contents are present within <dd> tag
-        const contentElements = topContentResultsWrapperRef.current.querySelectorAll('dd.pf-v5-c-accordion__expandable-content');
+        const contentElements = (_a = topContentResultsWrapperRef === null || topContentResultsWrapperRef === void 0 ? void 0 : topContentResultsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('dd.pf-v5-c-accordion__expandable-content');
         const markInstance = new Mark(contentElements);
         markInstance.unmark({
             done: () => {
@@ -68,10 +69,10 @@ export function TopContentSearch({ topContentData = [], topContentResultsWrapper
         });
     }, [topContentResultsWrapperRef]);
     const onSearchInputClear = useCallback((event) => {
-        logCustomEvent(CustomEvents.inputClear, event);
         setSearchText('');
-        highlightSearchResults('');
         onSearch('', topContentData);
+        logCustomEvent(CustomEvents.inputClear, event);
+        highlightSearchResults('');
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [highlightSearchResults, topContentData]);
@@ -103,8 +104,15 @@ export function TopContentSearch({ topContentData = [], topContentResultsWrapper
     const debounceSearch = useMemo(() => debounce(handleSearch, 500), [handleSearch]);
     const onSearchInputChange = (value) => {
         setSearchText(value);
+        setSearchQuery && setSearchQuery(value);
         debounceSearch(value);
     };
+    useEffect(() => {
+        if (searchQuery)
+            debounceSearch(searchQuery);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     return (React.createElement("div", { className: "top-content-search-wrapper pf-v5-u-p-md", ref: searchWrapperRef },
         React.createElement("label", { htmlFor: "top-content-search-input", className: "pf-v5-u-mr-md top-content-search-label" },
             React.createElement(Trans, null, "Filter results:")),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/components",
-    "version": "2.1.60",
+    "version": "2.1.61-beta.1",
     "description": "Contains all reusabel components for support app",
     "author": "Vikas Rathee <vrathee@redhat.com>",
     "license": "ISC",
@@ -68,7 +68,7 @@
         "@patternfly/react-core": "5.1.1",
         "@patternfly/react-table": "5.1.1",
         "@rh-support/types": "2.0.3",
-        "@rh-support/user-permissions": "2.1.43",
+        "@rh-support/user-permissions": "2.1.44",
         "@rh-support/utils": "2.1.33",
         "dompurify": "^2.2.6",
         "downshift": "^6.0.5",
@@ -109,5 +109,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "d0800f64f5543b6f26b111bd7f179a8277e32456"
+    "gitHead": "d867a78014ee4a08aa8d7bf9e0dc9bd08ce6ac5a"
 }