@patternfly/react-table 4.56.1 → 4.58.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "4.56.1",
+  "version": "4.58.0",
   "description": "This library provides a set of React table components for use with the PatternFly 4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -31,10 +31,10 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.187.1",
-    "@patternfly/react-icons": "^4.38.1",
-    "@patternfly/react-styles": "^4.37.1",
-    "@patternfly/react-tokens": "^4.39.1",
+    "@patternfly/react-core": "^4.189.0",
+    "@patternfly/react-icons": "^4.40.0",
+    "@patternfly/react-styles": "^4.39.0",
+    "@patternfly/react-tokens": "^4.41.0",
     "lodash": "^4.17.19",
     "tslib": "^2.0.0"
   },
@@ -46,5 +46,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "3aaf05f6c91eac20f5bcdb775daa75e4e71eee92"
+  "gitHead": "232be76ce3bb9ee8af7b86f3b0ae3629eb65a761"
 }

package/src/components/Table/ActionsColumn.tsx

@@ -10,7 +10,14 @@ import {
   DropdownPosition
 } from '@patternfly/react-core/dist/esm/components/Dropdown/dropdownConstants';
 
-import { IAction, IExtraData, IRowData } from './TableTypes';
+import {
+  IAction,
+  IActionDropdownItem,
+  IActionOutsideItemButton,
+  IActionOutsideItemCustom,
+  IExtraData,
+  IRowData
+} from './TableTypes';
 
 export interface CustomActionsToggleProps {
   onToggle: (isOpen: boolean) => void;
@@ -82,10 +89,16 @@ export class ActionsColumn extends React.Component<ActionsColumnProps, ActionsCo
       <KebabToggle isDisabled={isDisabled} onToggle={this.onToggle} />
     );
 
