@patternfly/react-data-view 5.5.1 → 5.6.0

package/dist/cjs/DataViewCheckboxFilter/DataViewCheckboxFilter.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { MenuProps } from '@patternfly/react-core';
+import { DataViewFilterOption } from '../DataViewFilters';
+export declare const isDataViewFilterOption: (obj: unknown) => obj is DataViewFilterOption;
+/** extends MenuProps */
+export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect' | 'onChange'> {
+    /** Unique key for the filter attribute */
+    filterId: string;
+    /** Array of current filter values */
+    value?: string[];
+    /** Filter title displayed in the toolbar */
+    title: string;
+    /** Placeholder text of the menu */
+    placeholder?: string;
+    /** Filter options displayed */
+    options: (DataViewFilterOption | string)[];
+    /** Callback for updating when item selection changes. */
+    onChange?: (event?: React.MouseEvent, values?: string[]) => void;
+    /** Controls visibility of the filter in the toolbar */
+    showToolbarItem?: boolean;
+    /** Controls visibility of the filter icon */
+    showIcon?: boolean;
+    /** Controls visibility of the selected items badge */
+    showBadge?: boolean;
+    /** Custom OUIA ID */
+    ouiaId?: string;
+}
+export declare const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps>;
+export default DataViewCheckboxFilter;

package/dist/cjs/DataViewCheckboxFilter/DataViewCheckboxFilter.js

@@ -0,0 +1,70 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataViewCheckboxFilter = exports.isDataViewFilterOption = void 0;
+const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+const isToolbarChip = (chip) => typeof chip === 'object' && 'key' in chip;
+const isDataViewFilterOption = (obj) => !!obj &&
+    typeof obj === 'object' &&
+    'label' in obj &&
+    'value' in obj &&
+    typeof obj.value === 'string';
+exports.isDataViewFilterOption = isDataViewFilterOption;
+const DataViewCheckboxFilter = (_a) => {
+    var { filterId, title, value = [], onChange, placeholder, options = [], showToolbarItem, showIcon = !placeholder, showBadge = !placeholder, ouiaId = 'DataViewCheckboxFilter' } = _a, props = __rest(_a, ["filterId", "title", "value", "onChange", "placeholder", "options", "showToolbarItem", "showIcon", "showBadge", "ouiaId"]);
+    const [isOpen, setIsOpen] = react_1.default.useState(false);
+    const toggleRef = react_1.default.useRef(null);
+    const menuRef = react_1.default.useRef(null);
+    const containerRef = react_1.default.useRef(null);
+    const normalizeOptions = react_1.default.useMemo(() => options.map(option => typeof option === 'string'
+        ? { label: option, value: option }
+        : option), [options]);
+    const handleToggleClick = (event) => {
+        event.stopPropagation();
+        setTimeout(() => {
+            var _a;
+            const firstElement = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('li > button:not(:disabled)');
+            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+        }, 0);
+        setIsOpen(prev => !prev);
+    };
+    const handleSelect = (event, itemId) => {
+        const activeItem = String(itemId);
+        const isSelected = value.includes(activeItem);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, isSelected ? value.filter(item => item !== activeItem) : [activeItem, ...value]);
+    };
+    const handleClickOutside = (event) => isOpen &&
+        menuRef.current && toggleRef.current &&
+        !menuRef.current.contains(event.target) && !toggleRef.current.contains(event.target)
+        && setIsOpen(false);
+    react_1.default.useEffect(() => {
+        window.addEventListener('click', handleClickOutside);
+        return () => {
+            window.removeEventListener('click', handleClickOutside);
+        };
+    }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (react_1.default.createElement(react_core_1.ToolbarFilter, { key: ouiaId, "data-ouia-component-id": ouiaId, chips: value.map(item => {
+            const activeOption = normalizeOptions.find(option => option.value === item);
+            return ({ key: activeOption === null || activeOption === void 0 ? void 0 : activeOption.value, node: activeOption === null || activeOption === void 0 ? void 0 : activeOption.label });
+        }), deleteChip: (_, chip) => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, value.filter(item => item !== (isToolbarChip(chip) ? chip.key : chip))), categoryName: title, showToolbarItem: showToolbarItem },
+        react_1.default.createElement(react_core_1.Popper, { trigger: react_1.default.createElement(react_core_1.MenuToggle, { ouiaId: `${ouiaId}-toggle`, ref: toggleRef, onClick: handleToggleClick, isExpanded: isOpen, icon: showIcon ? react_1.default.createElement(react_icons_1.FilterIcon, null) : undefined, badge: value.length > 0 && showBadge ? react_1.default.createElement(react_core_1.Badge, { "data-ouia-component-id": `${ouiaId}-badge`, isRead: true }, value.length) : undefined, style: { width: '200px' } }, placeholder !== null && placeholder !== void 0 ? placeholder : title), triggerRef: toggleRef, popper: react_1.default.createElement(react_core_1.Menu, Object.assign({ ref: menuRef, ouiaId: `${ouiaId}-menu`, onSelect: handleSelect, selected: value }, props),
+                react_1.default.createElement(react_core_1.MenuContent, null,
+                    react_1.default.createElement(react_core_1.MenuList, null, normalizeOptions.map(option => (react_1.default.createElement(react_core_1.MenuItem, { "data-ouia-component-id": `${ouiaId}-filter-item-${option.value}`, key: option.value, itemId: option.value, isSelected: value.includes(option.value), hasCheckbox: true }, option.label)))))), popperRef: menuRef, appendTo: containerRef.current || undefined, "aria-label": `${title !== null && title !== void 0 ? title : filterId} filter`, isVisible: isOpen })));
+};
+exports.DataViewCheckboxFilter = DataViewCheckboxFilter;
+exports.default = exports.DataViewCheckboxFilter;

package/dist/cjs/DataViewCheckboxFilter/DataViewCheckboxFilter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/DataViewCheckboxFilter/DataViewCheckboxFilter.test.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const DataViewCheckboxFilter_1 = __importDefault(require("./DataViewCheckboxFilter"));
+const DataViewToolbar_1 = __importDefault(require("../DataViewToolbar"));
+describe('DataViewCheckboxFilter component', () => {
+    const defaultProps = {
+        filterId: 'test-checkbox-filter',
+        title: 'Test Checkbox Filter',
+        value: ['workspace-one'],
+        options: [
+            { label: 'Workspace one', value: 'workspace-one' },
+            { label: 'Workspace two', value: 'workspace-two' },
+            { label: 'Workspace three', value: 'workspace-three' },
+        ],
+    };
+    it('should render correctly', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataViewToolbar_1.default, { filters: react_1.default.createElement(DataViewCheckboxFilter_1.default, Object.assign({}, defaultProps)) }));
+        expect(container).toMatchSnapshot();
+    });
+});

