@rh-support/cases 2.1.69 → 2.1.71

package/lib/esm/components/case-list/CaseList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseList.d.ts","sourceRoot":"","sources":["../../../../src/components/case-list/CaseList.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AA4BlC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAKH,0BAA0B,EAI7B,MAAM,mBAAmB,CAAC;AAK3B,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAe,MAAM,cAAc,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,MAAM,IAAI,CAAC;AAK1C,OAAO,EAAgB,WAAW,EAA2B,MAAM,uBAAuB,CAAC;AAmC3F,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC3D,YAAY,EAAE,cAAc,EAAE,CAAC;CAClC;AAED,MAAM,MAAM,YAAY,GAAG,0BAA0B,CAAC,WAAW,EAAE,uBAAuB,CAAC,CAAC;AAM5F,MAAM,WAAW,gBAAgB;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAAC;CAChC;AAED,MAAM,WAAW,aAAa;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,qBA8frC"}
+{"version":3,"file":"CaseList.d.ts","sourceRoot":"","sources":["../../../../src/components/case-list/CaseList.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AA+BlC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAKH,0BAA0B,EAI7B,MAAM,mBAAmB,CAAC;AAK3B,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAe,MAAM,cAAc,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,MAAM,IAAI,CAAC;AAK1C,OAAO,EAAgB,WAAW,EAA2B,MAAM,uBAAuB,CAAC;AAmC3F,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC3D,YAAY,EAAE,cAAc,EAAE,CAAC;CAClC;AAED,MAAM,MAAM,YAAY,GAAG,0BAA0B,CAAC,WAAW,EAAE,uBAAuB,CAAC,CAAC;AAM5F,MAAM,WAAW,gBAAgB;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAAC;CAChC;AAED,MAAM,WAAW,aAAa;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,qBAihBrC"}

package/lib/esm/components/case-list/CaseList.js

@@ -15,7 +15,7 @@ import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/js/icons/angle-dou
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/js/icons/angle-double-right-icon';
 import AngleDoubleUpIcon from '@patternfly/react-icons/dist/js/icons/angle-double-up-icon';
 import { ErrorBoundary, ToastNotification, useBreakpoint, useDocumentTitle, useForceUpdate, usePrevious, } from '@rh-support/components';
-import { fetchAllStatuses, fetchCaseGroupsForSSO, fetchCaseSeverities, fetchCaseTypes, fetchProducts, GlobalMetadataDispatchContext, GlobalMetadataStateContext, setUserPreferences, updateUserPreferences, UserPreferencesKeys, } from '@rh-support/react-context';
+import { CSSUserModal, fetchAllStatuses, fetchCaseGroupsForSSO, fetchCaseSeverities, fetchCaseTypes, fetchProducts, GlobalMetadataDispatchContext, GlobalMetadataStateContext, setUserPreferences, updateCaseListTraditionalSupportAgreed, updateUserPreferences, useGlobalDispatchContext, UserPreferencesKeys, } from '@rh-support/react-context';
 import { getStringifiedParams, getUrlParsedParams, haventLoadedMetadata, haventLoadedProductsMetadata, pendoTrackEvent, solrResponseToFacetFields, solrResponseToPivotFields, } from '@rh-support/utils';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
@@ -49,7 +49,8 @@ export function CaseList(props) {
     const { caseList, pivotValues, isFetching, filterValuesFromFacetResponse, currentQuery } = useCaseListStateContext();
     const CaseListDispatch = useCaseListDispatchContext();
     const breakPoint = useBreakpoint();
-    const { globalMetadataState, globalMetadataState: { caseGroups, loggedInUserJwtToken, loggedInUserRights, loggedInUsersAccount, userPreferences, managedAccounts, bookmarkedAccounts, bookmarkedGroupAccounts, allCaseTypes, allCaseSeverities, allCaseStatuses, allProducts, }, } = useContext(GlobalMetadataStateContext);
+    const { globalMetadataState, globalMetadataState: { caseGroups, loggedInUserJwtToken, loggedInUserRights, loggedInUsersAccount, userPreferences, managedAccounts, bookmarkedAccounts, bookmarkedGroupAccounts, allCaseTypes, allCaseSeverities, allCaseStatuses, allProducts, caseListTraditionalSupportAgreed, }, } = useContext(GlobalMetadataStateContext);
+    const globalDispatchContext = useGlobalDispatchContext();
     const location = useLocation();
     const searchParams = getUrlParsedParams(location.search);
     const queryFromUrl = searchParams[FILTER_URL_QUERY_SEARCH_PARAM];
@@ -309,6 +310,9 @@ export function CaseList(props) {
         isCaseListFilterPanelExanded && isXLScreen && isBasicSearchMode && toggleFilterSection(true);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isBasicSearchMode]);
+    const onConfirmTraditionalSupportAgreement = () => {
+        updateCaseListTraditionalSupportAgreed(globalDispatchContext, true);
+    };
     const displayRHCDAlert = () => {
         const openClosedCopy = `Only showing cases that were ${RHCDValue} during the selected time range specified in
                             Customer Dashboard. Case counts may vary slightly based on data retention and availability
@@ -328,34 +332,35 @@ export function CaseList(props) {
         isCaseListFilterPanelExanded && (isXLScreen ? toggleFilterSection(true) : toggleFilterSection(false));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [breakPoint]);
-    return (React.createElement("article", { id: "rh-support-cases", className: "cases-main" },
-        isSolrSearchDown && (React.createElement("div", null,
-            React.createElement(Alert, { isInline: true, variant: AlertVariant.warning, component: "p", title: React.createElement(Trans, null,
+    return (React.createElement(React.Fragment, null,
+        React.createElement(CSSUserModal, { onConfirmTraditionalSupportAgreement: onConfirmTraditionalSupportAgreement, display: !caseListTraditionalSupportAgreed }),
+        React.createElement("article", { id: "rh-support-cases", className: "cases-main" },
+            isSolrSearchDown && (React.createElement(Alert, { isInline: true, variant: AlertVariant.warning, component: "p", title: React.createElement(Trans, null,
                     "Case search is working with limited functionality. Please check",
                     ' ',
                     React.createElement("a", { href: "https://status.redhat.com", target: "_blank", rel: "noreferrer", "data-tracking-id": "caselist-redirect-status-page" }, "status page"),
                     ' ',
-                    "for details.") }))),
-        React.createElement("section", { className: "case-search-top" },
-            !isEmpty(RHCDValue) && isRHCDAlertShown && React.createElement("div", { className: "push-bottom" }, displayRHCDAlert()),
-            React.createElement("div", { className: "search-wrapper" },
-                React.createElement("div", { className: "open-case" },
-                    React.createElement(NewCaseButton, { routeProps: props.routeProps })),
-                React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading case search input') } },
-                    React.createElement(CaseSearch, { defaultSavedSearchName: defaultSavedSearchName }))),
-            isBasicSearchMode && (React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading filter chips') } },
-                React.createElement(CaseListFilterChips, { productVersionPivotValues: get(pivotValues, SolrPivotKeys.product_version, []), isSolrSearchDown: isSolrSearchDown })))),
-        React.createElement("section", { className: "case-search-bottom" },
-            isBasicSearchMode && (React.createElement("aside", { className: `case-search-filters ${((_a = filterSectionRef.current) === null || _a === void 0 ? void 0 : _a.expanded) ? '' : 'collapsed'}` },
-                React.createElement("h2", { className: "filter-header" }, ((_b = filterSectionRef.current) === null || _b === void 0 ? void 0 : _b.expanded) ? (React.createElement(React.Fragment, null,
-                    React.createElement(Button, { variant: "link", isActive: true, title: t('Collapse filter section'), onClick: onToggleFilterBtnClick, iconPosition: "right", icon: isXLScreen ? React.createElement(AngleDoubleLeftIcon, null) : React.createElement(AngleDoubleUpIcon, null) },
-                        React.createElement("span", null,
-                            React.createElement(Trans, null, "Filters"))))) : (React.createElement(Button, { variant: "link", isActive: false, title: t('Expand filter section'), onClick: onToggleFilterBtnClick, iconPosition: "right", icon: isXLScreen ? React.createElement(AngleDoubleRightIcon, null) : React.createElement(AngleDoubleDownIcon, null) }, isXLScreen ? null : (React.createElement("span", null,
-                    React.createElement(Trans, null, "Filters")))))),
-                React.createElement("div", { className: "filter-wrapper" },
-                    React.createElement("pfe-collapse-panel", { id: "case-filters-panel", "pfe-animation": "false", ref: filterSectionRef },
-                        React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading filters') } },
-                            React.createElement(CaseListFilters, { filterValues: filterValuesFromFacetResponse, allCaseTypes: allCaseTypes, allCaseStatuses: allCaseStatuses, allCaseSeverities: allCaseSeverities, allProducts: allProducts, isSolrSearchDown: isSolrSearchDown })))))),
-            React.createElement("section", { className: "case-search-table" },
-                React.createElement(CaseListTable, { caseList: caseList, caseGroups: caseGroups.data || [], loggedInUserRights: loggedInUserRights.data, sortInfo: filterState.sortInfo, paginationInfo: filterState.paginationInfo, isCaseListPageLoading: isFetching, hasError: hasError, isSolrDown: isSolrSearchDown })))));
+                    "for details.") })),
+            React.createElement("section", { className: "case-search-top" },
+                !isEmpty(RHCDValue) && isRHCDAlertShown && React.createElement("div", { className: "push-bottom" }, displayRHCDAlert()),
+                React.createElement("div", { className: "search-wrapper" },
+                    React.createElement("div", { className: "open-case" },
+                        React.createElement(NewCaseButton, { routeProps: props.routeProps })),
+                    React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading case search input') } },
+                        React.createElement(CaseSearch, { defaultSavedSearchName: defaultSavedSearchName }))),
+                isBasicSearchMode && (React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading filter chips') } },
+                    React.createElement(CaseListFilterChips, { productVersionPivotValues: get(pivotValues, SolrPivotKeys.product_version, []), isSolrSearchDown: isSolrSearchDown })))),
+            React.createElement("section", { className: "case-search-bottom" },
+                isBasicSearchMode && (React.createElement("aside", { className: `case-search-filters ${((_a = filterSectionRef.current) === null || _a === void 0 ? void 0 : _a.expanded) ? '' : 'collapsed'}` },
+                    React.createElement("h2", { className: "filter-header" }, ((_b = filterSectionRef.current) === null || _b === void 0 ? void 0 : _b.expanded) ? (React.createElement(React.Fragment, null,
+                        React.createElement(Button, { variant: "link", isActive: true, title: t('Collapse filter section'), "data-tracking-id": "collapse-case-list-filter", onClick: onToggleFilterBtnClick, iconPosition: "right", icon: isXLScreen ? React.createElement(AngleDoubleLeftIcon, null) : React.createElement(AngleDoubleUpIcon, null) },
+                            React.createElement("span", null,
+                                React.createElement(Trans, null, "Filters"))))) : (React.createElement(Button, { variant: "link", isActive: false, title: t('Expand filter section'), "data-tracking-id": "expand-case-list-filter", onClick: onToggleFilterBtnClick, iconPosition: "right", icon: isXLScreen ? React.createElement(AngleDoubleRightIcon, null) : React.createElement(AngleDoubleDownIcon, null) }, isXLScreen ? null : (React.createElement("span", null,
+                        React.createElement(Trans, null, "Filters")))))),
+                    React.createElement("div", { className: "filter-wrapper" },
+                        React.createElement("pfe-collapse-panel", { id: "case-filters-panel", "pfe-animation": "false", ref: filterSectionRef },
+                            React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading filters') } },
+                                React.createElement(CaseListFilters, { filterValues: filterValuesFromFacetResponse, allCaseTypes: allCaseTypes, allCaseStatuses: allCaseStatuses, allCaseSeverities: allCaseSeverities, allProducts: allProducts, isSolrSearchDown: isSolrSearchDown })))))),
+                React.createElement("section", { className: "case-search-table" },
+                    React.createElement(CaseListTable, { caseList: caseList, caseGroups: caseGroups.data || [], loggedInUserRights: loggedInUserRights.data, sortInfo: filterState.sortInfo, paginationInfo: filterState.paginationInfo, isCaseListPageLoading: isFetching, hasError: hasError, isSolrDown: isSolrSearchDown }))))));
 }

package/lib/esm/components/case-list/case-list-filters/AccountsBookmarkedGroupFilter.js

@@ -98,6 +98,6 @@ export function AccountsBookmarkedGroupFilter(props) {
         return null;
     }
     return (React.createElement("div", { className: "pf-v5-c-select" },
-        React.createElement("label", { htmlFor: "case-list-group-filter" }, canAccessManagedAccounts ? t('Accounts') : t(filterNamesMap[SolrKeys.accountNumber])),
-        React.createElement(Select, { variant: SelectVariant.typeaheadMulti, onToggle: (_event, open) => onBookmarksToggle(open), onSelect: onBookmarksSelect, onClear: onBookmarksClear, isOpen: isOpen, onFilter: onBookmarksFilter, placeholderText: getDropdownBtnPlaceholder(t(canAccessManagedAccounts ? 'Select an account' : 'Search for a bookmark'), canAccessManagedAccounts ? selectedAccounts : selectedBookmarks, '', dropdownOptions.length, canAccessManagedAccounts ? t('All accounts') : t('All bookmarks')), "data-tracking-id": "accounts-filter", id: "case-list-group-filter" }, getBookmarksOptions(dropdownOptions))));
+        React.createElement("label", { htmlFor: "case-list-account-filter", className: "case-list-account-filter-label" }, canAccessManagedAccounts ? t('Accounts') : t(filterNamesMap[SolrKeys.accountNumber])),
+        React.createElement(Select, { variant: SelectVariant.typeaheadMulti, onToggle: (_event, open) => onBookmarksToggle(open), onSelect: onBookmarksSelect, onClear: onBookmarksClear, isOpen: isOpen, onFilter: onBookmarksFilter, placeholderText: getDropdownBtnPlaceholder(t(canAccessManagedAccounts ? 'Select an account' : 'Search for a bookmark'), canAccessManagedAccounts ? selectedAccounts : selectedBookmarks, '', dropdownOptions.length, canAccessManagedAccounts ? t('All accounts') : t('All bookmarks')), "data-tracking-id": "accounts-filter", id: "case-list-account-filter" }, getBookmarksOptions(dropdownOptions))));
 }

package/lib/esm/components/case-list/case-list-filters/CreatorSsoNameFilter.js

@@ -209,7 +209,7 @@ export function CreatorSsoNameFilter() {
             React.createElement(TextInputGroupMain, { value: externalQuery, onClick: onExternalToggle, onKeyDown: onInputKeyDown, placeholder: getDropdownBtnPlaceholder(t('Search for a name'), selectedExternalContacts.map((i) => i.label), ' ', filteredOptions.length + dropdownHeader.length, t('All contacts')), onChange: onExternalQueryChange, isExpanded: isExternalOpen, innerRef: externalInputRef, "aria-controls": "external-ssousername-filter", role: "combobox" }),
             React.createElement(TextInputGroupUtilities, null, !isEmpty(externalQuery) && (React.createElement(Button, { variant: "plain", onClick: () => setExternalQuery(''), isDisabled: isFetchingExternalContacts, "aria-label": t('Clear') }, isFetchingExternalContacts ? (React.createElement(LoadingIndicator, { show: true, size: "sm" })) : (React.createElement(TimesCircleIcon, { "aria-hidden": true }))))))));
     return (React.createElement("div", null,
-        React.createElement("label", { htmlFor: "case-list-username-filter" },
+        React.createElement("label", { htmlFor: "case-list-username-filter", className: "case-list-username-filter-label" },
             React.createElement(Trans, null, filterNamesMap['usernameFilterTitle'])),
         !loggedInUserRights.data.isInternal() ? (React.createElement(Select, { id: "external-ssousername-filter", "data-tracking-id": "external-ssousername-filter", isOpen: isExternalOpen, onOpenChange: () => setIsExternalOpen(false), toggle: externalToggle, popperProps: { direction: 'down', enableFlip: false }, isScrollable: true, onSelect: (_e, v) => onSelectExternal(v) },
             React.createElement(SelectList, null, filteredExternalList))) : (React.createElement(InternalSsoNameFilter, null))));

package/lib/esm/components/case-list/case-list-filters/GroupsFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/GroupsFilter.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAmB1C,wBAAgB,YAAY,sBA6D3B"}
+{"version":3,"file":"GroupsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/GroupsFilter.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAShF,wBAAgB,YAAY,sBA2P3B"}

package/lib/esm/components/case-list/case-list-filters/GroupsFilter.js

@@ -1,11 +1,13 @@
-import { MultiSelectDropDownList } from '@rh-support/components';
+import { Button, Divider, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { ability, resourceActions, resources } from '@rh-support/user-permissions';
-import { getDropdownBtnPlaceholder, toOptions } from '@rh-support/utils';
-import React, { useContext } from 'react';
+import { getDropdownBtnPlaceholder } from '@rh-support/utils';
+import isEmpty from 'lodash/isEmpty';
+import isUndefined from 'lodash/isUndefined';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { FILTER_SEARCHABLE_MODE_LIMIT } from '../../../enums/caseSearch';
 import { SolrKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
@@ -15,30 +17,157 @@ export function GroupsFilter() {
     const { globalMetadataState: { caseGroups }, } = useContext(GlobalMetadataStateContext);
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const dispatch = useContext(CaseListFilterDispatchContext);
+    const [inputValue, setInputValue] = useState('');
+    const [focusedItemIndex, setFocusedItemIndex] = useState(null);
+    const [activeItem, setActiveItem] = useState(null);
+    const list = [
+        ...(caseGroups.data ? caseGroups === null || caseGroups === void 0 ? void 0 : caseGroups.data.map((group) => ({ value: group.name, key: group.groupNum })) : []),
+    ];
+    const [selectOptions, setSelectOptions] = useState(list);
     const canViewManageTab = ability.can(resourceActions.READ, resources.MANAGE);
     const canViewCaseGroups = ability.can(resourceActions.READ, resources.CASE_GROUPS) && canViewManageTab;
-    const onGroupFilterChange = (selectedGroups) => {
-        selectedGroups = selectedGroups.map((i) => i.value);
-        updateFilter(dispatch, { filterKey: SolrKeys.group, values: selectedGroups });
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedItems, setSelectedItems] = useState({});
+    const textInputRef = useRef();
+    const onToggleClick = () => {
+        setIsOpen(!isOpen);
     };
-    const isFilterSearchable = caseGroups.data && caseGroups.data.length > FILTER_SEARCHABLE_MODE_LIMIT;
-    const list = [
-        ...(caseGroups.data ? caseGroups.data.map((group) => ({ value: group.name, key: group.groupNum })) : []),
-        {
-            children: canViewCaseGroups ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "pf-v5-c-divider", role: "separator" }),
-                React.createElement(Link, { className: "cta cta-link pf-v5-c-select__menu-item", to: "/manage/groups" },
-                    React.createElement(Trans, null, "Manage groups")))) : (React.createElement(React.Fragment, null)),
-            isNotSearchable: true,
-            isNonActionable: true,
-            isNotSelectable: true,
-        },
-    ];
-    return (React.createElement(MultiSelectDropDownList, { placeholder: getDropdownBtnPlaceholder(t('Select a group'), filterInfo[SolrKeys.group], ' ', (caseGroups.data || []).length, t('All selected')), "data-tracking-id": "groups-filter", id: "case-list-group-filter", title: t(filterNamesMap[SolrKeys.group]), label: t(filterNamesMap[SolrKeys.group]), searchable: isFilterSearchable, onChange: onGroupFilterChange, selectedItems: toOptions(filterInfo[SolrKeys.group], { labelKey: 'value' }), list: toOptions(list, {
-            labelKey: 'value',
-            childrenKey: 'children',
-            nonSearchableItemKey: 'isNotSearchable',
-            nonActionableItemKey: 'isNonActionable',
-            nonSelectableItemKey: 'isNotSelectable',
-        }) }));
+    const onSelect = (option) => {
+        const prevSelectedGroups = Object.keys(selectedItems).filter((item) => selectedItems[item] && item);
+        if (selectedItems[option.value]) {
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: !prevData[option.value] })));
+            const indexOfGroup = prevSelectedGroups.indexOf(option.value);
+            prevSelectedGroups.splice(indexOfGroup, 1);
+        }
+        else {
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
+            prevSelectedGroups.push(option.value);
+        }
+        const mapValueToKey = (value) => {
+            const selectedItem = list.find((item) => item.value === value);
+            return selectedItem;
+        };
+        const updatedFilterValues = prevSelectedGroups.map((item) => mapValueToKey(item));
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.group,
+            values: updatedFilterValues,
+        });
+    };
+    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 = (list === null || list === void 0 ? void 0 : list.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 === (list === null || list === void 0 ? void 0 : list.length) - 1) {
+                    indexToFocus = 0;
+                }
+                else {
+                    indexToFocus = focusedItemIndex + 1;
+                }
+            }
+            setFocusedItemIndex(indexToFocus);
+            const focusedItem = list[indexToFocus];
+            setActiveItem(`select-multi-typeahead-checkbox-${focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value.replace(' ', '-')}`);
+        }
+    };
+    const onInputKeyDown = (event) => {
+        const focusedItem = focusedItemIndex ? list[focusedItemIndex] : list[0];
+        switch (event.key) {
+            // Select the first available option
+            case 'Enter':
+                if (!isOpen) {
+                    setIsOpen((prevIsOpen) => !prevIsOpen);
+                }
+                else if (isOpen && (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value) !== 'no results') {
+                    onSelect(focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value);
+                }
+                break;
+            case 'Tab':
+            case 'Escape':
+                setIsOpen(false);
+                setActiveItem(null);
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                handleMenuArrowKeys(event.key);
+                break;
+        }
+    };
+    const onTextInputChange = (_event, value) => {
+        setInputValue(value);
+    };
+    const placeholder = getDropdownBtnPlaceholder(t('Select a group'), filterInfo[SolrKeys.group], '', (caseGroups.data || []).length, t('All selected'));
+    const onClick = () => {
+        var _a;
+        setInputValue('');
+        setSelectedItems({});
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.group,
+            values: [],
+        });
+        (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "typeahead", onClick: onToggleClick, innerRef: toggleRef, isExpanded: isOpen, isFullWidth: true },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, Object.assign({ value: inputValue, onClick: onToggleClick, onChange: onTextInputChange, onKeyDown: onInputKeyDown, id: "multi-typeahead-select-checkbox-input", autoComplete: "off", innerRef: textInputRef, placeholder: placeholder }, (activeItem && { 'aria-activedescendant': activeItem }), { role: "combobox", isExpanded: isOpen, "aria-controls": "select-multi-typeahead-checkbox-listbox" })),
+            Object.keys(selectedItems).filter((key) => selectedItems[key] === true).length ? (React.createElement(TextInputGroupUtilities, null,
+                React.createElement(Button, { variant: "plain", onClick: onClick, "aria-label": "Clear input value" },
+                    React.createElement(TimesIcon, { "aria-hidden": true })))) : (''))));
+    const dropdownOptions = useMemo(() => {
+        return (!isEmpty(selectOptions) ? selectOptions : list).map((option, index) => !isUndefined(option.value) && (React.createElement(SelectOption, { key: option.key, value: option, hasCheckbox: true, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-multi-typeahead-${option.value.replace(' ', '-')}` }, option.value)));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedItems, caseGroups === null || caseGroups === void 0 ? void 0 : caseGroups.data, selectOptions, focusedItemIndex]);
+    useEffect(() => {
+        let newSelectOptions = list;
+        // Filter menu items based on the text input value when one exists
+        if (inputValue) {
+            newSelectOptions = list.filter((option) => String(option === null || option === void 0 ? void 0 : option.value).toLowerCase().startsWith(inputValue.toLowerCase()));
+            // When no options are found after filtering, display 'No results found'
+            if (!newSelectOptions.length) {
+                newSelectOptions = [{ isDisabled: false, children: `No results found` }];
+            }
+            // Open the menu when the input value changes and the new value is not empty
+            if (!isOpen) {
+                setIsOpen(true);
+            }
+        }
+        setSelectOptions(newSelectOptions);
+        setFocusedItemIndex(null);
+        setActiveItem(null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputValue]);
+    useEffect(() => {
+        var _a;
+        if (isEmpty(filterInfo[SolrKeys.group])) {
+            setSelectedItems({});
+        }
+        else {
+            const selectedGroups = (_a = filterInfo[SolrKeys.group]) === null || _a === void 0 ? void 0 : _a.reduce((selection, group) => {
+                selection[group === null || group === void 0 ? void 0 : group.value] = true;
+                return selection;
+            }, {});
+            setSelectedItems(selectedGroups);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterInfo[SolrKeys.group]]);
+    return (React.createElement("div", { className: "group-filter" },
+        React.createElement("label", { htmlFor: "case-list-group-filter", className: "pf-v5-u-mb-sm group-filter-label" }, t(filterNamesMap[SolrKeys.group])),
+        React.createElement("div", { className: "pf-v5-c-select" },
+            React.createElement(Select, { role: "menu", "data-tracking-id": "groups-filter", id: "case-list-group-filter", title: t(filterNamesMap[SolrKeys.group]), isOpen: isOpen, selected: selectedItems, onSelect: (_e, v) => onSelect(v), onOpenChange: (nextOpen) => setIsOpen(nextOpen), popperProps: { direction: 'down', enableFlip: false }, toggle: toggle, isScrollable: true },
+                React.createElement(SelectList, null, dropdownOptions),
+                canViewCaseGroups && (React.createElement(React.Fragment, null,
+                    React.createElement(Divider, null),
+                    React.createElement(SelectList, null,
+                        React.createElement(Link, { className: "cta cta-link pf-v5-c-select__menu-item", to: "/manage/groups" },
+                            React.createElement(Trans, null, "Manage groups")))))))));
 }

package/lib/esm/scss/_pf-overrides.scss

@@ -9,9 +9,28 @@
     .pf-v5-c-select__menu {
         z-index: 1;
     }
+    li.pf-v5-c-menu__list-item {
+        font-size: 16px;
+        font-weight: 400;
+    }
 }
 
 .pf-v5-c-menu__group-title {
     margin: 0;
     padding: 0;
 }
+
+label.pf-v5-u-mb-sm.group-filter-label,
+.case-list-account-filter-label,
+.case-list-username-filter-label {
+    font-size: 14px !important;
+}
+
+.group-filter {
+    span.pf-v5-c-menu-toggle__text {
+        color: var(--pf-v5-global--palette--black-600);
+    }
+    #case-list-group-filter {
+        z-index: 9 !important;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/cases",
-    "version": "2.1.69",
+    "version": "2.1.71",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -43,8 +43,8 @@
         "@patternfly/patternfly": "5.1.0",
         "@patternfly/react-core": "5.1.1",
         "@patternfly/react-table": "5.1.1",
-        "@rh-support/components": "2.1.53",
-        "@rh-support/react-context": "2.1.59",
+        "@rh-support/components": "2.1.55",
+        "@rh-support/react-context": "2.1.61",
         "@rh-support/types": "2.0.3",
         "@rh-support/user-permissions": "2.1.39",
         "@rh-support/utils": "2.1.29",
@@ -96,5 +96,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "d579286a00d09356cd07729b5750176ad8e3c090"
+    "gitHead": "78f502e76b6377132fe700672387f0da8f6d3dc3"
 }