Use context for selection

src/Cell.tsx

@@ -47,7 +47,6 @@ function Cell<R, SR>({
   isCellSelected,
   isCopied,
   isDraggedOver,
-  isRowSelected,
   row,
   rowIdx,
   dragHandleProps,
@@ -57,7 +56,6 @@ function Cell<R, SR>({
   onContextMenu,
   onRowChange,
   selectCell,
-  selectRow,
   ...props
 }: CellRendererProps<R, SR>, ref: React.Ref<HTMLDivElement>) {
   const { cellClass } = column;
@@ -96,10 +94,6 @@ function Cell<R, SR>({
     onRowChange(rowIdx, newRow);
   }
 
-  function onRowSelectionChange(checked: boolean, isShiftClick: boolean) {
-    selectRow({ rowIdx, checked, isShiftClick });
-  }
-
   return (
     <div
       role="gridcell"
@@ -120,8 +114,6 @@ function Cell<R, SR>({
             rowIdx={rowIdx}
             row={row}
             isCellSelected={isCellSelected}
-            isRowSelected={isRowSelected}
-            onRowSelectionChange={onRowSelectionChange}
             onRowChange={handleRowChange}
           />
           {dragHandleProps && (

src/Columns.tsx

@@ -1,9 +1,44 @@
 import { SelectCellFormatter } from './formatters';
-import type { Column } from './types';
+import { useRowSelection, useRowSelectionChange } from './hooks';
+import type { Column, FormatterProps, GroupFormatterProps } from './types';
 import { stopPropagation } from './utils/domUtils';
 
 export const SELECT_COLUMN_KEY = 'select-row';
 
+function SelectFormatter(props: FormatterProps) {
+  const isRowSelected = useRowSelection();
+  const onRowSelectionChange = useRowSelectionChange();
+
+  return (
+    <SelectCellFormatter
+      aria-label="Select"
+      tabIndex={-1}
+      isCellSelected={props.isCellSelected}
+      value={isRowSelected}
+      onClick={stopPropagation}
+      onChange={onRowSelectionChange}
+    />
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function SelectGroupFormatter(props: GroupFormatterProps<any, any>) {
+  const isRowSelected = useRowSelection();
+  const onRowSelectionChange = useRowSelectionChange();
+
+  return (
+    <SelectCellFormatter
+      aria-label="Select Group"
+      tabIndex={-1}
+      isCellSelected={props.isCellSelected}
+      value={isRowSelected}
+      onChange={onRowSelectionChange}
+      // Stop propagation to prevent row selection
+      onClick={stopPropagation}
+    />
+  );
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const SelectColumn: Column<any, any> = {
   key: SELECT_COLUMN_KEY,
@@ -22,29 +57,6 @@ export const SelectColumn: Column<any, any> = {
       />
     );
   },
-  formatter(props) {
-    return (
-      <SelectCellFormatter
-        aria-label="Select"
-        tabIndex={-1}
-        isCellSelected={props.isCellSelected}
-        value={props.isRowSelected}
-        onClick={stopPropagation}
-        onChange={props.onRowSelectionChange}
-      />
-    );
-  },
-  groupFormatter(props) {
-    return (
-      <SelectCellFormatter
-        aria-label="Select Group"
-        tabIndex={-1}
-        isCellSelected={props.isCellSelected}
-        value={props.isRowSelected}
-        onChange={props.onRowSelectionChange}
-        // Stop propagation to prevent row selection
-        onClick={stopPropagation}
-      />
-    );
-  }
+  formatter: SelectFormatter,
+  groupFormatter: SelectGroupFormatter
 };

src/GroupCell.tsx

@@ -7,12 +7,9 @@ import { cellSelectedClassname } from './style';
 
 type SharedGroupRowRendererProps<R, SR> = Pick<GroupRowRendererProps<R, SR>,
   | 'id'
-  | 'rowIdx'
   | 'groupKey'
   | 'childRows'
   | 'isExpanded'
-  | 'isRowSelected'
-  | 'selectRow'
   | 'toggleGroup'
 >;
 
@@ -24,25 +21,18 @@ interface GroupCellProps<R, SR> extends SharedGroupRowRendererProps<R, SR> {
 
 function GroupCell<R, SR>({
   id,
-  rowIdx,
   groupKey,
   childRows,
   isExpanded,
   isCellSelected,
-  isRowSelected,
   column,
   groupColumnIndex,
-  selectRow,
   toggleGroup: toggleGroupWrapper
 }: GroupCellProps<R, SR>) {
   function toggleGroup() {
     toggleGroupWrapper(id);
   }
 
-  function onRowSelectionChange(checked: boolean) {
-    selectRow({ rowIdx, checked, isShiftClick: false });
-  }
-
   // Only make the cell clickable if the group level matches
   const isLevelMatching = column.rowGroup && groupColumnIndex === column.idx;
 
@@ -67,8 +57,6 @@ function GroupCell<R, SR>({
           column={column}
           isExpanded={isExpanded}
           isCellSelected={isCellSelected}
-          isRowSelected={isRowSelected}
-          onRowSelectionChange={onRowSelectionChange}
           toggleGroup={toggleGroup}
         />
       )}

src/GroupRow.tsx

@@ -1,10 +1,11 @@
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import clsx from 'clsx';
 
 import { groupRowClassname, groupRowSelectedClassname, rowClassname, rowSelectedClassname } from './style';
 import { SELECT_COLUMN_KEY } from './Columns';
 import GroupCell from './GroupCell';
 import type { CalculatedColumn, Position, SelectRowEvent, Omit } from './types';
+import { RowSelectionChangeContext, RowSelectionContext } from './hooks';
 
 export interface GroupRowRendererProps<R, SR = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {
   id: string;
@@ -38,6 +39,10 @@ function GroupedRow<R, SR>({
   toggleGroup,
   ...props
 }: GroupRowRendererProps<R, SR>) {
+  const onRowSelectionChange = useCallback((checked: boolean) => {
+    selectRow({ rowIdx, checked, isShiftClick: false });
+  }, [rowIdx, selectRow]);
+
   // Select is always the first column
   const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? level + 1 : level;
 
@@ -63,20 +68,21 @@ function GroupedRow<R, SR>({
       {...props}
     >
       {viewportColumns.map(column => (
-        <GroupCell<R, SR>
-          key={column.key}
-          id={id}
-          rowIdx={rowIdx}
-          groupKey={groupKey}
-          childRows={childRows}
-          isExpanded={isExpanded}
-          isRowSelected={isRowSelected}
-          isCellSelected={selectedCellIdx === column.idx}
-          column={column}
-          groupColumnIndex={idx}
-          selectRow={selectRow}
-          toggleGroup={toggleGroup}
-        />
+        <RowSelectionChangeContext.Provider value={onRowSelectionChange}>
+          <RowSelectionContext.Provider value={isRowSelected}>
+            <GroupCell<R, SR>
+              key={column.key}
+              id={id}
+              groupKey={groupKey}
+              childRows={childRows}
+              isExpanded={isExpanded}
+              isCellSelected={selectedCellIdx === column.idx}
+              column={column}
+              groupColumnIndex={idx}
+              toggleGroup={toggleGroup}
+            />
+          </RowSelectionContext.Provider>
+        </RowSelectionChangeContext.Provider>
       ))}
     </div>
   );

src/Row.tsx

@@ -1,11 +1,12 @@
-import { memo, forwardRef } from 'react';
+import { memo, forwardRef, useCallback } from 'react';
 import type { RefAttributes } from 'react';
 import clsx from 'clsx';
 
 import { groupRowSelectedClassname, rowClassname, rowSelectedClassname } from './style';
 import Cell from './Cell';
 import EditCell from './EditCell';
 import type { RowRendererProps, SelectedCellProps } from './types';
+import { RowSelectionChangeContext, RowSelectionContext } from './hooks';
 
 function Row<R, SR = unknown>({
   cellRenderer: CellRenderer = Cell,
@@ -29,6 +30,10 @@ function Row<R, SR = unknown>({
   'aria-selected': ariaSelected,
   ...props
 }: RowRendererProps<R, SR>, ref: React.Ref<HTMLDivElement>) {
+  const onRowSelectionChange = useCallback((checked: boolean, isShiftClick: boolean) => {
+    selectRow({ rowIdx, checked, isShiftClick });
+  }, [rowIdx, selectRow]);
+
   function handleDragEnter(event: React.MouseEvent<HTMLDivElement>) {
     setDraggedOverRowIdx?.(rowIdx);
     onMouseEnter?.(event);
@@ -71,23 +76,25 @@ function Row<R, SR = unknown>({
         }
 
         return (
-          <CellRenderer
-            key={column.key}
-            rowIdx={rowIdx}
-            column={column}
-            row={row}
-            isCopied={copiedCellIdx === column.idx}
-            isDraggedOver={draggedOverCellIdx === column.idx}
-            isCellSelected={isCellSelected}
-            isRowSelected={isRowSelected}
-            dragHandleProps={isCellSelected ? (selectedCellProps as SelectedCellProps).dragHandleProps : undefined}
-            onFocus={isCellSelected ? (selectedCellProps as SelectedCellProps).onFocus : undefined}
-            onKeyDown={isCellSelected ? selectedCellProps!.onKeyDown : undefined}
-            onRowClick={onRowClick}
-            onRowChange={onRowChange}
-            selectCell={selectCell}
-            selectRow={selectRow}
-          />
+          <RowSelectionChangeContext.Provider value={onRowSelectionChange}>
+            <RowSelectionContext.Provider value={isRowSelected}>
+              <CellRenderer
+                key={column.key}
+                rowIdx={rowIdx}
+                column={column}
+                row={row}
+                isCopied={copiedCellIdx === column.idx}
+                isDraggedOver={draggedOverCellIdx === column.idx}
+                isCellSelected={isCellSelected}
+                dragHandleProps={isCellSelected ? (selectedCellProps as SelectedCellProps).dragHandleProps : undefined}
+                onFocus={isCellSelected ? (selectedCellProps as SelectedCellProps).onFocus : undefined}
+                onKeyDown={isCellSelected ? selectedCellProps!.onKeyDown : undefined}
+                onRowClick={onRowClick}
+                onRowChange={onRowChange}
+                selectCell={selectCell}
+              />
+            </RowSelectionContext.Provider>
+          </RowSelectionChangeContext.Provider>
         );
       })}
     </div>

src/hooks/index.ts

@@ -4,3 +4,5 @@ export * from './useViewportColumns';
 export * from './useViewportRows';
 export * from './useFocusRef';
 export * from './useLatestFunc';
+export * from './useRowSelection';
+export * from './useRowSelectionChange';

src/hooks/useRowSelection.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+export const RowSelectionContext =
+  createContext<boolean | undefined>(undefined);
+
+export function useRowSelection() {
+  const context = useContext(RowSelectionContext);
+  if (context === undefined) {
+    throw new Error('useRowSelection must be used within a RowSelectionContext');
+  }
+  return context;
+}

src/hooks/useRowSelectionChange.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+export const RowSelectionChangeContext =
+  createContext<(((checked: boolean, isShiftClick: boolean) => void) | undefined)>(undefined);
+
+export function useRowSelectionChange() {
+  const context = useContext(RowSelectionChangeContext);
+  if (context === undefined) {
+    throw new Error('useRowSelectionChange must be used within a RowSelectionChangeContext');
+  }
+  return context;
+}

src/types.ts

@@ -80,8 +80,6 @@ export interface FormatterProps<TRow = any, TSummaryRow = any> {
   column: CalculatedColumn<TRow, TSummaryRow>;
   row: TRow;
   isCellSelected: boolean;
-  isRowSelected: boolean;
-  onRowSelectionChange: (checked: boolean, isShiftClick: boolean) => void;
   onRowChange: (row: Readonly<TRow>) => void;
 }
 
@@ -96,8 +94,6 @@ export interface GroupFormatterProps<TRow, TSummaryRow = unknown> {
   childRows: readonly TRow[];
   isExpanded: boolean;
   isCellSelected: boolean;
-  isRowSelected: boolean;
-  onRowSelectionChange: (checked: boolean) => void;
   toggleGroup: () => void;
 }
 
@@ -148,12 +144,10 @@ export interface CellRendererProps<TRow, TSummaryRow = unknown> extends Omit<Rea
   isCopied: boolean;
   isDraggedOver: boolean;
   isCellSelected: boolean;
-  isRowSelected: boolean;
   dragHandleProps?: Pick<React.HTMLAttributes<HTMLDivElement>, 'onMouseDown' | 'onDoubleClick'>;
   onRowChange: (rowIdx: number, newRow: TRow) => void;
   onRowClick?: (rowIdx: number, row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void;
   selectCell: (position: Position, enableEditor?: boolean) => void;
-  selectRow: (selectRowEvent: SelectRowEvent) => void;
 }
 
 export interface RowRendererProps<TRow, TSummaryRow = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {