@rh-support/cases 2.1.33 → 2.4.10-beta.6

package/README.md

@@ -16,5 +16,3 @@ export default function CasesApp(routeProps: RouteComponentProps<ICasesRouteURLP
     return (<Cases routeProps={routeProps} basePath="/cases" />);
 }
 ```
-
-.

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;AAO3B,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,oBAAY,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,eA6frC"}
+{"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;AAO3B,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,oBAAY,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,eA2frC"}

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

@@ -58,7 +58,6 @@ export function CaseList(props) {
     const searchType = searchParams[FILTER_URL_QUERY_TYPE];
     const abortControllerRef = useRef(undefined);
     const isXLScreen = breakPoint.xl;
-    const isXXLScreen = breakPoint.xxl;
     const isFirstMount = useRef(true);
     const filterSectionRef = useRef(null);
     const filterState = useContext(CaseListFilterStateContext);
@@ -346,7 +345,7 @@ 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("h3", { 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,
@@ -356,5 +355,5 @@ export function CaseList(props) {
                         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, isXXLScreen: isXXLScreen })))));
+                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":"AAmBA,eAAO,MAAM,YAAY,eAAgB,MAAM,gBAS9C,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,eAmJ1D"}
+{"version":3,"file":"AccountsBookmarkedGroupFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/AccountsBookmarkedGroupFilter.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,YAAY,eAAgB,MAAM,gBAS9C,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,eAgJ1D"}

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, Select, SelectOption, SelectVariant, Tooltip } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { getDropdownBtnPlaceholder } from '@rh-support/utils';
@@ -17,8 +16,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-c-divider", role: "separator" }),
+        React.createElement(Link, { className: "cta cta-link pf-c-select__menu-item", to: "/manage/bookmarks" },
             React.createElement(Trans, null, "Manage bookmarks"))));
 };
 export const getLabel = (accountNo, accountName) => accountNo ? (accountName ? `${accountName} <${accountNo}>` : accountNo) : '';
@@ -46,7 +45,7 @@ export function AccountsBookmarkedGroupFilter(props) {
     const selectedAccounts = filterInfo[SolrKeys.accountNumber].filter((item) => !Array.isArray(item.key));
     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-u-pl-0" }, list.map((b) => {
             return (React.createElement("li", { key: b.accountNumber },
                 b.name,
                 " (",
@@ -56,12 +55,12 @@ 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) }),
+            ...options.map((b, id) => (React.createElement(SelectOption, { key: id, value: b, className: "pf-c-select__menu-wrapper", role: "presentation" },
+                React.createElement("div", { className: "pf-c-select__menu-item-main" },
+                    React.createElement("input", { className: "pf-c-check__input pf-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)))))),
+                    React.createElement(Label, { color: "cyan", className: "pf-u-ml-auto pf-u-mr-sm", icon: React.createElement(InfoCircleIcon, null), "aria-label": t('Bookmarked Accounts') }, b.key.length)))))),
             ...(canManageBookmarkAccounts ? [appendToMenu((bookmarkedGroupAccounts.data || []).length)] : []),
         ];
     };
@@ -97,10 +96,7 @@ export function AccountsBookmarkedGroupFilter(props) {
     if (!canReadBookmarkAccounts && !canAccessManagedAccounts) {
         return null;
     }
-    //no managed accounts --> user is a customer and should not be able to see account filter
-    if (isEmpty(managedAccountsList))
-        return null;
-    return (React.createElement("div", { className: "pf-v5-c-select" },
+    return (React.createElement("div", { className: "pf-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 ? 'Search for 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(Select, { variant: SelectVariant.typeaheadMulti, onToggle: onBookmarksToggle, onSelect: onBookmarksSelect, onClear: onBookmarksClear, isOpen: isOpen, onFilter: onBookmarksFilter, placeholderText: getDropdownBtnPlaceholder(t(canAccessManagedAccounts ? 'Search for 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))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AccountsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/AccountsFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAe1F,UAAU,MAAM;IACZ,uBAAuB,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,gCAAgC,YAAa,QAAQ,WAMjE,CAAC;AACF,eAAO,MAAM,+BAA+B,YAAa,QAAQ,sBAAsB,CAAC,WAEvF,CAAC;AAEF,eAAO,MAAM,QAAQ,0CACyD,CAAC;AAE/E,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,eA+F3C"}
+{"version":3,"file":"AccountsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/AccountsFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAe1F,UAAU,MAAM;IACZ,uBAAuB,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,gCAAgC,YAAa,QAAQ,WAMjE,CAAC;AACF,eAAO,MAAM,+BAA+B,YAAa,QAAQ,sBAAsB,CAAC,WAEvF,CAAC;AAEF,eAAO,MAAM,QAAQ,0CACyD,CAAC;AAE/E,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,eAqF3C"}

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

@@ -14,8 +14,8 @@ import differenceBy from 'lodash/differenceBy';
 import filter from 'lodash/filter';
 import remove from 'lodash/remove';
 import uniqBy from 'lodash/uniqBy';
-import React, { useContext, useEffect, useMemo } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import React, { useContext, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { SolrKeys } from '../../../enums/filters';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
@@ -35,14 +35,12 @@ export function AccountsFilter(props) {
     const { canReadBookmarkAccounts } = props;
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const dispatch = useContext(CaseListFilterDispatchContext);
-    const selectedAccounts = useMemo(() => filterInfo[SolrKeys.accountNumber]
+    const selectedAccounts = filterInfo[SolrKeys.accountNumber]
         .filter((item) => !Array.isArray(item.key))
         .map((item) => ({
         name: item.value,
         accountNumber: item.key,
-    })), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [filterInfo, filterInfo[SolrKeys.accountNumber]]);
+    }));
     const onAccountsFilterChange = (selected) => {
         const toAdd = differenceBy(selected, selectedAccounts, 'accountNumber');
         const toRemove = differenceBy(selectedAccounts, selected, 'accountNumber');
@@ -97,8 +95,5 @@ export function AccountsFilter(props) {
     if (!canReadBookmarkAccounts) {
         return null;
     }
-    return (React.createElement("div", null,
-        React.createElement("label", { htmlFor: "case-list-accounts-filter" },
-            React.createElement(Trans, null, "Accounts")),
-        React.createElement(AccountSelectorInternal, { label: t('i18nAccounts', 'Accounts'), selectedAccounts: selectedAccounts, multiple: true, suggestBookmarkAccounts: false, placeholder: getDropdownBtnPlaceholder(t('Search for an account'), (selectedAccounts || []).map((i) => i.name), ''), onSelect: onAccountsFilterChange })));
+    return (React.createElement(AccountSelectorInternal, { label: t('i18nAccounts', 'Accounts'), selectedAccounts: selectedAccounts, multiple: true, suggestBookmarkAccounts: false, placeholder: getDropdownBtnPlaceholder(t('Search for an account'), (selectedAccounts || []).map((i) => i.name), ''), onSelect: onAccountsFilterChange }));
 }

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

@@ -25,5 +25,5 @@ export function AdditionalFilters() {
         React.createElement("div", { className: "additional-filters" },
             React.createElement("h3", null,
                 React.createElement(Trans, null, "More")),
-            React.createElement(Checkbox, { label: t(AdditionalFilterLabels[SolrKeys.escalation]), isChecked: escalated, onChange: (_event, checked) => onEscalatedChange(checked), "aria-label": t(AdditionalFilterLabels[SolrKeys.escalation]), id: "escalated", name: "escalated", "data-tracking-id": "escalated-filter-selector" }))));
+            React.createElement(Checkbox, { label: t(AdditionalFilterLabels[SolrKeys.escalation]), isChecked: escalated, onChange: onEscalatedChange, "aria-label": t(AdditionalFilterLabels[SolrKeys.escalation]), id: "escalated", name: "escalated", "data-tracking-id": "escalated-filter-selector" }))));
 }

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

@@ -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(ChipGroup, { numChips: 7, className: "pf-c-chip-group__simple" }, renderFilterValueChips(filterKey, caseTypeFilter, groupName))));
         }
     };
     const renderAccountFilterChip = () => {

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

@@ -1,12 +1,2 @@
-export declare const getFullName: (contact: any) => string;
-export declare const getFilterValues: (contactList: any, own: any) => {
-    firstName: string;
-    lastName: string;
-    firstNameCustom: string;
-    lastNameCustom: string;
-    value: string;
-    label: string;
-}[];
-export declare const getSelectedListObj: (contactsList: any, filterInfo: any, own: any, t: any) => any[];
 export declare function CreatorSsoNameFilter(): JSX.Element;
 //# sourceMappingURL=CreatorSsoNameFilter.d.ts.map

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":"AAiCA,eAAO,MAAM,WAAW,0BAIvB,CAAC;AAYF,eAAO,MAAM,eAAe;;;;;;;GAA6E,CAAC;AAE1G,eAAO,MAAM,kBAAkB,iEAyC9B,CAAC;AAEF,wBAAgB,oBAAoB,gBA0OnC"}
+{"version":3,"file":"CreatorSsoNameFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/CreatorSsoNameFilter.tsx"],"names":[],"mappings":"AAmDA,wBAAgB,oBAAoB,gBAwSnC"}

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

@@ -7,25 +7,21 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { accounts } from '@cee-eng/hydrajs';
-import { Button, MenuToggle, Select, SelectGroup, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
-import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
-import { LoadingIndicator, useFetch, useSelectKeyboardNavigator } from '@rh-support/components';
+import { accounts, contacts } from '@cee-eng/hydrajs';
+import { AsyncMultiDropDownList, MultiSelectDropDownList, useFetch } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import { getDropdownBtnPlaceholder } from '@rh-support/utils';
-import { isEmpty, isNull } from 'lodash';
-import isUndefined from 'lodash/isUndefined';
+import { getDropdownBtnPlaceholder, toOptions } from '@rh-support/utils';
+import isEmpty from 'lodash/isEmpty';
 import uniqBy from 'lodash/uniqBy';
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { SolrKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
-import { useCaseListDispatchContext } from '../CaseListContext';
+import { useCaseListDispatchContext, useCaseListStateContext } from '../CaseListContext';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilters } from '../CaseListFilterReducer';
 import { setChipsNameSsoMap } from '../CaseListReducer';
-import InternalSsoNameFilter from './InternalSsoNameFilter';
-export const getFullName = (contact) => {
+const getFullName = (contact) => {
     return contact.fullNameCustom
         ? `${contact.firstNameCustom} ${contact.lastNameCustom}`
         : `${contact.firstName} ${contact.lastName}`;
@@ -38,104 +34,25 @@ const mapToObj = (arr) => arr.map((item) => ({
     value: item.ssoUsername,
     label: `${getFullName(item)} <${item.ssoUsername}>`,
 }));
-export const getFilterValues = (contactList, own) => mapToObj(contactList).filter((o) => o.value !== own);
-export const getSelectedListObj = (contactsList, filterInfo, own, t) => {
-    const created = [...filterInfo[SolrKeys.createdBySsoUsername]].reduce((result, sso) => {
-        if (sso === own) {
-            result.push({ value: 'createdByMe', label: t('Cases created by me') });
-        }
-        else {
-            const contact = contactsList.find((item) => (item === null || item === void 0 ? void 0 : item.ssoUsername) === sso);
-            contact &&
-                result.push({
-                    value: contact.ssoUsername,
-                    label: `${getFullName(contact)} <${contact.ssoUsername}>`,
-                });
-            !contact &&
-                result.push({
-                    value: sso,
-                    label: '',
-                });
-        }
-        return result;
-    }, []);
-    const owned = [...filterInfo[SolrKeys.caseContactSSO]].reduce((result, sso) => {
-        if (sso === own) {
-            result.push({ value: 'ownedByMe', label: t('Cases owned by me') });
-        }
-        else {
-            const contact = contactsList.find((item) => item.ssoUsername === sso);
-            contact &&
-                result.push({
-                    value: contact.ssoUsername,
-                    label: `${getFullName(contact)} <${contact.ssoUsername}>`,
-                });
-            !contact &&
-                result.push({
-                    value: sso,
-                    label: '',
-                });
-        }
-        return result;
-    }, []);
-    const selected = uniqBy([...created, ...owned], 'value');
-    return selected;
-};
+const getFilterValues = (contactList, own) => mapToObj(contactList).filter((o) => o.value !== own);
 export function CreatorSsoNameFilter() {
     const { t } = useTranslation();
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const dispatch = useContext(CaseListFilterDispatchContext);
     const { globalMetadataState: { loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
+    const { chipsNameSsoMap } = useCaseListStateContext();
     const CaseListDispatch = useCaseListDispatchContext();
     const own = loggedInUserRights.data.getSSOUsername();
+    const PER_PAGE = 200;
     const isExternalNonOrgAdmin = !loggedInUserRights.data.isInternal() && loggedInUserRights.data.isCustomerNonOrgAdmin();
+    const ASYNC_DROPDOWN_PAGE_SIZE = 10000;
     const { request: getExternalUserContactsList, isFetching: isFetchingExternalContacts } = useFetch(accounts.getAccountContacts, { propgateErrors: true });
-    const externalInputRef = useRef();
+    const { request: getInternalUserContactsList, isFetching: isFetchingInternalContacts } = useFetch(contacts.getSFDCContacts, { propgateErrors: true });
+    const abortControllerRef = useRef(undefined);
     const [externalContactList, setExternalContactList] = useState([]);
-    const [isExternalOpen, setIsExternalOpen] = useState(false);
-    const [noResults, setNoResults] = useState(false);
-    const [externalQuery, setExternalQuery] = useState('');
-    const onSelectExternal = (contact) => {
-        if (isNull(contact) || isUndefined(contact))
-            return;
-        let list = [];
-        if (selectedExternalContacts.some((item) => item.value === contact.value)) {
-            list = selectedExternalContacts.filter((item) => item.value !== contact.value);
-        }
-        else {
-            list = [...selectedExternalContacts, contact];
-        }
-        onFilterChange(list);
-        setExternalQuery('');
-    };
-    const dropdownHeader = [
-        {
-            label: `${t('Cases created by me')}`,
-            value: 'createdByMe',
-        },
-        {
-            label: `${t('Cases owned by me')}`,
-            value: 'ownedByMe',
-        },
-    ];
-    const filteredOptions = useMemo(() => {
-        const filteredValues = getFilterValues(externalContactList, own);
-        const input = new RegExp(externalQuery, 'i');
-        const newOptions = filteredValues.filter((v) => input.test(v.label || ''));
-        setNoResults(isEmpty(newOptions));
-        return newOptions;
-    }, [externalContactList, own, externalQuery]);
-    const { onInputKeyDown, focusedItemIndex } = useSelectKeyboardNavigator({
-        list: [...dropdownHeader, ...filteredOptions],
-        isOpen: isExternalOpen,
-        setIsOpen: setIsExternalOpen,
-        onSelect: onSelectExternal,
-    });
-    const selectedExternalContacts = useMemo(() => getSelectedListObj(externalContactList, filterInfo, own, t), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [externalContactList, filterInfo, own]);
+    const [internalContactList, setInternalContactList] = useState([]);
     const onFilterChange = (items) => {
-        const selectedItems = items.map((item) => item.value);
+        const selectedItems = items.map((item) => item.value.value);
         const caseCreated = selectedItems
             .filter((o) => o !== 'ownedByMe')
             .map((o) => (o === 'createdByMe' ? own : o));
@@ -158,6 +75,134 @@ export function CreatorSsoNameFilter() {
             },
         ]);
     };
+    const onFilterChangeAsync = (items) => {
+        const selectedItems = items.map((item) => item.value.value);
+        const caseCreated = selectedItems
+            .filter((o) => o !== 'ownedByMe')
+            .map((o) => (o === 'createdByMe' ? own : o));
+        const caseOwnedBy = selectedItems
+            .filter((o) => o !== 'createdByMe')
+            .map((o) => (o === 'ownedByMe' ? own : o));
+        const caseOwner = loggedInUserRights.data.isInternal() && caseOwnedBy.indexOf(own) !== -1 ? [own] : [];
+        updateFilters(dispatch, [
+            {
+                filterKey: SolrKeys.createdBySsoUsername,
+                values: caseCreated,
+            },
+            {
+                filterKey: SolrKeys.caseContactSSO,
+                values: caseOwnedBy,
+            },
+            {
+                filterKey: SolrKeys.caseOwner,
+                values: caseOwner,
+            },
+        ]);
+        // set name/sso pairs on state to be used in filter chip component
+        if (loggedInUserRights.data.isInternal()) {
+            const chipsNameSsoPairs = {};
+            items.forEach((item) => {
+                var _a, _b, _c, _d;
+                const sso = item.value.value;
+                if (sso !== 'ownedByMe' && sso !== 'createdByMe' && !chipsNameSsoMap[sso]) {
+                    chipsNameSsoPairs[sso] = {
+                        firstName: ((_a = item.value) === null || _a === void 0 ? void 0 : _a.firstName) || '',
+                        lastName: ((_b = item.value) === null || _b === void 0 ? void 0 : _b.lastName) || '',
+                        firstNameCustom: ((_c = item.value) === null || _c === void 0 ? void 0 : _c.firstNameCustom) || '',
+                        lastNameCustom: ((_d = item.value) === null || _d === void 0 ? void 0 : _d.lastNameCustom) || '',
+                    };
+                }
+            });
+            setChipsNameSsoMap(CaseListDispatch, chipsNameSsoPairs);
+        }
+    };
+    const dropdownHeader = [
+        {
+            isNotSearchable: true,
+            label: `${t('Cases created by me')}`,
+            value: 'createdByMe',
+        },
+        {
+            isNotSearchable: true,
+            label: `${t('Cases owned by me')}`,
+            value: 'ownedByMe',
+        },
+        {
+            children: isExternalNonOrgAdmin || (externalContactList.length === 0 && internalContactList.length === 0) ? (React.createElement(React.Fragment, null)) : (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "pf-c-divider", role: "separator" }),
+                React.createElement("h3", { className: "subheading subheading-sm pf-u-pl-md" },
+                    React.createElement(Trans, null, "Created or owned by")))),
+            isNotSearchable: true,
+            isNonActionable: true,
+            isNotSelectable: true,
+        },
+    ];
+    const getSelectedListObj = (contactsList) => {
+        const created = [...filterInfo[SolrKeys.createdBySsoUsername]].reduce((result, sso) => {
+            if (sso === own) {
+                result.push({ value: 'createdByMe', label: t('Cases created by me') });
+            }
+            else {
+                const contact = contactsList.find((item) => (item === null || item === void 0 ? void 0 : item.ssoUsername) === sso);
+                contact &&
+                    result.push({
+                        value: contact.ssoUsername,
+                        label: `${getFullName(contact)} <${contact.ssoUsername}>`,
+                    });
+                !contact &&
+                    result.push({
+                        value: sso,
+                        label: '',
+                    });
+            }
+            return result;
+        }, []);
+        const owned = [...filterInfo[SolrKeys.caseContactSSO]].reduce((result, sso) => {
+            if (sso === own) {
+                result.push({ value: 'ownedByMe', label: t('Cases owned by me') });
+            }
+            else {
+                const contact = contactsList.find((item) => item.ssoUsername === sso);
+                contact &&
+                    result.push({
+                        value: contact.ssoUsername,
+                        label: `${getFullName(contact)} <${contact.ssoUsername}>`,
+                    });
+                !contact &&
+                    result.push({
+                        value: sso,
+                        label: '',
+                    });
+            }
+            return result;
+        }, []);
+        const selected = uniqBy([...created, ...owned], 'value');
+        return toOptions(selected, {
+            labelKey: 'label',
+        });
+    };
+    const onSearchAsync = (query) => __awaiter(this, void 0, void 0, function* () {
+        if (query == null) {
+            return;
+        }
+        if (abortControllerRef.current !== undefined) {
+            // Cancel the previous request
+            abortControllerRef.current.abort();
+        }
+        // recreate a new AbortController for each call
+        let controller = new AbortController();
+        abortControllerRef.current = controller;
+        const queryParams = {
+            internal: false,
+            limit: ASYNC_DROPDOWN_PAGE_SIZE,
+            nameLookup: query,
+        };
+        const response = yield getInternalUserContactsList(queryParams, controller.signal);
+        const contacts = response && response.items && response.items.length !== 0
+            ? response.items.filter((c) => !isEmpty(c.ssoUsername))
+            : [];
+        setInternalContactList(contacts);
+    });
     // fetch data on load for external users
     useEffect(() => {
         if (loggedInUserRights.data.isInternal())
@@ -176,40 +221,25 @@ export function CreatorSsoNameFilter() {
         fetchStrataAccountUsers();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dispatch, isExternalNonOrgAdmin, loggedInUserRights.data]);
-    const filteredExternalList = useMemo(() => {
-        return [
-            ...(noResults
-                ? [
-                    React.createElement("div", { key: "no-results", className: "pf-v5-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(SelectGroup, { key: "created-or-owned-by-accounts-group" },
-                        React.createElement("h6", { className: "pf-v5-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) }, contact.label)))),
-                ]
-                : []),
-        ];
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filteredOptions, selectedExternalContacts, focusedItemIndex, noResults]);
-    const onExternalQueryChange = (_v, query) => {
-        setExternalQuery(query);
-    };
-    const onExternalToggle = () => {
-        setIsExternalOpen((pre) => !pre);
-    };
-    const externalToggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "typeahead", onClick: onExternalToggle, innerRef: toggleRef, isExpanded: isExternalOpen, isFullWidth: true },
-        React.createElement(TextInputGroup, { isPlain: true },
-            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 }),
-            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(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))));
+    const asyncMultiDropDownList = [
+        ...dropdownHeader,
+        ...getFilterValues(internalContactList, own),
+    ];
+    const multiDropDownList = [
+        ...dropdownHeader,
+        ...getFilterValues(externalContactList, own),
+    ];
+    return (React.createElement(React.Fragment, null, !loggedInUserRights.data.isInternal() ? (React.createElement(MultiSelectDropDownList, { placeholder: getDropdownBtnPlaceholder(t('Search for a name'), getSelectedListObj(externalContactList).map((i) => i.label), ' ', multiDropDownList.length, t('All contacts')), id: "external-ssousername-filter", "data-tracking-id": "external-ssousername-filter", selectedItems: getSelectedListObj(externalContactList), list: toOptions(multiDropDownList, {
+            labelKey: 'label',
+            childrenKey: 'children',
+            nonSearchableItemKey: 'isNotSearchable',
+            nonActionableItemKey: 'isNonActionable',
+            nonSelectableItemKey: 'isNotSelectable',
+        }), title: t(filterNamesMap['usernameFilterTitle']), onChange: onFilterChange, emptyListLabel: isExternalNonOrgAdmin ? '' : t('No results found'), searchable: true, label: t(filterNamesMap['usernameFilterTitle']), isLoadingList: isFetchingExternalContacts })) : (React.createElement(AsyncMultiDropDownList, { placeholder: getDropdownBtnPlaceholder(t('Search for a name'), getSelectedListObj(internalContactList).map((i) => i.label), ' ', asyncMultiDropDownList.length, t('All contacts')), id: "internal-ssousername-async-filter", "data-tracking-id": "internal-ssousername-async-filter", selectedItems: getSelectedListObj(internalContactList), list: toOptions(asyncMultiDropDownList, {
+            labelKey: 'label',
+            childrenKey: 'children',
+            nonSearchableItemKey: 'isNotSearchable',
+            nonActionableItemKey: 'isNonActionable',
+            nonSelectableItemKey: 'isNotSelectable',
+        }), title: t(filterNamesMap['usernameFilterTitle']), onChange: onFilterChangeAsync, delay: 300, useCache: true, paginate: true, emptyListLabel: t('No results found'), maxResults: PER_PAGE, onSearch: onSearchAsync, minLength: 0, label: t(filterNamesMap['usernameFilterTitle']), isLoadingList: isFetchingInternalContacts }))));
 }

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

@@ -103,7 +103,7 @@ 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(ChipGroup, { numChips: 7, className: "pf-c-chip-group" },
             own &&
                 filterInfo &&
                 filterInfo[SolrKeys.createdBySsoUsername] &&

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

@@ -26,8 +26,8 @@ export function GroupsFilter() {
         ...(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("div", { className: "pf-c-divider", role: "separator" }),
+                React.createElement(Link, { className: "cta cta-link pf-c-select__menu-item", to: "/manage/groups" },
                     React.createElement(Trans, null, "Manage groups")))) : (React.createElement(React.Fragment, null)),
             isNotSearchable: true,
             isNonActionable: true,

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

@@ -30,6 +30,6 @@ export function ProductFilterChip({ productList, productVersionPivot = [] }) {
         canAccessVersionsFilter ? (React.createElement(React.Fragment, null, productList.map((currentProduct, index) => (React.createElement(ChipGroup, { numChips: 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(Button, { className: "pf-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)))))));
 }

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;AAW1D,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,eAgH3C"}
+{"version":3,"file":"ProductsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/ProductsFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAW1D,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,eA8G3C"}

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

@@ -1,5 +1,4 @@
-import { Checkbox } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { Checkbox, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 import { getDropdownBtnPlaceholder } from '@rh-support/utils';
 import isUndefined from 'lodash/isUndefined';
 import React, { useContext, useState } from 'react';
@@ -35,7 +34,7 @@ export function ProductsFilter(props) {
     // 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 })))));
+        return (React.createElement(Select, { variant: SelectVariant.single, "aria-label": t('Select Input'), onToggle: toggleIsOpen, 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 onSelect = (e, selection) => {
         let newSelectedProducts = [];
@@ -59,13 +58,12 @@ export function ProductsFilter(props) {
     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 input = new RegExp(formattedValue, 'i');
+        const input = new RegExp(value, 'i');
         const newOptions = productOptions.filter((product) => input.test(product.value));
         return getProductSelectOptions(newOptions);
     };
-    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" },
+    const multiSelectNew = () => (React.createElement(Select, { "aria-label": t('Select Input'), id: titleId, variant: SelectVariant.typeaheadMulti, onToggle: toggleIsOpen, 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-c-select" },
         React.createElement("label", { htmlFor: titleId }, t(filterNamesMap[SolrKeys.product])),
         isSolrSearchDown ? singleSelectSolrIsDown() : multiSelectNew()));
 }