@patternfly/react-data-view 7.0.0-prerelease.2 → 7.0.0-prerelease.4

package/dist/cjs/DataViewToolbar/DataViewToolbar.js

@@ -1,4 +1,27 @@
 "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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)
@@ -10,19 +33,19 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataViewToolbar = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const DataViewToolbar = (_a) => {
-    var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "children"]);
-    return (react_1.default.createElement(react_core_1.Toolbar, Object.assign({ ouiaId: ouiaId, className: className }, props),
+    var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customLabelGroupContent, clearAllFilters, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "filters", "customLabelGroupContent", "clearAllFilters", "children"]);
+    const defaultClearFilters = (0, react_1.useRef)(react_1.default.createElement(react_core_1.ToolbarItem, null,
+        react_1.default.createElement(react_core_1.Button, { ouiaId: `${ouiaId}-clear-all-filters`, variant: "link", onClick: clearAllFilters, isInline: true }, "Clear filters")));
+    return (react_1.default.createElement(react_core_1.Toolbar, Object.assign({ ouiaId: ouiaId, className: className, customLabelGroupContent: customLabelGroupContent !== null && customLabelGroupContent !== void 0 ? customLabelGroupContent : defaultClearFilters.current }, props),
         react_1.default.createElement(react_core_1.ToolbarContent, null,
             bulkSelect && (react_1.default.createElement(react_core_1.ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
             actions && (react_1.default.createElement(react_core_1.ToolbarItem, null, actions)),
+            filters && (react_1.default.createElement(react_core_1.ToolbarItem, null, filters)),
             pagination && (react_1.default.createElement(react_core_1.ToolbarItem, { variant: react_core_1.ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
             children)));
 };

package/dist/cjs/Hooks/filters.d.ts

@@ -0,0 +1,14 @@
+export interface UseDataViewFiltersProps<T extends object> {
+    /** Initial filters object */
+    initialFilters?: T;
+    /** Current search parameters as a string */
+    searchParams?: URLSearchParams;
+    /** Function to set search parameters */
+    setSearchParams?: (params: URLSearchParams) => void;
+}
+export declare const useDataViewFilters: <T extends object>({ initialFilters, searchParams, setSearchParams, }: UseDataViewFiltersProps<T>) => {
+    filters: T;
+    onSetFilters: (newFilters: Partial<T>) => void;
+    onDeleteFilters: (filtersToDelete: Partial<T>) => void;
+    clearAllFilters: () => void;
+};

package/dist/cjs/Hooks/filters.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataViewFilters = void 0;
+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);
+            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]) => {
+                params.delete(key);
+                (Array.isArray(value) ? value : [value]).forEach((val) => value && params.append(key, val));
+            });
+            setSearchParams === null || setSearchParams === void 0 ? void 0 : setSearchParams(params);
+        }
+    }, [isUrlSyncEnabled, searchParams, setSearchParams]);
+    (0, react_1.useEffect)(() => {
+        isUrlSyncEnabled && setFilters(getInitialFilters());
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    const onSetFilters = (0, react_1.useCallback)((newFilters) => {
+        setFilters(prevFilters => {
+            const updatedFilters = Object.assign(Object.assign({}, prevFilters), newFilters);
+            isUrlSyncEnabled && updateSearchParams(updatedFilters);
+            return updatedFilters;
+        });
+    }, [isUrlSyncEnabled, updateSearchParams]);
+    // helper function to reset filters
+    const resetFilterValues = (0, react_1.useCallback)((filters) => Object.entries(filters).reduce((acc, [key, value]) => {
+        if (Array.isArray(value)) {
+            acc[key] = [];
+        }
+        else {
+            acc[key] = '';
+        }
+        return acc;
+    }, {}), []);
+    const onDeleteFilters = (0, react_1.useCallback)((filtersToDelete) => {
+        setFilters(prevFilters => {
+            const updatedFilters = Object.assign(Object.assign({}, prevFilters), resetFilterValues(filtersToDelete));
+            isUrlSyncEnabled && updateSearchParams(updatedFilters);
+            return updatedFilters;
+        });
+    }, [isUrlSyncEnabled, updateSearchParams, resetFilterValues]);
+    const clearAllFilters = (0, react_1.useCallback)(() => {
+        const clearedFilters = resetFilterValues(filters);
+        setFilters(clearedFilters);
+        isUrlSyncEnabled && updateSearchParams(clearedFilters);
+    }, [filters, isUrlSyncEnabled, updateSearchParams, resetFilterValues]);
+    return {
+        filters,
+        onSetFilters,
+        onDeleteFilters,
+        clearAllFilters,
+    };
+};
+exports.useDataViewFilters = useDataViewFilters;

package/dist/cjs/Hooks/filters.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/cjs/Hooks/filters.test.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const filters_1 = require("./filters");
+describe('useDataViewFilters', () => {
+    const initialFilters = { search: 'test', tags: ['tag1', 'tag2'] };
+    it('should initialize with provided initial filters', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)({ initialFilters }));
+        expect(result.current.filters).toEqual(initialFilters);
+    });
+    it('should initialize with empty filters if no initialFilters provided', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)({}));
+        expect(result.current.filters).toEqual({});
+    });
+    it('should set filters correctly', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)({ initialFilters }));
+        const newFilters = { search: 'new search' };
+        (0, react_1.act)(() => result.current.onSetFilters(newFilters));
+        expect(result.current.filters).toEqual(Object.assign(Object.assign({}, initialFilters), newFilters));
+    });
+    it('should delete specific filters without removing keys', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)({ initialFilters }));
+        const filtersToDelete = { search: 'test' };
+        (0, react_1.act)(() => result.current.onDeleteFilters(filtersToDelete));
+        expect(result.current.filters).toEqual({ search: '', tags: ['tag1', 'tag2'] });
+    });
+    it('should clear all filters', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)({ initialFilters }));
+        (0, react_1.act)(() => result.current.clearAllFilters());
+        expect(result.current.filters).toEqual({ search: '', tags: [] });
+    });
+    it('should sync with URL search params if isUrlSyncEnabled', () => {
+        const searchParams = new URLSearchParams();
+        const setSearchParams = jest.fn();
+        const props = {
+            initialFilters,
+            searchParams,
+            setSearchParams,
+        };
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)(props));
+        (0, react_1.act)(() => result.current.onSetFilters({ search: 'new search' }));
+        expect(setSearchParams).toHaveBeenCalled();
+    });
+    it('should reset filters to default values when clearAllFilters is called', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)({ initialFilters }));
+        (0, react_1.act)(() => result.current.clearAllFilters());
+        expect(result.current.filters).toEqual({ search: '', tags: [] });
+    });
+});

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

