feat(selection): Add Selection to DataView

Author: fhlavac

packages/module/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbar.md renamed to packages/module/patternfly-docs/content/extensions/data-view/examples/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"
 

packages/module/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}
+      />  
+    } 
+  />
+)

packages/module/patternfly-docs/content/extensions/data-view/examples/DataViewToolbar/DataViewToolbarExample.tsx

@@ -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"
+
+```
+

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

@@ -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>
   )}

packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataViewPredefinedLayoutExample.tsx renamed to packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/PaginationExample.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
+import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+}
+
+const repositories: Repository[] = [
+  { 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 cols = {
+  name: 'Repositories',
+  branches: 'Branches',
+  prs: 'Pull requests',
+  workspaces: 'Workspaces',
+  lastCommit: 'Last commit'
+};
+
+const ouiaId = 'LayoutExample';
+
+export const BasicExample: React.FunctionComponent = () => { 
+  const selection = useDataViewSelection({});
+  const { selected, onSelect, isSelected } = selection;
+
+  const handleBulkSelect = (value: BulkSelectValue) => {
+    value === BulkSelectValue.none && onSelect(false);
+    value === BulkSelectValue.all && onSelect(true, repositories);
+  };
+
+  return (
+    <DataView>
+      <DataViewToolbar 
+        ouiaId='DataViewHeader'
+        bulkSelect={
+          <BulkSelect
+            canSelectAll
+            isDataPaginated={false}
+            totalCount={repositories.length}
+            selectedCount={selected.length}
+            onSelect={handleBulkSelect}
+          />
+        } 
+      />
+      <Table aria-label="Repositories table" ouiaId={ouiaId}>
+        <Thead data-ouia-component-id={`${ouiaId}-thead`}>
+          <Tr ouiaId={`${ouiaId}-tr-head`}>
+            <Th key="row-select"/>
+            {Object.values(cols).map((column, index) => (
+              <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {repositories.map((repo, rowIndex) => (
+            <Tr key={repo.name} ouiaId={`${ouiaId}-tr-${rowIndex}`}>
+              <Td
+                key={`select-${rowIndex}`}
+                select={{
+                  rowIndex,
+                  onSelect: (_event, isSelecting) => onSelect(isSelecting, repo),
+                  isSelected: isSelected(repo),
+                  isDisabled: false
+                }}
+              />
+              {Object.keys(cols).map((column, colIndex) => (
+                <Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>{repo[column]}</Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </DataView>
+  );
+}

packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/SelectionExample.tsx

@@ -5,16 +5,18 @@ section: extensions
 subsection: Data view
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: Data view layout
+id: Layout
 # 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: 2
 propComponents: ['DataView']
-sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md
+sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/Layout.md
 ---
 import { useMemo } from 'react';
-import { useDataViewPagination } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
 import DataViewToolbar from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
 
@@ -24,14 +26,14 @@ The **data view** component renders record data in a configured layout.
 
 Data view is expected to consist of header, data part and footer stacked below each other and passed as `children`.
 
-```js file="./DataViewLayoutExample.tsx"
+```js file="./AbstractLayoutExample.tsx"
 
 ```
 
 ### Predefined layout components
 
-You can make use of the predefined layout components to display a default header and footer. See [data view toolbar](/data-view/data-view-toolbar) for more information 
+You can make use of the predefined layout components to display a default header and footer. See [data view toolbar](/extensions/data-view/components#dataviewtoolbar) for more information 
 
-```js file="./DataViewPredefinedLayoutExample.tsx"
+```js file="./PredefinedLayoutExample.tsx"
 
 ```