package/dist/cjs/DataViewCheckboxFilter/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';

package/dist/cjs/DataViewCheckboxFilter/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var DataViewCheckboxFilter_1 = require("./DataViewCheckboxFilter");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DataViewCheckboxFilter_1).default; } });
+__exportStar(require("./DataViewCheckboxFilter"), exports);

package/dist/cjs/DataViewFilters/DataViewFilters.d.ts

@@ -1,5 +1,11 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ToolbarToggleGroupProps } from '@patternfly/react-core';
+export interface DataViewFilterOption {
+    /** Filter option label */
+    label: ReactNode;
+    /** Filter option value */
+    value: string;
+}
 /** extends ToolbarToggleGroupProps */
 export interface DataViewFiltersProps<T extends object> extends Omit<ToolbarToggleGroupProps, 'toggleIcon' | 'breakpoint' | 'onChange'> {
     /** Content rendered inside the data view */

package/dist/cjs/DataViewFilters/DataViewFilters.js

@@ -52,6 +52,19 @@ const DataViewFilters = (_a) => {
     (0, react_1.useEffect)(() => {
         filterItems.length > 0 && setActiveAttributeMenu(filterItems[0].title);
     }, [filterItems]);
+    const handleClickOutside = (event) => {
+        var _a, _b;
+        return isAttributeMenuOpen &&
+            !((_a = attributeMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
+            !((_b = attributeToggleRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))
+            && setIsAttributeMenuOpen(false);
+    };
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('click', handleClickOutside);
+        return () => {
+            window.removeEventListener('click', handleClickOutside);
+        };
+    }, [isAttributeMenuOpen]); // eslint-disable-line react-hooks/exhaustive-deps
     const attributeToggle = (react_1.default.createElement(react_core_1.MenuToggle, { ref: attributeToggleRef, onClick: () => setIsAttributeMenuOpen(!isAttributeMenuOpen), isExpanded: isAttributeMenuOpen, icon: toggleIcon }, activeAttributeMenu));
     const attributeMenu = (react_1.default.createElement(react_core_1.Menu, { ref: attributeMenuRef, onSelect: (_ev, itemId) => {
             const selectedItem = filterItems.find(item => item.filterId === itemId);
@@ -64,7 +77,9 @@ const DataViewFilters = (_a) => {
         react_1.default.createElement(react_core_1.ToolbarGroup, { variant: "filter-group" },
             react_1.default.createElement("div", { ref: attributeContainerRef },
                 react_1.default.createElement(react_core_1.Popper, { trigger: attributeToggle, triggerRef: attributeToggleRef, popper: attributeMenu, popperRef: attributeMenuRef, appendTo: attributeContainerRef.current || undefined, isVisible: isAttributeMenuOpen })),
-            react_1.default.Children.map(children, (child) => (react_1.default.isValidElement(child) ? (react_1.default.cloneElement(child, Object.assign({ showToolbarItem: activeAttributeMenu === child.props.title, onChange: (event, value) => onChange === null || onChange === void 0 ? void 0 : onChange(event, { [child.props.filterId]: value }), value: values === null || values === void 0 ? void 0 : values[child.props.filterId] }, child.props))) : child)))));
+            react_1.default.Children.map(children, (child) => react_1.default.isValidElement(child)
+                ? react_1.default.cloneElement(child, Object.assign({ showToolbarItem: activeAttributeMenu === child.props.title, onChange: (event, value) => onChange === null || onChange === void 0 ? void 0 : onChange(event, { [child.props.filterId]: value }), value: values === null || values === void 0 ? void 0 : values[child.props.filterId] }, child.props))
+                : child))));
 };
 exports.DataViewFilters = DataViewFilters;
 exports.default = exports.DataViewFilters;

package/dist/cjs/DataViewTextFilter/DataViewTextFilter.js

@@ -19,7 +19,7 @@ const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const DataViewTextFilter = (_a) => {
     var { filterId, title, value = '', onChange, onClear = () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), showToolbarItem, trimValue = true, ouiaId = 'DataViewTextFilter' } = _a, props = __rest(_a, ["filterId", "title", "value", "onChange", "onClear", "showToolbarItem", "trimValue", "ouiaId"]);
-    return (react_1.default.createElement(react_core_1.ToolbarFilter, { "data-ouia-component-id": ouiaId, chips: value.length > 0 ? [{ key: title, node: value }] : [], deleteChip: () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), categoryName: title, showToolbarItem: showToolbarItem },
+    return (react_1.default.createElement(react_core_1.ToolbarFilter, { key: ouiaId, "data-ouia-component-id": ouiaId, chips: value.length > 0 ? [{ key: title, node: value }] : [], deleteChip: () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), categoryName: title, showToolbarItem: showToolbarItem },
         react_1.default.createElement(react_core_1.SearchInput, Object.assign({ searchInputId: filterId, value: value, onChange: (e, inputValue) => onChange === null || onChange === void 0 ? void 0 : onChange(e, trimValue ? inputValue.trim() : inputValue), onClear: onClear, placeholder: `Filter by ${title}`, "aria-label": `${title !== null && title !== void 0 ? title : filterId} filter`, "data-ouia-component-id": `${ouiaId}-input` }, props))));
 };
 exports.DataViewTextFilter = DataViewTextFilter;

package/dist/cjs/Hooks/filters.js

