Move row focus logic to <TreeGrid />, add renderSummaryRow

src/DataGrid.tsx

@@ -75,7 +75,7 @@ import {
   viewportDraggingClassname,
   frozenColumnShadowTopClassname
 } from './style/core';
-import SummaryRow from './SummaryRow';
+import { defaultRenderSummaryRow } from './SummaryRow';
 
 interface ActiveCellState extends Position {
   readonly mode: 'ACTIVE';
@@ -303,6 +303,8 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
   const headerRowHeight = rawHeaderRowHeight ?? (typeof rowHeight === 'number' ? rowHeight : 35);
   const summaryRowHeight = rawSummaryRowHeight ?? (typeof rowHeight === 'number' ? rowHeight : 35);
   const renderRow = renderers?.renderRow ?? defaultRenderers?.renderRow ?? defaultRenderRow;
+  const renderSummaryRow =
+    renderers?.renderSummaryRow ?? defaultRenderers?.renderSummaryRow ?? defaultRenderSummaryRow;
   const renderCell = renderers?.renderCell ?? defaultRenderers?.renderCell ?? defaultRenderCell;
   const renderSortStatus =
     renderers?.renderSortStatus ?? defaultRenderers?.renderSortStatus ?? defaultRenderSortStatus;
@@ -1128,8 +1130,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
           draggedOverCellIdx: getDraggedOverCellIdx(rowIdx),
           onRowChange: handleFormatterRowChangeLatest,
           setActivePosition: setPositionLatest,
-          activeCellEditor: getCellEditor(rowIdx),
-          isTreeGrid
+          activeCellEditor: getCellEditor(rowIdx)
         });
       })
       .toArray();
@@ -1234,22 +1235,18 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
               const isSummaryRowActive = activePosition.rowIdx === summaryRowIdx;
               const top = headerRowsHeight + summaryRowHeight * rowIdx;
 
-              return (
-                <SummaryRow
-                  key={rowIdx}
-                  aria-rowindex={gridRowStart}
-                  rowIdx={summaryRowIdx}
-                  gridRowStart={gridRowStart}
-                  row={row}
-                  top={top}
-                  bottom={undefined}
-                  iterateOverViewportColumnsForRow={iterateOverViewportColumnsForRow}
-                  activeCellIdx={isSummaryRowActive ? activePosition.idx : undefined}
-                  isTop
-                  setActivePosition={setPositionLatest}
-                  isTreeGrid={isTreeGrid}
-                />
-              );
+              return renderSummaryRow(rowIdx, {
+                'aria-rowindex': gridRowStart,
+                rowIdx: summaryRowIdx,
+                gridRowStart,
+                row,
+                top,
+                bottom: undefined,
+                iterateOverViewportColumnsForRow,
+                activeCellIdx: isSummaryRowActive ? activePosition.idx : undefined,
+                isTop: true,
+                setActivePosition: setPositionLatest
+              });
             })}
             <RowSelectionChangeContext value={selectRowLatest}>
               {getViewportRows()}
@@ -1267,22 +1264,18 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
                   ? summaryRowHeight * (bottomSummaryRowsCount - 1 - rowIdx)
                   : undefined;
 
-              return (
-                <SummaryRow
-                  aria-rowindex={ariaRowCount - bottomSummaryRowsCount + rowIdx + 1}
-                  key={rowIdx}
-                  rowIdx={summaryRowIdx}
-                  gridRowStart={gridRowStart}
-                  row={row}
-                  top={top}
-                  bottom={bottom}
-                  iterateOverViewportColumnsForRow={iterateOverViewportColumnsForRow}
-                  activeCellIdx={isSummaryRowActive ? activePosition.idx : undefined}
-                  isTop={false}
-                  setActivePosition={setPositionLatest}
-                  isTreeGrid={isTreeGrid}
-                />
-              );
+              return renderSummaryRow(rowIdx, {
+                'aria-rowindex': ariaRowCount - bottomSummaryRowsCount + rowIdx + 1,
+                rowIdx: summaryRowIdx,
+                gridRowStart,
+                row,
+                top,
+                bottom,
+                iterateOverViewportColumnsForRow,
+                activeCellIdx: isSummaryRowActive ? activePosition.idx : undefined,
+                isTop: false,
+                setActivePosition: setPositionLatest
+              });
             })}
           </>
         )}

src/GroupRow.tsx

@@ -7,7 +7,7 @@ import type { BaseRenderRowProps, GroupRow, Omit } from './types';
 import { SELECT_COLUMN_KEY } from './Columns';
 import GroupCell from './GroupCell';
 import { cell, cellFrozen } from './style/cell';
