@patternfly/react-data-view 5.1.0 → 5.1.1

package/dist/cjs/index.js

@@ -1,4 +1,5 @@
 "use strict";
+// this file is autogenerated by generate-index.js, modifying it manually will have no effect
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -17,12 +18,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataView = exports.DataViewToolbar = void 0;
-// this file is autogenerated by generate-index.js, modifying it manually will have no effect
+exports.DataView = exports.DataViewEventsContext = exports.DataViewTable = 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);
 __exportStar(require("./Hooks"), exports);
 var DataViewToolbar_1 = require("./DataViewToolbar");
 Object.defineProperty(exports, "DataViewToolbar", { enumerable: true, get: function () { return __importDefault(DataViewToolbar_1).default; } });
 __exportStar(require("./DataViewToolbar"), exports);
+var DataViewTable_1 = require("./DataViewTable");
+Object.defineProperty(exports, "DataViewTable", { enumerable: true, get: function () { return __importDefault(DataViewTable_1).default; } });
+__exportStar(require("./DataViewTable"), exports);
+var DataViewEventsContext_1 = require("./DataViewEventsContext");
+Object.defineProperty(exports, "DataViewEventsContext", { enumerable: true, get: function () { return __importDefault(DataViewEventsContext_1).default; } });
+__exportStar(require("./DataViewEventsContext"), exports);
 var DataView_1 = require("./DataView");
 Object.defineProperty(exports, "DataView", { enumerable: true, get: function () { return __importDefault(DataView_1).default; } });
 __exportStar(require("./DataView"), exports);

package/dist/dynamic/DataViewEventsContext/package.json

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

package/dist/dynamic/DataViewTable/package.json

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

package/dist/dynamic/InternalContext/package.json

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

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

@@ -1,9 +1,13 @@
 import React from 'react';
+import { DataViewSelection } from '../InternalContext';
 export interface DataViewProps {
     /** Content rendered inside the data view */
     children: React.ReactNode;
     /** Custom OUIA ID */
     ouiaId?: string;
+    /** Selection context configuration */
+    selection?: DataViewSelection;
 }
+export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
 export declare const DataView: React.FC<DataViewProps>;
 export default DataView;

package/dist/esm/DataView/DataView.js

@@ -11,8 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { Stack, StackItem } from '@patternfly/react-core';
-export const DataView = (_a) => {
+import { InternalContextProvider } from '../InternalContext';
+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)))));
 };
+export const DataView = (_a) => {
+    var { children, selection } = _a, props = __rest(_a, ["children", "selection"]);
+    return (React.createElement(InternalContextProvider, { selection: selection },
+        React.createElement(DataViewImplementation, Object.assign({}, props), children)));
+};
 export default DataView;

package/dist/esm/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/esm/DataViewEventsContext/DataViewEventsContext.js

