@patternfly/react-data-view 1.0.0-prerelease.4 → 1.0.0-prerelease.5

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

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

package/dist/cjs/DataView/DataView.test.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const DataView_1 = __importDefault(require("./DataView"));
+const layoutItemStyling = {
+    width: '100%',
+    height: '5rem',
+    padding: 'var(--pf-t--global--spacer--md)',
+    border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
+};
+describe('DataView component', () => {
+    test('should render correctly', () => {
+        expect((0, react_2.render)(react_1.default.createElement(DataView_1.default, null,
+            react_1.default.createElement("div", { style: layoutItemStyling }, "Header"),
+            react_1.default.createElement("div", { style: layoutItemStyling }, "Data representation"),
+            react_1.default.createElement("div", { style: layoutItemStyling }, "Footer")))).toMatchSnapshot();
+    });
+});

package/dist/cjs/DataViewToolbar/DataViewToolbar.d.ts

@@ -1,11 +1,13 @@
-import React from 'react';
-export interface DataViewToolbarProps {
+import React, { PropsWithChildren } from 'react';
+export interface DataViewToolbarProps extends PropsWithChildren {
     /** Toolbar className */
     className?: string;
     /** Custom OUIA ID */
     ouiaId?: string;
+    /** React component to display bulk select */
+    bulkSelect?: React.ReactNode;
     /** React component to display pagination */
     pagination?: React.ReactNode;
 }
-export declare const DataViewToolbar: React.FC<React.PropsWithChildren<DataViewToolbarProps>>;
+export declare const DataViewToolbar: React.FC<DataViewToolbarProps>;
 export default DataViewToolbar;

package/dist/cjs/DataViewToolbar/DataViewToolbar.js

@@ -18,10 +18,11 @@ exports.DataViewToolbar = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const DataViewToolbar = (_a) => {
-    var { className, ouiaId = 'DataViewToolbar', pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "pagination", "children"]);
+    var { className, ouiaId = 'DataViewToolbar', bulkSelect, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "pagination", "children"]);
     return (react_1.default.createElement(react_core_1.Toolbar, Object.assign({ ouiaId: ouiaId, className: className }, props),
         react_1.default.createElement(react_core_1.ToolbarContent, null,
-            pagination && (react_1.default.createElement(react_core_1.ToolbarItem, { variant: react_core_1.ToolbarItemVariant.pagination }, pagination)),
+            bulkSelect && (react_1.default.createElement(react_core_1.ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
+            pagination && (react_1.default.createElement(react_core_1.ToolbarItem, { variant: react_core_1.ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
             children)));
 };
 exports.DataViewToolbar = DataViewToolbar;

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

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

package/dist/cjs/DataViewToolbar/DataViewToolbar.test.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const DataViewToolbar_1 = __importDefault(require("./DataViewToolbar"));
+const react_core_1 = require("@patternfly/react-core");
+describe('DataViewToolbar component', () => {
+    test('should render correctly', () => {
+        expect((0, react_2.render)(react_1.default.createElement(DataViewToolbar_1.default, { pagination: react_1.default.createElement(react_core_1.Pagination, { page: 1, perPage: 10 }) }))).toMatchSnapshot();
+    });
+});

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

@@ -1 +1,2 @@
 export * from './pagination';
+export * from './selection';

package/dist/cjs/Hooks/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./pagination"), exports);
+__exportStar(require("./selection"), exports);

package/dist/cjs/Hooks/pagination.d.ts

@@ -1,8 +1,11 @@
 export interface UseDataViewPaginationProps {
+    /** Initial page */
     page?: number;
+    /** Items per page */
     perPage: number;
 }
 export interface DataViewPaginationProps extends UseDataViewPaginationProps {
+    /** Current page number */
     page: number;
 }
 export declare const useDataViewPagination: ({ page, perPage }: UseDataViewPaginationProps) => {

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

@@ -0,0 +1,11 @@
+export interface UseDataViewSelectionProps {
+    /** 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) => {
+    selected: any[];
+    onSelect: (isSelecting: boolean, items?: any[] | any) => void;
+    isSelected: (item: any) => boolean;
+};

package/dist/cjs/Hooks/selection.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataViewSelection = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const react_1 = require("react");
+const useDataViewSelection = (props) => {
+    var _a;
+    const [selected, setSelected] = (0, react_1.useState)((_a = props.initialSelected) !== null && _a !== void 0 ? _a : []);
+    const matchOption = props.matchOption ? props.matchOption : (option, another) => (option === another);
+    const onSelect = (isSelecting, items) => {
+        isSelecting ?
+            setSelected(prev => {
+                const newSelectedItems = [...prev];
+                (Array.isArray(items) ? items : [items]).forEach(newItem => !prev.some(prevItem => matchOption(prevItem, newItem)) && newSelectedItems.push(newItem));
+                return newSelectedItems;
+            })
+            : 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);
+    return {
+        selected,
+        onSelect,
+        isSelected
+    };
+};
+exports.useDataViewSelection = useDataViewSelection;

package/dist/cjs/Hooks/selection.test.d.ts

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

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

@@ -0,0 +1,55 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const selection_1 = require("./selection");
+describe('useDataViewSelection', () => {
+    it('should get initial state correctly - no initialSelected', () => {
+        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({}));
+        expect(result.current).toEqual({
+            selected: [],
+            onSelect: expect.any(Function),
+            isSelected: expect.any(Function),
+        });
+    });
+    it('should get initial state correctly - with initialSelected', () => {
+        const initialSelected = [{ id: 1, name: 'test1' }];
+        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ initialSelected }));
+        expect(result.current).toEqual({
+            selected: initialSelected,
+            onSelect: expect.any(Function),
+            isSelected: expect.any(Function),
+        });
+    });
+    it('should select items correctly - objects', () => __awaiter(void 0, void 0, void 0, function* () {
+        const initialSelected = [{ id: 1, name: 'test1' }];
+        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ initialSelected }));
+        yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.onSelect(true, { id: 2, name: 'test2' });
+        }));
+        expect(result.current.selected).toEqual([...initialSelected, { id: 2, name: 'test2' }]);
+    }));
+    it('should deselect items correctly - strings', () => __awaiter(void 0, void 0, void 0, function* () {
+        const initialSelected = ['test1', 'test2'];
+        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ initialSelected }));
+        yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.onSelect(false, 'test2');
+        }));
+        expect(result.current.selected).toEqual(['test1']);
+    }));
+    it('should check if item is selected correctly - objects', () => {
+        const initialSelected = [{ id: 1, name: 'test1' }, { id: 2, name: 'test2' }];
+        const { result } = (0, react_1.renderHook)(() => (0, selection_1.useDataViewSelection)({ initialSelected, matchOption: (a, b) => a.id === b.id }));
+        expect(result.current.isSelected({ id: 1, name: 'test1' })).toBe(true);
+        expect(result.current.isSelected({ id: 3, name: 'test2' })).toBe(false);
+    });
+});

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

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

package/dist/esm/DataView/DataView.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DataView from './DataView';
+const layoutItemStyling = {
+    width: '100%',
+    height: '5rem',
+    padding: 'var(--pf-t--global--spacer--md)',
+    border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
+};
+describe('DataView component', () => {
+    test('should render correctly', () => {
+        expect(render(React.createElement(DataView, null,
+            React.createElement("div", { style: layoutItemStyling }, "Header"),
+            React.createElement("div", { style: layoutItemStyling }, "Data representation"),
+            React.createElement("div", { style: layoutItemStyling }, "Footer")))).toMatchSnapshot();
+    });
+});

package/dist/esm/DataViewToolbar/DataViewToolbar.d.ts

@@ -1,11 +1,13 @@
-import React from 'react';
-export interface DataViewToolbarProps {
+import React, { PropsWithChildren } from 'react';
+export interface DataViewToolbarProps extends PropsWithChildren {
     /** Toolbar className */
     className?: string;
     /** Custom OUIA ID */
     ouiaId?: string;
+    /** React component to display bulk select */
+    bulkSelect?: React.ReactNode;
     /** React component to display pagination */
     pagination?: React.ReactNode;
 }
-export declare const DataViewToolbar: React.FC<React.PropsWithChildren<DataViewToolbarProps>>;
+export declare const DataViewToolbar: React.FC<DataViewToolbarProps>;
 export default DataViewToolbar;

package/dist/esm/DataViewToolbar/DataViewToolbar.js

@@ -12,10 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
 export const DataViewToolbar = (_a) => {
-    var { className, ouiaId = 'DataViewToolbar', pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "pagination", "children"]);
+    var { className, ouiaId = 'DataViewToolbar', bulkSelect, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "pagination", "children"]);
     return (React.createElement(Toolbar, Object.assign({ ouiaId: ouiaId, className: className }, props),
         React.createElement(ToolbarContent, null,
-            pagination && (React.createElement(ToolbarItem, { variant: ToolbarItemVariant.pagination }, pagination)),
+            bulkSelect && (React.createElement(ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
+            pagination && (React.createElement(ToolbarItem, { variant: ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
             children)));
 };
 export default DataViewToolbar;

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

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

package/dist/esm/DataViewToolbar/DataViewToolbar.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DataViewToolbar from './DataViewToolbar';
+import { Pagination } from '@patternfly/react-core';
+describe('DataViewToolbar component', () => {
+    test('should render correctly', () => {
+        expect(render(React.createElement(DataViewToolbar, { pagination: React.createElement(Pagination, { page: 1, perPage: 10 }) }))).toMatchSnapshot();
+    });
+});

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

@@ -1 +1,2 @@
 export * from './pagination';
+export * from './selection';

package/dist/esm/Hooks/index.js

@@ -1 +1,2 @@
 export * from './pagination';
+export * from './selection';

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

@@ -1,8 +1,11 @@
 export interface UseDataViewPaginationProps {
+    /** Initial page */
     page?: number;
+    /** Items per page */
     perPage: number;
 }
 export interface DataViewPaginationProps extends UseDataViewPaginationProps {
+    /** Current page number */
     page: number;
 }
 export declare const useDataViewPagination: ({ page, perPage }: UseDataViewPaginationProps) => {

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

@@ -0,0 +1,11 @@
+export interface UseDataViewSelectionProps {
+    /** 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) => {
+    selected: any[];
+    onSelect: (isSelecting: boolean, items?: any[] | any) => void;
+    isSelected: (item: any) => boolean;
+};

package/dist/esm/Hooks/selection.js

@@ -0,0 +1,22 @@
+/* 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);
+    const onSelect = (isSelecting, items) => {
+        isSelecting ?
+            setSelected(prev => {
+                const newSelectedItems = [...prev];
+                (Array.isArray(items) ? items : [items]).forEach(newItem => !prev.some(prevItem => matchOption(prevItem, newItem)) && newSelectedItems.push(newItem));
+                return newSelectedItems;
+            })
+            : 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);
+    return {
+        selected,
+        onSelect,
+        isSelected
+    };
+};

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

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

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

@@ -0,0 +1,53 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import '@testing-library/jest-dom';
+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({}));
+        expect(result.current).toEqual({
+            selected: [],
+            onSelect: expect.any(Function),
+            isSelected: expect.any(Function),
+        });
+    });
+    it('should get initial state correctly - with initialSelected', () => {
+        const initialSelected = [{ id: 1, name: 'test1' }];
+        const { result } = renderHook(() => useDataViewSelection({ initialSelected }));
+        expect(result.current).toEqual({
+            selected: initialSelected,
+            onSelect: expect.any(Function),
+            isSelected: expect.any(Function),
+        });
+    });
+    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 }));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.onSelect(true, { id: 2, name: 'test2' });
+        }));
+        expect(result.current.selected).toEqual([...initialSelected, { id: 2, name: 'test2' }]);
+    }));
+    it('should deselect items correctly - strings', () => __awaiter(void 0, void 0, void 0, function* () {
+        const initialSelected = ['test1', 'test2'];
+        const { result } = renderHook(() => useDataViewSelection({ initialSelected }));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.onSelect(false, 'test2');
+        }));
+        expect(result.current.selected).toEqual(['test1']);
+    }));
+    it('should check if item is selected correctly - objects', () => {
+        const initialSelected = [{ id: 1, name: 'test1' }, { id: 2, name: 'test2' }];
+        const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }));
+        expect(result.current.isSelected({ id: 1, name: 'test1' })).toBe(true);
+        expect(result.current.isSelected({ id: 3, name: 'test2' })).toBe(false);
+    });
+});

package/generate-fed-package-json.js

@@ -1,14 +1,13 @@
 const fse = require('fs-extra');
-const glob = require('glob');
+const { globSync } = require('glob');
 const path = require('path');
 
 const root = process.cwd();
 
-const sourceFiles = glob
-  .sync(`${root}/src/*/`)
+const sourceFiles = globSync(`${root}/src/*/`)
   .map((name) => name.replace(/\/$/, ''));
   
-const indexTypings = glob.sync(`${root}/src/index.d.ts`);
+const indexTypings = globSync(`${root}/src/index.d.ts`);
 
 const ENV_AGNOSTIC_ROOT = `${root}/dist/dynamic`
 
@@ -23,9 +22,9 @@ async function copyTypings(files, dest) {
 
 async function createPackage(file) {
   const fileName = file.split('/').pop();
-  const esmSource = glob.sync(`${root}/dist/esm/${fileName}/**/index.js`)[0];
-  const cjsSource = glob.sync(`${root}/dist/cjs/${fileName}/**/index.js`)[0];
-  const typingsSource = glob.sync(`${root}/dist/esm/${fileName}/**/index.d.ts`)[0]
+  const esmSource = globSync(`${root}/dist/esm/${fileName}/**/index.js`)[0];
+  const cjsSource = globSync(`${root}/dist/cjs/${fileName}/**/index.js`)[0];
+  const typingsSource = globSync(`${root}/dist/esm/${fileName}/**/index.d.ts`)[0]
   /**
    * Prevent creating package.json for directories with no JS files (like CSS directories)
    */
@@ -46,7 +45,7 @@ async function createPackage(file) {
     main: cjsRelative,
     module: esmRelative,
   };
-  const typings = glob.sync(`${root}/src/${fileName}/*.d.ts`);
+  const typings = globSync(`${root}/src/${fileName}/*.d.ts`);
   const cmds = [];
   content.typings = tsRelative;
   cmds.push(copyTypings(typings, `${root}/dist/${fileName}`));

package/generate-index.js

@@ -1,12 +1,12 @@
 const fse = require('fs-extra');
-const glob = require('glob');
+const { globSync } = require('glob');
 const path = require('path');
 
 const root = process.cwd();
 
 const ENV_AGNOSTIC_ROOT = `${root}/src`
 
-const sourceFiles = glob.sync(path.resolve(__dirname, './src/*/index.ts'))
+const sourceFiles = globSync(path.resolve(__dirname, './src/*/index.ts'))
 
 async function generateIndex(files) {
   // ensure the dynamic root exists

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "1.0.0-prerelease.4",
+  "version": "1.0.0-prerelease.5",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -31,9 +31,10 @@
     "tag": "prerelease"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.55",
-    "@patternfly/react-icons": "^6.0.0-alpha.20",
-    "@patternfly/react-table": "^6.0.0-alpha.55",
+    "@patternfly/react-core": "^6.0.0-alpha.69",
+    "@patternfly/react-icons": "^6.0.0-alpha.24",
+    "@patternfly/react-table": "^6.0.0-alpha.69",
+    "@patternfly/react-component-groups": "^6.0.0-alpha.2",
     "react-jss": "^10.10.0",
     "clsx": "^2.1.1"
   },
@@ -43,8 +44,8 @@
   },
   "devDependencies": {
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/documentation-framework": "^6.0.0-alpha.22",
-    "@patternfly/patternfly": "^6.0.0-alpha.117",
+    "@patternfly/documentation-framework": "^6.0.0-alpha.49",
+    "@patternfly/patternfly": "6.0.0-alpha.139",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",

package/patternfly-docs/content/extensions/data-view/examples/{DataViewToolbar/DataViewToolbar.md → Components/Components.md}

@@ -5,21 +5,25 @@ section: extensions
 subsection: Data view
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: Data view toolbar
+id: Components
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 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']
-sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbar.md
+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';
 
-The **data view toolbar** component renders a default opinionated data view toolbar.
+## Data view toolbar
 
-### Basic example
+The **data view toolbar** component renders a default opinionated data view toolbar above or below the data section. 
+
+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.
 
-Data view toolbar can display a pagination using the `pagination` property accepting a React node. You can also pass a custom `ouiaId` for testing purposes.
+### Basic example
 
 ```js file="./DataViewToolbarExample.tsx"
 

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { BulkSelect } from '@patternfly/react-component-groups';
+import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+
+export const BasicExample: React.FunctionComponent = () => (
+  <DataViewToolbar 
+    pagination={
+      <Pagination page={1} perPage={10} />
+    }
+    bulkSelect={
+      <BulkSelect
+        selectedCount={0}
+        pageCount={5}
+        onSelect={() => null}
+      />  
+    } 
+  />
+)

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

@@ -0,0 +1,77 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Data view
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Functionality
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+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: 3
+sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md
+---
+import { useMemo } from 'react';
+import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+This is a list of functionality you can use to manage data displayed in the **data view**.
+
+# Pagination
+Allows to display data records on multiple pages and display the pagination state.
+
+### Toolbar usage
+Data view toolbar can display a pagination using the `pagination` property accepting a React node. You can also pass a custom `ouiaId` for testing purposes.
+
+### Pagination state
+
+The `useDataViewPagination` hook manages the pagination state of the data view. 
+
+**Initial values:**
+- `perPage` initial value
+- (optional) `page` initial value
+
+The retrieved values are named to match the PatternFly [pagination](/components/pagination) component props, so you can easily spread them.
+
+**Return values:**
+- current `page` number
+- `onSetPage` to modify current page
+- items `perPage` value
+- `onPerPageSelect` to modify per page value
+
+### Pagination example
+```js file="./PaginationExample.tsx"
+
+```
+
+# Selection
+Allows to select data records inside the data view and show the selection state.
+
+### Toolbar usage
+Data view toolbar can display a bulk selection component using the `bulkSelect` property accepting a React node. You can make use of a predefined [bulk select](/extensions/component-groups/bulk-select) from the [component groups](/extensions/component-groups/about-component-groups) extension.
+
+### Selection state
+
+The `useDataViewSelection` hook manages the selection state of the data view. 
+
+**Initial values:**
+- (optional) `initialSelected` array of record's identifiers selected by default 
+- (optional) `matchOption` function to check if given record is selected
+
+*When no `matchOption` is passed, the `Array.prototype.includes()` operation is performed on the `selected` array.*
+
+**Return values:**
+- `selected` array of currently selected records
+- `isSelected` function returning the selection state for given record
+- `onSelect` callback to modify the selection state and accepting `isSelecting` flag indicating if records are changing to selected or deselected and `items` containing affected records 
+
+### Selection example
+
+```js file="./SelectionExample.tsx"
+
+```
+

package/patternfly-docs/content/extensions/data-view/examples/{DataView/DataViewPredefinedLayoutExample.tsx → Functionality/PaginationExample.tsx}

@@ -45,7 +45,7 @@ export const BasicExample: React.FunctionComponent = () => {
 
   return (
     <DataView>
-      <DataViewToolbar pagination={<Pagination ouiaId={`${ouiaId}Header-pagination`} perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
+      <DataViewToolbar ouiaId='DataViewHeader' pagination={<Pagination perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
       <Table aria-label="Repositories table" ouiaId={ouiaId}>
         <Thead data-ouia-component-id={`${ouiaId}-thead`}>
           <Tr ouiaId={`${ouiaId}-tr-head`}>
@@ -60,6 +60,6 @@ export const BasicExample: React.FunctionComponent = () => {
           ))}
         </Tbody>
       </Table>
-      <DataViewToolbar pagination={<Pagination isCompact ouiaId={`${ouiaId}Footer-pagination`} perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
+      <DataViewToolbar ouiaId='DataViewFooter' pagination={<Pagination isCompact perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
     </DataView>
   )}