@patternfly/react-data-view 5.4.0 → 5.4.1

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StackProps } from '@patternfly/react-core';
 import { DataViewSelection } from '../InternalContext';
 export declare const DataViewState: {
     readonly empty: "empty";
@@ -6,7 +7,8 @@ export declare const DataViewState: {
     readonly error: "error";
 };
 export type DataViewState = typeof DataViewState[keyof typeof DataViewState];
-export interface DataViewProps {
+/** extends StackProps */
+export interface DataViewProps extends StackProps {
     /** Content rendered inside the data view */
     children: React.ReactNode;
     /** Custom OUIA ID */

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StackProps } from '@patternfly/react-core';
 import { DataViewSelection } from '../InternalContext';
 export declare const DataViewState: {
     readonly empty: "empty";
@@ -6,7 +7,8 @@ export declare const DataViewState: {
     readonly error: "error";
 };
 export type DataViewState = typeof DataViewState[keyof typeof DataViewState];
-export interface DataViewProps {
+/** extends StackProps */
+export interface DataViewProps extends StackProps {
     /** Content rendered inside the data view */
     children: React.ReactNode;
     /** Custom OUIA ID */

package/package.json

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

@@ -72,13 +72,15 @@ The `DataViewTable` component accepts the following props:
 
 - optional `props` (`TableProps`) that are passed down to the `<Table>` component, except for `onSelect`, which is managed internally.
 
+It is also possible to disable row selection using the `isSelectDisabled` function passed to the wrapping data view component through `selection`.
+
 ### Tree table example
 This example shows the tree table variant with expandable rows, custom icons for leaf and parent nodes. Tree table is turned on by passing `isTreeTable` flag to the `DataViewTable` component. You can pass `collapsedIcon`, `expandedIcon` or `leafIcon` to be displayen rows with given status. The tree table rows have to be defined in a format of object with following keys:
   - `row` (`DataViewTd[]`) defining the content for each cell in the row.
   - `id` (`string`) for the row (used to match items in selection end expand the rows).
   - optional `children` (`DataViewTrTree[]`) defining the children rows.
 
-It is also possible to disable row selection using the `isSelectDisabled` function passed to the wrapping data view component.
+It is also possible to disable row selection using the `isSelectDisabled` function passed to the wrapping data view component through `selection`.
 
 ```js file="./DataViewTableTreeExample.tsx"
 

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

@@ -18,6 +18,7 @@ import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { useDataViewEventsContext, DataViewEventsContext, DataViewEventsProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext';
+import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 
 The **data view  events context** provides a way of listening to the data view events from the outside of the component.

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

@@ -3,6 +3,8 @@ import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentB
 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;
@@ -64,25 +66,45 @@ 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 = (repo: Repository | undefined) => {
-      trigger(EventTypes.rowClick, repo);
+    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),
+      row: [ ...Object.values(repo), { cell: <ActionsColumn items={rowActions}/>, props: { isActionCell: true } } ],
       props: {
         isClickable: true,
-        onRowClick: () => handleRowClick(selectedRepo?.name === repo.name ? undefined : repo),
+        onRowClick: (event) => handleRowClick(event, selectedRepo?.name === repo.name ? undefined : repo),
         isRowSelected: selectedRepo?.name === repo.name
       }
     }));
   }, [ selectedRepo?.name, trigger ]);
 
   return (
-    <DataView>
+    <DataView selection={selection}>
       <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
     </DataView>
   );

package/src/DataView/DataView.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Stack, StackItem } from '@patternfly/react-core';
+import { Stack, StackItem, StackProps } from '@patternfly/react-core';
 import { DataViewSelection, InternalContextProvider } from '../InternalContext';
 
 export const DataViewState = {
@@ -10,7 +10,8 @@ export const DataViewState = {
 
 export type DataViewState = typeof DataViewState[keyof typeof DataViewState];
 
-export interface DataViewProps {
+/** extends StackProps */
+export interface DataViewProps extends StackProps {
   /** Content rendered inside the data view */
   children: React.ReactNode;
   /** Custom OUIA ID */