@patternfly/react-data-view 7.0.0-prerelease.1 → 7.0.0-prerelease.3

package/dist/cjs/DataViewTableHead/DataViewTableHead.js

@@ -0,0 +1,57 @@
+"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)
+        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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataViewTableHead = void 0;
+const react_1 = __importStar(require("react"));
+const react_table_1 = require("@patternfly/react-table");
+const InternalContext_1 = require("../InternalContext");
+const DataViewTable_1 = require("../DataViewTable");
+const DataViewTableHead = (_a) => {
+    var { isTreeTable = false, columns, ouiaId = 'DataViewTableHead' } = _a, props = __rest(_a, ["isTreeTable", "columns", "ouiaId"]);
+    const { selection } = (0, InternalContext_1.useInternalContext)();
+    const { onSelect, isSelected } = selection !== null && selection !== void 0 ? selection : {};
+    const cells = (0, react_1.useMemo)(() => [
+        onSelect && isSelected && !isTreeTable ? (react_1.default.createElement(react_table_1.Th, { key: "row-select", screenReaderText: 'Data selection table head cell' })) : null,
+        ...columns.map((column, index) => {
+            var _a;
+            return (react_1.default.createElement(react_table_1.Th, Object.assign({ key: index }, ((0, DataViewTable_1.isDataViewThObject)(column) && ((_a = column === null || column === void 0 ? void 0 : column.props) !== null && _a !== void 0 ? _a : {})), { "data-ouia-component-id": `${ouiaId}-th-${index}` }), (0, DataViewTable_1.isDataViewThObject)(column) ? column.cell : column));
+        })
+    ], [columns, ouiaId, onSelect, isSelected, isTreeTable]);
+    return (react_1.default.createElement(react_table_1.Thead, Object.assign({ "data-ouia-component-id": `${ouiaId}-thead` }, props),
+        react_1.default.createElement(react_table_1.Tr, { ouiaId: `${ouiaId}-tr-head` }, cells)));
+};
+exports.DataViewTableHead = DataViewTableHead;
+exports.default = exports.DataViewTableHead;

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

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

package/dist/cjs/DataViewTableHead/DataViewTableHead.test.js

@@ -0,0 +1,36 @@
+"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_table_1 = require("@patternfly/react-table");
+const DataViewTableHead_1 = require("./DataViewTableHead");
+const DataView_1 = require("../DataView");
+const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
+const ouiaId = 'HeaderExample';
+describe('DataViewTableHead component', () => {
+    const mockSelection = {
+        onSelect: jest.fn(),
+        isSelected: jest.fn(),
+        isSelectDisabled: jest.fn(),
+    };
+    test('should render correctly', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(react_table_1.Table, null,
+            react_1.default.createElement(DataViewTableHead_1.DataViewTableHead, { columns: columns, ouiaId: ouiaId })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render the tree table correctly when isTreeTable is true', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { selection: mockSelection },
+            react_1.default.createElement(react_table_1.Table, null,
+                react_1.default.createElement(DataViewTableHead_1.DataViewTableHead, { isTreeTable: true, columns: columns, ouiaId: ouiaId }))));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render selection column when selection is provided', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { selection: mockSelection },
+            react_1.default.createElement(react_table_1.Table, null,
+                react_1.default.createElement(DataViewTableHead_1.DataViewTableHead, { columns: columns, ouiaId: ouiaId }))));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/cjs/DataViewTableHead/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 DataViewTableHead_1 = require("./DataViewTableHead");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DataViewTableHead_1).default; } });
+__exportStar(require("./DataViewTableHead"), exports);

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { TableProps } from '@patternfly/react-table';
+import { DataViewTh, DataViewTrTree } from '../DataViewTable';
+import { DataViewState } from '../DataView/DataView';
+export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'rows'> {
+    /** Columns definition */
+    columns: DataViewTh[];
+    /** Current page rows */
+    rows: DataViewTrTree[];
+    /** Table head states to be displayed when active */
+    headStates?: Partial<Record<DataViewState | string, React.ReactNode>>;
+    /** Table body states to be displayed when active */
+    bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>;
+    /** Optional icon for the leaf rows */
+    leafIcon?: React.ReactNode;
+    /** Optional icon for the expanded parent rows */
+    expandedIcon?: React.ReactNode;
+    /** Optional icon for the collapsed parent rows */
+    collapsedIcon?: React.ReactNode;
+    /** Custom OUIA ID */
+    ouiaId?: string;
+}
+export declare const DataViewTableTree: React.FC<DataViewTableTreeProps>;
+export default DataViewTableTree;

package/dist/cjs/DataViewTableTree/DataViewTableTree.js

