@alaarab/ogrid-react 2.0.22 → 2.1.0

package/dist/esm/hooks/useDataGridState.js

@@ -1,85 +1,51 @@
-import { useMemo, useCallback, useState, useLayoutEffect } from 'react';
-import { flattenColumns, getDataGridStatusBarConfig, parseValue, computeAggregations } from '../utils';
-import { CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from '@alaarab/ogrid-core';
+import { useMemo, useCallback } from 'react';
+import { getDataGridStatusBarConfig, computeAggregations } from '../utils';
 import { useRowSelection } from './useRowSelection';
 import { useCellEditing } from './useCellEditing';
 import { useActiveCell } from './useActiveCell';
-import { useCellSelection } from './useCellSelection';
-import { useContextMenu } from './useContextMenu';
-import { useClipboard } from './useClipboard';
-import { useKeyboardNavigation } from './useKeyboardNavigation';
-import { useFillHandle } from './useFillHandle';
-import { useUndoRedo } from './useUndoRedo';
 import { useLatestRef } from './useLatestRef';
-import { useTableLayout } from './useTableLayout';
-import { useColumnPinning } from './useColumnPinning';
-import { useColumnHeaderMenuState } from './useColumnHeaderMenuState';
-// Stable no-op handlers used when cellSelection is disabled (module-scope = no re-renders)
-const NOOP = () => { };
-const NOOP_ASYNC = async () => { };
-const NOOP_MOUSE = (_e, _r, _c) => { };
-const NOOP_KEY = (_e) => { };
-const NOOP_CTX = (_e) => { };
+import { useDataGridLayout } from './useDataGridLayout';
+import { useDataGridEditing } from './useDataGridEditing';
+import { useDataGridInteraction } from './useDataGridInteraction';
+import { useDataGridContextMenu } from './useDataGridContextMenu';
 /**
  * Single orchestration hook for DataGridTable. Takes grid props and wrapper ref,
  * returns all derived state and handlers so Fluent/Material/Radix can be thin view layers.
+ *
+ * Internally delegates to focused sub-hooks:
+ * - useDataGridLayout -- column layout, sizing, pinning, header menu
+ * - useDataGridEditing -- cell editing commit/cancel, popover editor
+ * - useDataGridInteraction -- cell selection, keyboard nav, clipboard, fill handle, undo/redo
+ * - useDataGridContextMenu -- context menu state
  */
 export function useDataGridState(params) {
     const { props, wrapperRef } = params;
     const { items, columns, getRowId, visibleColumns, columnOrder, rowSelection = 'none', selectedRows: controlledSelectedRows, onSelectionChange, showRowNumbers, statusBar, emptyState, editable, cellSelection: cellSelectionProp, onCellValueChanged: onCellValueChangedProp, initialColumnWidths, onColumnResized, onAutosizeColumn, pinnedColumns, onColumnPinned, onCellError, } = props;
     const cellSelection = cellSelectionProp !== false;
-    // Wrap onCellValueChanged with undo/redo tracking — all edits are recorded automatically
-    const undoRedo = useUndoRedo({ onCellValueChanged: onCellValueChangedProp });
-    const onCellValueChanged = undoRedo.onCellValueChanged;
-    // Cast is safe: input columns are React.IColumnDef instances; flattenColumns only extracts leaves.
-    const flatColumnsRaw = useMemo(() => flattenColumns(columns), [columns]);
-    // Apply runtime pin overrides (from applyColumnState or programmatic changes)
-    const flatColumns = useMemo(() => {
-        if (!pinnedColumns || Object.keys(pinnedColumns).length === 0)
-            return flatColumnsRaw;
-        return flatColumnsRaw.map((col) => {
-            const override = pinnedColumns[col.columnId];
-            if (override && col.pinned !== override) {
-                return { ...col, pinned: override };
-            }
-            // If col was pinned by definition but not in overrides, keep original
-            return col;
-        });
-    }, [flatColumnsRaw, pinnedColumns]);
-    const visibleCols = useMemo(() => {
-        const filtered = visibleColumns
-            ? flatColumns.filter((c) => visibleColumns.has(c.columnId))
-            : flatColumns;
-        if (!columnOrder?.length)
-            return filtered;
-        // Build index map for O(1) lookup instead of repeated O(n) indexOf
-        const orderMap = new Map();
-        for (let i = 0; i < columnOrder.length; i++) {
-            orderMap.set(columnOrder[i], i);
-        }
-        return [...filtered].sort((a, b) => {
-            const ia = orderMap.get(a.columnId) ?? -1;
-            const ib = orderMap.get(b.columnId) ?? -1;
-            if (ia === -1 && ib === -1)
-                return 0;
-            if (ia === -1)
-                return 1;
-            if (ib === -1)
-                return -1;
-            return ia - ib;
-        });
-    }, [flatColumns, visibleColumns, columnOrder]);
-    const visibleColumnCount = visibleCols.length;
-    const hasCheckboxCol = rowSelection === 'multiple';
-    const hasRowNumbersCol = !!showRowNumbers;
-    const specialColsCount = (hasCheckboxCol ? 1 : 0) + (hasRowNumbersCol ? 1 : 0);
-    const totalColCount = visibleColumnCount + specialColsCount;
-    const colOffset = specialColsCount;
-    const rowIndexByRowId = useMemo(() => {
-        const m = new Map();
-        items.forEach((item, idx) => m.set(getRowId(item), idx));
-        return m;
-    }, [items, getRowId]);
+    // --- Shared state hooks (called at orchestrator level to break circular deps) ---
+    const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, } = useCellEditing();
+    const { activeCell, setActiveCell } = useActiveCell(wrapperRef, editingCell);
+    // --- 1. Layout, pinning, header menu ---
+    const layoutResult = useDataGridLayout({
+        columns,
+        items,
+        getRowId,
+        visibleColumns,
+        columnOrder,
+        rowSelection,
+        showRowNumbers,
+        initialColumnWidths,
+        onColumnResized,
+        onAutosizeColumn,
+        pinnedColumns,
+        onColumnPinned,
+        sortBy: props.sortBy,
+        sortDirection: props.sortDirection,
+        onColumnSort: props.onColumnSort,
+        wrapperRef,
+    });
+    const { visibleCols, visibleColumnCount, colOffset, hasCheckboxCol, } = layoutResult;
+    // --- 2. Row selection ---
     const rowSelectionResult = useRowSelection({
         items,
         getRowId,
@@ -88,159 +54,52 @@ export function useDataGridState(params) {
         onSelectionChange,
     });
     const { selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, } = rowSelectionResult;
-    const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, } = useCellEditing();
-    const { activeCell, setActiveCell } = useActiveCell(wrapperRef, editingCell);
-    const { selectionRange, setSelectionRange, handleCellMouseDown: handleCellMouseDownBase, handleSelectAllCells, isDragging, } = useCellSelection({
-        colOffset,
-        rowCount: items.length,
-        visibleColCount: visibleCols.length,
-        setActiveCell,
-        wrapperRef,
-    });
-    const { contextMenuPosition, setContextMenuPosition, handleCellContextMenu, closeContextMenu } = useContextMenu();
-    const { handleCopy, handleCut, handlePaste, cutRange, copyRange, clearClipboardRanges } = useClipboard({
+    // --- 3. Context menu ---
+    const contextMenuResult = useDataGridContextMenu({ cellSelection });
+    const { setContextMenuPosition } = contextMenuResult;
+    // --- 4. Interaction (selection, keyboard, clipboard, fill handle, undo/redo) ---
+    const interactionResult = useDataGridInteraction({
         items,
         visibleCols,
         colOffset,
-        selectionRange,
-        activeCell,
-        editable,
-        onCellValueChanged,
-        beginBatch: undoRedo.beginBatch,
-        endBatch: undoRedo.endBatch,
-    });
-    const handleCellMouseDown = useCallback((e, rowIndex, globalColIndex) => {
-        if (e.button !== 0)
-            return;
-        wrapperRef.current?.focus({ preventScroll: true });
-        clearClipboardRanges();
-        handleCellMouseDownBase(e, rowIndex, globalColIndex);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [handleCellMouseDownBase, clearClipboardRanges] // wrapperRef excluded — refs are stable
-    );
-    const { handleGridKeyDown } = useKeyboardNavigation({
-        data: { items, visibleCols, colOffset, hasCheckboxCol, visibleColumnCount, getRowId },
-        state: { activeCell, selectionRange, editingCell, selectedRowIds },
-        handlers: { setActiveCell, setSelectionRange, setEditingCell, handleRowCheckboxChange, handleCopy, handleCut, handlePaste, setContextMenu: setContextMenuPosition, onUndo: undoRedo.undo, onRedo: undoRedo.redo, clearClipboardRanges },
-        features: { editable, onCellValueChanged, rowSelection, wrapperRef },
-    });
-    const { handleFillHandleMouseDown } = useFillHandle({
-        items,
-        visibleCols,
+        hasCheckboxCol,
+        visibleColumnCount,
+        getRowId,
         editable,
-        onCellValueChanged,
-        selectionRange,
-        setSelectionRange,
+        onCellValueChangedProp,
+        cellSelection,
+        rowSelection,
+        selectedRowIds,
+        editingCell,
+        setEditingCell,
+        activeCell,
         setActiveCell,
-        colOffset,
+        handleRowCheckboxChange,
+        setContextMenuPosition,
         wrapperRef,
-        beginBatch: undoRedo.beginBatch,
-        endBatch: undoRedo.endBatch,
     });
-    const { containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, } = useTableLayout({
-        wrapperRef,
+    const { selectionRange, cutRange, copyRange, isDragging, onCellValueChanged, } = interactionResult;
+    // --- 5. Editing (commit/cancel logic) ---
+    const editingResult = useDataGridEditing({
+        editingCell,
+        setEditingCell,
+        pendingEditorValue,
+        setPendingEditorValue,
         visibleCols,
-        flatColumns,
-        hasCheckboxCol,
-        initialColumnWidths,
-        onColumnResized,
-    });
-    const pinningResult = useColumnPinning({
-        columns: flatColumns,
-        pinnedColumns,
-        onColumnPinned,
+        itemsLength: items.length,
+        onCellValueChanged,
+        setActiveCell,
     });
-    // Measure actual column widths from the DOM for accurate pinning offsets.
-    // With table-layout: auto, rendered widths can exceed declared minimums.
-    const [measuredColumnWidths, setMeasuredColumnWidths] = useState({});
-    useLayoutEffect(() => {
-        const wrapper = wrapperRef.current;
-        if (!wrapper)
-            return;
-        const headerCells = wrapper.querySelectorAll('th[data-column-id]');
-        if (headerCells.length === 0)
-            return;
-        const measured = {};
-        headerCells.forEach((cell) => {
-            const colId = cell.getAttribute('data-column-id');
-            if (colId)
-                measured[colId] = cell.offsetWidth;
-        });
-        setMeasuredColumnWidths((prev) => {
-            // Only update if widths actually changed to avoid render loops
-            for (const key in measured) {
-                if (prev[key] !== measured[key])
-                    return measured;
-            }
-            if (Object.keys(prev).length !== Object.keys(measured).length)
-                return measured;
-            return prev;
-        });
-        // Re-measure when columns, container size, or resize overrides change
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visibleCols, containerWidth, columnSizingOverrides]);
-    // Build column width map for pinning offset computation
-    const columnWidthMap = useMemo(() => {
-        const map = {};
-        for (const col of visibleCols) {
-            const override = columnSizingOverrides[col.columnId];
-            map[col.columnId] = override
-                ? override.widthPx
-                : (measuredColumnWidths[col.columnId] ?? col.idealWidth ?? col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH);
-        }
-        return map;
-    }, [visibleCols, columnSizingOverrides, measuredColumnWidths]);
-    const leftOffsets = useMemo(() => pinningResult.computeLeftOffsets(visibleCols, columnWidthMap, DEFAULT_MIN_COLUMN_WIDTH, hasCheckboxCol, CHECKBOX_COLUMN_WIDTH), [pinningResult, visibleCols, columnWidthMap, hasCheckboxCol]);
-    const rightOffsets = useMemo(() => pinningResult.computeRightOffsets(visibleCols, columnWidthMap, DEFAULT_MIN_COLUMN_WIDTH), [pinningResult, visibleCols, columnWidthMap]);
-    const aggregation = useMemo(() => computeAggregations(items, visibleCols, cellSelection ? selectionRange : null), [items, visibleCols, selectionRange, cellSelection]);
-    const statusBarConfig = useMemo(() => {
-        const base = getDataGridStatusBarConfig(statusBar, items.length, selectedRowIds.size);
-        if (!base)
-            return null;
-        return { ...base, aggregation: aggregation ?? undefined };
-    }, [statusBar, items.length, selectedRowIds.size, aggregation]);
-    const showEmptyInGrid = items.length === 0 && !!emptyState && !props.isLoading;
-    const hasCellSelection = selectionRange != null || activeCell != null;
-    // --- View-model inputs (shared across all 3 DataGridTables) ---
-    const { sortBy, sortDirection, onColumnSort, filters, onFilterChange, filterOptions, loadingFilterOptions, peopleSearch, } = props;
-    // Stabilize callbacks via refs — headerFilterInput only re-creates when data changes,
-    // not when callback identities change (which happens on unrelated state updates).
-    const onColumnSortRef = useLatestRef(onColumnSort);
+    // --- 6. View models ---
+    const { sortBy, sortDirection, filters, onFilterChange, filterOptions, loadingFilterOptions, peopleSearch, } = props;
     const onFilterChangeRef = useLatestRef(onFilterChange);
     const peopleSearchRef = useLatestRef(peopleSearch);
-    // Stable callback wrappers that delegate to refs
-    const stableOnColumnSort = useCallback((columnKey, direction) => onColumnSortRef.current?.(columnKey, direction), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    // Autosize callback — updates internal column sizing state + notifies external listener
-    const handleAutosizeColumn = useCallback((columnId, width) => {
-        setColumnSizingOverrides((prev) => ({ ...prev, [columnId]: { widthPx: width } }));
-        (onAutosizeColumn ?? onColumnResized)?.(columnId, width);
-    }, [setColumnSizingOverrides, onAutosizeColumn, onColumnResized]);
-    const headerMenuResult = useColumnHeaderMenuState({
-        pinnedColumns: pinningResult.pinnedColumns,
-        onPinColumn: pinningResult.pinColumn,
-        onUnpinColumn: pinningResult.unpinColumn,
-        sortBy,
-        sortDirection,
-        onColumnSort: stableOnColumnSort,
-        onColumnResized,
-        onAutosizeColumn: handleAutosizeColumn,
-        columns: flatColumns,
-        data: items,
-        getRowId: getRowId,
-    });
-    const stableOnFilterChange = useCallback((...args) => onFilterChangeRef.current?.(...args), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    const stablePeopleSearch = useCallback((...args) => peopleSearchRef.current?.(...args) ?? Promise.resolve([]), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
+    const stableOnFilterChange = useCallback((...args) => onFilterChangeRef.current?.(...args), [onFilterChangeRef]);
+    const stablePeopleSearch = useCallback((...args) => peopleSearchRef.current?.(...args) ?? Promise.resolve([]), [peopleSearchRef]);
     const headerFilterInput = useMemo(() => ({
         sortBy,
         sortDirection,
-        onColumnSort: stableOnColumnSort,
+        onColumnSort: layoutResult.stableOnColumnSort,
         filters,
         onFilterChange: stableOnFilterChange,
         filterOptions,
@@ -249,7 +108,7 @@ export function useDataGridState(params) {
     }), [
         sortBy,
         sortDirection,
-        stableOnColumnSort,
+        layoutResult.stableOnColumnSort,
         filters,
         stableOnFilterChange,
         filterOptions,
@@ -282,123 +141,29 @@ export function useDataGridState(params) {
         cellSelection,
         isDragging,
     ]);
-    // --- Cell edit helpers ---
-    const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
-    const visibleColsRef = useLatestRef(visibleCols);
-    const itemsLengthRef = useLatestRef(items.length);
-    const commitCellEdit = useCallback((item, columnId, oldValue, newValue, rowIndex, globalColIndex) => {
-        // Validate via valueParser before committing
-        const col = visibleColsRef.current.find((c) => c.columnId === columnId);
-        if (col) {
-            const result = parseValue(newValue, oldValue, item, col);
-            if (!result.valid) {
-                // Reject — cancel the edit
-                setEditingCell(null);
-                setPopoverAnchorEl(null);
-                setPendingEditorValue(undefined);
-                return;
-            }
-            newValue = result.value;
-        }
-        onCellValueChanged?.({
-            item,
-            columnId,
-            oldValue,
-            newValue,
-            rowIndex,
-        });
-        setEditingCell(null);
-        setPopoverAnchorEl(null);
-        setPendingEditorValue(undefined);
-        // Advance to next row for inline editors
-        if (rowIndex < itemsLengthRef.current - 1) {
-            setActiveCell({ rowIndex: rowIndex + 1, columnIndex: globalColIndex });
-        }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onCellValueChanged, setEditingCell, setPendingEditorValue, setActiveCell]);
-    const cancelPopoverEdit = useCallback(() => {
-        setEditingCell(null);
-        setPopoverAnchorEl(null);
-        setPendingEditorValue(undefined);
-    }, [setEditingCell, setPendingEditorValue]);
-    // --- Memoize each sub-object so downstream consumers only re-render when their slice changes ---
-    const layoutState = useMemo(() => ({
-        flatColumns, visibleCols, visibleColumnCount, totalColCount, colOffset,
-        hasCheckboxCol, hasRowNumbersCol, rowIndexByRowId, containerWidth, minTableWidth,
-        desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, onColumnResized,
-        measuredColumnWidths,
-    }), [
-        flatColumns, visibleCols, visibleColumnCount, totalColCount, colOffset,
-        hasCheckboxCol, hasRowNumbersCol, rowIndexByRowId, containerWidth, minTableWidth,
-        desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, onColumnResized,
-        measuredColumnWidths,
-    ]);
+    const aggregation = useMemo(() => computeAggregations(items, visibleCols, cellSelection ? selectionRange : null), [items, visibleCols, selectionRange, cellSelection]);
+    const statusBarConfig = useMemo(() => {
+        const base = getDataGridStatusBarConfig(statusBar, items.length, selectedRowIds.size);
+        if (!base)
+            return null;
+        return { ...base, aggregation: aggregation ?? undefined };
+    }, [statusBar, items.length, selectedRowIds.size, aggregation]);
+    const showEmptyInGrid = items.length === 0 && !!emptyState && !props.isLoading;
+    // --- Memoize remaining sub-objects ---
     const rowSelectionState = useMemo(() => ({
         selectedRowIds, updateSelection, handleRowCheckboxChange,
         handleSelectAll, allSelected, someSelected,
     }), [selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected]);
-    const editingState = useMemo(() => ({
-        editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue,
-        commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl,
-    }), [editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl]);
-    const interactionState = useMemo(() => ({
-        activeCell: cellSelection ? activeCell : null,
-        setActiveCell: cellSelection ? setActiveCell : NOOP,
-        selectionRange: cellSelection ? selectionRange : null,
-        setSelectionRange: cellSelection ? setSelectionRange : NOOP,
-        handleCellMouseDown: cellSelection ? handleCellMouseDown : NOOP_MOUSE,
-        handleSelectAllCells: cellSelection ? handleSelectAllCells : NOOP,
-        hasCellSelection: cellSelection ? hasCellSelection : false,
-        handleGridKeyDown: cellSelection ? handleGridKeyDown : NOOP_KEY,
-        handleFillHandleMouseDown: cellSelection ? handleFillHandleMouseDown : NOOP,
-        handleCopy: cellSelection ? handleCopy : NOOP,
-        handleCut: cellSelection ? handleCut : NOOP,
-        handlePaste: cellSelection ? handlePaste : NOOP_ASYNC,
-        cutRange: cellSelection ? cutRange : null,
-        copyRange: cellSelection ? copyRange : null,
-        clearClipboardRanges: cellSelection ? clearClipboardRanges : NOOP,
-        canUndo: undoRedo.canUndo,
-        canRedo: undoRedo.canRedo,
-        onUndo: undoRedo.undo,
-        onRedo: undoRedo.redo,
-        isDragging: cellSelection ? isDragging : false,
-    }), [
-        cellSelection, activeCell, setActiveCell, selectionRange, setSelectionRange,
-        handleCellMouseDown, handleSelectAllCells, hasCellSelection, handleGridKeyDown,
-        handleFillHandleMouseDown, handleCopy, handleCut, handlePaste, cutRange, copyRange,
-        clearClipboardRanges, undoRedo.canUndo, undoRedo.canRedo, undoRedo.undo, undoRedo.redo,
-        isDragging,
-    ]);
-    const contextMenuState = useMemo(() => ({
-        menuPosition: cellSelection ? contextMenuPosition : null,
-        setMenuPosition: cellSelection ? setContextMenuPosition : NOOP,
-        handleCellContextMenu: cellSelection ? handleCellContextMenu : NOOP_CTX,
-        closeContextMenu: cellSelection ? closeContextMenu : NOOP,
-    }), [cellSelection, contextMenuPosition, setContextMenuPosition, handleCellContextMenu, closeContextMenu]);
     const viewModelsState = useMemo(() => ({
         headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError,
     }), [headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError]);
-    const pinningState = useMemo(() => ({
-        pinnedColumns: pinningResult.pinnedColumns,
-        pinColumn: pinningResult.pinColumn,
-        unpinColumn: pinningResult.unpinColumn,
-        isPinned: pinningResult.isPinned,
-        leftOffsets,
-        rightOffsets,
-        headerMenu: headerMenuResult,
-    }), [
-        pinningResult.pinnedColumns, pinningResult.pinColumn, pinningResult.unpinColumn,
-        pinningResult.isPinned, leftOffsets, rightOffsets,
-        headerMenuResult,
-    ]);
     return {
-        layout: layoutState,
+        layout: layoutResult.layout,
         rowSelection: rowSelectionState,
-        editing: editingState,
-        interaction: interactionState,
-        contextMenu: contextMenuState,
+        editing: editingResult.editing,
+        interaction: interactionResult.interaction,
+        contextMenu: contextMenuResult.contextMenu,
         viewModels: viewModelsState,
-        pinning: pinningState,
+        pinning: layoutResult.pinning,
     };
 }

package/dist/esm/hooks/useDataGridTableOrchestration.js

@@ -82,16 +82,14 @@ export function useDataGridTableOrchestration(params) {
             return;
         const ids = selectedRowIdsRef.current;
         updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- selectedRowIdsRef is a stable ref
-    }, [rowSelection, updateSelection]);
+    }, [rowSelection, updateSelection, selectedRowIdsRef]);
     // ── Return ─────────────────────────────────────────────────────────────
     return {
         // Refs
         wrapperRef,
         tableContainerRef,
         lastMouseShiftRef,
-        // Full state sub-objects
-        state,
+        // State sub-objects
         layout,
         rowSel,
         editing,

package/dist/esm/hooks/useFillHandle.js

@@ -1,6 +1,7 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { normalizeSelectionRange } from '../types';
-import { getCellValue, parseValue } from '../utils';
+import { applyFillValues } from '../utils';
+import { useLatestRef } from './useLatestRef';
 /** DOM attribute name for fill-drag range highlighting (same as cell selection drag). */
 const DRAG_ATTR = 'data-drag-range';
 /**
@@ -14,12 +15,31 @@ export function useFillHandle(params) {
     const fillDragEndRef = useRef({ endRow: 0, endCol: 0 });
     const rafRef = useRef(0);
     const liveFillRangeRef = useRef(null);
+    const colOffsetRef = useLatestRef(colOffset);
     useEffect(() => {
         if (!fillDrag || editable === false || !onCellValueChanged || !wrapperRef.current)
             return;
         fillDragEndRef.current = { endRow: fillDrag.startRow, endCol: fillDrag.startCol };
         liveFillRangeRef.current = null;
-        const colOff = colOffset;
+        /** Set of currently drag-marked HTMLElements — avoids O(n) full DOM scan on clear. */
+        const markedCells = new Set();
+        /** Cell lookup index built on drag start — O(1) lookups per frame. */
+        let cellIndex = null;
+        const buildCellIndex = () => {
+            const wrapper = wrapperRef.current;
+            if (!wrapper)
+                return;
+            cellIndex = new Map();
+            const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
+            for (let i = 0; i < cells.length; i++) {
+                const el = cells[i];
+                const r = el.getAttribute('data-row-index') ?? '';
+                const c = el.getAttribute('data-col-index') ?? '';
+                cellIndex.set(`${r},${c}`, el);
+            }
+        };
+        // Build the index once at fill drag start
+        buildCellIndex();
         const applyDragAttrs = (range) => {
             const wrapper = wrapperRef.current;
             if (!wrapper)
@@ -28,29 +48,40 @@ export function useFillHandle(params) {
             const maxR = Math.max(range.startRow, range.endRow);
             const minC = Math.min(range.startCol, range.endCol);
             const maxC = Math.max(range.startCol, range.endCol);
-            const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
-            for (let i = 0; i < cells.length; i++) {
-                const el = cells[i];
-                const r = parseInt(el.getAttribute('data-row-index'), 10);
-                const c = parseInt(el.getAttribute('data-col-index'), 10) - colOff;
-                const inRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
-                if (inRange) {
-                    if (!el.hasAttribute(DRAG_ATTR))
-                        el.setAttribute(DRAG_ATTR, '');
+            const colOff = colOffsetRef.current;
+            // Un-mark cells no longer in range
+            for (const el of markedCells) {
+                const r = parseInt(el.getAttribute('data-row-index') ?? '', 10);
+                const c = parseInt(el.getAttribute('data-col-index') ?? '', 10) - colOff;
+                if (!(r >= minR && r <= maxR && c >= minC && c <= maxC)) {
+                    el.removeAttribute(DRAG_ATTR);
+                    markedCells.delete(el);
                 }
-                else {
-                    if (el.hasAttribute(DRAG_ATTR))
-                        el.removeAttribute(DRAG_ATTR);
+            }
+            // Look up only cells in the new range — O(range size) via Map lookup
+            for (let r = minR; r <= maxR; r++) {
+                for (let c = minC; c <= maxC; c++) {
+                    const key = `${r},${c + colOff}`;
+                    let el = cellIndex?.get(key);
+                    // Handle virtual scroll recycling — if element is stale, rebuild index once
+                    if (el && !el.isConnected) {
+                        buildCellIndex();
+                        el = cellIndex?.get(key);
+                    }
+                    if (el) {
+                        if (!el.hasAttribute(DRAG_ATTR))
+                            el.setAttribute(DRAG_ATTR, '');
+                        markedCells.add(el);
+                    }
                 }
             }
         };
         const clearDragAttrs = () => {
-            const wrapper = wrapperRef.current;
-            if (!wrapper)
-                return;
-            const marked = wrapper.querySelectorAll(`[${DRAG_ATTR}]`);
-            for (let i = 0; i < marked.length; i++)
-                marked[i].removeAttribute(DRAG_ATTR);
+            for (const el of markedCells) {
+                el.removeAttribute(DRAG_ATTR);
+            }
+            markedCells.clear();
+            cellIndex = null;
         };
         let lastFillMousePos = null;
         const resolveRange = (cx, cy) => {
@@ -60,9 +91,9 @@ export function useFillHandle(params) {
                 return null;
             const r = parseInt(cell.getAttribute('data-row-index') ?? '', 10);
             const c = parseInt(cell.getAttribute('data-col-index') ?? '', 10);
-            if (Number.isNaN(r) || Number.isNaN(c) || c < colOff)
+            if (Number.isNaN(r) || Number.isNaN(c) || c < colOffsetRef.current)
                 return null;
-            const dataCol = c - colOff;
+            const dataCol = c - colOffsetRef.current;
             return normalizeSelectionRange({
                 startRow: fillDrag.startRow,
                 startCol: fillDrag.startCol,
@@ -118,38 +149,13 @@ export function useFillHandle(params) {
             });
             // Commit range to React state
             setSelectionRange(norm);
-            setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + colOff });
+            setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + colOffsetRef.current });
             // Apply fill values
-            const startItem = items[norm.startRow];
-            const startColDef = visibleCols[norm.startCol];
-            if (startItem && startColDef) {
-                const startValue = getCellValue(startItem, startColDef);
+            const fillEvents = applyFillValues(norm, fillDrag.startRow, fillDrag.startCol, items, visibleCols);
+            if (fillEvents.length > 0) {
                 beginBatch?.();
-                for (let row = norm.startRow; row <= norm.endRow; row++) {
-                    for (let col = norm.startCol; col <= norm.endCol; col++) {
-                        if (row === fillDrag.startRow && col === fillDrag.startCol)
-                            continue;
-                        if (row >= items.length || col >= visibleCols.length)
-                            continue;
-                        const item = items[row];
-                        const colDef = visibleCols[col];
-                        const colEditable = colDef.editable === true ||
-                            (typeof colDef.editable === 'function' && colDef.editable(item));
-                        if (!colEditable)
-                            continue;
-                        const oldValue = getCellValue(item, colDef);
-                        const result = parseValue(startValue, oldValue, item, colDef);
-                        if (!result.valid)
-                            continue;
-                        onCellValueChanged({
-                            item,
-                            columnId: colDef.columnId,
-                            oldValue,
-                            newValue: result.value,
-                            rowIndex: row,
-                        });
-                    }
-                }
+                for (const evt of fillEvents)
+                    onCellValueChanged(evt);
                 endBatch?.();
             }
             setFillDrag(null);
@@ -163,19 +169,18 @@ export function useFillHandle(params) {
             if (rafRef.current)
                 cancelAnimationFrame(rafRef.current);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         fillDrag,
         editable,
-        colOffset,
         items,
         visibleCols,
         setSelectionRange,
         setActiveCell,
         onCellValueChanged,
-        // wrapperRef excluded — refs are stable across renders
         beginBatch,
         endBatch,
+        colOffsetRef,
+        wrapperRef,
     ]);
     // Ref mirror — keeps handleFillHandleMouseDown stable across selection changes
     const selectionRangeRef = useRef(selectionRange);