-import { rowClassname, rowActiveClassname } from './style/row';
+import { rowClassname } from './style/row';
 
 const groupRow = css`
   @layer rdg.GroupedRow {
@@ -46,8 +46,6 @@ function GroupedRow<R, SR>({
   toggleGroup,
   ...props
 }: GroupRowRendererProps<R, SR>) {
-  const isPositionOnRow = activeCellIdx === -1;
-
   let idx = row.level;
 
   function handleSelectGroup() {
@@ -67,12 +65,10 @@ function GroupedRow<R, SR>({
         aria-setsize={row.setSize}
         aria-posinset={row.posInSet + 1} // aria-posinset is 1-based
         aria-expanded={row.isExpanded}
-        tabIndex={isPositionOnRow ? 0 : -1}
         className={classnames(
           rowClassname,
           groupRowClassname,
           `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`,
-          isPositionOnRow && rowActiveClassname,
           className
         )}
         onMouseDown={handleSelectGroup}

src/HeaderRow.tsx

@@ -13,7 +13,6 @@ import type {
 import type { DataGridProps } from './DataGrid';
 import HeaderCell from './HeaderCell';
 import { cell, cellFrozen } from './style/cell';
-import { rowActiveClassname } from './style/row';
 
 type SharedDataGridProps<R, SR, K extends React.Key> = Pick<
   DataGridProps<R, SR, K>,
@@ -67,7 +66,6 @@ function HeaderRow<R, SR, K extends React.Key>({
   direction
 }: HeaderRowProps<R, SR, K>) {
   const [draggedColumnKey, setDraggedColumnKey] = useState<string>();
-  const isPositionOnRow = activeCellIdx === -1;
 
   const cells = iterateOverViewportColumnsForRow(activeCellIdx, { type: 'HEADER' })
     .map(([column, isCellActive, colSpan], index) => (
@@ -95,11 +93,7 @@ function HeaderRow<R, SR, K extends React.Key>({
     <div
       role="row"
       aria-rowindex={rowIdx} // aria-rowindex is 1 based
-      className={classnames(
-        headerRowClassname,
-        isPositionOnRow && rowActiveClassname,
-        headerRowClass
-      )}
+      className={classnames(headerRowClassname, headerRowClass)}
     >
       {cells}
     </div>

src/Row.tsx

@@ -4,7 +4,7 @@ import { RowSelectionContext, type RowSelectionContextValue } from './hooks';
 import { classnames } from './utils';
 import type { RenderRowProps } from './types';
 import { useDefaultRenderers } from './DataGridDefaultRenderersContext';
-import { rowClassname, rowActiveClassname } from './style/row';
+import { rowClassname } from './style/row';
 
 function Row<R, SR>({
   className,
@@ -17,7 +17,6 @@ function Row<R, SR>({
   row,
   iterateOverViewportColumnsForRow,
   activeCellEditor,
-  isTreeGrid,
   onCellMouseDown,
   onCellClick,
   onCellDoubleClick,
@@ -30,12 +29,9 @@ function Row<R, SR>({
 }: RenderRowProps<R, SR>) {
   const renderCell = useDefaultRenderers<R, SR>()!.renderCell!;
 
-  const isPositionOnRow = activeCellIdx === -1;
-
   className = classnames(
     rowClassname,
     `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`,
-    isPositionOnRow && rowActiveClassname,
     rowClass?.(row, rowIdx),
     className
   );
@@ -72,7 +68,6 @@ function Row<R, SR>({
     <RowSelectionContext value={selectionValue}>
       <div
         role="row"
-        tabIndex={isTreeGrid ? (isPositionOnRow ? 0 : -1) : undefined}
         className={className}
         style={{
           gridRowStart,

src/SummaryRow.tsx

@@ -2,33 +2,10 @@ import { memo } from 'react';
 import { css } from 'ecij';
 
 import { classnames } from './utils';
-import type { RenderRowProps } from './types';
-import {
-  bottomSummaryRowClassname,
-  rowClassname,
-  rowActiveClassname,
-  topSummaryRowClassname
-} from './style/row';
+import type { RenderSummaryRowProps } from './types';
+import { bottomSummaryRowClassname, rowClassname, topSummaryRowClassname } from './style/row';
 import SummaryCell from './SummaryCell';
 
-type SharedRenderRowProps<R, SR> = Pick<
-  RenderRowProps<R, SR>,
-  | 'iterateOverViewportColumnsForRow'
-  | 'rowIdx'
-  | 'gridRowStart'
-  | 'setActivePosition'
-  | 'activeCellIdx'
-  | 'isTreeGrid'
->;
-
-interface SummaryRowProps<R, SR> extends SharedRenderRowProps<R, SR> {
-  'aria-rowindex': number;
-  row: SR;
-  top: number | undefined;
-  bottom: number | undefined;
-  isTop: boolean;
-}
-
 const summaryRow = css`
   @layer rdg.SummaryRow {
     position: sticky;
@@ -39,6 +16,8 @@ const summaryRow = css`
 const summaryRowClassname = `rdg-summary-row ${summaryRow}`;
 
 function SummaryRow<R, SR>({
+  tabIndex,
+  className,
   rowIdx,
   gridRowStart,
   row,
@@ -48,11 +27,8 @@ function SummaryRow<R, SR>({
   top,
   bottom,
   isTop,
-  isTreeGrid,
   'aria-rowindex': ariaRowIndex
-}: SummaryRowProps<R, SR>) {
-  const isPositionOnRow = activeCellIdx === -1;
-
+}: RenderSummaryRowProps<R, SR>) {
   const cells = iterateOverViewportColumnsForRow(activeCellIdx, { type: 'SUMMARY', row })
     .map(([column, isCellActive, colSpan]) => (
       <SummaryCell<R, SR>
@@ -71,13 +47,13 @@ function SummaryRow<R, SR>({
     <div
       role="row"
       aria-rowindex={ariaRowIndex}
-      tabIndex={isTreeGrid ? (isPositionOnRow ? 0 : -1) : undefined}
+      tabIndex={tabIndex}
       className={classnames(
         rowClassname,
         `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`,
         summaryRowClassname,
         isTop ? topSummaryRowClassname : bottomSummaryRowClassname,
-        isPositionOnRow && rowActiveClassname
+        className
       )}
       style={{
         gridRowStart,
@@ -90,4 +66,15 @@ function SummaryRow<R, SR>({
   );
 }
 
-export default memo(SummaryRow) as <R, SR>(props: SummaryRowProps<R, SR>) => React.JSX.Element;
+const SummaryRowComponent = memo(SummaryRow) as <R, SR>(
+  props: RenderSummaryRowProps<R, SR>
+) => React.JSX.Element;
+
+export default SummaryRowComponent;
+
+export function defaultRenderSummaryRow<R, SR>(
+  key: React.Key,
+  props: RenderSummaryRowProps<R, SR>
+) {
+  return <SummaryRowComponent key={key} {...props} />;
+}

src/TreeDataGrid.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 import type { Key } from 'react';
 
 import { useLatestFunc } from './hooks';
-import { assertIsValidKeyGetter, getLeftRightKey } from './utils';
+import { assertIsValidKeyGetter, classnames, getLeftRightKey } from './utils';
 import type {
   CellClipboardEvent,
   CellCopyArgs,
@@ -14,6 +14,7 @@ import type {
   Maybe,
   Omit,
   RenderRowProps,
+  RenderSummaryRowProps,
   RowHeightArgs,
   RowsChangeData
 } from './types';
@@ -24,6 +25,8 @@ import type { DataGridProps } from './DataGrid';
 import { useDefaultRenderers } from './DataGridDefaultRenderersContext';
 import GroupedRow from './GroupRow';
 import { defaultRenderRow } from './Row';
+import { rowFocusable, rowActiveClassname } from './style/row';
+import SummaryRowComponent from './SummaryRow';
 
 export interface TreeDataGridProps<R, SR = unknown, K extends Key = Key> extends Omit<
   DataGridProps<R, SR, K>,
@@ -379,18 +382,24 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
       onRowChange,
       draggedOverCellIdx,
       activeCellEditor,
+      className,
       isRowSelectionDisabled,
-      isTreeGrid,
       ...rowProps
     }: RenderRowProps<R, SR>
   ) {
+    const isPositionOnRow = rowProps.activeCellIdx === -1;
+    const tabIndex = isPositionOnRow ? 0 : -1;
+    className = classnames(className, rowFocusable, isPositionOnRow && rowActiveClassname);
+
     if (isGroupRow(row)) {
       const { startRowIndex } = row;
       return (
         <GroupedRow
           key={key}
           {...rowProps}
           aria-rowindex={headerAndTopSummaryRowsCount + startRowIndex + 1}
+          className={className}
+          tabIndex={tabIndex}
           row={row}
           groupBy={groupBy}
           toggleGroup={toggleGroupLatest}
@@ -411,15 +420,16 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
       'aria-rowindex': ariaRowIndex,
       row,
       rowClass,
+      className,
+      tabIndex,
       onCellMouseDown,
       onCellClick,
       onCellDoubleClick,
       onCellContextMenu,
       onRowChange,
       draggedOverCellIdx,
       activeCellEditor,
-      isRowSelectionDisabled,
-      isTreeGrid
+      isRowSelectionDisabled
     });
   }
 
@@ -442,7 +452,8 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
       onCellPaste={rawOnCellPaste ? handleCellPaste : undefined}
       renderers={{
         ...renderers,
-        renderRow
+        renderRow,
+        renderSummaryRow
       }}
     />
   );
@@ -452,6 +463,25 @@ function defaultGroupIdGetter(groupKey: string, parentId: string | undefined) {
   return parentId !== undefined ? `${parentId}__${groupKey}` : groupKey;
 }
 
+function renderSummaryRow<R, SR>(
+  key: React.Key,
+  { activeCellIdx, className, ...props }: RenderSummaryRowProps<R, SR>
+) {
+  const isPositionOnRow = activeCellIdx === -1;
+  const tabIndex = isPositionOnRow ? 0 : -1;
+  className = classnames(className, rowFocusable, isPositionOnRow && rowActiveClassname);
+
+  return (
+    <SummaryRowComponent
+      key={key}
+      tabIndex={tabIndex}
+      activeCellIdx={activeCellIdx}
+      className={className}
+      {...props}
+    />
+  );
+}
+
 function isReadonlyArray(arr: unknown): arr is readonly unknown[] {
   return Array.isArray(arr);
 }