@@ -5,25 +5,24 @@ const react_1 = require("react");
 ;
 const useDataViewFilters = ({ initialFilters = {}, searchParams, setSearchParams, }) => {
     const isUrlSyncEnabled = (0, react_1.useMemo)(() => searchParams && !!setSearchParams, [searchParams, setSearchParams]);
-    const getInitialFilters = (0, react_1.useCallback)(() => isUrlSyncEnabled ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
-        const urlValue = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(key);
-        loadedFilters[key] = urlValue
-            ? urlValue
-            : initialFilters[key];
-        return loadedFilters;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, Object.assign({}, initialFilters)) : initialFilters, [isUrlSyncEnabled, JSON.stringify(initialFilters), searchParams === null || searchParams === void 0 ? void 0 : searchParams.toString()]);
+    const getInitialFilters = (0, react_1.useCallback)(() => isUrlSyncEnabled
+        ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
+            const urlValue = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(key);
+            const isArrayFilter = Array.isArray(initialFilters[key]);
+            // eslint-disable-next-line no-nested-ternary
+            loadedFilters[key] = urlValue
+                ? (isArrayFilter && !Array.isArray(urlValue) ? [urlValue] : urlValue)
+                : initialFilters[key];
+            return loadedFilters;
+        }, Object.assign({}, initialFilters))
+        : initialFilters, [isUrlSyncEnabled, initialFilters, searchParams]);
     const [filters, setFilters] = (0, react_1.useState)(getInitialFilters());
     const updateSearchParams = (0, react_1.useCallback)((newFilters) => {
         if (isUrlSyncEnabled) {
             const params = new URLSearchParams(searchParams);
             Object.entries(newFilters).forEach(([key, value]) => {
-                if (value) {
-                    params.set(key, Array.isArray(value) ? value.join(',') : value);
-                }
-                else {
-                    params.delete(key);
-                }
+                params.delete(key);
+                (Array.isArray(value) ? value : [value]).forEach((val) => value && params.append(key, val));
             });
             setSearchParams === null || setSearchParams === void 0 ? void 0 : setSearchParams(params);
         }

package/dist/cjs/index.d.ts

@@ -15,5 +15,7 @@ export { default as DataViewTable } from './DataViewTable';
 export * from './DataViewTable';
 export { default as DataViewEventsContext } from './DataViewEventsContext';
 export * from './DataViewEventsContext';
+export { default as DataViewCheckboxFilter } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';
 export { default as DataView } from './DataView';
 export * from './DataView';

package/dist/cjs/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataView = exports.DataViewEventsContext = exports.DataViewTable = exports.DataViewTableBasic = exports.DataViewTableHead = exports.DataViewTableTree = exports.DataViewTextFilter = exports.DataViewToolbar = exports.InternalContext = void 0;
+exports.DataView = exports.DataViewCheckboxFilter = exports.DataViewEventsContext = exports.DataViewTable = exports.DataViewTableBasic = exports.DataViewTableHead = exports.DataViewTableTree = exports.DataViewTextFilter = exports.DataViewToolbar = exports.InternalContext = void 0;
 var InternalContext_1 = require("./InternalContext");
 Object.defineProperty(exports, "InternalContext", { enumerable: true, get: function () { return __importDefault(InternalContext_1).default; } });
 __exportStar(require("./InternalContext"), exports);
@@ -44,6 +44,9 @@ __exportStar(require("./DataViewTable"), exports);
 var DataViewEventsContext_1 = require("./DataViewEventsContext");
 Object.defineProperty(exports, "DataViewEventsContext", { enumerable: true, get: function () { return __importDefault(DataViewEventsContext_1).default; } });
 __exportStar(require("./DataViewEventsContext"), exports);
+var DataViewCheckboxFilter_1 = require("./DataViewCheckboxFilter");
+Object.defineProperty(exports, "DataViewCheckboxFilter", { enumerable: true, get: function () { return __importDefault(DataViewCheckboxFilter_1).default; } });
+__exportStar(require("./DataViewCheckboxFilter"), exports);
 var DataView_1 = require("./DataView");
 Object.defineProperty(exports, "DataView", { enumerable: true, get: function () { return __importDefault(DataView_1).default; } });
 __exportStar(require("./DataView"), exports);

package/dist/dynamic/DataViewCheckboxFilter/package.json

@@ -0,0 +1 @@
+{"main":"../../cjs/DataViewCheckboxFilter/index.js","module":"../../esm/DataViewCheckboxFilter/index.js","typings":"../../esm/DataViewCheckboxFilter/index.d.ts"}

package/dist/esm/DataViewCheckboxFilter/DataViewCheckboxFilter.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { MenuProps } from '@patternfly/react-core';
+import { DataViewFilterOption } from '../DataViewFilters';
+export declare const isDataViewFilterOption: (obj: unknown) => obj is DataViewFilterOption;
+/** extends MenuProps */
+export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect' | 'onChange'> {
+    /** Unique key for the filter attribute */
+    filterId: string;
+    /** Array of current filter values */
+    value?: string[];
+    /** Filter title displayed in the toolbar */
+    title: string;
+    /** Placeholder text of the menu */
+    placeholder?: string;
+    /** Filter options displayed */
+    options: (DataViewFilterOption | string)[];
+    /** Callback for updating when item selection changes. */
+    onChange?: (event?: React.MouseEvent, values?: string[]) => void;
+    /** Controls visibility of the filter in the toolbar */
+    showToolbarItem?: boolean;
+    /** Controls visibility of the filter icon */
+    showIcon?: boolean;
+    /** Controls visibility of the selected items badge */
+    showBadge?: boolean;
+    /** Custom OUIA ID */
+    ouiaId?: string;
+}
+export declare const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps>;
+export default DataViewCheckboxFilter;

package/dist/esm/DataViewCheckboxFilter/DataViewCheckboxFilter.js

@@ -0,0 +1,62 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Badge, Menu, MenuContent, MenuItem, MenuList, MenuToggle, Popper, ToolbarFilter, } from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons';
+const isToolbarChip = (chip) => typeof chip === 'object' && 'key' in chip;
+export const isDataViewFilterOption = (obj) => !!obj &&
+    typeof obj === 'object' &&
+    'label' in obj &&
+    'value' in obj &&
+    typeof obj.value === 'string';
+export const DataViewCheckboxFilter = (_a) => {
+    var { filterId, title, value = [], onChange, placeholder, options = [], showToolbarItem, showIcon = !placeholder, showBadge = !placeholder, ouiaId = 'DataViewCheckboxFilter' } = _a, props = __rest(_a, ["filterId", "title", "value", "onChange", "placeholder", "options", "showToolbarItem", "showIcon", "showBadge", "ouiaId"]);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const toggleRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    const normalizeOptions = React.useMemo(() => options.map(option => typeof option === 'string'
+        ? { label: option, value: option }
+        : option), [options]);
+    const handleToggleClick = (event) => {
+        event.stopPropagation();
+        setTimeout(() => {
+            var _a;
+            const firstElement = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('li > button:not(:disabled)');
+            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+        }, 0);
+        setIsOpen(prev => !prev);
+    };
+    const handleSelect = (event, itemId) => {
+        const activeItem = String(itemId);
+        const isSelected = value.includes(activeItem);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, isSelected ? value.filter(item => item !== activeItem) : [activeItem, ...value]);
+    };
+    const handleClickOutside = (event) => isOpen &&
+        menuRef.current && toggleRef.current &&
+        !menuRef.current.contains(event.target) && !toggleRef.current.contains(event.target)
+        && setIsOpen(false);
+    React.useEffect(() => {
+        window.addEventListener('click', handleClickOutside);
+        return () => {
+            window.removeEventListener('click', handleClickOutside);
+        };
+    }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (React.createElement(ToolbarFilter, { key: ouiaId, "data-ouia-component-id": ouiaId, chips: value.map(item => {
+            const activeOption = normalizeOptions.find(option => option.value === item);
+            return ({ key: activeOption === null || activeOption === void 0 ? void 0 : activeOption.value, node: activeOption === null || activeOption === void 0 ? void 0 : activeOption.label });
+        }), deleteChip: (_, chip) => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, value.filter(item => item !== (isToolbarChip(chip) ? chip.key : chip))), categoryName: title, showToolbarItem: showToolbarItem },
+        React.createElement(Popper, { trigger: React.createElement(MenuToggle, { ouiaId: `${ouiaId}-toggle`, ref: toggleRef, onClick: handleToggleClick, isExpanded: isOpen, icon: showIcon ? React.createElement(FilterIcon, null) : undefined, badge: value.length > 0 && showBadge ? React.createElement(Badge, { "data-ouia-component-id": `${ouiaId}-badge`, isRead: true }, value.length) : undefined, style: { width: '200px' } }, placeholder !== null && placeholder !== void 0 ? placeholder : title), triggerRef: toggleRef, popper: React.createElement(Menu, Object.assign({ ref: menuRef, ouiaId: `${ouiaId}-menu`, onSelect: handleSelect, selected: value }, props),
+                React.createElement(MenuContent, null,
+                    React.createElement(MenuList, null, normalizeOptions.map(option => (React.createElement(MenuItem, { "data-ouia-component-id": `${ouiaId}-filter-item-${option.value}`, key: option.value, itemId: option.value, isSelected: value.includes(option.value), hasCheckbox: true }, option.label)))))), popperRef: menuRef, appendTo: containerRef.current || undefined, "aria-label": `${title !== null && title !== void 0 ? title : filterId} filter`, isVisible: isOpen })));
+};
+export default DataViewCheckboxFilter;