@@ -0,0 +1,132 @@
+"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)
+        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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataViewTableTree = void 0;
+const react_1 = __importStar(require("react"));
+const react_table_1 = require("@patternfly/react-table");
+const InternalContext_1 = require("../InternalContext");
+const DataViewTableHead_1 = require("../DataViewTableHead");
+const DataViewTable_1 = require("../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;
+        }
+    }
+    return allSelected;
+};
+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 } = (0, InternalContext_1.useInternalContext)();
+    const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
+    const [expandedNodeIds, setExpandedNodeIds] = react_1.default.useState([]);
+    const [expandedDetailsNodeNames, setExpandedDetailsNodeIds] = react_1.default.useState([]);
+    const activeHeadState = (0, react_1.useMemo)(() => activeState ? headStates === null || headStates === void 0 ? void 0 : headStates[activeState] : undefined, [activeState, headStates]);
+    const activeBodyState = (0, react_1.useMemo)(() => activeState ? bodyStates === null || bodyStates === void 0 ? void 0 : bodyStates[activeState] : undefined, [activeState, bodyStates]);
+    const nodes = (0, react_1.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 && isNodeChecked(node, isSelected);
+            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, getDescendants(node)),
+                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_1.default.createElement(react_table_1.TreeRowWrapper, { key: node.id, row: { props: treeRow.props }, ouiaId: `${ouiaId}-tr-${rowIndex}` }, node.row.map((cell, colIndex) => {
+                    var _a;
+                    const cellIsObject = (0, DataViewTable_1.isDataViewTdObject)(cell);
+                    return (react_1.default.createElement(react_table_1.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_1.default.createElement(react_table_1.Table, Object.assign({ isTreeTable: true, "aria-label": "Data table", ouiaId: ouiaId }, props),
+        activeHeadState || react_1.default.createElement(DataViewTableHead_1.DataViewTableHead, { isTreeTable: true, columns: columns, ouiaId: ouiaId }),
+        activeBodyState || react_1.default.createElement(react_table_1.Tbody, null, nodes)));
+};
+exports.DataViewTableTree = DataViewTableTree;
+exports.default = exports.DataViewTableTree;

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

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

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/DataViewToolbar/DataViewToolbar.d.ts

@@ -8,6 +8,8 @@ export interface DataViewToolbarProps extends PropsWithChildren {
     bulkSelect?: React.ReactNode;
     /** React component to display pagination */
     pagination?: React.ReactNode;
+    /** React component to display actions */
+    actions?: React.ReactNode;
 }
 export declare const DataViewToolbar: React.FC<DataViewToolbarProps>;
 export default DataViewToolbar;

package/dist/cjs/DataViewToolbar/DataViewToolbar.js

@@ -18,10 +18,11 @@ exports.DataViewToolbar = void 0;
 const react_1 = __importDefault(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"]);
+    var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "children"]);
     return (react_1.default.createElement(react_core_1.Toolbar, Object.assign({ ouiaId: ouiaId, className: className }, 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)),
+            actions && (react_1.default.createElement(react_core_1.ToolbarItem, null, actions)),
             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/pagination.d.ts

@@ -1,7 +1,3 @@
-export declare enum PaginationParams {
-    PAGE = "page",
-    PER_PAGE = "perPage"
-}
 export interface UseDataViewPaginationProps {
     /** Initial page */
     page?: number;
@@ -11,12 +7,20 @@ export interface UseDataViewPaginationProps {
     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;
 }
 export interface DataViewPaginationProps extends UseDataViewPaginationProps {
     /** Current page number */
     page: number;
 }
-export declare const useDataViewPagination: ({ page, perPage, searchParams, setSearchParams, }: 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

@@ -7,16 +7,16 @@ var PaginationParams;
     PaginationParams["PAGE"] = "page";
     PaginationParams["PER_PAGE"] = "perPage";
 })(PaginationParams || (exports.PaginationParams = PaginationParams = {}));
-const useDataViewPagination = ({ page = 1, perPage, searchParams, setSearchParams, }) => {
+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(PaginationParams.PAGE)) || `${page}`),
-        perPage: parseInt((searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(PaginationParams.PER_PAGE)) || `${perPage}`),
+        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(PaginationParams.PAGE, `${page}`);
-            params.set(PaginationParams.PER_PAGE, `${perPage}`);
+            params.set(pageParam, `${page}`);
+            params.set(perPageParam, `${perPage}`);
             setSearchParams(params);
         }
     };
@@ -27,13 +27,13 @@ const useDataViewPagination = ({ page = 1, perPage, searchParams, setSearchParam
     }, []);
     (0, react_1.useEffect)(() => {
         // Listen on URL params changes
-        const currentPage = parseInt((searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(PaginationParams.PAGE)) || `${state.page}`);
-        const currentPerPage = parseInt((searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(PaginationParams.PER_PAGE)) || `${state.perPage}`);
+        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]);
+    }, [searchParams === null || searchParams === void 0 ? void 0 : searchParams.toString()]);
     const onPerPageSelect = (_event, newPerPage) => {
         updateSearchParams(1, newPerPage);
         setState({ perPage: newPerPage, page: 1 });

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

@@ -46,56 +46,4 @@ describe('useDataViewPagination', () => {
             perPage: 50
         });
     });