@@ -0,0 +1,34 @@
+import React, { createContext, useCallback, useContext, useState } from "react";
+export const EventTypes = {
+    rowClick: 'rowClick'
+};
+export const DataViewEventsContext = createContext({
+    subscribe: () => () => null,
+    trigger: () => null
+});
+export const DataViewEventsProvider = ({ children }) => {
+    const [subscriptions, setSubscriptions] = useState({
+        [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 = useCallback((event, ...payload) => {
+        Object.values(subscriptions[event]).forEach(callback => {
+            callback(...payload);
+        });
+    }, [subscriptions]);
+    return (React.createElement(DataViewEventsContext.Provider, { value: { subscribe, trigger } }, children));
+};
+export const useDataViewEventsContext = () => useContext(DataViewEventsContext);
+export default DataViewEventsContext;

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

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

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

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

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

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

package/dist/esm/DataViewEventsContext/index.js

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

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

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

package/dist/esm/DataViewTable/DataViewTable.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { useInternalContext } from '../InternalContext';
+export const isDataViewThObject = (value) => value != null && typeof value === 'object' && 'cell' in value;
+export const isDataViewTdObject = (value) => value != null && typeof value === 'object' && 'cell' in value;
+export const isDataViewTrObject = (value) => value != null && typeof value === 'object' && 'row' in value;
+export const DataViewTable = (_a) => {
+    var { columns, rows, ouiaId = 'DataViewTable' } = _a, props = __rest(_a, ["columns", "rows", "ouiaId"]);
+    const { selection } = useInternalContext();
+    const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
+    return (React.createElement(Table, Object.assign({ "aria-label": "Data table", ouiaId: ouiaId }, props),
+        React.createElement(Thead, { "data-ouia-component-id": `${ouiaId}-thead` },
+            React.createElement(Tr, { ouiaId: `${ouiaId}-tr-head` },
+                onSelect && isSelected && React.createElement(Th, { key: "row-select" }),
+                columns.map((column, index) => {
+                    var _a;
+                    return (React.createElement(Th, Object.assign({ key: index }, (isDataViewThObject(column) && ((_a = column === null || column === void 0 ? void 0 : column.props) !== null && _a !== void 0 ? _a : {})), { "data-ouia-component-id": `${ouiaId}-th-${index}` }), isDataViewThObject(column) ? column.cell : column));
+                }))),
+        React.createElement(Tbody, null, rows.map((row, rowIndex) => {
+            var _a;
+            const rowIsObject = isDataViewTrObject(row);
+            return (React.createElement(Tr, Object.assign({ key: rowIndex, ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && ((_a = row === null || row === void 0 ? void 0 : row.props) !== null && _a !== void 0 ? _a : {}))),
+                onSelect && isSelected && (React.createElement(Td, { key: `select-${rowIndex}`, select: {
+                        rowIndex,
+                        onSelect: (_event, isSelecting) => {
+                            onSelect === null || onSelect === void 0 ? void 0 : onSelect(isSelecting, rowIsObject ? row : [row]);
+                        },
+                        isSelected: (isSelected === null || isSelected === void 0 ? void 0 : isSelected(row)) || false,
+                        isDisabled: (isSelectDisabled === null || isSelectDisabled === void 0 ? void 0 : isSelectDisabled(row)) || false,
+                    } })),
+                (rowIsObject ? row.row : row).map((cell, colIndex) => {
+                    var _a;
+                    const cellIsObject = isDataViewTdObject(cell);
+                    return (React.createElement(Td, Object.assign({ key: colIndex }, (cellIsObject && ((_a = cell === null || cell === void 0 ? void 0 : cell.props) !== null && _a !== void 0 ? _a : {})), { "data-ouia-component-id": `${ouiaId}-td-${rowIndex}-${colIndex}` }), cellIsObject ? cell.cell : cell));
+                })));
+        }))));
+};
+export default DataViewTable;

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

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

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DataViewTable } from './DataViewTable';
+const repositories = [
+    { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
+    { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
+    { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
+    { name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
+    { name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
+    { name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+];
+const rows = repositories.map(repo => ({
+    row: Object.values(repo),
+}));
+const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
+const ouiaId = 'TableExample';
+describe('DataViewTable component', () => {
+    test('should render correctly', () => {
+        const { container } = render(React.createElement(DataViewTable, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows }));
+        expect(container).toMatchSnapshot();
+    });
+});

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

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

package/dist/esm/DataViewTable/index.js

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

package/dist/esm/Hooks/selection.d.ts

@@ -1,10 +1,10 @@
 export interface UseDataViewSelectionProps {
+    /** Function to compare items when checking if item is selected */
+    matchOption: (item: any, another: any) => boolean;
     /** Array of initially selected entries */
     initialSelected?: (any)[];
-    /** Function to compare items when checking if entry is selected */
-    matchOption?: (item: any, another: any) => boolean;
 }
-export declare const useDataViewSelection: (props: UseDataViewSelectionProps) => {
+export declare const useDataViewSelection: ({ matchOption, initialSelected }: UseDataViewSelectionProps) => {
     selected: any[];
     onSelect: (isSelecting: boolean, items?: any[] | any) => void;
     isSelected: (item: any) => boolean;

package/dist/esm/Hooks/selection.js

@@ -1,11 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from "react";
-export const useDataViewSelection = (props) => {
-    var _a;
-    const [selected, setSelected] = useState((_a = props.initialSelected) !== null && _a !== void 0 ? _a : []);
-    const matchOption = props.matchOption ? props.matchOption : (option, another) => (option === another);
+export const useDataViewSelection = ({ matchOption, initialSelected = [] }) => {
+    const [selected, setSelected] = useState(initialSelected);
     const onSelect = (isSelecting, items) => {
-        isSelecting ?
+        isSelecting && items ?
             setSelected(prev => {
                 const newSelectedItems = [...prev];
                 (Array.isArray(items) ? items : [items]).forEach(newItem => !prev.some(prevItem => matchOption(prevItem, newItem)) && newSelectedItems.push(newItem));
@@ -13,7 +11,7 @@ export const useDataViewSelection = (props) => {
             })
             : setSelected(items ? prev => prev.filter(prevSelected => !(Array.isArray(items) ? items : [items]).some(item => matchOption(item, prevSelected))) : []);
     };
-    const isSelected = (item) => (props === null || props === void 0 ? void 0 : props.matchOption) ? Boolean(selected.find(selected => matchOption(selected, item))) : selected.includes(item);
+    const isSelected = (item) => Boolean(selected.find(selected => matchOption(selected, item)));
     return {
         selected,
         onSelect,

package/dist/esm/Hooks/selection.test.js

@@ -12,7 +12,7 @@ import { renderHook, act } from '@testing-library/react';
 import { useDataViewSelection } from './selection';
 describe('useDataViewSelection', () => {
     it('should get initial state correctly - no initialSelected', () => {
-        const { result } = renderHook(() => useDataViewSelection({}));
+        const { result } = renderHook(() => useDataViewSelection({ matchOption: (a, b) => a.id === b.id }));
         expect(result.current).toEqual({
             selected: [],
             onSelect: expect.any(Function),
@@ -21,7 +21,7 @@ describe('useDataViewSelection', () => {
     });
     it('should get initial state correctly - with initialSelected', () => {
         const initialSelected = [{ id: 1, name: 'test1' }];
-        const { result } = renderHook(() => useDataViewSelection({ initialSelected }));
+        const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }));
         expect(result.current).toEqual({
             selected: initialSelected,
             onSelect: expect.any(Function),
@@ -30,7 +30,7 @@ describe('useDataViewSelection', () => {
     });
     it('should select items correctly - objects', () => __awaiter(void 0, void 0, void 0, function* () {
         const initialSelected = [{ id: 1, name: 'test1' }];
-        const { result } = renderHook(() => useDataViewSelection({ initialSelected }));
+        const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }));
         yield act(() => __awaiter(void 0, void 0, void 0, function* () {
             result.current.onSelect(true, { id: 2, name: 'test2' });
         }));
@@ -38,7 +38,7 @@ describe('useDataViewSelection', () => {
     }));
     it('should deselect items correctly - strings', () => __awaiter(void 0, void 0, void 0, function* () {
         const initialSelected = ['test1', 'test2'];
-        const { result } = renderHook(() => useDataViewSelection({ initialSelected }));
+        const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a === b }));
         yield act(() => __awaiter(void 0, void 0, void 0, function* () {
             result.current.onSelect(false, 'test2');
         }));

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

@@ -0,0 +1,17 @@
+import React, { PropsWithChildren } from 'react';
+export interface DataViewSelection {
+    /** Called when the selection of items changes */
+    onSelect: (isSelecting: boolean, items?: any[] | any) => void;
+    /** Checks if a specific item is currently selected */
+    isSelected: (item: any) => boolean;
+    /** Determines if selection is disabled for a given item */
+    isSelectDisabled?: (item: any) => boolean;
+}
+export interface InternalContextValue {
+    selection?: DataViewSelection;
+}
+export declare const InternalContext: React.Context<InternalContextValue>;
+export type InternalProviderProps = PropsWithChildren<InternalContextValue>;
+export declare const InternalContextProvider: React.FC<InternalProviderProps>;
+export declare const useInternalContext: () => InternalContextValue;
+export default InternalContext;

package/dist/esm/InternalContext/InternalContext.js

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

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/InternalContext/InternalContext.test.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { InternalContextProvider, useInternalContext } from './InternalContext';
+describe('InternalContext', () => {
+    const mockSelection = {
+        onSelect: jest.fn(),
+        isSelected: jest.fn(),
+        isSelectDisabled: jest.fn(),
+    };
+    test('should provide context value and allow consuming it', () => {
+        const TestComponent = () => {
+            const { selection } = useInternalContext();
+            return (React.createElement("div", null,
+                React.createElement("button", { onClick: () => selection === null || selection === void 0 ? void 0 : selection.onSelect(true, ['item1']) }, "Select item"),
+                React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item1')) ? 'Selected' : 'Not selected')));
+        };
+        const { getByText } = render(React.createElement(InternalContextProvider, { selection: mockSelection },
+            React.createElement(TestComponent, null)));
+        fireEvent.click(getByText('Select item'));
+        expect(mockSelection.onSelect).toHaveBeenCalledWith(true, ['item1']);
+    });
+    test('should handle selection state correctly', () => {
+        const mockSelectionState = Object.assign(Object.assign({}, mockSelection), { isSelected: jest.fn((item) => item === 'item1') });
+        const TestComponent = () => {
+            const { selection } = useInternalContext();
+            return (React.createElement("div", null,
+                React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item1')) ? 'Item 1 is selected' : 'Item 1 is not selected'),
+                React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item2')) ? 'Item 2 is selected' : 'Item 2 is not selected')));
+        };
+        const { getByText } = render(React.createElement(InternalContextProvider, { selection: mockSelectionState },
+            React.createElement(TestComponent, null)));
+        expect(getByText('Item 1 is selected')).toBeInTheDocument();
+        expect(getByText('Item 2 is not selected')).toBeInTheDocument();
+    });
+    test('should handle selection disabled correctly', () => {
+        const mockSelectionWithDisabled = Object.assign(Object.assign({}, mockSelection), { isSelectDisabled: jest.fn((item) => item === 'item3') });
+        const TestComponent = () => {
+            var _a, _b;
+            const { selection } = useInternalContext();
+            return (React.createElement("div", null,
+                React.createElement("span", null, ((_a = selection === null || selection === void 0 ? void 0 : selection.isSelectDisabled) === null || _a === void 0 ? void 0 : _a.call(selection, 'item3')) ? 'Item 3 is disabled' : 'Item 3 is enabled'),
+                React.createElement("span", null, ((_b = selection === null || selection === void 0 ? void 0 : selection.isSelectDisabled) === null || _b === void 0 ? void 0 : _b.call(selection, 'item1')) ? 'Item 1 is disabled' : 'Item 1 is enabled')));
+        };
+        const { getByText } = render(React.createElement(InternalContextProvider, { selection: mockSelectionWithDisabled },
+            React.createElement(TestComponent, null)));
+        expect(getByText('Item 3 is disabled')).toBeInTheDocument();
+        expect(getByText('Item 1 is enabled')).toBeInTheDocument();
+    });
+});

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

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

package/dist/esm/InternalContext/index.js

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

package/dist/esm/index.d.ts

@@ -1,5 +1,11 @@
+export { default as InternalContext } from './InternalContext';
+export * from './InternalContext';
 export * from './Hooks';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
+export { default as DataViewTable } from './DataViewTable';
+export * from './DataViewTable';
+export { default as DataViewEventsContext } from './DataViewEventsContext';
+export * from './DataViewEventsContext';
 export { default as DataView } from './DataView';
 export * from './DataView';

package/dist/esm/index.js

@@ -1,6 +1,12 @@
 // this file is autogenerated by generate-index.js, modifying it manually will have no effect
+export { default as InternalContext } from './InternalContext';
+export * from './InternalContext';
 export * from './Hooks';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
+export { default as DataViewTable } from './DataViewTable';
+export * from './DataViewTable';
+export { default as DataViewEventsContext } from './DataViewEventsContext';
+export * from './DataViewEventsContext';
 export { default as DataView } from './DataView';
 export * from './DataView';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "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

@@ -11,11 +11,13 @@ 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: 4
-propComponents: ['DataViewToolbar']
+propComponents: ['DataViewToolbar', 'DataViewTable']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/Components.md
 ---
 import { BulkSelect } from '@patternfly/react-component-groups';
-import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 
 ## Data view toolbar
 
@@ -23,9 +25,37 @@ The **data view toolbar** component renders a default opinionated data view tool
 
 Data view toolbar can contain a `pagination`, `bulkSelect` or any other children content passed. The preffered way of passing children toolbar items is using the [toolbar item](/components/toolbar#toolbar-items) component.
 
-### Basic example
+### Basic toolbar example
 
 ```js file="./DataViewToolbarExample.tsx"
 
 ```
 
+## Data view table
+
+The **data view table** component renders your columns and rows definition into a [table](/components/table) component. 
+
+### Rows and columns customization
+
+This example shows possible formats of `rows` and `columns` passed to the `DataViewTable` which allow you various customizations of the table header and body. 
+
+```js file="./DataViewTableExample.tsx"
+
+```
+
+The `DataViewTable` component accepts the following props:
+
+- `columns` defining the column headers of the table. Each item in the array can be a `ReactNode` (for simple headers) or an object with the following properties:
+  - `cell` (`ReactNode`) content to display in the column header.
+  - optional `props` (`ThProps`) to pass to the `<Th>` component, such as `width`, `sort`, and other table header cell properties.
+
+- `rows` defining the rows to be displayed in the table. Each item in the array can be either an array of `DataViewTd` (for simple rows) or an object with the following properties:
+  - `row` (`DataViewTd[]`) defining the content for each cell in the row.
+  - optional `id` (`string`) for the row (can be used to match items in selection).
+  - optional `props` (`TrProps`) to pass to the `<Tr>` component, such as `isHoverable`, `isRowSelected`, and other table row properties.
+
+- optional `ouiaId`
+
+- optional `props` (`TableProps`) that are passed down to the `<Table>` component, except for `onSelect`, which is managed internally.
+
+

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { DataViewTable, DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { Button } from '@patternfly/react-core';
+
+interface Repository {
+  id: number;
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [
+  { id: 1, name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
+  { id: 2, name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
+  { id: 3, name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
+  { id: 4, name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
+  { id: 5, name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
+  { id: 6, name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
+];
+
+// you can also pass props to Tr by returning { row: DataViewTd[], props: TrProps } }
+const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspaces, lastCommit }) => [
+  { id, cell: workspaces, props: { favorites: { isFavorited: true } } },
+  { cell: <Button href='#' variant='link' isInline>{name}</Button> },
+  branches,
+  prs,
+  workspaces,
+  lastCommit 
+]);
+
+const columns: DataViewTh[] = [
+  null,
+  'Repositories', 
+  { cell: <>Branches<ExclamationCircleIcon className='pf-v5-u-ml-sm' color='var(--pf-v5-global--danger-color--100)'/></> }, 
+  'Pull requests', 
+  { cell: 'Workspaces', props: { info: { tooltip: 'More information' } } }, 
+  { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } }
+];
+
+const ouiaId = 'TableExample';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
+);