@patternfly/react-data-view 5.1.4 → 5.2.0

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

@@ -1,5 +1,11 @@
 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;
@@ -7,6 +13,8 @@ export interface DataViewProps {
     ouiaId?: string;
     /** Selection context configuration */
     selection?: DataViewSelection;
+    /** Currently active state */
+    activeState?: DataViewState;
 }
 export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
 export declare const DataView: React.FC<DataViewProps>;

package/dist/cjs/DataView/DataView.js

@@ -14,17 +14,22 @@ 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 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 } = _a, props = __rest(_a, ["children", "selection"]);
-    return (react_1.default.createElement(InternalContext_1.InternalContextProvider, { selection: selection },
+    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;

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

@@ -1,13 +1,14 @@
 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[];
-    /** Empty state to be displayed */
-    emptyState?: React.ReactNode;
+    /** States to be displayed when active */
+    states?: Partial<Record<DataViewState, React.ReactNode>>;
     /** Custom OUIA ID */
     ouiaId?: string;
 }

package/dist/cjs/DataViewTableBasic/DataViewTableBasic.js

@@ -41,16 +41,16 @@ const InternalContext_1 = require("../InternalContext");
 const DataViewTableHeader_1 = require("../DataViewTableHeader");
 const DataViewTable_1 = require("../DataViewTable");
 const DataViewTableBasic = (_a) => {
-    var { columns, rows, ouiaId = 'DataViewTableBasic', emptyState = null } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "emptyState"]);
-    const { selection } = (0, InternalContext_1.useInternalContext)();
+    var { columns, rows, ouiaId = 'DataViewTableBasic', states = {} } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "states"]);
+    const { selection, activeState } = (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]);
     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, (rows === null || rows === void 0 ? void 0 : rows.length) > 0 ? rows.map((row, rowIndex) => {
-            var _a;
+        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 && ((_a = row === null || row === void 0 ? void 0 : row.props) !== null && _a !== void 0 ? _a : {}))),
+            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) => {
@@ -64,8 +64,7 @@ const DataViewTableBasic = (_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));
                 })));
-        }) : (react_1.default.createElement(react_table_1.Tr, { key: "empty", ouiaId: `${ouiaId}-tr-empty` },
-            react_1.default.createElement(react_table_1.Td, { colSpan: columns.length + Number(isSelectable) }, emptyState))))));
+        })))));
 };
 exports.DataViewTableBasic = DataViewTableBasic;
 exports.default = exports.DataViewTableBasic;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
 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' },
@@ -25,7 +26,13 @@ describe('DataViewTable component', () => {
         expect(container).toMatchSnapshot();
     });
     test('should render with an empty state', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(DataViewTableBasic_1.DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, emptyState: "No data found", rows: [] }));
+        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: [] })));
+        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: [] })));
         expect(container).toMatchSnapshot();
     });
 });

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import { TableProps } from '@patternfly/react-table';
 import { DataViewTh, DataViewTrTree } from '../DataViewTable';
