@alaarab/ogrid-react 2.1.6 → 2.1.7

package/dist/esm/index.js

@@ -1631,7 +1631,7 @@ var EMPTY_LOADING_OPTIONS2 = {};
 function useOGrid(props, ref) {
   const {
     columns: columnsProp,
-    getRowId,
+    getRowId: getRowIdProp,
     data,
     dataSource,
     page: controlledPage,
@@ -1646,7 +1646,7 @@ function useOGrid(props, ref) {
     onFiltersChange,
     onVisibleColumnsChange,
     columnOrder,
-    onColumnOrderChange,
+    onColumnOrderChange: onColumnOrderChangeProp,
     onColumnResized,
     onColumnPinned,
     defaultPageSize = DEFAULT_PAGE_SIZE,
@@ -1661,9 +1661,9 @@ function useOGrid(props, ref) {
     suppressHorizontalScroll,
     editable,
     cellSelection,
-    onCellValueChanged,
-    onUndo,
-    onRedo,
+    onCellValueChanged: onCellValueChangedProp,
+    onUndo: onUndoProp,
+    onRedo: onRedoProp,
     canUndo,
     canRedo,
     rowSelection = "none",
@@ -1685,6 +1685,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;
@@ -2865,6 +2891,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 +2905,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 +2927,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 +2935,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 +2980,7 @@ function useFillHandle(params) {
     items,
     visibleCols,
     editable,
-    onCellValueChanged,
+    onCellValueChanged: onCellValueChangedProp,
     selectionRange,
     setSelectionRange,
     setActiveCell,
@@ -2961,13 +2989,14 @@ 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();
@@ -3081,7 +3110,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 +3130,6 @@ function useFillHandle(params) {
     visibleCols,
     setSelectionRange,
     setActiveCell,
-    onCellValueChanged,
     beginBatch,
     endBatch,
     colOffsetRef,
@@ -3582,6 +3610,7 @@ function useDataGridEditing(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 +3624,7 @@ function useDataGridEditing(params) {
         }
         newValue = result.value;
       }
-      onCellValueChanged?.({
+      onCellValueChangedRef.current?.({
         item,
         columnId,
         oldValue,
@@ -3609,7 +3638,8 @@ function useDataGridEditing(params) {
         setActiveCell({ rowIndex: rowIndex + 1, columnIndex: globalColIndex });
       }
     },
-    [onCellValueChanged, setEditingCell, setPendingEditorValue, setActiveCell, visibleColsRef, itemsLengthRef]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setEditingCell, setPendingEditorValue, setActiveCell, visibleColsRef, itemsLengthRef]
   );
   const cancelPopoverEdit = useCallback(() => {
     setEditingCell(null);

package/package.json

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