@alaarab/ogrid-react 2.1.4 → 2.1.6

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;

package/package.json

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