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

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/Hooks/sort.d.ts

@@ -0,0 +1,32 @@
+import { ISortBy } from "@patternfly/react-table";
+export declare enum DataViewSortParams {
+    SORT_BY = "sortBy",
+    DIRECTION = "direction"
+}
+export interface DataViewSortConfig {
+    /** Attribute to sort the entries by */
+    sortBy: string | undefined;
+    /** Sort direction */
+    direction: ISortBy['direction'];
+}
+export interface UseDataViewSortProps {
+    /** Initial sort config */
+    initialSort?: DataViewSortConfig;
+    /** Current search parameters as a string */
+    searchParams?: URLSearchParams;
+    /** Function to set search parameters */
+    setSearchParams?: (params: URLSearchParams) => void;
+    /** Default direction */
+    defaultDirection?: ISortBy['direction'];
+    /** Sort by URL param name */
+    sortByParam?: string;
+    /** Direction URL param name */
+    directionParam?: string;
+}
+export declare const useDataViewSort: (props?: UseDataViewSortProps) => {
+    onSort: (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newSortBy: string, newSortDirection: ISortBy["direction"]) => void;
+    /** Attribute to sort the entries by */
+    sortBy: string | undefined;
+    /** Sort direction */
+    direction: ISortBy["direction"];
+};

package/dist/esm/Hooks/sort.js

@@ -0,0 +1,43 @@
+import { useState, useEffect, useMemo } from "react";
+export var DataViewSortParams;
+(function (DataViewSortParams) {
+    DataViewSortParams["SORT_BY"] = "sortBy";
+    DataViewSortParams["DIRECTION"] = "direction";
+})(DataViewSortParams || (DataViewSortParams = {}));
+;
+const validateDirection = (direction, defaultDirection) => (direction === 'asc' || direction === 'desc' ? direction : defaultDirection);
+;
+;
+export const useDataViewSort = (props) => {
+    var _a;
+    const { initialSort, searchParams, setSearchParams, defaultDirection = 'asc', sortByParam = DataViewSortParams.SORT_BY, directionParam = DataViewSortParams.DIRECTION } = props !== null && props !== void 0 ? props : {};
+    const isUrlSyncEnabled = useMemo(() => searchParams && !!setSearchParams, [searchParams, setSearchParams]);
+    const [state, setState] = useState({
+        sortBy: (_a = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(sortByParam)) !== null && _a !== void 0 ? _a : initialSort === null || initialSort === void 0 ? void 0 : initialSort.sortBy,
+        direction: validateDirection(searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(directionParam), initialSort === null || initialSort === void 0 ? void 0 : initialSort.direction),
+    });
+    const updateSearchParams = (sortBy, direction) => {
+        if (isUrlSyncEnabled && sortBy) {
+            const params = new URLSearchParams(searchParams);
+            params.set(sortByParam, `${sortBy}`);
+            params.set(directionParam, `${direction}`);
+            setSearchParams === null || setSearchParams === void 0 ? void 0 : setSearchParams(params);
+        }
+    };
+    useEffect(() => {
+        state.sortBy && state.direction && updateSearchParams(state.sortBy, state.direction);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        const currentSortBy = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(sortByParam)) || state.sortBy;
+        const currentDirection = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(directionParam)) || state.direction;
+        const validDirection = validateDirection(currentDirection, defaultDirection);
+        currentSortBy !== state.sortBy || validDirection !== state.direction && setState({ sortBy: currentSortBy, direction: validDirection });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchParams === null || searchParams === void 0 ? void 0 : searchParams.toString()]);
+    const onSort = (_event, newSortBy, newSortDirection) => {
+        setState({ sortBy: newSortBy, direction: newSortDirection });
+        updateSearchParams(newSortBy, newSortDirection);
+    };
+    return Object.assign(Object.assign({}, state), { onSort });
+};

package/dist/esm/Hooks/sort.test.d.ts

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

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

