@rh-support/react-context 2.1.20-beta.16 → 2.1.20-beta.18

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/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;AAQxF,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,eAmS7C;kBAnSQ,uBAAuB;;;AAsShC,OAAO,EAAE,uBAAuB,EAAE,CAAC"}

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

@@ -8,13 +8,15 @@ 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 { isUndefined } from 'lodash';
 import isEmpty from 'lodash/isEmpty';
+import isNull from 'lodash/isNull';
 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';
 const defaultProps = {
     id: '',
@@ -36,48 +38,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(',');
@@ -94,79 +132,121 @@ function AccountSelectorInternal(props) {
         else {
             params.accountNumberLike = query;
         }
-        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) : [];
+        const queryParams = params;
+        const response = request && (yield request(queryParams));
+        const options = response && response.items && response.items.length ? response.items : [];
         setItems(options);
-        // setIsLoading(false);
     });
-    // 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, onClick: onToggleClick, onKeyDown: onInputKeyDown, onChange: onFilter, placeholder: t(props.placeholder || ''), isExpanded: isOpen, innerRef: textInputRef, "aria-controls": `select${props.multiple ? '-multi' : ''}-typeahead-listbox` }),
+            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/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.js

@@ -105,8 +105,8 @@ 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" })),
+            isHostnamesLoading && (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);

package/lib/esm/components/HostnameAwarenessModal/hostnameAwarenessModal.css

