@opencorestack/opengridx 0.1.8 → 0.1.9

package/lib/components/Row/Row.tsx

@@ -97,6 +97,45 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
     const expandCellRef = React.useRef<HTMLDivElement>(null);
     const checkboxCellRef = React.useRef<HTMLDivElement>(null);
 
+    // All hooks must come before any early returns (Rules of Hooks)
+    React.useLayoutEffect(() => {
+        if (focusedCellField === '__expand_col__' && expandCellRef.current) {
+            expandCellRef.current.focus({ preventScroll: true });
+        }
+        if (focusedCellField === '__checkbox_col__' && checkboxCellRef.current) {
+            checkboxCellRef.current.focus({ preventScroll: true });
+        }
+    }, [focusedCellField]);
+
+    const pinnedPositions = React.useMemo(() => {
+        return calculatePinnedPositions(
+            columns,
+            columnWidths,
+            pinnedColumns,
+            checkboxSelection,
+            pinCheckboxColumn,
+            hasDetailPanel,
+            pinExpandColumn,
+            rowReordering
+        );
+    }, [columns, columnWidths, pinnedColumns, checkboxSelection, pinCheckboxColumn, hasDetailPanel, pinExpandColumn, rowReordering]);
+
+    const isGroupRow = (row as any)._hasChildren === true;
+
+    const handleCellEditStart = React.useCallback((field: string, value: any) => {
+        if (!isGroupRow) {
+            onEditStart?.({ id: row.id, field, value });
+        }
+    }, [isGroupRow, row.id, onEditStart]);
+
+    const handleCellValueChange = React.useCallback((field: string, newValue: any) => {
+        onEditCellValueChange?.({ id: row.id, field, value: newValue });
+    }, [onEditCellValueChange, row.id]);
+
+    const handleEditStopWrapper = React.useCallback((cancel?: boolean) => {
+        onEditStop?.({ cancel });
+    }, [onEditStop]);
+
     // ── Skeleton row (shown during infinite-scroll fetch) ─────────────────────
     if ((row as any)._isSkeleton) {
         // Render shimmer placeholders — one per visible column, matching row height
@@ -117,15 +156,6 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         );
     }
 
