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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.0.0-alpha.10",
+  "version": "6.0.0-alpha.101",
   "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,20 +40,16 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.10",
-    "@patternfly/react-icons": "^6.0.0-alpha.6",
-    "@patternfly/react-styles": "^6.0.0-alpha.6",
-    "@patternfly/react-tokens": "^6.0.0-alpha.6",
-    "lodash": "^4.17.19",
-    "tslib": "^2.5.0"
-  },
-  "devDependencies": {
-    "rimraf": "^2.6.2",
-    "typescript": "^4.7.4"
+    "@patternfly/react-core": "^6.0.0-alpha.100",
+    "@patternfly/react-icons": "^6.0.0-alpha.35",
+    "@patternfly/react-styles": "^6.0.0-alpha.34",
+    "@patternfly/react-tokens": "^6.0.0-alpha.34",
+    "lodash": "^4.17.21",
+    "tslib": "^2.6.3"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "a90b9d4b4ca299a42104d2c3cefae79bb2e05b6b"
+  "gitHead": "aee9a75f90293e6533c2d7b59d7cf099b5f3d506"
 }

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/single-packages.config.json

@@ -1,7 +1,4 @@
 {
-    "packageName": "@patternfly/react-table",
-    "exclude": [
-        "dist/esm/deprecated/index.js",
-        "dist/esm/next/index.js"
-    ]
-}
+  "packageName": "@patternfly/react-table",
+  "exclude": ["dist/esm/deprecated/index.js", "dist/esm/next/index.js"]
+}

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 })
@@ -103,9 +106,8 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
               isExpanded={isOpen}
               isDisabled={isDisabled}
               variant="plain"
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={<EllipsisVIcon />}
+            />
           )
         }
         {...(rowData && rowData.actionProps)}
@@ -116,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/DraggableCell.tsx

@@ -24,9 +24,8 @@ export const DraggableCell: React.FunctionComponent<DraggableCellProps> = ({
     aria-label={ariaLabel || `Draggable row draggable button`}
     onClick={onClick}
     {...props}
-  >
-    <GripVerticalIcon aria-hidden />
-  </Button>
+    icon={<GripVerticalIcon aria-hidden />}
+  />
 );
 
 DraggableCell.displayName = 'DraggableCell';

package/src/components/Table/EditColumn.tsx

@@ -33,20 +33,32 @@ export const EditColumn: React.FunctionComponent<EditColumnProps> = ({
   <React.Fragment>
     <div className={css(inlineStyles.inlineEditGroup, inlineStyles.modifiers.iconGroup, 'pf-m-action-group')}>
       <div className={css(inlineStyles.inlineEditAction)}>
-        <Button aria-label={saveAriaLabel} {...props} onClick={(e) => onClick(e, 'save')} variant="plain">
-          <CheckIcon />
-        </Button>
+        <Button
+          aria-label={saveAriaLabel}
+          {...props}
+          onClick={(e) => onClick(e, 'save')}
+          variant="plain"
+          icon={<CheckIcon />}
+        />
       </div>
       <div className={css(inlineStyles.inlineEditAction)}>
-        <Button aria-label={cancelAriaLabel} {...props} onClick={(e) => onClick(e, 'cancel')} variant="plain">
-          <TimesIcon />
-        </Button>
+        <Button
+          aria-label={cancelAriaLabel}
+          {...props}
+          onClick={(e) => onClick(e, 'cancel')}
+          variant="plain"
+          icon={<TimesIcon />}
+        />
       </div>
     </div>
     <div className={css(inlineStyles.inlineEditAction, inlineStyles.modifiers.enableEditable)}>
-      <Button aria-label={editAriaLabel} {...props} onClick={(e) => onClick(e, 'edit')} variant="plain">
-        <PencilAltIcon />
-      </Button>
+      <Button
+        aria-label={editAriaLabel}
+        {...props}
+        onClick={(e) => onClick(e, 'edit')}
+        variant="plain"
+        icon={<PencilAltIcon />}
+      />
     </div>
   </React.Fragment>
 );

package/src/components/Table/EditableSelectInputCell.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import { Select, SelectOptionObject } from '@patternfly/react-core/dist/esm/deprecated/components/Select';
+import { Select, SelectList } from '@patternfly/react-core/dist/esm/components/Select';
+import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 import { EditableSelectInputProps } from './base/types';
@@ -15,7 +16,7 @@ export interface IEditableSelectInputCell extends Omit<React.HTMLProps<HTMLEleme
   /** Event handler which fires when user selects an option in this cell */
   onSelect: (
     event: React.MouseEvent | React.ChangeEvent,
-    newValue: string | SelectOptionObject,
+    newValue: any | any[],
     rowIndex: number,
     cellIndex: number,
     isPlaceholder?: boolean
@@ -25,11 +26,11 @@ export interface IEditableSelectInputCell extends Omit<React.HTMLProps<HTMLEleme
   /** Flag indicating the select input is disabled */
   isDisabled?: boolean;
   /** Current selected options to display as the read only value of the table cell */
-  selections?: string | SelectOptionObject | (string | SelectOptionObject)[];
+  selections?: any | any[];
   /** Flag indicating the select menu is open */
   isOpen?: boolean;
   /** Event handler which fires when the select toggle is toggled */
-  onToggle?: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event, isExpanded: boolean) => void;
+  onToggle?: (event: React.MouseEvent | undefined) => void;
   /** Event handler which fires when the user clears the selections */
   clearSelection?: (event: React.MouseEvent, rowIndex: number, cellIndex: number) => void;
 }
@@ -48,10 +49,10 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
 }: IEditableSelectInputCell) => {
   const onSelectHandler = (
     event: React.MouseEvent | React.ChangeEvent,
-    newValue: string | SelectOptionObject,
-    isPlaceholder: boolean
+    newValue: any | any[]
+    //    isPlaceholder: boolean
   ) => {
-    onSelect(event, newValue, rowIndex, cellIndex, isPlaceholder);
+    onSelect(event, newValue, rowIndex, cellIndex);
   };
 
   const onClear = (event: React.MouseEvent) => {
@@ -64,10 +65,14 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
       onSelect={onSelectHandler}
       {...(clearSelection && { onClear })}
       isOpen={isOpen}
-      onToggle={onToggle}
-      selections={selections}
+      selected={selections}
+      toggle={(toggleRef: any) => (
+        <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen}>
+          {isOpen ? 'Expanded' : 'Collapsed'}
+        </MenuToggle>
+      )}
     >
-      {options}
+      <SelectList>{options}</SelectList>
     </Select>
   );
 

