@alaarab/ogrid-core 1.3.0 → 1.3.2

package/dist/esm/hooks/useCellSelection.js

@@ -1,12 +1,20 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { normalizeSelectionRange } from '../types';
+/** DOM attribute name used for drag-range highlighting (bypasses React). */
+const DRAG_ATTR = 'data-drag-range';
 export function useCellSelection(params) {
-    const { colOffset, rowCount, visibleColCount, setActiveCell } = params;
+    const { colOffset, rowCount, visibleColCount, setActiveCell, wrapperRef } = params;
     const [selectionRange, setSelectionRange] = useState(null);
     const isDraggingRef = useRef(false);
     const [isDragging, setIsDragging] = useState(false);
     const dragStartRef = useRef(null);
+    const rafRef = useRef(0);
+    /** Live drag range kept in a ref — only committed to React state on mouseup. */
+    const liveDragRangeRef = useRef(null);
     const handleCellMouseDown = useCallback((e, rowIndex, globalColIndex) => {
+        // Only handle primary (left) button — let middle-click scroll and right-click context menu work natively
+        if (e.button !== 0)
+            return;
         if (globalColIndex < colOffset)
             return;
         // Prevent native text selection during cell drag
@@ -23,12 +31,14 @@ export function useCellSelection(params) {
         }
         else {
             dragStartRef.current = { row: rowIndex, col: dataColIndex };
-            setSelectionRange({
+            const initial = {
                 startRow: rowIndex,
                 startCol: dataColIndex,
                 endRow: rowIndex,
                 endCol: dataColIndex,
-            });
+            };
+            setSelectionRange(initial);
+            liveDragRangeRef.current = initial;
             setActiveCell({ rowIndex, columnIndex: globalColIndex });
             isDraggingRef.current = true;
             setIsDragging(true);
@@ -45,41 +55,138 @@ export function useCellSelection(params) {
         });
         setActiveCell({ rowIndex: 0, columnIndex: colOffset });
     }, [rowCount, visibleColCount, colOffset, setActiveCell]);
-    // Window mouse move/up for drag selection
+    /** Last known mouse position during drag — used by mouseUp to flush pending RAF work. */
+    const lastMousePosRef = useRef(null);
+    // Window mouse move/up for drag selection.
+    // Performance: during drag, we update a ref + toggle DOM attributes via rAF.
+    // React state is only committed on mouseup (single re-render instead of 60-120/s).
     useEffect(() => {
-        const onMove = (e) => {
-            if (!isDraggingRef.current || !dragStartRef.current)
+        const colOff = colOffset; // capture for closure
+        /** Toggle DRAG_ATTR on cell-content divs to show the range highlight via CSS. */
+        const applyDragAttrs = (range) => {
+            const wrapper = wrapperRef.current;
+            if (!wrapper)
+                return;
+            const minR = Math.min(range.startRow, range.endRow);
+            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, '');
+                }
+                else {
+                    if (el.hasAttribute(DRAG_ATTR))
+                        el.removeAttribute(DRAG_ATTR);
+                }
+            }
+        };
+        const clearDragAttrs = () => {
+            const wrapper = wrapperRef.current;
+            if (!wrapper)
                 return;
-            const target = document.elementFromPoint(e.clientX, e.clientY);
+            const marked = wrapper.querySelectorAll(`[${DRAG_ATTR}]`);
+            for (let i = 0; i < marked.length; i++)
+                marked[i].removeAttribute(DRAG_ATTR);
+        };
+        /** Resolve mouse coordinates to a cell range (shared by RAF callback and mouseUp flush). */
+        const resolveRange = (cx, cy) => {
+            if (!dragStartRef.current)
+                return null;
+            const target = document.elementFromPoint(cx, cy);
             const cell = target?.closest?.('[data-row-index][data-col-index]');
             if (!cell)
-                return;
+                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 < colOffset)
-                return;
-            const dataCol = c - colOffset;
+            if (Number.isNaN(r) || Number.isNaN(c) || c < colOff)
+                return null;
+            const dataCol = c - colOff;
             const start = dragStartRef.current;
-            setSelectionRange(normalizeSelectionRange({
+            return normalizeSelectionRange({
                 startRow: start.row,
                 startCol: start.col,
                 endRow: r,
                 endCol: dataCol,
-            }));
-            setActiveCell({ rowIndex: r, columnIndex: c });
+            });
+        };
+        const onMove = (e) => {
+            if (!isDraggingRef.current || !dragStartRef.current)
+                return;
+            // Always store latest position so mouseUp can flush if RAF hasn't executed
+            lastMousePosRef.current = { cx: e.clientX, cy: e.clientY };
+            // Cancel previous pending frame
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
+            rafRef.current = requestAnimationFrame(() => {
+                rafRef.current = 0;
+                const pos = lastMousePosRef.current;
+                if (!pos)
+                    return;
+                const newRange = resolveRange(pos.cx, pos.cy);
+                if (!newRange)
+                    return;
+                // Skip if range unchanged
+                const prev = liveDragRangeRef.current;
+                if (prev &&
+                    prev.startRow === newRange.startRow &&
+                    prev.startCol === newRange.startCol &&
+                    prev.endRow === newRange.endRow &&
+                    prev.endCol === newRange.endCol) {
+                    return;
+                }
+                liveDragRangeRef.current = newRange;
+                // DOM-only highlighting — no React state update until mouseup
+                applyDragAttrs(newRange);
+            });
         };
         const onUp = () => {
+            if (!isDraggingRef.current)
+                return;
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = 0;
+            }
             isDraggingRef.current = false;
