@patternfly/react-data-view 5.4.1 → 5.5.1

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/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';

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.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);

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/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/esm/DataViewFilters/DataViewFilters.js

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

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

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

package/dist/esm/DataViewFilters/DataViewFilters.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DataViewFilters from './DataViewFilters';
+import DataViewToolbar from '../DataViewToolbar';
+import DataViewTextFilter from '../DataViewTextFilter';
+describe('DataViewFilters component', () => {
+    const mockOnChange = jest.fn();
+    it('should render correctly', () => {
+        const { container } = render(React.createElement(DataViewToolbar, { filters: React.createElement(DataViewFilters, { onChange: mockOnChange, values: {} },
+                React.createElement(DataViewTextFilter, { filterId: "one", title: "One" }),
+                React.createElement(DataViewTextFilter, { filterId: "two", title: "Two" })) }));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/esm/DataViewFilters/index.js

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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/DataViewTableTree/DataViewTableTree.js

@@ -14,19 +14,31 @@ import { Table, Tbody, Td, TreeRowWrapper, } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
 import { DataViewTableHead } from '../DataViewTableHead';
 import { isDataViewTdObject } from '../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);
 };
 export 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"]);
@@ -44,7 +56,7 @@ export 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;
@@ -58,7 +70,7 @@ export 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/esm/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/esm/DataViewTextFilter/DataViewTextFilter.js

@@ -0,0 +1,19 @@
+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 { 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 },
+        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/DataViewTextFilter/DataViewTextFilter.test.d.ts

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

package/dist/esm/DataViewTextFilter/DataViewTextFilter.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DataViewTextFilter from './DataViewTextFilter';
+import DataViewToolbar from '../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 } = render(React.createElement(DataViewToolbar, { filters: React.createElement(DataViewTextFilter, Object.assign({}, defaultProps)) }));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/esm/DataViewTextFilter/index.js

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

package/dist/esm/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/esm/DataViewToolbar/DataViewToolbar.js

@@ -9,14 +9,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
-import { Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
+import React, { useRef } from 'react';
+import { Button, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
 export const DataViewToolbar = (_a) => {
-    var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "children"]);
-    return (React.createElement(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 = useRef(React.createElement(ToolbarItem, null,
+        React.createElement(Button, { ouiaId: `${ouiaId}-clear-all-filters`, variant: "link", onClick: clearAllFilters, isInline: true }, "Clear filters")));
+    return (React.createElement(Toolbar, Object.assign({ ouiaId: ouiaId, className: className, customChipGroupContent: customChipGroupContent !== null && customChipGroupContent !== void 0 ? customChipGroupContent : defaultClearFilters.current }, props),
         React.createElement(ToolbarContent, null,
             bulkSelect && (React.createElement(ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
             actions && (React.createElement(ToolbarItem, { variant: ToolbarItemVariant['overflow-menu'] }, actions)),
+            filters && (React.createElement(ToolbarItem, { variant: ToolbarItemVariant['search-filter'] }, filters)),
             pagination && (React.createElement(ToolbarItem, { variant: ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
             children)));
 };

package/dist/esm/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/esm/Hooks/filters.js

@@ -0,0 +1,66 @@
+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 [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);
+                }
+            });
+            setSearchParams === null || setSearchParams === void 0 ? void 0 : setSearchParams(params);
+        }
+    }, [isUrlSyncEnabled, searchParams, setSearchParams]);
+    useEffect(() => {
+        isUrlSyncEnabled && setFilters(getInitialFilters());
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    const onSetFilters = 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 = useCallback((filters) => Object.entries(filters).reduce((acc, [key, value]) => {
+        if (Array.isArray(value)) {
+            acc[key] = [];
+        }
+        else {
+            acc[key] = '';
+        }
+        return acc;
+    }, {}), []);
+    const onDeleteFilters = useCallback((filtersToDelete) => {
+        setFilters(prevFilters => {
+            const updatedFilters = Object.assign(Object.assign({}, prevFilters), resetFilterValues(filtersToDelete));
+            isUrlSyncEnabled && updateSearchParams(updatedFilters);
+            return updatedFilters;
+        });
+    }, [isUrlSyncEnabled, updateSearchParams, resetFilterValues]);
+    const clearAllFilters = useCallback(() => {
+        const clearedFilters = resetFilterValues(filters);
+        setFilters(clearedFilters);
+        isUrlSyncEnabled && updateSearchParams(clearedFilters);
+    }, [filters, isUrlSyncEnabled, updateSearchParams, resetFilterValues]);
+    return {
+        filters,
+        onSetFilters,
+        onDeleteFilters,
+        clearAllFilters,
+    };
+};

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

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

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

@@ -0,0 +1,48 @@
+import '@testing-library/jest-dom';
+import { renderHook, act } from '@testing-library/react';
+import { useDataViewFilters } from './filters';
+describe('useDataViewFilters', () => {
+    const initialFilters = { search: 'test', tags: ['tag1', 'tag2'] };
+    it('should initialize with provided initial filters', () => {
+        const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+        expect(result.current.filters).toEqual(initialFilters);
+    });
+    it('should initialize with empty filters if no initialFilters provided', () => {
+        const { result } = renderHook(() => useDataViewFilters({}));
+        expect(result.current.filters).toEqual({});
+    });
+    it('should set filters correctly', () => {
+        const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+        const newFilters = { search: 'new search' };
+        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 } = renderHook(() => useDataViewFilters({ initialFilters }));
+        const filtersToDelete = { search: 'test' };
+        act(() => result.current.onDeleteFilters(filtersToDelete));
+        expect(result.current.filters).toEqual({ search: '', tags: ['tag1', 'tag2'] });
+    });
+    it('should clear all filters', () => {
+        const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+        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 } = renderHook(() => useDataViewFilters(props));
+        act(() => result.current.onSetFilters({ search: 'new search' }));
+        expect(setSearchParams).toHaveBeenCalled();
+    });
+    it('should reset filters to default values when clearAllFilters is called', () => {
+        const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+        act(() => result.current.clearAllFilters());
+        expect(result.current.filters).toEqual({ search: '', tags: [] });
+    });
+});

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

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

package/dist/esm/Hooks/index.js

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

package/dist/esm/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/esm/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/esm/Hooks/selection.js

@@ -1,7 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from "react";
-export const useDataViewSelection = ({ matchOption, initialSelected = [] }) => {
-    const [selected, setSelected] = useState(initialSelected);
+export const useDataViewSelection = (props) => {
+    var _a;
+    const [selected, setSelected] = 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/esm/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/esm/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';

package/dist/esm/index.js

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

package/package.json

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