@patternfly/react-data-view 5.4.1 → 5.5.0

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/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.0",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -11,7 +11,7 @@ source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
 sortValue: 4
-propComponents: ['DataViewToolbar', 'DataViewTableBasic', 'DataViewTableTree']
+propComponents: ['DataViewToolbar', 'DataViewTableBasic', 'DataViewTableTree', 'DataViewTrTree', 'DataViewTrObject']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md
 ---
 import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
@@ -26,7 +26,7 @@ import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynami
 
 The **data view toolbar** component renders a default opinionated data view toolbar above or below the data section. 
 
-Data view toolbar can contain a `pagination`, `bulkSelect`, `actions` or other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
+Data view toolbar can contain a `pagination`, `bulkSelect`, `filters`, `actions` or other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
 
 ### Basic toolbar example
 

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

@@ -0,0 +1,92 @@
+import React, { useMemo } from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { BrowserRouter, useSearchParams } from 'react-router-dom';
+import { useDataViewFilters, useDataViewPagination } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
+import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
+
+const perPageOptions = [
+  { title: '5', value: 5 },
+  { title: '10', value: 10 }
+];
+
+interface Repository {
+  name: string;
+  branch: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+interface RepositoryFilters {
+  name: string,
+  branch: string
+}
+
+const repositories: Repository[] = [
+  { name: 'Repository one', branch: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branch: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branch: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branch: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branch: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branch: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+const columns = [ 'Name', 'Branch', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'LayoutExample';
+
+const MyTable: React.FunctionComponent = () => { 
+  const [ searchParams, setSearchParams ] = useSearchParams();
+  const pagination = useDataViewPagination({ perPage: 5 });
+  const { page, perPage } = pagination;
+  const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<RepositoryFilters>({ initialFilters: { name: '', branch: '' }, searchParams, setSearchParams });
+
+  const pageRows = useMemo(() => repositories
+    .filter(item => (!filters.name || item.name?.toLocaleLowerCase().includes(filters.name?.toLocaleLowerCase())) && (!filters.branch || item.branch?.toLocaleLowerCase().includes(filters.branch?.toLocaleLowerCase())))
+    .slice((page - 1) * perPage, ((page - 1) * perPage) + perPage)
+    .map(item => Object.values(item)), [ page, perPage, filters ]);
+
+  return (
+    <DataView>
+      <DataViewToolbar
+        ouiaId='LayoutExampleHeader'
+        clearAllFilters = {clearAllFilters}
+        pagination={
+          <Pagination 
+            perPageOptions={perPageOptions} 
+            itemCount={repositories.length} 
+            {...pagination} 
+          />
+        }
+        filters={ 
+          <DataViewFilters onChange={(_e, values) => onSetFilters(values)} values={filters}>
+            <DataViewTextFilter filterId="name" title='Name' placeholder='Filter by name' />
+            <DataViewTextFilter filterId="branch" title='Branch' placeholder='Filter by branch' />
+          </DataViewFilters>
+        }
+      />
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={pageRows} />
+      <DataViewToolbar
+        ouiaId='LayoutExampleFooter'
+        pagination={
+          <Pagination 
+            isCompact  
+            perPageOptions={perPageOptions} 
+            itemCount={repositories.length} 
+            {...pagination} 
+          />
+        } 
+      />
+    </DataView>
+  );
+}
+
+export const BasicExample: React.FunctionComponent = () => (
+  <BrowserRouter>
+    <MyTable/>
+  </BrowserRouter>
+)