@rh-support/cases 2.6.7 → 2.6.8

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

@@ -1 +1 @@
-{"version":3,"file":"SeverityFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/SeverityFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,KAA+B,MAAM,OAAO,CAAC;AAQpD,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,qBA8E3C"}
+{"version":3,"file":"SeverityFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/SeverityFilter.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG1D,OAAO,KAA0C,MAAM,OAAO,CAAC;AAQ/D,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,qBAoL3C"}

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

@@ -1,33 +1,104 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { Button, MenuToggle, Select, SelectList, SelectOption, } from '@patternfly/react-core';
+import { SingleSelectDropdown, useSelectKeyboardNavigator } from '@rh-support/components';
 import { getDropdownBtnPlaceholder } from '@rh-support/utils';
-import React, { useContext, useState } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SolrKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
 export function SeverityFilter(props) {
+    var _a;
     const { t } = useTranslation();
-    const dispatch = useContext(CaseListFilterDispatchContext);
     const { filterInfo } = useContext(CaseListFilterStateContext);
+    const dispatch = useContext(CaseListFilterDispatchContext);
     const [isOpen, setIsOpen] = useState(false);
-    const toggleIsOpen = (isExpanded) => setIsOpen(isExpanded);
-    const onFilterChangeMultipleSelect = (event, selectedSeverities) => {
-        const newState = filterInfo[SolrKeys.severity].includes(selectedSeverities)
-            ? filterInfo[SolrKeys.severity].filter((item) => item !== selectedSeverities)
-            : [...filterInfo[SolrKeys.severity], selectedSeverities];
-        updateFilter(dispatch, { filterKey: SolrKeys.severity, values: newState });
+    const [selectedItems, setSelectedItems] = useState({});
+    const list = props.isSolrSearchDown
+        ? props.allCaseSeverities.map((severity) => ({ value: severity, key: severity }))
+        : props.filterValues.map((filterValue) => ({ value: filterValue.value, key: filterValue.value }));
+    const singleSelectOptions = list.map((item) => ({
+        value: item.value,
+        label: item.value,
+    }));
+    const selectedSeverity = ((_a = filterInfo[SolrKeys.severity]) === null || _a === void 0 ? void 0 : _a[0]) || '';
+    const selectedOption = {
+        value: selectedSeverity,
+        label: selectedSeverity,
+    };
+    const onToggleClick = (e) => {
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+    };
+    const onSelect = (option) => {
+        if (props.isSolrSearchDown) {
+            updateFilter(dispatch, {
+                filterKey: SolrKeys.severity,
+                values: [option.value],
+            });
+            setIsOpen(false);
+            return;
+        }
+        const prevSelectedSeverities = Object.keys(selectedItems).filter((item) => selectedItems[item] && item);
+        if (selectedItems[option.value]) {
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: false })));
+            const index = prevSelectedSeverities.indexOf(option.value);
+            prevSelectedSeverities.splice(index, 1);
+        }
+        else {
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
+            prevSelectedSeverities.push(option.value);
+        }
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.severity,
+            values: prevSelectedSeverities,
+        });
+    };
+    // Use the keyboard navigator hook
+    const { focusedItemIndex, onInputKeyDown } = useSelectKeyboardNavigator({
+        list,
+        isOpen,
+        resetIndexOnClose: true,
+        setIsOpen,
+        onSelect,
+    });
+    const onClick = () => {
+        setSelectedItems({});
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.severity,
+            values: [],
+        });
     };
