@rh-support/components 2.1.61 → 2.1.63

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 === null || fullPhoneNumber === void 0 ? void 0 : fullPhoneNumber.replace(PREFIX, '');
+    localPhone = removeAllSpaces(localPhone);
     if (isEmpty(localPhone))
         return '';
     // Formatting inputted number
@@ -57,6 +70,8 @@ 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
@@ -78,12 +93,13 @@ export const getPhoneObj = (phoneNumber) => {
     };
 };
 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/TagsSelector/TagsSelector.d.ts

@@ -0,0 +1,13 @@
+import './tagSelector.css';
+import React from 'react';
+interface IProps {
+    tagOptions: any[];
+    selectedTags?: any[];
+    onChange: (tags: any[]) => void;
+    placeholder?: string;
+    id?: string;
+    typeahead?: boolean;
+}
+export declare function TagsSelector({ tagOptions, onChange, placeholder, id, typeahead, selectedTags }: IProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=TagsSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagsSelector.d.ts","sourceRoot":"","sources":["../../../src/TagsSelector/TagsSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAkB3B,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,UAAU,MAAM;IACZ,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,EAAE,YAAiB,EAAE,EAAE,MAAM,qBAyI3G"}

package/lib/esm/TagsSelector/TagsSelector.js

@@ -0,0 +1,69 @@
+import './tagSelector.css';
+import { Button, Chip, ChipGroup, Flex, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { isEmpty } from 'lodash';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useSelectKeyboardNavigator } from '../hooks/useSelectKeyboardNavigator';
+export function TagsSelector({ tagOptions, onChange, placeholder, id, typeahead, selectedTags = [] }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState(selectedTags);
+    const [query, setQuery] = useState('');
+    const textInputRef = React.useRef();
+    const selectOptions = useMemo(() => {
+        let newSelectOptions = tagOptions;
+        if (!isEmpty(query)) {
+            newSelectOptions = tagOptions.filter((t) => t.tagName.toLowerCase().includes(query.toLowerCase()));
+            if (!isOpen) {
+                setIsOpen(true);
+            }
+        }
+        return newSelectOptions;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [query, tagOptions]);
+    const { t } = useTranslation();
+    const onToggleClick = () => {
+        setIsOpen(!isOpen);
+    };
+    const onSelect = (selection) => {
+        var _a;
+        let newSelected = [];
+        if (selected.some((tag) => tag.id === selection.id)) {
+            newSelected = selected.filter((s) => s.id !== selection.id);
+        }
+        else {
+            newSelected = [...selected, selection];
+        }
+        setSelected(newSelected);
+        (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const { onInputKeyDown, focusedItemIndex } = useSelectKeyboardNavigator({
+        list: tagOptions,
+        isOpen,
+        setIsOpen,
+        onSelect,
+    });
+    const handleClear = () => {
+        var _a;
+        setSelected([]);
+        setQuery('');
+        (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    useEffect(() => {
+        onChange && onChange(selected);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selected]);
+    const selectedChipGroup = (React.createElement(ChipGroup, { numChips: 2 }, selected.map((label) => (React.createElement(Chip, { key: label.id, onClick: (e) => {
+            e.stopPropagation();
+            onSelect(label);
+        } }, label.tagName)))));
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, Object.assign({ ref: toggleRef, onClick: onToggleClick, className: "pf-v5-u-flex-grow-1", isExpanded: isOpen, onKeyDown: onInputKeyDown, disabled: isEmpty(tagOptions) }, (typeahead && { variant: 'typeahead' })), typeahead ? (React.createElement(TextInputGroup, { isPlain: true },
+        React.createElement(TextInputGroupMain, { id: "tags-selector-search-input", value: query, onClick: onToggleClick, onChange: (e, v) => setQuery(v), onKeyDown: onInputKeyDown, innerRef: textInputRef, isExpanded: isOpen, placeholder: placeholder || t('Search for a tag') }, selectedChipGroup),
+        React.createElement(TextInputGroupUtilities, null, selected.length > 0 && (React.createElement(Button, { variant: "plain", onClick: handleClear, "aria-label": "clear-all-tags" },
+            React.createElement(TimesIcon, { "aria-hidden": true })))))) : (React.createElement(Flex, null,
+        selectedChipGroup,
+        React.createElement("span", { className: `${!isEmpty(selected) && 'pf-v5-u-ml-xs'}` },
+            React.createElement(Trans, null, "Select a tag"))))));
+    return (React.createElement(Select, { isOpen: isOpen, selected: selected, toggle: toggle, onSelect: (_, selection) => onSelect(selection), isScrollable: true, onOpenChange: () => setIsOpen(false), popperProps: { direction: 'down', enableFlip: false }, id: id || 'tag-selector' },
+        React.createElement(SelectList, { isAriaMultiselectable: true }, selectOptions.map((tag, index) => (React.createElement(SelectOption, { key: tag.id, value: tag, isFocused: index === focusedItemIndex, isSelected: selected.some((t) => t.id === tag.id) }, tag.tagName))))));
+}

package/lib/esm/TagsSelector/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TagsSelector';
+//# sourceMappingURL=index.d.ts.map

package/lib/esm/TagsSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TagsSelector/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/lib/esm/TagsSelector/index.js

@@ -0,0 +1 @@
+export * from './TagsSelector';

package/lib/esm/TagsSelector/tagSelector.css

@@ -0,0 +1,3 @@
+#tag-selector {
+    z-index: 89;
+}

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

@@ -7,10 +7,11 @@ interface IProps {
     topContentData: ITopContentList[];
     enableEventTracking?: boolean;
     onSearch: (searchVal: string, searchResults: ITopContentList[]) => void;
+    className?: string;
     searchQuery?: string;
     setSearchQuery?: Function;
 }
 export declare const getTopContentUrl: (contentUrl: string) => string;
-export declare function TopContentSearch({ topContentData, topContentResultsWrapperRef, onSearch, dataTrackingId, enableEventTracking, searchQuery, setSearchQuery, }: IProps): React.JSX.Element;
+export declare function TopContentSearch({ topContentData, topContentResultsWrapperRef, onSearch, dataTrackingId, enableEventTracking, className, 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;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"}
+{"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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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,SAAS,EACT,WAAgB,EAChB,cAAc,GACjB,EAAE,MAAM,qBAyHR"}

package/lib/esm/TopContentSearch/TopContentSearch.js

@@ -31,7 +31,7 @@ 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, searchQuery = '', setSearchQuery, }) {
+export function TopContentSearch({ topContentData = [], topContentResultsWrapperRef = { current: {} }, onSearch, dataTrackingId, enableEventTracking = false, className, searchQuery = '', setSearchQuery, }) {
     const [searchText, setSearchText] = useState(searchQuery);
     const { t } = useTranslation();
     const searchWorkerRef = useRef(new SearchApi({
@@ -70,6 +70,7 @@ export function TopContentSearch({ topContentData = [], topContentResultsWrapper
     }, [topContentResultsWrapperRef]);
     const onSearchInputClear = useCallback((event) => {
         setSearchText('');
+        setSearchQuery && setSearchQuery('');
         onSearch('', topContentData);
         logCustomEvent(CustomEvents.inputClear, event);
         highlightSearchResults('');
@@ -113,8 +114,8 @@ export function TopContentSearch({ topContentData = [], topContentResultsWrapper
     }, 
     // 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" },
+    return (React.createElement("div", { className: className, ref: searchWrapperRef },
+        React.createElement("label", { htmlFor: "top-content-search-input" },
             React.createElement(Trans, null, "Filter results:")),
         React.createElement(SearchInput, { id: "top-content-search-input", className: "top-content-search-input pf-v5-u-flex-grow-1", "aria-label": t('search top content'), placeholder: t('Enter relevant keywords'), value: searchText, "data-tracking-id": dataTrackingId, onChange: (e, val) => onSearchInputChange(val), onClear: onSearchInputClear })));
 }

package/lib/esm/helperFunctions/errorMessage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './errorMessage.scss';
 export interface IAppErrorObj {
     title: string;

package/lib/esm/helperFunctions/errorMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errorMessage.d.ts","sourceRoot":"","sources":["../../../src/helperFunctions/errorMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAS7B,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CACjC;AAED,MAAM,WAAW,SAAS;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;CACxC;AAoDD,iBAAS,wBAAwB,CAAC,KAAK,KAAA,EAAE,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,CAwCxF;AAED,iBAAS,iBAAiB,CAAC,KAAK,KAAA,EAAE,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,CAIjE;AAED,OAAO,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"errorMessage.d.ts","sourceRoot":"","sources":["../../../src/helperFunctions/errorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAS7B,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CACjC;AAED,MAAM,WAAW,SAAS;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;CACxC;AAoDD,iBAAS,wBAAwB,CAAC,KAAK,KAAA,EAAE,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,CAwCxF;AAED,iBAAS,iBAAiB,CAAC,KAAK,KAAA,EAAE,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,CAIjE;AAED,OAAO,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,CAAC"}

package/lib/esm/hooks/index.d.ts

@@ -13,4 +13,5 @@ export * from './useBreakpoint';
 export * from './useOnScreen';
 export * from './useSelectKeyboardNavigator';
 export * from './useSessionStorage';
+export * from './useSearchDocument';
 //# sourceMappingURL=index.d.ts.map

package/lib/esm/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}

package/lib/esm/hooks/index.js

@@ -13,3 +13,4 @@ export * from './useBreakpoint';
 export * from './useOnScreen';
 export * from './useSelectKeyboardNavigator';
 export * from './useSessionStorage';
+export * from './useSearchDocument';

package/lib/esm/hooks/useSearchDocument.d.ts

@@ -0,0 +1,7 @@
+interface IIndexStrategy<T> {
+    indexKey: keyof T;
+    strategy: (doc: T) => string;
+}
+export declare function useSearchDocument<T>(documents: T[], searchQuery: string, indexStrategy: IIndexStrategy<T>): T[];
+export {};
+//# sourceMappingURL=useSearchDocument.d.ts.map

package/lib/esm/hooks/useSearchDocument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearchDocument.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSearchDocument.ts"],"names":[],"mappings":"AAMA,UAAU,cAAc,CAAC,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC,CAAC;IAClB,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;CAChC;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC,OAwCzG"}

package/lib/esm/hooks/useSearchDocument.js

@@ -0,0 +1,42 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import SearchApi, { INDEX_MODES } from 'js-worker-search';
+import isEmpty from 'lodash/isEmpty';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useDeepCompareDebounce } from './useDebounce';
+export function useSearchDocument(documents, searchQuery, indexStrategy) {
+    const [filteredDocs, setFilteredDocs] = useState(documents);
+    const searchWorkerRef = useRef(new SearchApi({
+        indexMode: INDEX_MODES.ALL_SUBSTRINGS,
+        caseSensitive: false,
+        matchAnyToken: true,
+    }));
+    const handleSearch = useCallback((query) => __awaiter(this, void 0, void 0, function* () {
+        if (isEmpty(query)) {
+            setFilteredDocs(documents);
+            return;
+        }
+        const indexedVals = yield searchWorkerRef.current.search(query);
+        setFilteredDocs(documents.filter((d) => indexedVals.includes(d[indexStrategy.indexKey])));
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [documents]);
+    useEffect(() => {
+        documents.forEach((doc) => {
+            const indexedString = indexStrategy.strategy(doc);
+            searchWorkerRef.current.indexDocument(doc[indexStrategy.indexKey], indexedString);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [documents]);
+    useDeepCompareDebounce(() => {
+        handleSearch(searchQuery);
+    }, [searchQuery, documents], 500);
+    return filteredDocs;
+}

package/lib/esm/hooks/useSelectKeyboardNavigator.d.ts

@@ -6,7 +6,7 @@ interface IProps {
     onSelect: (value: any) => void;
 }
 export declare function useSelectKeyboardNavigator({ list, isOpen, setIsOpen, onSelect }: IProps): {
-    onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onInputKeyDown: (event: any) => void;
     focusedItemIndex: number;
 };
 export {};

package/lib/esm/hooks/useSelectKeyboardNavigator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectKeyboardNavigator.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSelectKeyboardNavigator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,UAAU,MAAM;IACZ,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,0BAA0B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,MAAM;4BAiCrD,mBAAmB,CAAC,gBAAgB,CAAC;;EAuBvE"}
+{"version":3,"file":"useSelectKeyboardNavigator.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSelectKeyboardNavigator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,UAAU,MAAM;IACZ,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,0BAA0B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,MAAM;;;EAwDvF"}

package/lib/esm/index.d.ts

@@ -31,4 +31,5 @@ export * from './TermsAndConditions';
 export * from './TextAreaResizable';
 export * from './CustomTextInput';
 export * from './PhoneInput';
+export * from './TagsSelector';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}

package/lib/esm/index.js

@@ -31,3 +31,4 @@ export * from './TermsAndConditions';
 export * from './TextAreaResizable';
 export * from './CustomTextInput';
 export * from './PhoneInput';
+export * from './TagsSelector';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/components",
-    "version": "2.1.61",
+    "version": "2.1.63",
     "description": "Contains all reusabel components for support app",
     "author": "Vikas Rathee <vrathee@redhat.com>",
     "license": "ISC",
@@ -44,7 +44,7 @@
         "prepublishOnly": "npm run build"
     },
     "peerDependencies": {
-        "@cee-eng/hydrajs": "4.17.17",
+        "@cee-eng/hydrajs": "4.17.21",
         "@cee-eng/ui-toolkit": "1.1.8",
         "@patternfly/patternfly": "5.1.0",
         "@patternfly/react-core": "5.1.1",
@@ -62,14 +62,14 @@
         "use-deep-compare-effect": "^1.6.1"
     },
     "dependencies": {
-        "@cee-eng/hydrajs": "4.17.17",
+        "@cee-eng/hydrajs": "4.17.21",
         "@cee-eng/ui-toolkit": "1.1.8",
         "@patternfly/patternfly": "5.1.0",
         "@patternfly/react-core": "5.1.1",
         "@patternfly/react-table": "5.1.1",
-        "@rh-support/types": "2.0.3",
-        "@rh-support/user-permissions": "2.1.44",
-        "@rh-support/utils": "2.1.33",
+        "@rh-support/types": "2.0.4",
+        "@rh-support/user-permissions": "2.1.46",
+        "@rh-support/utils": "2.1.35",
         "dompurify": "^2.2.6",
         "downshift": "^6.0.5",
         "js-worker-search": "^1.4.1",
@@ -109,5 +109,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "908b440e3c6cd625c77178c3205f4e2908630446"
+    "gitHead": "85dc8cf2f736478dc995cb52e1a5be8e608e2fb8"
 }