@patternfly/react-table 4.29.72 → 4.30.2

package/src/components/Table/examples/Table.md

@@ -195,99 +195,6 @@ class SimpleTable extends React.Component {
 }
 ```
 
-### Row click handler and header cell tooltips/popovers
-
-```js
-import React from 'react';
-import { Table, TableHeader, TableBody, textCenter } from '@patternfly/react-table';
-import styles from '@patternfly/react-styles/css/components/Table/table';
-
-class RowClickTable extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      columns: [
-        {
-          title: 'Repositories',
-          transforms: [
-            info({
-              tooltip: 'More information about repositories',
-              className: 'repositories-info-tip',
-              tooltipProps: {
-                isContentLeftAligned: true
-              }
-            })
-          ]
-        },
-        'Branches',
-        {
-          title: 'Pull requests',
-          transforms: [
-            info({
-              popover: (
-                <div>
-                  More <strong>information</strong> on pull requests
-                </div>
-              ),
-              ariaLabel: 'More information on pull requests',
-              popoverProps: {
-                headerContent: 'Pull requests',
-                footerContent: <a href="">Click here for even more info</a>
-              }
-            })
-          ]
-        },
-        'Workspaces',
-        {
-          title: 'Last commit',
-          transforms: [textCenter],
-          cellTransforms: [textCenter]
-        }
-      ],
-      rows: [
-        ['Repository one', 'Branch one', 'PR one', 'Workspace one', 'Commit one'],
-        {
-          cells: [
-            {
-              title: <div>one - 2</div>,
-              props: { title: 'hover title', colSpan: 3 }
-            },
-            'four - 2',
-            'five - 2'
-          ]
-        },
-        {
-          cells: [
-            'one - 3',
-            'two - 3',
-            'three - 3',
-            'four - 3',
-            {
-              title: 'five - 3 (not centered)',
-              props: { textCenter: false }
-            }
-          ]
-        }
-      ]
-    };
-    this.rowClickHandler = (event, row) => {
-      console.log('handle row click', row);
-    };
-  }
-
-  render() {
-    const { columns, rows } = this.state;
-
-    return (
-      <Table caption="Row click handler table" cells={columns} rows={rows}>
-        <TableHeader className={styles.modifiers.nowrap} />
-        <TableBody onRowClick={this.rowClickHandler} />
-      </Table>
-    );
-  }
-}
-```
-
 ### Custom row wrapper
 
 Custom row wrappers are passed to the `Table` component via the `rowWrapper` prop.
@@ -458,7 +365,7 @@ class SortableTable extends React.Component {
 }
 ```
 
-### Selectable
+### Selectable with checkbox
 
 To enable row selection, set the `onSelect` callback prop on the Table.
 
