@patternfly/react-table 5.4.0-prerelease.3 → 5.4.0-prerelease.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "5.4.0-prerelease.3",
+  "version": "5.4.0-prerelease.30",
   "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",
@@ -39,19 +39,16 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^5.4.0-prerelease.3",
-    "@patternfly/react-icons": "^5.4.0-prerelease.1",
-    "@patternfly/react-styles": "^5.4.0-prerelease.1",
-    "@patternfly/react-tokens": "^5.4.0-prerelease.1",
-    "lodash": "^4.17.19",
-    "tslib": "^2.5.0"
-  },
-  "devDependencies": {
-    "typescript": "^4.7.4"
+    "@patternfly/react-core": "^5.4.0-prerelease.27",
+    "@patternfly/react-icons": "^5.4.0-prerelease.10",
+    "@patternfly/react-styles": "^5.4.0-prerelease.11",
+    "@patternfly/react-tokens": "^5.4.0-prerelease.10",
+    "lodash": "^4.17.21",
+    "tslib": "^2.6.3"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "75849b05bb14b3d8f50535a92a65136b4a2cb13b"
+  "gitHead": "0781d69df6e3426e8973572c587e1f51b5ce693e"
 }

package/rollup.config.mjs

@@ -0,0 +1,8 @@
+// @ts-check
+import baseConfig from '../rollup.base.mjs';
+import pkg from './package.json' with { type: 'json' };
+
+export default baseConfig({
+  packageName: pkg.name.replace('@patternfly/', ''),
+  name: 'PatternFlyTable'
+});

package/src/components/Table/TableTypes.tsx

@@ -138,7 +138,7 @@ export interface IExtra extends IExtraData {
 }
 
 export type IFormatterValueType = formatterValueType & {
-  title?: string | React.ReactNode;
+  title?: React.ReactNode;
   props?: any;
 };
 
@@ -157,7 +157,7 @@ export interface IAction extends Omit<DropdownItemProps, 'title' | 'onClick'>, P
   /** Key of actions menu item */
   itemKey?: string;
   /** Content to display in the actions menu item */
-  title?: string | React.ReactNode;
+  title?: React.ReactNode;
   /** Render item as aria-disabled option */
   isAriaDisabled?: boolean;
   /** Props for adding a tooltip to a menu item. This is used to display tooltip when hovered over the item  */
