@patternfly/react-table 6.0.0-alpha.50 → 6.0.0-alpha.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.0.0-alpha.50",
+  "version": "6.0.0-alpha.51",
   "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",
@@ -40,10 +40,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.50",
-    "@patternfly/react-icons": "^6.0.0-alpha.19",
-    "@patternfly/react-styles": "^6.0.0-alpha.19",
-    "@patternfly/react-tokens": "^6.0.0-alpha.19",
+    "@patternfly/react-core": "^6.0.0-alpha.51",
+    "@patternfly/react-icons": "^6.0.0-alpha.20",
+    "@patternfly/react-styles": "^6.0.0-alpha.20",
+    "@patternfly/react-tokens": "^6.0.0-alpha.20",
     "lodash": "^4.17.19",
     "tslib": "^2.5.0"
   },
@@ -55,5 +55,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "ef6f95d064bfbb8f5aaa134ab6941f63ccf36111"
+  "gitHead": "8d93660fcd63d544d8ef0f2ee6494cfe5f09379e"
 }

package/src/components/Table/ActionsColumn.tsx

@@ -30,6 +30,8 @@ export interface ActionsColumnProps extends Omit<React.HTMLProps<HTMLElement>, '
   innerRef?: React.Ref<any>;
   /** Ref to forward to the first item in the popup menu */
   firstActionItemRef?: React.Ref<HTMLButtonElement>;
+  /** Flag indicating that the dropdown's onOpenChange callback should not be called. */
+  isOnOpenChangeDisabled?: boolean;
 }
 
 const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
@@ -44,6 +46,7 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
   },
   innerRef,
   firstActionItemRef,
+  isOnOpenChangeDisabled = false,
   ...props
 }: ActionsColumnProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -91,7 +94,7 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
 
       <Dropdown
         isOpen={isOpen}