@@ -637,6 +544,116 @@ class SelectableTable extends React.Component {
 }
 ```
 
+### Hoverable rows, selectable rows, and header cell tooltips/popovers
+
+This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view.
+
+```js
+import React from 'react';
+import { Table, TableHeader, TableBody, textCenter } from '@patternfly/react-table';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+
+class RowClickTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      columns: [
+        {
+          title: 'Repositories',
+          transforms: [
+            info({
+              tooltip: 'More information about repositories',
+              className: 'repositories-info-tip',
+              tooltipProps: {
+                isContentLeftAligned: true
+              }
+            })
+          ]
+        },
+        'Branches',
+        {
+          title: 'Pull requests',
+          transforms: [
+            info({
+              popover: (
+                <div>
+                  More <strong>information</strong> on pull requests
+                </div>
+              ),
+              ariaLabel: 'More information on pull requests',
+              popoverProps: {
+                headerContent: 'Pull requests',
+                footerContent: <a href="">Click here for even more info</a>
+              }
+            })
+          ]
+        },
+        'Workspaces',
+        {
+          title: 'Last commit',
+          transforms: [textCenter],
+          cellTransforms: [textCenter]
+        }
+      ],
+      rows: [
+        {
+          cells: ['Repository one', 'Branch one', 'PR one', 'Workspace one', 'Commit one'],
+          isHoverable: true,
+          isRowSelected: false
+        },
+        {
+          cells: [
+            {
+              title: <div>one - 2</div>,
+              props: { title: 'hover title', colSpan: 3 }
+            },
+            'four - 2',
+            'five - 2'
+          ],
+          isHoverable: true,
+          isRowSelected: false
+        },
+        {
+          cells: [
+            'one - 3',
+            'two - 3',
+            'three - 3',
+            'four - 3',
+            {
+              title: 'five - 3 (not centered)',
+              props: { textCenter: false }
+            }
+          ],
+          isHoverable: true,
+          isRowSelected: false
+        }
+      ]
+    };
+    
+    this.rowClickHandler = (event, row, rowProps) => {
+      this.setState(prevState => {
+        const updatedRows = [...prevState.rows];
+        updatedRows[rowProps.rowIndex].isRowSelected = !prevState.rows[rowProps.rowIndex].isRowSelected;
+        return {
+          rows: updatedRows
+        }
+      });
+    }
+  }
+
+  render() {
+    const { columns, rows } = this.state;
+
+    return (
+      <Table caption="Row click handler table" cells={columns} rows={rows}>
+        <TableHeader className={styles.modifiers.nowrap} />
+        <TableBody onRowClick={this.rowClickHandler} />
+      </Table>
+    );
+  }
+}
+```
+
 ### Actions and first cell in body rows as th
 
 To use actions you can either specify an array of actions and pass that into the `Table`'s `actions` prop, or for more control you can use the `actionResolver` callback prop to add actions conditionally.

package/src/components/Table/utils/decorators/treeRow.tsx

@@ -26,9 +26,15 @@ export const treeRow = (
   } = rowData.props;
   const content = value.title || value;
   const text = (
-    <div className={css(stylesTreeView.tableTreeViewText)}>
-      {icon && <span className={css(stylesTreeView.tableTreeViewIcon)}>{icon}</span>}
-      <span className="pf-c-table__text">{content}</span>
+    <div className={css(stylesTreeView.tableTreeViewText)} key="tree-view-text">
+      {icon && (
+        <span className={css(stylesTreeView.tableTreeViewIcon)} key="tree-view-text-icon">
+          {icon}
+        </span>
+      )}
+      <span className="pf-c-table__text" key="table-text">
+        {content}
+      </span>
     </div>
   );
   const onChange = (isChecked: boolean, event: React.FormEvent<HTMLInputElement>) => {
@@ -41,7 +47,7 @@ export const treeRow = (
       level !== undefined ? (
         <div className={css(stylesTreeView.tableTreeViewMain)}>
           {setsize > 0 && (
-            <span className={css(stylesTreeView.tableToggle)}>
+            <span className={css(stylesTreeView.tableToggle)} key="table-toggle">
               <Button
                 variant="plain"
                 onClick={event => onCollapse && onCollapse(event, rowIndex, content, rowData)}
@@ -56,7 +62,7 @@ export const treeRow = (
             </span>
           )}
           {!!onCheckChange && (
-            <span className={css(stylesTreeView.tableCheck)}>
+            <span className={css(stylesTreeView.tableCheck)} key="table-check">
               <Checkbox
                 id={checkboxId || `checkbox_${rowIndex}`}
                 aria-label={checkAriaLabel || `Row ${rowIndex} checkbox`}
@@ -67,7 +73,7 @@ export const treeRow = (
           )}
           {text}
           {!!onToggleRowDetails && (
-            <span className={css(stylesTreeView.tableTreeViewDetailsToggle)}>
+            <span className={css(stylesTreeView.tableTreeViewDetailsToggle)} key="view-details-toggle">
               <Button
                 variant="plain"
                 aria-expanded={isDetailsExpanded}

package/src/components/TableComposable/Tr.tsx

@@ -17,6 +17,12 @@ export interface TrProps extends React.HTMLProps<HTMLTableRowElement>, OUIAProps
   isExpanded?: boolean;
   /** Only applicable to Tr within the Tbody: Whether the row is editable */
   isEditable?: boolean;
+  /** Flag which adds hover styles for the table row */
+  isHoverable?: boolean;
+  /** Flag indicating the row is selected - adds selected styling */
+  isRowSelected?: boolean;
+  /** An event handler for the row */
+  onRowClick?: (event?: React.KeyboardEvent | React.MouseEvent) => void;
 }
 
 const TrBase: React.FunctionComponent<TrProps> = ({
@@ -25,22 +31,40 @@ const TrBase: React.FunctionComponent<TrProps> = ({
   isExpanded,
   isEditable,
   isHidden = false,
+  isHoverable = false,
+  isRowSelected = false,
   innerRef,
   ouiaId,
   ouiaSafe = true,
+  onRowClick,
   ...props
 }: TrProps) => {
   const ouiaProps = useOUIAProps('TableRow', ouiaId, ouiaSafe);
+
+  let onKeyDown = null;
+  if (onRowClick) {
+    onKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        onRowClick(e);
+        e.preventDefault();
+      }
+    };
+  }
+
   return (
     <tr
       className={css(
         className,
         isExpanded !== undefined && styles.tableExpandableRow,
         isExpanded && styles.modifiers.expanded,
-        isEditable && inlineStyles.modifiers.inlineEditable
+        isEditable && inlineStyles.modifiers.inlineEditable,
+        isHoverable && styles.modifiers.hoverable,
+        isRowSelected && styles.modifiers.selected
       )}
       hidden={isHidden || (isExpanded !== undefined && !isExpanded)}
+      {...(isHoverable && { tabIndex: 0 })}
       ref={innerRef}
+      {...(onRowClick && { onClick: onRowClick, onKeyDown })}
       {...ouiaProps}
       {...props}
     >

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

@@ -139,11 +139,11 @@ ComposableTableBasic = () => {
 };
 ```
 