@@ -191,7 +191,7 @@ export interface decoratorReturnType {
   textCenter?: boolean;
   component?: string;
   isVisible?: boolean;
-  title?: string | React.ReactNode;
+  title?: React.ReactNode;
   props?: any;
   scope?: string;
   parentId?: number;
@@ -205,7 +205,7 @@ export type IFormatter = (data?: IFormatterValueType, extra?: IExtra) => formatt
 
 export interface ICell {
   /* cell contents */
-  title?: string | React.ReactNode;
+  title?: React.ReactNode;
   /** transformations applied to the header cell */
   transforms?: ITransform[];
   /** transformations applied to the cells within the column's body */
@@ -229,7 +229,7 @@ export interface ICell {
 export type RowCellContent<T = any> = (value?: string, rowIndex?: number, cellIndex?: number, props?: T) => void;
 
 export interface IRowCell<T = any> {
-  title?: string | React.ReactNode | RowCellContent<T>;
+  title?: React.ReactNode | RowCellContent<T>;
   props?: T;
   formatters?: IFormatter[];
 }

package/src/components/Table/Tr.tsx

@@ -28,6 +28,8 @@ export interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onR
   isStriped?: boolean;
   /** Flag indicating the row will act as a border. This is typically used for a table with a nested and sticky header. */
   isBorderRow?: boolean;
+  /** Flag indicating the row is controlling the expansion of another row. */
+  isControlRow?: boolean;
   /** An event handler for the row */
   onRowClick?: (event?: React.KeyboardEvent | React.MouseEvent) => void;
   /** Flag indicating that the row is selectable */
@@ -50,6 +52,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
   isRowSelected = false,
   isStriped = false,
   isBorderRow = false,
+  isControlRow = false,
   innerRef,
   ouiaId,
   ouiaSafe = true,
@@ -100,6 +103,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
           isRowSelected && styles.modifiers.selected,
           isStriped && styles.modifiers.striped,
           isBorderRow && styles.modifiers.borderRow,
+          isControlRow && styles.tableControlRow,
           resetOffset && styles.modifiers.firstCellOffsetReset
         )}
         hidden={rowIsHidden}

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

@@ -51,11 +51,15 @@ import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-i
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
+import inlineEditStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import global_BackgroundColor_150 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_150';
 
 ## Table examples
@@ -156,6 +160,13 @@ This selectable rows feature is intended for use when a table is used to present
 ```ts file="TableClickable.tsx"
 ```
 
+### Editable rows
+
+This example shows a table with editable rows. Cells in a row can be edited after clicking on the edit icon.
+
+```ts file="TableEditable.tsx"
+```
+
 ### 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.

package/src/components/Table/examples/TableCompoundExpandable.tsx

@@ -75,7 +75,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
         const isRowExpanded = !!expandedCellKey;
         return (
           <Tbody key={repo.name} isExpanded={isRowExpanded}>
-            <Tr>
+            <Tr isControlRow>
               <Td width={25} dataLabel={columnNames.name} component="th">
                 <a href="#">{repo.name}</a>
               </Td>

package/src/components/Table/examples/TableEditable.tsx

@@ -0,0 +1,313 @@
+import React from 'react';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Button, Checkbox, Radio, TextInput, KeyTypes, getUniqueId } from '@patternfly/react-core';
+import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import inlineEditStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
+import { css } from '@patternfly/react-styles';
+
+interface EditButtonsCellProps {
+  onClick: (type: 'save' | 'cancel' | 'edit') => void;
+  elementToFocusOnEditRef?: React.MutableRefObject<HTMLElement>;
+  rowAriaLabel: string;
+}
+
+const EditButtonsCell: React.FunctionComponent<EditButtonsCellProps> = ({
+  onClick,
+  elementToFocusOnEditRef,
+  rowAriaLabel = 'row'
+}) => {
+  const editButtonRef = React.useRef<HTMLButtonElement>();
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, button: 'edit' | 'stopEditing') => {
+    const focusRef = button === 'edit' ? elementToFocusOnEditRef : editButtonRef;
+
+    if (event.key === KeyTypes.Enter || event.key === KeyTypes.Space) {
+      // because space key triggers click event before keyDown, we have to prevent default behaviour and trigger click manually
+      event.preventDefault();
+      (event.target as HTMLButtonElement).click();
+      setTimeout(() => {
+        focusRef?.current?.focus();
+      }, 0);
+    }
+  };
+
+  return (
+    <>
+      <Td
+        dataLabel="Save and cancel buttons"
+        className={css(
+          inlineEditStyles.inlineEditGroup,
+          inlineEditStyles.modifiers.iconGroup,
+          inlineEditStyles.modifiers.actionGroup
+        )}
+      >
+        <div className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.valid)}>
+          <Button
+            aria-label={`Save edits of ${rowAriaLabel}`}
+            onClick={() => onClick('save')}
+            onKeyDown={(event) => onKeyDown(event, 'stopEditing')}
+            variant="plain"
+          >
+            <CheckIcon />
+          </Button>
+        </div>
+        <div className={css(inlineEditStyles.inlineEditAction)}>
+          <Button
+            aria-label={`Discard edits of ${rowAriaLabel}`}
+            onClick={() => onClick('cancel')}
+            onKeyDown={(event) => onKeyDown(event, 'stopEditing')}
+            variant="plain"
+          >
+            <TimesIcon />
+          </Button>
+        </div>
+      </Td>
+      <Td
+        dataLabel="Edit button"
+        className={css(inlineEditStyles.inlineEditAction, inlineEditStyles.modifiers.enableEditable)}
+      >
+        <Button
+          ref={editButtonRef}
+          aria-label={`Edit ${rowAriaLabel}`}
+          onClick={() => onClick('edit')}
+          onKeyDown={(event) => onKeyDown(event, 'edit')}
+          variant="plain"
+        >
+          <PencilAltIcon />
+        </Button>
+      </Td>
+    </>
+  );
+};
+
+interface EditableCellProps {
+  dataLabel: string;
+  staticValue: React.ReactNode;
+  editingValue: React.ReactNode;
+  role?: string;
+  ariaLabel?: string;
+}
+
+const EditableCell: React.FunctionComponent<EditableCellProps> = ({
+  dataLabel,
+  staticValue,
+  editingValue,
+  role,
+  ariaLabel
+}) => {
+  const hasMultipleInputs = Array.isArray(editingValue) && editingValue.every((elem) => React.isValidElement(elem));
+
+  return (
+    <Td dataLabel={dataLabel}>
+      <div className={css(inlineEditStyles.inlineEditValue)}>{staticValue}</div>
+      {hasMultipleInputs ? (
+        <div className={css(inlineEditStyles.inlineEditGroup, 'pf-m-column')} role={role} aria-label={ariaLabel}>
+          {(editingValue as React.ReactElement[]).map((elem, index) => (
+            <div key={index} className={css(inlineEditStyles.inlineEditInput)}>
+              {elem}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className={css(inlineEditStyles.inlineEditInput)}>{editingValue}</div>
+      )}
+    </Td>
+  );
+};
+
+interface EditableRow {
+  data: CustomData;
+  columnNames: ColumnNames<CustomData>;
+  dataOptions?: CustomDataOptions;
+  saveChanges: (editedData: CustomData) => void;
+  ariaLabel: string;
+  rowIndex?: number;
+}
+
+const EditableRow: React.FunctionComponent<EditableRow> = ({
+  data,
+  columnNames,
+  dataOptions,
+  saveChanges,
+  ariaLabel,
+  rowIndex
+}) => {
+  const [editable, setEditable] = React.useState(false);
+  const [editedData, setEditedData] = React.useState(data);
+
+  const inputRef = React.useRef();
+
+  return (
+    <Tr className={css(inlineEditStyles.inlineEdit, editable ? inlineEditStyles.modifiers.inlineEditable : '')}>
+      <EditableCell
+        dataLabel={columnNames.textInput}
+        staticValue={data.textInput}
+        editingValue={
+          <TextInput
+            aria-label={`${columnNames.textInput} ${ariaLabel}`}
+            ref={inputRef}
+            value={editedData.textInput}
+            onChange={(e) => setEditedData((data) => ({ ...data, textInput: (e.target as HTMLInputElement).value }))}
+          />
+        }
+      />
+      <EditableCell
+        dataLabel={columnNames.textInputDisabled}
+        staticValue={data.textInputDisabled}
+        editingValue={
+          <TextInput
+            aria-label={`${columnNames.textInputDisabled} ${ariaLabel}`}
+            isDisabled={true}
+            value={editedData.textInputDisabled ?? ''}
+          />
+        }
+      />
+      <EditableCell
+        dataLabel={columnNames.checkboxes}
+        staticValue={data.checkboxes.join(', ')}
+        role="group"
+        ariaLabel={`Checkbox group row ${rowIndex}`}
+        editingValue={dataOptions?.checkboxes.map((option) => {
+          const id = getUniqueId('checkbox');
+          return (
+            <Checkbox
+              key={id}
+              name={id}
+              id={id}
+              label={option}
+              isChecked={editedData.checkboxes.includes(option)}
+              onChange={(_e, checked) =>
+                setEditedData((data) => ({
+                  ...data,
+                  checkboxes: checked ? [...data.checkboxes, option] : data.checkboxes.filter((item) => item !== option)
+                }))
+              }
+            />
+          );
+        })}
+      />
+      <EditableCell
+        dataLabel={columnNames.radios}
+        staticValue={data.radios}
+        ariaLabel={`Radio button group row ${rowIndex}`}
+        role="radiogroup"
+        editingValue={dataOptions?.radios.map((option) => {
+          const id = getUniqueId('radio');
+          return (
+            <Radio
+              key={id}
+              name={id}
+              id={id}
+              label={option}
+              isChecked={editedData.radios === option}
+              onChange={() => setEditedData((data) => ({ ...data, radios: option }))}
+            />
+          );
+        })}
+      />
+      <EditButtonsCell
+        onClick={(type) => {
+          type === 'edit' ? setEditable(true) : setEditable(false);
+          type === 'save' && saveChanges(editedData);
+          type === 'cancel' && setEditedData(data);
+        }}
+        rowAriaLabel={ariaLabel}
+        elementToFocusOnEditRef={inputRef}
+      />
+    </Tr>
+  );
+};
+
+interface CustomData {
+  textInput: string;
+  textInputDisabled: string | null;
+  checkboxes: string[];
+  radios: string;
+}
+
+interface CustomDataOptions {
+  checkboxes: string[];
+  radios: string[];
+}
+
+type ColumnNames<T> = { [K in keyof T]: string };
+
+export const TableEditable: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const initialRows: CustomData[] = [
+    {
+      textInput: 'Editable text 1',
+      textInputDisabled: 'Non-editable text 1',
+      checkboxes: ['Option A'],
+      radios: 'Option A'
+    },
+    {
+      textInput: 'Editable text 2',
+      textInputDisabled: null,
+      checkboxes: [],
+      radios: 'Option B'
+    },
+    {
+      textInput: 'Editable text 3',
+      textInputDisabled: 'Non-editable text 3',
+      checkboxes: ['Option A', 'Option B'],
+      radios: 'Option A'
+    }
+  ];
+
+  // List of all selectable options for some cells of initialRows
+  const initialRowsOptions: CustomDataOptions[] = [
+    {
+      checkboxes: ['Option A', 'Option B', 'Option C'],
+      radios: ['Option A', 'Option B']
+    },
+    {
+      checkboxes: ['Option A', 'Option B'],
+      radios: ['Option A', 'Option B', 'Option C']
+    },
+    {
+      checkboxes: ['Option A', 'Option B'],
+      radios: ['Option A', 'Option B']
+    }
+  ];
+
+  const [rows, setRows] = React.useState(initialRows);
+
+  const columnNames: ColumnNames<CustomData> = {
+    textInput: 'Text input',
+    textInputDisabled: 'Disabled text input',
+    checkboxes: 'Checkboxes',
+    radios: 'Radios'
+  };
+
+  return (
+    <Table aria-label="Editable table">
+      <Thead>
+        <Tr>
+          <Th>{columnNames.textInput}</Th>
+          <Th>{columnNames.textInputDisabled}</Th>
+          <Th>{columnNames.checkboxes}</Th>
+          <Th>{columnNames.radios}</Th>
+          <Th screenReaderText="Row edit actions" />
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows.map((data, index) => (
+          <EditableRow
+            key={index}
+            data={data}
+            rowIndex={index}
+            dataOptions={initialRowsOptions[index]}
+            columnNames={columnNames}
+            saveChanges={(editedRow) => {
+              setRows((rows) => rows.map((row, i) => (i === index ? editedRow : row)));
+            }}
+            ariaLabel={`row ${index + 1}`}
+          ></EditableRow>
+        ))}
+      </Tbody>
+    </Table>
+  );
+};

package/src/components/Table/utils/__snapshots__/transformers.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Transformer functions selectable unselected 1`] = `
-Object {
+{
   "children": <SelectColumn
     aria-label="Select row 0"
     checked={false}
@@ -17,7 +17,7 @@ Object {
 `;
 
 exports[`Transformer functions sortable asc 1`] = `
-Object {
+{
   "aria-sort": "ascending",
   "children": <SortColumn
     isSortedBy={true}

package/src/demos/examples/TableColumnManagement.tsx

@@ -225,7 +225,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
         <Button key="save" variant="primary" onClick={onSave}>
           Save
         </Button>,
-        <Button key="cancel" variant="secondary" onClick={handleModalToggle}>
+        <Button key="cancel" variant="link" onClick={handleModalToggle}>
           Cancel
         </Button>
       ]}

package/src/demos/examples/TableColumnManagementWithDraggable.tsx

@@ -439,7 +439,7 @@ export const TableColumnManagementWithDraggable: React.FunctionComponent = () =>
         <Button key="save" variant="primary" onClick={onSave}>
           Save
         </Button>,
-        <Button key="cancel" variant="secondary" onClick={handleModalToggle}>
+        <Button key="cancel" variant="link" onClick={handleModalToggle}>
           Cancel
         </Button>
       ]}