+import { DataViewState } from '../DataView/DataView';
 export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'rows'> {
     /** Columns definition */
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTrTree[];
-    /** Empty state to be displayed */
-    emptyState?: React.ReactNode;
+    /** States to be displayed when active */
+    states?: Partial<Record<DataViewState, React.ReactNode>>;
     /** Optional icon for the leaf rows */
     leafIcon?: React.ReactNode;
     /** Optional icon for the expanded parent rows */

package/dist/cjs/DataViewTableTree/DataViewTableTree.js

@@ -55,8 +55,8 @@ const isNodeChecked = (node, isSelected) => {
     return allSelected;
 };
 const DataViewTableTree = (_a) => {
-    var { columns, rows, emptyState = null, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "emptyState", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
-    const { selection } = (0, InternalContext_1.useInternalContext)();
+    var { columns, rows, states = {}, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "states", "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([]);
@@ -110,11 +110,22 @@ const DataViewTableTree = (_a) => {
             ];
         };
         return renderRows(rows);
-    }, [rows, expandedNodeIds, expandedDetailsNodeNames, leafIcon, expandedIcon, collapsedIcon, isSelected, onSelect, isSelectDisabled, ouiaId]);
+    }, [
+        rows,
+        expandedNodeIds,
+        expandedDetailsNodeNames,
+        leafIcon,
+        expandedIcon,
+        collapsedIcon,
+        isSelected,
+        onSelect,
+        isSelectDisabled,
+        ouiaId
+    ]);
     return (react_1.default.createElement(react_table_1.Table, Object.assign({ isTreeTable: true, "aria-label": "Data table", ouiaId: ouiaId }, props),
         react_1.default.createElement(DataViewTableHeader_1.DataViewTableHeader, { isTreeTable: true, columns: columns, ouiaId: ouiaId }),
-        react_1.default.createElement(react_table_1.Tbody, null, nodes.length > 0 ? nodes : (react_1.default.createElement(react_table_1.Tr, { key: "empty", ouiaId: `${ouiaId}-tr-empty` },
-            react_1.default.createElement(react_table_1.Td, { colSpan: columns.length }, emptyState))))));
+        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)));
 };
 exports.DataViewTableTree = DataViewTableTree;
 exports.default = exports.DataViewTableTree;

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

@@ -73,7 +73,13 @@ describe('DataViewTableTree component', () => {
         expect(container).toMatchSnapshot();
     });
     test('should render tree table with an empty state', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(DataViewTable_1.DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, emptyState: "No data found", rows: [] }));
+        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: [] })));
+        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: [] })));
         expect(container).toMatchSnapshot();
     });
 });

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

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from 'react';
+import { DataViewState } from '../DataView';
 export interface DataViewSelection {
     /** Called when the selection of items changes */
     onSelect: (isSelecting: boolean, items?: any[] | any) => void;
@@ -9,6 +10,7 @@ export interface DataViewSelection {
 }
 export interface InternalContextValue {
     selection?: DataViewSelection;
+    activeState?: DataViewState;
 }
 export declare const InternalContext: React.Context<InternalContextValue>;
 export type InternalProviderProps = PropsWithChildren<InternalContextValue>;

package/dist/cjs/InternalContext/InternalContext.js

@@ -26,9 +26,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInternalContext = exports.InternalContextProvider = exports.InternalContext = void 0;
 const react_1 = __importStar(require("react"));
 exports.InternalContext = (0, react_1.createContext)({
-    selection: undefined
+    selection: undefined,
+    activeState: undefined
 });
-const InternalContextProvider = ({ children, selection }) => (react_1.default.createElement(exports.InternalContext.Provider, { value: { selection } }, children));
+const InternalContextProvider = ({ children, selection, activeState }) => (react_1.default.createElement(exports.InternalContext.Provider, { value: { selection, activeState } }, children));
 exports.InternalContextProvider = InternalContextProvider;
 const useInternalContext = () => (0, react_1.useContext)(exports.InternalContext);
 exports.useInternalContext = useInternalContext;

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

@@ -1,5 +1,11 @@
 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;
@@ -7,6 +13,8 @@ export interface DataViewProps {
     ouiaId?: string;
     /** Selection context configuration */
     selection?: DataViewSelection;
+    /** Currently active state */
+    activeState?: DataViewState;
 }
 export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
 export declare const DataView: React.FC<DataViewProps>;

package/dist/esm/DataView/DataView.js

@@ -12,13 +12,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { Stack, StackItem } from '@patternfly/react-core';
 import { InternalContextProvider } from '../InternalContext';
+export const DataViewState = {
+    empty: 'empty',
+    loading: 'loading',
+    error: 'error'
+};
 const DataViewImplementation = (_a) => {
     var { children, ouiaId = 'DataView' } = _a, props = __rest(_a, ["children", "ouiaId"]);
-    return (React.createElement(Stack, Object.assign({ "data-ouia-component-id": `${ouiaId}-stack}` }, props), React.Children.map(children, (child, index) => (React.createElement(StackItem, { "data-ouia-component-id": `${ouiaId}-stack-item-${index}` }, child)))));
+    return (React.createElement(Stack, Object.assign({ "data-ouia-component-id": `${ouiaId}-stack` }, props), React.Children.map(children, (child, index) => (React.createElement(StackItem, { "data-ouia-component-id": `${ouiaId}-stack-item-${index}` }, child)))));
 };
 export const DataView = (_a) => {
-    var { children, selection } = _a, props = __rest(_a, ["children", "selection"]);
-    return (React.createElement(InternalContextProvider, { selection: selection },
+    var { children, selection, activeState } = _a, props = __rest(_a, ["children", "selection", "activeState"]);
+    return (React.createElement(InternalContextProvider, { selection: selection, activeState: activeState },
         React.createElement(DataViewImplementation, Object.assign({}, props), children)));
 };
 export default DataView;

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

@@ -1,13 +1,14 @@
 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[];
-    /** Empty state to be displayed */
-    emptyState?: React.ReactNode;
+    /** States to be displayed when active */
+    states?: Partial<Record<DataViewState, React.ReactNode>>;
     /** Custom OUIA ID */
     ouiaId?: string;
 }

package/dist/esm/DataViewTableBasic/DataViewTableBasic.js

@@ -15,16 +15,16 @@ import { useInternalContext } from '../InternalContext';
 import { DataViewTableHeader } from '../DataViewTableHeader';
 import { isDataViewTdObject, isDataViewTrObject } from '../DataViewTable';
 export const DataViewTableBasic = (_a) => {
-    var { columns, rows, ouiaId = 'DataViewTableBasic', emptyState = null } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "emptyState"]);
-    const { selection } = useInternalContext();
+    var { columns, rows, ouiaId = 'DataViewTableBasic', states = {} } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "states"]);
+    const { selection, activeState } = useInternalContext();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
     const isSelectable = useMemo(() => Boolean(onSelect && isSelected), [onSelect, isSelected]);
     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 === null || rows === void 0 ? void 0 : rows.length) > 0 ? rows.map((row, rowIndex) => {
-            var _a;
+        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 && ((_a = row === null || row === void 0 ? void 0 : row.props) !== null && _a !== void 0 ? _a : {}))),
+            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) => {
@@ -38,7 +38,6 @@ export const DataViewTableBasic = (_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));
                 })));
