@patternfly/react-table 6.0.0-alpha.10 → 6.0.0-alpha.101

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/examples/TableEmptyState.tsx

@@ -4,10 +4,8 @@ import {
   Bullseye,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
   Button,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateActions
 } from '@patternfly/react-core';
@@ -31,12 +29,7 @@ export const TableEmptyState: React.FunctionComponent = () => (
       <Tr>
         <Td colSpan={8}>
           <Bullseye>
-            <EmptyState variant={EmptyStateVariant.sm}>
-              <EmptyStateHeader
-                icon={<EmptyStateIcon icon={SearchIcon} />}
-                titleText="No results found"
-                headingLevel="h2"
-              />
+            <EmptyState headingLevel="h2" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
               <EmptyStateBody>Clear all filters and try again.</EmptyStateBody>
               <EmptyStateFooter>
                 <EmptyStateActions>

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

@@ -16,7 +16,6 @@ interface Repository {
   };
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const TableExpandable: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
   const repositories: Repository[] = [
@@ -120,7 +119,7 @@ export const TableExpandable: React.FunctionComponent = () => {
       <Table aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined}>
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row expansion" />
             <Th width={25}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.branches}</Th>
             <Th width={15}>{columnNames.prs}</Th>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 /* eslint-disable camelcase */
-import global_BackgroundColor_150 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_150';
+import global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/global_background_color_secondary_default';
 
 interface Repository {
   name: string;
@@ -67,7 +67,7 @@ export const TableMisc: React.FunctionComponent = () => {
         {repositories.map((repo, rowIndex) => {
           const isOddRow = (rowIndex + 1) % 2;
           const customStyle = {
-            backgroundColor: global_BackgroundColor_150.var
+            backgroundColor: global_background_color_secondary_default.var
           };
           // Some arbitrary logic to demonstrate that cell styles can be based on anything
           const nameColSpan = repo.branches === null && repo.prs === null ? 3 : 1;

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

@@ -64,7 +64,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
       <Table aria-label="Nested column headers with expandable rows table" gridBreakPoint="">
         <Thead hasNestedHeader>
           <Tr>
-            <Th rowSpan={2} />
+            <Th screenReaderText="Row expansion" rowSpan={2} />
             <Th width={35} rowSpan={2} hasRightBorder>
               {columnNames.team}
             </Th>

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
-import { Stack, StackItem } from '@patternfly/react-core';
-import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
-
+import { Stack, StackItem, Timestamp } from '@patternfly/react-core';
 interface PodConnection {
   source: {
     podName: string;
@@ -162,8 +160,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               <Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>\
               <Td dataLabel={columnNames.datetime}>
                 <div>
-                  <span>{new Date(connection.timestamp).toDateString()}</span>{' '}
-                  <span className={textStyles.color_200}>{new Date(connection.timestamp).toLocaleTimeString()}</span>
+                  <Timestamp dateFormat="full" timeFormat="medium" date={new Date(connection.timestamp)} />
                 </div>
               </Td>
               <Td dataLabel={columnNames.source}>
@@ -172,7 +169,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.source.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className={textStyles.color_200}>({connection.source.port.protocol})</span>
+                    <small>({connection.source.port.protocol})</small>
                   </StackItem>
                 </Stack>
               </Td>
@@ -182,7 +179,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.destination.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className={textStyles.color_200}>({connection.destination.port.protocol})</span>
+                    <small>({connection.destination.port.protocol})</small>
                   </StackItem>
                 </Stack>
               </Td>

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
-import { Stack, StackItem } from '@patternfly/react-core';
-import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
-
+import { Stack, StackItem, Timestamp } from '@patternfly/react-core';
 interface PodConnection {
   source: {
     podName: string;
@@ -154,9 +152,6 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               {columnNames.destination}
             </Th>
           </Tr>
-          <Tr isBorderRow aria-hidden="true">
-            <Td colSpan={9}></Td>
-          </Tr>
         </Thead>
         <Tbody>
           {sortedConnections.map((connection) => (
@@ -165,8 +160,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               <Td dataLabel={columnNames.destination}>{connection.destination.podName}</Td>\
               <Td dataLabel={columnNames.datetime}>
                 <div>
-                  <span>{new Date(connection.timestamp).toDateString()}</span>{' '}
-                  <span className={textStyles.color_200}>{new Date(connection.timestamp).toLocaleTimeString()}</span>
+                  <Timestamp dateFormat="full" timeFormat="medium" date={new Date(connection.timestamp)} />
                 </div>
               </Td>
               <Td dataLabel={columnNames.source}>
@@ -175,7 +169,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.source.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className={textStyles.color_200}>({connection.source.port.protocol})</span>
+                    <small>({connection.source.port.protocol})</small>
                   </StackItem>
                 </Stack>
               </Td>
@@ -185,7 +179,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.destination.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className={textStyles.color_200}>({connection.destination.port.protocol})</span>
+                    <small>({connection.destination.port.protocol})</small>
                   </StackItem>
                 </Stack>
               </Td>

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

@@ -131,7 +131,7 @@ export const TableExpandable: React.FunctionComponent = () => {
     <Table aria-label="Simple table">
       <Thead>
         <Tr>
-          <Td />
+          <Th screenReaderText="Row expansion" />
           <Th width={20}>{columnNames.name}</Th>
           <Th>{columnNames.branches}</Th>
           <Th>{columnNames.prs}</Th>

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

@@ -93,6 +93,7 @@ export const TableSelectable: React.FunctionComponent = () => {
               onSelect: (_event, isSelecting) => selectAllRepos(isSelecting),
               isSelected: areAllReposSelected
             }}
+            aria-label="Row select"
           />
           <Th>{columnNames.name}</Th>
           <Th>{columnNames.branches}</Th>

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

@@ -35,7 +35,7 @@ export const TableSelectableRadio: React.FunctionComponent = () => {
     <Table aria-label="Selectable table">
       <Thead>
         <Tr>
-          <Th />
+          <Th screenReaderText="Row select" />
           <Th>{columnNames.name}</Th>
           <Th>{columnNames.branches}</Th>
           <Th>{columnNames.prs}</Th>

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

@@ -117,9 +117,8 @@ export const TableSortableCustom: React.FunctionComponent = () => {
                   isExpanded={isSortDropdownOpen}
                   variant="plain"
                   aria-label="Sort columns"
-                >
-                  <SortAmountDownIcon />
-                </MenuToggle>
+                  icon={<SortAmountDownIcon />}
+                />
               )}
             >
               <SelectGroup label="Sort column">

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

@@ -98,7 +98,7 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
   });
 
   return (
-    <div style={{ height: '600px' }}>
+    <div style={{ height: '400px' }}>
       <OuterScrollContainer>
         <InnerScrollContainer>
           <Table aria-label="Sticky columns and header table" gridBreakPoint="" isStickyHeader>

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

@@ -115,7 +115,7 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
       <Table aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined} isStriped isExpandable>
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row expansion" />
             <Th width={25}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.branches}</Th>
             <Th width={15}>{columnNames.prs}</Th>

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}
@@ -10,14 +10,14 @@ Object {
   >
     
   </SelectColumn>,
-  "className": "pf-v5-c-table__check",
+  "className": "pf-v6-c-table__check",
   "component": "td",
   "isVisible": true,
 }
 `;
 
 exports[`Transformer functions sortable asc 1`] = `
-Object {
+{
   "aria-sort": "ascending",
   "children": <SortColumn
     isSortedBy={true}
@@ -26,6 +26,6 @@ Object {
   >
     
   </SortColumn>,
-  "className": "pf-v5-c-table__sort pf-m-selected",
+  "className": "pf-v6-c-table__sort pf-m-selected",
 }
 `;

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

@@ -61,7 +61,7 @@ export const selectable: ITransform = (
 
   return {
     className: css(styles.tableCheck),
-    component: 'td',
+    component: rowId !== -1 ? 'td' : 'th',
     isVisible: !rowData || !rowData.fullWidth,
     children: (
       <SelectColumn

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

@@ -18,7 +18,6 @@ import {
   textCenter,
   cellActions
 } from './';
-import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown';
 import {
   IAction,
   IActions,
@@ -31,7 +30,7 @@ import {
 } from '../TableTypes';
 import { css } from '@patternfly/react-styles';
 import tableStyles from '@patternfly/react-styles/css/components/Table/table';
-import dropdownStyles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
+import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
 
 const testCellActions = async ({
   actions,
@@ -58,8 +57,8 @@ const testCellActions = async ({
     rowData,
     column: {
       extraParams: {
-        dropdownPosition: DropdownPosition.right,
-        dropdownDirection: DropdownDirection.down
+        dropdownPosition: 'right',
+        dropdownDirection: 'down'
       }
     }
   });
@@ -77,9 +76,7 @@ const testCellActions = async ({
     await user.click(screen.getAllByRole('button')[0]);
     await waitFor(() =>
       // eslint-disable-next-line testing-library/no-container
-      expect(container.querySelectorAll(`.${dropdownStyles.dropdownMenu} li button`)).toHaveLength(
-        expectDisabled ? 0 : 1
-      )
+      expect(container.querySelectorAll(`.${menuStyles.menu} li button`)).toHaveLength(expectDisabled ? 0 : 1)
     );
   }
 };