@patternfly/react-data-view 5.1.2 → 5.1.3

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

@@ -8,6 +8,8 @@ export interface DataViewToolbarProps extends PropsWithChildren {
     bulkSelect?: React.ReactNode;
     /** React component to display pagination */
     pagination?: React.ReactNode;
+    /** React component to display actions */
+    actions?: React.ReactNode;
 }
 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', bulkSelect, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "pagination", "children"]);
+    var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions = null, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "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,
             bulkSelect && (react_1.default.createElement(react_core_1.ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
+            actions,
             pagination && (react_1.default.createElement(react_core_1.ToolbarItem, { variant: react_core_1.ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
             children)));
 };

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

@@ -8,6 +8,8 @@ export interface DataViewToolbarProps extends PropsWithChildren {
     bulkSelect?: React.ReactNode;
     /** React component to display pagination */
     pagination?: React.ReactNode;
+    /** React component to display actions */
+    actions?: React.ReactNode;
 }
 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', bulkSelect, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "pagination", "children"]);
+    var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions = null, pagination, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "children"]);
     return (React.createElement(Toolbar, Object.assign({ ouiaId: ouiaId, className: className }, props),
         React.createElement(ToolbarContent, null,
             bulkSelect && (React.createElement(ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
+            actions,
             pagination && (React.createElement(ToolbarItem, { variant: ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
             children)));
 };

package/package.json

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { Button } from '@patternfly/react-core';
+import { ActionsColumn } from '@patternfly/react-table';
 
 interface Repository {
   id: number;
@@ -21,6 +22,24 @@ const repositories: Repository[] = [
   { id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
 ];
 
+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
+  }
+];
+
 // 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 } } },
@@ -28,7 +47,8 @@ const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspac
   branches,
   prs,
   workspaces,
-  lastCommit 
+  lastCommit,
+  { cell: <ActionsColumn items={rowActions}/>, props: { isActionCell: true } },
 ]);
 
 const columns: DataViewTh[] = [
@@ -37,7 +57,7 @@ const columns: DataViewTh[] = [
   { 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 } } }
+  { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } },
 ];
 
 const ouiaId = 'TableExample';

package/src/DataViewToolbar/DataViewToolbar.tsx

@@ -10,9 +10,11 @@ export interface DataViewToolbarProps extends PropsWithChildren {
   bulkSelect?: React.ReactNode;
   /** React component to display pagination */
   pagination?: React.ReactNode;
+  /** React component to display actions */
+  actions?: React.ReactNode;
 }
 
-export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, pagination, children, ...props }: DataViewToolbarProps) => (
+export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions = null, pagination, children, ...props }: DataViewToolbarProps) => (
   <Toolbar ouiaId={ouiaId} className={className} {...props}>
     <ToolbarContent>
       {bulkSelect && (
@@ -20,6 +22,7 @@ export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, oui
           {bulkSelect}
         </ToolbarItem>
       )}
+      {actions}
       {pagination && (
         <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
           {pagination}