@alaarab/ogrid-react 2.1.7 → 2.1.8

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,18 +2278,6 @@ 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) => {
       if (!el.hasAttribute(DRAG_ATTR)) el.setAttribute(DRAG_ATTR, "");
       const isAnchor = anchor && r === anchor.row && c === anchor.col;
@@ -2318,13 +2317,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) {
@@ -2423,7 +2422,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();
@@ -3000,20 +2999,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 +3021,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 +3036,6 @@ function useFillHandle(params) {
         el.removeAttribute(DRAG_ATTR2);
       }
       markedCells.clear();
-      cellIndex = null;
     };
     let lastFillMousePos = null;
     const resolveRange = (cx, cy) => {
@@ -3605,7 +3590,9 @@ function useDataGridEditing(params) {
     pendingEditorValue,
     setPendingEditorValue,
     onCellValueChanged,
-    setActiveCell
+    setActiveCell,
+    setSelectionRange,
+    colOffset
   } = params;
   const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
   const visibleColsRef = useLatestRef(params.visibleCols);
@@ -3635,11 +3622,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 +3905,7 @@ function useDataGridState(params) {
   });
   const {
     selectionRange,
+    setSelectionRange,
     cutRange,
     copyRange,
     isDragging,
@@ -3928,7 +3919,9 @@ function useDataGridState(params) {
     visibleCols,
     itemsLength: items.length,
     onCellValueChanged,
-    setActiveCell
+    setActiveCell,
+    setSelectionRange,
+    colOffset
   });
   const {
     sortBy,
@@ -3939,6 +3932,7 @@ function useDataGridState(params) {
     loadingFilterOptions,
     peopleSearch
   } = props;
+  const hasPeopleSearch = !!peopleSearch;
   const onFilterChangeRef = useLatestRef(onFilterChange);
   const peopleSearchRef = useLatestRef(peopleSearch);
   const stableOnFilterChange = useCallback(
@@ -3958,7 +3952,7 @@ function useDataGridState(params) {
       onFilterChange: stableOnFilterChange,
       filterOptions,
       loadingFilterOptions,
-      peopleSearch: peopleSearch ? stablePeopleSearch : void 0
+      peopleSearch: hasPeopleSearch ? stablePeopleSearch : void 0
     }),
     [
       sortBy,
@@ -3968,7 +3962,7 @@ function useDataGridState(params) {
       stableOnFilterChange,
       filterOptions,
       loadingFilterOptions,
-      peopleSearch,
+      hasPeopleSearch,
       stablePeopleSearch
     ]
   );

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.8",
   "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.8",
     "@tanstack/react-virtual": "^3.0.0"
   },
   "peerDependencies": {