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

package/dist/esm/DataViewFilters/DataViewFilters.js

@@ -0,0 +1,58 @@
+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 handleClickOutside = (event) => {
+        var _a, _b;
+        return isAttributeMenuOpen &&
+            !((_a = attributeMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
+            !((_b = attributeToggleRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))
+            && setIsAttributeMenuOpen(false);
+    };
+    useEffect(() => {
+        window.addEventListener('click', handleClickOutside);
+        return () => {
+            window.removeEventListener('click', handleClickOutside);
+        };
+    }, [isAttributeMenuOpen]); // eslint-disable-line react-hooks/exhaustive-deps
+    const attributeToggle = (React.createElement(MenuToggle, { ref: attributeToggleRef, onClick: () => setIsAttributeMenuOpen(!isAttributeMenuOpen), isExpanded: isAttributeMenuOpen, icon: toggleIcon }, activeAttributeMenu));
+    const attributeMenu = (React.createElement(Menu, { ref: attributeMenuRef, onSelect: (_ev, itemId) => {
+            const selectedItem = filterItems.find(item => item.filterId === itemId);
+            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;
 };
 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;
 };
+/** 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, { key: ouiaId, "data-ouia-component-id": ouiaId, labels: value.length > 0 ? [{ key: title, node: value }] : [], deleteLabel: () => 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 labels */
+    customLabelGroupContent?: 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, customLabelGroupContent, clearAllFilters, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "filters", "customLabelGroupContent", "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, customLabelGroupContent: customLabelGroupContent !== null && customLabelGroupContent !== void 0 ? customLabelGroupContent : defaultClearFilters.current }, props),
         React.createElement(ToolbarContent, null,
             bulkSelect && (React.createElement(ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
             actions && (React.createElement(ToolbarItem, null, actions)),
+            filters && (React.createElement(ToolbarItem, null, 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,65 @@
+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);
+            const isArrayFilter = Array.isArray(initialFilters[key]);
+            // eslint-disable-next-line no-nested-ternary
+            loadedFilters[key] = urlValue
+                ? (isArrayFilter && !Array.isArray(urlValue) ? [urlValue] : urlValue)
+                : initialFilters[key];
+            return loadedFilters;
+        }, Object.assign({}, initialFilters))
+        : initialFilters, [isUrlSyncEnabled, initialFilters, searchParams]);
+    const [filters, setFilters] = useState(getInitialFilters());
+    const updateSearchParams = useCallback((newFilters) => {
+        if (isUrlSyncEnabled) {
+            const params = new URLSearchParams(searchParams);
+            Object.entries(newFilters).forEach(([key, value]) => {
+                params.delete(key);
+                (Array.isArray(value) ? value : [value]).forEach((val) => value && params.append(key, val));
+            });
+            setSearchParams === null || setSearchParams === void 0 ? void 0 : setSearchParams(params);
+        }
+    }, [isUrlSyncEnabled, searchParams, setSearchParams]);
+    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,4 @@
 export * from './pagination';
 export * from './selection';
+export * from './filters';
+export * from './sort';

package/dist/esm/Hooks/index.js

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

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

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

package/dist/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/Hooks/sort.d.ts

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

package/dist/esm/Hooks/sort.js

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

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

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