@alaarab/ogrid-react 2.1.7 → 2.1.9

package/dist/esm/index.js

@@ -74,6 +74,9 @@ function getCellValue(item, col) {
   if (col.valueGetter) return col.valueGetter(item);
   return item[col.columnId];
 }
+function isColumnEditable(col, item) {
+  return col.editable === true || typeof col.editable === "function" && col.editable(item);
+}
 function isColumnGroupDef(c) {
   return "children" in c && Array.isArray(c.children);
 }
@@ -735,9 +738,9 @@ function getHeaderFilterConfig(col, input) {
 function getCellRenderDescriptor(item, col, rowIndex, colIdx, input) {
   const rowId = input.getRowId(item);
   const globalColIndex = colIdx + input.colOffset;
-  const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
-  const canEditInline = input.editable !== false && !!colEditable && !!input.onCellValueChanged && typeof col.cellEditor !== "function";
-  const canEditPopup = input.editable !== false && !!colEditable && !!input.onCellValueChanged && typeof col.cellEditor === "function" && col.cellEditorPopup !== false;
+  const colEditable = isColumnEditable(col, item);
+  const canEditInline = input.editable !== false && colEditable && !!input.onCellValueChanged && typeof col.cellEditor !== "function";
+  const canEditPopup = input.editable !== false && colEditable && !!input.onCellValueChanged && typeof col.cellEditor === "function" && col.cellEditorPopup !== false;
   const canEditAny = canEditInline || canEditPopup;
   const isEditing = input.editingCell?.rowId === rowId && input.editingCell?.columnId === col.columnId;
   const isActive = !input.isDragging && input.activeCell?.rowIndex === rowIndex && input.activeCell?.columnIndex === globalColIndex;
@@ -850,6 +853,18 @@ function measureRange(container, range, colOffset) {
     height: brRect.bottom - tlRect.top
   };
 }
+function buildCellIndex(container) {
+  const index = /* @__PURE__ */ new Map();
+  if (!container) return index;
+  const cells = container.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") ?? "";
+    index.set(`${r},${c}`, el);
+  }
+  return index;
+}
 function injectGlobalStyles(id, css) {
   if (typeof document === "undefined") return;
   if (document.getElementById(id)) return;
@@ -1003,8 +1018,7 @@ function applyCellDeletion(range, items, visibleCols) {
       if (r >= items.length || c >= visibleCols.length) continue;
       const item = items[r];
       const col = visibleCols[c];
-      const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
-      if (!colEditable) continue;
+      if (!isColumnEditable(col, item)) continue;
       const oldValue = getCellValue(item, col);
       const result = parseValue("", oldValue, item, col);
       if (!result.valid) continue;
@@ -1100,8 +1114,7 @@ function applyPastedValues(parsedRows, anchorRow, anchorCol, items, visibleCols)
       if (targetRow >= items.length || targetCol >= visibleCols.length) continue;
       const item = items[targetRow];
       const col = visibleCols[targetCol];
-      const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
-      if (!colEditable) continue;
+      if (!isColumnEditable(col, item)) continue;
       const rawValue = cells[c] ?? "";
       const oldValue = getCellValue(item, col);
       const result = parseValue(rawValue, oldValue, item, col);
@@ -1124,8 +1137,7 @@ function applyCutClear(cutRange, items, visibleCols) {
       if (r >= items.length || c >= visibleCols.length) continue;
       const item = items[r];
       const col = visibleCols[c];
-      const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
-      if (!colEditable) continue;
+      if (!isColumnEditable(col, item)) continue;
       const oldValue = getCellValue(item, col);
       const result = parseValue("", oldValue, item, col);
       if (!result.valid) continue;
@@ -1152,8 +1164,7 @@ function applyFillValues(range, sourceRow, sourceCol, items, visibleCols) {
       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;
+      if (!isColumnEditable(colDef, item)) continue;
       const oldValue = getCellValue(item, colDef);
       const result = parseValue(startValue, oldValue, item, colDef);
       if (!result.valid) continue;
@@ -2267,42 +2278,62 @@ function useCellSelection(params) {
   useEffect(() => {
     const markedCells = /* @__PURE__ */ new Set();
     let cellIndex = null;
-    const buildCellIndex = () => {
-      const wrapper = wrapperRef.current;
-      if (!wrapper) return;
-      cellIndex = /* @__PURE__ */ 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);
-      }
-    };
-    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);
@@ -2318,13 +2349,13 @@ function useCellSelection(params) {
           markedCells.delete(el);
         }
       }
-      if (!cellIndex) buildCellIndex();
+      if (!cellIndex) cellIndex = buildCellIndex(wrapperRef.current);
       for (let r = minR; r <= maxR; r++) {
         for (let c = minC; c <= maxC; c++) {
           const key = `${r},${c + colOff}`;
           let el = cellIndex?.get(key);
           if (el && !el.isConnected) {
-            buildCellIndex();
+            cellIndex = buildCellIndex(wrapperRef.current);
             el = cellIndex?.get(key);
           }
           if (el) {
@@ -2332,6 +2363,7 @@ function useCellSelection(params) {
           }
         }
       }
+      positionOverlay(minR, maxR, minC, maxC, colOff);
     };
     applyDragAttrsRef.current = applyDragAttrs;
     const clearDragAttrs = () => {
@@ -2340,6 +2372,7 @@ function useCellSelection(params) {
       }
       markedCells.clear();
       cellIndex = null;
+      hideOverlay();
     };
     const resolveRange = (cx, cy) => {
       if (!dragStartRef.current) return null;
@@ -2423,7 +2456,7 @@ function useCellSelection(params) {
       if (!dragMovedRef.current) {
         dragMovedRef.current = true;
         setIsDragging(true);
-        buildCellIndex();
+        cellIndex = buildCellIndex(wrapperRef.current);
       }
       lastMousePosRef.current = { cx: e.clientX, cy: e.clientY };
       updateAutoScroll();
@@ -2479,6 +2512,7 @@ function useCellSelection(params) {
       window.removeEventListener("mouseup", onUp, true);
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
       stopAutoScroll();
+      removeOverlay();
     };
   }, [setActiveCell, colOffsetRef, setSelectionRange, wrapperRef]);
   return {
@@ -3000,20 +3034,7 @@ function useFillHandle(params) {
     fillDragEndRef.current = { endRow: fillDrag.startRow, endCol: fillDrag.startCol };
     liveFillRangeRef.current = null;
     const markedCells = /* @__PURE__ */ new Set();
-    let cellIndex = null;
-    const buildCellIndex = () => {
-      const wrapper = wrapperRef.current;
-      if (!wrapper) return;
-      cellIndex = /* @__PURE__ */ 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);
-      }
-    };
-    buildCellIndex();
+    let cellIndex = buildCellIndex(wrapperRef.current);
     const applyDragAttrs = (range) => {
       const wrapper = wrapperRef.current;
       if (!wrapper) return;
@@ -3035,8 +3056,8 @@ function useFillHandle(params) {
           const key = `${r},${c + colOff}`;
           let el = cellIndex?.get(key);
           if (el && !el.isConnected) {
-            buildCellIndex();
-            el = cellIndex?.get(key);
+            cellIndex = buildCellIndex(wrapperRef.current);
+            el = cellIndex.get(key);
           }
           if (el) {
             if (!el.hasAttribute(DRAG_ATTR2)) el.setAttribute(DRAG_ATTR2, "");
@@ -3050,7 +3071,6 @@ function useFillHandle(params) {
         el.removeAttribute(DRAG_ATTR2);
       }
       markedCells.clear();
-      cellIndex = null;
     };
     let lastFillMousePos = null;
     const resolveRange = (cx, cy) => {
@@ -3492,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) {
@@ -3605,7 +3625,9 @@ function useDataGridEditing(params) {
     pendingEditorValue,
     setPendingEditorValue,
     onCellValueChanged,
-    setActiveCell
+    setActiveCell,
+    setSelectionRange,
+    colOffset
   } = params;
   const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
   const visibleColsRef = useLatestRef(params.visibleCols);
@@ -3635,11 +3657,14 @@ function useDataGridEditing(params) {
       setPopoverAnchorEl(null);
       setPendingEditorValue(void 0);
       if (rowIndex < itemsLengthRef.current - 1) {
-        setActiveCell({ rowIndex: rowIndex + 1, columnIndex: globalColIndex });
+        const newRow = rowIndex + 1;
+        const localCol = globalColIndex - colOffset;
+        setActiveCell({ rowIndex: newRow, columnIndex: globalColIndex });
+        setSelectionRange({ startRow: newRow, startCol: localCol, endRow: newRow, endCol: localCol });
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setEditingCell, setPendingEditorValue, setActiveCell, visibleColsRef, itemsLengthRef]
+    [setEditingCell, setPendingEditorValue, setActiveCell, setSelectionRange, colOffset, visibleColsRef, itemsLengthRef]
   );
   const cancelPopoverEdit = useCallback(() => {
     setEditingCell(null);
@@ -3915,6 +3940,7 @@ function useDataGridState(params) {
   });
   const {
     selectionRange,
+    setSelectionRange,
     cutRange,
     copyRange,
     isDragging,
@@ -3928,7 +3954,9 @@ function useDataGridState(params) {
     visibleCols,
     itemsLength: items.length,
     onCellValueChanged,
-    setActiveCell
+    setActiveCell,
+    setSelectionRange,
+    colOffset
   });
   const {
     sortBy,
@@ -3939,6 +3967,7 @@ function useDataGridState(params) {
     loadingFilterOptions,
     peopleSearch
   } = props;
+  const hasPeopleSearch = !!peopleSearch;
   const onFilterChangeRef = useLatestRef(onFilterChange);
   const peopleSearchRef = useLatestRef(peopleSearch);
   const stableOnFilterChange = useCallback(
@@ -3958,7 +3987,7 @@ function useDataGridState(params) {
       onFilterChange: stableOnFilterChange,
       filterOptions,
       loadingFilterOptions,
-      peopleSearch: peopleSearch ? stablePeopleSearch : void 0
+      peopleSearch: hasPeopleSearch ? stablePeopleSearch : void 0
     }),
     [
       sortBy,
@@ -3968,7 +3997,7 @@ function useDataGridState(params) {
       stableOnFilterChange,
       filterOptions,
       loadingFilterOptions,
-      peopleSearch,
+      hasPeopleSearch,
       stablePeopleSearch
     ]
   );
@@ -6820,7 +6849,8 @@ function MarchingAntsOverlay({
   items,
   visibleColumns,
   columnSizingOverrides,
-  columnOrder
+  columnOrder,
+  isDragging
 }) {
   const [selRect, setSelRect] = useState(null);
   const [clipRect, setClipRect] = useState(null);
@@ -6868,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/dist/types/hooks/useDataGridEditing.d.ts

@@ -24,6 +24,13 @@ export interface UseDataGridEditingParams<T> {
         rowIndex: number;
         columnIndex: number;
     } | null) => void;
+    setSelectionRange: (range: {
+        startRow: number;
+        startCol: number;
+        endRow: number;
+        endCol: number;
+    } | null) => void;
+    colOffset: number;
 }
 export interface UseDataGridEditingResult<T> {
     editing: DataGridEditingState<T>;

package/dist/types/utils/index.d.ts

@@ -1,4 +1,4 @@
-export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, computeNextSortState, measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, findCtrlArrowTarget, computeTabNavigation, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, applyFillValues, computeArrowNavigation, applyCellDeletion, applyRangeRowSelection, computeRowSelectionState, UndoRedoStack, } from '@alaarab/ogrid-core';
+export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, computeNextSortState, measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, findCtrlArrowTarget, computeTabNavigation, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, applyFillValues, computeArrowNavigation, applyCellDeletion, applyRangeRowSelection, computeRowSelectionState, UndoRedoStack, buildCellIndex, } from '@alaarab/ogrid-core';
 export type { CsvColumn, StatusBarPart, StatusBarPartsInput, GridContextMenuItem, GridContextMenuHandlerProps, PaginationViewModel, ParseValueResult, AggregationResult, IColumnHeaderMenuItem, ColumnHeaderMenuInput, ColumnHeaderMenuHandlers, ArrowNavigationContext, ArrowNavigationResult, } from '@alaarab/ogrid-core';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './dataGridViewModel';
 export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, } from './dataGridViewModel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "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.7",
+    "@alaarab/ogrid-core": "2.1.9",
     "@tanstack/react-virtual": "^3.0.0"
   },
   "peerDependencies": {