@rh-support/cases 2.6.6 → 2.6.8

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;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,kBAAkB,CAAC;AAEpE,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,qBAugBrC"}
+{"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,kBAAkB,CAAC;AAEpE,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,qBAigBrC"}

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

@@ -10,10 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import '../../css/caseList.css';
 import '../../css/caseSearch.css';
 import { Alert, AlertActionCloseButton, AlertVariant, Button } from '@patternfly/react-core';
-import AngleDoubleDownIcon from '@patternfly/react-icons/dist/js/icons/angle-double-down-icon';
-import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/js/icons/angle-double-left-icon';
-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 OpenDrawerRightIcon from '@patternfly/react-icons/dist/js/icons/open-drawer-right-icon';
 import { ErrorBoundary, ToastNotification, useBreakpoint, useDocumentTitle, useForceUpdate, usePrevious, } from '@rh-support/components';
 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';
@@ -343,15 +340,13 @@ export function CaseList(props) {
                     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("h2", { className: "filter-header pf-v6-u-display-flex" }, ((_b = filterSectionRef.current) === null || _b === void 0 ? void 0 : _b.expanded) ? (React.createElement(React.Fragment, null,
+                        React.createElement(Button, { className: "pf-v6-u-flex-shrink-0 pf-v6-u-flex-none", variant: "link", title: t('Collapse filter section'), "data-tracking-id": "collapse-case-list-filter", onClick: onToggleFilterBtnClick, iconPosition: "right", icon: React.createElement(OpenDrawerRightIcon, { className: "mirrored" }) },
+                            React.createElement(Trans, null, "Filters")))) : (React.createElement(Button, { className: "pf-v6-u-flex-shrink-0 pf-v6-u-flex-none", variant: "link", title: t('Expand filter section'), "data-tracking-id": "expand-case-list-filter", onClick: onToggleFilterBtnClick, iconPosition: "right", icon: React.createElement(OpenDrawerRightIcon, null) }, isXLScreen ? 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("section", { className: "case-search-table pf-v6-u-display-flex pf-v6-u-flex-direction-column" },
                     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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccountsBookmarkedGroupFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/AccountsBookmarkedGroupFilter.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAS7D,eAAO,MAAM,YAAY,eAAgB,MAAM,sBAS9C,CAAC;AAEF,UAAU,MAAM;IACZ,uBAAuB,EAAE,OAAO,CAAC;IACjC,wBAAwB,EAAE,OAAO,CAAC;IAClC,yBAAyB,EAAE,OAAO,CAAC;CACtC;AAOD,eAAO,MAAM,QAAQ,cAAe,MAAM,eAAe,MAAM,WACiB,CAAC;AAEjF,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,MAAM,qBA8J1D"}
+{"version":3,"file":"AccountsBookmarkedGroupFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/AccountsBookmarkedGroupFilter.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAS7D,eAAO,MAAM,YAAY,eAAgB,MAAM,sBAS9C,CAAC;AAEF,UAAU,MAAM;IACZ,uBAAuB,EAAE,OAAO,CAAC;IACjC,wBAAwB,EAAE,OAAO,CAAC;IAClC,yBAAyB,EAAE,OAAO,CAAC;CACtC;AAOD,eAAO,MAAM,QAAQ,cAAe,MAAM,eAAe,MAAM,WACiB,CAAC;AAEjF,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,MAAM,qBAoL1D"}

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

@@ -1,5 +1,4 @@
-import { Label, Tooltip } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { Label, MenuToggle, Select, SelectOption, TextInputGroup, TextInputGroupMain, Tooltip, } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { LoadingIndicator } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
@@ -18,8 +17,8 @@ import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../Ca
 import { updateFilter } from '../CaseListFilterReducer';
 export const appendToMenu = (listLength) => {
     return (React.createElement(React.Fragment, null,
-        listLength !== 0 && 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/bookmarks" },
+        listLength !== 0 && React.createElement("div", { className: "pf-v6-c-divider", role: "separator" }),
+        React.createElement(Link, { className: "cta cta-link pf-v6-c-select__menu-item", to: "/manage/bookmarks" },
             React.createElement(Trans, null, "Manage bookmarks"))));
 };
 export const getLabel = (accountNo, accountName) => accountNo ? (accountName ? `${accountName} <${accountNo}>` : accountNo) : '';
@@ -45,9 +44,10 @@ export function AccountsBookmarkedGroupFilter(props) {
     const dropdownOptions = [...groupedBookmarksOptionsSorted, ...managedAccountsList];
     const selectedBookmarks = filterInfo[SolrKeys.accountNumber].filter((item) => Array.isArray(item.key));
     const selectedAccounts = filterInfo[SolrKeys.accountNumber].filter((item) => !Array.isArray(item.key));
+    const [input, setInput] = useState('');
     const getInfoToolTip = (groupName) => {
         const list = groupedBookmarks[groupName];
-        return (React.createElement("ul", { className: "no-list-style pf-v5-u-pl-0" }, list.map((b) => {
+        return (React.createElement("ul", { className: "no-list-style pf-v6-u-pl-0" }, list.map((b) => {
             return (React.createElement("li", { key: b.accountNumber },
                 b.name,
                 " (",
@@ -55,19 +55,8 @@ export function AccountsBookmarkedGroupFilter(props) {
                 ")"));
         })));
     };
-    const getBookmarksOptions = (options) => {
-        return [
-            ...options.map((b, id) => (React.createElement(SelectOption, { key: id, value: b, className: "pf-v5-c-select__menu-wrapper", role: "presentation" },
-                React.createElement("div", { className: "pf-v5-c-select__menu-item-main" },
-                    React.createElement("input", { className: "pf-v5-c-check__input pf-v5-u-mr-sm", type: "checkbox", checked: some(filterInfo[SolrKeys.accountNumber], b) }),
-                    React.createElement("span", null, b.value)),
-                Array.isArray(b.key) && (React.createElement(Tooltip, { content: getInfoToolTip(b.value), "aria-label": t('Bookmarked Accounts List') },
-                    React.createElement(Label, { color: "cyan", className: "pf-v5-u-ml-auto pf-v5-u-mr-sm", icon: React.createElement(InfoCircleIcon, null), "aria-label": t('Bookmarked Accounts') }, b.key.length)))))),
-            ...(canManageBookmarkAccounts ? [appendToMenu((bookmarkedGroupAccounts.data || []).length)] : []),
-        ];
-    };
-    const onBookmarksToggle = (open) => {
-        setIsOpen(open);
+    const onBookmarksToggle = () => {
+        setIsOpen((prev) => !prev);
     };
     const onBookmarksSelect = (e, selection) => {
         let selected = filterInfo[SolrKeys.accountNumber];
@@ -81,19 +70,10 @@ export function AccountsBookmarkedGroupFilter(props) {
             filterKey: SolrKeys.accountNumber,
             values: selected.map((i) => ({ value: i.value, key: i.key })),
         });
+        setInput('');
     };
-    const onBookmarksClear = () => {
-        updateFilter(dispatch, {
-            filterKey: SolrKeys.accountNumber,
-            values: [],
-        });
-    };
-    const onBookmarksFilter = (_, value) => {
-        if (!value)
-            return getBookmarksOptions(dropdownOptions);
-        const input = new RegExp(value, 'i');
-        const newOptions = dropdownOptions.filter((b) => input.test(b.value));
-        return getBookmarksOptions(newOptions);
+    const onTextInputChange = (value) => {
+        setInput(value);
     };
     if (!canReadBookmarkAccounts && !canAccessManagedAccounts) {
         return null;
@@ -101,16 +81,36 @@ export function AccountsBookmarkedGroupFilter(props) {
     /**
      * Adding loading spinner since bookmarked accounts are getting loaded in the background for the globalMetadataState
      */
+    const getFilteredBookmarksOptions = (filterValue = '') => {
+        const regex = new RegExp(filterValue, 'i');
+        const filteredOptions = filterValue ? dropdownOptions.filter((b) => regex.test(b.value)) : dropdownOptions;
+        return [
+            ...filteredOptions.map((b, id) => (React.createElement(SelectOption, { key: id, value: b, className: "pf-v6-c-select__menu-wrapper", role: "presentation" },
+                React.createElement("div", { className: "pf-v6-c-select__menu-item-main pf-v6-u-display-flex" },
+                    React.createElement("div", { className: "pf-v6-c-select__menu-item-main" },
+                        React.createElement("input", { className: "pf-v6-c-check__input pf-v6-u-mr-sm", type: "checkbox", checked: some(filterInfo[SolrKeys.accountNumber], b) }),
+                        React.createElement("span", null, b.value)),
+                    Array.isArray(b.key) && (React.createElement(Tooltip, { content: getInfoToolTip(b.value), "aria-label": t('Bookmarked Accounts List') },
+                        React.createElement(Label, { color: "teal", className: "pf-v6-u-ml-auto pf-v6-u-mr-sm", icon: React.createElement(InfoCircleIcon, null), "aria-label": t('Bookmarked Accounts') }, b.key.length))))))),
+            ...(canManageBookmarkAccounts ? [appendToMenu((bookmarkedGroupAccounts.data || []).length)] : []),
+        ];
+    };
     const bookmarkedAccountsOptions = [
         ...(bookmarkedGroupAccounts.isFetching
             ? [
-                React.createElement(SelectOption, { key: "loading-bookmarked-accounts", isDisabled: true },
+                React.createElement(SelectOption, { key: "loading-bookmarked-accounts", value: "loading-bookmarked-accounts", isDisabled: true },
                     React.createElement(LoadingIndicator, { size: "sm" })),
             ]
             : []),
-        ...getBookmarksOptions(dropdownOptions),
+        ...getFilteredBookmarksOptions(input),
     ];
-    return (React.createElement("div", { className: "pf-v5-c-select" },
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "typeahead", onClick: onBookmarksToggle, innerRef: toggleRef, isExpanded: isOpen, isFullWidth: true },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, { value: input, onChange: (_, value) => onTextInputChange(value), onClick: (e) => {
+                    e.stopPropagation();
+                    setIsOpen(true);
+                }, autoComplete: "off", placeholder: getDropdownBtnPlaceholder(t(canAccessManagedAccounts ? 'Select an account' : 'Search for a bookmark'), canAccessManagedAccounts ? selectedAccounts : selectedBookmarks, '', dropdownOptions.length, canAccessManagedAccounts ? t('All accounts selected') : t('All bookmarks selected')), role: "combobox", isExpanded: isOpen, "aria-controls": "bookmark-account-select-listbox" }))));
+    return (React.createElement("div", { className: "pf-v6-c-select" },
         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" }, bookmarkedAccountsOptions)));
+        React.createElement(Select, { toggle: toggle, onSelect: onBookmarksSelect, isOpen: isOpen, onOpenChange: (nextOpen) => setIsOpen(nextOpen), "data-tracking-id": "accounts-filter", id: "case-list-account-filter", isScrollable: true, popperProps: { direction: 'down', enableFlip: false }, shouldFocusFirstItemOnOpen: false }, bookmarkedAccountsOptions)));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CaseListFilterChips.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CaseListFilterChips.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAMtD,UAAU,MAAM;IACZ,yBAAyB,EAAE,uBAAuB,EAAE,CAAC;IACrD,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBA+HhD"}
+{"version":3,"file":"CaseListFilterChips.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CaseListFilterChips.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAMtD,UAAU,MAAM;IACZ,yBAAyB,EAAE,uBAAuB,EAAE,CAAC;IACrD,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBAmIhD"}

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

@@ -1,4 +1,4 @@
-import { Button, Chip, ChipGroup } from '@patternfly/react-core';
+import { Button, Label, LabelGroup } from '@patternfly/react-core';
 import { toNewCaseTypeMapper, toOldCaseTypeSwitcher } from '@rh-support/utils';
 import flatMap from 'lodash/flatMap';
 import remove from 'lodash/remove';
@@ -31,7 +31,7 @@ export function CaseListFilterChips(props) {
     };
     const renderFilterValueChips = (filterKey, filterValues, chipKeySuffix = '') => {
         const filterChips = filterValues.map((chip, index) => {
-            return (React.createElement(Chip, { key: `${filterKey}-${index}-${chipKeySuffix}`, onClick: deleteChip(filterKey, getChipKey(chip)) }, getChipValue(chip)));
+            return (React.createElement(Label, { variant: "outline", key: `${filterKey}-${index}-${chipKeySuffix}`, onClose: deleteChip(filterKey, getChipKey(chip)) }, getChipValue(chip)));
         });
         return filterChips;
     };
@@ -44,7 +44,7 @@ export function CaseListFilterChips(props) {
             return (React.createElement("div", { className: "filter-chip", key: `${filterKey}-bookmarks-${groupName}` },
                 React.createElement("span", { className: "filter-chip__heading" },
                     React.createElement(Trans, null, groupName || filterNamesMap[filterKey] || filterKey)),
-                React.createElement(ChipGroup, { numChips: 7, className: "pf-v5-c-chip-group__simple" }, renderFilterValueChips(filterKey, caseTypeFilter, groupName))));
+                React.createElement(LabelGroup, { numLabels: 7, className: "pf-v6-c-chip-group__simple" }, renderFilterValueChips(filterKey, caseTypeFilter, groupName))));
         }
     };
     const renderAccountFilterChip = () => {

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

@@ -1 +1 @@
-{"version":3,"file":"CreatorSsoNameFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CreatorSsoNameFilter.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAYhF,eAAO,MAAM,WAAW,0BAIvB,CAAC;AAYF,eAAO,MAAM,eAAe;;;;;;;GAA6E,CAAC;AAE1G,eAAO,MAAM,kBAAkB,iEAyC9B,CAAC;AAEF,wBAAgB,oBAAoB,sBA4PnC"}
+{"version":3,"file":"CreatorSsoNameFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CreatorSsoNameFilter.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAYhF,eAAO,MAAM,WAAW,0BAIvB,CAAC;AAYF,eAAO,MAAM,eAAe;;;;;;;GAA6E,CAAC;AAE1G,eAAO,MAAM,kBAAkB,iEAyC9B,CAAC;AAEF,wBAAgB,oBAAoB,sBA6PnC"}

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

@@ -180,16 +180,16 @@ export function CreatorSsoNameFilter() {
         return [
             ...(noResults && !isExternalNonOrgAdmin
                 ? [
-                    React.createElement("div", { key: "no-results", className: "pf-v5-u-p-sm" },
+                    React.createElement("div", { key: "no-results", className: "pf-v6-u-p-sm" },
                         React.createElement(Trans, null, "No results found")),
                 ]
                 : []),
             ...dropdownHeader.map((contact, index) => (React.createElement(SelectOption, { key: contact.value, isFocused: focusedItemIndex === index, value: contact, hasCheckbox: true, isSelected: selectedExternalContacts.some((c) => c.value === contact.value) }, contact.label))),
             ...(!isEmpty(filteredOptions)
                 ? [
-                    React.createElement("div", { className: "pf-v5-c-divider", role: "separator", key: "separator" }),
+                    React.createElement("div", { className: "pf-v6-c-divider", role: "separator", key: "separator" }),
                     React.createElement(SelectGroup, { key: "created-or-owned-by-accounts-group" },
-                        React.createElement("h6", { className: "pf-v5-u-pl-md" },
+                        React.createElement("h6", { className: "pf-v6-u-pl-md" },
                             React.createElement(Trans, null, "Created or owned by")),
                         filteredOptions.map((contact, index) => (React.createElement(SelectOption, { key: contact.value, isFocused: focusedItemIndex === index + dropdownHeader.length, value: contact, hasCheckbox: true, isSelected: selectedExternalContacts.some((c) => c.value === contact.value) },
                             React.createElement(Truncate, { content: contact.label }))))),
@@ -210,7 +210,7 @@ export function CreatorSsoNameFilter() {
             React.createElement(TextInputGroupMain, { value: externalQuery, onClick: onExternalToggle, onKeyDown: onInputKeyDown, placeholder: isExternalNonOrgAdmin
                     ? t('Username')
                     : getDropdownBtnPlaceholder(t('Search for a name'), selectedExternalContacts.map((i) => i.label), ' ', filteredOptions.length + dropdownHeader.length, t('All selected')), 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 }))))))));
+            React.createElement(TextInputGroupUtilities, null, !isEmpty(externalQuery) && (React.createElement(Button, { icon: isFetchingExternalContacts ? (React.createElement(LoadingIndicator, { show: true, size: "sm" })) : (React.createElement(TimesCircleIcon, { "aria-hidden": true })), variant: "plain", onClick: () => setExternalQuery(''), isDisabled: isFetchingExternalContacts, "aria-label": t('Clear') }))))));
     const customToggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: onExternalToggle, isExpanded: isExternalOpen, style: { width: '100%' } }, getDropdownBtnPlaceholder(t('Username'), selectedExternalContacts.map((i) => i.label), ' ', dropdownHeader.length, t('All selected'))));
     return (React.createElement("div", null,
         React.createElement("label", { htmlFor: "case-list-username-filter", className: "case-list-username-filter-label" },

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

@@ -1 +1 @@
-{"version":3,"file":"CreatorSsoNameFilterChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CreatorSsoNameFilterChip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAU/D,wBAAgB,wBAAwB,sBA2HvC"}
+{"version":3,"file":"CreatorSsoNameFilterChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CreatorSsoNameFilterChip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAU/D,wBAAgB,wBAAwB,sBAuIvC"}

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

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { contacts } from '@cee-eng/hydrajs';
-import { Chip, ChipGroup } from '@patternfly/react-core';
+import { Label, LabelGroup } from '@patternfly/react-core';
 import { useFetch } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import uniq from 'lodash/uniq';
@@ -103,14 +103,14 @@ export function CreatorSsoNameFilterChip() {
     return (React.createElement("div", { className: "filter-chip" },
         React.createElement("span", { className: "filter-chip__heading" },
             React.createElement(Trans, null, filterNamesMap['usernameFilterTitle'])),
-        React.createElement(ChipGroup, { numChips: 7, className: "pf-v5-c-chip-group" },
+        React.createElement(LabelGroup, { numLabels: 7, className: "pf-v6-c-chip-group" },
             own &&
                 filterInfo &&
                 filterInfo[SolrKeys.createdBySsoUsername] &&
-                filterInfo[SolrKeys.createdBySsoUsername].indexOf(own) !== -1 && (React.createElement(Chip, { key: 'sso-name-creator-filter-chip-key-own', onClick: deleteChipCreatorOwn }, t(filterNamesMap[SolrKeys.createdBySsoUsername]))),
+                filterInfo[SolrKeys.createdBySsoUsername].indexOf(own) !== -1 && (React.createElement(Label, { variant: "outline", key: 'sso-name-creator-filter-chip-key-own', onClose: deleteChipCreatorOwn }, t(filterNamesMap[SolrKeys.createdBySsoUsername]))),
             own &&
                 filterInfo &&
                 filterInfo[SolrKeys.caseContactSSO] &&
-                filterInfo[SolrKeys.caseContactSSO].indexOf(own) !== -1 && (React.createElement(Chip, { key: 'sso-name-contact-filter-chip-key-own', onClick: deleteChipContactOwn }, t(filterNamesMap[SolrKeys.caseContactSSO]))),
-            chips.map((item, i) => (React.createElement(Chip, { key: 'sso-name-creator-filter-chip-key' + i, onClick: deleteChip(item.value) }, item.label))))));
+                filterInfo[SolrKeys.caseContactSSO].indexOf(own) !== -1 && (React.createElement(Label, { variant: "outline", key: 'sso-name-contact-filter-chip-key-own', onClose: deleteChipContactOwn }, t(filterNamesMap[SolrKeys.caseContactSSO]))),
+            chips.map((item, i) => (React.createElement(Label, { variant: "outline", key: 'sso-name-creator-filter-chip-key' + i, onClose: deleteChip(item.value) }, item.label))))));
 }

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":"AAmBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAShF,wBAAgB,YAAY,sBA2P3B"}
+{"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,sBA8P3B"}

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

@@ -122,8 +122,7 @@ export function GroupsFilter() {
         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 })))) : (''))));