@@ -1,2 +1,4 @@
 export * from './pagination';
 export * from './selection';
+export * from './filters';
+export * from './sort';

package/dist/cjs/Hooks/index.js

@@ -16,3 +16,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./pagination"), exports);
 __exportStar(require("./selection"), exports);
+__exportStar(require("./filters"), exports);
+__exportStar(require("./sort"), exports);

package/dist/cjs/Hooks/pagination.d.ts

@@ -12,6 +12,7 @@ export interface UseDataViewPaginationProps {
     /** Custom URL parameter name for per page */
     perPageParam?: string;
 }
+/** extends UseDataViewPaginationProps */
 export interface DataViewPaginationProps extends UseDataViewPaginationProps {
     /** Current page number */
     page: number;

package/dist/cjs/Hooks/selection.d.ts

@@ -4,7 +4,7 @@ export interface UseDataViewSelectionProps {
     /** Array of initially selected entries */
     initialSelected?: (any)[];
 }
-export declare const useDataViewSelection: ({ matchOption, initialSelected }: UseDataViewSelectionProps) => {
+export declare const useDataViewSelection: (props?: UseDataViewSelectionProps) => {
     selected: any[];
     onSelect: (isSelecting: boolean, items?: any[] | any) => void;
     isSelected: (item: any) => boolean;

package/dist/cjs/Hooks/selection.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDataViewSelection = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
-const useDataViewSelection = ({ matchOption, initialSelected = [] }) => {
-    const [selected, setSelected] = (0, react_1.useState)(initialSelected);
+const useDataViewSelection = (props) => {
+    var _a;
+    const [selected, setSelected] = (0, react_1.useState)((_a = props === null || props === void 0 ? void 0 : props.initialSelected) !== null && _a !== void 0 ? _a : []);
+    const matchOption = (props === null || props === void 0 ? void 0 : props.matchOption) ? props.matchOption : (option, another) => (option === another);
     const onSelect = (isSelecting, items) => {
         isSelecting && items ?
             setSelected(prev => {

package/dist/cjs/Hooks/sort.d.ts

@@ -0,0 +1,32 @@
+import { ISortBy } from "@patternfly/react-table";
+export declare enum DataViewSortParams {
+    SORT_BY = "sortBy",
+    DIRECTION = "direction"
+}
+export interface DataViewSortConfig {
+    /** Attribute to sort the entries by */
+    sortBy: string | undefined;
+    /** Sort direction */
+    direction: ISortBy['direction'];
+}
+export interface UseDataViewSortProps {
+    /** Initial sort config */
+    initialSort?: DataViewSortConfig;
+    /** Current search parameters as a string */
+    searchParams?: URLSearchParams;
+    /** Function to set search parameters */
+    setSearchParams?: (params: URLSearchParams) => void;
+    /** Default direction */
+    defaultDirection?: ISortBy['direction'];
+    /** Sort by URL param name */
+    sortByParam?: string;
+    /** Direction URL param name */
+    directionParam?: string;
+}
+export declare const useDataViewSort: (props?: UseDataViewSortProps) => {
+    onSort: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newSortBy: string, newSortDirection: ISortBy["direction"]) => void;
+    /** Attribute to sort the entries by */
+    sortBy: string | undefined;
+    /** Sort direction */
+    direction: ISortBy["direction"];
+};

package/dist/cjs/Hooks/sort.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataViewSort = exports.DataViewSortParams = void 0;
+const react_1 = require("react");
+var DataViewSortParams;
+(function (DataViewSortParams) {
+    DataViewSortParams["SORT_BY"] = "sortBy";
+    DataViewSortParams["DIRECTION"] = "direction";
+})(DataViewSortParams || (exports.DataViewSortParams = DataViewSortParams = {}));
+;
+const validateDirection = (direction, defaultDirection) => (direction === 'asc' || direction === 'desc' ? direction : defaultDirection);
+;
+;
+const useDataViewSort = (props) => {
+    var _a;
+    const { initialSort, searchParams, setSearchParams, defaultDirection = 'asc', sortByParam = DataViewSortParams.SORT_BY, directionParam = DataViewSortParams.DIRECTION } = props !== null && props !== void 0 ? props : {};
+    const isUrlSyncEnabled = (0, react_1.useMemo)(() => searchParams && !!setSearchParams, [searchParams, setSearchParams]);
+    const [state, setState] = (0, react_1.useState)({
+        sortBy: (_a = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(sortByParam)) !== null && _a !== void 0 ? _a : initialSort === null || initialSort === void 0 ? void 0 : initialSort.sortBy,
+        direction: validateDirection(searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(directionParam), initialSort === null || initialSort === void 0 ? void 0 : initialSort.direction),
+    });
+    const updateSearchParams = (sortBy, direction) => {
+        if (isUrlSyncEnabled && sortBy) {
+            const params = new URLSearchParams(searchParams);
+            params.set(sortByParam, `${sortBy}`);
+            params.set(directionParam, `${direction}`);
+            setSearchParams === null || setSearchParams === void 0 ? void 0 : setSearchParams(params);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        state.sortBy && state.direction && updateSearchParams(state.sortBy, state.direction);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const currentSortBy = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(sortByParam)) || state.sortBy;
+        const currentDirection = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(directionParam)) || state.direction;
+        const validDirection = validateDirection(currentDirection, defaultDirection);
+        currentSortBy !== state.sortBy || validDirection !== state.direction && setState({ sortBy: currentSortBy, direction: validDirection });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchParams === null || searchParams === void 0 ? void 0 : searchParams.toString()]);
+    const onSort = (_event, newSortBy, newSortDirection) => {
+        setState({ sortBy: newSortBy, direction: newSortDirection });
+        updateSearchParams(newSortBy, newSortDirection);
+    };
+    return Object.assign(Object.assign({}, state), { onSort });
+};
+exports.useDataViewSort = useDataViewSort;

package/dist/cjs/Hooks/sort.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/cjs/Hooks/sort.test.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const sort_1 = require("./sort");
+describe('useDataViewSort', () => {
+    const initialSort = { sortBy: 'name', direction: 'asc' };
+    it('should initialize with provided initial sort config', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, sort_1.useDataViewSort)({ initialSort }));
+        expect(result.current).toEqual(expect.objectContaining(initialSort));
+    });
+    it('should initialize with empty sort config if no initialSort is provided', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, sort_1.useDataViewSort)());
+        expect(result.current).toEqual(expect.objectContaining({ sortBy: undefined, direction: 'asc' }));
+    });
+    it('should update sort state when onSort is called', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, sort_1.useDataViewSort)({ initialSort }));
+        (0, react_1.act)(() => {
+            result.current.onSort(undefined, 'age', 'desc');
+        });
+        expect(result.current).toEqual(expect.objectContaining({ sortBy: 'age', direction: 'desc' }));
+    });
+    it('should sync with URL search params if isUrlSyncEnabled', () => {
+        const searchParams = new URLSearchParams();
+        const setSearchParams = jest.fn();
+        const props = {
+            initialSort,
+            searchParams,
+            setSearchParams,
+        };
+        const { result } = (0, react_1.renderHook)(() => (0, sort_1.useDataViewSort)(props));
+        expect(setSearchParams).toHaveBeenCalledTimes(1);
+        expect(result.current).toEqual(expect.objectContaining(initialSort));
+    });
+    it('should validate direction and fallback to default direction if invalid direction is provided', () => {
+        const searchParams = new URLSearchParams();
+        searchParams.set(sort_1.DataViewSortParams.SORT_BY, 'name');
+        searchParams.set(sort_1.DataViewSortParams.DIRECTION, 'invalid-direction');
+        const { result } = (0, react_1.renderHook)(() => (0, sort_1.useDataViewSort)({ searchParams, defaultDirection: 'desc' }));
+        expect(result.current).toEqual(expect.objectContaining({ sortBy: 'name', direction: 'desc' }));
+    });
+    it('should update search params when URL sync is enabled and sort changes', () => {
+        const searchParams = new URLSearchParams();
+        const setSearchParams = jest.fn();
+        const props = {
+            initialSort,
+            searchParams,
+            setSearchParams,
+        };
+        const { result } = (0, react_1.renderHook)(() => (0, sort_1.useDataViewSort)(props));
+        (0, react_1.act)(() => {
+            expect(setSearchParams).toHaveBeenCalledTimes(1);
+            result.current.onSort(undefined, 'priority', 'desc');
+        });
+        expect(setSearchParams).toHaveBeenCalledTimes(2);
+        expect(result.current).toEqual(expect.objectContaining({ sortBy: 'priority', direction: 'desc' }));
+    });
+    it('should prioritize searchParams values', () => {
+        const searchParams = new URLSearchParams();
+        searchParams.set(sort_1.DataViewSortParams.SORT_BY, 'category');
+        searchParams.set(sort_1.DataViewSortParams.DIRECTION, 'desc');
+        const { result } = (0, react_1.renderHook)((props) => (0, sort_1.useDataViewSort)(props), { initialProps: { initialSort, searchParams } });
+        expect(result.current).toEqual(expect.objectContaining({
+            sortBy: 'category',
+            direction: 'desc',
+        }));
+    });
+});