-            setIsDragging(false);
+            // Flush: if the last RAF hasn't executed yet, resolve the range now from the
+            // last known mouse position so the final committed range is always accurate.
+            const pos = lastMousePosRef.current;
+            if (pos) {
+                const flushed = resolveRange(pos.cx, pos.cy);
+                if (flushed)
+                    liveDragRangeRef.current = flushed;
+            }
+            // Commit final range to React state (triggers a single re-render)
+            const finalRange = liveDragRangeRef.current;
+            if (finalRange) {
+                setSelectionRange(finalRange);
+                setActiveCell({
+                    rowIndex: finalRange.endRow,
+                    columnIndex: finalRange.endCol + colOff,
+                });
+            }
+            // Clean up DOM attributes — React will apply CSS-module classes on the same paint
+            clearDragAttrs();
+            liveDragRangeRef.current = null;
+            lastMousePosRef.current = null;
             dragStartRef.current = null;
+            setIsDragging(false);
         };
         window.addEventListener('mousemove', onMove, true);
         window.addEventListener('mouseup', onUp, true);
         return () => {
             window.removeEventListener('mousemove', onMove, true);
             window.removeEventListener('mouseup', onUp, true);
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
         };
-    }, [colOffset, setActiveCell]);
+    }, [colOffset, setActiveCell, wrapperRef]);
     return {
         selectionRange,
         setSelectionRange,

package/dist/esm/hooks/useDataGridState.js

@@ -70,6 +70,7 @@ export function useDataGridState(params) {
         rowCount: items.length,
         visibleColCount: visibleCols.length,
         setActiveCell,
+        wrapperRef,
     });
     const { contextMenu, setContextMenu, handleCellContextMenu, closeContextMenu } = useContextMenu();
     const { handleCopy, handleCut, handlePaste, cutRange, copyRange, clearClipboardRanges } = useClipboard({

package/dist/esm/hooks/useFillHandle.js

@@ -2,35 +2,109 @@ import { useState, useCallback, useRef, useEffect } from 'react';
 import { normalizeSelectionRange } from '../types';
 import { getCellValue } from '../utils';
 import { parseValue } from '../utils/valueParsers';
+/** DOM attribute name for fill-drag range highlighting (same as cell selection drag). */
+const DRAG_ATTR = 'data-drag-range';
 export function useFillHandle(params) {
     const { items, visibleCols, editable, onCellValueChanged, selectionRange, setSelectionRange, setActiveCell, colOffset, wrapperRef, beginBatch, endBatch, } = params;
     const [fillDrag, setFillDrag] = useState(null);
     const fillDragEndRef = useRef({ endRow: 0, endCol: 0 });
+    const rafRef = useRef(0);
+    const liveFillRangeRef = useRef(null);
     useEffect(() => {
         if (!fillDrag || editable === false || !onCellValueChanged || !wrapperRef.current)
             return;
         fillDragEndRef.current = { endRow: fillDrag.startRow, endCol: fillDrag.startCol };
-        const onMove = (e) => {
-            const target = document.elementFromPoint(e.clientX, e.clientY);
+        liveFillRangeRef.current = null;
+        const colOff = colOffset;
+        const applyDragAttrs = (range) => {
+            const wrapper = wrapperRef.current;
+            if (!wrapper)
+                return;
+            const minR = Math.min(range.startRow, range.endRow);
+            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, '');
+                }
+                else {
+                    if (el.hasAttribute(DRAG_ATTR))
+                        el.removeAttribute(DRAG_ATTR);
+                }
+            }
+        };
+        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);
+        };
+        let lastFillMousePos = null;
+        const resolveRange = (cx, cy) => {
+            const target = document.elementFromPoint(cx, cy);
             const cell = target?.closest?.('[data-row-index][data-col-index]');
             if (!cell || !wrapperRef.current?.contains(cell))
-                return;
+                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 < colOffset)
-                return;
-            const dataCol = c - colOffset;
-            fillDragEndRef.current = { endRow: r, endCol: dataCol };
-            const norm = normalizeSelectionRange({
+            if (Number.isNaN(r) || Number.isNaN(c) || c < colOff)
+                return null;
+            const dataCol = c - colOff;
+            return normalizeSelectionRange({
                 startRow: fillDrag.startRow,
                 startCol: fillDrag.startCol,
                 endRow: r,
                 endCol: dataCol,
             });
-            setSelectionRange(norm);
-            setActiveCell({ rowIndex: r, columnIndex: c });
+        };
+        const onMove = (e) => {
+            lastFillMousePos = { cx: e.clientX, cy: e.clientY };
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
+            rafRef.current = requestAnimationFrame(() => {
+                rafRef.current = 0;
+                if (!lastFillMousePos)
+                    return;
+                const newRange = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
+                if (!newRange)
+                    return;
+                // Skip if unchanged
+                const prev = liveFillRangeRef.current;
+                if (prev &&
+                    prev.startRow === newRange.startRow &&
+                    prev.startCol === newRange.startCol &&
+                    prev.endRow === newRange.endRow &&
+                    prev.endCol === newRange.endCol) {
+                    return;
+                }
+                liveFillRangeRef.current = newRange;
+                fillDragEndRef.current = { endRow: newRange.endRow, endCol: newRange.endCol };
+                applyDragAttrs(newRange);
+            });
         };
         const onUp = () => {
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = 0;
+            }
+            // Flush: resolve final position if RAF hasn't executed yet
+            if (lastFillMousePos) {
+                const flushed = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
+                if (flushed) {
+                    liveFillRangeRef.current = flushed;
+                    fillDragEndRef.current = { endRow: flushed.endRow, endCol: flushed.endCol };
+                }
+            }
+            clearDragAttrs();
             const end = fillDragEndRef.current;
             const norm = normalizeSelectionRange({
                 startRow: fillDrag.startRow,
@@ -38,6 +112,10 @@ export function useFillHandle(params) {
                 endRow: end.endRow,
                 endCol: end.endCol,
             });
+            // Commit range to React state
+            setSelectionRange(norm);
+            setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + colOff });
+            // Apply fill values
             const startItem = items[norm.startRow];
             const startColDef = visibleCols[norm.startCol];
             if (startItem && startColDef) {
@@ -72,12 +150,15 @@ export function useFillHandle(params) {
                 endBatch?.();
             }
             setFillDrag(null);
+            liveFillRangeRef.current = null;
         };
         window.addEventListener('mousemove', onMove, true);
         window.addEventListener('mouseup', onUp, true);
         return () => {
             window.removeEventListener('mousemove', onMove, true);
             window.removeEventListener('mouseup', onUp, true);
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
         };
     }, [
         fillDrag,

package/dist/esm/hooks/useOGrid.js

@@ -5,7 +5,7 @@ import { toDataGridFilterProps } from '../types';
 import { useFilterOptions } from './useFilterOptions';
 const DEFAULT_PAGE_SIZE = 20;
 export function useOGrid(props, ref) {
-    const { columns: columnsProp, getRowId, data, dataSource, page: controlledPage, pageSize: controlledPageSize, sort: controlledSort, filters: controlledFilters, visibleColumns: controlledVisibleColumns, isLoading: controlledLoading, onPageChange, onPageSizeChange, onSortChange, onFiltersChange, onVisibleColumnsChange, columnOrder, onColumnOrderChange, freezeRows, freezeCols, defaultPageSize = DEFAULT_PAGE_SIZE, defaultSortBy, defaultSortDirection = 'asc', toolbar, emptyState, entityLabelPlural = 'items', className, title, layoutMode = 'content', editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo, rowSelection = 'none', selectedRows, onSelectionChange, statusBar, onError, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
+    const { columns: columnsProp, getRowId, data, dataSource, page: controlledPage, pageSize: controlledPageSize, sort: controlledSort, filters: controlledFilters, visibleColumns: controlledVisibleColumns, isLoading: controlledLoading, onPageChange, onPageSizeChange, onSortChange, onFiltersChange, onVisibleColumnsChange, columnOrder, onColumnOrderChange, freezeRows, freezeCols, defaultPageSize = DEFAULT_PAGE_SIZE, defaultSortBy, defaultSortDirection = 'asc', toolbar, emptyState, entityLabelPlural = 'items', className, title, layoutMode = 'fill', editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo, rowSelection = 'none', selectedRows, onSelectionChange, statusBar, onError, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
     const columns = useMemo(() => flattenColumns(columnsProp), [columnsProp]);
     const isServerSide = dataSource != null;
     const isClientSide = !isServerSide;

package/dist/types/hooks/useCellSelection.d.ts

@@ -4,6 +4,7 @@ export interface UseCellSelectionParams {
     rowCount: number;
     visibleColCount: number;
     setActiveCell: (cell: IActiveCell | null) => void;
+    wrapperRef: React.RefObject<HTMLElement | null>;
 }
 export interface UseCellSelectionResult {
     selectionRange: ISelectionRange | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-core",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "OGrid core – framework-agnostic types, hooks, and utilities for OGrid data tables.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",