-    const onFilterChangeSingleSelect = (event, selectedSeverity) => {
-        updateFilter(dispatch, { filterKey: SolrKeys.severity, values: [selectedSeverity] });
-        setIsOpen(false);
+    const placeholder = props.isSolrSearchDown
+        ? t('Select a severity')
+        : getDropdownBtnPlaceholder(t('Select a severity'), filterInfo[SolrKeys.severity], ' ', list.length, t('All selected'));
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "default", onClick: onToggleClick, innerRef: toggleRef, isExpanded: isOpen, isFullWidth: true, onKeyDown: onInputKeyDown },
+        placeholder,
+        Object.keys(selectedItems).filter((key) => selectedItems[key] === true).length > 0 && (React.createElement(Button, { icon: "", variant: "plain", onClick: onClick, "aria-label": "Clear selection", className: "pf-v6-c-select__toggle-clear" }))));
+    const dropdownOptions = list.map((option, index) => !isEmpty(option.value) && (React.createElement(SelectOption, { key: option.key, value: option, hasCheckbox: !props.isSolrSearchDown, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-severity-${option.value.replace(' ', '-')}` }, option.value)));
+    const onSingleSelectChange = (option) => {
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.severity,
+            values: [option.value],
+        });
     };
-    const titleId = 'case-list-severity-filter';
-    // solr is down and solr filter values are not available
-    // we get filter values from hydra metadata api
-    const singleSelectSolrIsDown = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.single, "aria-label": "Select Input", onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onFilterChangeSingleSelect, selections: filterInfo[SolrKeys.severity][0], isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Select a severity'), "data-tracking-id": "severity-filter", hasPlaceholderStyle: true }, props.allCaseSeverities.map((severity) => (React.createElement(SelectOption, { key: severity, value: severity })))));
-    const multiSelect = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.checkbox, "aria-label": t('Select a severity'), onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onFilterChangeMultipleSelect, selections: filterInfo[SolrKeys.severity], isOpen: isOpen, placeholderText: getDropdownBtnPlaceholder(t('Select a severity'), filterInfo[SolrKeys.severity], ' ', props.filterValues.length, t('All selected')), isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "severity-filter", hasPlaceholderStyle: true }, props.filterValues.map((filterValue) => (React.createElement(SelectOption, { key: filterValue.value, value: filterValue.value })))));
-    return (React.createElement("div", { className: "pf-v5-c-select" },
-        React.createElement("label", { htmlFor: titleId }, t(filterNamesMap[SolrKeys.severity])),
-        props.isSolrSearchDown ? singleSelectSolrIsDown() : multiSelect()));
+    useEffect(() => {
+        var _a;
+        if (isEmpty(filterInfo[SolrKeys.severity])) {
+            setSelectedItems({});
+        }
+        else if (!props.isSolrSearchDown) {
+            const selectedSeverities = (_a = filterInfo[SolrKeys.severity]) === null || _a === void 0 ? void 0 : _a.reduce((selection, severity) => {
+                selection[severity] = true;
+                return selection;
+            }, {});
+            setSelectedItems(selectedSeverities);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterInfo[SolrKeys.severity], props.isSolrSearchDown]);
+    return (React.createElement("div", { className: "severity-filter" },
+        React.createElement("label", { htmlFor: "case-list-severity-filter", className: "pf-v6-u-mb-sm severity-filter-label" }, t(filterNamesMap[SolrKeys.severity])),
+        props.isSolrSearchDown ? (React.createElement(SingleSelectDropdown, { id: "case-list-severity-filter", selected: selectedOption, options: singleSelectOptions, placeholder: t('Select a severity'), onSelect: onSingleSelectChange, dataTrackingId: "severity-filter", isScrollable: true })) : (React.createElement(Select, { role: "menu", id: "case-list-severity-filter", "data-tracking-id": "severity-filter", isOpen: isOpen, selected: selectedItems, onSelect: (_e, v) => onSelect(v), onOpenChange: (nextOpen) => setIsOpen(nextOpen), toggle: toggle, isScrollable: true, popperProps: { direction: 'down', enableFlip: false } },
+            React.createElement(SelectList, null, dropdownOptions)))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"StatusFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/StatusFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,qBA4GzC"}
+{"version":3,"file":"StatusFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/StatusFilter.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,KAA0C,MAAM,OAAO,CAAC;AAO/D,UAAU,MAAM;IACZ,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,qBAkNzC"}

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

@@ -1,25 +1,73 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
-import React, { useContext, useState } from 'react';
+import { Button, MenuToggle, Select, SelectList, SelectOption, } from '@patternfly/react-core';
+import { SingleSelectDropdown, useSelectKeyboardNavigator } from '@rh-support/components';
+import isEmpty from 'lodash/isEmpty';
+import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SolrKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
 import { updateFilter } from '../CaseListFilterReducer';
 export function StatusFilter(props) {
+    var _a;
     const dispatch = useContext(CaseListFilterDispatchContext);
     const { t } = useTranslation();
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const [isOpen, setIsOpen] = useState(false);
-    const toggleIsOpen = (isExpanded) => setIsOpen(isExpanded);
-    const onFilterChange = (event, selectedStatus) => {
-        const newState = filterInfo[SolrKeys.status].includes(selectedStatus)
-            ? filterInfo[SolrKeys.status].filter((item) => item !== selectedStatus)
-            : [...filterInfo[SolrKeys.status], selectedStatus];
-        updateFilter(dispatch, { filterKey: SolrKeys.status, values: newState });
+    const [selectedItems, setSelectedItems] = useState({});
+    const list = props.isSolrSearchDown
+        ? props.allCaseStatuses.map((status) => ({ value: status, key: status }))
+        : props.filterValues.map((filterValue) => ({ value: filterValue.value, key: filterValue.value }));
+    const singleSelectOptions = list.map((item) => ({
+        value: item.value,
+        label: item.value,
+    }));
+    const selectedStatus = ((_a = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status]) === null || _a === void 0 ? void 0 : _a[0]) || '';
+    const selectedOption = {
+        value: selectedStatus,
+        label: selectedStatus,
     };
-    const onFilterChangeSingleSelect = (event, selectedStatus) => {
-        updateFilter(dispatch, { filterKey: SolrKeys.status, values: [selectedStatus] });
-        setIsOpen(false);
+    const onToggleClick = (e) => {
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+    };
+    const onSelect = (option) => {
+        if (props.isSolrSearchDown) {
+            updateFilter(dispatch, {
+                filterKey: SolrKeys.status,
+                values: [option.value],
+            });
+            setIsOpen(false);
+            return;
+        }
+        const prevSelectedStatuses = Object.keys(selectedItems).filter((item) => selectedItems[item] && item);
+        if (selectedItems[option.value]) {
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: false })));
+            const index = prevSelectedStatuses.indexOf(option.value);
+            prevSelectedStatuses.splice(index, 1);
+        }
+        else {
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
+            prevSelectedStatuses.push(option.value);
+        }
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.status,
+            values: prevSelectedStatuses,
+        });
+    };
+    // Use the keyboard navigator hook
+    const { focusedItemIndex, onInputKeyDown } = useSelectKeyboardNavigator({
+        list,
+        isOpen,
+        resetIndexOnClose: true,
+        setIsOpen,
+        onSelect,
+    });
+    const onClick = () => {
+        setSelectedItems({});
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.status,
+            values: [],
+        });
     };
     const getBtnPlaceholder = (btnPlaceholder, selectedValues, type, totalLength, totalLengthString) => {
         if (!selectedValues || (selectedValues && selectedValues.length === 0)) {
@@ -45,12 +93,36 @@ export function StatusFilter(props) {
             }
         }
     };
+    const placeholder = props.isSolrSearchDown
+        ? t('Select a status')
+        : getBtnPlaceholder(t('Select a status'), (filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status]) || [], ' ', list.length, t('All selected'));
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "default", onClick: onToggleClick, innerRef: toggleRef, isExpanded: isOpen, isFullWidth: true, onKeyDown: onInputKeyDown },
+        placeholder,
+        Object.keys(selectedItems).filter((key) => selectedItems[key] === true).length > 0 && (React.createElement(Button, { icon: "", variant: "plain", onClick: onClick, "aria-label": "Clear selection", className: "pf-v6-c-select__toggle-clear" }))));
+    const dropdownOptions = list.map((option, index) => !isEmpty(option.value) && (React.createElement(SelectOption, { key: option.key, value: option, hasCheckbox: !props.isSolrSearchDown, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-status-${option.value.replace(' ', '-')}` }, option.value)));
+    const onSingleSelectChange = (option) => {
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.status,
+            values: [option.value],
+        });
+    };
+    useEffect(() => {
+        var _a;
+        if (isEmpty(filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status])) {
+            setSelectedItems({});
+        }
+        else if (!props.isSolrSearchDown) {
+            const selectedStatuses = (_a = filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status]) === null || _a === void 0 ? void 0 : _a.reduce((selection, status) => {
+                selection[status] = true;
+                return selection;
+            }, {});
+            setSelectedItems(selectedStatuses || {});
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterInfo === null || filterInfo === void 0 ? void 0 : filterInfo[SolrKeys.status], props.isSolrSearchDown]);
     const titleId = 'case-list-status-filter';