-    it('should read pagination state from URL', () => {
-        const mockSearchParams = new URLSearchParams('page=2&perPage=10');
-        const { result } = (0, react_1.renderHook)(() => (0, pagination_1.useDataViewPagination)({
-            searchParams: mockSearchParams,
-            setSearchParams: jest.fn(),
-            page: 1,
-            perPage: 5,
-        }));
-        expect(result.current).toEqual({
-            onPerPageSelect: expect.any(Function),
-            onSetPage: expect.any(Function),
-            page: 2,
-            perPage: 10,
-        });
-    });
-    it('should set pagination state in URL when page changes', () => {
-        const mockSetSearchParams = jest.fn();
-        const { result } = (0, react_1.renderHook)(() => (0, pagination_1.useDataViewPagination)({
-            searchParams: new URLSearchParams(),
-            setSearchParams: mockSetSearchParams,
-            page: 1,
-            perPage: 5,
-        }));
-        expect(mockSetSearchParams).toHaveBeenNthCalledWith(1, new URLSearchParams('page=1&perPage=5'));
-        (0, react_1.act)(() => {
-            result.current.onSetPage(undefined, 4);
-        });
-        expect(mockSetSearchParams).toHaveBeenNthCalledWith(2, new URLSearchParams('page=4&perPage=5'));
-    });
-    it('should set pagination state in URL when perPage changes', () => {
-        const mockSetSearchParams = jest.fn();
-        const { result } = (0, react_1.renderHook)(() => (0, pagination_1.useDataViewPagination)({
-            searchParams: new URLSearchParams('page=2'),
-            setSearchParams: mockSetSearchParams,
-            page: 1,
-            perPage: 5,
-        }));
-        (0, react_1.act)(() => {
-            result.current.onPerPageSelect(undefined, 20);
-        });
-        expect(mockSetSearchParams).toHaveBeenCalledWith(new URLSearchParams('page=1&perPage=20'));
-    });
-    it('should initialize URL with default values if not present', () => {
-        const mockSetSearchParams = jest.fn();
-        (0, react_1.renderHook)(() => (0, pagination_1.useDataViewPagination)({
-            searchParams: new URLSearchParams(),
-            setSearchParams: mockSetSearchParams,
-            page: 1,
-            perPage: 5,
-        }));
-        expect(mockSetSearchParams).toHaveBeenCalledWith(new URLSearchParams('page=1&perPage=5'));
-    });
 });

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: ({ matchOption, initialSelected }: UseDataViewSelectionProps) => {
     selected: any[];
     onSelect: (isSelecting: boolean, items?: any[] | any) => void;
     isSelected: (item: any) => boolean;

package/dist/cjs/Hooks/selection.js

@@ -3,12 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDataViewSelection = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
-const useDataViewSelection = (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 useDataViewSelection = ({ matchOption, initialSelected = [] }) => {
+    const [selected, setSelected] = (0, react_1.useState)(initialSelected);
     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 +14,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,

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

@@ -14,7 +14,7 @@ const react_1 = require("@testing-library/react");
 const selection_1 = require("./selection");
 describe('useDataViewSelection', () => {
     it('should get initial state correctly - no initialSelected', () => {
-        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({}));
+        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ matchOption: (a, b) => a.id === b.id }));
         expect(result.current).toEqual({
             selected: [],
             onSelect: expect.any(Function),
@@ -23,7 +23,7 @@ describe('useDataViewSelection', () => {
     });
     it('should get initial state correctly - with initialSelected', () => {
         const initialSelected = [{ id: 1, name: 'test1' }];
-        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ initialSelected }));
+        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ initialSelected, matchOption: (a, b) => a.id === b.id }));
         expect(result.current).toEqual({
             selected: initialSelected,
             onSelect: expect.any(Function),
@@ -32,7 +32,7 @@ describe('useDataViewSelection', () => {
     });
     it('should select items correctly - objects', () => __awaiter(void 0, void 0, void 0, function* () {
         const initialSelected = [{ id: 1, name: 'test1' }];
-        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ initialSelected }));
+        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ initialSelected, matchOption: (a, b) => a.id === b.id }));
         yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
             result.current.onSelect(true, { id: 2, name: 'test2' });
         }));
@@ -40,7 +40,7 @@ describe('useDataViewSelection', () => {
     }));
     it('should deselect items correctly - strings', () => __awaiter(void 0, void 0, void 0, function* () {
         const initialSelected = ['test1', 'test2'];
-        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ initialSelected }));
+        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ initialSelected, matchOption: (a, b) => a === b }));
         yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
             result.current.onSelect(false, 'test2');
         }));