+                React.createElement(Button, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: onClick, "aria-label": "Clear input value" }))) : (''))));
     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
@@ -162,13 +161,13 @@ export function GroupsFilter() {
         // 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("label", { htmlFor: "case-list-group-filter", className: "pf-v6-u-mb-sm group-filter-label" }, t(filterNamesMap[SolrKeys.group])),
+        React.createElement("div", { className: "pf-v6-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, { className: "case-group-filter" }),
                     React.createElement(SelectList, null,
-                        React.createElement(Link, { className: "cta cta-link pf-v5-c-select__menu-item", to: "/manage/groups" },
+                        React.createElement(Link, { className: "cta cta-link pf-v6-c-select__menu-item", to: "/manage/groups" },
                             React.createElement(Trans, null, "Manage groups")))))))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"InternalSsoNameFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/InternalSsoNameFilter.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAUhF,MAAM,CAAC,OAAO,UAAU,qBAAqB,sBA+R5C"}
+{"version":3,"file":"InternalSsoNameFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/InternalSsoNameFilter.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAUhF,MAAM,CAAC,OAAO,UAAU,qBAAqB,sBAgS5C"}

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

@@ -149,29 +149,29 @@ export default function InternalSsoNameFilter() {
         return [
             ...(isFetchingInternalContacts
                 ? [
-                    React.createElement("div", { key: "searching", className: "pf-v5-u-p-sm" },
+                    React.createElement("div", { key: "searching", className: "pf-v6-u-p-sm" },
                         React.createElement(Trans, null, "Searching...")),
                 ]
                 : []),
             ...(noResults && !isFetchingInternalContacts
                 ? [
-                    React.createElement("div", { key: "no-results", className: "pf-v5-u-p-sm" },
+                    React.createElement("div", { key: "no-results", className: "pf-v6-u-p-sm" },
                         React.createElement(Trans, null, "No results found")),
                 ]
                 : []),
             ...dropdownHeader.map((contact, index) => (React.createElement(SelectOption, { key: contact.value, isFocused: focusedItemIndex === index, value: contact, hasCheckbox: true, isSelected: selectedInternalContacts.some((c) => c.value === contact.value) }, contact.label))),
             ...(!isEmpty(filteredOptions)
                 ? [
-                    React.createElement("div", { className: "pf-v5-c-divider", role: "separator" }),
+                    React.createElement("div", { className: "pf-v6-c-divider", role: "separator" }),
                     React.createElement(SelectGroup, null,
-                        React.createElement("h6", { className: "pf-v5-u-pl-md" },
+                        React.createElement("h6", { className: "pf-v6-u-pl-md" },
                             React.createElement(Trans, null, "Created or owned by")),
                         filteredOptions.map((contact, index) => (React.createElement(SelectOption, { key: contact.value, isFocused: focusedItemIndex === index + dropdownHeader.length, value: contact, hasCheckbox: true, isSelected: selectedInternalContacts.some((c) => c.value === contact.value) }, contact.label)))),
                 ]
                 : []),
             ...(renderedList.length < internalContactList.length
                 ? [
-                    React.createElement("div", { className: "pf-v5-c-divider", role: "separator" }),
+                    React.createElement("div", { className: "pf-v6-c-divider", role: "separator" }),
                     React.createElement(SelectOption, { key: "show-more", value: 'show-more', onClick: onDisplayMoreClick },
                         React.createElement(Flex, { justifyContent: { default: 'justifyContentCenter' } },
                             React.createElement(FlexItem, null,
@@ -201,7 +201,7 @@ export default function InternalSsoNameFilter() {
     const internalToggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "typeahead", onClick: onInternalToggle, innerRef: toggleRef, isExpanded: isInternalOpen, isFullWidth: true },
         React.createElement(TextInputGroup, { isPlain: true },
             React.createElement(TextInputGroupMain, { value: internalQuery, onClick: onInternalToggle, onKeyDown: onInputKeyDown, placeholder: getDropdownBtnPlaceholder(t('Search for a name'), selectedInternalContacts.map((i) => i.label), ' ', filteredInternalList.length, t('All selected')), onChange: onInternalQueryChange, isExpanded: isInternalOpen, innerRef: internalInputRef, "aria-controls": "internal-ssousername-filter", role: "combobox" }),
-            React.createElement(TextInputGroupUtilities, null, !isEmpty(internalQuery) && (React.createElement(Button, { variant: "plain", onClick: () => setInternalQuery(''), isDisabled: isFetchingInternalContacts, "aria-label": t('Clear') }, isFetchingInternalContacts ? (React.createElement(LoadingIndicator, { show: true, size: "sm" })) : (React.createElement(TimesCircleIcon, { "aria-hidden": true }))))))));
+            React.createElement(TextInputGroupUtilities, null, !isEmpty(internalQuery) && (React.createElement(Button, { icon: isFetchingInternalContacts ? (React.createElement(LoadingIndicator, { show: true, size: "sm" })) : (React.createElement(TimesCircleIcon, { "aria-hidden": true })), variant: "plain", onClick: () => setInternalQuery(''), isDisabled: isFetchingInternalContacts, "aria-label": t('Clear') }))))));
     return (React.createElement(Select, { id: "internal-ssousername-filter", "data-tracking-id": "internal-ssousername-filter", isOpen: isInternalOpen, onOpenChange: () => setIsInternalOpen(false), toggle: internalToggle, popperProps: { direction: 'down', enableFlip: false }, isScrollable: true, onSelect: (_e, v) => onSelectInternal(v) },
         React.createElement(SelectList, null, filteredInternalList)));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ProductFilterChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/ProductFilterChip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAgB,MAAM,0BAA0B,CAAC;AAGxE,UAAU,MAAM;IACZ,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,mBAAmB,EAAE,uBAAuB,EAAE,CAAC;CAClD;AAED,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,mBAAwB,EAAE,EAAE,MAAM,qBAgElF"}
+{"version":3,"file":"ProductFilterChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/ProductFilterChip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAgB,MAAM,0BAA0B,CAAC;AAGxE,UAAU,MAAM;IACZ,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,mBAAmB,EAAE,uBAAuB,EAAE,CAAC;CAClD;AAED,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,mBAAwB,EAAE,EAAE,MAAM,qBAuElF"}

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

@@ -1,4 +1,4 @@
-import { Button, ButtonVariant, Chip, ChipGroup } from '@patternfly/react-core';
+import { Button, ButtonVariant, Label, LabelGroup } from '@patternfly/react-core';
 import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
 import { ability, CaseListFields, resourceActions, resources } from '@rh-support/user-permissions';
 import React, { useContext } from 'react';
@@ -27,9 +27,8 @@ export function ProductFilterChip({ productList, productVersionPivot = [] }) {
     return (React.createElement("div", { className: "filter-chip" },
         React.createElement("span", { className: "filter-chip__heading" },
             React.createElement(Trans, null, filterNamesMap[SolrKeys.product])),
-        canAccessVersionsFilter ? (React.createElement(React.Fragment, null, productList.map((currentProduct, index) => (React.createElement(ChipGroup, { numChips: 10, key: `${currentProduct.value}-${index}`, categoryName: currentProduct.value },
+        canAccessVersionsFilter ? (React.createElement(React.Fragment, null, productList.map((currentProduct, index) => (React.createElement(LabelGroup, { numLabels: 10, key: `${currentProduct.value}-${index}`, categoryName: currentProduct.value },
             React.createElement(VersionsFilter, { productInfo: currentProduct, productVersionPivot: productVersionPivot }),
-            currentProduct[SolrKeys.version].map((chip) => (React.createElement(Chip, { key: chip.value, onClick: () => deleteVersion(currentProduct, chip) }, chip.value))),
-            React.createElement(Button, { className: "pf-v5-c-button__icon", variant: ButtonVariant.plain, "aria-label": "Remove product", onClick: () => deleteProduct(currentProduct) },
-                React.createElement(TimesCircleIcon, { "aria-hidden": "true" }))))))) : (React.createElement(ChipGroup, { numChips: 10, categoryName: "Product", key: "products" }, productList.map((currentProduct, index) => (React.createElement(Chip, { key: `${currentProduct.value}-${index}`, onClick: () => deleteProduct(currentProduct) }, currentProduct.value)))))));
+            currentProduct[SolrKeys.version].map((chip) => (React.createElement(Label, { variant: "outline", key: chip.value, onClose: () => deleteVersion(currentProduct, chip) }, chip.value))),
+            React.createElement(Button, { icon: React.createElement(TimesCircleIcon, { "aria-hidden": "true" }), className: "pf-v6-c-button__icon", variant: ButtonVariant.plain, "aria-label": "Remove product", onClick: () => deleteProduct(currentProduct) })))))) : (React.createElement(LabelGroup, { numLabels: 10, categoryName: "Product", key: "products" }, productList.map((currentProduct, index) => (React.createElement(Label, { variant: "outline", key: `${currentProduct.value}-${index}`, onClose: () => deleteProduct(currentProduct) }, currentProduct.value)))))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ProductsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/ProductsFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG1D,OAAO,KAA+B,MAAM,OAAO,CAAC;AAQpD,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,qBAgH3C"}
+{"version":3,"file":"ProductsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/ProductsFilter.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAI1D,OAAO,KAAkD,MAAM,OAAO,CAAC;AAQvE,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,qBA8P3C"}

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

@@ -1,20 +1,26 @@
-import { Checkbox } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { Button, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { SingleSelectDropdown, useSelectKeyboardNavigator } from '@rh-support/components';
 import { getDropdownBtnPlaceholder } from '@rh-support/utils';
+import isEmpty from 'lodash/isEmpty';
 import isUndefined from 'lodash/isUndefined';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SolrKeys, SolrPivotKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
 export function ProductsFilter(props) {
+    var _a, _b, _c, _d, _f;
     const { t } = useTranslation();
     const dispatch = useContext(CaseListFilterDispatchContext);
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const { allProducts, filterValues, isSolrSearchDown } = props;
     const [isOpen, setIsOpen] = useState(false);
-    const toggleIsOpen = (isExpanded) => setIsOpen(isExpanded);
+    const [selectedItems, setSelectedItems] = useState({});
+    const [activeItem, setActiveItem] = useState(null);
+    const [inputValue, setInputValue] = useState('');
+    const textInputRef = useRef();
     const selectedProducts = !isUndefined(filterInfo) && !isUndefined(filterInfo[SolrPivotKeys.product_version])
         ? filterInfo[SolrPivotKeys.product_version]
         : [];
@@ -23,49 +29,135 @@ export function ProductsFilter(props) {
         value: product.value,
         [SolrKeys.version]: [],
     }));
-    const onFilterChangeSingleSelect = (event, selectedProduct) => {
+    const singleSelectOptions = allProducts.length > 0
+        ? allProducts.map((product) => ({
+            value: product,
+            label: product,
+        }))
+        : [{ value: '', label: t('No products available') }];
+    const selectedProduct = ((_b = (_a = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrPivotKeys.product_version]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value) || '';
+    const selectedOption = {
+        value: selectedProduct,
+        label: selectedProduct,
+    };
+    // Single select mode for when Solr is down
+    const onFilterChangeSingleSelect = (selection) => {
         updateFilter(dispatch, {
             filterKey: SolrPivotKeys.product_version,
-            values: [{ field: SolrKeys.product, value: selectedProduct, [SolrKeys.version]: [] }],
+            values: [{ field: SolrKeys.product, value: selection.value, [SolrKeys.version]: [] }],
         });
         setIsOpen(false);
     };
-    const titleId = 'case-list-products-filter';
-    // solr is down and solr filter values are not available
-    // we get filter values from hydra metadata api
-    const singleSelectSolrIsDown = () => {
-        var _a, _b;
-        return (React.createElement(Select, { variant: SelectVariant.single, "aria-label": t('Select Input'), onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onFilterChangeSingleSelect, selections: (_b = (_a = filterInfo[SolrPivotKeys.product_version]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value, isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Select a product'), "data-tracking-id": "products-filter", id: "products-filter" }, allProducts.map((product) => (React.createElement(SelectOption, { key: product, value: product })))));
+    const onSingleSelectChange = (option) => {
+        // Don't update filter if no products are available
+        if (allProducts.length === 0 || option.value === '') {
+            return;
+        }
+        updateFilter(dispatch, {
+            filterKey: SolrPivotKeys.product_version,
+            values: [{ field: SolrKeys.product, value: option.value, [SolrKeys.version]: [] }],
+        });
     };
-    const onSelect = (e, selection) => {
+    // Multi-select mode
+    const onSelect = (option) => {
         let newSelectedProducts = [];
-        if (selectedProducts === null || selectedProducts === void 0 ? void 0 : selectedProducts.some((product) => selection.value === product.value)) {
-            newSelectedProducts = selectedProducts.filter((product) => selection.value !== product.value);
+        if (selectedProducts === null || selectedProducts === void 0 ? void 0 : selectedProducts.some((product) => option.value === product.value)) {
+            newSelectedProducts = selectedProducts.filter((product) => option.value !== product.value);
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: false })));
         }
         else {
             newSelectedProducts = [
                 ...selectedProducts,
-                { field: SolrKeys.product, value: selection.value, [SolrKeys.version]: [] },
+                { field: SolrKeys.product, value: option.value, [SolrKeys.version]: [] },
             ];
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
         }
-        updateFilter(dispatch, { filterKey: SolrPivotKeys.product_version, values: newSelectedProducts });
+        updateFilter(dispatch, {
+            filterKey: SolrPivotKeys.product_version,
+            values: newSelectedProducts,
+        });
     };
-    const getProductSelectOptions = (options) => {
-        return options.map((p, id) => (React.createElement(SelectOption, { key: id, value: p },
-            React.createElement("span", null,
-                React.createElement(Checkbox, { id: "product-option-check", checked: selectedProducts === null || selectedProducts === void 0 ? void 0 : selectedProducts.some((product) => p.value === product.value) })),
-            React.createElement("span", null, p.value))));
+    const onToggleClick = (e) => {
+        e.stopPropagation();
+        setIsOpen(!isOpen);
     };
-    const onFilter = (_, value) => {
-        if (!value)
-            return getProductSelectOptions(productOptions);
-        const formattedValue = value === null || value === void 0 ? void 0 : value.replace(/\\/g, ''); // Removes '\' from search query as it creates SyntaxError for RegEx
+    const onClick = () => {
+        var _a;
+        setInputValue('');
+        (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const getFilteredOptions = () => {
+        if (!inputValue)
+            return productOptions;
+        const formattedValue = inputValue === null || inputValue === void 0 ? void 0 : inputValue.replace(/\\/g, ''); // Removes '\' from search query as it creates SyntaxError for RegEx
         const input = new RegExp(formattedValue, 'i');
-        const newOptions = productOptions.filter((product) => input.test(product.value));
-        return getProductSelectOptions(newOptions);
+        return productOptions.filter((product) => input.test(product.value));
+    };
+    // Integrate the keyboard navigator hook
+    const { focusedItemIndex, onInputKeyDown, setFocusedItemIndex } = useSelectKeyboardNavigator({
+        list: getFilteredOptions(),
+        isOpen,
+        resetIndexOnClose: true,
+        isDisabled: false,
+        setIsOpen,
+        onSelect: (item) => {
+            if (isSolrSearchDown) {
+                onFilterChangeSingleSelect(item);
+            }
+            else {
+                onSelect(item);
+            }
+        },
+    });
+    const onTextInputChange = (_event, value) => {
+        setInputValue(value);
+    };
+    const placeholder = isSolrSearchDown
+        ? ((_d = (_c = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrPivotKeys.product_version]) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.value) || t('Select a product')
+        : getDropdownBtnPlaceholder(t('Select a product'), ((_f = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrPivotKeys.product_version]) === null || _f === void 0 ? void 0 : _f.map((i) => i.value)) || [], '', props.filterValues.length, t('All selected'));
+    const toggleForMultiSelect = (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-product-filter-input", autoComplete: "off", innerRef: textInputRef, placeholder: placeholder }, (activeItem && { 'aria-activedescendant': activeItem }), { role: "combobox", isExpanded: isOpen, "aria-controls": "select-multi-typeahead-product-listbox" })),
+            Object.keys(selectedItems).filter((key) => selectedItems[key] === true).length > 0 && (React.createElement(TextInputGroupUtilities, null,
+                React.createElement(Button, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: onClick, "aria-label": "Clear input value" }))))));
+    useEffect(() => {
+        let newSelectOptions = productOptions;
+        if (inputValue) {
+            newSelectOptions = getFilteredOptions();
+            if (!newSelectOptions.length) {
+                // @ts-ignore
+                newSelectOptions = [{ isDisabled: false, children: `No results found` }];
+            }
+            if (!isOpen) {
+                setIsOpen(true);
+            }
+        }
+        setFocusedItemIndex(-1);
+        setActiveItem(null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputValue]);
+    useEffect(() => {
+        var _a;
+        if (isSolrSearchDown) {
+            return;
+        }
+        if (isEmpty(filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrPivotKeys.product_version])) {
+            setSelectedItems({});
+        }
+        else {
+            const selectedProductItems = (_a = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrPivotKeys.product_version]) === null || _a === void 0 ? void 0 : _a.reduce((selection, product) => {
+                selection[product.value] = true;
+                return selection;
+            }, {});
+            setSelectedItems(selectedProductItems || {});
+        }
+    }, [filterInfo, isSolrSearchDown]);
+    const renderOptions = () => {
+        const filteredOptions = getFilteredOptions();
+        return filteredOptions.map((option, index) => (React.createElement(SelectOption, { key: `product-option-${index}`, value: option, hasCheckbox: !isSolrSearchDown, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-product-${String(option.value).replace(/\s/g, '-')}` }, option.value)));
     };
-    const multiSelectNew = () => (React.createElement(Select, { "aria-label": t('Select Input'), id: titleId, variant: SelectVariant.typeaheadMulti, onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onSelect, isOpen: isOpen, placeholderText: getDropdownBtnPlaceholder(t('Select a product'), filterInfo[SolrPivotKeys.product_version].map((i) => i.value), '', props.filterValues.length, t('All selected')), onFilter: onFilter }, getProductSelectOptions(productOptions)));
-    return (React.createElement("div", { className: "pf-v5-c-select" },
-        React.createElement("label", { htmlFor: titleId }, t(filterNamesMap[SolrKeys.product])),
-        isSolrSearchDown ? singleSelectSolrIsDown() : multiSelectNew()));
+    return (React.createElement("div", { className: "product-filter" },
+        React.createElement("label", { htmlFor: "case-list-products-filter", className: "pf-v6-u-mb-sm products-filter-label" }, t(filterNamesMap[SolrKeys.product])),
+        isSolrSearchDown ? (React.createElement(SingleSelectDropdown, { id: "case-list-products-filter", selected: selectedOption, options: singleSelectOptions, placeholder: allProducts.length > 0 ? t('Select a product') : t('No products available'), onSelect: (options) => onSingleSelectChange(options[0]), dataTrackingId: "products-filter", isScrollable: true, isDisabled: allProducts.length === 0 })) : (React.createElement(Select, { id: "case-list-products-filter", "data-tracking-id": "products-filter", isOpen: isOpen, selected: selectedItems, onSelect: (_e, v) => onSelect(v), onOpenChange: (nextOpen) => setIsOpen(nextOpen), toggle: toggleForMultiSelect, isScrollable: true, popperProps: { direction: 'down', enableFlip: false } },
+            React.createElement(SelectList, null, renderOptions())))));
 }