-    // solr is down and solr filter values are not available
-    // we get filter values from hydra metadata api
-    const singleSelectSolrIsDown = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.single, "aria-label": "Select Input", onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onFilterChangeSingleSelect, selections: filterInfo[SolrKeys.status][0], isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Select a status'), "data-tracking-id": "status-filter", hasPlaceholderStyle: true }, props.allCaseStatuses.map((status) => (React.createElement(SelectOption, { key: status, value: status })))));
-    const multiSelect = () => (React.createElement(Select, { id: titleId, variant: SelectVariant.checkbox, "aria-label": t('Select a status'), onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onFilterChange, selections: filterInfo[SolrKeys.status], isOpen: isOpen, placeholderText: getBtnPlaceholder(t('Select a status'), filterInfo[SolrKeys.status], ' ', props.filterValues.length, t('All selected')), isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "status-filter", hasPlaceholderStyle: true }, props.filterValues.map((filterValue) => (React.createElement(SelectOption, { key: filterValue.value, value: filterValue.value })))));
-    return (React.createElement("div", { className: "pf-v5-c-select" },
-        React.createElement("label", { htmlFor: titleId }, t(filterNamesMap[SolrKeys.status])),
-        props.isSolrSearchDown ? singleSelectSolrIsDown() : multiSelect()));
+    return (React.createElement("div", { className: "status-filter" },
+        React.createElement("label", { htmlFor: titleId, className: "pf-v6-u-mb-sm status-filter-label" }, t(filterNamesMap[SolrKeys.status])),
+        props.isSolrSearchDown ? (React.createElement(SingleSelectDropdown, { id: titleId, selected: selectedOption, options: singleSelectOptions, placeholder: t('Select a status'), onSelect: onSingleSelectChange, dataTrackingId: "status-filter", isScrollable: true })) : (React.createElement(Select, { role: "menu", id: titleId, "data-tracking-id": "status-filter", isOpen: isOpen, selected: selectedItems, onSelect: (_e, v) => onSelect(v), onOpenChange: (nextOpen) => setIsOpen(nextOpen), toggle: toggle, isScrollable: true, popperProps: { direction: 'down', enableFlip: false } },
+            React.createElement(SelectList, null, dropdownOptions)))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TypeFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/TypeFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAQpD,UAAU,MAAM;IACZ,YAAY,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,qBAyDvC"}
+{"version":3,"file":"TypeFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/TypeFilter.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAQ/D,UAAU,MAAM;IACZ,YAAY,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,qBAkJvC"}

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

@@ -1,6 +1,8 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { Button, MenuToggle, Select, SelectList, SelectOption, } from '@patternfly/react-core';
+import { useSelectKeyboardNavigator } from '@rh-support/components';
 import { getDropdownBtnPlaceholder, toNewCaseTypeMapper, toOldCaseTypeSwitcher } from '@rh-support/utils';
-import React, { useContext, useState } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SolrKeys } from '../../../enums/filters';
 import { filterNamesMap } from '../../../utils/constants';
@@ -8,26 +10,75 @@ import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../Ca
 import { updateFilter } from '../CaseListFilterReducer';
 export function TypeFilter(props) {
     const { t } = useTranslation();
-    const dispatch = useContext(CaseListFilterDispatchContext);
     const { filterInfo } = useContext(CaseListFilterStateContext);
+    const dispatch = useContext(CaseListFilterDispatchContext);
     const [isOpen, setIsOpen] = useState(false);
-    const toggleIsOpen = (isExpanded) => setIsOpen(isExpanded);
-    const onFilterChangeMultipleSelect = (event, selectedTypes) => {
-        // To convert the selected type to old case type
-        const convertedSelectedType = toOldCaseTypeSwitcher(selectedTypes);
-        const newState = filterInfo[SolrKeys.type].includes(convertedSelectedType)
-            ? filterInfo[SolrKeys.type].filter((item) => item !== convertedSelectedType)
-            : [...filterInfo[SolrKeys.type], convertedSelectedType];
+    const [selectedItems, setSelectedItems] = useState({});
+    // Convert case types to new format
+    const newCaseTypesArray = toNewCaseTypeMapper(props.allCaseTypes).sort();
+    const list = newCaseTypesArray.map((type) => ({
+        value: type,
+        key: type,
+    }));
+    const onSelectHandler = (option) => {
+        const convertedSelectedType = toOldCaseTypeSwitcher([option.value]);
+        const prevSelectedTypes = Object.keys(selectedItems).filter((item) => selectedItems[item] && item);
+        if (selectedItems[option.value]) {
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: false })));
+            const index = prevSelectedTypes.indexOf(option.value);
+            prevSelectedTypes.splice(index, 1);
+        }
+        else {
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
+            prevSelectedTypes.push(option.value);
+        }
+        const newState = filterInfo[SolrKeys.type].includes(convertedSelectedType[0])
+            ? filterInfo[SolrKeys.type].filter((item) => item !== convertedSelectedType[0])
+            : [...filterInfo[SolrKeys.type], convertedSelectedType[0]];
         updateFilter(dispatch, {
             filterKey: SolrKeys.type,
             values: newState,
         });
     };
