@rh-support/cases 2.1.24 → 2.1.27

package/README.md

@@ -16,3 +16,5 @@ 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,eA2frC"}
+{"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"}

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

@@ -58,6 +58,7 @@ 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);
@@ -355,5 +356,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 })))));
+                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 })))));
 }

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":"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"}
+{"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,eAgJ1D"}

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

@@ -1,4 +1,5 @@
-import { Label, Select, SelectOption, SelectVariant, Tooltip } from '@patternfly/react-core';
+import { Label, Tooltip } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 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';
@@ -16,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-c-divider", role: "separator" }),
-        React.createElement(Link, { className: "cta cta-link pf-c-select__menu-item", to: "/manage/bookmarks" },
+        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" },
             React.createElement(Trans, null, "Manage bookmarks"))));
 };
 export const getLabel = (accountNo, accountName) => accountNo ? (accountName ? `${accountName} <${accountNo}>` : accountNo) : '';
@@ -45,7 +46,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-u-pl-0" }, list.map((b) => {
+        return (React.createElement("ul", { className: "no-list-style pf-v5-u-pl-0" }, list.map((b) => {
             return (React.createElement("li", { key: b.accountNumber },
                 b.name,
                 " (",
@@ -55,12 +56,12 @@ export function AccountsBookmarkedGroupFilter(props) {
     };
     const getBookmarksOptions = (options) => {
         return [
-            ...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) }),
+            ...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-u-ml-auto pf-u-mr-sm", icon: React.createElement(InfoCircleIcon, null), "aria-label": t('Bookmarked Accounts') }, b.key.length)))))),
+                    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)] : []),
         ];
     };
@@ -96,7 +97,7 @@ export function AccountsBookmarkedGroupFilter(props) {
     if (!canReadBookmarkAccounts && !canAccessManagedAccounts) {
         return null;
     }
-    return (React.createElement("div", { className: "pf-c-select" },
+    return (React.createElement("div", { className: "pf-v5-c-select" },
         React.createElement("label", { htmlFor: "case-list-group-filter" }, canAccessManagedAccounts ? t('Accounts') : t(filterNamesMap[SolrKeys.accountNumber])),
-        React.createElement(Select, { variant: SelectVariant.typeaheadMulti, onToggle: 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))));
+        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))));
 }

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,eAqF3C"}
+{"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,eA0F3C"}

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

@@ -15,7 +15,7 @@ import filter from 'lodash/filter';
 import remove from 'lodash/remove';
 import uniqBy from 'lodash/uniqBy';
 import React, { useContext, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { SolrKeys } from '../../../enums/filters';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
@@ -95,5 +95,8 @@ export function AccountsFilter(props) {
     if (!canReadBookmarkAccounts) {
         return null;
     }
-    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 }));
+    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 })));
 }

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: onEscalatedChange, "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: (_event, checked) => onEscalatedChange(checked), "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-c-chip-group__simple" }, renderFilterValueChips(filterKey, caseTypeFilter, groupName))));
+                React.createElement(ChipGroup, { numChips: 7, className: "pf-v5-c-chip-group__simple" }, renderFilterValueChips(filterKey, caseTypeFilter, groupName))));
         }
     };
     const renderAccountFilterChip = () => {

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

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

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

@@ -7,21 +7,24 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { accounts, contacts } from '@cee-eng/hydrajs';
-import { AsyncMultiDropDownList, MultiSelectDropDownList, useFetch } from '@rh-support/components';
+import { accounts } from '@cee-eng/hydrajs';
+import { Button, MenuToggle, Select, SelectGroup, 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 { GlobalMetadataStateContext } from '@rh-support/react-context';
-import { getDropdownBtnPlaceholder, toOptions } from '@rh-support/utils';
-import isEmpty from 'lodash/isEmpty';
+import { getDropdownBtnPlaceholder } from '@rh-support/utils';
+import { isEmpty } from 'lodash';
 import uniqBy from 'lodash/uniqBy';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { SolrKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
-import { useCaseListDispatchContext, useCaseListStateContext } from '../CaseListContext';
+import { useCaseListDispatchContext } from '../CaseListContext';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilters } from '../CaseListFilterReducer';
 import { setChipsNameSsoMap } from '../CaseListReducer';
-const getFullName = (contact) => {
+import InternalSsoNameFilter from './InternalSsoNameFilter';
+export const getFullName = (contact) => {
     return contact.fullNameCustom
         ? `${contact.firstNameCustom} ${contact.lastNameCustom}`
         : `${contact.firstName} ${contact.lastName}`;
@@ -34,49 +37,100 @@ const mapToObj = (arr) => arr.map((item) => ({
     value: item.ssoUsername,
     label: `${getFullName(item)} <${item.ssoUsername}>`,
 }));
-const getFilterValues = (contactList, own) => mapToObj(contactList).filter((o) => o.value !== own);
+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;
+};
 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 { request: getInternalUserContactsList, isFetching: isFetchingInternalContacts } = useFetch(contacts.getSFDCContacts, { propgateErrors: true });
-    const abortControllerRef = useRef(undefined);
+    const externalInputRef = useRef();
     const [externalContactList, setExternalContactList] = useState([]);
-    const [internalContactList, setInternalContactList] = useState([]);
-    const onFilterChange = (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,
-            },
-        ]);
+    const [isExternalOpen, setIsExternalOpen] = useState(false);
+    const [externalQuery, setExternalQuery] = useState('');
+    const onSelectExternal = (contact) => {
+        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 onFilterChangeAsync = (items) => {
-        const selectedItems = items.map((item) => item.value.value);
+    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.value || ''));
+        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 onFilterChange = (items) => {
+        const selectedItems = items.map((item) => item.value);
         const caseCreated = selectedItems
             .filter((o) => o !== 'ownedByMe')
             .map((o) => (o === 'createdByMe' ? own : o));
@@ -98,111 +152,7 @@ export function CreatorSsoNameFilter() {
                 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())
@@ -221,25 +171,33 @@ export function CreatorSsoNameFilter() {
         fetchStrataAccountUsers();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dispatch, isExternalNonOrgAdmin, loggedInUserRights.data]);
-    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 }))));
+    const filteredExternalList = useMemo(() => {
+        return [
+            ...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("h3", { className: "subheading subheading-sm 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]);
+    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) }, filteredExternalList)) : (React.createElement(InternalSsoNameFilter, null))));
 }

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-c-chip-group" },
+        React.createElement(ChipGroup, { numChips: 7, className: "pf-v5-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-c-divider", role: "separator" }),
-                React.createElement(Link, { className: "cta cta-link pf-c-select__menu-item", to: "/manage/groups" },
+                React.createElement("div", { className: "pf-v5-c-divider", role: "separator" }),
+                React.createElement(Link, { className: "cta cta-link pf-v5-c-select__menu-item", to: "/manage/groups" },
                     React.createElement(Trans, null, "Manage groups")))) : (React.createElement(React.Fragment, null)),
             isNotSearchable: true,
             isNonActionable: true,

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

@@ -0,0 +1,2 @@
+export default function InternalSsoNameFilter(): JSX.Element;
+//# sourceMappingURL=InternalSsoNameFilter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalSsoNameFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/InternalSsoNameFilter.tsx"],"names":[],"mappings":"AAgCA,MAAM,CAAC,OAAO,UAAU,qBAAqB,gBAsQ5C"}