@alaarab/ogrid-core 1.8.0 → 1.8.2

package/dist/esm/components/OGridLayout.js

@@ -33,9 +33,11 @@ const toolbarSectionStyle = {
     alignItems: 'center',
     gap: 8,
 };
-/** Secondary toolbar row — minimal wrapper. Consumer content handles its own padding/background. */
+/** Secondary toolbar row (e.g. active filter chips). Matches toolbar strip styling. */
 const toolbarBelowStyle = {
     borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
+    padding: '6px 12px',
+    background: 'var(--ogrid-header-bg, #f5f5f5)',
 };
 const footerStripStyle = {
     borderTop: '1px solid var(--ogrid-border, #e0e0e0)',

package/dist/esm/hooks/useActiveCell.js

@@ -1,10 +1,23 @@
-import { useState, useLayoutEffect } from 'react';
+import { useState, useLayoutEffect, useCallback, useRef } from 'react';
 /**
  * Tracks the active cell for keyboard navigation.
  * When wrapperRef and editingCell are provided, scrolls the active cell into view when it changes (and not editing).
  */
 export function useActiveCell(wrapperRef, editingCell) {
-    const [activeCell, setActiveCell] = useState(null);
+    const [activeCell, _setActiveCell] = useState(null);
+    const activeCellRef = useRef(activeCell);
+    activeCellRef.current = activeCell;
+    // Deduplicating setter — skips state update (and all downstream effects) when
+    // the cell coordinates haven't actually changed. This prevents re-renders when
+    // rapidly clicking the same cell.
+    const setActiveCell = useCallback((cell) => {
+        const prev = activeCellRef.current;
+        if (prev === cell)
+            return;
+        if (prev && cell && prev.rowIndex === cell.rowIndex && prev.columnIndex === cell.columnIndex)
+            return;
+        _setActiveCell(cell);
+    }, []);
     // useLayoutEffect ensures focus moves synchronously before the browser can
     // reset focus to body (fixes left/right arrow navigation losing focus)
     useLayoutEffect(() => {

package/dist/esm/hooks/useCellSelection.js

@@ -1,5 +1,14 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { normalizeSelectionRange } from '../types';
+/** Compares two selection ranges by value. */
+function rangesEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.startRow === b.startRow && a.endRow === b.endRow &&
+        a.startCol === b.startCol && a.endCol === b.endCol;
+}
 /** DOM attribute name used for drag-range highlighting (bypasses React). */
 const DRAG_ATTR = 'data-drag-range';
 /** Auto-scroll config */
@@ -14,9 +23,11 @@ function autoScrollSpeed(distance) {
 }
 export function useCellSelection(params) {
     const { colOffset, rowCount, visibleColCount, setActiveCell, wrapperRef } = params;
-    const [selectionRange, setSelectionRange] = useState(null);
+    const [selectionRange, _setSelectionRange] = useState(null);
     const isDraggingRef = useRef(false);
     const [isDragging, setIsDragging] = useState(false);
+    /** True once a mousemove has been seen during the current drag gesture. */
+    const dragMovedRef = useRef(false);
     const dragStartRef = useRef(null);
     const rafRef = useRef(0);
     /** Live drag range kept in a ref — only committed to React state on mouseup. */
@@ -27,6 +38,12 @@ export function useCellSelection(params) {
     // without adding selectionRange to its useCallback deps (keeps it stable).
     const selectionRangeRef = useRef(selectionRange);
     selectionRangeRef.current = selectionRange;
+    // Deduplicating setter — skips re-render when the range hasn't actually changed.
+    const setSelectionRange = useCallback((next) => {
+        if (rangesEqual(selectionRangeRef.current, next))
+            return;
+        _setSelectionRange(next);
+    }, []);
     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)
@@ -48,6 +65,7 @@ export function useCellSelection(params) {
         }
         else {
             dragStartRef.current = { row: rowIndex, col: dataColIndex };
+            dragMovedRef.current = false;
             const initial = {
                 startRow: rowIndex,
                 startCol: dataColIndex,
@@ -57,8 +75,10 @@ export function useCellSelection(params) {
             setSelectionRange(initial);
             liveDragRangeRef.current = initial;
             setActiveCell({ rowIndex, columnIndex: globalColIndex });
+            // Mark drag as "started" but don't set isDragging state yet —
+            // setIsDragging(true) is deferred to the first mousemove to avoid
+            // a true→false toggle on simple clicks (which causes 2 extra renders).
             isDraggingRef.current = true;
-            setIsDragging(true);
         }
     }, [colOffset, setActiveCell]);
     const handleSelectAllCells = useCallback(() => {
@@ -204,6 +224,12 @@ export function useCellSelection(params) {
         const onMove = (e) => {
             if (!isDraggingRef.current || !dragStartRef.current)
                 return;
+            // Promote to a real drag on first mousemove (deferred from mouseDown
+            // to avoid a true→false toggle on simple clicks).
+            if (!dragMovedRef.current) {
+                dragMovedRef.current = true;
+                setIsDragging(true);
+            }
             // Always store latest position so mouseUp can flush if RAF hasn't executed
             lastMousePosRef.current = { cx: e.clientX, cy: e.clientY };
             // Update auto-scroll based on mouse proximity to edges
@@ -242,29 +268,35 @@ export function useCellSelection(params) {
                 rafRef.current = 0;
             }
             isDraggingRef.current = 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,
-                });
+            const wasDrag = dragMovedRef.current;
+            if (wasDrag) {
+                // 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,
+                    });
+                }
             }
+            // For simple clicks (no drag movement), mouseDown already set
+            // selectionRange + activeCell — skip redundant state updates.
             // 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);
+            if (wasDrag)
+                setIsDragging(false);
         };
         window.addEventListener('mousemove', onMove, true);
         window.addEventListener('mouseup', onUp, true);

package/package.json

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