@patternfly/react-data-view 5.1.0 → 5.1.2

package/dist/esm/DataViewEventsContext/DataViewEventsContext.test.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { useDataViewEventsContext, DataViewEventsProvider, EventTypes } from './DataViewEventsContext';
+let id = 0;
+beforeAll(() => {
+    Object.defineProperty(global, 'crypto', {
+        value: {
+            randomUUID: jest.fn(() => `mocked-uuid-${id++}`),
+        },
+    });
+});
+describe('DataViewEventsContext', () => {
+    test('should provide context value and allow subscriptions', () => {
+        const callback = jest.fn();
+        const TestComponent = () => {
+            const { subscribe, trigger } = useDataViewEventsContext();
+            React.useEffect(() => {
+                const unsubscribe = subscribe(EventTypes.rowClick, callback);
+                return () => unsubscribe();
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+            }, []);
+            return (React.createElement("button", { onClick: () => trigger(EventTypes.rowClick, 'some payload') }, "Trigger"));
+        };
+        const { getByText } = render(React.createElement(DataViewEventsProvider, null,
+            React.createElement(TestComponent, null)));
+        fireEvent.click(getByText('Trigger'));
+        expect(callback).toHaveBeenCalledWith('some payload');
+    });
+    test('should handle unsubscribing correctly', () => {
+        const callback = jest.fn();
+        const TestComponent = () => {
+            const { subscribe, trigger } = useDataViewEventsContext();
+            React.useEffect(() => {
+                const unsubscribe = subscribe(EventTypes.rowClick, callback);
+                unsubscribe();
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+            }, []);
+            return (React.createElement("button", { onClick: () => trigger(EventTypes.rowClick, 'some payload') }, "Trigger"));
+        };
+        const { getByText } = render(React.createElement(DataViewEventsProvider, null,
+            React.createElement(TestComponent, null)));
+        fireEvent.click(getByText('Trigger'));
+        expect(callback).not.toHaveBeenCalled();
+    });
+    test('should handle multiple subscriptions and trigger events correctly', () => {
+        const callback1 = jest.fn();
+        const callback2 = jest.fn();
+        const TestComponent = () => {
+            const { subscribe, trigger } = useDataViewEventsContext();
+            React.useEffect(() => {
+                const unsubscribe1 = subscribe(EventTypes.rowClick, callback1);
+                const unsubscribe2 = subscribe(EventTypes.rowClick, callback2);
+                return () => {
+                    unsubscribe1();
+                    unsubscribe2();
+                };
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+            }, []);
+            return (React.createElement("button", { onClick: () => trigger(EventTypes.rowClick, 'some payload') }, "Trigger"));
+        };
+        const { getByText } = render(React.createElement(DataViewEventsProvider, null,
+            React.createElement(TestComponent, null)));
+        fireEvent.click(getByText('Trigger'));
+        expect(callback1).toHaveBeenCalledWith('some payload');
+        expect(callback2).toHaveBeenCalledWith('some payload');
+    });
+});

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

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

package/dist/esm/DataViewEventsContext/index.js

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

package/dist/esm/DataViewTable/DataViewTable.d.ts

@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react';
+import { TdProps, ThProps, TrProps } from '@patternfly/react-table';
+import { DataViewTableTreeProps } from '../DataViewTableTree';
+import { DataViewTableBasicProps } from '../DataViewTableBasic';
+export type DataViewTh = ReactNode | {
+    cell: ReactNode;
+    props?: ThProps;
+};
+export declare const isDataViewThObject: (value: DataViewTh) => value is {
+    cell: ReactNode;
+    props?: ThProps | undefined;
+};
+export interface DataViewTrObject {
+    row: DataViewTd[];
+    id?: string;
+    props?: TrProps;
+}
+export type DataViewTd = ReactNode | {
+    cell: ReactNode;
+    props?: TdProps;
+};
+export type DataViewTr = DataViewTd[] | DataViewTrObject;
+export declare const isDataViewTdObject: (value: DataViewTd) => value is {
+    cell: ReactNode;
+    props?: TdProps | undefined;
+};
+export declare const isDataViewTrObject: (value: DataViewTr) => value is {
+    row: DataViewTd[];
+    id?: string | undefined;
+};
+export interface DataViewTrTree extends DataViewTrObject {
+    id: string;
+    children?: DataViewTrTree[];
+}
+export type DataViewTableProps = ({
+    isTreeTable: true;
+} & DataViewTableTreeProps) | ({
+    isTreeTable?: false;
+} & DataViewTableBasicProps);
+export declare const DataViewTable: React.FC<DataViewTableProps>;
+export default DataViewTable;

