@alaarab/ogrid-react 2.1.8 → 2.1.10

package/dist/esm/index.js

@@ -2278,30 +2278,62 @@ function useCellSelection(params) {
   useEffect(() => {
     const markedCells = /* @__PURE__ */ new Set();
     let cellIndex = null;
-    const styleCellInRange = (el, r, c, minR, maxR, minC, maxC, anchor) => {
+    let overlayEl = null;
+    let overlayContainer = null;
+    const styleCellInRange = (el, r, _c, _minR, _maxR, _minC, _maxC, anchor) => {
       if (!el.hasAttribute(DRAG_ATTR)) el.setAttribute(DRAG_ATTR, "");
-      const isAnchor = anchor && r === anchor.row && c === anchor.col;
+      const isAnchor = anchor && r === anchor.row && _c === anchor.col;
       if (isAnchor) {
         if (!el.hasAttribute(DRAG_ANCHOR_ATTR)) el.setAttribute(DRAG_ANCHOR_ATTR, "");
       } else {
         if (el.hasAttribute(DRAG_ANCHOR_ATTR)) el.removeAttribute(DRAG_ANCHOR_ATTR);
       }
-      const shadows = [];
-      if (r === minR) shadows.push("inset 0 2px 0 0 var(--ogrid-selection, #217346)");
-      if (r === maxR) shadows.push("inset 0 -2px 0 0 var(--ogrid-selection, #217346)");
-      if (c === minC) shadows.push("inset 2px 0 0 0 var(--ogrid-selection, #217346)");
-      if (c === maxC) shadows.push("inset -2px 0 0 0 var(--ogrid-selection, #217346)");
-      el.style.boxShadow = shadows.length > 0 ? shadows.join(", ") : "";
       markedCells.add(el);
     };
     const unstyleCell = (el) => {
       el.removeAttribute(DRAG_ATTR);
       el.removeAttribute(DRAG_ANCHOR_ATTR);
-      el.style.boxShadow = "";
+    };
+    const positionOverlay = (minR, maxR, minC, maxC, colOff) => {
+      const topLeftEl = cellIndex?.get(`${minR},${minC + colOff}`);
+      const bottomRightEl = cellIndex?.get(`${maxR},${maxC + colOff}`);
+      if (!topLeftEl || !bottomRightEl) return;
+      const topLeftTd = topLeftEl.closest("td");
+      const bottomRightTd = bottomRightEl.closest("td");
+      if (!topLeftTd || !bottomRightTd) return;
+      if (!overlayContainer) {
+        overlayContainer = topLeftEl.closest("table")?.parentElement;
+        if (!overlayContainer) return;
+      }
+      if (!overlayEl) {
+        overlayEl = document.createElement("div");
+        overlayEl.style.position = "absolute";
+        overlayEl.style.border = "2px solid var(--ogrid-selection, #217346)";
+        overlayEl.style.pointerEvents = "none";
+        overlayEl.style.zIndex = "4";
+        overlayEl.style.boxSizing = "border-box";
+        overlayContainer.appendChild(overlayEl);
+      }
+      const cRect = overlayContainer.getBoundingClientRect();
+      const tlRect = topLeftTd.getBoundingClientRect();
+      const brRect = bottomRightTd.getBoundingClientRect();
+      overlayEl.style.top = `${Math.round(tlRect.top - cRect.top)}px`;
+      overlayEl.style.left = `${Math.round(tlRect.left - cRect.left)}px`;
+      overlayEl.style.width = `${Math.round(brRect.right - tlRect.left)}px`;
+      overlayEl.style.height = `${Math.round(brRect.bottom - tlRect.top)}px`;
+      overlayEl.style.display = "block";
+    };
+    const hideOverlay = () => {
+      if (overlayEl) overlayEl.style.display = "none";
+    };
+    const removeOverlay = () => {
+      overlayEl?.remove();
+      overlayEl = null;
+      overlayContainer = null;
     };
     const applyDragAttrs = (range) => {
       const wrapper = wrapperRef.current;
-      if (!wrapper) return;
+      if (!wrapper || !isDraggingRef.current) 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);
@@ -2331,6 +2363,7 @@ function useCellSelection(params) {
           }
         }
       }
+      positionOverlay(minR, maxR, minC, maxC, colOff);
     };
     applyDragAttrsRef.current = applyDragAttrs;
     const clearDragAttrs = () => {
@@ -2339,6 +2372,7 @@ function useCellSelection(params) {
       }
       markedCells.clear();
       cellIndex = null;
+      hideOverlay();
     };
     const resolveRange = (cx, cy) => {
       if (!dragStartRef.current) return null;
@@ -2478,6 +2512,7 @@ function useCellSelection(params) {
       window.removeEventListener("mouseup", onUp, true);
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
       stopAutoScroll();
+      removeOverlay();
     };
   }, [setActiveCell, colOffsetRef, setSelectionRange, wrapperRef]);
   return {
@@ -3477,7 +3512,7 @@ function useDataGridLayout(params) {
       if (Object.keys(prev).length !== Object.keys(measured).length) return measured;
       return prev;
     });
-  }, [visibleCols, containerWidth, columnSizingOverrides, wrapperRef]);
+  }, [visibleCols, columnSizingOverrides, wrapperRef]);
   const columnWidthMap = useMemo(() => {
     const map = {};
     for (const col of visibleCols) {
@@ -6814,7 +6849,8 @@ function MarchingAntsOverlay({
   items,
   visibleColumns,
   columnSizingOverrides,
-  columnOrder
+  columnOrder,
+  isDragging
 }) {
   const [selRect, setSelRect] = useState(null);
   const [clipRect, setClipRect] = useState(null);
@@ -6862,7 +6898,7 @@ function MarchingAntsOverlay({
   const selR = selRect ? roundRect(selRect) : null;
   const clipR = clipRect ? roundRect(clipRect) : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    selR && !clipRangeMatchesSel && /* @__PURE__ */ jsx(
+    selR && !isDragging && !clipRangeMatchesSel && /* @__PURE__ */ jsx(
       "svg",
       {
         style: {

package/dist/types/components/MarchingAntsOverlay.d.ts

@@ -21,5 +21,7 @@ export interface MarchingAntsOverlayProps {
     }>;
     /** Column order — triggers re-measurement when columns are reordered */
     columnOrder: readonly string[] | undefined;
+    /** True while the user is drag-selecting — hides the selection SVG (drag overlay handles it) */
+    isDragging?: boolean;
 }
-export declare function MarchingAntsOverlay({ containerRef, selectionRange, copyRange, cutRange, colOffset, items, visibleColumns, columnSizingOverrides, columnOrder, }: MarchingAntsOverlayProps): React.ReactElement | null;
+export declare function MarchingAntsOverlay({ containerRef, selectionRange, copyRange, cutRange, colOffset, items, visibleColumns, columnSizingOverrides, columnOrder, isDragging, }: MarchingAntsOverlayProps): React.ReactElement | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.1.8",
+  "version": "2.1.10",
   "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -39,7 +39,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.8",
+    "@alaarab/ogrid-core": "2.1.10",
     "@tanstack/react-virtual": "^3.0.0"
   },
   "peerDependencies": {