-        }) : (React.createElement(Tr, { key: "empty", ouiaId: `${ouiaId}-tr-empty` },
-            React.createElement(Td, { colSpan: columns.length + Number(isSelectable) }, emptyState))))));
+        })))));
 };
 export default DataViewTableBasic;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 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' },
@@ -20,7 +21,13 @@ describe('DataViewTable component', () => {
         expect(container).toMatchSnapshot();
     });
     test('should render with an empty state', () => {
-        const { container } = render(React.createElement(DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, emptyState: "No data found", rows: [] }));
+        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: [] })));
+        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: [] })));
         expect(container).toMatchSnapshot();
     });
 });

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import { TableProps } from '@patternfly/react-table';
 import { DataViewTh, DataViewTrTree } from '../DataViewTable';
+import { DataViewState } from '../DataView/DataView';
 export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'rows'> {
     /** Columns definition */
     columns: DataViewTh[];
     /** Current page rows */
     rows: DataViewTrTree[];
-    /** Empty state to be displayed */
-    emptyState?: React.ReactNode;
+    /** States to be displayed when active */
+    states?: Partial<Record<DataViewState, React.ReactNode>>;
     /** Optional icon for the leaf rows */
     leafIcon?: React.ReactNode;
     /** Optional icon for the expanded parent rows */

package/dist/esm/DataViewTableTree/DataViewTableTree.js

@@ -29,8 +29,8 @@ const isNodeChecked = (node, isSelected) => {
     return allSelected;
 };
 export const DataViewTableTree = (_a) => {
-    var { columns, rows, emptyState = null, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "emptyState", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
-    const { selection } = useInternalContext();
+    var { columns, rows, states = {}, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "states", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
+    const { selection, activeState } = useInternalContext();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
     const [expandedNodeIds, setExpandedNodeIds] = React.useState([]);
     const [expandedDetailsNodeNames, setExpandedDetailsNodeIds] = React.useState([]);
@@ -84,10 +84,21 @@ export const DataViewTableTree = (_a) => {
             ];
         };
         return renderRows(rows);
-    }, [rows, expandedNodeIds, expandedDetailsNodeNames, leafIcon, expandedIcon, collapsedIcon, isSelected, onSelect, isSelectDisabled, ouiaId]);
+    }, [
+        rows,
+        expandedNodeIds,
+        expandedDetailsNodeNames,
+        leafIcon,
+        expandedIcon,
+        collapsedIcon,
+        isSelected,
+        onSelect,
+        isSelectDisabled,
+        ouiaId
+    ]);
     return (React.createElement(Table, Object.assign({ isTreeTable: true, "aria-label": "Data table", ouiaId: ouiaId }, props),
         React.createElement(DataViewTableHeader, { isTreeTable: true, columns: columns, ouiaId: ouiaId }),
-        React.createElement(Tbody, null, nodes.length > 0 ? nodes : (React.createElement(Tr, { key: "empty", ouiaId: `${ouiaId}-tr-empty` },
-            React.createElement(Td, { colSpan: columns.length }, emptyState))))));
+        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 }, states[activeState]))) : nodes)));
 };
 export default DataViewTableTree;

