@patternfly/react-data-view 6.0.0-prerelease.1 → 6.1.0

package/dist/esm/DataViewTableTree/DataViewTableTree.js

@@ -0,0 +1,117 @@
+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 } from 'react';
+import { Table, Tbody, Td, TreeRowWrapper, } from '@patternfly/react-table';
+import { useInternalContext } from '../InternalContext';
+import { DataViewTableHead } from '../DataViewTableHead';
+import { isDataViewTdObject } from '../DataViewTable';
+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 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"]);
+    const { selection, activeState } = useInternalContext();
+    const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
+    const [expandedNodeIds, setExpandedNodeIds] = React.useState([]);
+    const [expandedDetailsNodeNames, setExpandedDetailsNodeIds] = React.useState([]);
+    const activeHeadState = useMemo(() => activeState ? headStates === null || headStates === void 0 ? void 0 : headStates[activeState] : undefined, [activeState, headStates]);
+    const activeBodyState = useMemo(() => activeState ? bodyStates === null || bodyStates === void 0 ? void 0 : bodyStates[activeState] : undefined, [activeState, bodyStates]);
+    const nodes = useMemo(() => {
+        const renderRows = ([node, ...remainingNodes], level = 1, posinset = 1, rowIndex = 0, isHidden = false) => {
+            var _a, _b, _c, _d;
+            if (!node) {
+                return [];
+            }
+            const isExpanded = expandedNodeIds.includes(node.id);
+            const isDetailsExpanded = expandedDetailsNodeNames.includes(node.id);
+            const isChecked = isSelected === null || isSelected === void 0 ? void 0 : isSelected(node);
+            let icon = leafIcon;
+            if (node.children) {
+                icon = isExpanded ? expandedIcon : collapsedIcon;
+            }
+            const treeRow = {
+                onCollapse: () => setExpandedNodeIds(prevExpanded => {
+                    const otherExpandedNodeIds = prevExpanded.filter(id => id !== node.id);
+                    return isExpanded ? otherExpandedNodeIds : [...otherExpandedNodeIds, node.id];
+                }),
+                onToggleRowDetails: () => setExpandedDetailsNodeIds(prevDetailsExpanded => {
+                    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, getNodesAffectedBySelection(rows, node, isChecking, isSelected)),
+                rowIndex,
+                props: {
+                    isExpanded,
+                    isDetailsExpanded,
+                    isHidden,
+                    'aria-level': level,
+                    'aria-posinset': posinset,
+                    'aria-setsize': (_b = (_a = node.children) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0,
+                    isChecked,
+                    checkboxId: `checkbox_id_${(_c = node.id) === null || _c === void 0 ? void 0 : _c.toLowerCase().replace(/\s+/g, '_')}`,
+                    icon,
+                },
+            };
+            const childRows = ((_d = node.children) === null || _d === void 0 ? void 0 : _d.length)
+                ? renderRows(node.children, level + 1, 1, rowIndex + 1, !isExpanded || isHidden)
+                : [];
+            return [
+                React.createElement(TreeRowWrapper, { key: node.id, row: { props: treeRow.props }, ouiaId: `${ouiaId}-tr-${rowIndex}` }, node.row.map((cell, colIndex) => {
+                    var _a;
+                    const cellIsObject = isDataViewTdObject(cell);
+                    return (React.createElement(Td, Object.assign({ key: colIndex, treeRow: colIndex === 0 ? treeRow : undefined }, (cellIsObject && ((_a = cell === null || cell === void 0 ? void 0 : cell.props) !== null && _a !== void 0 ? _a : {})), { "data-ouia-component-id": `${ouiaId}-td-${rowIndex}-${colIndex}` }), cellIsObject ? cell.cell : cell));
+                })),
+                ...childRows,
+                ...renderRows(remainingNodes, level, posinset + 1, rowIndex + 1 + childRows.length, isHidden),
+            ];
+        };
+        return renderRows(rows);
+    }, [
+        rows,
+        expandedNodeIds,
+        expandedDetailsNodeNames,
+        leafIcon,
+        expandedIcon,
+        collapsedIcon,
+        isSelected,
+        onSelect,
+        isSelectDisabled,
+        ouiaId
+    ]);
+    return (React.createElement(Table, Object.assign({ isTreeTable: true, "aria-label": "Data table", ouiaId: ouiaId }, props),
+        activeHeadState || React.createElement(DataViewTableHead, { isTreeTable: true, columns: columns, ouiaId: ouiaId }),
+        activeBodyState || React.createElement(Tbody, null, nodes)));
+};
+export default DataViewTableTree;

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

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

package/dist/esm/DataViewTableTree/DataViewTableTree.test.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { FolderIcon, FolderOpenIcon, LeafIcon } from '@patternfly/react-icons';
+import { DataView } from '../DataView';
+import { DataViewTable } from '../DataViewTable';
+const repositories = [
+    {
+        name: 'Repository one',
+        branches: 'Branch one',
+        prs: 'Pull request one',
+        workspaces: 'Workspace one',
+        lastCommit: 'Timestamp one',
+        children: [
+            {
+                name: 'Repository two',
+                branches: 'Branch two',
+                prs: 'Pull request two',
+                workspaces: 'Workspace two',
+                lastCommit: 'Timestamp two',
+            },
+            {
+                name: 'Repository three',
+                branches: 'Branch three',
+                prs: 'Pull request three',
+                workspaces: 'Workspace three',
+                lastCommit: 'Timestamp three',
+            },
+        ],
+    },
+    {
+        name: 'Repository four',
+        branches: 'Branch four',
+        prs: 'Pull request four',
+        workspaces: 'Workspace four',
+        lastCommit: 'Timestamp four',
+        children: [
+            {
+                name: 'Repository five',
+                branches: 'Branch five',
+                prs: 'Pull request five',
+                workspaces: 'Workspace five',
+                lastCommit: 'Timestamp five',
+            },
+        ],
+    },
+    {
+        name: 'Repository six',
+        branches: 'Branch six',
+        prs: 'Pull request six',
+        workspaces: 'Workspace six',
+        lastCommit: 'Timestamp six',
+    },
+];
+// Build rows for DataViewTable
+const buildRows = (repositories) => repositories.map((repo) => (Object.assign({ row: [repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit], id: repo.name }, (repo.children ? { children: buildRows(repo.children) } : {}))));
+const rows = buildRows(repositories);
+const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
+const ouiaId = 'TreeTableExample';
+describe('DataViewTableTree component', () => {
+    const mockSelection = {
+        onSelect: jest.fn(),
+        isSelected: jest.fn(),
+        isSelectDisabled: jest.fn(),
+    };
+    test('should render the tree table correctly', () => {
+        const { container } = render(React.createElement(DataView, { selection: mockSelection },
+            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows, leafIcon: React.createElement(LeafIcon, null), expandedIcon: React.createElement(FolderOpenIcon, { "aria-hidden": true }), collapsedIcon: React.createElement(FolderIcon, { "aria-hidden": true }) })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render tree table with an empty state', () => {
+        const { container } = render(React.createElement(DataView, { activeState: "empty" },
+            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { empty: "No data found" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render tree table with an error state', () => {
+        const { container } = render(React.createElement(DataView, { activeState: "error" },
+            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { error: "Some error" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render tree table with a loading state', () => {
+        const { container } = render(React.createElement(DataView, { activeState: "loading" },
+            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { loading: "Data is loading" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/esm/DataViewTableTree/index.js

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

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,13 +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 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,13 +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, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "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)),
+            filters && (React.createElement(ToolbarItem, null, filters)),
+            actions && (React.createElement(ToolbarItem, null, actions)),
             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

@@ -3,12 +3,25 @@ export interface UseDataViewPaginationProps {
     page?: number;
     /** Items per page */
     perPage: number;
+    /** Current search parameters as a string */
+    searchParams?: URLSearchParams;
+    /** Function to set search parameters */
+    setSearchParams?: (params: URLSearchParams) => void;
+    /** Custom URL parameter name for page */
+    pageParam?: string;
+    /** Custom URL parameter name for per page */
+    perPageParam?: string;
 }
+/** extends UseDataViewPaginationProps */
 export interface DataViewPaginationProps extends UseDataViewPaginationProps {
     /** Current page number */
     page: number;
 }
-export declare const useDataViewPagination: ({ page, perPage }: UseDataViewPaginationProps) => {
+export declare enum PaginationParams {
+    PAGE = "page",
+    PER_PAGE = "perPage"
+}
+export declare const useDataViewPagination: ({ page, perPage, searchParams, setSearchParams, pageParam, perPageParam, }: UseDataViewPaginationProps) => {
     onPerPageSelect: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPerPage: number) => void;
     onSetPage: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPage: number) => void;
     page: number;

package/dist/esm/Hooks/pagination.js

@@ -1,10 +1,42 @@
-import { useState } from "react";
-export const useDataViewPagination = ({ page = 1, perPage }) => {
-    const [state, setState] = useState({ page, perPage });
+import { useEffect, useState } from "react";
+export var PaginationParams;
+(function (PaginationParams) {
+    PaginationParams["PAGE"] = "page";
+    PaginationParams["PER_PAGE"] = "perPage";
+})(PaginationParams || (PaginationParams = {}));
+export const useDataViewPagination = ({ page = 1, perPage, searchParams, setSearchParams, pageParam = PaginationParams.PAGE, perPageParam = PaginationParams.PER_PAGE, }) => {
+    const [state, setState] = useState({
+        page: parseInt((searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(pageParam)) || `${page}`),
+        perPage: parseInt((searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(perPageParam)) || `${perPage}`),
+    });
+    const updateSearchParams = (page, perPage) => {
+        if (searchParams && setSearchParams) {
+            const params = new URLSearchParams(searchParams);
+            params.set(pageParam, `${page}`);
+            params.set(perPageParam, `${perPage}`);
+            setSearchParams(params);
+        }
+    };
+    useEffect(() => {
+        // Make sure search params are loaded or set if not present on mount
+        updateSearchParams(state.page, state.perPage);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        // Listen on URL params changes
+        const currentPage = parseInt((searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(pageParam)) || `${state.page}`);
+        const currentPerPage = parseInt((searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(perPageParam)) || `${state.perPage}`);
+        if (currentPage !== state.page || currentPerPage !== state.perPage) {
+            setState({ page: currentPage, perPage: currentPerPage });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchParams === null || searchParams === void 0 ? void 0 : searchParams.toString()]);
     const onPerPageSelect = (_event, newPerPage) => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { perPage: newPerPage })));
+        updateSearchParams(1, newPerPage);
+        setState({ perPage: newPerPage, page: 1 });
     };
     const onSetPage = (_event, newPage) => {
+        updateSearchParams(newPage, state.perPage);
         setState(prev => (Object.assign(Object.assign({}, prev), { page: newPage })));
     };
     return Object.assign(Object.assign({}, state), { onPerPageSelect,

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

@@ -40,7 +40,7 @@ describe('useDataViewPagination', () => {
         expect(result.current).toEqual({
             onPerPageSelect: expect.any(Function),
             onSetPage: expect.any(Function),
-            page: 3,
+            page: 1,
             perPage: 50
         });
     });

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

@@ -1,10 +1,10 @@
 export interface UseDataViewSelectionProps {
+    /** Function to compare items when checking if item is selected */
+    matchOption: (item: any, another: any) => boolean;
     /** Array of initially selected entries */
     initialSelected?: (any)[];
-    /** Function to compare items when checking if entry is selected */
-    matchOption?: (item: any, another: any) => boolean;
 }
-export declare const useDataViewSelection: (props: 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

@@ -2,10 +2,10 @@
 import { useState } from "react";
 export const useDataViewSelection = (props) => {
     var _a;
-    const [selected, setSelected] = useState((_a = props.initialSelected) !== null && _a !== void 0 ? _a : []);
-    const matchOption = props.matchOption ? props.matchOption : (option, another) => (option === another);
+    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 ?
+        isSelecting && items ?
             setSelected(prev => {
                 const newSelectedItems = [...prev];
                 (Array.isArray(items) ? items : [items]).forEach(newItem => !prev.some(prevItem => matchOption(prevItem, newItem)) && newSelectedItems.push(newItem));
@@ -13,7 +13,7 @@ export const useDataViewSelection = (props) => {
             })
             : setSelected(items ? prev => prev.filter(prevSelected => !(Array.isArray(items) ? items : [items]).some(item => matchOption(item, prevSelected))) : []);
     };
-    const isSelected = (item) => (props === null || props === void 0 ? void 0 : props.matchOption) ? Boolean(selected.find(selected => matchOption(selected, item))) : selected.includes(item);
+    const isSelected = (item) => Boolean(selected.find(selected => matchOption(selected, item)));
     return {
         selected,
         onSelect,