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

package/dist/cjs/DataView/DataView.d.ts

@@ -1,9 +1,21 @@
 import React from 'react';
+import { DataViewSelection } from '../InternalContext';
+export declare const DataViewState: {
+    readonly empty: "empty";
+    readonly loading: "loading";
+    readonly error: "error";
+};
+export type DataViewState = typeof DataViewState[keyof typeof DataViewState];
 export interface DataViewProps {
     /** Content rendered inside the data view */
     children: React.ReactNode;
     /** Custom OUIA ID */
     ouiaId?: string;
+    /** Selection context configuration */
+    selection?: DataViewSelection;
+    /** Currently active state */
+    activeState?: DataViewState | string;
 }
+export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
 export declare const DataView: React.FC<DataViewProps>;
 export default DataView;

package/dist/cjs/DataView/DataView.js

@@ -14,12 +14,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataView = void 0;
+exports.DataView = exports.DataViewState = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
-const DataView = (_a) => {
+const InternalContext_1 = require("../InternalContext");
+exports.DataViewState = {
+    empty: 'empty',
+    loading: 'loading',
+    error: 'error'
+};
+const DataViewImplementation = (_a) => {
     var { children, ouiaId = 'DataView' } = _a, props = __rest(_a, ["children", "ouiaId"]);
-    return (react_1.default.createElement(react_core_1.Stack, Object.assign({ "data-ouia-component-id": `${ouiaId}-stack}` }, props), react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(react_core_1.StackItem, { "data-ouia-component-id": `${ouiaId}-stack-item-${index}` }, child)))));
+    return (react_1.default.createElement(react_core_1.Stack, Object.assign({ "data-ouia-component-id": `${ouiaId}-stack` }, props), react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(react_core_1.StackItem, { "data-ouia-component-id": `${ouiaId}-stack-item-${index}` }, child)))));
+};
+const DataView = (_a) => {
+    var { children, selection, activeState } = _a, props = __rest(_a, ["children", "selection", "activeState"]);
+    return (react_1.default.createElement(InternalContext_1.InternalContextProvider, { selection: selection, activeState: activeState },
+        react_1.default.createElement(DataViewImplementation, Object.assign({}, props), children)));
 };
 exports.DataView = DataView;
 exports.default = exports.DataView;

package/dist/cjs/DataViewEventsContext/DataViewEventsContext.d.ts

@@ -0,0 +1,16 @@
+import React, { PropsWithChildren } from "react";
+export declare const EventTypes: {
+    readonly rowClick: "rowClick";
+};
+export type DataViewEvent = typeof EventTypes[keyof typeof EventTypes];
+type Callback = (...args: any[]) => void;
+type Subscribe = (event: DataViewEvent, callback: Callback) => () => void;
+type Trigger = (event: DataViewEvent, ...payload: any[]) => void;
+export interface DataViewEventsContextValue {
+    subscribe: Subscribe;
+    trigger: Trigger;
+}
+export declare const DataViewEventsContext: React.Context<DataViewEventsContextValue>;
+export declare const DataViewEventsProvider: ({ children }: PropsWithChildren) => React.JSX.Element;
+export declare const useDataViewEventsContext: () => DataViewEventsContextValue;
+export default DataViewEventsContext;

package/dist/cjs/DataViewEventsContext/DataViewEventsContext.js

