Add indeterminate state of header checkbox

Added someRowsSelected property to DataGrid to determine if indeterminate

Provide someRowsSelected as a new property to HeaderRendererProps

Automatically set indeterminate property on built-in or overridden checkboxFormatter
as long as the ref exists and the ref component has a property named `indeterminate`
(e.x. input component)

Fixed typo in comment

resolves adazzle#3058

src/Columns.tsx

@@ -50,6 +50,7 @@ export const SelectColumn: Column<any, any> = {
         aria-label="Select All"
         isCellSelected={props.isCellSelected}
         value={props.allRowsSelected}
+        isIndeterminate={props.someRowsSelected}
         onChange={props.onAllRowsSelectionChange}
       />
     );

src/DataGrid.tsx

@@ -304,7 +304,7 @@ function DataGrid<R, SR, K extends Key>(
   );
 
   const allRowsSelected = useMemo((): boolean => {
-    // no rows to select = explicitely unchecked
+    // no rows to select = explicitly unchecked
     const { length } = rawRows;
     return (
       length !== 0 &&
@@ -315,6 +315,17 @@ function DataGrid<R, SR, K extends Key>(
     );
   }, [rawRows, selectedRows, rowKeyGetter]);
 
+  const someRowsSelected = useMemo((): boolean => {
+    const { length } = rawRows;
+    return (
+      length !== 0 &&
+      selectedRows != null &&
+      rowKeyGetter != null &&
+      selectedRows.size > 0 &&
+      selectedRows.size < length
+    );
+  }, [rawRows, selectedRows, rowKeyGetter]);
+
   const {
     columns,
     colSpanColumns,
@@ -1221,6 +1232,7 @@ function DataGrid<R, SR, K extends Key>(
           onColumnResize={handleColumnResizeLatest}
           allRowsSelected={allRowsSelected}
           onAllRowsSelectionChange={selectAllRowsLatest}
+          someRowsSelected={someRowsSelected}
           sortColumns={sortColumns}
           onSortColumnsChange={onSortColumnsChangeLatest}
           lastFrozenColumnIndex={lastFrozenColumnIndex}

src/HeaderCell.tsx

@@ -29,6 +29,7 @@ type SharedHeaderRowProps<R, SR> = Pick<
   | 'sortColumns'
   | 'onSortColumnsChange'
   | 'allRowsSelected'
+  | 'someRowsSelected'
   | 'onAllRowsSelectionChange'
   | 'selectCell'
   | 'onColumnResize'
@@ -48,6 +49,7 @@ export default function HeaderCell<R, SR>({
   isCellSelected,
   onColumnResize,
   allRowsSelected,
+  someRowsSelected,
   onAllRowsSelectionChange,
   sortColumns,
   onSortColumnsChange,
@@ -189,6 +191,7 @@ export default function HeaderCell<R, SR>({
         priority,
         onSort,
         allRowsSelected,
+        someRowsSelected,
         onAllRowsSelectionChange,
         isCellSelected
       })}

src/HeaderRow.tsx

@@ -16,6 +16,7 @@ type SharedDataGridProps<R, SR, K extends React.Key> = Pick<
 export interface HeaderRowProps<R, SR, K extends React.Key> extends SharedDataGridProps<R, SR, K> {
   columns: readonly CalculatedColumn<R, SR>[];
   allRowsSelected: boolean;
+  someRowsSelected: boolean;
   onAllRowsSelectionChange: (checked: boolean) => void;
   onColumnResize: (column: CalculatedColumn<R, SR>, width: number | 'max-content') => void;
   selectCell: (columnIdx: number) => void;
@@ -50,6 +51,7 @@ const headerRowClassname = `rdg-header-row ${headerRow}`;
 function HeaderRow<R, SR, K extends React.Key>({
   columns,
   allRowsSelected,
+  someRowsSelected,
   onAllRowsSelectionChange,
   onColumnResize,
   sortColumns,
@@ -76,6 +78,7 @@ function HeaderRow<R, SR, K extends React.Key>({
         isCellSelected={selectedCellIdx === column.idx}
         onColumnResize={onColumnResize}
         allRowsSelected={allRowsSelected}
+        someRowsSelected={someRowsSelected}
         onAllRowsSelectionChange={onAllRowsSelectionChange}
         onSortColumnsChange={onSortColumnsChange}
         sortColumns={sortColumns}

src/formatters/SelectCellFormatter.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useFocusRef } from '../hooks/useFocusRef';
 import { useDefaultComponents } from '../DataGridDefaultComponentsProvider';
 import type { CheckboxFormatterProps } from '../types';
@@ -6,13 +7,15 @@ type SharedInputProps = Pick<CheckboxFormatterProps, 'disabled' | 'aria-label' |
 
 interface SelectCellFormatterProps extends SharedInputProps {
   isCellSelected: boolean;
+  isIndeterminate?: boolean;
   value: boolean;
   onChange: (value: boolean, isShiftClick: boolean) => void;
 }
 
 export function SelectCellFormatter({
   value,
   isCellSelected,
+  isIndeterminate = false,
   disabled,
   onChange,
   'aria-label': ariaLabel,
@@ -21,6 +24,13 @@ export function SelectCellFormatter({
   const { ref, tabIndex } = useFocusRef<HTMLInputElement>(isCellSelected);
   const checkboxFormatter = useDefaultComponents()!.checkboxFormatter!;
 
+  useEffect(() => {
+    if (typeof ref.current?.indeterminate === 'boolean') {
+      ref.current.indeterminate = isIndeterminate;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isIndeterminate]);
+
   return (
     <>
       {checkboxFormatter(

src/types.ts

@@ -107,6 +107,7 @@ export interface HeaderRendererProps<TRow, TSummaryRow = unknown> {
   priority: number | undefined;
   onSort: (ctrlClick: boolean) => void;
   allRowsSelected: boolean;
+  someRowsSelected: boolean;
   onAllRowsSelectionChange: (checked: boolean) => void;
   isCellSelected: boolean;
 }