-    const titleId = 'case-list-type-filter';
-    // To switch from old case type to new support type
-    const newCaseTypesArray = toNewCaseTypeMapper(props.allCaseTypes).sort();
+    const { focusedItemIndex, onInputKeyDown } = useSelectKeyboardNavigator({
+        list,
+        isOpen,
+        setIsOpen,
+        onSelect: onSelectHandler,
+    });
+    const onToggleClick = (e) => {
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+    };
+    const onClick = () => {
+        setSelectedItems({});
+        updateFilter(dispatch, {
+            filterKey: SolrKeys.type,
+            values: [],
+        });
+    };
     const toNewCaseTypesFilter = toNewCaseTypeMapper(filterInfo[SolrKeys.type]);
-    return (React.createElement("div", { className: "pf-v5-c-select" },
-        React.createElement("label", { htmlFor: titleId }, t(filterNamesMap[SolrKeys.type])),
-        React.createElement(Select, { id: titleId, variant: SelectVariant.checkbox, "aria-label": t('Select a support type'), onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onFilterChangeMultipleSelect, selections: toNewCaseTypesFilter, isOpen: isOpen, placeholderText: getDropdownBtnPlaceholder(t('Select a support type'), toNewCaseTypesFilter, ' ', props.allCaseTypes.length, t('All selected')), isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "type-filter", hasPlaceholderStyle: true }, newCaseTypesArray.map((filterValue) => (React.createElement(SelectOption, { key: filterValue, value: filterValue }))))));
+    const placeholder = getDropdownBtnPlaceholder(t('Select a support type'), toNewCaseTypesFilter, ' ', props.allCaseTypes.length, t('All selected'));
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "default", onClick: onToggleClick, innerRef: toggleRef, isExpanded: isOpen, isFullWidth: true, onKeyDown: onInputKeyDown },
+        placeholder,
+        Object.keys(selectedItems).filter((key) => selectedItems[key] === true).length > 0 && (React.createElement(Button, { icon: "", variant: "plain", onClick: onClick, "aria-label": "Clear selection", className: "pf-v6-c-select__toggle-clear" }))));
+    const dropdownOptions = list.map((option, index) => !isEmpty(option.value) && (React.createElement(SelectOption, { key: option.key, value: option, hasCheckbox: true, isSelected: selectedItems[option.value], isFocused: focusedItemIndex !== null && focusedItemIndex === index, id: `select-type-${option.value.replace(' ', '-')}` }, option.value)));
+    useEffect(() => {
+        var _a;
+        if (isEmpty(filterInfo[SolrKeys.type])) {
+            setSelectedItems({});
+        }
+        else {
+            const selectedTypes = (_a = toNewCaseTypeMapper(filterInfo[SolrKeys.type])) === null || _a === void 0 ? void 0 : _a.reduce((selection, type) => {
+                selection[type] = true;
+                return selection;
+            }, {});
+            setSelectedItems(selectedTypes);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterInfo[SolrKeys.type]]);
+    return (React.createElement("div", { className: "type-filter" },
+        React.createElement("label", { htmlFor: "case-list-type-filter", className: "pf-v6-u-mb-sm case-list-type-filter-label" }, t(filterNamesMap[SolrKeys.type])),
+        React.createElement(Select, { role: "menu", id: "case-list-type-filter", "data-tracking-id": "type-filter", isOpen: isOpen, selected: selectedItems, onSelect: (_e, v) => onSelectHandler(v), onOpenChange: (nextOpen) => setIsOpen(nextOpen), toggle: toggle, isScrollable: true, popperProps: { direction: 'down', enableFlip: false } },
+            React.createElement(SelectList, null, dropdownOptions))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"VersionsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/VersionsFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAI7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAgB,MAAM,0BAA0B,CAAC;AAoCxE,UAAU,MAAM;IACZ,WAAW,EAAE,cAAc,CAAC;IAC5B,mBAAmB,EAAE,uBAAuB,EAAE,CAAC;CAClD;AAED,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,mBAAmB,EAAE,EAAE,MAAM,qBA+D1E"}
+{"version":3,"file":"VersionsFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-filters/VersionsFilter.tsx"],"names":[],"mappings":"AAeA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAIhF,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAgB,MAAM,0BAA0B,CAAC;AAoCxE,UAAU,MAAM;IACZ,WAAW,EAAE,cAAc,CAAC;IAC5B,mBAAmB,EAAE,uBAAuB,EAAE,CAAC;CAClD;AAED,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,mBAAmB,EAAE,EAAE,MAAM,qBAkO1E"}

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

@@ -1,6 +1,8 @@
-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 { useSelectKeyboardNavigator } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SolrKeys, SolrPivotKeys } from '../../../enums/filters';
 import { CaseListFilterDispatchContext, CaseListFilterStateContext } from '../CaseListFilterContext';
