@alaarab/ogrid-react 2.1.6 → 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;
@@ -1631,7 +1642,7 @@ var EMPTY_LOADING_OPTIONS2 = {};
 function useOGrid(props, ref) {
   const {
     columns: columnsProp,
-    getRowId,
+    getRowId: getRowIdProp,
     data,
     dataSource,
     page: controlledPage,
@@ -1646,7 +1657,7 @@ function useOGrid(props, ref) {
     onFiltersChange,
     onVisibleColumnsChange,
     columnOrder,
-    onColumnOrderChange,
+    onColumnOrderChange: onColumnOrderChangeProp,
     onColumnResized,
     onColumnPinned,
     defaultPageSize = DEFAULT_PAGE_SIZE,
@@ -1661,9 +1672,9 @@ function useOGrid(props, ref) {
     suppressHorizontalScroll,
     editable,
     cellSelection,
-    onCellValueChanged,
-    onUndo,
-    onRedo,
+    onCellValueChanged: onCellValueChangedProp,
+    onUndo: onUndoProp,
+    onRedo: onRedoProp,
     canUndo,
     canRedo,
     rowSelection = "none",
@@ -1685,6 +1696,32 @@ function useOGrid(props, ref) {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy
   } = props;
+  const getRowIdStableRef = useLatestRef(getRowIdProp);
+  const getRowId = useCallback((item) => getRowIdStableRef.current(item), [getRowIdStableRef]);
+  const onColumnOrderChangeRef = useLatestRef(onColumnOrderChangeProp);
+  const onColumnOrderChange = useMemo(
+    () => onColumnOrderChangeProp ? (order) => onColumnOrderChangeRef.current?.(order) : void 0,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [!!onColumnOrderChangeProp]
+  );
+  const onCellValueChangedRef = useLatestRef(onCellValueChangedProp);
+  const onCellValueChanged = useMemo(
+    () => onCellValueChangedProp ? (event) => onCellValueChangedRef.current?.(event) : void 0,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [!!onCellValueChangedProp]
+  );
+  const onUndoRef = useLatestRef(onUndoProp);
+  const onUndo = useMemo(
+    () => onUndoProp ? () => onUndoRef.current?.() : void 0,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [!!onUndoProp]
+  );
+  const onRedoRef = useLatestRef(onRedoProp);
+  const onRedo = useMemo(
+    () => onRedoProp ? () => onRedoRef.current?.() : void 0,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [!!onRedoProp]
+  );
   const columnChooserPlacement = columnChooserProp === false ? "none" : columnChooserProp === "sidebar" ? "sidebar" : "toolbar";
   const columns = useMemo(() => flattenColumns(columnsProp), [columnsProp]);
   const isServerSide = dataSource != null;
@@ -2241,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;
@@ -2292,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) {
@@ -2397,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();
@@ -2865,6 +2890,7 @@ function useKeyboardNavigation(params) {
 }
 function useUndoRedo(params) {
   const { onCellValueChanged, maxUndoDepth = 100 } = params;
+  const onCellValueChangedRef = useLatestRef(onCellValueChanged);
   const stackRef = useRef(null);
   if (stackRef.current === null) {
     stackRef.current = new UndoRedoStack(maxUndoDepth);
@@ -2878,16 +2904,17 @@ function useUndoRedo(params) {
   }, []);
   const wrapped = useCallback(
     (event) => {
-      if (!onCellValueChanged) return;
+      if (!onCellValueChangedRef.current) return;
       const stack = getStack();
       stack.record(event);
       if (!stack.isBatching) {
         setHistoryLength(stack.historyLength);
         setRedoLength(stack.redoLength);
       }
-      onCellValueChanged(event);
+      onCellValueChangedRef.current(event);
     },
-    [onCellValueChanged, getStack]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getStack]
   );
   const beginBatch = useCallback(() => {
     getStack().beginBatch();
@@ -2899,7 +2926,7 @@ function useUndoRedo(params) {
     setRedoLength(stack.redoLength);
   }, [getStack]);
   const undo = useCallback(() => {
-    if (!onCellValueChanged) return;
+    if (!onCellValueChangedRef.current) return;
     const stack = getStack();
     const lastBatch = stack.undo();
     if (!lastBatch) return;
@@ -2907,24 +2934,24 @@ function useUndoRedo(params) {
     setRedoLength(stack.redoLength);
     for (let i = lastBatch.length - 1; i >= 0; i--) {
       const ev = lastBatch[i];
-      onCellValueChanged({
+      onCellValueChangedRef.current({
         ...ev,
         oldValue: ev.newValue,
         newValue: ev.oldValue
       });
     }
-  }, [onCellValueChanged, getStack]);
+  }, [getStack]);
   const redo = useCallback(() => {
-    if (!onCellValueChanged) return;
+    if (!onCellValueChangedRef.current) return;
     const stack = getStack();
     const nextBatch = stack.redo();
     if (!nextBatch) return;
     setHistoryLength(stack.historyLength);
     setRedoLength(stack.redoLength);
     for (const ev of nextBatch) {
-      onCellValueChanged(ev);
+      onCellValueChangedRef.current(ev);
     }
-  }, [onCellValueChanged, getStack]);
+  }, [getStack]);
   return {
     onCellValueChanged: onCellValueChanged ? wrapped : void 0,
     undo,
@@ -2952,7 +2979,7 @@ function useFillHandle(params) {
     items,
     visibleCols,
     editable,
-    onCellValueChanged,
+    onCellValueChanged: onCellValueChangedProp,
     selectionRange,
     setSelectionRange,
     setActiveCell,
@@ -2961,30 +2988,18 @@ function useFillHandle(params) {
     beginBatch,
     endBatch
   } = params;
+  const onCellValueChangedRef = useLatestRef(onCellValueChangedProp);
   const [fillDrag, setFillDrag] = useState(null);
   const fillDragEndRef = useRef({ endRow: 0, endCol: 0 });
   const rafRef = useRef(0);
   const liveFillRangeRef = useRef(null);
   const colOffsetRef = useLatestRef(colOffset);
   useEffect(() => {
-    if (!fillDrag || editable === false || !onCellValueChanged || !wrapperRef.current) return;
+    if (!fillDrag || editable === false || !onCellValueChangedRef.current || !wrapperRef.current) return;
     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;
@@ -3006,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, "");
@@ -3021,7 +3036,6 @@ function useFillHandle(params) {
         el.removeAttribute(DRAG_ATTR2);
       }
       markedCells.clear();
-      cellIndex = null;
     };
     let lastFillMousePos = null;
     const resolveRange = (cx, cy) => {
@@ -3081,7 +3095,7 @@ function useFillHandle(params) {
       const fillEvents = applyFillValues(norm, fillDrag.startRow, fillDrag.startCol, items, visibleCols);
       if (fillEvents.length > 0) {
         beginBatch?.();
-        for (const evt of fillEvents) onCellValueChanged(evt);
+        for (const evt of fillEvents) onCellValueChangedRef.current?.(evt);
         endBatch?.();
       }
       setFillDrag(null);
@@ -3101,7 +3115,6 @@ function useFillHandle(params) {
     visibleCols,
     setSelectionRange,
     setActiveCell,
-    onCellValueChanged,
     beginBatch,
     endBatch,
     colOffsetRef,
@@ -3577,11 +3590,14 @@ function useDataGridEditing(params) {
     pendingEditorValue,
     setPendingEditorValue,
     onCellValueChanged,
-    setActiveCell
+    setActiveCell,
+    setSelectionRange,
+    colOffset
   } = params;
   const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
   const visibleColsRef = useLatestRef(params.visibleCols);
   const itemsLengthRef = useLatestRef(params.itemsLength);
+  const onCellValueChangedRef = useLatestRef(onCellValueChanged);
   const commitCellEdit = useCallback(
     (item, columnId, oldValue, newValue, rowIndex, globalColIndex) => {
       const col = visibleColsRef.current.find((c) => c.columnId === columnId);
@@ -3595,7 +3611,7 @@ function useDataGridEditing(params) {
         }
         newValue = result.value;
       }
-      onCellValueChanged?.({
+      onCellValueChangedRef.current?.({
         item,
         columnId,
         oldValue,
@@ -3606,10 +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 });
       }
     },
-    [onCellValueChanged, setEditingCell, setPendingEditorValue, setActiveCell, visibleColsRef, itemsLengthRef]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setEditingCell, setPendingEditorValue, setActiveCell, setSelectionRange, colOffset, visibleColsRef, itemsLengthRef]
   );
   const cancelPopoverEdit = useCallback(() => {
     setEditingCell(null);
@@ -3885,6 +3905,7 @@ function useDataGridState(params) {
   });
   const {
     selectionRange,
+    setSelectionRange,
     cutRange,
     copyRange,
     isDragging,
@@ -3898,7 +3919,9 @@ function useDataGridState(params) {
     visibleCols,
     itemsLength: items.length,
     onCellValueChanged,
-    setActiveCell
+    setActiveCell,
+    setSelectionRange,
+    colOffset
   });
   const {
     sortBy,
@@ -3909,6 +3932,7 @@ function useDataGridState(params) {
     loadingFilterOptions,
     peopleSearch
   } = props;
+  const hasPeopleSearch = !!peopleSearch;
   const onFilterChangeRef = useLatestRef(onFilterChange);
   const peopleSearchRef = useLatestRef(peopleSearch);
   const stableOnFilterChange = useCallback(
@@ -3928,7 +3952,7 @@ function useDataGridState(params) {
       onFilterChange: stableOnFilterChange,
       filterOptions,
       loadingFilterOptions,
-      peopleSearch: peopleSearch ? stablePeopleSearch : void 0
+      peopleSearch: hasPeopleSearch ? stablePeopleSearch : void 0
     }),
     [
       sortBy,
@@ -3938,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.6",
+  "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.6",
+    "@alaarab/ogrid-core": "2.1.8",
     "@tanstack/react-virtual": "^3.0.0"
   },
   "peerDependencies": {