-### Composable: Row click handler, custom row wrapper, header tooltips & popovers
+### Composable: Custom row wrapper, header tooltips & popovers
 
 - If you add the `noWrap` prop to `Thead`, it won't wrap it if there is no space
 - You can add the `textCenter` prop to `Th` or `Td` to center the contents
-- You can pass `onClick`, `className`, `style` and more to `Tr`
+- You can pass `className`, `style` and more to `Tr`
 
 To add a header tooltip or popover to `Th`, pass a `ThInfoType` object via the `info` prop.
 
@@ -158,9 +158,7 @@ ComposableTableMisc = () => {
     [{ title: 'one - 2', colSpan: 3 }, null, null, 'four - 2', 'five - 2'],
     ['one - 3', 'two - 3', 'three - 3', 'four - 3', { title: 'five - 3 (not centered)', textCenter: false }]
   ];
-  const onRowClick = (event, rowIndex, row) => {
-    console.log(`handle row click ${rowIndex}`, row);
-  };
+  
   return (
     <TableComposable aria-label="Misc table">
       <Thead noWrap>
@@ -206,7 +204,6 @@ ComposableTableMisc = () => {
           return (
             <Tr
               key={rowIndex}
-              onClick={event => onRowClick(event, rowIndex, row)}
               className={isOddRow ? 'odd-row-class' : 'even-row-class'}
               style={isOddRow ? customStyle : {}}
             >
@@ -354,7 +351,7 @@ ComposableTableSortable = () => {
 };
 ```
 
-### Composable: Selectable
+### Composable: Selectable with checkbox
 
 To make a row selectable, the table needs a selection column.
 The selection column is just another column, but with selection specific props added. 
@@ -562,6 +559,70 @@ ComposableTableSelectableRadio = () => {
 };
 ```
 
+### Composable: Row click handler, hoverable & selected rows
+
+This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view.
+
+```js
+import React from 'react';
+import { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+
+ComposableTableHoverable = () => {
+  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
+  const [rows, setRows] = React.useState([
+    { cells: ['one', 'two', 'a', 'four', 'five'], isRowSelected: false},
+    { cells: ['a', 'two', 'k', 'four', 'five'], isRowSelected: false},
+    { cells: ['p', 'two', 'b', 'four', 'five'], isRowSelected: false}
+  ]);
+  const onRowClick = (event, rowIndex, row) => {
+    const updatedRows = [...rows];
+    updatedRows[rowIndex].isRowSelected = !rows[rowIndex].isRowSelected;
+    setRows(updatedRows); 
+  };
+  
+  return (
+    <TableComposable aria-label="Misc table">
+      <Thead noWrap>
+        <Tr>
+          <Th>
+            {columns[0]}
+          </Th>
+          <Th>{columns[1]}</Th>
+          <Th>
+            {columns[2]}
+          </Th>
+          <Th>{columns[3]}</Th>
+          <Th>{columns[4]}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows.map((row, rowIndex) => {
+          return (
+            <Tr
+              key={rowIndex}
+              onRowClick={event => onRowClick(event, rowIndex, row.cells)}
+              isHoverable
+              isRowSelected={row.isRowSelected}
+            >
+              {row.cells.map((cell, cellIndex) => {
+                return (
+                  <Td
+                    key={`${rowIndex}_${cellIndex}`}
+                    dataLabel={columns[cellIndex]}
+                  >
+                    {cell}
+                  </Td>
+                );
+              })}
+            </Tr>
+          );
+        })}
+      </Tbody>
+    </TableComposable>
+  );
+};
+```
+
 ### Composable: Actions
 
 This example demonstrates adding actions as the last column. The header's last cell is an empty cell, and each body row's last cell is an action cell.