package/dist/cjs/InternalContext/InternalContext.d.ts

@@ -14,6 +14,7 @@ export interface InternalContextProps {
     /** Currently active state */
     activeState?: DataViewState | string;
 }
+/** extends InternalContextProps */
 export interface InternalContextValue extends InternalContextProps {
     /** Flag indicating if data view is selectable (auto-calculated) */
     isSelectable: boolean;

package/dist/cjs/index.d.ts

@@ -3,6 +3,8 @@ export * from './InternalContext';
 export * from './Hooks';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
+export { default as DataViewTextFilter } from './DataViewTextFilter';
+export * from './DataViewTextFilter';
 export { default as DataViewTableTree } from './DataViewTableTree';
 export * from './DataViewTableTree';
 export { default as DataViewTableHead } from './DataViewTableHead';
@@ -13,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.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);
@@ -26,6 +26,9 @@ __exportStar(require("./Hooks"), exports);
 var DataViewToolbar_1 = require("./DataViewToolbar");
 Object.defineProperty(exports, "DataViewToolbar", { enumerable: true, get: function () { return __importDefault(DataViewToolbar_1).default; } });
 __exportStar(require("./DataViewToolbar"), exports);
+var DataViewTextFilter_1 = require("./DataViewTextFilter");
+Object.defineProperty(exports, "DataViewTextFilter", { enumerable: true, get: function () { return __importDefault(DataViewTextFilter_1).default; } });
+__exportStar(require("./DataViewTextFilter"), exports);
 var DataViewTableTree_1 = require("./DataViewTableTree");
 Object.defineProperty(exports, "DataViewTableTree", { enumerable: true, get: function () { return __importDefault(DataViewTableTree_1).default; } });
 __exportStar(require("./DataViewTableTree"), exports);
