@alaarab/ogrid-react 2.1.5 → 2.1.7

package/dist/esm/index.js

@@ -1312,6 +1312,13 @@ function validateRowIds(items, getRowId) {
 }
 var DEFAULT_DEBOUNCE_MS = 300;
 var PEOPLE_SEARCH_DEBOUNCE_MS = DEFAULT_DEBOUNCE_MS;
+function useLatestRef(value) {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+// src/hooks/useFilterOptions.ts
 function fieldsEqual(a, b) {
   if (a.length !== b.length) return false;
   for (let i = 0; i < a.length; i++) {
@@ -1319,19 +1326,23 @@ function fieldsEqual(a, b) {
   }
   return true;
 }
+var EMPTY_FILTER_OPTIONS = {};
+var EMPTY_LOADING = {};
 function useFilterOptions(dataSource, fields) {
   const fieldsRef = useRef(fields);
   if (!fieldsEqual(fieldsRef.current, fields)) {
     fieldsRef.current = fields;
   }
   const stableFields = fieldsRef.current;
-  const [filterOptions, setFilterOptions] = useState({});
-  const [loadingOptions, setLoadingOptions] = useState({});
+  const dataSourceRef = useLatestRef(dataSource);
+  const [filterOptions, setFilterOptions] = useState(EMPTY_FILTER_OPTIONS);
+  const [loadingOptions, setLoadingOptions] = useState(EMPTY_LOADING);
   const load = useCallback(async () => {
-    const fetcher = "fetchFilterOptions" in dataSource && typeof dataSource.fetchFilterOptions === "function" ? dataSource.fetchFilterOptions.bind(dataSource) : void 0;
+    const ds = dataSourceRef.current;
+    const fetcher = "fetchFilterOptions" in ds && typeof ds.fetchFilterOptions === "function" ? ds.fetchFilterOptions.bind(ds) : void 0;
     if (!fetcher) {
-      setFilterOptions({});
-      setLoadingOptions({});
+      setFilterOptions(EMPTY_FILTER_OPTIONS);
+      setLoadingOptions(EMPTY_LOADING);
       return;
     }
     const loading = {};
@@ -1350,8 +1361,8 @@ function useFilterOptions(dataSource, fields) {
       })
     );
     setFilterOptions(results);
-    setLoadingOptions({});
-  }, [dataSource, stableFields]);
+    setLoadingOptions(EMPTY_LOADING);
+  }, [stableFields]);
   useEffect(() => {
     load().catch(() => {
     });
@@ -1535,14 +1546,17 @@ function useOGridDataFetching(params) {
   const [serverLoading, setServerLoading] = useState(true);
   const fetchIdRef = useRef(0);
   const [refreshCounter, setRefreshCounter] = useState(0);
+  const dataSourceRef = useLatestRef(dataSource);
+  const onErrorRef = useLatestRef(onError);
   useEffect(() => {
-    if (!isServerSide || !dataSource) {
+    if (!isServerSide || !dataSourceRef.current) {
       if (!isServerSide) setServerLoading(false);
       return;
     }
+    const ds = dataSourceRef.current;
     const id = ++fetchIdRef.current;
     setServerLoading(true);
-    dataSource.fetchPage({
+    ds.fetchPage({
       page,
       pageSize,
       sort: { field: sort.field, direction: sort.direction },
@@ -1553,22 +1567,23 @@ function useOGridDataFetching(params) {
       setServerTotalCount(res.totalCount);
     }).catch((err) => {
       if (id !== fetchIdRef.current) return;
-      onError?.(err);
+      onErrorRef.current?.(err);
       setServerItems([]);
       setServerTotalCount(0);
     }).finally(() => {
       if (id === fetchIdRef.current) setServerLoading(false);
     });
-  }, [isServerSide, dataSource, page, pageSize, sort.field, sort.direction, stableFilters, onError, refreshCounter]);
+  }, [isServerSide, page, pageSize, sort.field, sort.direction, stableFilters, refreshCounter]);
   const displayItems = isClientSide && clientItemsAndTotal ? clientItemsAndTotal.items : serverItems;
   const displayTotalCount = isClientSide && clientItemsAndTotal ? clientItemsAndTotal.totalCount : serverTotalCount;
+  const onFirstDataRenderedRef = useLatestRef(onFirstDataRendered);
   const firstDataRenderedRef = useRef(false);
   useEffect(() => {
     if (!firstDataRenderedRef.current && displayItems.length > 0) {
       firstDataRenderedRef.current = true;
-      onFirstDataRendered?.();
+      onFirstDataRenderedRef.current?.();
     }
-  }, [displayItems.length, onFirstDataRendered]);
+  }, [displayItems.length]);
   return {
     displayItems,
     displayTotalCount,
@@ -1576,11 +1591,6 @@ function useOGridDataFetching(params) {
     refreshData: () => setRefreshCounter((prev) => prev + 1)
   };
 }
-function useLatestRef(value) {
-  const ref = useRef(value);
-  ref.current = value;
-  return ref;
-}
 var DEFAULT_PANELS = ["columns", "filters"];
 function useSideBarState(params) {
   const { config } = params;
@@ -1621,7 +1631,7 @@ var EMPTY_LOADING_OPTIONS2 = {};
 function useOGrid(props, ref) {
   const {
     columns: columnsProp,
-    getRowId,
+    getRowId: getRowIdProp,
     data,
     dataSource,
     page: controlledPage,
@@ -1636,7 +1646,7 @@ function useOGrid(props, ref) {
     onFiltersChange,
     onVisibleColumnsChange,
     columnOrder,
-    onColumnOrderChange,
+    onColumnOrderChange: onColumnOrderChangeProp,
     onColumnResized,
     onColumnPinned,
     defaultPageSize = DEFAULT_PAGE_SIZE,
@@ -1651,9 +1661,9 @@ function useOGrid(props, ref) {
     suppressHorizontalScroll,
     editable,
     cellSelection,
-    onCellValueChanged,
-    onUndo,
-    onRedo,
+    onCellValueChanged: onCellValueChangedProp,
+    onUndo: onUndoProp,
+    onRedo: onRedoProp,
     canUndo,
     canRedo,
     rowSelection = "none",
@@ -1675,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;
@@ -2855,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);
@@ -2868,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();
@@ -2889,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;
@@ -2897,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,
@@ -2942,7 +2980,7 @@ function useFillHandle(params) {
     items,
     visibleCols,
     editable,
-    onCellValueChanged,
+    onCellValueChanged: onCellValueChangedProp,
     selectionRange,
     setSelectionRange,
     setActiveCell,
@@ -2951,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();
@@ -3071,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);
@@ -3091,7 +3130,6 @@ function useFillHandle(params) {
     visibleCols,
     setSelectionRange,
     setActiveCell,
-    onCellValueChanged,
     beginBatch,
     endBatch,
     colOffsetRef,
@@ -3572,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);
@@ -3585,7 +3624,7 @@ function useDataGridEditing(params) {
         }
         newValue = result.value;
       }
-      onCellValueChanged?.({
+      onCellValueChangedRef.current?.({
         item,
         columnId,
         oldValue,
@@ -3599,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.5",
+  "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.5",
+    "@alaarab/ogrid-core": "2.1.7",
     "@tanstack/react-virtual": "^3.0.0"
   },
   "peerDependencies": {