@@ -0,0 +1,62 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataViewEventsContext = exports.DataViewEventsProvider = exports.DataViewEventsContext = exports.EventTypes = void 0;
+const react_1 = __importStar(require("react"));
+exports.EventTypes = {
+    rowClick: 'rowClick'
+};
+exports.DataViewEventsContext = (0, react_1.createContext)({
+    subscribe: () => () => null,
+    trigger: () => null
+});
+const DataViewEventsProvider = ({ children }) => {
+    const [subscriptions, setSubscriptions] = (0, react_1.useState)({
+        [exports.EventTypes.rowClick]: {}
+    });
+    const subscribe = (event, callback) => {
+        const id = crypto.randomUUID();
+        // set new subscription
+        setSubscriptions(prevSubscriptions => (Object.assign(Object.assign({}, prevSubscriptions), { [event]: Object.assign(Object.assign({}, prevSubscriptions[event]), { [id]: callback }) })));
+        // return unsubscribe function
+        return () => {
+            setSubscriptions(prevSubscriptions => {
+                const updatedSubscriptions = Object.assign({}, prevSubscriptions);
+                delete updatedSubscriptions[event][id];
+                return updatedSubscriptions;
+            });
+        };
+    };
+    const trigger = (0, react_1.useCallback)((event, ...payload) => {
+        Object.values(subscriptions[event]).forEach(callback => {
+            callback(...payload);
+        });
+    }, [subscriptions]);
+    return (react_1.default.createElement(exports.DataViewEventsContext.Provider, { value: { subscribe, trigger } }, children));
+};
+exports.DataViewEventsProvider = DataViewEventsProvider;
+const useDataViewEventsContext = () => (0, react_1.useContext)(exports.DataViewEventsContext);
+exports.useDataViewEventsContext = useDataViewEventsContext;
+exports.default = exports.DataViewEventsContext;

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

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

package/dist/cjs/DataViewEventsContext/DataViewEventsContext.test.js

@@ -0,0 +1,72 @@
+"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 DataViewEventsContext_1 = require("./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 } = (0, DataViewEventsContext_1.useDataViewEventsContext)();
+            react_1.default.useEffect(() => {
+                const unsubscribe = subscribe(DataViewEventsContext_1.EventTypes.rowClick, callback);
+                return () => unsubscribe();
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+            }, []);
+            return (react_1.default.createElement("button", { onClick: () => trigger(DataViewEventsContext_1.EventTypes.rowClick, 'some payload') }, "Trigger"));
+        };
+        const { getByText } = (0, react_2.render)(react_1.default.createElement(DataViewEventsContext_1.DataViewEventsProvider, null,
+            react_1.default.createElement(TestComponent, null)));
+        react_2.fireEvent.click(getByText('Trigger'));
+        expect(callback).toHaveBeenCalledWith('some payload');
+    });
+    test('should handle unsubscribing correctly', () => {
+        const callback = jest.fn();
+        const TestComponent = () => {
+            const { subscribe, trigger } = (0, DataViewEventsContext_1.useDataViewEventsContext)();
+            react_1.default.useEffect(() => {
+                const unsubscribe = subscribe(DataViewEventsContext_1.EventTypes.rowClick, callback);
+                unsubscribe();
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+            }, []);
+            return (react_1.default.createElement("button", { onClick: () => trigger(DataViewEventsContext_1.EventTypes.rowClick, 'some payload') }, "Trigger"));
+        };
+        const { getByText } = (0, react_2.render)(react_1.default.createElement(DataViewEventsContext_1.DataViewEventsProvider, null,
+            react_1.default.createElement(TestComponent, null)));
+        react_2.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 } = (0, DataViewEventsContext_1.useDataViewEventsContext)();
+            react_1.default.useEffect(() => {
+                const unsubscribe1 = subscribe(DataViewEventsContext_1.EventTypes.rowClick, callback1);
+                const unsubscribe2 = subscribe(DataViewEventsContext_1.EventTypes.rowClick, callback2);
+                return () => {
+                    unsubscribe1();
+                    unsubscribe2();
+                };
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+            }, []);
+            return (react_1.default.createElement("button", { onClick: () => trigger(DataViewEventsContext_1.EventTypes.rowClick, 'some payload') }, "Trigger"));
+        };
+        const { getByText } = (0, react_2.render)(react_1.default.createElement(DataViewEventsContext_1.DataViewEventsProvider, null,
+            react_1.default.createElement(TestComponent, null)));
+        react_2.fireEvent.click(getByText('Trigger'));
+        expect(callback1).toHaveBeenCalledWith('some payload');
+        expect(callback2).toHaveBeenCalledWith('some payload');
+    });
+});

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

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

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