@@ -41,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/dynamic/DataViewFilters/package.json

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

package/dist/dynamic/DataViewTextFilter/package.json

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

package/dist/esm/DataView/DataView.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StackProps } from '@patternfly/react-core';
 import { DataViewSelection } from '../InternalContext';
 export declare const DataViewState: {
     readonly empty: "empty";
@@ -6,7 +7,8 @@ export declare const DataViewState: {
     readonly error: "error";
 };
 export type DataViewState = typeof DataViewState[keyof typeof DataViewState];
-export interface DataViewProps {
+/** extends StackProps */
+export interface DataViewProps extends StackProps {
     /** Content rendered inside the data view */
     children: React.ReactNode;
     /** Custom OUIA ID */

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 isToolbarLabel = (label) => typeof label === 'object' && 'key' in label;
+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, labels: 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 });
+        }), deleteLabel: (_, label) => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, value.filter(item => item !== (isToolbarLabel(label) ? label.key : label))), 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

@@ -0,0 +1,25 @@
+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 */
+    children: React.ReactNode;
+    /** Optional onChange callback shared across filters */
+    onChange?: (key: string, newValues: Partial<T>) => void;
+    /** Optional values shared across filters */
+    values?: T;
+    /** Icon for the toolbar toggle group */
+    toggleIcon?: ToolbarToggleGroupProps['toggleIcon'];
+    /** Breakpoint for the toolbar toggle group */
+    breakpoint?: ToolbarToggleGroupProps['breakpoint'];
+    /** Custom OUIA ID */
+    ouiaId?: string;
+}
+export declare const DataViewFilters: <T extends object>({ children, ouiaId, toggleIcon, breakpoint, onChange, values, ...props }: DataViewFiltersProps<T>) => React.JSX.Element;
+export default DataViewFilters;