@patternfly/react-data-view 5.1.1 → 5.1.3

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

@@ -0,0 +1,75 @@
+"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();
+    });
+});

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 = null, 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,
             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/InternalContext/InternalContext.test.js

@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 const InternalContext_1 = require("./InternalContext");
+const DataView_1 = require("../DataView");
 describe('InternalContext', () => {
     const mockSelection = {
         onSelect: jest.fn(),
@@ -20,7 +21,7 @@ describe('InternalContext', () => {
                 react_1.default.createElement("button", { onClick: () => selection === null || selection === void 0 ? void 0 : selection.onSelect(true, ['item1']) }, "Select item"),
                 react_1.default.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item1')) ? 'Selected' : 'Not selected')));
         };
-        const { getByText } = (0, react_2.render)(react_1.default.createElement(InternalContext_1.InternalContextProvider, { selection: mockSelection },
+        const { getByText } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { selection: mockSelection },
             react_1.default.createElement(TestComponent, null)));
         react_2.fireEvent.click(getByText('Select item'));
         expect(mockSelection.onSelect).toHaveBeenCalledWith(true, ['item1']);
@@ -33,7 +34,7 @@ describe('InternalContext', () => {
                 react_1.default.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item1')) ? 'Item 1 is selected' : 'Item 1 is not selected'),
                 react_1.default.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item2')) ? 'Item 2 is selected' : 'Item 2 is not selected')));
         };
-        const { getByText } = (0, react_2.render)(react_1.default.createElement(InternalContext_1.InternalContextProvider, { selection: mockSelectionState },
+        const { getByText } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { selection: mockSelectionState },
             react_1.default.createElement(TestComponent, null)));
         expect(getByText('Item 1 is selected')).toBeInTheDocument();
         expect(getByText('Item 2 is not selected')).toBeInTheDocument();
@@ -47,7 +48,7 @@ describe('InternalContext', () => {
                 react_1.default.createElement("span", null, ((_a = selection === null || selection === void 0 ? void 0 : selection.isSelectDisabled) === null || _a === void 0 ? void 0 : _a.call(selection, 'item3')) ? 'Item 3 is disabled' : 'Item 3 is enabled'),
                 react_1.default.createElement("span", null, ((_b = selection === null || selection === void 0 ? void 0 : selection.isSelectDisabled) === null || _b === void 0 ? void 0 : _b.call(selection, 'item1')) ? 'Item 1 is disabled' : 'Item 1 is enabled')));
         };
-        const { getByText } = (0, react_2.render)(react_1.default.createElement(InternalContext_1.InternalContextProvider, { selection: mockSelectionWithDisabled },
+        const { getByText } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { selection: mockSelectionWithDisabled },
             react_1.default.createElement(TestComponent, null)));
         expect(getByText('Item 3 is disabled')).toBeInTheDocument();
         expect(getByText('Item 1 is enabled')).toBeInTheDocument();

package/dist/cjs/index.d.ts

@@ -3,6 +3,12 @@ export * from './InternalContext';
 export * from './Hooks';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
+export { default as DataViewTableTree } from './DataViewTableTree';
+export * from './DataViewTableTree';
+export { default as DataViewTableHeader } from './DataViewTableHeader';
+export * from './DataViewTableHeader';
+export { default as DataViewTableBasic } from './DataViewTableBasic';
+export * from './DataViewTableBasic';
 export { default as DataViewTable } from './DataViewTable';
 export * from './DataViewTable';
 export { default as DataViewEventsContext } from './DataViewEventsContext';

package/dist/cjs/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataView = exports.DataViewEventsContext = exports.DataViewTable = exports.DataViewToolbar = exports.InternalContext = void 0;
+exports.DataView = exports.DataViewEventsContext = exports.DataViewTable = exports.DataViewTableBasic = exports.DataViewTableHeader = exports.DataViewTableTree = exports.DataViewToolbar = exports.InternalContext = void 0;
 var InternalContext_1 = require("./InternalContext");
 Object.defineProperty(exports, "InternalContext", { enumerable: true, get: function () { return __importDefault(InternalContext_1).default; } });
 __exportStar(require("./InternalContext"), exports);
@@ -26,6 +26,15 @@ __exportStar(require("./Hooks"), exports);
 var DataViewToolbar_1 = require("./DataViewToolbar");
 Object.defineProperty(exports, "DataViewToolbar", { enumerable: true, get: function () { return __importDefault(DataViewToolbar_1).default; } });
 __exportStar(require("./DataViewToolbar"), exports);
+var DataViewTableTree_1 = require("./DataViewTableTree");
+Object.defineProperty(exports, "DataViewTableTree", { enumerable: true, get: function () { return __importDefault(DataViewTableTree_1).default; } });
+__exportStar(require("./DataViewTableTree"), exports);
+var DataViewTableHeader_1 = require("./DataViewTableHeader");
+Object.defineProperty(exports, "DataViewTableHeader", { enumerable: true, get: function () { return __importDefault(DataViewTableHeader_1).default; } });
+__exportStar(require("./DataViewTableHeader"), exports);
+var DataViewTableBasic_1 = require("./DataViewTableBasic");
+Object.defineProperty(exports, "DataViewTableBasic", { enumerable: true, get: function () { return __importDefault(DataViewTableBasic_1).default; } });
+__exportStar(require("./DataViewTableBasic"), exports);
 var DataViewTable_1 = require("./DataViewTable");
 Object.defineProperty(exports, "DataViewTable", { enumerable: true, get: function () { return __importDefault(DataViewTable_1).default; } });
 __exportStar(require("./DataViewTable"), exports);

package/dist/dynamic/DataViewTableBasic/package.json

@@ -0,0 +1 @@
+{"main":"../../cjs/DataViewTableBasic/index.js","module":"../../esm/DataViewTableBasic/index.js","typings":"../../esm/DataViewTableBasic/index.d.ts"}

package/dist/dynamic/DataViewTableHeader/package.json

@@ -0,0 +1 @@
+{"main":"../../cjs/DataViewTableHeader/index.js","module":"../../esm/DataViewTableHeader/index.js","typings":"../../esm/DataViewTableHeader/index.d.ts"}

package/dist/dynamic/DataViewTableTree/package.json

@@ -0,0 +1 @@
+{"main":"../../cjs/DataViewTableTree/index.js","module":"../../esm/DataViewTableTree/index.js","typings":"../../esm/DataViewTableTree/index.d.ts"}

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

@@ -1,22 +1,25 @@
 import React, { ReactNode } from 'react';
-import { TableProps, TdProps, ThProps, TrProps } from '@patternfly/react-table';
+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 type DataViewTd = ReactNode | {
+export declare const isDataViewThObject: (value: DataViewTh) => value is {
     cell: ReactNode;
-    props?: TdProps;
+    props?: ThProps | undefined;
 };
-export type DataViewTr = DataViewTd[] | {
+export interface DataViewTrObject {
     row: DataViewTd[];
     id?: string;
     props?: TrProps;
-};
-export declare const isDataViewThObject: (value: DataViewTh) => value is {
+}
+export type DataViewTd = ReactNode | {
     cell: ReactNode;
-    props?: ThProps | undefined;
+    props?: TdProps;
 };
+export type DataViewTr = DataViewTd[] | DataViewTrObject;
 export declare const isDataViewTdObject: (value: DataViewTd) => value is {
     cell: ReactNode;
     props?: TdProps | undefined;
@@ -25,13 +28,14 @@ export declare const isDataViewTrObject: (value: DataViewTr) => value is {
     row: DataViewTd[];
     id?: string | undefined;
 };
-export interface DataViewTableProps extends Omit<TableProps, 'onSelect' | 'rows'> {
-    /** Columns definition */
-    columns: DataViewTh[];
-    /** Current page rows */
-    rows: DataViewTr[];
-    /** Custom OUIA ID */
-    ouiaId?: string;
+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

@@ -1,49 +1,8 @@
-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, Th, Thead, Tr } from '@patternfly/react-table';
-import { useInternalContext } from '../InternalContext';
+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 = (_a) => {
-    var { columns, rows, ouiaId = 'DataViewTable' } = _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(Thead, { "data-ouia-component-id": `${ouiaId}-thead` },
-            React.createElement(Tr, { ouiaId: `${ouiaId}-tr-head` },
-                onSelect && isSelected && React.createElement(Th, { key: "row-select" }),
-                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));
-                }))),
-        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 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.js

@@ -2,21 +2,51 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { DataViewTable } from './DataViewTable';
 const repositories = [
-    { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
-    { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
-    { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
-    { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
-    { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
-    { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+    { 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 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 correctly', () => {
+    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/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;