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

package/dist/cjs/DataViewTableTree/DataViewTableTree.test.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const react_icons_1 = require("@patternfly/react-icons");
+const DataView_1 = require("../DataView");
+const DataViewTable_1 = require("../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 } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { selection: mockSelection },
+            react_1.default.createElement(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows, leafIcon: react_1.default.createElement(react_icons_1.LeafIcon, null), expandedIcon: react_1.default.createElement(react_icons_1.FolderOpenIcon, { "aria-hidden": true }), collapsedIcon: react_1.default.createElement(react_icons_1.FolderIcon, { "aria-hidden": true }) })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render tree table with an empty state', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { activeState: "empty" },
+            react_1.default.createElement(DataViewTable_1.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 } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { activeState: "error" },
+            react_1.default.createElement(DataViewTable_1.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 } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { activeState: "loading" },
+            react_1.default.createElement(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { loading: "Data is loading" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/cjs/DataViewTableTree/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var DataViewTableTree_1 = require("./DataViewTableTree");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DataViewTableTree_1).default; } });
+__exportStar(require("./DataViewTableTree"), exports);

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

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

package/dist/cjs/DataViewTextFilter/DataViewTextFilter.js

@@ -0,0 +1,26 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataViewTextFilter = void 0;
+const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const DataViewTextFilter = (_a) => {
+    var { filterId, title, value = '', onChange, onClear = () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), showToolbarItem, trimValue = true, ouiaId = 'DataViewTextFilter' } = _a, props = __rest(_a, ["filterId", "title", "value", "onChange", "onClear", "showToolbarItem", "trimValue", "ouiaId"]);
+    return (react_1.default.createElement(react_core_1.ToolbarFilter, { 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_1.default.createElement(react_core_1.SearchInput, Object.assign({ searchInputId: filterId, value: value, onChange: (e, inputValue) => onChange === null || onChange === void 0 ? void 0 : onChange(e, trimValue ? inputValue.trim() : inputValue), onClear: onClear, placeholder: `Filter by ${title}`, "aria-label": `${title !== null && title !== void 0 ? title : filterId} filter`, "data-ouia-component-id": `${ouiaId}-input` }, props))));
+};
+exports.DataViewTextFilter = DataViewTextFilter;
+exports.default = exports.DataViewTextFilter;

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

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

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const DataViewTextFilter_1 = __importDefault(require("./DataViewTextFilter"));
+const DataViewToolbar_1 = __importDefault(require("../DataViewToolbar"));
+describe('DataViewTextFilter component', () => {
+    const mockOnChange = jest.fn();
+    const defaultProps = {
+        filterId: 'test-filter',
+        title: 'Test Filter',
+        value: 'initial value',
+        onChange: mockOnChange,
+    };
+    it('should render correctly', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataViewToolbar_1.default, { filters: react_1.default.createElement(DataViewTextFilter_1.default, Object.assign({}, defaultProps)) }));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/cjs/DataViewTextFilter/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var DataViewTextFilter_1 = require("./DataViewTextFilter");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DataViewTextFilter_1).default; } });
+__exportStar(require("./DataViewTextFilter"), exports);

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

@@ -1,13 +1,23 @@
 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 toggle group */