package/dist/esm/DataViewTableTree/DataViewTableTree.test.js

@@ -68,7 +68,13 @@ describe('DataViewTableTree component', () => {
         expect(container).toMatchSnapshot();
     });
     test('should render tree table with an empty state', () => {
-        const { container } = render(React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, emptyState: "No data found", rows: [] }));
+        const { container } = render(React.createElement(DataView, { activeState: "empty" },
+            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { empty: "No data found" }, rows: [] })));
+        expect(container).toMatchSnapshot();
+    });
+    test('should render tree table with an error state', () => {
+        const { container } = render(React.createElement(DataView, { activeState: "error" },
+            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, states: { error: "Some error" }, rows: [] })));
         expect(container).toMatchSnapshot();
     });
 });

package/dist/esm/InternalContext/InternalContext.d.ts

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from 'react';
+import { DataViewState } from '../DataView';
 export interface DataViewSelection {
     /** Called when the selection of items changes */
     onSelect: (isSelecting: boolean, items?: any[] | any) => void;
@@ -9,6 +10,7 @@ export interface DataViewSelection {
 }
 export interface InternalContextValue {
     selection?: DataViewSelection;
+    activeState?: DataViewState;
 }
 export declare const InternalContext: React.Context<InternalContextValue>;
 export type InternalProviderProps = PropsWithChildren<InternalContextValue>;

package/dist/esm/InternalContext/InternalContext.js

@@ -1,7 +1,8 @@
 import React, { createContext, useContext } from 'react';
 export const InternalContext = createContext({
-    selection: undefined
+    selection: undefined,
+    activeState: undefined
 });
-export const InternalContextProvider = ({ children, selection }) => (React.createElement(InternalContext.Provider, { value: { selection } }, children));
+export const InternalContextProvider = ({ children, selection, activeState }) => (React.createElement(InternalContext.Provider, { value: { selection, activeState } }, children));
 export const useInternalContext = () => useContext(InternalContext);
 export default InternalContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "5.1.4",
+  "version": "5.2.0",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/data-view/examples/Components/Components.md

@@ -16,11 +16,11 @@ sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/mod
 ---
 import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
 import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
-import { BulkSelect } from '@patternfly/react-component-groups';
+import { BulkSelect, ErrorState } from '@patternfly/react-component-groups';
 import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
-import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
 
 ## Data view toolbar
 
@@ -74,8 +74,15 @@ It is also possible to disable row selection using the `isSelectDisabled` functi
 ```
 
 ### Empty state example
-The data view table also supports displaying a custom empty state. You can pass it using the `emptyState` property and it will be displayed in case there are no rows to be rendered.
+The data view table supports displaying a custom empty state. You can pass it using the `states` property and `empty` key. It will be automatically displayed in case there are no rows to be rendered.
 
 ```js file="./DataViewTableEmptyExample.tsx"
 
 ```
+
+### Error state example
+The data view table also supports displaying an error state. You can pass it using the `states` property and `error` key. It will be displayed in case the data view recieves its `state` property set to `error`.
+
+```js file="./DataViewTableErrorExample.tsx"
+
+```

package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableEmptyExample.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { CubesIcon } from '@patternfly/react-icons';
 import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
@@ -21,7 +22,7 @@ const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Wo
 
 const ouiaId = 'TableExample';
 
-const emptyState = (
+const empty = (
   <EmptyState>
     <EmptyStateHeader titleText="No data found" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
     <EmptyStateBody>There are no matching data to be displayed.</EmptyStateBody>
@@ -38,11 +39,13 @@ const emptyState = (
 );
 
 export const BasicExample: React.FunctionComponent = () => (
-  <DataViewTable 
-    aria-label='Repositories table' 
-    ouiaId={ouiaId}
-    columns={columns}
-    rows={rows}
-    emptyState={emptyState}
-  />
+  <DataView activeState={DataViewState.empty}>
+    <DataViewTable 
+      aria-label='Repositories table' 
+      ouiaId={ouiaId}
+      columns={columns}
+      rows={rows}
+      states={{ empty }}
+    />
+  </DataView>
 );

package/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableErrorExample.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { ErrorState } from '@patternfly/react-component-groups';
+
+interface Repository {
+  id: number;
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [];
+
+// you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }
+const rows: DataViewTr[] = repositories.map((repository) => Object.values(repository));
+
+const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'TableErrorExample';
+
+const error = (
+  <ErrorState errorTitle='Unable to load data' errorDescription='There was an error retrieving data. Check your connection and reload the page.' />
+);
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataView activeState={DataViewState.error}>
+    <DataViewTable 
+      aria-label='Repositories table' 
+      ouiaId={ouiaId}
+      columns={columns}
+      rows={rows}
+      states={{ error }}
+    />
+  </DataView>
+);

package/patternfly-docs/content/extensions/data-view/examples/Layout/Layout.md

@@ -11,7 +11,7 @@ source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
 sortValue: 2
-propComponents: ['DataView']
+propComponents: ['DataView', 'DataViewState']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/Layout.md
 ---
 import { useMemo } from 'react';

package/src/DataView/DataView.tsx

@@ -2,13 +2,23 @@ import React from 'react';
 import { Stack, StackItem } from '@patternfly/react-core';
 import { DataViewSelection, InternalContextProvider } from '../InternalContext';
 
+export const DataViewState = {
+  empty: 'empty',
+  loading: 'loading',
+  error: 'error'
+} as const;
+
+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
+  selection?: DataViewSelection;
+  /** Currently active state */
+  activeState?: DataViewState;
 }
 
 export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
@@ -16,7 +26,7 @@ export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isIte
 const DataViewImplementation: React.FC<DataViewImpementationProps> = ({
   children, ouiaId = 'DataView', ...props
 }: DataViewImpementationProps) => (
-  <Stack data-ouia-component-id={`${ouiaId}-stack}`} {...props}>
+  <Stack data-ouia-component-id={`${ouiaId}-stack`} {...props}>
     {React.Children.map(children, (child, index) => (
       <StackItem data-ouia-component-id={`${ouiaId}-stack-item-${index}`}>
         {child}
@@ -25,8 +35,8 @@ const DataViewImplementation: React.FC<DataViewImpementationProps> = ({
   </Stack>
 )
 
-export const DataView: React.FC<DataViewProps> = ({ children, selection, ...props }: DataViewProps) => (
-  <InternalContextProvider selection={selection}>
+export const DataView: React.FC<DataViewProps> = ({ children, selection, activeState, ...props }: DataViewProps) => (
+  <InternalContextProvider selection={selection} activeState={activeState} >
     <DataViewImplementation {...props}>{children}</DataViewImplementation>
   </InternalContextProvider>
 );