@@ -40,29 +42,124 @@ export function VersionsFilter({ productInfo, productVersionPivot }) {
     const { t } = useTranslation();
     const { filterInfo } = useContext(CaseListFilterStateContext);
     const dispatch = useContext(CaseListFilterDispatchContext);
+    const [inputValue, setInputValue] = useState('');
+    const [activeItem, setActiveItem] = useState(null);
     const [isOpen, setIsOpen] = useState(false);
-    const toggleIsOpen = (isExpanded) => setIsOpen(isExpanded);
-    const onFilterChange = (event, selectedVer) => {
-        const newVerionState = productInfo.case_version.map((version) => version.value).includes(selectedVer)
-            ? productInfo.case_version.filter((item) => item.value !== selectedVer)
-            : [...productInfo.case_version, { field: SolrKeys.version, value: selectedVer }];
-        // find current product from previous state
+    const [selectedItems, setSelectedItems] = useState({});
+    const textInputRef = useRef();
+    // Memoize versions to prevent unnecessary recalculations
+    const versions = useMemo(() => {
+        const versionValues = getVersionValuesForProduct(productVersionPivot, productInfo.value);
+        return versionValues === null || versionValues === void 0 ? void 0 : versionValues.sort((a, b) => compareVersions(a.value, b.value));
+    }, [productVersionPivot, productInfo.value]);
+    // Memoize list to prevent unnecessary recreations
+    const list = useMemo(() => (versions === null || versions === void 0 ? void 0 : versions.map((version) => ({
+        value: version.value,
+        key: version.value,
+    }))) || [], [versions]);
+    const [selectOptions, setSelectOptions] = useState(list);
+    const onToggleClick = (e) => {
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+    };
+    const onSelect = (option) => {
+        const prevSelectedVersions = Object.keys(selectedItems).filter((item) => selectedItems[item] && item);
+        if (selectedItems[option.value]) {
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: !prevData[option.value] })));
+            const indexOfVersion = prevSelectedVersions.indexOf(option.value);
+            prevSelectedVersions.splice(indexOfVersion, 1);
+        }
+        else {
+            setSelectedItems((prevData) => (Object.assign(Object.assign({}, prevData), { [option.value]: true })));
+            prevSelectedVersions.push(option.value);
+        }
+        const newVersionState = prevSelectedVersions.map((version) => ({
+            field: SolrKeys.version,
+            value: version,
+        }));
         const productNewState = [...filterInfo[SolrPivotKeys.product_version]];
         const objIndex = productNewState.findIndex((item) => item.value === productInfo.value);
         // replace product with updated versions
         productNewState[objIndex] = {
             field: SolrKeys.product,
             value: productInfo.value,
-            [SolrKeys.version]: newVerionState,
+            [SolrKeys.version]: newVersionState,
         };
         updateFilter(dispatch, { filterKey: SolrPivotKeys.product_version, values: productNewState });
     };