package/dist/esm/DataViewCheckboxFilter/DataViewCheckboxFilter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/DataViewCheckboxFilter/DataViewCheckboxFilter.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DataViewCheckboxFilter from './DataViewCheckboxFilter';
+import DataViewToolbar from '../DataViewToolbar';
+describe('DataViewCheckboxFilter component', () => {
+    const defaultProps = {
+        filterId: 'test-checkbox-filter',
+        title: 'Test Checkbox Filter',
+        value: ['workspace-one'],
+        options: [
+            { label: 'Workspace one', value: 'workspace-one' },
+            { label: 'Workspace two', value: 'workspace-two' },
+            { label: 'Workspace three', value: 'workspace-three' },
+        ],
+    };
+    it('should render correctly', () => {
+        const { container } = render(React.createElement(DataViewToolbar, { filters: React.createElement(DataViewCheckboxFilter, Object.assign({}, defaultProps)) }));
+        expect(container).toMatchSnapshot();
+    });
+});

package/dist/esm/DataViewCheckboxFilter/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';

package/dist/esm/DataViewCheckboxFilter/index.js

@@ -0,0 +1,2 @@
+export { default } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';

package/dist/esm/DataViewFilters/DataViewFilters.d.ts

@@ -1,5 +1,11 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ToolbarToggleGroupProps } from '@patternfly/react-core';
+export interface DataViewFilterOption {
+    /** Filter option label */
+    label: ReactNode;
+    /** Filter option value */
+    value: string;
+}
 /** extends ToolbarToggleGroupProps */
 export interface DataViewFiltersProps<T extends object> extends Omit<ToolbarToggleGroupProps, 'toggleIcon' | 'breakpoint' | 'onChange'> {
     /** Content rendered inside the data view */

package/dist/esm/DataViewFilters/DataViewFilters.js

@@ -26,6 +26,19 @@ export const DataViewFilters = (_a) => {
     useEffect(() => {
         filterItems.length > 0 && setActiveAttributeMenu(filterItems[0].title);
     }, [filterItems]);
+    const handleClickOutside = (event) => {
+        var _a, _b;
+        return isAttributeMenuOpen &&
+            !((_a = attributeMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
+            !((_b = attributeToggleRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))
+            && setIsAttributeMenuOpen(false);
+    };
+    useEffect(() => {
+        window.addEventListener('click', handleClickOutside);
+        return () => {
+            window.removeEventListener('click', handleClickOutside);
+        };
+    }, [isAttributeMenuOpen]); // eslint-disable-line react-hooks/exhaustive-deps
     const attributeToggle = (React.createElement(MenuToggle, { ref: attributeToggleRef, onClick: () => setIsAttributeMenuOpen(!isAttributeMenuOpen), isExpanded: isAttributeMenuOpen, icon: toggleIcon }, activeAttributeMenu));
     const attributeMenu = (React.createElement(Menu, { ref: attributeMenuRef, onSelect: (_ev, itemId) => {
             const selectedItem = filterItems.find(item => item.filterId === itemId);
@@ -38,6 +51,8 @@ export const DataViewFilters = (_a) => {
         React.createElement(ToolbarGroup, { variant: "filter-group" },
             React.createElement("div", { ref: attributeContainerRef },
                 React.createElement(Popper, { trigger: attributeToggle, triggerRef: attributeToggleRef, popper: attributeMenu, popperRef: attributeMenuRef, appendTo: attributeContainerRef.current || undefined, isVisible: isAttributeMenuOpen })),
-            React.Children.map(children, (child) => (React.isValidElement(child) ? (React.cloneElement(child, Object.assign({ showToolbarItem: activeAttributeMenu === child.props.title, onChange: (event, value) => onChange === null || onChange === void 0 ? void 0 : onChange(event, { [child.props.filterId]: value }), value: values === null || values === void 0 ? void 0 : values[child.props.filterId] }, child.props))) : child)))));
+            React.Children.map(children, (child) => React.isValidElement(child)
+                ? React.cloneElement(child, Object.assign({ showToolbarItem: activeAttributeMenu === child.props.title, onChange: (event, value) => onChange === null || onChange === void 0 ? void 0 : onChange(event, { [child.props.filterId]: value }), value: values === null || values === void 0 ? void 0 : values[child.props.filterId] }, child.props))
+                : child))));
 };
 export default DataViewFilters;

package/dist/esm/DataViewTextFilter/DataViewTextFilter.js

@@ -13,7 +13,7 @@ import React from 'react';
 import { SearchInput, ToolbarFilter } from '@patternfly/react-core';
 export const DataViewTextFilter = (_a) => {
     var { filterId, title, value = '', onChange, onClear = () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), showToolbarItem, trimValue = true, ouiaId = 'DataViewTextFilter' } = _a, props = __rest(_a, ["filterId", "title", "value", "onChange", "onClear", "showToolbarItem", "trimValue", "ouiaId"]);
-    return (React.createElement(ToolbarFilter, { "data-ouia-component-id": ouiaId, chips: value.length > 0 ? [{ key: title, node: value }] : [], deleteChip: () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), categoryName: title, showToolbarItem: showToolbarItem },
+    return (React.createElement(ToolbarFilter, { key: ouiaId, "data-ouia-component-id": ouiaId, chips: value.length > 0 ? [{ key: title, node: value }] : [], deleteChip: () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), categoryName: title, showToolbarItem: showToolbarItem },
         React.createElement(SearchInput, Object.assign({ searchInputId: filterId, value: value, onChange: (e, inputValue) => onChange === null || onChange === void 0 ? void 0 : onChange(e, trimValue ? inputValue.trim() : inputValue), onClear: onClear, placeholder: `Filter by ${title}`, "aria-label": `${title !== null && title !== void 0 ? title : filterId} filter`, "data-ouia-component-id": `${ouiaId}-input` }, props))));
 };
 export default DataViewTextFilter;

package/dist/esm/Hooks/filters.js

@@ -2,25 +2,24 @@ import { useState, useCallback, useEffect, useMemo } from "react";
 ;
 export const useDataViewFilters = ({ initialFilters = {}, searchParams, setSearchParams, }) => {
     const isUrlSyncEnabled = useMemo(() => searchParams && !!setSearchParams, [searchParams, setSearchParams]);
-    const getInitialFilters = useCallback(() => isUrlSyncEnabled ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
-        const urlValue = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(key);
-        loadedFilters[key] = urlValue
-            ? urlValue
-            : initialFilters[key];
-        return loadedFilters;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, Object.assign({}, initialFilters)) : initialFilters, [isUrlSyncEnabled, JSON.stringify(initialFilters), searchParams === null || searchParams === void 0 ? void 0 : searchParams.toString()]);
+    const getInitialFilters = useCallback(() => isUrlSyncEnabled
+        ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
+            const urlValue = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(key);
+            const isArrayFilter = Array.isArray(initialFilters[key]);
+            // eslint-disable-next-line no-nested-ternary
+            loadedFilters[key] = urlValue
+                ? (isArrayFilter && !Array.isArray(urlValue) ? [urlValue] : urlValue)
+                : initialFilters[key];
+            return loadedFilters;
+        }, Object.assign({}, initialFilters))
+        : initialFilters, [isUrlSyncEnabled, initialFilters, searchParams]);
     const [filters, setFilters] = useState(getInitialFilters());
     const updateSearchParams = useCallback((newFilters) => {
         if (isUrlSyncEnabled) {
             const params = new URLSearchParams(searchParams);
             Object.entries(newFilters).forEach(([key, value]) => {
-                if (value) {
-                    params.set(key, Array.isArray(value) ? value.join(',') : value);
-                }
-                else {
-                    params.delete(key);
-                }
+                params.delete(key);
+                (Array.isArray(value) ? value : [value]).forEach((val) => value && params.append(key, val));
             });
             setSearchParams === null || setSearchParams === void 0 ? void 0 : setSearchParams(params);
         }

package/dist/esm/index.d.ts

@@ -15,5 +15,7 @@ export { default as DataViewTable } from './DataViewTable';
 export * from './DataViewTable';
 export { default as DataViewEventsContext } from './DataViewEventsContext';
 export * from './DataViewEventsContext';
+export { default as DataViewCheckboxFilter } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';
 export { default as DataView } from './DataView';
 export * from './DataView';

package/dist/esm/index.js

@@ -16,5 +16,7 @@ export { default as DataViewTable } from './DataViewTable';
 export * from './DataViewTable';
 export { default as DataViewEventsContext } from './DataViewEventsContext';
 export * from './DataViewEventsContext';
+export { default as DataViewCheckboxFilter } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';
 export { default as DataView } from './DataView';
 export * from './DataView';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "5.5.1",
+  "version": "5.6.0",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/data-view/examples/Functionality/FiltersExample.tsx

@@ -5,8 +5,9 @@ import { useDataViewFilters, useDataViewPagination } from '@patternfly/react-dat
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
-import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
+import { DataViewFilterOption, DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
 import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
+import { DataViewCheckboxFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewCheckboxFilter';
 
 const perPageOptions = [
   { title: '5', value: 5 },
@@ -17,38 +18,51 @@ interface Repository {
   name: string;
   branch: string | null;
   prs: string | null;
-  workspaces: string;
+  workspace: string;
   lastCommit: string;
 }
 
 interface RepositoryFilters {
   name: string,
-  branch: string
+  branch: string,
+  workspace: string[]
 }
 
 const repositories: Repository[] = [
-  { name: 'Repository one', branch: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
-  { name: 'Repository two', branch: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
-  { name: 'Repository three', branch: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
-  { name: 'Repository four', branch: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
-  { name: 'Repository five', branch: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
-  { name: 'Repository six', branch: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+  { name: 'Repository one', branch: 'Branch one', prs: 'Pull request one', workspace: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branch: 'Branch two', prs: 'Pull request two', workspace: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branch: 'Branch three', prs: 'Pull request three', workspace: 'Workspace one', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branch: 'Branch four', prs: 'Pull request four', workspace: 'Workspace one', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branch: 'Branch five', prs: 'Pull request five', workspace: 'Workspace two', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branch: 'Branch six', prs: 'Pull request six', workspace: 'Workspace three', lastCommit: 'Timestamp six' }
 ];
 
-const columns = [ 'Name', 'Branch', 'Pull requests', 'Workspaces', 'Last commit' ];
+const filterOptions: DataViewFilterOption[] = [
+  { label: 'Workspace one', value: 'workspace-one' },
+  { label: 'Workspace two', value: 'workspace-two' },
+  { label: 'Workspace three', value: 'workspace-three' }
+];
+
+const columns = [ 'Name', 'Branch', 'Pull requests', 'Workspace', 'Last commit' ];
 
 const ouiaId = 'LayoutExample';
 
 const MyTable: React.FunctionComponent = () => { 
   const [ searchParams, setSearchParams ] = useSearchParams();
+  const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<RepositoryFilters>({ initialFilters: { name: '', branch: '', workspace: [] }, searchParams, setSearchParams });
   const pagination = useDataViewPagination({ perPage: 5 });
   const { page, perPage } = pagination;
-  const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<RepositoryFilters>({ initialFilters: { name: '', branch: '' }, searchParams, setSearchParams });
 
-  const pageRows = useMemo(() => repositories
-    .filter(item => (!filters.name || item.name?.toLocaleLowerCase().includes(filters.name?.toLocaleLowerCase())) && (!filters.branch || item.branch?.toLocaleLowerCase().includes(filters.branch?.toLocaleLowerCase())))
+  const filteredData = useMemo(() => repositories.filter(item => 
+    (!filters.name || item.name?.toLocaleLowerCase().includes(filters.name?.toLocaleLowerCase())) &&
+    (!filters.branch || item.branch?.toLocaleLowerCase().includes(filters.branch?.toLocaleLowerCase())) &&
+    (!filters.workspace || filters.workspace.length === 0 || filters.workspace.includes(String(filterOptions.find(option => option.label === item.workspace)?.value)))
+  ), [ filters ]);
+
+  const pageRows = useMemo(() => filteredData
     .slice((page - 1) * perPage, ((page - 1) * perPage) + perPage)
-    .map(item => Object.values(item)), [ page, perPage, filters ]);
+    .map(item => Object.values(item)),
+  [ page, perPage, filteredData ]);
 
   return (
     <DataView>
@@ -58,7 +72,7 @@ const MyTable: React.FunctionComponent = () => {
         pagination={
           <Pagination 
             perPageOptions={perPageOptions} 
-            itemCount={repositories.length} 
+            itemCount={filteredData.length} 
             {...pagination} 
           />
         }
@@ -66,6 +80,7 @@ const MyTable: React.FunctionComponent = () => {
           <DataViewFilters onChange={(_e, values) => onSetFilters(values)} values={filters}>
             <DataViewTextFilter filterId="name" title='Name' placeholder='Filter by name' />
             <DataViewTextFilter filterId="branch" title='Branch' placeholder='Filter by branch' />
+            <DataViewCheckboxFilter filterId="workspace" title='Workspace' placeholder='Filter by workspace' options={filterOptions} />
           </DataViewFilters>
         }
       />
@@ -76,7 +91,7 @@ const MyTable: React.FunctionComponent = () => {
           <Pagination 
             isCompact  
             perPageOptions={perPageOptions} 
-            itemCount={repositories.length} 
+            itemCount={filteredData.length} 
             {...pagination} 
           />
         } 

package/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md

@@ -11,7 +11,7 @@ source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
 sortValue: 3
-propComponents: ['DataViewFilters', 'DataViewTextFilter']
+propComponents: ['DataViewFilters', 'DataViewTextFilter', 'DataViewCheckboxFilter']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md
 ---
 import { useMemo } from 'react';
@@ -23,6 +23,7 @@ import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataVi
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
 import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
+import { DataViewCheckboxFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewCheckboxFilter';
 
 This is a list of functionality you can use to manage data displayed in the **data view**.
 
@@ -92,7 +93,7 @@ The `useDataViewSelection` hook manages the selection state of the data view.
 Enables filtering of data records in the data view and displays the applied filter chips.
 
 ### Toolbar usage
-The data view toolbar can include a set of filters by passing a React node to the `filters` property. You can use predefined components `DataViewFilters` and `DataViewTextFilter` to customize and handle filtering directly in the toolbar. The `DataViewFilters` is a wrapper allowing conditional filtering using multiple attributes. If you need just a single filter, you can use `DataViewTextFilter` or a different filter component alone. Props of these filter components are listed at the bottom of this page. 
+The data view toolbar can include a set of filters by passing a React node to the `filters` property. You can use predefined components `DataViewFilters`, `DataViewTextFilter` and `DataViewCheckboxFilter` to customize and handle filtering directly in the toolbar. The `DataViewFilters` is a wrapper allowing conditional filtering using multiple attributes. If you need just a single filter, you can use `DataViewTextFilter`, `DataViewCheckboxFilter` or a different filter component alone. Props of these filter components are listed at the bottom of this page. 
 
 You can decide between passing `value` and `onChange` event to every filter separately or pass `values` and `onChange` to the `DataViewFilters` wrapper which make them available to its children. Props directly passed to child filters have a higher priority than the "inherited" ones. 
 
@@ -101,7 +102,7 @@ You can decide between passing `value` and `onChange` event to every filter sepa
 The `useDataViewFilters` hook manages the filter state of the data view. It allows you to define default filter values, synchronize filter state with URL parameters, and handle filter changes efficiently.
 
 **Initial values:**
-- `initialFilters` object with default filter values
+- `initialFilters` object with default filter values (if the filter param allows multiple values, pass an array)
 - optional `searchParams` object for managing URL-based filter state
 - optional `setSearchParams` function to update the URL when filters are modified
 

package/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DataViewCheckboxFilter, { DataViewCheckboxFilterProps } from './DataViewCheckboxFilter';
+import DataViewToolbar from '../DataViewToolbar';
+
+describe('DataViewCheckboxFilter component', () => {
+  const defaultProps: DataViewCheckboxFilterProps = {
+    filterId: 'test-checkbox-filter',
+    title: 'Test Checkbox Filter',
+    value: [ 'workspace-one' ],
+    options: [
+      { label: 'Workspace one', value: 'workspace-one' },
+      { label: 'Workspace two', value: 'workspace-two' },
+      { label: 'Workspace three', value: 'workspace-three' },
+    ],
+  };
+
+  it('should render correctly', () => {
+    const { container } = render(
+      <DataViewToolbar filters={<DataViewCheckboxFilter {...defaultProps} />} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import {
+  Badge,
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuList,
+  MenuProps,
+  MenuToggle,
+  Popper,
+  ToolbarChip,
+  ToolbarFilter,
+} from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons';
+import { DataViewFilterOption } from '../DataViewFilters';
+
+const isToolbarChip = (chip: string | ToolbarChip): chip is ToolbarChip =>
+  typeof chip === 'object' && 'key' in chip;
+
+export const isDataViewFilterOption = (obj: unknown): obj is DataViewFilterOption =>
+  !!obj &&
+  typeof obj === 'object' &&
+  'label' in obj &&
+  'value' in obj &&
+  typeof (obj as DataViewFilterOption).value === 'string';
+
+/** extends MenuProps */
+export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect' | 'onChange'> {
+  /** Unique key for the filter attribute */
+  filterId: string;
+  /** Array of current filter values */
+  value?: string[];
+  /** Filter title displayed in the toolbar */
+  title: string;
+  /** Placeholder text of the menu */
+  placeholder?: string;
+  /** Filter options displayed */
+  options: (DataViewFilterOption | string)[];
+  /** Callback for updating when item selection changes. */
+  onChange?: (event?: React.MouseEvent, values?: string[]) => void;
+  /** Controls visibility of the filter in the toolbar */
+  showToolbarItem?: boolean;
+  /** Controls visibility of the filter icon */
+  showIcon?: boolean;
+  /** Controls visibility of the selected items badge */
+  showBadge?: boolean;
+  /** Custom OUIA ID */
+  ouiaId?: string;
+}
+
+export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
+  filterId,
+  title,
+  value = [],
+  onChange,
+  placeholder,
+  options = [],
+  showToolbarItem,
+  showIcon = !placeholder,
+  showBadge = !placeholder,
+  ouiaId = 'DataViewCheckboxFilter',
+  ...props
+}: DataViewCheckboxFilterProps) => {
+  const [ isOpen, setIsOpen ] = React.useState(false);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const normalizeOptions = React.useMemo(
+    () =>
+      options.map(option =>
+        typeof option === 'string'
+          ? { label: option, value: option }
+          : option
+      ),
+    [ options ]
+  );
+
+  const handleToggleClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    setTimeout(() => {
+      const firstElement = menuRef.current?.querySelector('li > button:not(:disabled)') as HTMLElement;
+      firstElement?.focus();
+    }, 0);
+    setIsOpen(prev => !prev);
+  };
+
+  const handleSelect = (event?: React.MouseEvent, itemId?: string | number) => {
+    const activeItem = String(itemId);
+    const isSelected = value.includes(activeItem);
+
+    onChange?.(
+      event,
+      isSelected ? value.filter(item => item !== activeItem) : [ activeItem, ...value ]
+    );
+  };
+
+  const handleClickOutside = (event: MouseEvent) => 
+    isOpen &&
+    menuRef.current && toggleRef.current &&
+    !menuRef.current.contains(event.target as Node) && !toggleRef.current.contains(event.target as Node)
+    && setIsOpen(false);
+
+
+  React.useEffect(() => {
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [ isOpen ]);  // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <ToolbarFilter
+      key={ouiaId}
+      data-ouia-component-id={ouiaId}
+      chips={value.map(item => {
+        const activeOption = normalizeOptions.find(option => option.value === item);
+        return ({ key: activeOption?.value as string, node: activeOption?.label })
+      })}
+      deleteChip={(_, chip) =>
+        onChange?.(undefined, value.filter(item => item !== (isToolbarChip(chip) ? chip.key : chip)))
+      }
+      categoryName={title}
+      showToolbarItem={showToolbarItem}
+    >
+      <Popper
+        trigger={
+          <MenuToggle
+            ouiaId={`${ouiaId}-toggle`}
+            ref={toggleRef}
+            onClick={handleToggleClick}
+            isExpanded={isOpen}
+            icon={showIcon ? <FilterIcon /> : undefined}
+            badge={value.length > 0 && showBadge ? <Badge data-ouia-component-id={`${ouiaId}-badge`} isRead>{value.length}</Badge> : undefined}
+            style={{ width: '200px' }}
+          >
+            {placeholder ?? title}
+          </MenuToggle>
+        }
+        triggerRef={toggleRef}
+        popper={
+          <Menu
+            ref={menuRef}
+            ouiaId={`${ouiaId}-menu`}
+            onSelect={handleSelect}
+            selected={value}
+            {...props}
+          >
+            <MenuContent>
+              <MenuList>
+                {normalizeOptions.map(option => (
+                  <MenuItem
+                    data-ouia-component-id={`${ouiaId}-filter-item-${option.value}`}
+                    key={option.value}
+                    itemId={option.value}
+                    isSelected={value.includes(option.value)}
+                    hasCheckbox
+                  >
+                    {option.label}
+                  </MenuItem>
+                ))}
+              </MenuList>
+            </MenuContent>
+          </Menu>
+        }
+        popperRef={menuRef}
+        appendTo={containerRef.current || undefined}
+        aria-label={`${title ?? filterId} filter`}
+        isVisible={isOpen}
+      />
+    </ToolbarFilter>
+  );
+};
+
+export default DataViewCheckboxFilter;

package/src/DataViewCheckboxFilter/__snapshots__/DataViewCheckboxFilter.test.tsx.snap

@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataViewCheckboxFilter component should render correctly 1`] = `
+<div>
+  <div
+    class="pf-v5-c-toolbar"
+    data-ouia-component-id="DataViewToolbar"
+    data-ouia-component-type="PF5/Toolbar"
+    data-ouia-safe="true"
+    id="pf-random-id-0"
+  >
+    <div
+      class="pf-v5-c-toolbar__content"
+    >
+      <div
+        class="pf-v5-c-toolbar__content-section"
+      >
+        <div
+          class="pf-v5-c-toolbar__item pf-m-search-filter"
+        >
+          <div
+            class="pf-v5-c-toolbar__item"
+            data-ouia-component-id="DataViewCheckboxFilter"
+          >
+            <button
+              aria-expanded="false"
+              class="pf-v5-c-menu-toggle"
+              data-ouia-component-id="DataViewCheckboxFilter-toggle"
+              data-ouia-component-type="PF5/MenuToggle"
+              data-ouia-safe="true"
+              style="width: 200px;"
+              type="button"
+            >
+              <span
+                class="pf-v5-c-menu-toggle__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 512 512"
+                  width="1em"
+                >
+                  <path
+                    d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="pf-v5-c-menu-toggle__text"
+              >
+                Test Checkbox Filter
+              </span>
+              <span
+                class="pf-v5-c-menu-toggle__count"
+              >
+                <span
+                  class="pf-v5-c-badge pf-m-read"
+                  data-ouia-component-id="DataViewCheckboxFilter-badge"
+                >
+                  1
+                </span>
+              </span>
+              <span
+                class="pf-v5-c-menu-toggle__controls"
+              >
+                <span
+                  class="pf-v5-c-menu-toggle__toggle-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 320 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-v5-c-toolbar__content pf-m-chip-container"
+    >
+      <div
+        class="pf-v5-c-toolbar__group"
+      >
+        <div
+          class="pf-v5-c-toolbar__item pf-m-chip-group"
+        >
+          <div
+            aria-labelledby="pf-random-id-1"
+            class="pf-v5-c-chip-group pf-m-category"
+            data-ouia-component-type="PF5/ChipGroup"
+            data-ouia-safe="true"
+            role="group"
+          >
+            <div
+              class="pf-v5-c-chip-group__main"
+            >
+              <span
+                class="pf-v5-c-chip-group__label"
+                id="pf-random-id-1"
+              >
+                Test Checkbox Filter
+              </span>
+              <ul
+                aria-labelledby="pf-random-id-1"
+                class="pf-v5-c-chip-group__list"
+                role="list"
+              >
+                <li
+                  class="pf-v5-c-chip-group__list-item"
+                >
+                  <div
+                    class="pf-v5-c-chip"
+                    data-ouia-component-id="OUIA-Generated-Chip-1"
+                    data-ouia-component-type="PF5/Chip"
+                    data-ouia-safe="true"
+                  >
+                    <span
+                      class="pf-v5-c-chip__content"
+                    >
+                      <span
+                        class="pf-v5-c-chip__text"
+                        id="pf-random-id-2"
+                      >
+                        Workspace one
+                      </span>
+                    </span>
+                    <span
+                      class="pf-v5-c-chip__actions"
+                    >
+                      <button
+                        aria-disabled="false"
+                        aria-label="close"
+                        aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
+                        class="pf-v5-c-button pf-m-plain"
+                        data-ouia-component-id="close"
+                        data-ouia-component-type="PF5/Button"
+                        data-ouia-safe="true"
+                        id="remove_pf-random-id-2"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="pf-v5-svg"
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          viewBox="0 0 352 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                          />
+                        </svg>
+                      </button>
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-toolbar__item"
+      >
+        <button
+          aria-disabled="false"
+          class="pf-v5-c-button pf-m-link pf-m-inline"
+          data-ouia-component-id="DataViewToolbar-clear-all-filters"
+          data-ouia-component-type="PF5/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          Clear filters
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/DataViewCheckboxFilter/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';

package/src/DataViewFilters/DataViewFilters.tsx

@@ -1,9 +1,16 @@
-import React, { useMemo, useState, useRef, useEffect, ReactElement } from 'react';
+import React, { useMemo, useState, useRef, useEffect, ReactElement, ReactNode } from 'react';
 import {
   Menu, MenuContent, MenuItem, MenuList, MenuToggle, Popper, ToolbarGroup, ToolbarToggleGroup, ToolbarToggleGroupProps,
 } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
 
+export interface DataViewFilterOption {
+  /** Filter option label */
+  label: ReactNode;
+  /** Filter option value */
+  value: string;
+}
+
 // helper interface to generate attribute menu
 interface DataViewFilterIdentifiers {
   filterId: string;
@@ -57,6 +64,19 @@ export const DataViewFilters = <T extends object>({
     filterItems.length > 0 && setActiveAttributeMenu(filterItems[0].title);
   }, [ filterItems ]);
 
+  const handleClickOutside = (event: MouseEvent) => 
+    isAttributeMenuOpen &&
+    !attributeMenuRef.current?.contains(event.target as Node) &&
+    !attributeToggleRef.current?.contains(event.target as Node)
+    && setIsAttributeMenuOpen(false);
+
+  useEffect(() => {
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [ isAttributeMenuOpen ]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const attributeToggle = (
     <MenuToggle
       ref={attributeToggleRef}
@@ -102,9 +122,9 @@ export const DataViewFilters = <T extends object>({
             isVisible={isAttributeMenuOpen}
           />
         </div>
-        {React.Children.map(children, (child) => (
-          React.isValidElement(child) ? (
-            React.cloneElement(child as ReactElement<{
+        {React.Children.map(children, (child) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child as ReactElement<{
               showToolbarItem: boolean;
               onChange: (_e: unknown, values: unknown) => void;
               value: unknown;
@@ -114,9 +134,8 @@ export const DataViewFilters = <T extends object>({
               value: values?.[child.props.filterId],
               ...child.props
             })
-          ) : child
-        ))}
-
+            : child
+        )}
       </ToolbarGroup>
     </ToolbarToggleGroup>
   );

package/src/DataViewTextFilter/DataViewTextFilter.tsx

@@ -31,6 +31,7 @@ export const DataViewTextFilter: React.FC<DataViewTextFilterProps> = ({
   ...props
 }: DataViewTextFilterProps) => (
   <ToolbarFilter
+    key={ouiaId}
     data-ouia-component-id={ouiaId}
     chips={value.length > 0 ? [ { key: title, node: value } ] : []}
     deleteChip={() => onChange?.(undefined, '')}

package/src/Hooks/filters.ts

@@ -16,15 +16,19 @@ export const useDataViewFilters = <T extends object>({
 }: UseDataViewFiltersProps<T>) => {
   const isUrlSyncEnabled = useMemo(() => searchParams && !!setSearchParams, [ searchParams, setSearchParams ]);
 
-  const getInitialFilters = useCallback((): T => isUrlSyncEnabled ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
-    const urlValue = searchParams?.get(key);
-    loadedFilters[key as keyof T] = urlValue
-      ? (urlValue as T[keyof T] | T[keyof T])
-      : initialFilters[key as keyof T];
-    return loadedFilters;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, { ...initialFilters }) : initialFilters, [ isUrlSyncEnabled, JSON.stringify(initialFilters), searchParams?.toString() ]);
+  const getInitialFilters = useCallback((): T => isUrlSyncEnabled
+    ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
+      const urlValue = searchParams?.get(key);
+      const isArrayFilter = Array.isArray(initialFilters[key]);
 
+      // eslint-disable-next-line no-nested-ternary
+      loadedFilters[key] = urlValue
+        ? (isArrayFilter && !Array.isArray(urlValue) ? [ urlValue ] : urlValue)
+        : initialFilters[key];
+
+      return loadedFilters;
+    }, { ...initialFilters })
+    : initialFilters, [ isUrlSyncEnabled, initialFilters, searchParams ]);
   const [ filters, setFilters ] = useState<T>(getInitialFilters());
 
   const updateSearchParams = useCallback(
@@ -32,11 +36,8 @@ export const useDataViewFilters = <T extends object>({
       if (isUrlSyncEnabled) {
         const params = new URLSearchParams(searchParams);
         Object.entries(newFilters).forEach(([ key, value ]) => {
-          if (value) {
-            params.set(key, Array.isArray(value) ? value.join(',') : value);
-          } else {
-            params.delete(key);
-          }
+          params.delete(key);
+          (Array.isArray(value) ? value : [ value ]).forEach((val) => value && params.append(key, val));
         });
         setSearchParams?.(params);
       }

package/src/index.ts

@@ -25,5 +25,8 @@ export * from './DataViewTable';
 export { default as DataViewEventsContext } from './DataViewEventsContext';
 export * from './DataViewEventsContext';
 
+export { default as DataViewCheckboxFilter } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';
+
 export { default as DataView } from './DataView';
 export * from './DataView';