@patternfly/react-data-view 5.4.1 → 5.5.1

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ToolbarToggleGroupProps } from '@patternfly/react-core';
+/** 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;

package/dist/cjs/DataViewFilters/DataViewFilters.js

@@ -0,0 +1,70 @@
+"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)
+        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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataViewFilters = void 0;
+const react_1 = __importStar(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+;
+const DataViewFilters = (_a) => {
+    var { children, ouiaId = 'DataViewFilters', toggleIcon = react_1.default.createElement(react_icons_1.FilterIcon, null), breakpoint = 'xl', onChange, values } = _a, props = __rest(_a, ["children", "ouiaId", "toggleIcon", "breakpoint", "onChange", "values"]);
+    const [activeAttributeMenu, setActiveAttributeMenu] = (0, react_1.useState)('');
+    const [isAttributeMenuOpen, setIsAttributeMenuOpen] = (0, react_1.useState)(false);
+    const attributeToggleRef = (0, react_1.useRef)(null);
+    const attributeMenuRef = (0, react_1.useRef)(null);
+    const attributeContainerRef = (0, react_1.useRef)(null);
+    const childrenHash = (0, react_1.useMemo)(() => JSON.stringify(react_1.default.Children.map(children, (child) => react_1.default.isValidElement(child) ? { type: child.type, key: child.key, props: child.props } : child)), [children]);
+    const filterItems = (0, react_1.useMemo)(() => react_1.default.Children.toArray(children)
+        .map(child => react_1.default.isValidElement(child) ? { filterId: String(child.props.filterId), title: String(child.props.title) } : undefined).filter((item) => !!item), [childrenHash]); // eslint-disable-line react-hooks/exhaustive-deps
+    (0, react_1.useEffect)(() => {
+        filterItems.length > 0 && setActiveAttributeMenu(filterItems[0].title);
+    }, [filterItems]);
+    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);
+            selectedItem && setActiveAttributeMenu(selectedItem.title);
+            setIsAttributeMenuOpen(false);
+        } },
+        react_1.default.createElement(react_core_1.MenuContent, null,
+            react_1.default.createElement(react_core_1.MenuList, null, filterItems.map(item => (react_1.default.createElement(react_core_1.MenuItem, { key: item.filterId, itemId: item.filterId }, item.title)))))));
+    return (react_1.default.createElement(react_core_1.ToolbarToggleGroup, Object.assign({ "data-ouia-component-id": ouiaId, toggleIcon: toggleIcon, breakpoint: breakpoint }, props),
+        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)))));
+};
+exports.DataViewFilters = DataViewFilters;
+exports.default = exports.DataViewFilters;

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

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

package/dist/cjs/DataViewFilters/DataViewFilters.test.js

@@ -0,0 +1,19 @@
+"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 DataViewFilters_1 = __importDefault(require("./DataViewFilters"));
+const DataViewToolbar_1 = __importDefault(require("../DataViewToolbar"));
+const DataViewTextFilter_1 = __importDefault(require("../DataViewTextFilter"));
+describe('DataViewFilters component', () => {
+    const mockOnChange = jest.fn();
+    it('should render correctly', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataViewToolbar_1.default, { filters: react_1.default.createElement(DataViewFilters_1.default, { onChange: mockOnChange, values: {} },
+                react_1.default.createElement(DataViewTextFilter_1.default, { filterId: "one", title: "One" }),
+                react_1.default.createElement(DataViewTextFilter_1.default, { filterId: "two", title: "Two" })) }));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/cjs/DataViewFilters/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 DataViewFilters_1 = require("./DataViewFilters");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DataViewFilters_1).default; } });
+__exportStar(require("./DataViewFilters"), exports);

package/dist/cjs/DataViewTable/DataViewTable.d.ts

@@ -3,7 +3,9 @@ import { TdProps, ThProps, TrProps } from '@patternfly/react-table';
 import { DataViewTableTreeProps } from '../DataViewTableTree';
 import { DataViewTableBasicProps } from '../DataViewTableBasic';
 export type DataViewTh = ReactNode | {
+    /** Table head cell node */
     cell: ReactNode;
