@patternfly/react-data-view 5.3.0 → 5.4.0

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

@@ -14,7 +14,7 @@ export interface DataViewProps {
     /** Selection context configuration */
     selection?: DataViewSelection;
     /** Currently active state */
-    activeState?: DataViewState;
+    activeState?: DataViewState | string;
 }
 export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
 export declare const DataView: React.FC<DataViewProps>;

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

@@ -7,8 +7,10 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTr[];
-    /** States to be displayed when active */
-    states?: Partial<Record<DataViewState, React.ReactNode>>;
+    /** 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;
 }

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.js

@@ -38,33 +38,34 @@ exports.DataViewTableBasic = void 0;
 const react_1 = __importStar(require("react"));
 const react_table_1 = require("@patternfly/react-table");
 const InternalContext_1 = require("../InternalContext");
-const DataViewTableHeader_1 = require("../DataViewTableHeader");
+const DataViewTableHead_1 = require("../DataViewTableHead");
 const DataViewTable_1 = require("../DataViewTable");
 const DataViewTableBasic = (_a) => {
-    var { columns, rows, ouiaId = 'DataViewTableBasic', states = {} } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "states"]);
-    const { selection, activeState } = (0, InternalContext_1.useInternalContext)();
+    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 isSelectable = (0, react_1.useMemo)(() => Boolean(onSelect && isSelected), [onSelect, isSelected]);
+    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),
-        react_1.default.createElement(DataViewTableHeader_1.DataViewTableHeader, { columns: columns, ouiaId: ouiaId }),
-        react_1.default.createElement(react_table_1.Tbody, null, activeState && Object.keys(states).includes(activeState) ? (react_1.default.createElement(react_table_1.Tr, { key: activeState, ouiaId: `${ouiaId}-tr-${activeState}` },
-            react_1.default.createElement(react_table_1.Td, { colSpan: columns.length + Number(isSelectable) }, states[activeState]))) : (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));
-                })));
-        })))));
+        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.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (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 DataView_1 = __importDefault(require("../DataView/DataView"));
 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' },
@@ -26,13 +26,18 @@ describe('DataViewTable component', () => {
         expect(container).toMatchSnapshot();
     });
     test('should render with an empty state', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.default, { activeState: "empty" },
-            react_1.default.createElement(DataViewTableBasic_1.DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { empty: "No data found" }, rows: [] })));
+        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.default, { activeState: "error" },
-            react_1.default.createElement(DataViewTableBasic_1.DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { error: "Some error" }, rows: [] })));
+        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/{DataViewTableHeader/DataViewTableHeader.d.ts → DataViewTableHead/DataViewTableHead.d.ts}

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

package/dist/cjs/{DataViewTableHeader/DataViewTableHeader.js → DataViewTableHead/DataViewTableHead.js}

@@ -34,17 +34,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataViewTableHeader = void 0;
+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 DataViewTableHeader = (_a) => {
-    var { isTreeTable = false, columns, ouiaId = 'DataViewTableHeader' } = _a, props = __rest(_a, ["isTreeTable", "columns", "ouiaId"]);
+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 header cell' })) : null,
+        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));
@@ -53,5 +53,5 @@ const DataViewTableHeader = (_a) => {
     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.DataViewTableHeader = DataViewTableHeader;
-exports.default = exports.DataViewTableHeader;
+exports.DataViewTableHead = DataViewTableHead;
+exports.default = exports.DataViewTableHead;

package/dist/cjs/{DataViewTableHeader/DataViewTableHeader.test.js → DataViewTableHead/DataViewTableHead.test.js}

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
 const react_table_1 = require("@patternfly/react-table");
-const DataViewTableHeader_1 = require("./DataViewTableHeader");
+const DataViewTableHead_1 = require("./DataViewTableHead");
 const DataView_1 = require("../DataView");
 const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
 const ouiaId = 'HeaderExample';
-describe('DataViewTableHeader component', () => {
+describe('DataViewTableHead component', () => {
     const mockSelection = {
         onSelect: jest.fn(),
         isSelected: jest.fn(),
@@ -18,19 +18,19 @@ describe('DataViewTableHeader component', () => {
     };
     test('should render correctly', () => {
         const { container } = (0, react_2.render)(react_1.default.createElement(react_table_1.Table, null,
-            react_1.default.createElement(DataViewTableHeader_1.DataViewTableHeader, { columns: columns, ouiaId: ouiaId })));
+            react_1.default.createElement(DataViewTableHead_1.DataViewTableHead, { columns: columns, ouiaId: ouiaId })));
         expect(container).toMatchSnapshot();
     });
     test('should render the tree table correctly when isTreeTable is true', () => {
         const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { selection: mockSelection },
             react_1.default.createElement(react_table_1.Table, null,
-                react_1.default.createElement(DataViewTableHeader_1.DataViewTableHeader, { isTreeTable: true, columns: columns, ouiaId: ouiaId }))));
+                react_1.default.createElement(DataViewTableHead_1.DataViewTableHead, { isTreeTable: true, columns: columns, ouiaId: ouiaId }))));
         expect(container).toMatchSnapshot();
     });
     test('should render selection column when selection is provided', () => {
         const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { selection: mockSelection },
             react_1.default.createElement(react_table_1.Table, null,
-                react_1.default.createElement(DataViewTableHeader_1.DataViewTableHeader, { columns: columns, ouiaId: ouiaId }))));
+                react_1.default.createElement(DataViewTableHead_1.DataViewTableHead, { columns: columns, ouiaId: ouiaId }))));
         expect(container).toMatchSnapshot();
     });
 });

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

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

package/dist/cjs/{DataViewTableHeader → DataViewTableHead}/index.js

@@ -18,6 +18,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
-var DataViewTableHeader_1 = require("./DataViewTableHeader");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DataViewTableHeader_1).default; } });
-__exportStar(require("./DataViewTableHeader"), exports);
+var DataViewTableHead_1 = require("./DataViewTableHead");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DataViewTableHead_1).default; } });
+__exportStar(require("./DataViewTableHead"), exports);

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

@@ -7,8 +7,10 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTrTree[];
-    /** States to be displayed when active */
-    states?: Partial<Record<DataViewState, React.ReactNode>>;
+    /** Table head states to be displayed when active */
+    headStates?: Partial<Record<DataViewState | string, React.ReactNode>>;
+    /** Table body states to be displayed when active */
+    bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>;
     /** Optional icon for the leaf rows */
     leafIcon?: React.ReactNode;
     /** Optional icon for the expanded parent rows */