package/dist/esm/DataViewTable/DataViewTable.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DataViewTableTree } from '../DataViewTableTree';
+import { DataViewTableBasic } from '../DataViewTableBasic';
+export const isDataViewThObject = (value) => value != null && typeof value === 'object' && 'cell' in value;
+export const isDataViewTdObject = (value) => value != null && typeof value === 'object' && 'cell' in value;
+export const isDataViewTrObject = (value) => value != null && typeof value === 'object' && 'row' in value;
+export const DataViewTable = (props) => (props.isTreeTable ? React.createElement(DataViewTableTree, Object.assign({}, props)) : React.createElement(DataViewTableBasic, Object.assign({}, props)));
+export default DataViewTable;

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

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

package/dist/esm/DataViewTable/DataViewTable.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DataViewTable } from './DataViewTable';
+const repositories = [
+    { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+    { 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' },
+    { 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' }
+];
+const rows = repositories.map(repo => ({ row: Object.values(repo) }));
+const repositoriesTree = [
+    {
+        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' }
+];
+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) // build rows for children
+    }
+    : {}))));
+const treeRows = buildRows(repositoriesTree);
+const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
+const ouiaId = 'TableExample';
+describe('DataViewTable component', () => {
+    test('should render a basic table correctly', () => {
+        const { container } = render(React.createElement(DataViewTable, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows }));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render a tree table correctly', () => {
+        const { container } = render(React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: treeRows }));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/esm/DataViewTable/index.js

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

package/dist/esm/DataViewTableBasic/DataViewTableBasic.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TableProps } from '@patternfly/react-table';
+import { DataViewTh, DataViewTr } from '../DataViewTable';
+export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | 'rows'> {
+    /** Columns definition */
+    columns: DataViewTh[];
+    /** Current page rows */
+    rows: DataViewTr[];
+    /** Custom OUIA ID */
+    ouiaId?: string;
+}
+export declare const DataViewTableBasic: React.FC<DataViewTableBasicProps>;
+export default DataViewTableBasic;

package/dist/esm/DataViewTableBasic/DataViewTableBasic.js