package/src/components/Table/FavoritesCell.tsx

@@ -33,9 +33,8 @@ export const FavoritesCell: React.FunctionComponent<FavoritesCellProps> = ({
       onClick={onFavorite}
       {...ariaProps}
       {...props}
-    >
-      <StarIcon aria-hidden />
-    </Button>
+      icon={<StarIcon aria-hidden />}
+    />
   );
 };
 FavoritesCell.displayName = 'FavoritesCell';

package/src/components/Table/HeaderCellInfoWrapper.tsx

@@ -52,15 +52,19 @@ export const HeaderCellInfoWrapper: React.FunctionComponent<ColumnHelpWrapperPro
     <span className={css(styles.tableColumnHelpAction)}>
       {variant === 'tooltip' ? (
         <Tooltip content={info} {...tooltipProps}>
-          <Button variant="plain" aria-label={ariaLabel || (typeof info === 'string' && info) || 'More info'}>
-            <HelpIcon />
-          </Button>
+          <Button
+            variant="plain"
+            aria-label={ariaLabel || (typeof info === 'string' && info) || 'More info'}
+            icon={<HelpIcon />}
+          />
         </Tooltip>
       ) : (
         <Popover bodyContent={info} {...popoverProps}>
-          <Button variant="plain" aria-label={ariaLabel || (typeof info === 'string' && info) || 'More info'}>
-            <HelpIcon />
-          </Button>
+          <Button
+            variant="plain"
+            aria-label={ariaLabel || (typeof info === 'string' && info) || 'More info'}
+            icon={<HelpIcon />}
+          />
         </Popover>
       )}
     </span>

package/src/components/Table/Table.tsx

@@ -5,7 +5,7 @@ import stylesTreeView from '@patternfly/react-styles/css/components/Table/table-
 import { css } from '@patternfly/react-styles';
 import { toCamel } from './utils';
 import { IVisibility } from './utils/decorators/classNames';