@@ -1,4 +1,4 @@
-div.dontAskCheckbox div.pf-c-check label.pf-c-check__label {
+div.dontAskCheckbox div.pf-v5-c-check label.pf-v5-c-check__label {
     line-height: 1;
 }
 

package/lib/esm/components/NewFeatureAnnouncement/NewFeatureLabel.js

@@ -28,6 +28,6 @@ export function NewFeatureLabel(props) {
         onFeatureDismiss();
     };
     return (React.createElement(Popover, Object.assign({}, popoverProps, conditionalProps, { hasAutoWidth: true, onHidden: onHidden }),
-        React.createElement(Label, { color: "green", className: "pf-u-ml-sm", icon: React.createElement(InfoCircleIcon, null) },
+        React.createElement(Label, { color: "green", className: "pf-v5-u-ml-sm", icon: React.createElement(InfoCircleIcon, null) },
             React.createElement(Trans, null, "New"))));
 }

package/lib/esm/components/SharedModals/CloseCaseModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CloseCaseModal.d.ts","sourceRoot":"","sources":["../../../../src/components/SharedModals/CloseCaseModal.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAkB/B,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACvB;AAUD,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,eA6J3C"}
+{"version":3,"file":"CloseCaseModal.d.ts","sourceRoot":"","sources":["../../../../src/components/SharedModals/CloseCaseModal.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAmB/B,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACvB;AAUD,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,eAmK3C"}

package/lib/esm/components/SharedModals/CloseCaseModal.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import './CloseCaseModal.scss';
-import { Button, ButtonVariant, Form, FormGroup, Modal, ModalVariant, Select, SelectOption, TextArea, } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { Button, ButtonVariant, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, ModalVariant, TextArea, } from '@patternfly/react-core';
+import { Select, SelectOption } from '@patternfly/react-core/deprecated';
 import isEmpty from 'lodash/isEmpty';
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -67,7 +67,7 @@ export function CloseCaseModal(props) {
             React.createElement(Button, { key: "close-modal", variant: ButtonVariant.secondary, onClick: props.onClose, isDisabled: props.isUpdating, "data-tracking-id": "close-case-description-modal-cancel" },
                 React.createElement(Trans, null, "Cancel")),
         ], variant: ModalVariant.medium },
-        React.createElement("div", { className: "pf-u-mb-md" }, !isCaseListPage ? (React.createElement("p", null,
+        React.createElement("div", { className: "pf-v5-u-mb-md" }, !isCaseListPage ? (React.createElement("p", null,
             React.createElement(Trans, null,
                 "Confirming will set the status of this case ",
                 React.createElement("strong", null, "closed"),
@@ -80,9 +80,15 @@ export function CloseCaseModal(props) {
             React.createElement("p", null,
                 React.createElement(Trans, null, "This action will also reset the currently selected filters to default state."))))),
         React.createElement(Form, { className: "close-case-modal-form" },
-            React.createElement(FormGroup, { label: t('Resolution'), isRequired: true, fieldId: "case-resolution", helperText: isCaseListPage ? t('All of the selected cases will have the same resolution in bulk edit.') : '', helperTextInvalid: "Required field", validated: showValidationError && !selectedResolution ? 'error' : 'default', helperTextInvalidIcon: React.createElement(ExclamationCircleIcon, null) },
-                React.createElement(Select, { "aria-label": t('Select an option that best fits'), id: "case-resolution", selections: selectedResolution, onSelect: onResolutionChange, isOpen: showDropdown, isDisabled: props.isUpdating, menuAppendTo: document.body, validated: showValidationError && !selectedResolution ? 'error' : 'default', placeholderText: t('Select an option that best fits'), onToggle: onDropdownToggle }, resolutionOptions.map((option, index) => (React.createElement(SelectOption, { key: index, value: option },
+            React.createElement(FormGroup, { label: t('Resolution'), isRequired: true, fieldId: "case-resolution" },
+                React.createElement(FormHelperText, null,
+                    React.createElement(HelperText, null,
+                        isCaseListPage && !(showValidationError && !selectedResolution) && (React.createElement(HelperTextItem, null,
+                            React.createElement(Trans, null, "All of the selected cases will have the same resolution in bulk edit."))),
+                        showValidationError && !selectedResolution && (React.createElement(HelperTextItem, { variant: "error", hasIcon: true },
+                            React.createElement(Trans, null, "Required field"))))),
+                React.createElement(Select, { "aria-label": t('Select an option that best fits'), id: "case-resolution", selections: selectedResolution, onSelect: onResolutionChange, isOpen: showDropdown, isDisabled: props.isUpdating, menuAppendTo: document.body, validated: showValidationError && !selectedResolution ? 'error' : 'default', placeholderText: t('Select an option that best fits'), onToggle: (_event, toggle) => onDropdownToggle(toggle) }, resolutionOptions.map((option, index) => (React.createElement(SelectOption, { key: index, value: option },
                     React.createElement(Trans, null, option)))))),
             showTextArea && (React.createElement(FormGroup, { label: t('Please describe your resolution'), type: "text", isRequired: true, fieldId: "close-case-description" },
-                React.createElement(TextArea, { validated: showValidationError && !resolutionDescription ? 'error' : 'default', isRequired: true, id: "close-case-description", name: "close-case-description", "aria-describedby": "close-case-description", value: resolutionDescription, placeholder: t('Please describe your resolution to help us better understand.'), onChange: onDescriptionChange, isDisabled: props.isUpdating }))))));
+                React.createElement(TextArea, { validated: showValidationError && !resolutionDescription ? 'error' : 'default', isRequired: true, id: "close-case-description", name: "close-case-description", "aria-describedby": "close-case-description", value: resolutionDescription, placeholder: t('Please describe your resolution to help us better understand.'), onChange: (_event, description) => onDescriptionChange(description), isDisabled: props.isUpdating, resizeOrientation: "vertical" }))))));
 }

package/lib/esm/components/SharedModals/CloseCaseModal.scss

@@ -1,10 +1,10 @@
 // To override close case modal font weight - PCM-11644
-div#case-close-modal.pf-c-modal-box__body {
-    form.pf-c-form.close-case-modal-form {
-        div.pf-c-form__group {
-            div.pf-c-form__group-label {
-                label.pf-c-form__label {
-                    span.pf-c-form__label-text {
+div#case-close-modal.pf-v5-c-modal-box__body {
+    form.pf-v5-c-form.close-case-modal-form {
+        div.pf-v5-c-form__group {
+            div.pf-v5-c-form__group-label {
+                label.pf-v5-c-form__label {
+                    span.pf-v5-c-form__label-text {
                         font-weight: 600 !important;
                     }
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/react-context",
-    "version": "2.1.20-beta.16",
+    "version": "2.1.20-beta.18",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -27,8 +27,8 @@
     ],
     "peerDependencies": {
         "@cee-eng/hydrajs": "4.16.33",
-        "@patternfly/react-core": "4.264.0",
-        "@patternfly/react-icons": "4.92.10",
+        "@patternfly/react-core": "5.1.1",
+        "@patternfly/react-icons": "5.1.1",
         "i18next": "^19.0.1",
         "lodash": "^4.17.21",
         "react": "17.0.2",
@@ -38,12 +38,12 @@
     },
     "dependencies": {
         "@cee-eng/hydrajs": "4.16.33",
-        "@patternfly/react-core": "4.264.0",
-        "@patternfly/react-icons": "4.92.10",
-        "@rh-support/components": "2.1.19-beta.15",
+        "@patternfly/react-core": "5.1.1",
+        "@patternfly/react-icons": "5.1.1",
+        "@rh-support/components": "2.1.19-beta.17",
         "@rh-support/types": "2.0.2",
-        "@rh-support/user-permissions": "2.1.13-beta.14",
-        "@rh-support/utils": "2.1.10-beta.13",
+        "@rh-support/user-permissions": "2.1.13-beta.15",
+        "@rh-support/utils": "2.1.10-beta.14",
         "i18next": "^19.0.1",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
@@ -84,5 +84,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "5ff0412071a8ed03e39d740083ae0ca3053fa6f2"
+    "gitHead": "41cdb63f8c678315dfb4668006a7ea656df5c988"
 }