diff --git a/packages/react-table/src/components/Table/SelectColumn.tsx b/packages/react-table/src/components/Table/SelectColumn.tsx index 18f20efef34..ee76dd7fa0d 100644 --- a/packages/react-table/src/components/Table/SelectColumn.tsx +++ b/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 = ({ @@ -33,6 +35,7 @@ export const SelectColumn: React.FunctionComponent = ({ tooltipProps, id, name, + isIndeterminate, ...props }: SelectColumnProps) => { const inputRef = createRef(); @@ -48,10 +51,15 @@ export const SelectColumn: React.FunctionComponent = ({ onChange: handleChange }; + const checkboxProps = { + ...commonProps, + ...(isIndeterminate && { isChecked: null }) + }; + const content = ( {selectVariant === RowSelectVariant.checkbox ? ( - + ) : ( )} diff --git a/packages/react-table/src/components/Table/TableTypes.tsx b/packages/react-table/src/components/Table/TableTypes.tsx index 1704c795c69..994576f7040 100644 --- a/packages/react-table/src/components/Table/TableTypes.tsx +++ b/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'; diff --git a/packages/react-table/src/components/Table/Th.tsx b/packages/react-table/src/components/Table/Th.tsx index af6431e59c9..8bbfb788117 100644 --- a/packages/react-table/src/components/Table/Th.tsx +++ b/packages/react-table/src/components/Table/Th.tsx @@ -158,7 +158,8 @@ const ThBase: React.FunctionComponent = ({ onSelect: select?.onSelect, selectVariant: 'checkbox', allRowsSelected: select.isSelected, - isHeaderSelectDisabled: !!select.isHeaderSelectDisabled + isHeaderSelectDisabled: !!select.isHeaderSelectDisabled, + isIndeterminate: select?.isIndeterminate } }, tooltip: tooltip as string, diff --git a/packages/react-table/src/components/Table/__tests__/Th.test.tsx b/packages/react-table/src/components/Table/__tests__/Th.test.tsx index 9e24f7f239e..01276ce909d 100644 --- a/packages/react-table/src/components/Table/__tests__/Th.test.tsx +++ b/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(); + + 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(); + + 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(); + + const checkbox = screen.getByRole('checkbox') as HTMLInputElement; + expect(checkbox).toBeChecked(); + expect(checkbox.indeterminate).toBe(false); +}); diff --git a/packages/react-table/src/components/Table/base/types.tsx b/packages/react-table/src/components/Table/base/types.tsx index bee426566f5..d60d430f823 100644 --- a/packages/react-table/src/components/Table/base/types.tsx +++ b/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 */ diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md index cc232178e2a..ffecbe6d1d4 100644 --- a/packages/react-table/src/components/Table/examples/Table.md +++ b/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. diff --git a/packages/react-table/src/components/Table/examples/TableSelectableIndeterminate.tsx b/packages/react-table/src/components/Table/examples/TableSelectableIndeterminate.tsx new file mode 100644 index 00000000000..8f31146b94a --- /dev/null +++ b/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([]); + 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(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 ( + + + + + + + + + + + + {repositories.map((repo, rowIndex) => ( + + + + + + + + ))} + +
selectAllRepos(isSelecting), + isSelected: areAllReposSelected, + isIndeterminate: areSomeReposSelected + }} + aria-label="Row select" + /> + {columnNames.name}{columnNames.branches}{columnNames.prs}{columnNames.workspaces}{columnNames.lastCommit}
onSelectRepo(repo, rowIndex, isSelecting), + isSelected: isRepoSelected(repo), + isDisabled: !isRepoSelectable(repo) + }} + /> + {repo.name}{repo.branches}{repo.prs}{repo.workspaces}{repo.lastCommit}
+ ); +}; diff --git a/packages/react-table/src/components/Table/utils/decorators/selectable.tsx b/packages/react-table/src/components/Table/utils/decorators/selectable.tsx index 1b4137316bb..80f851bbc5e 100644 --- a/packages/react-table/src/components/Table/utils/decorators/selectable.tsx +++ b/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}