-        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+        onOpenChange={!isOnOpenChangeDisabled ? (isOpen: boolean) => setIsOpen(isOpen) : undefined}
         toggle={(toggleRef: any) =>
           actionsToggle ? (
             actionsToggle({ onToggle, isOpen, isDisabled, toggleRef })
@@ -115,35 +118,37 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
         <DropdownList>
           {items
             .filter((item) => !item.isOutsideDropdown)
-            .map(({ title, itemKey, onClick, tooltipProps, isSeparator, ...props }, index) => {
-              if (isSeparator) {
-                return <Divider key={itemKey || index} data-key={itemKey || index} />;
-              }
-              const item = (
-                <DropdownItem
-                  onClick={(event: any) => {
-                    onActionClick(event, onClick);
-                    onToggle();
-                  }}
-                  {...props}
-                  key={itemKey || index}
-                  data-key={itemKey || index}
-                  ref={index === 0 ? firstActionItemRef : undefined}
-                >
-                  {title}
-                </DropdownItem>
-              );
-
-              if (tooltipProps?.content) {
-                return (
-                  <Tooltip key={itemKey || index} {...tooltipProps}>
-                    {item}
-                  </Tooltip>
+            .map(
+              ({ title, itemKey, onClick, tooltipProps, isSeparator, shouldCloseOnClick = true, ...props }, index) => {
+                if (isSeparator) {
+                  return <Divider key={itemKey || index} data-key={itemKey || index} />;
+                }
+                const item = (
+                  <DropdownItem
+                    onClick={(event: any) => {
+                      onActionClick(event, onClick);
+                      shouldCloseOnClick && onToggle();
+                    }}
+                    {...props}
+                    key={itemKey || index}
+                    data-key={itemKey || index}
+                    ref={index === 0 ? firstActionItemRef : undefined}
+                  >
+                    {title}
+                  </DropdownItem>
                 );
-              } else {
-                return item;
+
+                if (tooltipProps?.content) {
+                  return (
+                    <Tooltip key={itemKey || index} {...tooltipProps}>
+                      {item}
+                    </Tooltip>
+                  );
+                } else {
+                  return item;
+                }
               }
-            })}
+            )}
         </DropdownList>
       </Dropdown>
     </React.Fragment>

package/src/components/Table/TableTypes.tsx

@@ -166,6 +166,8 @@ export interface IAction extends Omit<DropdownItemProps, 'title' | 'onClick'>, P
   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;
+  /** Flag indicating whether the actions dropdown should close after an item is clicked. */
+  shouldCloseOnClick?: boolean;
 }
 
 export interface ISeparator extends IAction {

package/src/components/Table/Th.tsx

@@ -56,6 +56,14 @@ export interface ThProps
   stickyRightOffset?: string;
   /** Indicates the <th> is part of a subheader of a nested header */
   isSubheader?: boolean;
+  /** Visually hidden text accessible only via assistive technologies. This must be passed in if the
+   * th is intended to be visually empty, and must be conveyed as a column header text.
+   */
+  screenReaderText?: string;
+  /** Provides an accessible name to the th. This should only be passed in when the th contains only non-text
+   * content, such as a "select all" checkbox or "expand all" toggle.
+   */
+  'aria-label'?: string;
 }
 
 const ThBase: React.FunctionComponent<ThProps> = ({
@@ -83,8 +91,17 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   stickyLeftOffset,
   stickyRightOffset,
   isSubheader = false,
+  screenReaderText,
+  'aria-label': ariaLabel,
   ...props
 }: ThProps) => {
+  if (!children && !screenReaderText && !ariaLabel) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Th: Table headers must have an accessible name. If the Th is intended to be visually empty, pass in screenReaderText. If the Th contains only non-text, interactive content such as a checkbox or expand toggle, pass in an aria-label.'
+    );
+  }
+
   const [showTooltip, setShowTooltip] = React.useState(false);
   const [truncated, setTruncated] = React.useState(false);
   const cellRef = innerRef ? innerRef : React.createRef();
@@ -188,8 +205,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       onBlur={() => setShowTooltip(false)}
       data-label={dataLabel}
       onMouseEnter={tooltip !== null ? onMouseEnter : onMouseEnterProp}
-      scope={component === 'th' && children ? scope : null}
+      scope={component === 'th' ? scope : null}
       ref={cellRef}
+      aria-label={ariaLabel}
       className={css(
         styles.tableTh,
         className,
@@ -212,7 +230,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
         } as React.CSSProperties
       })}
     >
-      {transformedChildren}
+      {transformedChildren || (screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>)}
     </MergedComponent>
   );
 

package/src/components/Table/__tests__/Th.test.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Th } from '../Th';
+
+test('Does not render with aria-label by default', () => {
+  render(<Th />);
+  expect(screen.getByRole('columnheader')).not.toHaveAccessibleName();
+});
+
+test('Renders with aria-label when passed in', () => {
+  render(<Th aria-label="Test" />);
+  expect(screen.getByRole('columnheader')).toHaveAccessibleName('Test');
+});
+
+test('Does not render with screen reader text by default', () => {
+  render(<Th />);
+
+  expect(screen.getByRole('columnheader')).toBeEmptyDOMElement();
+});
+
+test('Does not render with screen reader text when children are passed in', () => {
+  render(<Th screenReaderText="Test">Heading label</Th>);
+
+  expect(screen.getByRole('columnheader')).not.toHaveTextContent('Test');
+});
+
+test('Renders with screen reader text when screenReaderText is passed in', () => {
+  render(<Th screenReaderText="Test" />);
+
+  expect(screen.getByRole('columnheader')).toHaveTextContent('Test');
+});

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