+    toggleGroup?: 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/cjs/DataViewToolbar/DataViewToolbar.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -10,18 +33,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataViewToolbar = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const DataViewToolbar = (_a) => {
-    var { className, ouiaId = 'DataViewToolbar', bulkSelect, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "pagination", "children"]);
-    return (react_1.default.createElement(react_core_1.Toolbar, Object.assign({ ouiaId: ouiaId, className: className }, props),
+    var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "toggleGroup", "pagination", "filters", "customLabelGroupContent", "clearAllFilters", "children"]);
+    const defaultClearFilters = (0, react_1.useRef)(react_1.default.createElement(react_core_1.ToolbarItem, null,
+        react_1.default.createElement(react_core_1.Button, { ouiaId: `${ouiaId}-clear-all-filters`, variant: "link", onClick: clearAllFilters, isInline: true }, "Clear filters")));
+    return (react_1.default.createElement(react_core_1.Toolbar, Object.assign({ ouiaId: ouiaId, className: className, customLabelGroupContent: customLabelGroupContent !== null && customLabelGroupContent !== void 0 ? customLabelGroupContent : defaultClearFilters.current }, props),
         react_1.default.createElement(react_core_1.ToolbarContent, null,
             bulkSelect && (react_1.default.createElement(react_core_1.ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
+            filters && (react_1.default.createElement(react_core_1.ToolbarItem, null, filters)),
+            actions && (react_1.default.createElement(react_core_1.ToolbarItem, null, actions)),
+            toggleGroup && (react_1.default.createElement(react_core_1.ToolbarItem, null, toggleGroup)),
             pagination && (react_1.default.createElement(react_core_1.ToolbarItem, { variant: react_core_1.ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
             children)));
 };

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

@@ -0,0 +1,14 @@
+export interface UseDataViewFiltersProps<T extends object> {
+    /** Initial filters object */
+    initialFilters?: T;
+    /** Current search parameters as a string */
+    searchParams?: URLSearchParams;
+    /** Function to set search parameters */
+    setSearchParams?: (params: URLSearchParams) => void;
+}
+export declare const useDataViewFilters: <T extends object>({ initialFilters, searchParams, setSearchParams, }: UseDataViewFiltersProps<T>) => {
+    filters: T;
+    onSetFilters: (newFilters: Partial<T>) => void;
+    onDeleteFilters: (filtersToDelete: Partial<T>) => void;
+    clearAllFilters: () => void;
+};

package/dist/cjs/Hooks/filters.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataViewFilters = void 0;
+const react_1 = require("react");
+;
+const useDataViewFilters = ({ initialFilters = {}, searchParams, setSearchParams, }) => {
+    const isUrlSyncEnabled = (0, react_1.useMemo)(() => searchParams && !!setSearchParams, [searchParams, setSearchParams]);
+    const getInitialFilters = (0, react_1.useCallback)(() => isUrlSyncEnabled
+        ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
+            const isArrayFilter = Array.isArray(initialFilters[key]);
+            const urlValue = isArrayFilter ? searchParams === null || searchParams === void 0 ? void 0 : searchParams.getAll(key) : searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(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] = (0, react_1.useState)(getInitialFilters());
+    const updateSearchParams = (0, react_1.useCallback)((newFilters) => {
+        if (isUrlSyncEnabled) {
+            const params = new URLSearchParams(searchParams);
+            Object.entries(newFilters).forEach(([key, value]) => {
+                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]);
+    (0, react_1.useEffect)(() => {
+        isUrlSyncEnabled && setFilters(getInitialFilters());
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    const onSetFilters = (0, react_1.useCallback)((newFilters) => {
+        setFilters(prevFilters => {
+            const updatedFilters = Object.assign(Object.assign({}, prevFilters), newFilters);
+            isUrlSyncEnabled && updateSearchParams(updatedFilters);
+            return updatedFilters;
+        });
+    }, [isUrlSyncEnabled, updateSearchParams]);
+    // helper function to reset filters
+    const resetFilterValues = (0, react_1.useCallback)((filters) => Object.entries(filters).reduce((acc, [key, value]) => {
+        if (Array.isArray(value)) {
+            acc[key] = [];
+        }
+        else {
+            acc[key] = '';
+        }
+        return acc;
+    }, {}), []);
+    const onDeleteFilters = (0, react_1.useCallback)((filtersToDelete) => {
+        setFilters(prevFilters => {
+            const updatedFilters = Object.assign(Object.assign({}, prevFilters), resetFilterValues(filtersToDelete));
+            isUrlSyncEnabled && updateSearchParams(updatedFilters);
+            return updatedFilters;
+        });
+    }, [isUrlSyncEnabled, updateSearchParams, resetFilterValues]);
+    const clearAllFilters = (0, react_1.useCallback)(() => {
+        const clearedFilters = resetFilterValues(filters);
+        setFilters(clearedFilters);
+        isUrlSyncEnabled && updateSearchParams(clearedFilters);
+    }, [filters, isUrlSyncEnabled, updateSearchParams, resetFilterValues]);
+    return {
+        filters,
+        onSetFilters,
+        onDeleteFilters,
+        clearAllFilters,
+    };
+};
+exports.useDataViewFilters = useDataViewFilters;

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

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

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

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const filters_1 = require("./filters");
+describe('useDataViewFilters', () => {
+    const initialFilters = { search: 'test', tags: ['tag1', 'tag2'] };
+    it('should initialize with provided initial filters', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)({ initialFilters }));
+        expect(result.current.filters).toEqual(initialFilters);
+    });
+    it('should initialize with empty filters if no initialFilters provided', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)({}));
+        expect(result.current.filters).toEqual({});
+    });
+    it('should set filters correctly', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)({ initialFilters }));
+        const newFilters = { search: 'new search' };
+        (0, react_1.act)(() => result.current.onSetFilters(newFilters));
+        expect(result.current.filters).toEqual(Object.assign(Object.assign({}, initialFilters), newFilters));
+    });
+    it('should delete specific filters without removing keys', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)({ initialFilters }));
+        const filtersToDelete = { search: 'test' };
+        (0, react_1.act)(() => result.current.onDeleteFilters(filtersToDelete));
+        expect(result.current.filters).toEqual({ search: '', tags: ['tag1', 'tag2'] });
+    });
+    it('should clear all filters', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)({ initialFilters }));
+        (0, react_1.act)(() => result.current.clearAllFilters());
+        expect(result.current.filters).toEqual({ search: '', tags: [] });
+    });
+    it('should sync with URL search params if isUrlSyncEnabled', () => {
+        const searchParams = new URLSearchParams();
+        const setSearchParams = jest.fn();
+        const props = {
+            initialFilters,
+            searchParams,
+            setSearchParams,
+        };
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)(props));
+        (0, react_1.act)(() => result.current.onSetFilters({ search: 'new search' }));
+        expect(setSearchParams).toHaveBeenCalled();
+    });
+    it('should sync with URL search params with non array value', () => {
+        const searchParams = new URLSearchParams();
+        searchParams.set('test', 'foo');
+        const setSearchParams = jest.fn();
+        const props = {
+            initialFilters: { test: '' },
+            searchParams,
+            setSearchParams,
+        };
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)(props));
+        expect(result.current.filters).toEqual({ test: 'foo' });
+    });
+    it('should sync with URL search params with array value', () => {
+        const searchParams = new URLSearchParams();
+        searchParams.append('test', 'foo');
+        searchParams.append('test', 'bar');
+        const setSearchParams = jest.fn();
+        const props = {
+            initialFilters: { test: [] },
+            searchParams,
+            setSearchParams,
+        };
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)(props));
+        expect(result.current.filters).toEqual({ test: ['foo', 'bar'] });
+    });
+    it('should reset filters to default values when clearAllFilters is called', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, filters_1.useDataViewFilters)({ initialFilters }));
+        (0, react_1.act)(() => result.current.clearAllFilters());
+        expect(result.current.filters).toEqual({ search: '', tags: [] });
+    });
+});

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

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