@@ -0,0 +1,66 @@
+import '@testing-library/jest-dom';
+import { renderHook, act } from '@testing-library/react';
+import { useDataViewSort, DataViewSortParams } from './sort';
+describe('useDataViewSort', () => {
+    const initialSort = { sortBy: 'name', direction: 'asc' };
+    it('should initialize with provided initial sort config', () => {
+        const { result } = renderHook(() => useDataViewSort({ initialSort }));
+        expect(result.current).toEqual(expect.objectContaining(initialSort));
+    });
+    it('should initialize with empty sort config if no initialSort is provided', () => {
+        const { result } = renderHook(() => useDataViewSort());
+        expect(result.current).toEqual(expect.objectContaining({ sortBy: undefined, direction: 'asc' }));
+    });
+    it('should update sort state when onSort is called', () => {
+        const { result } = renderHook(() => useDataViewSort({ initialSort }));
+        act(() => {
+            result.current.onSort(undefined, 'age', 'desc');
+        });
+        expect(result.current).toEqual(expect.objectContaining({ sortBy: 'age', direction: 'desc' }));
+    });
+    it('should sync with URL search params if isUrlSyncEnabled', () => {
+        const searchParams = new URLSearchParams();
+        const setSearchParams = jest.fn();
+        const props = {
+            initialSort,
+            searchParams,
+            setSearchParams,
+        };
+        const { result } = renderHook(() => useDataViewSort(props));
+        expect(setSearchParams).toHaveBeenCalledTimes(1);
+        expect(result.current).toEqual(expect.objectContaining(initialSort));
+    });
+    it('should validate direction and fallback to default direction if invalid direction is provided', () => {
+        const searchParams = new URLSearchParams();
+        searchParams.set(DataViewSortParams.SORT_BY, 'name');
+        searchParams.set(DataViewSortParams.DIRECTION, 'invalid-direction');
+        const { result } = renderHook(() => useDataViewSort({ searchParams, defaultDirection: 'desc' }));
+        expect(result.current).toEqual(expect.objectContaining({ sortBy: 'name', direction: 'desc' }));
+    });
+    it('should update search params when URL sync is enabled and sort changes', () => {
+        const searchParams = new URLSearchParams();
+        const setSearchParams = jest.fn();
+        const props = {
+            initialSort,
+            searchParams,
+            setSearchParams,
+        };
+        const { result } = renderHook(() => useDataViewSort(props));
+        act(() => {
+            expect(setSearchParams).toHaveBeenCalledTimes(1);
+            result.current.onSort(undefined, 'priority', 'desc');
+        });
+        expect(setSearchParams).toHaveBeenCalledTimes(2);
+        expect(result.current).toEqual(expect.objectContaining({ sortBy: 'priority', direction: 'desc' }));
+    });
+    it('should prioritize searchParams values', () => {
+        const searchParams = new URLSearchParams();
+        searchParams.set(DataViewSortParams.SORT_BY, 'category');
+        searchParams.set(DataViewSortParams.DIRECTION, 'desc');
+        const { result } = renderHook((props) => useDataViewSort(props), { initialProps: { initialSort, searchParams } });
+        expect(result.current).toEqual(expect.objectContaining({
+            sortBy: 'category',
+            direction: 'desc',
+        }));
+    });
+});

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

@@ -0,0 +1,26 @@
+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;
+    /** 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 InternalContextProps {
+    /** Data selection props */
+    selection?: DataViewSelection;
+    /** Currently active state */
+    activeState?: DataViewState | string;
+}
+/** extends InternalContextProps */
+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<InternalContextProps>;
+export declare const InternalContextProvider: React.FC<InternalProviderProps>;
+export declare const useInternalContext: () => InternalContextValue;
+export default InternalContext;

package/dist/esm/InternalContext/InternalContext.js