-import { useOUIAProps, OUIAProps, handleArrows, setTabIndex } from '@patternfly/react-core';
+import { useOUIAProps, OUIAProps, handleArrows, setTabIndex, KeyTypes } from '@patternfly/react-core';
 import { TableGridBreakpoint, TableVariant } from './TableTypes';
 
 export interface BaseCellProps {
@@ -124,7 +124,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
       setTableCaption(
         <caption>
           {selectableRowCaptionText}
-          <div className="pf-v5-screen-reader">
+          <div className="pf-v6-screen-reader">
             This table has selectable rows. It can be navigated by row using tab, and each row can be selected using
             space or enter.
           </div>
@@ -132,7 +132,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
       );
     } else {
       setTableCaption(
-        <caption className="pf-v5-screen-reader">
+        <caption className="pf-v6-screen-reader">
           This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space
           or enter.
         </caption>
@@ -169,7 +169,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
     const rows = (Array.from(tableRef.current.querySelectorAll('tbody tr')) as Element[]).filter(
       (el) => !el.classList.contains('pf-m-disabled') && !(el as HTMLElement).hidden
     );
-    if (key === 'Space' || key === 'Enter') {
+    if (key === KeyTypes.Space || key === KeyTypes.Enter) {
       (activeElement as HTMLElement).click();
       event.preventDefault();
     }

package/src/components/Table/TableTypes.tsx

@@ -1,7 +1,6 @@
 import { formatterValueType, ColumnType, RowType, RowKeyType, HeaderType } from './base/types';
 import { SortByDirection } from './SortColumn';
 import { DropdownItemProps } from '@patternfly/react-core/dist/esm/components/Dropdown';
-import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown';
 import * as React from 'react';
 import { CustomActionsToggleProps } from './ActionsColumn';
 import { ButtonProps } from '@patternfly/react-core/dist/esm/components/Button';
@@ -82,7 +81,6 @@ export type OnCheckChange = (
 // Todo: Update type with next breaking change release
 // export type IHeaderRow = ColumnType;
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface IHeaderRow extends ColumnType {}
 
 export interface IRowData extends IRow {
@@ -102,8 +100,8 @@ export interface IColumn {
     rowLabeledBy?: string;
     expandId?: string;
     contentId?: string;
-    dropdownPosition?: DropdownPosition;
-    dropdownDirection?: DropdownDirection;
+    dropdownPosition?: 'right' | 'left';
+    dropdownDirection?: 'up' | 'down';
     menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
     actionsToggle?: (props: CustomActionsToggleProps) => React.ReactNode;
     actionsPopperProps?: any;
@@ -138,7 +136,7 @@ export interface IExtra extends IExtraData {
 }
 
 export type IFormatterValueType = formatterValueType & {
-  title?: string | React.ReactNode;
+  title?: React.ReactNode;
   props?: any;
 };
 
@@ -157,7 +155,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  */
@@ -166,6 +164,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 {
@@ -189,7 +189,7 @@ export interface decoratorReturnType {
   textCenter?: boolean;
   component?: string;
   isVisible?: boolean;
-  title?: string | React.ReactNode;
+  title?: React.ReactNode;
   props?: any;
   scope?: string;
   parentId?: number;
@@ -203,7 +203,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 */
@@ -227,7 +227,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/Td.tsx

@@ -30,8 +30,8 @@ import {
   TdTreeRowType
 } from './base/types';
 import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
-import cssStickyCellLeft from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Left';
-import cssStickyCellRight from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Right';
+import cssStickyCellInlineStart from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineStart';
+import cssStickyCellInlineEnd from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineEnd';
 
 export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDataCellElement>, 'onSelect' | 'width'> {
   /**
@@ -55,7 +55,7 @@ export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDa
   draggableRow?: TdDraggableType;
   /** True to remove padding */
   noPadding?: boolean;
-  /** Applies pf-v5-c-table__action to td */
+  /** Applies pf-v6-c-table__action to td */
   isActionCell?: boolean;
   /**
    * Tooltip to show on the body cell.
@@ -294,8 +294,8 @@ const TdBase: React.FunctionComponent<TdProps> = ({
       {...(isStickyColumn && {
         style: {
           [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined,
-          [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0,
-          [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0,
+          [cssStickyCellInlineStart.name]: stickyLeftOffset ? stickyLeftOffset : 0,
+          [cssStickyCellInlineEnd.name]: stickyRightOffset ? stickyRightOffset : 0,
           ...props.style
         } as React.CSSProperties
       })}

package/src/components/Table/Th.tsx

@@ -10,8 +10,8 @@ import { Tooltip, TooltipProps } from '@patternfly/react-core/dist/esm/component
 import { BaseCellProps } from './Table';
 import { IFormatterValueType, IColumn } from './TableTypes';
 import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
-import cssStickyCellLeft from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Left';
-import cssStickyCellRight from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Right';
+import cssStickyCellInlineStart from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineStart';
+import cssStickyCellInlineEnd from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineEnd';
 
 export interface ThProps
   extends BaseCellProps,
@@ -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,
@@ -206,13 +224,13 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       {...(isStickyColumn && {
         style: {
           [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined,
-          [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0,
-          [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0,
+          [cssStickyCellInlineStart.name]: stickyLeftOffset ? stickyLeftOffset : 0,
+          [cssStickyCellInlineEnd.name]: stickyRightOffset ? stickyRightOffset : 0,
           ...props.style
         } as React.CSSProperties
       })}
     >
-      {transformedChildren}
+      {transformedChildren || (screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>)}
     </MergedComponent>
   );
 

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/__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/__tests__/__snapshots__/RowWrapper.test.tsx.snap

@@ -5,9 +5,9 @@ exports[`RowWrapper renders correctly 1`] = `
   <table>
     <tbody>
       <tr
-        class="pf-v5-c-table__tr"
+        class="pf-v6-c-table__tr"
         data-ouia-component-id="OUIA-Generated-TableRow-1"
-        data-ouia-component-type="PF5/TableRow"
+        data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />
     </tbody>
@@ -20,9 +20,9 @@ exports[`RowWrapper renders expanded correctly 1`] = `
   <table>
     <tbody>
       <tr
-        class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
+        class="pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded"
         data-ouia-component-id="OUIA-Generated-TableRow-2"
-        data-ouia-component-type="PF5/TableRow"
+        data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
       />
     </tbody>