-    React.useLayoutEffect(() => {
-        if (focusedCellField === '__expand_col__' && expandCellRef.current) {
-            expandCellRef.current.focus({ preventScroll: true });
-        }
-        if (focusedCellField === '__checkbox_col__' && checkboxCellRef.current) {
-            checkboxCellRef.current.focus({ preventScroll: true });
-        }
-    }, [focusedCellField]);
-
     const handleRowClick = (event: React.MouseEvent) => {
 
         if ((event.target as HTMLElement).closest('.ogx-checkbox-wrapper, .ogx-expand-icon, .ogx-drag-handle, .ogx__edit-cell')) {
@@ -144,39 +174,10 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         onDetailPanelToggle?.(row.id);
     };
 
-    const pinnedPositions = React.useMemo(() => {
-        return calculatePinnedPositions(
-            columns,
-            columnWidths,
-            pinnedColumns,
-            checkboxSelection,
-            pinCheckboxColumn,
-            hasDetailPanel,
-            pinExpandColumn,
-            rowReordering
-        );
-    }, [columns, columnWidths, pinnedColumns, checkboxSelection, pinCheckboxColumn, hasDetailPanel, pinExpandColumn, rowReordering]);
-
     const rowPinnedPosition = isRowPinned(row.id, pinnedRows);
     const isRowPinnedTop = rowPinnedPosition === 'top';
     const isRowPinnedBottom = rowPinnedPosition === 'bottom';
 
-    const isGroupRow = (row as any)._hasChildren === true;
-
-    const handleCellEditStart = React.useCallback((field: string, value: any) => {
-        if (!isGroupRow) {
-            onEditStart?.({ id: row.id, field, value });
-        }
-    }, [isGroupRow, row.id, onEditStart]);
-
-    const handleCellValueChange = React.useCallback((field: string, newValue: any) => {
-        onEditCellValueChange?.({ id: row.id, field, value: newValue });
-    }, [onEditCellValueChange, row.id]);
-
-    const handleEditStopWrapper = React.useCallback((cancel?: boolean) => {
-        onEditStop?.({ cancel });
-    }, [onEditStop]);
-
     const classNames = [
         'ogx__row',
         isSelected && 'ogx__row--selected',

package/lib/components/Toolbar/GlobalSearch.tsx

@@ -34,7 +34,7 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
     const containerRef = useRef<HTMLDivElement>(null);
     // Keep onChange always current without adding it to effect deps
     const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
+    useLayoutEffect(() => { onChangeRef.current = onChange; }, [onChange]);
     // Track the last value we emitted upward
     const lastEmittedRef = useRef(value);
     // Track the last incoming prop value to detect external resets

package/lib/components/Toolbar/GridToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
 import type { GridColDef, GridAggregationModel, GridPivotModel, GridFilterModel } from '../../types';
 import { PivotPanel, PivotIcon } from './PivotPanel';
@@ -87,6 +87,11 @@ function AggregationPanel({
 }) {
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
+    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+
+    useLayoutEffect(() => {
+        setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
+    }, [anchorRef]);
 
     const computePos = useCallback((): PanelPosition => {
         if (!anchorRef.current) return { top: 0, right: 0 };
@@ -185,7 +190,7 @@ function AggregationPanel({
         </div>
     );
 
-    return ReactDOM.createPortal(panel, anchorRef.current?.closest('.ogx-theme-provider') || document.body);
+    return ReactDOM.createPortal(panel, portalContainer);
 }
 
 function ColumnsPanelWrapper({
@@ -209,6 +214,11 @@ function ColumnsPanelWrapper({
 }) {
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
+    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+
+    useLayoutEffect(() => {
+        setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
+    }, [anchorRef]);
 
     const computePos = useCallback((): PanelPosition => {
         if (!anchorRef.current) return { top: 0, right: 0 };
@@ -262,7 +272,7 @@ function ColumnsPanelWrapper({
         </div>
     );
 
-    return ReactDOM.createPortal(panel, anchorRef.current?.closest('.ogx-theme-provider') || document.body);
+    return ReactDOM.createPortal(panel, portalContainer);
 }
 
 function FilterPanelWrapper({
@@ -284,7 +294,12 @@ function FilterPanelWrapper({
     // tearing down and re-registering on every filterModel update,
     // which could fire the close callback during the re-register window.
     const onCloseRef = useRef(onClose);
-    onCloseRef.current = onClose;
+    useLayoutEffect(() => { onCloseRef.current = onClose; }, [onClose]);
+    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+
+    useLayoutEffect(() => {
+        setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
+    }, [anchorRef]);
 
     const computePos = useCallback((): PanelPosition => {
         if (!anchorRef.current) return { top: 0, right: 0 };
@@ -371,7 +386,7 @@ function FilterPanelWrapper({
         </div>
     );
 
-    return ReactDOM.createPortal(panel, anchorRef.current?.closest('.ogx-theme-provider') || document.body);
+    return ReactDOM.createPortal(panel, portalContainer);
 }
 
 const EMPTY_PIVOT: GridPivotModel = { rowFields: [], columnFields: [], valueFields: [] };

package/lib/components/Toolbar/PivotPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import type { GridColDef } from '../../types';
 import type { GridPivotModel, GridPivotAggFn, GridPivotValueField } from '../../types';
@@ -31,6 +31,11 @@ export interface PivotPanelProps {
 export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: PivotPanelProps) {
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState({ top: 0, right: 0 });
+    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+
+    useLayoutEffect(() => {
+        setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
+    }, [anchorRef]);
 
     const computePos = useCallback(() => {
         if (!anchorRef.current) return { top: 0, right: 0 };
@@ -235,5 +240,5 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
         </div>
     );
 
-    return ReactDOM.createPortal(panel, anchorRef.current?.closest('.ogx-theme-provider') || document.body);
+    return ReactDOM.createPortal(panel, portalContainer);
 }

package/lib/components/ui/DragHandleIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export interface DragHandleIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { }
+export type DragHandleIconProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const DragHandleIcon: React.FC<DragHandleIconProps> = ({ className = '', ...props }) => {
     return (

package/lib/hooks/core/useDataGrid.ts

@@ -1,5 +1,5 @@
 
-import { useReducer, useCallback, useMemo, useRef, useEffect } from 'react';
+import { useReducer, useCallback, useMemo, useRef, useEffect, useLayoutEffect } from 'react';
 import type {
   GridState,
   GridRowModel,
@@ -259,7 +259,7 @@ export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDa
   });
 
   const stateRef = useRef(state);
-  stateRef.current = state;
+  useLayoutEffect(() => { stateRef.current = state; });
 
   // Sync internal state when the external `rows` prop changes
   const prevRowsRef = useRef(rows);

package/lib/hooks/core/useGridKeyboardNavigation.ts

@@ -0,0 +1,371 @@
+import { useState, useCallback } from 'react';
+import type { GridRowModel, GridRowId, GridColDef, GridCellParams, GridSortItem, GridSortDirection } from '../../types';
+import type { GridEditingState } from '../features/useGridEditing';
+
+interface ColumnMetrics {
+    leftPinnedWidth: number;
+    rightPinnedWidth: number;
+    unpinnedAccWidths: number[];
+    unpinnedCols: { field: string }[];
+    totalSpecialsWidth: number;
+    pinnedSpecialsWidth: number;
+}
+
+interface VirtualizationSnapshot {
+    cumulativeHeights: number[];
+    pinnedTopHeight: number;
+    columnMetrics: ColumnMetrics | null;
+}
+
+export interface UseGridKeyboardNavigationParams<R extends GridRowModel> {
+    allRenderableRows: R[];
+    navigationColumns: { field: string; editable?: boolean; sortable?: boolean }[];
+    checkboxSelection: boolean;
+    selectedRowIds: Set<GridRowId>;
+    handleSelectionChange: (id: GridRowId, selected: boolean) => void;
+    handleDetailPanelToggle: (id: GridRowId) => void;
+    editingHandlers: {
+        editingCell: GridEditingState['editingCell'];
+        startCellEdit: (params: { id: GridRowId; field: string; value: unknown }) => void;
+        stopCellEdit: (params?: { cancel?: boolean }) => void;
+    };
+    setKeyboardMode: (mode: boolean) => void;
+    sortModel: GridSortItem[];
+    handleSort: (field: string, direction: GridSortDirection) => void;
+    isCellEditable?: (params: GridCellParams<R>) => boolean;
+    pagination: boolean;
+    pageSize: number;
+    virtualization: VirtualizationSnapshot;
+    viewportRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export interface FocusedCell {
+    id: GridRowId;
+    field: string;
+}
+
+export interface UseGridKeyboardNavigationReturn {
+    focusedCell: FocusedCell | null;
+    setFocusedCell: React.Dispatch<React.SetStateAction<FocusedCell | null>>;
+    handleFocus: (event: React.FocusEvent<HTMLDivElement>) => void;
+    handleBlur: (event: React.FocusEvent<HTMLDivElement>) => void;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+}
+
+export function useGridKeyboardNavigation<R extends GridRowModel>(
+    params: UseGridKeyboardNavigationParams<R>
+): UseGridKeyboardNavigationReturn {
+    const {
+        allRenderableRows,
+        navigationColumns,
+        checkboxSelection,
+        selectedRowIds,
+        handleSelectionChange,
+        handleDetailPanelToggle,
+        editingHandlers,
+        setKeyboardMode,
+        sortModel,
+        handleSort,
+        isCellEditable,
+        pagination,
+        pageSize,
+        virtualization,
+        viewportRef,
+    } = params;
+
+    const [focusedCell, setFocusedCell] = useState<FocusedCell | null>(null);
+
+    const handleFocus = useCallback((event: React.FocusEvent<HTMLDivElement>) => {
+        if (event.target === event.currentTarget) {
+            setFocusedCell(prev => {
+                if (prev) return prev;
+                if (checkboxSelection) {
+                    return { id: 'HEADER', field: '__checkbox_col__' };
+                }
+                const firstRow = allRenderableRows[0];
+                const firstCol = navigationColumns[0];
+                if (firstRow && firstCol) {
+                    return { id: firstRow.id, field: firstCol.field };
+                }
+                return null;
+            });
+        }
+    }, [allRenderableRows, navigationColumns, checkboxSelection]);
+
+    const handleBlur = useCallback((event: React.FocusEvent<HTMLDivElement>) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node)) {
+            setFocusedCell(null);
+        }
+    }, []);
+
+    const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
+        setKeyboardMode(true);
+
+        if (!focusedCell) return;
+
+        const { id, field } = focusedCell;
+        const isEditing = Boolean(editingHandlers.editingCell);
+
+        if (id === 'HEADER' && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            const col = navigationColumns.find(c => c.field === field);
+            if (col && col.sortable !== false) {
+                const currentSort = sortModel.find(item => item.field === field);
+                let newDirection: GridSortDirection = 'asc';
+                if (currentSort) {
+                    newDirection = currentSort.sort === 'asc' ? 'desc' : null;
+                }
+                handleSort(field, newDirection);
+            }
+            return;
+        }
+
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (isEditing) {
+                editingHandlers.stopCellEdit();
+            } else {
+                const col = navigationColumns.find(c => c.field === field);
+                if (col?.editable) {
+                    const row = allRenderableRows.find(r => r.id === id);
+                    if (row) {
+                        editingHandlers.startCellEdit({ id, field, value: (row as R & Record<string, unknown>)[field] });
+                    }
+                }
+            }
+            return;
+        }
+
+        if (event.key === ' ' || event.key === 'Spacebar') {
+            if (!isEditing) {
+                if (field === '__checkbox_col__') {
+                    event.preventDefault();
+                    handleSelectionChange(id, !selectedRowIds.has(id));
+                    return;
+                }
+                if (field === '__expand_col__') {
+                    event.preventDefault();
+                    handleDetailPanelToggle(id);
+                    return;
+                }
+            }
+        }
+
+        if (event.key === 'Escape') {
+            if (isEditing) {
+                event.preventDefault();
+                editingHandlers.stopCellEdit({ cancel: true });
+            }
+            return;
+        }
+
+        if (isEditing && event.key !== 'Tab') return;
+
+        const isHeader = id === 'HEADER';
+        const rowIndex = isHeader ? -1 : allRenderableRows.findIndex(r => r.id === id);
+        const colIndex = navigationColumns.findIndex(c => c.field === field);
+
+        if (!isHeader && rowIndex === -1) return;
+        if (colIndex === -1) return;
+
+        const findNextCell = (
+            startRow: number,
+            startCol: number,
+            deltaRow: number,
+            deltaCol: number,
+            wrapRow: boolean,
+            allowHeader = false
+        ) => {
+            let r = startRow + deltaRow;
+            let c = startCol + deltaCol;
+
+            if (wrapRow && deltaCol !== 0) {
+                if (deltaCol > 0 && c >= navigationColumns.length) { c = 0; r++; }
+                else if (deltaCol < 0 && c < 0) { c = navigationColumns.length - 1; r--; }
+            }
+
+            if (!wrapRow && (c < 0 || c >= navigationColumns.length)) return null;
+            if (r < (allowHeader ? -1 : 0) || r >= allRenderableRows.length) return null;
+
+            return { r, c };
+        };
+
+        const findNextEditable = (
+            startRow: number,
+            startCol: number,
+            deltaRow: number,
+            deltaCol: number,
+            wrapRow: boolean,
+            allowHeader = false
+        ) => {
+            let r = startRow;
+            let c = startCol;
+            let steps = 0;
+            const maxSteps = allRenderableRows.length * navigationColumns.length + navigationColumns.length;
+
+            while (steps < maxSteps) {
+                steps++;
+                r += deltaRow;
+                c += deltaCol;
+
+                if (wrapRow && deltaCol !== 0) {
+                    if (deltaCol > 0) {
+                        if (c >= navigationColumns.length) { c = 0; r++; }
+                    } else {
+                        if (c < 0) { c = navigationColumns.length - 1; r--; }
+                    }
+                } else {
+                    if (c < 0 || c >= navigationColumns.length) return null;
+                }
+
+                if (r < -1 || r >= allRenderableRows.length) return null;
+
+                if (r === -1) {
+                    if (!allowHeader) continue;
+                    const col = navigationColumns[c];
+                    const isSortable = col.sortable !== false;
+                    if (['__checkbox_col__'].includes(col.field) || isSortable) return { r, c };
+                    continue;
+                }
+
+                const row = allRenderableRows[r];
+                const col = navigationColumns[c];
+                const isInteractable = ['__checkbox_col__', '__expand_col__', '__reorder_col__'].includes(col.field);
+                let cellEditable = col.editable || isInteractable;
+
+                if (isCellEditable && !isInteractable) {
+                    try {
+                        cellEditable = isCellEditable({
+                            row,
+                            field: col.field,
+                            value: (row as R & Record<string, unknown>)[col.field],
+                            colDef: col as GridColDef<R>,
+                            rowIndex: r,
+                            colIndex: c
+                        });
+                    } catch {
+                        // isCellEditable threw — treat cell as non-editable
+                    }
+                }
+
+                if (cellEditable) return { r, c };
+            }
+            return null;
+        };
+
+        let nextRowIndex = rowIndex;
+        let nextColIndex = colIndex;
+        let handled = false;
+
+        if (event.key === 'Tab') {
+            const dir = event.shiftKey ? -1 : 1;
+            const res = findNextEditable(rowIndex, colIndex, 0, dir, true, false);
+            if (res) { nextRowIndex = res.r; nextColIndex = res.c; handled = true; }
+        } else if (event.key === 'ArrowRight') {
+            const res = findNextCell(rowIndex, colIndex, 0, 1, true, true);
+            if (res) { nextRowIndex = res.r; nextColIndex = res.c; handled = true; }
+        } else if (event.key === 'ArrowLeft') {
+            const res = findNextCell(rowIndex, colIndex, 0, -1, true, true);
+            if (res) { nextRowIndex = res.r; nextColIndex = res.c; handled = true; }
+        } else if (event.key === 'ArrowDown') {
+            const res = findNextCell(rowIndex, colIndex, 1, 0, false, true);
+            if (res) { nextRowIndex = res.r; nextColIndex = res.c; handled = true; }
+        } else if (event.key === 'ArrowUp') {
+            const res = findNextCell(rowIndex, colIndex, -1, 0, false, true);
+            if (res) { nextRowIndex = res.r; nextColIndex = res.c; handled = true; }
+        } else if (event.key === 'Home') {
+            nextColIndex = 0;
+            if (event.ctrlKey || event.metaKey) nextRowIndex = -1;
+            handled = true;
+        } else if (event.key === 'End') {
+            nextColIndex = navigationColumns.length - 1;
+            if (event.ctrlKey || event.metaKey) nextRowIndex = allRenderableRows.length - 1;
+            handled = true;
+        } else if (event.key === 'PageUp') {
+            const pg = pagination ? pageSize : 10;
+            nextRowIndex = Math.max(-1, nextRowIndex - pg);
+            handled = true;
+        } else if (event.key === 'PageDown') {
+            const pg = pagination ? pageSize : 10;
+            nextRowIndex = Math.min(allRenderableRows.length - 1, nextRowIndex + pg);
+            handled = true;
+        }
+
+        if (handled) {
+            event.preventDefault();
+
+            if (isEditing && event.key === 'Tab') {
+                editingHandlers.stopCellEdit();
+            }
+
+            if (nextRowIndex >= -1 && nextRowIndex < allRenderableRows.length &&
+                nextColIndex >= 0 && nextColIndex < navigationColumns.length) {
+
+                const nextCol = navigationColumns[nextColIndex];
+
+                if (nextRowIndex === -1) {
+                    setFocusedCell({ id: 'HEADER', field: nextCol.field });
+                } else {
+                    setFocusedCell({ id: allRenderableRows[nextRowIndex].id, field: nextCol.field });
+                }
+
+                const el = viewportRef.current;
+                if (el) {
+                    const { cumulativeHeights, pinnedTopHeight, columnMetrics } = virtualization;
+                    const { clientHeight, clientWidth, scrollTop, scrollLeft } = el;
+
+                    const rowTop = nextRowIndex <= 0 ? 0 : cumulativeHeights[nextRowIndex - 1];
+                    const rowBottom = cumulativeHeights[nextRowIndex];
+                    const visibleTop = scrollTop + pinnedTopHeight;
+                    const visibleBottom = scrollTop + clientHeight;
+
+                    let newScrollTop = scrollTop;
+                    if (rowTop < visibleTop) {
+                        newScrollTop = Math.max(0, rowTop - pinnedTopHeight);
+                    } else if (rowBottom > visibleBottom) {
+                        newScrollTop = rowBottom - clientHeight;
+                    }
+                    if (newScrollTop !== scrollTop) el.scrollTop = newScrollTop;
+
+                    if (columnMetrics) {
+                        const { leftPinnedWidth, rightPinnedWidth, unpinnedAccWidths, unpinnedCols, totalSpecialsWidth, pinnedSpecialsWidth } = columnMetrics;
+                        const unpinnedIndex = unpinnedCols.findIndex(c => c.field === nextCol.field);
+
+                        if (unpinnedIndex !== -1) {
+                            const colLeft = totalSpecialsWidth + leftPinnedWidth + (unpinnedIndex > 0 ? unpinnedAccWidths[unpinnedIndex - 1] : 0);
+                            const colRight = totalSpecialsWidth + leftPinnedWidth + unpinnedAccWidths[unpinnedIndex];
+                            const visibleStart = scrollLeft + pinnedSpecialsWidth + leftPinnedWidth;
+                            const visibleEnd = scrollLeft + clientWidth - rightPinnedWidth;
+
+                            let newScrollLeft = scrollLeft;
+                            if (colLeft < visibleStart) {
+                                newScrollLeft = Math.max(0, colLeft - pinnedSpecialsWidth - leftPinnedWidth);
+                            } else if (colRight > visibleEnd) {
+                                newScrollLeft = colRight - clientWidth + rightPinnedWidth;
+                            }
+                            if (newScrollLeft !== scrollLeft) el.scrollLeft = newScrollLeft;
+                        }
+                    }
+                }
+            }
+        }
+    }, [
+        focusedCell,
+        allRenderableRows,
+        navigationColumns,
+        editingHandlers,
+        virtualization,
+        selectedRowIds,
+        handleSelectionChange,
+        handleDetailPanelToggle,
+        setKeyboardMode,
+        sortModel,
+        handleSort,
+        isCellEditable,
+        pagination,
+        pageSize,
+        viewportRef,
+    ]);
+
+    return { focusedCell, setFocusedCell, handleFocus, handleBlur, handleKeyDown };
+}