-    const versions = useMemo(() => {
-        const versionValues = getVersionValuesForProduct(productVersionPivot, productInfo.value);
-        return versionValues === null || versionValues === void 0 ? void 0 : versionValues.sort((a, b) => compareVersions(a.value, b.value));
-    }, [productVersionPivot, productInfo.value]);
+    // Use the keyboard navigator hook
+    const { focusedItemIndex, onInputKeyDown } = useSelectKeyboardNavigator({
+        list,
+        isOpen,
+        ignoreResetOnListChange: false,
+        resetIndexOnClose: true,
+        isDisabled: false,
+        setIsOpen,
+        onSelect,
+    });
+    const onTextInputChange = (_event, value) => {
+        setInputValue(value);
+    };
+    const onClick = () => {
+        var _a;
+        setInputValue('');
+        setSelectedItems({});
+        const productNewState = [...filterInfo[SolrPivotKeys.product_version]];
+        const objIndex = productNewState.findIndex((item) => item.value === productInfo.value);
+        productNewState[objIndex] = {
+            field: SolrKeys.product,
+            value: productInfo.value,
+            [SolrKeys.version]: [],
+        };
+        updateFilter(dispatch, { filterKey: SolrPivotKeys.product_version, values: productNewState });
+        (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    // Update activeItem when focusedItemIndex changes
+    useEffect(() => {
+        if (focusedItemIndex !== null && list[focusedItemIndex]) {
+            const focusedItem = list[focusedItemIndex];
+            setActiveItem(`select-multi-typeahead-checkbox-${focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.value.replace(' ', '-')}`);
+        }
+        else {
+            setActiveItem(null);
+        }
+    }, [focusedItemIndex, list]);
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { variant: "typeahead", onClick: onToggleClick, innerRef: toggleRef, isExpanded: isOpen, isFullWidth: true },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, Object.assign({ value: inputValue, onClick: onToggleClick, onChange: onTextInputChange, onKeyDown: onInputKeyDown, id: "version-typeahead-select-input", autoComplete: "off", innerRef: textInputRef, placeholder: t('Version') }, (activeItem && { 'aria-activedescendant': activeItem }), { role: "combobox", isExpanded: isOpen, "aria-controls": "version-typeahead-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" }))))));
+    // Memoize dropdownOptions to prevent unnecessary rerenders
+    const dropdownOptions = useMemo(() => {
+        const optionsToRender = !isEmpty(selectOptions) ? selectOptions : list;
+        return optionsToRender.map((option, index) => 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)));
+    }, [selectOptions, list, selectedItems, focusedItemIndex]);
+    // Update selectOptions when input value changes
+    useEffect(() => {
+        if (!inputValue) {
+            setSelectOptions(list);
+            return;
+        }
+        const newSelectOptions = list.filter((option) => String(option === null || option === void 0 ? void 0 : option.value).toLowerCase().startsWith(inputValue.toLowerCase()));
+        setSelectOptions(newSelectOptions.length ? newSelectOptions : [{ isDisabled: false, children: `No results found` }]);
+        if (!isOpen) {
+            setIsOpen(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputValue, list]);
+    // Update selectedItems when case_version changes
+    useEffect(() => {
+        const currentVersions = productInfo.case_version || [];
+        const selectedVersions = currentVersions.reduce((selection, version) => {
+            selection[version.value] = true;
+            return selection;
+        }, {});
+        setSelectedItems(selectedVersions);
+    }, [productInfo.case_version]);
     const titleId = 'case-list-versions-filter';
-    return (React.createElement(React.Fragment, null, !isEmpty(versions) && (React.createElement(React.Fragment, null,
+    return (React.createElement(React.Fragment, null, !isEmpty(versions) && (React.createElement("div", { className: "version-filter-chip" },
         React.createElement("label", { hidden: true, htmlFor: titleId }, t('Open versions dropdown')),
-        React.createElement(Select, { className: "version-filter-chip", variant: SelectVariant.checkbox, "aria-label": t('Version'), onToggle: (_event, isExpanded) => toggleIsOpen(isExpanded), onSelect: onFilterChange, selections: productInfo.case_version.map((ver) => ver.value), isOpen: isOpen, placeholderText: 'Version', isCheckboxSelectionBadgeHidden: true, "aria-labelledby": titleId, "data-tracking-id": "versions-filter", hasPlaceholderStyle: true }, (versions || []).map((filterValue) => (React.createElement(SelectOption, { key: filterValue.value, value: filterValue.value, component: "div" }))))))));
+        React.createElement("div", { className: "pf-v6-c-select" },
+            React.createElement(Select, { role: "menu", "data-tracking-id": "versions-filter", id: titleId, title: t('Version'), 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)))))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CaseListTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-table/CaseListTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAuB3E,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAQxD,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,iBAAiB,EAAyB,MAAM,0BAA0B,CAAC;AAEpF,OAAO,EAEH,eAAe,EACf,SAAS,EAIZ,MAAM,0BAA0B,CAAC;AA4BlC,UAAU,MAAM;IACZ,QAAQ,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3C,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,kBAAkB,EAAE,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAsBD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBAykB1C"}
+{"version":3,"file":"CaseListTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/case-list/case-list-table/CaseListTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAqB3E,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAQxD,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,iBAAiB,EAAyB,MAAM,0BAA0B,CAAC;AAEpF,OAAO,EAEH,eAAe,EACf,SAAS,EAIZ,MAAM,0BAA0B,CAAC;AA4BlC,UAAU,MAAM;IACZ,QAAQ,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3C,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,kBAAkB,EAAE,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAsBD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBA+kB1C"}