@@ -0,0 +1,12 @@
+import React, { createContext, useContext, useMemo } from 'react';
+export const InternalContext = createContext({
+    selection: undefined,
+    activeState: undefined,
+    isSelectable: false,
+});
+export const InternalContextProvider = ({ children, selection, activeState }) => {
+    const isSelectable = 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.createElement(InternalContext.Provider, { value: { selection, activeState, isSelectable } }, 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,51 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { useInternalContext } from './InternalContext';
+import { DataView } from '../DataView';
+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(DataView, { 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(DataView, { 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(DataView, { 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,21 @@
+export { default as InternalContext } from './InternalContext';
+export * from './InternalContext';
 export * from './Hooks';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
+export { default as DataViewTextFilter } from './DataViewTextFilter';
+export * from './DataViewTextFilter';
+export { default as DataViewTableTree } from './DataViewTableTree';
+export * from './DataViewTableTree';
+export { default as DataViewTableHead } from './DataViewTableHead';
+export * from './DataViewTableHead';
+export { default as DataViewTableBasic } from './DataViewTableBasic';
+export * from './DataViewTableBasic';
+export { default as DataViewTable } from './DataViewTable';
+export * from './DataViewTable';
+export { default as DataViewEventsContext } from './DataViewEventsContext';
+export * from './DataViewEventsContext';
+export { default as DataViewCheckboxFilter } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';
 export { default as DataView } from './DataView';
 export * from './DataView';

package/dist/esm/index.js

@@ -1,6 +1,22 @@
 // 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 DataViewTextFilter } from './DataViewTextFilter';
+export * from './DataViewTextFilter';
+export { default as DataViewTableTree } from './DataViewTableTree';
+export * from './DataViewTableTree';
+export { default as DataViewTableHead } from './DataViewTableHead';
+export * from './DataViewTableHead';
+export { default as DataViewTableBasic } from './DataViewTableBasic';
+export * from './DataViewTableBasic';
+export { default as DataViewTable } from './DataViewTable';
+export * from './DataViewTable';
+export { default as DataViewEventsContext } from './DataViewEventsContext';
+export * from './DataViewEventsContext';
+export { default as DataViewCheckboxFilter } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';
 export { default as DataView } from './DataView';
 export * from './DataView';

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/index.ts","../src/dataview/dataview.test.tsx","../src/dataview/dataview.tsx","../src/dataview/index.ts","../src/dataviewcheckboxfilter/dataviewcheckboxfilter.test.tsx","../src/dataviewcheckboxfilter/dataviewcheckboxfilter.tsx","../src/dataviewcheckboxfilter/index.ts","../src/datavieweventscontext/datavieweventscontext.test.tsx","../src/datavieweventscontext/datavieweventscontext.tsx","../src/datavieweventscontext/index.ts","../src/dataviewfilters/dataviewfilters.test.tsx","../src/dataviewfilters/dataviewfilters.tsx","../src/dataviewfilters/index.tsx","../src/dataviewtable/dataviewtable.test.tsx","../src/dataviewtable/dataviewtable.tsx","../src/dataviewtable/index.ts","../src/dataviewtablebasic/dataviewtablebasic.test.tsx","../src/dataviewtablebasic/dataviewtablebasic.tsx","../src/dataviewtablebasic/index.ts","../src/dataviewtablehead/dataviewtablehead.test.tsx","../src/dataviewtablehead/dataviewtablehead.tsx","../src/dataviewtablehead/index.ts","../src/dataviewtabletree/dataviewtabletree.test.tsx","../src/dataviewtabletree/dataviewtabletree.tsx","../src/dataviewtabletree/index.ts","../src/dataviewtextfilter/dataviewtextfilter.test.tsx","../src/dataviewtextfilter/dataviewtextfilter.tsx","../src/dataviewtextfilter/index.ts","../src/dataviewtoolbar/dataviewtoolbar.test.tsx","../src/dataviewtoolbar/dataviewtoolbar.tsx","../src/dataviewtoolbar/index.ts","../src/hooks/filters.test.tsx","../src/hooks/filters.ts","../src/hooks/index.ts","../src/hooks/pagination.test.tsx","../src/hooks/pagination.ts","../src/hooks/selection.test.tsx","../src/hooks/selection.ts","../src/hooks/sort.test.tsx","../src/hooks/sort.ts","../src/internalcontext/internalcontext.test.tsx","../src/internalcontext/internalcontext.tsx","../src/internalcontext/index.ts"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "6.1.0-prerelease.1",
+  "version": "6.1.0",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -31,29 +31,30 @@
     "tag": "prerelease"
   },
   "dependencies": {
-    "@patternfly/react-core": "6.0.0-alpha.94",
-    "@patternfly/react-icons": "6.0.0-alpha.34",
-    "@patternfly/react-table": "6.0.0-alpha.95",
-    "@patternfly/react-component-groups": "6.0.0-alpha.6",
-    "react-jss": "^10.10.0",
-    "clsx": "^2.1.1"
+    "@patternfly/react-component-groups": "^6.1.0",
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0",
+    "@patternfly/react-table": "^6.0.0",
+    "clsx": "^2.1.1",
+    "react-jss": "^10.10.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/patternfly": "6.0.0-alpha.205",
-    "@patternfly/documentation-framework": "6.0.0-alpha.69",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
+    "@patternfly/documentation-framework": "^6.5.0",
+    "@patternfly/patternfly": "^6.0.0",
+    "@patternfly/react-code-editor": "^6.0.0",
+    "@patternfly/patternfly-a11y": "^5.0.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/react-router-dom": "^5.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^6.23.0",
-    "react-router-dom": "^6.23.0",
-    "rimraf": "^5.0.5",
+    "react-router": "^6.28.1",
+    "react-router-dom": "^6.28.1",
+    "rimraf": "^6.0.1",
     "typescript": "^5.4.5"
   }
 }

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

@@ -0,0 +1,63 @@
+---
+section: extensions
+subsection: Data view
+id: Overview
+title: Data view overview
+propComponents: ['DataView']
+sortValue: 1
+sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md
+--- 
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
+import { CubesIcon } from '@patternfly/react-icons';
+import { useDataViewPagination, useDataViewSelection, useDataViewFilters, useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { BulkSelect, BulkSelectValue, ErrorState, ResponsiveAction, ResponsiveActions, SkeletonTableHead, SkeletonTableBody } from '@patternfly/react-component-groups';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { useDataViewEventsContext, DataViewEventsContext, DataViewEventsProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext';
+import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
+import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
+import { DataViewCheckboxFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewCheckboxFilter';
+
+**Note:** Data view lives in its own package [`@patternfly/react-data-view`](https://www.npmjs.com/package/@patternfly/react-data-view)
+
+If you notice a bug, or if you have a suggestion for improving the data view extension or its documentation, please file an issue in the [react-data-view](https://github.com/patternfly/react-data-view/issues) repository. Before doing so, please make sure there is not already a pre-existing issue.
+
+---
+
+The **data view** extension enables you to display datasets in organized layouts, with data representations and interactive toolbars for actions like selection and pagination.
+
+### Layout
+
+A data view should contain a header, the data representation, and a footer. These parts are organized in a [stack layout](/layouts/stack).
+
+The data view toolbars and sub-components that display the data (like a card view or table) are always passed as `children` to the `<DataView>` component.
+
+```js file="./AbstractLayoutExample.tsx"
+
+```
+
+### Modularity
+
+The extension's modular architecture lets you efficiently create consistent data views, either by using predefined sub-components and hooks, or by defining your own. You can choose the tools that suit your needs and easily replace any part with a custom implementation.
+
+The `<DataViewToolbar>` component extends the [PatternFly toolbar](/components/toolbar) to support the most common needs. For more details, refer to the [data view toolbar](/extensions/data-view/toolbar) examples. You can also use a custom toolbar component if needed for your use case.
+
+Data can be presented using the predefined `<DataViewTable>` component, which is an abstraction above the [PatternFly table](/components/table). For more details, refer to the [data view table](/extensions/data-view/table) examples. If you have more specific data display needs, you can pass a custom implementation as a `<DataView>` child. In the near future, we are also planning to introduce a predefined card view component.
+
+```js file="./PredefinedLayoutFullExample.tsx"
+
+```
+
+## Events context
+
+The `<DataViewEventsContext>` component is an advanced feature that enables external listening of data view events. In order to share data view context with your other UI components, both your components and your data view should be wrapped with the `<DataViewEventsProvider>`. This is demonstrated in the following example.
+
+### Row click subscription example
+This example uses the `<DataViewEventsProvider>` to display details about a selected row in a [drawer component](/components/drawer).
+
+
+```js file="./EventsExample.tsx"
+
+```

package/patternfly-docs/content/extensions/data-view/examples/DataView/EventsExample.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, Title, Content } from '@patternfly/react-core';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { DataViewEventsProvider, EventTypes, useDataViewEventsContext } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext';
+import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { ActionsColumn } from '@patternfly/react-table';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'ContextExample';
+
+interface RepositoryDetailProps {
+  selectedRepo?: Repository;
+  setSelectedRepo: React.Dispatch<React.SetStateAction<Repository | undefined>>;
+}
+
+const RepositoryDetail: React.FunctionComponent<RepositoryDetailProps> = ({ selectedRepo, setSelectedRepo }) => {
+  const context = useDataViewEventsContext();
+
+  useEffect(() => {
+    const unsubscribe = context.subscribe(EventTypes.rowClick, (repo: Repository) => {
+      setSelectedRepo(repo);
+    });
+
+    return () => unsubscribe();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <Title className="pf-v6-u-mb-md" headingLevel="h2" ouiaId="detail-drawer-title">
+          Detail of {selectedRepo?.name}
+        </Title>
+        <Content component="p">Branches: {selectedRepo?.branches}</Content>
+        <Content component="p">Pull requests: {selectedRepo?.prs}</Content>
+        <Content component="p">Workspaces: {selectedRepo?.workspaces}</Content>
+        <Content component="p">Last commit: {selectedRepo?.lastCommit}</Content>
+        <DrawerActions>
+          <DrawerCloseButton onClick={() => setSelectedRepo(undefined)} data-ouia-component-id="detail-drawer-close-btn"/>
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+};
+
+interface RepositoriesTableProps {
+  selectedRepo?: Repository;
+}
+
+const rowActions = [
+  {
+    title: 'Some action',
+    onClick: () => console.log('clicked on Some action')  // eslint-disable-line no-console
+  },
+  {
+    title: <div>Another action</div>,
+    onClick: () => console.log('clicked on Another action')  // eslint-disable-line no-console
+  },
+  {
+    isSeparator: true
+  },
+  {
+    title: 'Third action',
+    onClick: () => console.log('clicked on Third action')  // eslint-disable-line no-console
+  }
+];
+
+const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
+  const selection = useDataViewSelection({ matchOption: (a, b) => a.row[0] === b.row[0] });
+  const { trigger } = useDataViewEventsContext();
+  const rows = useMemo(() => {
+    const handleRowClick = (event, repo: Repository | undefined) => {
+      // prevents drawer toggle on actions or checkbox click
+      (event.target.matches('td') || event.target.matches('tr')) && trigger(EventTypes.rowClick, repo);
+    };
+
+    return repositories.map(repo => ({
+      row: [ ...Object.values(repo), { cell: <ActionsColumn items={rowActions}/>, props: { isActionCell: true } } ],
+      props: {
+        isClickable: true,
+        onRowClick: (event) => handleRowClick(event, selectedRepo?.name === repo.name ? undefined : repo),
+        isRowSelected: selectedRepo?.name === repo.name
+      }
+    }));
+  }, [ selectedRepo?.name, trigger ]);
+
+  return (
+    <DataView selection={selection}>
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
+    </DataView>
+  );
+};
+
+export const BasicExample: React.FunctionComponent = () => {
+  const [ selectedRepo, setSelectedRepo ] = useState<Repository>();
+  const drawerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <DataViewEventsProvider>
+      <Drawer isExpanded={Boolean(selectedRepo)} onExpand={() => drawerRef.current?.focus()} data-ouia-component-id="detail-drawer" >
+        <DrawerContent
+          panelContent={<RepositoryDetail selectedRepo={selectedRepo} setSelectedRepo={setSelectedRepo} />}
+        >
+          <DrawerContentBody>
+            <RepositoriesTable selectedRepo={selectedRepo} />
+          </DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </DataViewEventsProvider>
+  );
+};