package/dist/cjs/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;
+};
+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;
+};
+export declare const isDataViewTrObject: (value: DataViewTr) => value is {
+    row: DataViewTd[];
+    id?: 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/cjs/DataViewTable/DataViewTable.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataViewTable = exports.isDataViewTrObject = exports.isDataViewTdObject = exports.isDataViewThObject = void 0;
+const react_1 = __importDefault(require("react"));
+const DataViewTableTree_1 = require("../DataViewTableTree");
+const DataViewTableBasic_1 = require("../DataViewTableBasic");
+const isDataViewThObject = (value) => value != null && typeof value === 'object' && 'cell' in value;
+exports.isDataViewThObject = isDataViewThObject;
+const isDataViewTdObject = (value) => value != null && typeof value === 'object' && 'cell' in value;
+exports.isDataViewTdObject = isDataViewTdObject;
+const isDataViewTrObject = (value) => value != null && typeof value === 'object' && 'row' in value;
+exports.isDataViewTrObject = isDataViewTrObject;
+const DataViewTable = (props) => (props.isTreeTable ? react_1.default.createElement(DataViewTableTree_1.DataViewTableTree, Object.assign({}, props)) : react_1.default.createElement(DataViewTableBasic_1.DataViewTableBasic, Object.assign({}, props)));
+exports.DataViewTable = DataViewTable;
+exports.default = exports.DataViewTable;

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

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

package/dist/cjs/DataViewTable/DataViewTable.test.js

@@ -0,0 +1,57 @@
+"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 DataViewTable_1 = require("./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 } = (0, react_2.render)(react_1.default.createElement(DataViewTable_1.DataViewTable, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows }));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render a tree table correctly', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: treeRows }));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

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

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.d.ts

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

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.js

@@ -0,0 +1,71 @@
+"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.DataViewTableBasic = 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 DataViewTableBasic = (_a) => {
+    var { columns, rows, ouiaId = 'DataViewTableBasic', headStates, bodyStates } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "headStates", "bodyStates"]);
+    const { selection, activeState, isSelectable } = (0, InternalContext_1.useInternalContext)();
+    const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
+    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 renderedRows = (0, react_1.useMemo)(() => rows.map((row, rowIndex) => {
+        const rowIsObject = (0, DataViewTable_1.isDataViewTrObject)(row);
+        return (react_1.default.createElement(react_table_1.Tr, Object.assign({ key: rowIndex, ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && (row === null || row === void 0 ? void 0 : row.props))),
+            isSelectable && (react_1.default.createElement(react_table_1.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 = (0, DataViewTable_1.isDataViewTdObject)(cell);
+                return (react_1.default.createElement(react_table_1.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));
+            })));
+    }), [rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId]);
+    return (react_1.default.createElement(react_table_1.Table, Object.assign({ "aria-label": "Data table", ouiaId: ouiaId }, props),
+        activeHeadState || react_1.default.createElement(DataViewTableHead_1.DataViewTableHead, { columns: columns, ouiaId: ouiaId }),
+        activeBodyState || react_1.default.createElement(react_table_1.Tbody, null, renderedRows)));
+};
+exports.DataViewTableBasic = DataViewTableBasic;
+exports.default = exports.DataViewTableBasic;

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

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

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.test.js

@@ -0,0 +1,43 @@
+"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 DataView_1 = require("../DataView");
+const DataViewTableBasic_1 = require("./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 } = (0, react_2.render)(react_1.default.createElement(DataViewTableBasic_1.DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows }));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render with an empty state', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { activeState: "empty" },
+            react_1.default.createElement(DataViewTableBasic_1.DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { empty: "No data found" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render with an error state', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { activeState: "error" },
+            react_1.default.createElement(DataViewTableBasic_1.DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { error: "Some error" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render with a loading state', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { activeState: "loading" },
+            react_1.default.createElement(DataViewTableBasic_1.DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { loading: "Data is loading" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

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

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

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

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 {};