feat(Table): add indeterminate checkbox state support for select-all header

packages/react-table/src/components/Table/SelectColumn.tsx

@@ -21,6 +21,8 @@ export interface SelectColumnProps {
   id?: string;
   /** name for the input element - required by Radio component */
   name?: string;
+  /** Whether the checkbox should be in an indeterminate state */
+  isIndeterminate?: boolean;
 }
 
 export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
@@ -33,6 +35,7 @@ export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
   tooltipProps,
   id,
   name,
+  isIndeterminate,
   ...props
 }: SelectColumnProps) => {
   const inputRef = createRef<any>();
@@ -48,10 +51,15 @@ export const SelectColumn: React.FunctionComponent<SelectColumnProps> = ({
     onChange: handleChange
   };
 
+  const checkboxProps = {
+    ...commonProps,
+    ...(isIndeterminate && { isChecked: null })
+  };
+
   const content = (
     <Fragment>
       {selectVariant === RowSelectVariant.checkbox ? (
-        <Checkbox {...commonProps} />
+        <Checkbox {...checkboxProps} />
       ) : (
         <Radio {...commonProps} name={name} />
       )}

packages/react-table/src/components/Table/TableTypes.tsx

@@ -107,6 +107,7 @@ export interface IColumn {
     allRowsSelected?: boolean;
     allRowsExpanded?: boolean;
     isHeaderSelectDisabled?: boolean;
+    isIndeterminate?: boolean;
     onFavorite?: OnFavorite;
     favoriteButtonProps?: ButtonProps;
     variant?: 'compact';

packages/react-table/src/components/Table/Th.tsx

@@ -158,7 +158,8 @@ const ThBase: React.FunctionComponent<ThProps> = ({
             onSelect: select?.onSelect,
             selectVariant: 'checkbox',
             allRowsSelected: select.isSelected,
-            isHeaderSelectDisabled: !!select.isHeaderSelectDisabled
+            isHeaderSelectDisabled: !!select.isHeaderSelectDisabled,
+            isIndeterminate: select?.isIndeterminate
           }
         },
         tooltip: tooltip as string,

packages/react-table/src/components/Table/__tests__/Th.test.tsx

@@ -54,3 +54,26 @@ test('Additional content renders after children when additionalContent is passed
   expect(thChildren.item(0)?.textContent).toEqual('Test');
   expect(thChildren.item(1)?.textContent).toEqual('Extra');
 });
+
+test('Renders checkbox without indeterminate state by default', () => {
+  render(<Th select={{ onSelect: jest.fn(), isSelected: false }} aria-label="Select all" />);
+
+  const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+  expect(checkbox).not.toBeChecked();
+  expect(checkbox.indeterminate).toBe(false);
+});
+
+test('Renders checkbox with indeterminate state when isIndeterminate is true', () => {
+  render(<Th select={{ onSelect: jest.fn(), isSelected: false, isIndeterminate: true }} aria-label="Select all" />);
+
+  const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+  expect(checkbox.indeterminate).toBe(true);
+});
+
+test('Renders checked checkbox when isSelected is true and isIndeterminate is false', () => {
+  render(<Th select={{ onSelect: jest.fn(), isSelected: true, isIndeterminate: false }} aria-label="Select all" />);
+
+  const checkbox = screen.getByRole('checkbox') as HTMLInputElement;
+  expect(checkbox).toBeChecked();
+  expect(checkbox.indeterminate).toBe(false);
+});

packages/react-table/src/components/Table/base/types.tsx

@@ -180,6 +180,8 @@ export interface ThSelectType {
   onSelect?: OnSelect;
   /** Whether the cell is selected */
   isSelected: boolean;
+  /** Whether the select checkbox should be in an indeterminate state (some items selected) */
+  isIndeterminate?: boolean;
   /** Flag indicating the select checkbox in the th is disabled */
   isHeaderSelectDisabled?: boolean;
   /** Whether to disable the selection */

packages/react-table/src/components/Table/examples/Table.md

@@ -158,6 +158,14 @@ checking checkboxes will check intermediate rows' checkboxes.
 
 ```
 
+### Selectable with indeterminate state
+
+To indicate partial selection, use `isIndeterminate` on the header's `select` prop. When some (but not all) selectable rows are selected, the header checkbox will convey this information to assistive technologies and also display a dash instead of a checkmark.
+
+```ts file="TableSelectableIndeterminate.tsx"
+
+```
+
 ### Selectable radio input
 
 Similarly to the selectable example above, the radio buttons use the first column. The first header cell is empty, and each body row's first cell has radio button props.

packages/react-table/src/components/Table/examples/TableSelectableIndeterminate.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useState } from 'react';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+
+interface Repository {
+  name: string;
+  branches: string;
+  prs: string;
+  workspaces: string;
+  lastCommit: string;
+}
+
+export const TableSelectableIndeterminate: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const repositories: Repository[] = [
+    { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five' },
+    { name: 'a', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },
+    { name: 'b', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },
+    { name: 'c', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },
+    { name: 'd', branches: 'two', prs: 'k', workspaces: 'four', lastCommit: 'five' },
+    { name: 'e', branches: 'two', prs: 'b', workspaces: 'four', lastCommit: 'five' }
+  ];
+
+  const columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces',
+    lastCommit: 'Last commit'
+  };
+
+  const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
+  const selectableRepos = repositories.filter(isRepoSelectable);
+
+  // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
+  // This is to prevent state from being based on row order index in case we later add sorting.
+  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);
+  const setRepoSelected = (repo: Repository, isSelecting = true) =>
+    setSelectedRepoNames((prevSelected) => {
+      const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
+      return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
+    });
+  const selectAllRepos = (isSelecting = true) =>
+    setSelectedRepoNames(isSelecting ? selectableRepos.map((r) => r.name) : []);
+  const areAllReposSelected = selectedRepoNames.length === selectableRepos.length;
+  const areSomeReposSelected = selectedRepoNames.length > 0 && selectedRepoNames.length < selectableRepos.length;
+  const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
+
+  // To allow shift+click to select/deselect multiple rows
+  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState<number | null>(null);
+  const [shifting, setShifting] = useState(false);
+
+  const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => {
+    // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected
+    if (shifting && recentSelectedRowIndex !== null) {
+      const numberSelected = rowIndex - recentSelectedRowIndex;
+      const intermediateIndexes =
+        numberSelected > 0
+          ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
+          : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
+      intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting));
+    } else {
+      setRepoSelected(repo, isSelecting);
+    }
+    setRecentSelectedRowIndex(rowIndex);
+  };
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') {
+        setShifting(true);
+      }
+    };
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') {
+        setShifting(false);
+      }
+    };
+
+    document.addEventListener('keydown', onKeyDown);
+    document.addEventListener('keyup', onKeyUp);
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener('keyup', onKeyUp);
+    };
+  }, []);
+
+  return (
+    <Table aria-label="Selectable table with indeterminate state">
+      <Thead>
+        <Tr>
+          <Th
+            select={{
+              onSelect: (_event, isSelecting) => selectAllRepos(isSelecting),
+              isSelected: areAllReposSelected,
+              isIndeterminate: areSomeReposSelected
+            }}
+            aria-label="Row select"
+          />
+          <Th>{columnNames.name}</Th>
+          <Th>{columnNames.branches}</Th>
+          <Th>{columnNames.prs}</Th>
+          <Th>{columnNames.workspaces}</Th>
+          <Th>{columnNames.lastCommit}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {repositories.map((repo, rowIndex) => (
+          <Tr key={repo.name}>
+            <Td
+              select={{
+                rowIndex,
+                onSelect: (_event, isSelecting) => onSelectRepo(repo, rowIndex, isSelecting),
+                isSelected: isRepoSelected(repo),
+                isDisabled: !isRepoSelectable(repo)
+              }}
+            />
+            <Td dataLabel={columnNames.name}>{repo.name}</Td>
+            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>
+            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>
+            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>
+            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+};

packages/react-table/src/components/Table/utils/decorators/selectable.tsx

@@ -9,7 +9,7 @@ export const selectable: ITransform = (
   { rowIndex, columnIndex, rowData, column, property, tooltip }: IExtra
 ) => {
   const {
-    extraParams: { onSelect, selectVariant, allRowsSelected, isHeaderSelectDisabled }
+    extraParams: { onSelect, selectVariant, allRowsSelected, isHeaderSelectDisabled, isIndeterminate }
   } = column;
   const extraData = {
     rowIndex,
@@ -70,6 +70,7 @@ export const selectable: ITransform = (
         onSelect={selectClick}
         name={selectName}
         tooltip={tooltip}
+        isIndeterminate={rowId === -1 ? isIndeterminate : undefined}
       >
         {label as React.ReactNode}
       </SelectColumn>