@@ -0,0 +1,42 @@
+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 { Table, Tbody, Td, Tr, } from '@patternfly/react-table';
+import { useInternalContext } from '../InternalContext';
+import { DataViewTableHeader } from '../DataViewTableHeader';
+import { isDataViewTdObject, isDataViewTrObject } from '../DataViewTable';
+export const DataViewTableBasic = (_a) => {
+    var { columns, rows, ouiaId = 'DataViewTableBasic' } = _a, props = __rest(_a, ["columns", "rows", "ouiaId"]);
+    const { selection } = useInternalContext();
+    const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
+    return (React.createElement(Table, Object.assign({ "aria-label": "Data table", ouiaId: ouiaId }, props),
+        React.createElement(DataViewTableHeader, { columns: columns, ouiaId: ouiaId }),
+        React.createElement(Tbody, null, rows.map((row, rowIndex) => {
+            var _a;
+            const rowIsObject = isDataViewTrObject(row);
+            return (React.createElement(Tr, Object.assign({ key: rowIndex, ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && ((_a = row === null || row === void 0 ? void 0 : row.props) !== null && _a !== void 0 ? _a : {}))),
+                onSelect && isSelected && (React.createElement(Td, { key: `select-${rowIndex}`, select: {
+                        rowIndex,
+                        onSelect: (_event, isSelecting) => {
+                            onSelect === null || onSelect === void 0 ? void 0 : onSelect(isSelecting, rowIsObject ? row : [row]);
+                        },
+                        isSelected: (isSelected === null || isSelected === void 0 ? void 0 : isSelected(row)) || false,
+                        isDisabled: (isSelectDisabled === null || isSelectDisabled === void 0 ? void 0 : isSelectDisabled(row)) || false,
+                    } })),
+                (rowIsObject ? row.row : row).map((cell, colIndex) => {
+                    var _a;
+                    const cellIsObject = isDataViewTdObject(cell);
+                    return (React.createElement(Td, Object.assign({ key: colIndex }, (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));
+                })));
+        }))));
+};
+export default DataViewTableBasic;

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

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

package/dist/esm/DataViewTableBasic/DataViewTableBasic.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DataViewTableBasic } from './DataViewTableBasic';
+const repositories = [
+    { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+    { 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' },
+    { 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' }
+];
+const rows = repositories.map(repo => ({
+    row: Object.values(repo),
+}));
+const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
+const ouiaId = 'TableExample';
+describe('DataViewTable component', () => {
+    test('should render correctly', () => {
+        const { container } = render(React.createElement(DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows }));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/esm/DataViewTableBasic/index.js

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

package/dist/esm/DataViewTableHeader/DataViewTableHeader.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TheadProps } from '@patternfly/react-table';
+import { DataViewTh } from '../DataViewTable';
+export interface DataViewTableHeaderProps extends TheadProps {
+    /** Indicates whether table is a tree */
+    isTreeTable?: boolean;
+    /** Columns definition */
+    columns: DataViewTh[];
+    /** Custom OUIA ID */
+    ouiaId?: string;
+}
+export declare const DataViewTableHeader: React.FC<DataViewTableHeaderProps>;
+export default DataViewTableHeader;

package/dist/esm/DataViewTableHeader/DataViewTableHeader.js

@@ -0,0 +1,30 @@
+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 { Th, Thead, Tr } from '@patternfly/react-table';
+import { useInternalContext } from '../InternalContext';
+import { isDataViewThObject } from '../DataViewTable';
+export const DataViewTableHeader = (_a) => {
+    var { isTreeTable = false, columns, ouiaId = 'DataViewTableHeader' } = _a, props = __rest(_a, ["isTreeTable", "columns", "ouiaId"]);
+    const { selection } = useInternalContext();
+    const { onSelect, isSelected } = selection !== null && selection !== void 0 ? selection : {};
+    const cells = useMemo(() => [
+        onSelect && isSelected && !isTreeTable ? (React.createElement(Th, { key: "row-select", screenReaderText: 'Data selection table header cell' })) : null,
+        ...columns.map((column, index) => {
+            var _a;
+            return (React.createElement(Th, Object.assign({ key: index }, (isDataViewThObject(column) && ((_a = column === null || column === void 0 ? void 0 : column.props) !== null && _a !== void 0 ? _a : {})), { "data-ouia-component-id": `${ouiaId}-th-${index}` }), isDataViewThObject(column) ? column.cell : column));
+        })
+    ], [columns, ouiaId, onSelect, isSelected, isTreeTable]);
+    return (React.createElement(Thead, Object.assign({ "data-ouia-component-id": `${ouiaId}-thead` }, props),
+        React.createElement(Tr, { ouiaId: `${ouiaId}-tr-head` }, cells)));
+};
+export default DataViewTableHeader;

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

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

package/dist/esm/DataViewTableHeader/DataViewTableHeader.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Table } from '@patternfly/react-table';
+import { DataViewTableHeader } from './DataViewTableHeader';
+import { DataView } from '../DataView';
+const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
+const ouiaId = 'HeaderExample';
+describe('DataViewTableHeader component', () => {
+    const mockSelection = {
+        onSelect: jest.fn(),
+        isSelected: jest.fn(),
+        isSelectDisabled: jest.fn(),
+    };
+    test('should render correctly', () => {
+        const { container } = render(React.createElement(Table, null,
+            React.createElement(DataViewTableHeader, { columns: columns, ouiaId: ouiaId })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render the tree table correctly when isTreeTable is true', () => {
+        const { container } = render(React.createElement(DataView, { selection: mockSelection },
+            React.createElement(Table, null,
+                React.createElement(DataViewTableHeader, { isTreeTable: true, columns: columns, ouiaId: ouiaId }))));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render selection column when selection is provided', () => {
+        const { container } = render(React.createElement(DataView, { selection: mockSelection },
+            React.createElement(Table, null,
+                React.createElement(DataViewTableHeader, { columns: columns, ouiaId: ouiaId }))));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/esm/DataViewTableHeader/index.js

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TableProps } from '@patternfly/react-table';
+import { DataViewTh, DataViewTrTree } from '../DataViewTable';
+export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'rows'> {
+    /** Columns definition */
+    columns: DataViewTh[];
+    /** Current page rows */
+    rows: DataViewTrTree[];
+    /** 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/esm/DataViewTableTree/DataViewTableTree.js

@@ -0,0 +1,93 @@
+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 { DataViewTableHeader } from '../DataViewTableHeader';
+import { isDataViewTdObject } from '../DataViewTable';
+const getDescendants = (node) => (!node.children || !node.children.length) ? [node] : node.children.flatMap(getDescendants);
+const isNodeChecked = (node, isSelected) => {
+    let allSelected = true;
+    let someSelected = false;
+    for (const descendant of getDescendants(node)) {
+        const selected = !!(isSelected === null || isSelected === void 0 ? void 0 : isSelected(descendant));
+        someSelected || (someSelected = selected);
+        allSelected && (allSelected = selected);
+        if (!allSelected && someSelected) {
+            return null;
+        }
+    }
+    return allSelected;
+};
+export const DataViewTableTree = (_a) => {
+    var { columns, rows, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
+    const { selection } = useInternalContext();
+    const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
+    const [expandedNodeIds, setExpandedNodeIds] = React.useState([]);
+    const [expandedDetailsNodeNames, setExpandedDetailsNodeIds] = React.useState([]);
+    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 && 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,
+                    ouiaId: `${ouiaId}-tree-toggle-${node.id}`,
+                    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 } }, 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),
+        React.createElement(DataViewTableHeader, { isTreeTable: true, columns: columns, ouiaId: ouiaId }),
+        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,70 @@
+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();
+    });
+});

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/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/esm/Hooks/selection.js

@@ -1,11 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 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);
+export const useDataViewSelection = ({ matchOption, initialSelected = [] }) => {
+    const [selected, setSelected] = 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));
@@ -13,7 +11,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,