package/dist/cjs/DataViewTableTree/DataViewTableTree.js

@@ -38,7 +38,7 @@ exports.DataViewTableTree = void 0;
 const react_1 = __importStar(require("react"));
 const react_table_1 = require("@patternfly/react-table");
 const InternalContext_1 = require("../InternalContext");
-const DataViewTableHeader_1 = require("../DataViewTableHeader");
+const DataViewTableHead_1 = require("../DataViewTableHead");
 const DataViewTable_1 = require("../DataViewTable");
 const getDescendants = (node) => (!node.children || !node.children.length) ? [node] : node.children.flatMap(getDescendants);
 const isNodeChecked = (node, isSelected) => {
@@ -55,11 +55,13 @@ const isNodeChecked = (node, isSelected) => {
     return allSelected;
 };
 const DataViewTableTree = (_a) => {
-    var { columns, rows, states = {}, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "states", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
+    var { columns, rows, headStates, bodyStates, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "headStates", "bodyStates", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
     const { selection, activeState } = (0, InternalContext_1.useInternalContext)();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
     const [expandedNodeIds, setExpandedNodeIds] = react_1.default.useState([]);
     const [expandedDetailsNodeNames, setExpandedDetailsNodeIds] = react_1.default.useState([]);
+    const activeHeadState = (0, react_1.useMemo)(() => activeState ? headStates === null || headStates === void 0 ? void 0 : headStates[activeState] : undefined, [activeState, headStates]);
+    const activeBodyState = (0, react_1.useMemo)(() => activeState ? bodyStates === null || bodyStates === void 0 ? void 0 : bodyStates[activeState] : undefined, [activeState, bodyStates]);
     const nodes = (0, react_1.useMemo)(() => {
         const renderRows = ([node, ...remainingNodes], level = 1, posinset = 1, rowIndex = 0, isHidden = false) => {
             var _a, _b, _c, _d;
@@ -123,9 +125,8 @@ const DataViewTableTree = (_a) => {
         ouiaId
     ]);
     return (react_1.default.createElement(react_table_1.Table, Object.assign({ isTreeTable: true, "aria-label": "Data table", ouiaId: ouiaId }, props),
-        react_1.default.createElement(DataViewTableHeader_1.DataViewTableHeader, { isTreeTable: true, columns: columns, ouiaId: ouiaId }),
-        react_1.default.createElement(react_table_1.Tbody, null, activeState && Object.keys(states).includes(activeState) ? (react_1.default.createElement(react_table_1.Tr, { key: activeState, ouiaId: `${ouiaId}-tr-${activeState}` },
-            react_1.default.createElement(react_table_1.Td, { colSpan: columns.length }, states[activeState]))) : nodes)));
+        activeHeadState || react_1.default.createElement(DataViewTableHead_1.DataViewTableHead, { isTreeTable: true, columns: columns, ouiaId: ouiaId }),
+        activeBodyState || react_1.default.createElement(react_table_1.Tbody, null, nodes)));
 };
 exports.DataViewTableTree = DataViewTableTree;
 exports.default = exports.DataViewTableTree;

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

@@ -74,12 +74,17 @@ describe('DataViewTableTree component', () => {
     });
     test('should render tree table with an empty state', () => {
         const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { activeState: "empty" },
-            react_1.default.createElement(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { empty: "No data found" }, rows: [] })));
+            react_1.default.createElement(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { empty: "No data found" }, rows: [] })));
         expect(container).toMatchSnapshot();
     });
     test('should render tree table with an error state', () => {
         const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { activeState: "error" },
-            react_1.default.createElement(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { error: "Some error" }, rows: [] })));
+            react_1.default.createElement(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { error: "Some error" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render tree table with a loading state', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(DataView_1.DataView, { activeState: "loading" },
+            react_1.default.createElement(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { loading: "Data is loading" }, rows: [] })));
         expect(container).toMatchSnapshot();
     });
 });