@@ -116,8 +116,8 @@ export const TableActions: React.FunctionComponent = () => {
             <Th>{columnNames.prs}</Th>
             <Th>{columnNames.workspaces}</Th>
             <Th>{columnNames.lastCommit}</Th>
-            <Td></Td>
-            <Td></Td>
+            <Th screenReaderText="Primary action" />
+            <Th screenReaderText="Secondary action" />
           </Tr>
         </Thead>
         <Tbody>

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

@@ -66,7 +66,7 @@ export const TableActions: React.FunctionComponent = () => {
             <Th>{columnNames.prs}</Th>
             <Th>{columnNames.workspaces}</Th>
             <Th>{columnNames.lastCommit}</Th>
-            <Td></Td>
+            <Th screenReaderText="Actions" />
           </Tr>
         </Thead>
         <Tbody>

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

@@ -67,7 +67,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
           <Th>{columnNames.prs}</Th>
           <Th>{columnNames.workspaces}</Th>
           <Th>{columnNames.lastCommit}</Th>
-          <Th />
+          <Th screenReaderText="URL" />
         </Tr>
       </Thead>
       {repositories.map((repo: Repository, rowIndex: number) => {

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

@@ -140,30 +140,33 @@ export const TableDraggable: React.FunctionComponent = () => {
   ];
 
   return (
-    <Table aria-label="Draggable table" className={isDragging && styles.modifiers.dragOver}>
+    <Table aria-label="Draggable table" className={isDragging ? styles.modifiers.dragOver : ''}>
       <Thead>
         <Tr>
-          <Th />
+          <Th screenReaderText="Drag and drop" />
           {columns.map((column, columnIndex) => (
             <Th key={columnIndex}>{column}</Th>
           ))}
         </Tr>
       </Thead>
       <Tbody ref={bodyRef} onDragOver={onDragOver} onDrop={onDragOver} onDragLeave={onDragLeave}>
-        {rows.map((row, rowIndex) => (
-          <Tr key={rowIndex} id={row.id} draggable onDrop={onDrop} onDragEnd={onDragEnd} onDragStart={onDragStart}>
-            <Td
-              draggableRow={{
-                id: `draggable-row-${row.id}`
-              }}
-            />
-            {Object.keys(row).map((key, keyIndex) => (
-              <Td key={`${rowIndex}_${keyIndex}`} dataLabel={columns[keyIndex]}>
-                {row[key]}
-              </Td>
-            ))}
-          </Tr>
-        ))}
+        {rows.map((row, rowIndex) => {
+          const rowCellsToBuild = Object.keys(row).filter((rowCell) => rowCell !== 'id');
+          return (
+            <Tr key={rowIndex} id={row.id} draggable onDrop={onDrop} onDragEnd={onDragEnd} onDragStart={onDragStart}>
+              <Td
+                draggableRow={{
+                  id: `draggable-row-${row.id}`
+                }}
+              />
+              {rowCellsToBuild.map((key, keyIndex) => (
+                <Td key={`${rowIndex}_${keyIndex}`} dataLabel={columns[keyIndex]}>
+                  {row[key]}
+                </Td>
+              ))}
+            </Tr>
+          );
+        })}
       </Tbody>
     </Table>
   );

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

@@ -120,7 +120,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/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/TableNestedStickyHeader.tsx

@@ -152,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) => (

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

@@ -154,7 +154,7 @@ export const TableBulkSelect: React.FunctionComponent = () => {
         <Table aria-label="Selectable table">
           <Thead>
             <Tr>
-              <Th />
+              <Th screenReaderText="Row select" />
               <Th key={0}>{columns[0]}</Th>
               <Th key={1}>{columns[1]}</Th>
               <Th key={2}>{columns[2]}</Th>

package/src/demos/examples/TableColumnManagement.tsx

@@ -404,14 +404,14 @@ export const TableColumnManagement: React.FunctionComponent = () => {
           <ToolbarItem variant="overflow-menu">
             <OverflowMenu breakpoint="md">
               <OverflowMenuItem>
-                <MenuToggle icon={<FilterIcon />}>Name</MenuToggle>
+                <MenuToggle>
+                  <FilterIcon /> Name
+                </MenuToggle>
               </OverflowMenuItem>
               <OverflowMenuItem>
-                <MenuToggle
-                  variant="plain"
-                  aria-label="Sort columns"
-                  icon={<SortAmountDownIcon aria-hidden="true" />}
-                />
+                <MenuToggle variant="plain" aria-label="Sort columns">
+                  <SortAmountDownIcon aria-hidden="true" />
+                </MenuToggle>
               </OverflowMenuItem>
               <OverflowMenuGroup groupType="button" isPersistent>
                 <OverflowMenuItem>

package/src/demos/examples/TableCompoundExpansion.tsx

@@ -51,7 +51,7 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
             <Th>{columnNames.description}</Th>
             <Th>{columnNames.date}</Th>
             <Th>{columnNames.status}</Th>
-            <Th />
+            <Th screenReaderText="Actions" />
           </Tr>
         </Thead>
         <Tbody>
@@ -91,13 +91,8 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
             id="select-example"
             aria-label="Select Input"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle
-                icon={<FilterIcon />}
-                ref={toggleRef}
-                onClick={() => setIsSelectOpen(!isSelectOpen)}
-                isExpanded={isSelectOpen}
-              >
-                Status
+              <MenuToggle ref={toggleRef} onClick={() => setIsSelectOpen(!isSelectOpen)} isExpanded={isSelectOpen}>
+                <FilterIcon /> Status
               </MenuToggle>
             )}
             isOpen={isSelectOpen}
@@ -210,7 +205,8 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
                 <Th>{columnNames.prs}</Th>
                 <Th>{columnNames.workspaces}</Th>
                 <Th>{columnNames.lastCommit}</Th>
-                <Th />
+                <Th screenReaderText="URL" />
+                <Th screenReaderText="Actions" />
               </Tr>
             </Thead>
             {repositories.map((repo, rowIndex) => {

package/src/demos/examples/TableExpandCollapseAll.tsx

@@ -164,7 +164,8 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
                       collapseAllAriaLabel,
                       onToggle: onCollapseAll
                     }}
-                  ></Th>
+                    aria-label="Row expansion"
+                  />
                   {expandableColumns.map((column) => (
                     <Th key={column}>{column}</Th>
                   ))}

package/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap

@@ -1402,6 +1402,7 @@ exports[`Table Collapsible nested table 1`] = `
           class="pf-v6-c-table__th"
           data-key="0"
           data-label=""
+          scope=""
           tabindex="-1"
         />
         <th
@@ -2154,6 +2155,7 @@ exports[`Table Collapsible table 1`] = `
           class="pf-v6-c-table__th"
           data-key="0"
           data-label=""
+          scope=""
           tabindex="-1"
         />
         <th
@@ -4169,10 +4171,11 @@ exports[`Table Selectable table 1`] = `
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
       >
-        <td
+        <th
           class="pf-v6-c-table__th pf-v6-c-table__check"
           data-key="0"
           data-label=""
+          scope=""
           tabindex="-1"
         >
           <label>
@@ -4182,7 +4185,7 @@ exports[`Table Selectable table 1`] = `
               type="checkbox"
             />
           </label>
-        </td>
+        </th>
         <th
           aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
@@ -4873,6 +4876,7 @@ exports[`Table Selectable table with Radio 1`] = `
           class="pf-v6-c-table__th"
           data-key="0"
           data-label=""
+          scope=""
           tabindex="-1"
         />
         <th
@@ -5561,10 +5565,11 @@ exports[`Table Selectable table with selected expandable row 1`] = `
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
       >
-        <td
+        <th
           class="pf-v6-c-table__th pf-v6-c-table__check"
           data-key="0"
           data-label=""
+          scope=""
           tabindex="-1"
         >
           <label>
@@ -5575,7 +5580,7 @@ exports[`Table Selectable table with selected expandable row 1`] = `
               type="checkbox"
             />
           </label>
-        </td>
+        </th>
         <th
           class="pf-v6-c-table__th"
           data-key="1"
@@ -10305,6 +10310,7 @@ exports[`Table simple Editable table 1`] = `
             class="pf-v6-c-table__th"
             data-key="4"
             data-label=""
+            scope=""
             tabindex="-1"
           />
         </tr>