+    /** Props passed to Th */
     props?: ThProps;
 };
 export declare const isDataViewThObject: (value: DataViewTh) => value is {
@@ -11,12 +13,17 @@ export declare const isDataViewThObject: (value: DataViewTh) => value is {
     props?: ThProps | undefined;
 };
 export interface DataViewTrObject {
+    /** Array of rows */
     row: DataViewTd[];
+    /** Unique identifier of a row */
     id?: string;
+    /** Props passed to Tr */
     props?: TrProps;
 }
 export type DataViewTd = ReactNode | {
+    /** Table body cell node */
     cell: ReactNode;
+    /** Props passed to Td */
     props?: TdProps;
 };
 export type DataViewTr = DataViewTd[] | DataViewTrObject;
@@ -28,6 +35,7 @@ export declare const isDataViewTrObject: (value: DataViewTr) => value is {
     row: DataViewTd[];
     id?: string | undefined;
 };
+/** extends DataViewTrObject */
 export interface DataViewTrTree extends DataViewTrObject {
     id: string;
     children?: DataViewTrTree[];

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { TableProps } from '@patternfly/react-table';
 import { DataViewTh, DataViewTr } from '../DataViewTable';
 import { DataViewState } from '../DataView/DataView';
+/** extends TableProps */
 export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | 'rows'> {
     /** Columns definition */
     columns: DataViewTh[];

package/dist/cjs/DataViewTableHead/DataViewTableHead.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TheadProps } from '@patternfly/react-table';
 import { DataViewTh } from '../DataViewTable';
+/** extends TheadProps */
 export interface DataViewTableHeadProps extends TheadProps {
     /** Indicates whether table is a tree */
     isTreeTable?: boolean;

package/dist/cjs/DataViewTableTree/DataViewTableTree.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { TableProps } from '@patternfly/react-table';
 import { DataViewTh, DataViewTrTree } from '../DataViewTable';
 import { DataViewState } from '../DataView/DataView';
+/** extends TableProps */
 export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'rows'> {
     /** Columns definition */
     columns: DataViewTh[];

package/dist/cjs/DataViewTableTree/DataViewTableTree.js

@@ -40,19 +40,31 @@ const react_table_1 = require("@patternfly/react-table");
 const InternalContext_1 = require("../InternalContext");
 const DataViewTableHead_1 = require("../DataViewTableHead");
 const DataViewTable_1 = require("../DataViewTable");
-const getDescendants = (node) => (!node.children || !node.children.length) ? [node] : node.children.flatMap(getDescendants);
-const isNodeChecked = (node, isSelected) => {
-    let allSelected = true;
-    let someSelected = false;
-    for (const descendant of getDescendants(node)) {
-        const selected = !!(isSelected === null || isSelected === void 0 ? void 0 : isSelected(descendant));
-        someSelected || (someSelected = selected);
-        allSelected && (allSelected = selected);
-        if (!allSelected && someSelected) {
-            return null;
+const getNodesAffectedBySelection = (allRows, node, isChecking, isSelected) => {
+    const getDescendants = (node) => node.children ? node.children.flatMap(getDescendants).concat(node) : [node];
+    const findParent = (child, rows) => {
+        var _a;
+        return (_a = rows.find(row => { var _a; return (_a = row.children) === null || _a === void 0 ? void 0 : _a.some(c => c === child); })) !== null && _a !== void 0 ? _a : rows.flatMap(row => { var _a; return (_a = row.children) !== null && _a !== void 0 ? _a : []; }).map(c => findParent(child, [c])).find(p => p);
+    };
+    const getAncestors = (node) => {
+        const ancestors = [];
+        let parent = findParent(node, allRows);
+        while (parent) {
+            ancestors.push(parent);
+            parent = findParent(parent, allRows);
         }
-    }
-    return allSelected;
+        return ancestors;
+    };
+    const affectedNodes = new Set([node, ...getDescendants(node)]);
+    getAncestors(node).forEach(ancestor => {
+        var _a, _b;
+        const allChildrenSelected = (_a = ancestor.children) === null || _a === void 0 ? void 0 : _a.every(child => (isSelected === null || isSelected === void 0 ? void 0 : isSelected(child)) || affectedNodes.has(child));
+        const anyChildAffected = (_b = ancestor.children) === null || _b === void 0 ? void 0 : _b.some(child => affectedNodes.has(child) || child.id === node.id);
+        if (isChecking ? !(isSelected === null || isSelected === void 0 ? void 0 : isSelected(ancestor)) && allChildrenSelected : (isSelected === null || isSelected === void 0 ? void 0 : isSelected(ancestor)) && anyChildAffected) {
+            affectedNodes.add(ancestor);
+        }
+    });
+    return Array.from(affectedNodes);
 };
 const DataViewTableTree = (_a) => {
     var { columns, rows, headStates, bodyStates, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "headStates", "bodyStates", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
@@ -70,7 +82,7 @@ const DataViewTableTree = (_a) => {
             }
             const isExpanded = expandedNodeIds.includes(node.id);
             const isDetailsExpanded = expandedDetailsNodeNames.includes(node.id);
-            const isChecked = isSelected && isNodeChecked(node, isSelected);
+            const isChecked = isSelected === null || isSelected === void 0 ? void 0 : isSelected(node);
             let icon = leafIcon;
             if (node.children) {
                 icon = isExpanded ? expandedIcon : collapsedIcon;
@@ -84,7 +96,7 @@ const DataViewTableTree = (_a) => {
                     const otherDetailsExpandedNodeIds = prevDetailsExpanded.filter(id => id !== node.id);
                     return isDetailsExpanded ? otherDetailsExpandedNodeIds : [...otherDetailsExpandedNodeIds, node.id];
                 }),
-                onCheckChange: ((isSelectDisabled === null || isSelectDisabled === void 0 ? void 0 : isSelectDisabled(node)) || !onSelect) ? undefined : (_event, isChecking) => onSelect === null || onSelect === void 0 ? void 0 : onSelect(isChecking, getDescendants(node)),
+                onCheckChange: ((isSelectDisabled === null || isSelectDisabled === void 0 ? void 0 : isSelectDisabled(node)) || !onSelect) ? undefined : (_event, isChecking) => onSelect === null || onSelect === void 0 ? void 0 : onSelect(isChecking, getNodesAffectedBySelection(rows, node, isChecking, isSelected)),
                 rowIndex,
                 props: {
                     isExpanded,

package/dist/cjs/DataViewTextFilter/DataViewTextFilter.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SearchInputProps, ToolbarFilterProps } from '@patternfly/react-core';
+/** extends SearchInputProps */
+export interface DataViewTextFilterProps extends SearchInputProps {
+    /** Unique key for the filter attribute */
+    filterId: string;
+    /** Current filter value */
+    value?: string;
+    /** Filter title displayed in the toolbar */
+    title: string;
+    /** Callback for when the input value changes */
+    onChange?: (event: React.FormEvent<HTMLInputElement> | undefined, value: string) => void;
+    /** Controls visibility of the filter in the toolbar */
+    showToolbarItem?: ToolbarFilterProps['showToolbarItem'];
+    /** Trims input value on change */
+    trimValue?: boolean;
+    /** Custom OUIA ID */
+    ouiaId?: string;
+}
+export declare const DataViewTextFilter: React.FC<DataViewTextFilterProps>;
+export default DataViewTextFilter;

package/dist/cjs/DataViewTextFilter/DataViewTextFilter.js

@@ -0,0 +1,26 @@
+"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.DataViewTextFilter = void 0;
+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 },
+        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;
+exports.default = exports.DataViewTextFilter;

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

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

package/dist/cjs/DataViewTextFilter/DataViewTextFilter.test.js

@@ -0,0 +1,22 @@
+"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 DataViewTextFilter_1 = __importDefault(require("./DataViewTextFilter"));
+const DataViewToolbar_1 = __importDefault(require("../DataViewToolbar"));
+describe('DataViewTextFilter component', () => {
+    const mockOnChange = jest.fn();
+    const defaultProps = {
+        filterId: 'test-filter',
+        title: 'Test Filter',
+        value: 'initial value',
+        onChange: mockOnChange,
+    };
+    it('should render correctly', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataViewToolbar_1.default, { filters: react_1.default.createElement(DataViewTextFilter_1.default, Object.assign({}, defaultProps)) }));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/cjs/DataViewTextFilter/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 DataViewTextFilter_1 = require("./DataViewTextFilter");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DataViewTextFilter_1).default; } });
+__exportStar(require("./DataViewTextFilter"), exports);

package/dist/cjs/DataViewToolbar/DataViewToolbar.d.ts

@@ -1,15 +1,21 @@
 import React, { PropsWithChildren } from 'react';
-export interface DataViewToolbarProps extends PropsWithChildren {
+import { ToolbarProps } from '@patternfly/react-core';
+/** extends ToolbarProps */
+export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProps>, 'ref'> {
     /** Toolbar className */
     className?: string;
     /** Custom OUIA ID */
     ouiaId?: string;
-    /** React component to display bulk select */
+    /** React node to display bulk select */
     bulkSelect?: React.ReactNode;
-    /** React component to display pagination */
+    /** React node to display pagination */
     pagination?: React.ReactNode;
-    /** React component to display actions */
+    /** React node to display actions */
     actions?: React.ReactNode;
+    /** React node to display filters */
+    filters?: React.ReactNode;
+    /** React node to display custom filter chips */
+    customChipGroupContent?: React.ReactNode;
 }
 export declare const DataViewToolbar: React.FC<DataViewToolbarProps>;
 export default DataViewToolbar;

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, customChipGroupContent, clearAllFilters, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "filters", "customChipGroupContent", "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, customChipGroupContent: customChipGroupContent !== null && customChipGroupContent !== void 0 ? customChipGroupContent : 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, { variant: react_core_1.ToolbarItemVariant['overflow-menu'] }, actions)),
+            filters && (react_1.default.createElement(react_core_1.ToolbarItem, { variant: react_core_1.ToolbarItemVariant['search-filter'] }, 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,70 @@
+"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);
+        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 [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);
+                }
+            });
+            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,3 @@
 export * from './pagination';
 export * from './selection';
+export * from './filters';

package/dist/cjs/Hooks/index.js

@@ -16,3 +16,4 @@ 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);

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

@@ -16,6 +16,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;