+    const outsideDropdownItems = items.filter(a => a.isOutsideDropdown) as (
+      | IActionOutsideItemButton
+      | IActionOutsideItemCustom
+    )[];
+
+    const dropdownItems = items.filter(a => !a.isOutsideDropdown) as IActionDropdownItem[];
+
     return (
       <React.Fragment>
-        {items
-          .filter(item => item.isOutsideDropdown)
+        {outsideDropdownItems
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
           .map(({ title, itemKey, onClick, isOutsideDropdown, ...props }, key) =>
             typeof title === 'string' ? (
@@ -107,26 +120,24 @@ export class ActionsColumn extends React.Component<ActionsColumnProps, ActionsCo
           position={dropdownPosition}
           direction={dropdownDirection}
           isOpen={isOpen}
-          dropdownItems={items
-            .filter(item => !item.isOutsideDropdown)
-            .map(({ title, itemKey, onClick, isSeparator, ...props }, key) =>
-              isSeparator ? (
-                <DropdownSeparator {...props} key={itemKey || key} data-key={itemKey || key} />
-              ) : (
-                <DropdownItem
-                  component="button"
-                  onClick={event => {
-                    this.onClick(event, onClick);
-                    this.onToggle(!isOpen);
-                  }}
-                  {...props}
-                  key={itemKey || key}
-                  data-key={itemKey || key}
-                >
-                  {title}
-                </DropdownItem>
-              )
-            )}
+          dropdownItems={dropdownItems.map(({ title, itemKey, onClick, isSeparator, ...props }, key) =>
+            isSeparator ? (
+              <DropdownSeparator {...props} key={itemKey || key} data-key={itemKey || key} />
+            ) : (
+              <DropdownItem
+                component="button"
+                onClick={event => {
+                  this.onClick(event, onClick);
+                  this.onToggle(!isOpen);
+                }}
+                {...props}
+                key={itemKey || key}
+                data-key={itemKey || key}
+              >
+                {title}
+              </DropdownItem>
+            )
+          )}
           isPlain
           {...(rowData && rowData.actionProps)}
         />

package/src/components/Table/Body.tsx

@@ -57,21 +57,27 @@ class ContextBody extends React.Component<TableBodyProps, {}> {
       row,
       rowProps: extendedRowProps,
       onClick: (event: React.MouseEvent) => {
+        const tagName = (event.target as HTMLElement).tagName;
         const computedData = {
-          isInput: (event.target as HTMLElement).tagName === 'INPUT',
-          isButton: (event.target as HTMLElement).tagName === 'BUTTON'
+          isInput: tagName === 'INPUT',
+          isButton: tagName === 'BUTTON'
         };
 
         onRowClick(event, row, rowProps, computedData);
       },
       onKeyDown: (event: React.KeyboardEvent) => {
+        const targetElement = event.target as HTMLElement;
+        const tagName = targetElement.tagName;
+        const computedData = {
+          isInput: tagName === 'INPUT',
+          isButton: tagName === 'BUTTON'
+        };
         if (event.key === 'Enter' || event.key === ' ') {
-          const computedData = {
-            isInput: (event.target as HTMLElement).tagName === 'INPUT',
-            isButton: (event.target as HTMLElement).tagName === 'BUTTON'
-          };
           onRowClick(event, row, rowProps, computedData);
-          if (!computedData.isInput) {
+
+          // prevent event default if space is typed while focusing on a hoverable row
+          // so that the page does not scroll when trying to use spacebar to select a row
+          if (event.key === ' ' && !!targetElement.closest('.pf-m-hoverable')) {
             event.preventDefault();
           }
         }

package/src/components/Table/TableTypes.tsx

@@ -146,22 +146,54 @@ export interface ISortBy {
   defaultDirection?: 'asc' | 'desc';
 }
 
-export interface IAction extends Omit<DropdownItemProps, 'title' | 'onClick'>, Pick<ButtonProps, 'variant'> {
+export interface ISeparator {
   /** Flag indicating an item on actions menu is a separator, rather than an action */
-  isSeparator?: boolean;
-  /** Key of actions menu item */
-  itemKey?: string;
-  /** Content to display in the actions menu item */
-  title?: string | React.ReactNode;
+  isSeparator: true;
+}
+
+export interface IActionSeparator extends ISeparator {
+  isOutsideDropdown?: false;
+}
+
+interface IActionClickable {
   /** Click handler for the actions menu item */
   onClick?: (event: React.MouseEvent, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void;
-  /** Flag indicating this action should be placed outside the actions menu, beside the toggle */
-  isOutsideDropdown?: boolean;
 }
 
-export interface ISeparator extends IAction {
-  isSeparator: boolean;
-}
+export type IActionOutsideItemBase = IActionClickable & {
+  /** Flag indicating this action should be placed outside the actions menu, beside the toggle */
+  isOutsideDropdown: true;
+  /** Flag indicating an item on actions menu is not a separator, added to make it easy to distinguish */
+  isSeparator?: false;
+  /** Key of actions menu item */
+  itemKey?: undefined;
+};
+
+export type IActionOutsideItemButton = IActionOutsideItemBase &
+  Omit<ButtonProps, 'onClick'> & {
+    title: string;
+    /** Key of actions menu item */
+    itemKey?: string;
+  };
+
+export type IActionOutsideItemCustom = IActionOutsideItemBase & {
+  title: Exclude<React.ReactNode, string>;
+  [key: string]: any;
+};
+
+export type IActionDropdownItem = Omit<DropdownItemProps, 'title' | 'onClick'> &
+  IActionClickable & {
+    /** Flag indicating an item on actions menu is not a separator, added to make it easy to distinguish */
+    isSeparator?: false;
+    /** Flag indicating this action should be placed outside the actions menu, beside the toggle */
+    isOutsideDropdown?: false;
+    /** Key of actions menu item */
+    itemKey?: string;
+    /** Content to display in the actions menu item */
+    title: React.ReactNode;
+  };
+
+export type IAction = IActionSeparator | IActionDropdownItem | IActionOutsideItemButton | IActionOutsideItemCustom;
 
 export type IActions = (IAction | ISeparator)[];
 export type IActionsResolver = (rowData: IRowData, extraData: IExtraData) => (IAction | ISeparator)[];

package/src/components/TableComposable/examples/ComposableTable.md

@@ -163,6 +163,9 @@ This example demonstrates adding actions as the last column. The header's last c
 
 To make a cell an action cell, render an `ActionsColumn` component inside a row's last `Td` and pass an array of `IAction` objects via the `items` prop of `ActionsColumn`.
 
+Look [here](https://github.com/patternfly/patternfly-react/blob/main/packages/react-table/src/components/Table/TableTypes.tsx)
+for the `IAction` type to see what it looks like.
+
 ```ts file="ComposableTableActions.tsx"
 ```