package/dist/cjs/Hooks/index.js

@@ -16,3 +16,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./pagination"), exports);
 __exportStar(require("./selection"), exports);
+__exportStar(require("./filters"), exports);
+__exportStar(require("./sort"), exports);

package/dist/cjs/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/cjs/Hooks/pagination.js

@@ -1,13 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDataViewPagination = void 0;
+exports.useDataViewPagination = exports.PaginationParams = void 0;
 const react_1 = require("react");
-const useDataViewPagination = ({ page = 1, perPage }) => {
-    const [state, setState] = (0, react_1.useState)({ page, perPage });
+var PaginationParams;
+(function (PaginationParams) {
+    PaginationParams["PAGE"] = "page";
+    PaginationParams["PER_PAGE"] = "perPage";
+})(PaginationParams || (exports.PaginationParams = PaginationParams = {}));
+const useDataViewPagination = ({ page = 1, perPage, searchParams, setSearchParams, pageParam = PaginationParams.PAGE, perPageParam = PaginationParams.PER_PAGE, }) => {
+    const [state, setState] = (0, react_1.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);
+        }
+    };
+    (0, react_1.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
+    }, []);
+    (0, react_1.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/cjs/Hooks/pagination.test.js

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

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

@@ -5,10 +5,10 @@ exports.useDataViewSelection = void 0;
 const react_1 = require("react");
 const useDataViewSelection = (props) => {
     var _a;
-    const [selected, setSelected] = (0, react_1.useState)((_a = props.initialSelected) !== null && _a !== void 0 ? _a : []);
-    const matchOption = props.matchOption ? props.matchOption : (option, another) => (option === another);
+    const [selected, setSelected] = (0, react_1.useState)((_a = props === null || props === void 0 ? void 0 : props.initialSelected) !== null && _a !== void 0 ? _a : []);
+    const matchOption = (props === null || props === void 0 ? void 0 : props.matchOption) ? props.matchOption : (option, another) => (option === another);
     const onSelect = (isSelecting, items) => {
-        isSelecting ?
+        isSelecting && items ?
             setSelected(prev => {
                 const newSelectedItems = [...prev];
                 (Array.isArray(items) ? items : [items]).forEach(newItem => !prev.some(prevItem => matchOption(prevItem, newItem)) && newSelectedItems.push(newItem));
@@ -16,7 +16,7 @@ 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,