package/dist/cjs/InternalContext/InternalContext.d.ts

@@ -8,12 +8,18 @@ export interface DataViewSelection {
     /** Determines if selection is disabled for a given item */
     isSelectDisabled?: (item: any) => boolean;
 }
-export interface InternalContextValue {
+export interface InternalContextProps {
+    /** Data selection props */
     selection?: DataViewSelection;
-    activeState?: DataViewState;
+    /** Currently active state */
+    activeState?: DataViewState | string;
+}
+export interface InternalContextValue extends InternalContextProps {
+    /** Flag indicating if data view is selectable (auto-calculated) */
+    isSelectable: boolean;
 }
 export declare const InternalContext: React.Context<InternalContextValue>;
-export type InternalProviderProps = PropsWithChildren<InternalContextValue>;
+export type InternalProviderProps = PropsWithChildren<InternalContextProps>;
 export declare const InternalContextProvider: React.FC<InternalProviderProps>;
 export declare const useInternalContext: () => InternalContextValue;
 export default InternalContext;

package/dist/cjs/InternalContext/InternalContext.js

@@ -27,9 +27,13 @@ exports.useInternalContext = exports.InternalContextProvider = exports.InternalC
 const react_1 = __importStar(require("react"));
 exports.InternalContext = (0, react_1.createContext)({
     selection: undefined,
-    activeState: undefined
+    activeState: undefined,
+    isSelectable: false,
 });
-const InternalContextProvider = ({ children, selection, activeState }) => (react_1.default.createElement(exports.InternalContext.Provider, { value: { selection, activeState } }, children));
+const InternalContextProvider = ({ children, selection, activeState }) => {
+    const isSelectable = (0, react_1.useMemo)(() => Boolean((selection === null || selection === void 0 ? void 0 : selection.onSelect) && (selection === null || selection === void 0 ? void 0 : selection.isSelected)), [selection === null || selection === void 0 ? void 0 : selection.onSelect, selection === null || selection === void 0 ? void 0 : selection.isSelected]);
+    return (react_1.default.createElement(exports.InternalContext.Provider, { value: { selection, activeState, isSelectable } }, children));
+};
 exports.InternalContextProvider = InternalContextProvider;
 const useInternalContext = () => (0, react_1.useContext)(exports.InternalContext);
 exports.useInternalContext = useInternalContext;

package/dist/cjs/index.d.ts

@@ -5,8 +5,8 @@ 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 DataViewTableHead } from './DataViewTableHead';
+export * from './DataViewTableHead';
 export { default as DataViewTableBasic } from './DataViewTableBasic';
 export * from './DataViewTableBasic';
 export { default as DataViewTable } from './DataViewTable';

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.DataViewTableBasic = exports.DataViewTableHeader = exports.DataViewTableTree = exports.DataViewToolbar = exports.InternalContext = void 0;
+exports.DataView = exports.DataViewEventsContext = exports.DataViewTable = exports.DataViewTableBasic = exports.DataViewTableHead = 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);
@@ -29,9 +29,9 @@ __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 DataViewTableHead_1 = require("./DataViewTableHead");
+Object.defineProperty(exports, "DataViewTableHead", { enumerable: true, get: function () { return __importDefault(DataViewTableHead_1).default; } });
+__exportStar(require("./DataViewTableHead"), exports);
 var DataViewTableBasic_1 = require("./DataViewTableBasic");
 Object.defineProperty(exports, "DataViewTableBasic", { enumerable: true, get: function () { return __importDefault(DataViewTableBasic_1).default; } });
 __exportStar(require("./DataViewTableBasic"), exports);

