@rh-support/react-context 2.4.10-beta.6 → 2.5.1

package/README.md

@@ -4,5 +4,3 @@
 
     - useContext(GlobalMetadataStateContext) must be used within a GlobalMetadataContextProvider
     - useContext(GlobalMetadataDispatchContext) must be used within a GlobalMetadataContextProvider
-
-.

package/lib/esm/GlobalContextWrapper.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 interface IProps {
     children: JSX.Element | JSX.Element[];
 }
@@ -5,10 +6,8 @@ declare global {
     interface Window {
         sessionjs: any;
         MSInputMethodContext: any;
-        chrometwo_require: (component: string[], callback: (...params: any[]) => any) => any;
         portal: any;
         Raven: any;
-        chrometwo_ready: any;
         embedded_svc: any;
         $Lightning: any;
         liveAgentDeployment: any;
@@ -17,6 +16,6 @@ declare global {
         documentMode: any;
     }
 }
-export declare const GlobalContextWrapper: (props: IProps) => JSX.Element;
+export declare const GlobalContextWrapper: (props: IProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=GlobalContextWrapper.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GlobalContextWrapper.d.ts","sourceRoot":"","sources":["../../src/GlobalContextWrapper.tsx"],"names":[],"mappings":"AAmBA,UAAU,MAAM;IACZ,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;CACzC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,SAAS,EAAE,GAAG,CAAC;QACf,oBAAoB,EAAE,GAAG,CAAC;QAC1B,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,MAAM,OAAA,KAAK,GAAG,KAAK,GAAG,CAAC;QAC9E,MAAM,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,GAAG,CAAC;QACX,eAAe,EAAE,GAAG,CAAC;QACrB,YAAY,EAAE,GAAG,CAAC;QAClB,UAAU,EAAE,GAAG,CAAC;QAChB,mBAAmB,EAAE,GAAG,CAAC;KAC5B;IAED,UAAU,QAAQ;QACd,YAAY,EAAE,GAAG,CAAC;KACrB;CACJ;AA6FD,eAAO,MAAM,oBAAoB,UAAW,MAAM,gBAKjD,CAAC"}
+{"version":3,"file":"GlobalContextWrapper.d.ts","sourceRoot":"","sources":["../../src/GlobalContextWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAcnD,UAAU,MAAM;IACZ,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;CACzC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,SAAS,EAAE,GAAG,CAAC;QACf,oBAAoB,EAAE,GAAG,CAAC;QAC1B,MAAM,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,GAAG,CAAC;QACX,YAAY,EAAE,GAAG,CAAC;QAClB,UAAU,EAAE,GAAG,CAAC;QAChB,mBAAmB,EAAE,GAAG,CAAC;KAC5B;IAED,UAAU,QAAQ;QACd,YAAY,EAAE,GAAG,CAAC;KACrB;CACJ;AAkGD,eAAO,MAAM,oBAAoB,UAAW,MAAM,sBAKjD,CAAC"}

package/lib/esm/GlobalContextWrapper.js

@@ -20,7 +20,9 @@ function GlobalContextMetadataWrapper() {
     const dispatchToGlobalMetadataReducer = React.useContext(GlobalMetadataDispatchContext);
     // Configuring callbacks to show modals in case of auth logout or session expiry
     useEffect(() => {
-        window.chrometwo_require(['session'], (session) => {
+        const init = () => __awaiter(this, void 0, void 0, function* () {
+            /** @type { import("@rhcp/primer") } */
+            const { session } = yield window.portal.primer.onReady();
             session.on('AuthLogout', () => setShowReLoginModal(true));
             ['AuthRefreshError', 'TokenExpired'].forEach((eventName) => session.on(eventName, () => {
                 if (!session.isAuthenticated()) {
@@ -28,6 +30,7 @@ function GlobalContextMetadataWrapper() {
                 }
             }));
         });
+        init();
     }, []);
     const loadGlobalMetadata = (loggedInUserJwtToken) => {
         setLoggedInUserJwtToken(dispatchToGlobalMetadataReducer, loggedInUserJwtToken);

package/lib/esm/components/AccountSelector/AccountSelectorInternal.d.ts

@@ -1,6 +1,7 @@
 import { IAccount } from '@cee-eng/hydrajs/@types/models/account';
 import { IAccountListParams } from '@cee-eng/hydrajs/@types/models/csp/account';
 import { AsyncDropdownProps } from '@rh-support/components';
+import React from 'react';
 interface IProps extends AsyncDropdownProps<IAccount> {
     selectedAccounts?: IAccount[];
     excludeAccounts?: IAccount[];
@@ -13,7 +14,7 @@ interface IProps extends AsyncDropdownProps<IAccount> {
     isInValid?: boolean;
     restrictedOnSubscriptionAbuse?: boolean;
 }
-declare function AccountSelectorInternal(props: IProps): JSX.Element;
+declare function AccountSelectorInternal(props: IProps): React.JSX.Element;
 declare namespace AccountSelectorInternal {
     var defaultProps: Partial<IProps>;
 }

package/lib/esm/components/AccountSelector/AccountSelectorInternal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccountSelectorInternal.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountSelector/AccountSelectorInternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAEhF,OAAO,EAAqB,kBAAkB,EAAoC,MAAM,wBAAwB,CAAC;AASjH,UAAU,MAAO,SAAQ,kBAAkB,CAAC,QAAQ,CAAC;IACjD,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,eAAe,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC7B,kBAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC;IACzC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B,CAAC,EAAE,OAAO,CAAC;CAC3C;AAuBD,iBAAS,uBAAuB,CAAC,KAAK,EAAE,MAAM,eAuL7C;kBAvLQ,uBAAuB;;;AA0LhC,OAAO,EAAE,uBAAuB,EAAE,CAAC"}
+{"version":3,"file":"AccountSelectorInternal.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountSelector/AccountSelectorInternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAgBhF,OAAO,EAAE,kBAAkB,EAA8B,MAAM,wBAAwB,CAAC;AAKxF,OAAO,KAA+C,MAAM,OAAO,CAAC;AAKpE,UAAU,MAAO,SAAQ,kBAAkB,CAAC,QAAQ,CAAC;IACjD,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,eAAe,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC7B,kBAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC;IACzC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B,CAAC,EAAE,OAAO,CAAC;CAC3C;AAkCD,iBAAS,uBAAuB,CAAC,KAAK,EAAE,MAAM,qBAyS7C;kBAzSQ,uBAAuB;;;AA4ShC,OAAO,EAAE,uBAAuB,EAAE,CAAC"}

package/lib/esm/components/AccountSelector/AccountSelectorInternal.js

@@ -8,14 +8,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { accounts } from '@cee-eng/hydrajs';
+import { Button, Flex, FlexItem, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { AsyncDropDownList, AsyncMultiDropDownList, useFetch } from '@rh-support/components';
-import { toOption, toOptions } from '@rh-support/utils';
-import assign from 'lodash/assign';
+import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
+import { LoadingIndicator, useFetch } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 import uniqBy from 'lodash/uniqBy';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { sortAccountsByQuery } from '../../utils';
 const defaultProps = {
     id: '',
     className: '',
@@ -36,48 +39,84 @@ const defaultProps = {
     isInValid: false,
     restrictedOnSubscriptionAbuse: false,
 };
+const getDisplayName = (account) => {
+    if (!account) {
+        return '';
+    }
+    return account.accountNumber
+        ? account.name
+            ? `${account.name} (${account.accountNumber})`
+            : account.accountNumber
+        : '';
+};
 function AccountSelectorInternal(props) {
     const { request, isFetching } = useFetch(accounts.getAccounts, { isAbortable: true });
     const [items, setItems] = useState([]);
     const [selectedItems, setSelectedItems] = useState([]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [isQueryChanged, setIsQueryChanged] = useState(false);
+    const [query, setQuery] = useState('');
+    const [focusedItemIndex, setFocusedItemIndex] = useState(null);
+    const textInputRef = useRef();
+    const inputGroupRef = useRef();
     const { t } = useTranslation();
     const bookmarkedAccountsDeduped = uniqBy(props.bookmarkedAccounts, (b) => b.accountNumber);
+    const pageSize = 20;
+    const [resultSize, setResultSize] = useState(pageSize);
+    const setQueryLabel = (selectedItems) => {
+        const item = !isEmpty(selectedItems) && !props.multiple ? selectedItems[0] : {};
+        setQuery(getDisplayName(item));
+    };
+    const itemsToRender = useMemo(() => (isEmpty(items) ? bookmarkedAccountsDeduped : items.slice(0, props.paginate ? resultSize : items.length)), [items, bookmarkedAccountsDeduped, props.paginate, resultSize]);
     useEffect(() => {
         if (!props.multiple) {
             const selectedItem = (props.selectedAccounts || [])[0];
-            selectedItem && selectedItem.accountNumber && setSelectedItems(props.selectedAccounts);
+            selectedItem && selectedItem.accountNumber && setSelectedItems(props.selectedAccounts || []);
         }
         else {
-            setSelectedItems(props.selectedAccounts);
+            setSelectedItems(props.selectedAccounts || []);
         }
     }, [props.selectedAccounts, props.multiple]);
-    const getDisplayName = (account) => {
-        if (!account) {
-            return undefined;
-        }
-        return account.accountNumber
-            ? account.name
-                ? `${account.name} (${account.accountNumber})`
-                : account.accountNumber
-            : '';
+    useEffect(() => {
+        setQueryLabel(selectedItems);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedItems, props.multiple]);
+    const onDisplayMoreClick = (e) => {
+        e.stopPropagation();
+        setResultSize((pre) => Math.min(pre + pageSize, items.length));
+        setIsOpen(true);
     };
-    const getDropdownOptions = (accounts) => {
-        if (!accounts) {
-            return [];
+    const dropdownOptions = useMemo(() => {
+        if (isFetching) {
+            return (React.createElement("div", { key: "searching", className: "pf-v5-u-px-md pf-v5-u-py-sm" },
+                React.createElement(Trans, null, "Searching...")));
         }
-        return accounts
-            .filter((account) => !!account && !props.excludeAccounts.find(({ accountId }) => accountId === account.accountId))
-            .map((account) => assign({
-            children: (React.createElement(React.Fragment, null, props.restrictedOnSubscriptionAbuse && account.subscriptionAbuse ? (React.createElement("span", { className: "form-instructions form-invalid" }, getDisplayName(account))) : (getDisplayName(account)))),
-            actionItem: (React.createElement(React.Fragment, null, props.restrictedOnSubscriptionAbuse && account.subscriptionAbuse && (React.createElement("span", { className: "form-instructions form-invalid pf-u-text-nowrap pf-u-pr-sm" },
-                ' ',
-                React.createElement(InfoCircleIcon, null),
-                " ",
-                React.createElement(Trans, null, "Subscription abuse"))))),
-        }, account));
-    };
+        if (isQueryChanged && isEmpty(items)) {
+            return (React.createElement("div", { key: "no-results", className: "pf-v5-u-px-md pf-v5-u-py-sm" },
+                React.createElement(Trans, null, "No results found")));
+        }
+        return [
+            ...itemsToRender.map((item, index) => (React.createElement(SelectOption, { isFocused: focusedItemIndex === index, key: index, value: item, hasCheckbox: props.multiple, isSelected: selectedItems.some((account) => item.accountNumber === account.accountNumber) }, props.restrictedOnSubscriptionAbuse && item.subscriptionAbuse ? (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
+                React.createElement(FlexItem, { className: "form-instructions form-invalid" }, getDisplayName(item)),
+                React.createElement(FlexItem, { className: "form-instructions form-invalid pf-v5-u-text-nowrap pf-v5-u-pr-sm" },
+                    React.createElement(InfoCircleIcon, null),
+                    " ",
+                    React.createElement(Trans, null, "Subscription abuse")))) : (React.createElement("span", null, getDisplayName(item)))))),
+            ...(resultSize < items.length
+                ? [
+                    React.createElement("div", { className: "pf-v5-c-divider", role: "separator", key: "separator" }),
+                    React.createElement(SelectOption, { key: 'diplay-more-option', onClick: onDisplayMoreClick, value: 'display-more' },
+                        React.createElement(Flex, { justifyContent: { default: 'justifyContentCenter' } },
+                            React.createElement(FlexItem, { className: '"pf-v5-c-button pf-m-link pf-m-inline' },
+                                React.createElement(Trans, null, "Display additional results")))),
+                ]
+                : []),
+        ];
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [items, bookmarkedAccountsDeduped, isFetching, itemsToRender, isQueryChanged]);
     const fetchAccounts = (query) => __awaiter(this, void 0, void 0, function* () {
-        if (query == null) {
+        if (isEmpty(query)) {
             return;
         }
         const fields = ['accountNumber', 'accountId', 'name', 'subscriptionAbuse'].join(',');
@@ -87,86 +126,132 @@ function AccountSelectorInternal(props) {
             limit: 60,
             accountNumberNotNull: true,
         };
+        let queryKey;
         // query as number is a hack to get around TS, isNaN can take a string but it was throwing error here
         if (isNaN(query)) {
             params.nameLike = query;
+            queryKey = 'name';
         }
         else {
             params.accountNumberLike = query;
+            queryKey = 'accountNumber';
         }
-        const queryParams = !isEmpty(props.accountListParams)
-            ? assign({}, props.accountListParams, params)
-            : params;
-        const response = yield request(queryParams);
-        const options = response && response.items && response.items.length ? getDropdownOptions(response.items) : [];
-        setItems(options);
-        // setIsLoading(false);
+        const queryParams = params;
+        const response = request && (yield request(queryParams));
+        const options = response && response.items && response.items.length ? response.items : [];
+        const sortedOptions = sortAccountsByQuery(options, query, queryKey);
+        setItems(sortedOptions);
     });
-    // To handle dropdown change
-    const onDropdownChange = (item) => {
-        const account = {
-            accountNumber: item.value.accountNumber,
-            name: item.value.name,
-            subscriptionAbuse: item.value.subscriptionAbuse,
+    const onOuterClick = () => {
+        setQueryLabel(props.selectedAccounts || []);
+        setSelectedItems(props.selectedAccounts || []);
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (inputGroupRef.current && !inputGroupRef.current.contains(event.target)) {
+                onOuterClick();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
         };
-        setSelectedItems([account]);
-        props.onSelect && props.onSelect([account]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedItems, props.selectedAccounts]);
+    const onMultiAccountSelection = (selection) => {
+        let list = [];
+        if (selectedItems.some((item) => item.accountNumber === selection.accountNumber)) {
+            list = selectedItems.filter((item) => item.accountNumber !== selection.accountNumber);
+        }
+        else {
+            list = [...props.selectedAccounts, selection];
+        }
+        setSelectedItems(list);
+        props.onSelect && props.onSelect(list);
     };
-    const onOuterClick = () => {
-        setSelectedItems(props.selectedAccounts);
+    const onSingleAccountSelection = (selection) => {
+        var _a;
+        setSelectedItems([selection]);
+        props.onSelect && props.onSelect([selection]);
+        setIsOpen(false);
+        (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    };
+    const onFilter = (_event, value) => {
+        setQuery(value);
+        setIsQueryChanged(!isEmpty(value));
+        fetchAccounts(value);
+        setResultSize(pageSize);
+        setFocusedItemIndex(null);
+    };
+    const onToggleClick = () => {
+        setIsOpen((pre) => !pre);
     };
-    const onDropdownClear = () => {
+    const onClearSelection = (e) => {
+        var _a;
+        e.stopPropagation();
+        setIsOpen(true);
         setSelectedItems([]);
+        setItems([]);
+        setIsQueryChanged(false);
+        (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    // this is the most important part to memoize the selected item. If you don't then every time
-    // new results are fetched the dropdown will render and toOption always create a new object
-    // forcing dropdown to render and overriding the input value
-    const memoizedSelectedItems = useMemo(() => toOption(selectedItems[0], { labelKey: getDisplayName }), [selectedItems]);
-    const memoizedBookmarkAccounts = useMemo(() => toOptions(getDropdownOptions(bookmarkedAccountsDeduped || []), {
-        labelKey: getDisplayName,
-        childrenKey: 'children',
-        actionItemKey: 'actionItem',
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [bookmarkedAccountsDeduped]);
-    const onMultiChange = (items) => {
-        const accounts = items.map((item) => ({
-            accountNumber: item.value.accountNumber,
-            name: item.value.name,
-            subscriptionAbuse: item.value.subscriptionAbuse,
-        }));
-        setSelectedItems(accounts);
-        props.onSelect && props.onSelect(accounts);
+    const onSelect = (selection) => {
+        if (selection === 'display-more' || isUndefined(selection) || isNull(selection))
+            return;
+        props.multiple ? onMultiAccountSelection(selection) : onSingleAccountSelection(selection);
     };
-    const commonProps = {
-        disabled: props.disabled,
-        placeholder: t(props.placeholder),
-        id: props.id,
-        className: props.className,
-        title: props.title,
-        delay: props.delay,
-        useCache: props.useCache,
-        isLoadingList: isFetching,
-        paginate: props.paginate,
-        maxResults: props.maxResults,
-        emptyListLabel: props.emptyListLabel,
-        onClearSelection: onDropdownClear,
-        'data-tracking-id': 'account-selector-dropdown',
-        onSearch: fetchAccounts,
-        list: items
-            ? toOptions(items, {
-                labelKey: getDisplayName,
-                childrenKey: 'children',
-                actionItemKey: 'actionItem',
-            })
-            : [],
-        suggestedItems: props.suggestBookmarkAccounts && props.canBookmarkAccount && bookmarkedAccountsDeduped
-            ? memoizedBookmarkAccounts
-            : [],
-        onOuterClick: onOuterClick,
-        label: props.label,
+    const handleMenuArrowKeys = (key) => {
+        let indexToFocus;
+        if (isOpen) {
+            if (key === 'ArrowUp') {
+                // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+                if (focusedItemIndex === null || focusedItemIndex === 0) {
+                    indexToFocus = itemsToRender.length - 1;
+                }
+                else {
+                    indexToFocus = focusedItemIndex - 1;
+                }
+            }
+            if (key === 'ArrowDown') {
+                // When no index is set or at the last index, focus to the first, otherwise increment focus index
+                if (focusedItemIndex === null || focusedItemIndex === itemsToRender.length - 1) {
+                    indexToFocus = 0;
+                }
+                else {
+                    indexToFocus = focusedItemIndex + 1;
+                }
+            }
+            setFocusedItemIndex(indexToFocus);
+        }
+    };
+    const onInputKeyDown = (event) => {
+        const focusedItem = focusedItemIndex ? itemsToRender[focusedItemIndex] : itemsToRender[0];
+        switch (event.key) {
+            // Select the first available option
+            case 'Enter':
+                if (!isOpen) {
+                    setIsOpen((pre) => !pre);
+                }
+                else if (isOpen) {
+                    onSelect(focusedItem);
+                }
+                break;
+            case 'Escape':
+                setIsOpen(false);
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                handleMenuArrowKeys(event.key);
+                break;
+        }
     };
-    return props.multiple ? (React.createElement(AsyncMultiDropDownList, Object.assign({}, commonProps, { isInValid: props.isInValid, onChange: onMultiChange, selectedItems: toOptions(selectedItems, { labelKey: getDisplayName }) }))) : (React.createElement(AsyncDropDownList, Object.assign({}, commonProps, { isInValid: props.isInValid, selectedItem: memoizedSelectedItems, onChange: onDropdownChange })));
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { innerRef: toggleRef, variant: "typeahead", onClick: onToggleClick, isExpanded: isOpen, isFullWidth: true, isDisabled: props.disabled },
+        React.createElement(TextInputGroup, { isPlain: true, innerRef: inputGroupRef },
+            React.createElement(TextInputGroupMain, { value: query, role: "combobox", onClick: onToggleClick, onKeyDown: onInputKeyDown, onChange: onFilter, placeholder: t(props.placeholder || ''), isExpanded: isOpen, innerRef: textInputRef, "aria-label": `select${props.multiple ? ' multi' : ''} typeahead listbox`, "aria-controls": "account-selector-dropdown" }),
+            React.createElement(TextInputGroupUtilities, null, !isEmpty(query) && (React.createElement(Button, { variant: "plain", onClick: onClearSelection, isDisabled: isFetching, "aria-label": t('Clear') }, isFetching ? React.createElement(LoadingIndicator, { show: true, size: "sm" }) : React.createElement(TimesCircleIcon, { "aria-hidden": true })))))));
+    return (React.createElement(Select, { "data-tracking-id": "account-selector-dropdown", isOpen: isOpen, onOpenChange: () => setIsOpen(false), id: props.id, toggle: toggle, popperProps: { direction: 'down', enableFlip: false }, onSelect: (_e, v) => onSelect(v), selected: selectedItems, isScrollable: true },
+        React.createElement(SelectList, null, dropdownOptions)));
 }
 AccountSelectorInternal.defaultProps = defaultProps;
 export { AccountSelectorInternal };

package/lib/esm/components/EmbeddedServiceChat/ChatSVGIcon.d.ts

@@ -1,2 +1,3 @@
-export declare const ChatSVGIcon: () => JSX.Element;
+import React from 'react';
+export declare const ChatSVGIcon: () => React.JSX.Element;
 //# sourceMappingURL=ChatSVGIcon.d.ts.map

package/lib/esm/components/EmbeddedServiceChat/ChatSVGIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatSVGIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/EmbeddedServiceChat/ChatSVGIcon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,mBAwBvB,CAAC"}
+{"version":3,"file":"ChatSVGIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/EmbeddedServiceChat/ChatSVGIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,WAAW,yBAwBvB,CAAC"}

package/lib/esm/components/EmbeddedServiceChat/EmbeddedServiceChat.js

@@ -17,7 +17,7 @@ export const EmbeddedServiceChat = () => {
         setIsBlockedErrorBoxVisible(true);
     };
     const chatErrorMessagePopover = () => (React.createElement("div", { className: "chatButton chatError", id: "chat-blocked-popover-selector" },
-        React.createElement(Popover, { "aria-label": t('Cannot connect to chat support'), alertSeverityVariant: 'danger', position: PopoverPosition.top, hasAutoWidth: true, headerIcon: React.createElement(ExclamationCircleIcon, { className: "pf-u-danger-color-100" }), headerComponent: "h1", headerContent: React.createElement(Trans, null, "Cannot connect to chat support"), bodyContent: React.createElement("p", { className: "pf-u-px-md" },
+        React.createElement(Popover, { "aria-label": t('Cannot connect to chat support'), alertSeverityVariant: 'danger', position: PopoverPosition.top, hasAutoWidth: true, headerIcon: React.createElement(ExclamationCircleIcon, { className: "pf-v5-u-danger-color-100" }), headerComponent: "h1", headerContent: React.createElement(Trans, null, "Cannot connect to chat support"), bodyContent: React.createElement("p", { className: "pf-v5-u-px-md" },
                 React.createElement(Trans, null, "There are multiple problems that can cause this error."),
                 React.createElement("br", null),
                 React.createElement("a", { href: `https://access.redhat.com/articles/313583#${hasBlockedByBrowser
@@ -26,7 +26,7 @@ export const EmbeddedServiceChat = () => {
                             ? 'troubleshoot_network'
                             : ''}`, target: "_blank", rel: "noreferrer noopener" },
                     React.createElement(Trans, null, "See a list of possible causes."))), isVisible: isBlockedErrorBoxVisible, shouldClose: shouldClose, shouldOpen: shouldOpen },
-            React.createElement(Button, { variant: ButtonVariant.link, className: "pf-u-m-0 pf-u-p-0" },
+            React.createElement(Button, { variant: ButtonVariant.link, className: "pf-v5-u-m-0 pf-v5-u-p-0" },
                 React.createElement(ChatSVGIcon, null)))));
     useEffect(() => {
         initEmbedChat();
@@ -35,8 +35,8 @@ export const EmbeddedServiceChat = () => {
     if (chatNotLoaded)
         return React.createElement(React.Fragment, null);
     return loadingChat ? (React.createElement("div", { className: "chatButton" },
-        React.createElement(Spinner, { isSVG: true, diameter: "28px", className: "pf-u-m-xs" }))) : hasBlockedByBrowser || hasChatDomainsBlocked ? (chatErrorMessagePopover()) : !isChatStarted ? (React.createElement("div", { className: "chatButton", onClick: onStartChat, "data-tracking-id": "embedded-service-chat", ref: componentRef, id: "chat-bot-wrapper" },
+        React.createElement(Spinner, { diameter: "28px", className: "pf-v5-u-m-xs" }))) : hasBlockedByBrowser || hasChatDomainsBlocked ? (chatErrorMessagePopover()) : !isChatStarted ? (React.createElement("div", { className: "chatButton", onClick: onStartChat, "data-tracking-id": "embedded-service-chat", ref: componentRef, id: "chat-bot-wrapper" },
         React.createElement(ChatSVGIcon, null),
         React.createElement(NewFeaturePopoverAnnouncement, { "aria-label": t('Support now has a chatbot (beta). Try it if you need help with a case.'), featureName: FeatureAnnouncementKeys.CHAT_BOT, sectionRef: componentRef, bodyContent: React.createElement("div", null,
-                React.createElement(Trans, null, "Support now has a chatbot (beta). Try it if you need help with a case.")), reference: () => document.getElementById('chat-bot-wrapper') }))) : (React.createElement(React.Fragment, null));
+                React.createElement(Trans, null, "Support now has a chatbot (beta). Try it if you need help with a case.")), triggerRef: () => document.getElementById('chat-bot-wrapper') }))) : (React.createElement(React.Fragment, null));
 };

package/lib/esm/components/HostnameAwarenessModal/HostnameAwarenessModal.d.ts

@@ -1,3 +1,4 @@
 import './hostnameAwarenessModal.css';
-export declare const HostnameAwarenessModal: () => JSX.Element;
+import React from 'react';
+export declare const HostnameAwarenessModal: () => React.JSX.Element;
 //# sourceMappingURL=HostnameAwarenessModal.d.ts.map

package/lib/esm/components/HostnameAwarenessModal/HostnameAwarenessModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HostnameAwarenessModal.d.ts","sourceRoot":"","sources":["../../../../src/components/HostnameAwarenessModal/HostnameAwarenessModal.tsx"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAC;AActC,eAAO,MAAM,sBAAsB,mBA2KlC,CAAC"}
+{"version":3,"file":"HostnameAwarenessModal.d.ts","sourceRoot":"","sources":["../../../../src/components/HostnameAwarenessModal/HostnameAwarenessModal.tsx"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAC;AAOtC,OAAO,KAA0C,MAAM,OAAO,CAAC;AAO/D,eAAO,MAAM,sBAAsB,yBAsKlC,CAAC"}

package/lib/esm/components/HostnameAwarenessModal/HostnameAwarenessModal.js

@@ -17,56 +17,65 @@ import React, { useContext, useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
 import { GlobalMetadataDispatchContext, useGlobalStateContext } from '../../context/GlobalMetadataContext';
 import { useUserPreferences } from '../../hooks';
-import { fetchLoggedInUsersAccount } from '../../reducers/GlobalMetadataReducer';
+import { updateShareHostnameWithRHTState } from '../../reducers/GlobalMetadataReducer';
 export const HostnameAwarenessModal = () => {
     // Function to fetch original data
     const { getHostnamesVisibilityObj, updateShowHostnamesCount } = useUserPreferences();
     // Setting State for original data value which are used to open/finalize close modal
-    const [originalViewedCountValue, setViewedCountValue] = useState(null);
-    const [doNotShowModal, setDoNotShowModal] = useState(undefined);
-    const [doNotShowNotClicked, setDoNotShowNotClicked] = useState(true);
-    const [isModalOpen, setIsModalOpen] = useState(true);
+    const [originalViewedCountValue, setViewedCountValue] = useState(undefined);
+    const [doNotShowModal, setDoNotShowModal] = useState(0);
+    const [isModalOpen, setIsModalOpen] = useState(false);
     const [isHostnamesChecked, setisHostnamesChecked] = useState(false);
-    const [isLoadingHostnamesVisibilityObj, setIsLoadingHostnamesVisibilityObj] = useState(false);
-    //preserving initial state to disable modal load
-    const [alreadyCheckedCloseModal, setAlreadyCheckedCloseModal] = useState(false);
-    const [isHostnamesLoading, setIsHostnamesLoading] = useState(true);
-    const { globalMetadataState: { loggedInUsersAccount, loggedInUserJwtToken }, } = useGlobalStateContext();
+    const { globalMetadataState: { loggedInUsersAccount }, } = useGlobalStateContext();
     const dispatchToGlobalMetadataReducer = useContext(GlobalMetadataDispatchContext);
     const accountNumber = loggedInUsersAccount.data.accountNumber;
     const { request: updateHostnameDefault, isFetching: isFetchingUpdateHostnameDefault } = useFetch(accounts.updateIsSharingHostname);
+    //Do not show modal if user cannot share hostnames.
+    const canUseHostName = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseListFields.HOSTNAME);
     useEffect(() => {
+        if (loggedInUsersAccount.isFetching)
+            return;
+        let localOriginalViewedCountValue;
+        let localDoNotShowModal;
         const userOriginalHostnamesCount = () => __awaiter(void 0, void 0, void 0, function* () {
             try {
-                setIsLoadingHostnamesVisibilityObj(true);
                 const originalHostnameVisibilityObj = yield getHostnamesVisibilityObj();
+                if (!originalHostnameVisibilityObj)
+                    return;
                 const parsedVisibilityObj = JSON.parse(originalHostnameVisibilityObj);
-                setIsLoadingHostnamesVisibilityObj(false);
+                // updating space takes time, here we define a lcal variable to immidiatly use the value
+                localOriginalViewedCountValue = parsedVisibilityObj.shownCount;
+                localDoNotShowModal = parsedVisibilityObj.doNotShow;
                 setViewedCountValue(parsedVisibilityObj.shownCount);
                 setDoNotShowModal(parsedVisibilityObj.doNotShow);
             }
             catch (error) {
-                setIsLoadingHostnamesVisibilityObj(false);
                 console.log(error);
             }
         });
         const userOriginalHostnameValue = () => __awaiter(void 0, void 0, void 0, function* () {
-            var _a, _b;
+            var _a;
             setisHostnamesChecked((_a = loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.shareHostnameWithRHT);
-            // This is needed so we preserve initial state we do not close modal upon updating names.
-            setAlreadyCheckedCloseModal((_b = loggedInUsersAccount.data) === null || _b === void 0 ? void 0 : _b.shareHostnameWithRHT);
-            setIsHostnamesLoading(false);
         });
-        userOriginalHostnamesCount();
-        userOriginalHostnameValue();
+        const init = () => __awaiter(void 0, void 0, void 0, function* () {
+            yield userOriginalHostnamesCount();
+            userOriginalHostnameValue();
+            //Do not show modal if user is already sharing hostnames, has seen the modal more than twice, or opted to not show it again
+            if (canUseHostName && localDoNotShowModal !== 1 && localOriginalViewedCountValue < 2) {
+                setIsModalOpen(true);
+            }
+        });
+        init();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [loggedInUsersAccount.isFetching]);
     // To handle modal close
     const onCloseModal = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (isFetchingUpdateHostnameDefault)
+            return;
         try {
             const updatedCountValue = (originalViewedCountValue || 0) + 1;
             updateShowHostnamesCount({ shownCount: updatedCountValue, doNotShow: doNotShowModal });
-            setIsModalOpen(!isModalOpen);
+            setIsModalOpen(false);
         }
         catch (error) {
             console.log(error);
@@ -75,21 +84,19 @@ export const HostnameAwarenessModal = () => {
     // for hostnames swich
     const onHostnameSwitchChange = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
-            setIsHostnamesLoading(true);
             yield updateHostnameDefault(!isHostnamesChecked, accountNumber);
-            fetchLoggedInUsersAccount(dispatchToGlobalMetadataReducer, loggedInUserJwtToken, true);
+            // update state
+            updateShareHostnameWithRHTState(dispatchToGlobalMetadataReducer, loggedInUsersAccount.data, true);
             setisHostnamesChecked(!isHostnamesChecked);
         }
         catch (error) {
             console.log(error);
         }
-        setIsHostnamesLoading(false);
     });
     //for the checkbox
     const onDoNotAskAgain = () => {
         try {
-            setDoNotShowNotClicked(false);
-            setDoNotShowModal(!doNotShowModal);
+            setDoNotShowModal(1);
             const updateObjValue = { shownCount: originalViewedCountValue, doNotShow: 1 };
             updateShowHostnamesCount(updateObjValue);
         }
@@ -105,27 +112,15 @@ export const HostnameAwarenessModal = () => {
         return (React.createElement(React.Fragment, null,
             React.createElement(Switch, { label: "Share hostnames", isChecked: isHostnamesChecked, onChange: onHostnameSwitchChange, className: "push-top-narrow" }),
             React.createElement(Tooltip, { content: shareHostnamesClarificationCopy, position: "right" },
-                React.createElement(InfoIcon, { className: "pf-u-ml-sm hostnameInfoIcon" })),
-            isHostnamesLoading && (React.createElement(Spinner, { isSVG: true, size: "lg", className: "pf-u-ml-sm hostnameSpinner", "aria-label": "Hostname loading" }))));
+                React.createElement(InfoIcon, { className: "pf-v5-u-ml-sm hostnameInfoIcon" })),
+            isFetchingUpdateHostnameDefault && (React.createElement(Spinner, { size: "lg", className: "pf-v5-u-ml-sm hostnameSpinner", "aria-label": "Hostname loading" }))));
     };
-    //Do not show modal if user cannot share hostnames.
-    const canUseHostName = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseListFields.HOSTNAME);
-    //Do not show modal if user is already sharing hostnames, has seen the modal more than twice, or opted to not show it again
-    if (isFetchingUpdateHostnameDefault ||
-        isLoadingHostnamesVisibilityObj ||
-        !canUseHostName ||
-        alreadyCheckedCloseModal ||
-        originalViewedCountValue > 2 ||
-        (doNotShowModal === 1 && doNotShowNotClicked)) {
-        return React.createElement(React.Fragment, null);
-    }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Modal, { variant: ModalVariant.medium, title: "Share hostnames with Red Hat?", isOpen: isModalOpen, onClose: onCloseModal, actions: [
-                React.createElement(Button, { "data-tracking-id": "close-hostname-modal", key: "close", variant: "primary", onClick: onCloseModal }, "Close"),
-                React.createElement("div", { className: "dontAskCheckbox" },
-                    React.createElement(Checkbox, { isChecked: !!doNotShowModal, label: "Don't ask me again", id: "dont-ask-again", "data-tracking-id": "dont-ask-again-hostname-modal", onChange: onDoNotAskAgain })),
-            ] },
-            React.createElement("div", null,
-                React.createElement(Trans, null, "Red Hat Support cannot currently access hostnames that have been entered on a case. You can share this information at any time to improve your support experience, or you can ignore this.")),
-            modalBody())));
+    return (React.createElement(Modal, { variant: ModalVariant.medium, title: "Share hostnames with Red Hat?", isOpen: isModalOpen, onClose: onCloseModal, actions: [
+            React.createElement(Button, { "data-tracking-id": "close-hostname-modal", key: "close", variant: "primary", onClick: onCloseModal, isDisabled: isFetchingUpdateHostnameDefault }, "Close"),
+            React.createElement("div", { className: "dontAskCheckbox" },
+                React.createElement(Checkbox, { isChecked: !!doNotShowModal, label: "Don't ask me again", id: "dont-ask-again", "data-tracking-id": "dont-ask-again-hostname-modal", onChange: onDoNotAskAgain })),
+        ] },
+        React.createElement("div", null,
+            React.createElement(Trans, null, "Red Hat Support cannot currently access hostnames that have been entered on a case. You can share this information at any time to improve your support experience, or you can ignore this.")),
+        modalBody()));
 };