@patternfly/react-table 5.3.0-prerelease.2 → 5.3.0-prerelease.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "5.3.0-prerelease.2",
+  "version": "5.3.0-prerelease.20",
   "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,10 +39,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^5.3.0-prerelease.2",
-    "@patternfly/react-icons": "^5.3.0-prerelease.0",
-    "@patternfly/react-styles": "^5.3.0-prerelease.0",
-    "@patternfly/react-tokens": "^5.3.0-prerelease.0",
+    "@patternfly/react-core": "^5.3.0-prerelease.19",
+    "@patternfly/react-icons": "^5.3.0-prerelease.3",
+    "@patternfly/react-styles": "^5.3.0-prerelease.3",
+    "@patternfly/react-tokens": "^5.3.0-prerelease.3",
     "lodash": "^4.17.19",
     "tslib": "^2.5.0"
   },
@@ -54,5 +54,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "08a6b1aaaf6769b657ed674f4bb741b530265c7d"
+  "gitHead": "5fc4f385c49deaa2f2835879132bd33869ff73d1"
 }

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 })
@@ -116,35 +119,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,10 +140,10 @@ 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>
           ))}

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

@@ -154,6 +154,9 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               {columnNames.destination}
             </Th>
           </Tr>
+          {/* TODO: Remove the following Tr once Core updates towards https://github.com/patternfly/patternfly/issues/6272
+              are made for the v5 branch. For v6 branch the row can be removed immediately.
+          */}
           <Tr isBorderRow aria-hidden="true">
             <Td colSpan={9}></Td>
           </Tr>

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/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/DashboardHeader.tsx

@@ -0,0 +1,198 @@
+import React, { useState } from 'react';
+import {
+  Avatar,
+  Brand,
+  Button,
+  ButtonVariant,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  Masthead,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
+  MenuToggle,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  PageToggleButton
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import imgAvatar from '@patternfly/react-table/src/demos/assets/avatarImg.svg';
+import pfLogo from '@patternfly/react-table/src/demos/assets/pf-logo.svg';
+
+interface DashboardHeaderProps {
+  /** Render custom notification badge */
+  notificationBadge?: React.ReactNode;
+}
+
+export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBadge }) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+
+  const kebabDropdownItems = (
+    <>
+      <DropdownItem>
+        <CogIcon /> Settings
+      </DropdownItem>
+      <DropdownItem>
+        <HelpIcon /> Help
+      </DropdownItem>
+    </>
+  );
+
+  const userDropdownItems = (
+    <>
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user">User management</DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </>
+  );
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(false);
+  };
+
+  const onKebabDropdownToggle = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+  };
+
+  const onKebabDropdownSelect = () => {
+    setIsKebabDropdownOpen(false);
+  };
+
+  const onFullKebabToggle = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
+  };
+
+  const onFullKebabSelect = () => {
+    setIsFullKebabDropdownOpen(false);
+  };
+
+  return (
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label="Global navigation">
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand>
+          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>
+        <Toolbar id="toolbar" isFullHeight isStatic>
+          <ToolbarContent>
+            <ToolbarGroup
+              variant="icon-button-group"
+              align={{ default: 'alignRight' }}
+              spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+            >
+              {notificationBadge ?? (
+                <ToolbarItem>
+                  <Button
+                    aria-label="Notifications"
+                    variant={ButtonVariant.plain}
+                    icon={<BellIcon />}
+                    onClick={() => {}}
+                  />
+                </ToolbarItem>
+              )}
+              <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+                <ToolbarItem>
+                  <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+                </ToolbarItem>
+                <ToolbarItem>
+                  <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+                </ToolbarItem>
+              </ToolbarGroup>
+              <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
+                <Dropdown
+                  isOpen={isKebabDropdownOpen}
+                  onSelect={onKebabDropdownSelect}
+                  onOpenChange={setIsKebabDropdownOpen}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: React.RefObject<any>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isKebabDropdownOpen}
+                      onClick={onKebabDropdownToggle}
+                      variant="plain"
+                      aria-label="Settings and help"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                >
+                  <DropdownList>{kebabDropdownItems}</DropdownList>
+                </Dropdown>
+              </ToolbarItem>
+              <ToolbarItem visibility={{ md: 'hidden' }}>
+                <Dropdown
+                  isOpen={isFullKebabDropdownOpen}
+                  onSelect={onFullKebabSelect}
+                  onOpenChange={setIsFullKebabDropdownOpen}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: React.RefObject<any>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isFullKebabDropdownOpen}
+                      onClick={onFullKebabToggle}
+                      variant="plain"
+                      aria-label="Toolbar menu"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                >
+                  <DropdownGroup key="group 2" aria-label="User actions">
+                    <DropdownList>{userDropdownItems}</DropdownList>
+                  </DropdownGroup>
+                  <Divider />
+                  <DropdownList>{kebabDropdownItems}</DropdownList>
+                </Dropdown>
+              </ToolbarItem>
+            </ToolbarGroup>
+            <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+              <Dropdown
+                isOpen={isDropdownOpen}
+                onSelect={onDropdownSelect}
+                onOpenChange={setIsDropdownOpen}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef: React.RefObject<any>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isDropdownOpen}
+                    onClick={onDropdownToggle}
+                    icon={<Avatar src={imgAvatar} alt="" />}
+                    isFullHeight
+                  >
+                    Ned Username
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
+    </Masthead>
+  );
+};
+DashboardHeader.displayName = 'DashboardHeader';