package/dist/dynamic/DataViewTableHead/package.json

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

package/dist/esm/DataView/DataView.d.ts

@@ -14,7 +14,7 @@ export interface DataViewProps {
     /** Selection context configuration */
     selection?: DataViewSelection;
     /** Currently active state */
-    activeState?: DataViewState;
+    activeState?: DataViewState | string;
 }
 export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
 export declare const DataView: React.FC<DataViewProps>;

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

@@ -7,8 +7,10 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTr[];
-    /** States to be displayed when active */
-    states?: Partial<Record<DataViewState, React.ReactNode>>;
+    /** 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;
 }

package/dist/esm/DataViewTableBasic/DataViewTableBasic.js

@@ -12,32 +12,33 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useMemo } from 'react';
 import { Table, Tbody, Td, Tr, } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
-import { DataViewTableHeader } from '../DataViewTableHeader';
+import { DataViewTableHead } from '../DataViewTableHead';
 import { isDataViewTdObject, isDataViewTrObject } from '../DataViewTable';
 export const DataViewTableBasic = (_a) => {
-    var { columns, rows, ouiaId = 'DataViewTableBasic', states = {} } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "states"]);
-    const { selection, activeState } = useInternalContext();
+    var { columns, rows, ouiaId = 'DataViewTableBasic', headStates, bodyStates } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "headStates", "bodyStates"]);
+    const { selection, activeState, isSelectable } = useInternalContext();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
-    const isSelectable = useMemo(() => Boolean(onSelect && isSelected), [onSelect, isSelected]);
+    const activeHeadState = useMemo(() => activeState ? headStates === null || headStates === void 0 ? void 0 : headStates[activeState] : undefined, [activeState, headStates]);
+    const activeBodyState = useMemo(() => activeState ? bodyStates === null || bodyStates === void 0 ? void 0 : bodyStates[activeState] : undefined, [activeState, bodyStates]);
+    const renderedRows = useMemo(() => rows.map((row, rowIndex) => {
+        const rowIsObject = isDataViewTrObject(row);
+        return (React.createElement(Tr, Object.assign({ key: rowIndex, ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && (row === null || row === void 0 ? void 0 : row.props))),
+            isSelectable && (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));
+            })));
+    }), [rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId]);
     return (React.createElement(Table, Object.assign({ "aria-label": "Data table", ouiaId: ouiaId }, props),
-        React.createElement(DataViewTableHeader, { columns: columns, ouiaId: ouiaId }),
-        React.createElement(Tbody, null, activeState && Object.keys(states).includes(activeState) ? (React.createElement(Tr, { key: activeState, ouiaId: `${ouiaId}-tr-${activeState}` },
-            React.createElement(Td, { colSpan: columns.length + Number(isSelectable) }, states[activeState]))) : (rows.map((row, rowIndex) => {
-            const rowIsObject = isDataViewTrObject(row);
-            return (React.createElement(Tr, Object.assign({ key: rowIndex, ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && (row === null || row === void 0 ? void 0 : row.props))),
-                isSelectable && (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));
-                })));
-        })))));
+        activeHeadState || React.createElement(DataViewTableHead, { columns: columns, ouiaId: ouiaId }),
+        activeBodyState || React.createElement(Tbody, null, renderedRows)));
 };
 export default DataViewTableBasic;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { DataView } from '../DataView';
 import { DataViewTableBasic } from './DataViewTableBasic';
-import DataView from '../DataView/DataView';
 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' },
@@ -22,12 +22,17 @@ describe('DataViewTable component', () => {
     });
     test('should render with an empty state', () => {
         const { container } = render(React.createElement(DataView, { activeState: "empty" },
-            React.createElement(DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { empty: "No data found" }, rows: [] })));
+            React.createElement(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 } = render(React.createElement(DataView, { activeState: "error" },
-            React.createElement(DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { error: "Some error" }, rows: [] })));
+            React.createElement(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 } = render(React.createElement(DataView, { activeState: "loading" },
+            React.createElement(DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { loading: "Data is loading" }, rows: [] })));
         expect(container).toMatchSnapshot();
     });
 });

package/dist/esm/{DataViewTableHeader/DataViewTableHeader.d.ts → DataViewTableHead/DataViewTableHead.d.ts}

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

package/dist/esm/{DataViewTableHeader/DataViewTableHeader.js → DataViewTableHead/DataViewTableHead.js}

@@ -13,12 +13,12 @@ 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"]);
+export const DataViewTableHead = (_a) => {
+    var { isTreeTable = false, columns, ouiaId = 'DataViewTableHead' } = _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,
+        onSelect && isSelected && !isTreeTable ? (React.createElement(Th, { key: "row-select", screenReaderText: 'Data selection table head 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));
@@ -27,4 +27,4 @@ export const DataViewTableHeader = (_a) => {
     return (React.createElement(Thead, Object.assign({ "data-ouia-component-id": `${ouiaId}-thead` }, props),
         React.createElement(Tr, { ouiaId: `${ouiaId}-tr-head` }, cells)));
 };
-export default DataViewTableHeader;
+export default DataViewTableHead;

package/dist/esm/{DataViewTableHeader/DataViewTableHeader.test.js → DataViewTableHead/DataViewTableHead.test.js}

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Table } from '@patternfly/react-table';
-import { DataViewTableHeader } from './DataViewTableHeader';
+import { DataViewTableHead } from './DataViewTableHead';
 import { DataView } from '../DataView';
 const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
 const ouiaId = 'HeaderExample';
-describe('DataViewTableHeader component', () => {
+describe('DataViewTableHead component', () => {
     const mockSelection = {
         onSelect: jest.fn(),
         isSelected: jest.fn(),
@@ -13,19 +13,19 @@ describe('DataViewTableHeader component', () => {
     };
     test('should render correctly', () => {
         const { container } = render(React.createElement(Table, null,
-            React.createElement(DataViewTableHeader, { columns: columns, ouiaId: ouiaId })));
+            React.createElement(DataViewTableHead, { 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 }))));
+                React.createElement(DataViewTableHead, { 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 }))));
+                React.createElement(DataViewTableHead, { columns: columns, ouiaId: ouiaId }))));
         expect(container).toMatchSnapshot();
     });
 });

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

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

package/dist/esm/DataViewTableHead/index.js

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

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

@@ -7,8 +7,10 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTrTree[];
-    /** States to be displayed when active */
-    states?: Partial<Record<DataViewState, React.ReactNode>>;
+    /** Table head states to be displayed when active */
+    headStates?: Partial<Record<DataViewState | string, React.ReactNode>>;
+    /** Table body states to be displayed when active */
+    bodyStates?: Partial<Record<DataViewState | string, React.ReactNode>>;
     /** Optional icon for the leaf rows */
     leafIcon?: React.ReactNode;
     /** Optional icon for the expanded parent rows */