@alaarab/ogrid-react 2.1.0 → 2.1.1

package/dist/esm/hooks/useFilterOptions.js

@@ -1,10 +1,27 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
+/** Shallow-compare two string arrays by value. */
+function fieldsEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+}
 /**
  * Load filter options for the given fields from a data source.
  *
  * Accepts `IDataSource<T>` or a plain `{ fetchFilterOptions }` object.
  */
 export function useFilterOptions(dataSource, fields) {
+    // Stabilize the fields array so inline literals (e.g. ['a','b']) don't
+    // cause infinite re-render loops via useCallback/useEffect deps.
+    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 load = useCallback(async () => {
@@ -17,10 +34,10 @@ export function useFilterOptions(dataSource, fields) {
             return;
         }
         const loading = {};
-        fields.forEach((f) => { loading[f] = true; });
+        stableFields.forEach((f) => { loading[f] = true; });
         setLoadingOptions(loading);
         const results = {};
-        await Promise.all(fields.map(async (field) => {
+        await Promise.all(stableFields.map(async (field) => {
             try {
                 results[field] = await fetcher(field);
             }
@@ -30,7 +47,7 @@ export function useFilterOptions(dataSource, fields) {
         }));
         setFilterOptions(results);
         setLoadingOptions({});
-    }, [dataSource, fields]);
+    }, [dataSource, stableFields]);
     useEffect(() => {
         load().catch(() => { });
     }, [load]);

package/dist/esm/hooks/useOGrid.js

@@ -53,7 +53,6 @@ export function useOGrid(props, ref) {
     const dataFetchingState = useOGridDataFetching({
         isServerSide, dataSource, displayData, columns,
         stableFilters: filtersState.stableFilters,
-        filters: filtersState.filters,
         sort: sortingState.sort,
         page: paginationState.page,
         pageSize: paginationState.pageSize,

package/dist/esm/hooks/useOGridDataFetching.js

@@ -5,7 +5,7 @@ import { processClientSideData } from '../utils';
  * Fires onFirstDataRendered once when items first appear.
  */
 export function useOGridDataFetching(params) {
-    const { isServerSide, dataSource, displayData, columns, stableFilters, filters, sort, page, pageSize, onError, onFirstDataRendered, } = params;
+    const { isServerSide, dataSource, displayData, columns, stableFilters, sort, page, pageSize, onError, onFirstDataRendered, } = params;
     const isClientSide = !isServerSide;
     // --- Client-side filtering & sorting ---
     const clientItemsAndTotal = useMemo(() => {
@@ -35,7 +35,7 @@ export function useOGridDataFetching(params) {
             .fetchPage({
             page, pageSize,
             sort: { field: sort.field, direction: sort.direction },
-            filters,
+            filters: stableFilters,
         })
             .then((res) => {
             if (id !== fetchIdRef.current)
@@ -54,7 +54,7 @@ export function useOGridDataFetching(params) {
             if (id === fetchIdRef.current)
                 setServerLoading(false);
         });
-    }, [isServerSide, dataSource, page, pageSize, sort.field, sort.direction, filters, onError, refreshCounter]);
+    }, [isServerSide, dataSource, page, pageSize, sort.field, sort.direction, stableFilters, onError, refreshCounter]);
     const displayItems = isClientSide && clientItemsAndTotal ? clientItemsAndTotal.items : serverItems;
     const displayTotalCount = isClientSide && clientItemsAndTotal ? clientItemsAndTotal.totalCount : serverTotalCount;
     // Fire onFirstDataRendered once when the grid first has data

package/dist/types/hooks/useOGridDataFetching.d.ts

@@ -6,7 +6,6 @@ export interface UseOGridDataFetchingParams<T> {
     displayData: T[];
     columns: ICoreColumnDef<T>[];
     stableFilters: IFilters;
-    filters: IFilters;
     sort: {
         field: string;
         direction: 'asc' | 'desc';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.0"
+    "@alaarab/ogrid-core": "2.1.1"
   },
   "peerDependencies": {
     "@tanstack/react-virtual": "^3.0.0",