@wavemaker/react-runtime 11.14.2-rc.6311 → 11.15.0-1.246

package/components/data/table/hooks/useRowSelection.js

@@ -9,6 +9,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = require("react");
 var _selectionUtils = require("../utils/selectionUtils");
 var _tableHelpers = require("../utils/table-helpers");
+var _utils = require("../utils");
 var useRowSelection = exports.useRowSelection = function useRowSelection(_ref) {
   var _ref$radioselect = _ref.radioselect,
     radioselect = _ref$radioselect === void 0 ? false : _ref$radioselect,
@@ -21,21 +22,33 @@ var useRowSelection = exports.useRowSelection = function useRowSelection(_ref) {
     name = _ref.name,
     statehandler = _ref.statehandler,
     initialActualPageSize = _ref.initialActualPageSize,
-    getTableCurrentState = _ref.getTableState;
+    getTableCurrentState = _ref.getTableState,
+    onRowselect = _ref.onRowselect,
+    onRowdeselect = _ref.onRowdeselect,
+    listener = _ref.listener,
+    _ref$navigation = _ref.navigation,
+    navigation = _ref$navigation === void 0 ? "Basic" : _ref$navigation;
   // Keep a ref to always have the latest dataset
   var datasetRef = (0, _react.useRef)(internalDataset);
   (0, _react.useEffect)(function () {
     datasetRef.current = internalDataset;
   }, [internalDataset]);
 
+  // Track if initial first row selection has been done (for gridfirstrowselect)
+  var initialSelectionDoneRef = (0, _react.useRef)(false);
+
   // State only for forcing updates when needed
   var _useState = (0, _react.useState)({}),
+    updateTrigger = _useState[0],
     forceUpdate = _useState[1];
 
   // Priority rule: If both radioselect and multiselect are true, multiselect takes precedence
   var useMultiSelect = multiselect;
   var useRadioSelect = radioselect && !multiselect;
 
+  // Determine if any selection mode is active
+  var hasSelectionMode = useRadioSelect || useMultiSelect;
+
   // Helper function to save state immediately
   var saveStateImmediate = (0, _react.useCallback)(function () {
     if (!statehandler || !getTableCurrentState) {
@@ -45,9 +58,8 @@ var useRowSelection = exports.useRowSelection = function useRowSelection(_ref) {
       currentPage = _getTableCurrentState.currentPage,
       currentPageSize = _getTableCurrentState.currentPageSize;
 
-    // Get current selections
-    // If not multiselect, treat as radio select (single selection)
-    var selectedIds = useMultiSelect ? _selectionUtils.selectionStateHelpers.getMultiSelection(cellState) : _selectionUtils.selectionStateHelpers.getRadioSelection(cellState) ? [_selectionUtils.selectionStateHelpers.getRadioSelection(cellState)] : [];
+    // Get current selections from the unified array
+    var selectedIds = _selectionUtils.selectionStateHelpers.getSelection(cellState);
 
     // Find selected indices in current dataset
     var selectedIndices = [];
@@ -86,12 +98,10 @@ var useRowSelection = exports.useRowSelection = function useRowSelection(_ref) {
       // Get existing state
       var existingState = (0, _tableHelpers.getTableState)(name, statehandler);
 
-      // For radio select or default mode (when neither multi nor radio is explicitly enabled),
-      // don't merge - just replace with current selection
-      if (useRadioSelect || !useMultiSelect) {
-        // Radio select or default mode should only have one item selected at a time
+      // For radio select, don't merge - just replace with current selection
+      if (useRadioSelect) {
         stateToSave.selectedItem = selectedItemsWithPage;
-      } else {
+      } else if (useMultiSelect) {
         // For multi-select, merge selected items from different pages
         if (existingState && existingState.selectedItem) {
           var otherPageSelections = existingState.selectedItem.filter(function (item) {
@@ -114,92 +124,276 @@ var useRowSelection = exports.useRowSelection = function useRowSelection(_ref) {
     }
   }, [statehandler, getTableCurrentState, name, useMultiSelect, useRadioSelect, cellState, internalDataset, initialActualPageSize]);
 
-  // Handle radio selection changes
+  // Helper to get widget reference
+  var getWidgetRef = (0, _react.useCallback)(function () {
+    var _listener$Widgets;
+    return listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name];
+  }, [name]);
+
+  // Helper to trigger selection callbacks
+  var triggerSelectionCallback = (0, _react.useCallback)(function (event, rowData, callback) {
+    if (callback && rowData) {
+      var cleanedRow = (0, _utils.cleanRowData)([rowData])[0];
+      callback(event, getWidgetRef(), cleanedRow);
+    }
+  }, [getWidgetRef]);
+
+  // Handle selection for radio mode (replaces previous selection)
   var handleRadioSelection = (0, _react.useCallback)(function (rowId, rowData) {
-    _selectionUtils.selectionStateHelpers.setRadioSelection(cellState, rowId);
+    // Get the currently selected row (if any) before changing selection
+    var previousSelection = _selectionUtils.selectionStateHelpers.getSelection(cellState);
+    var previousRowId = previousSelection.length > 0 ? previousSelection[0] : null;
+
+    // Find the previously selected row data if it exists and is different
+    var previousRowData = null;
+    if (previousRowId && previousRowId !== rowId && onRowdeselect) {
+      previousRowData = internalDataset.find(function (row) {
+        return row._wmTableRowId === previousRowId || row.id === previousRowId;
+      });
+    }
+
+    // Set the new selection
+    _selectionUtils.selectionStateHelpers.setSelection(cellState, rowId);
     forceUpdate({});
-    saveStateImmediate(); // Save state immediately
-  }, [cellState, saveStateImmediate]);
+    saveStateImmediate();
 
-  // Handle multiselect checkbox changes
+    // Trigger callbacks in order: deselect previous, then select new
+    if (previousRowData) {
+      triggerSelectionCallback(null, previousRowData, onRowdeselect);
+    }
+    triggerSelectionCallback(null, rowData, onRowselect);
+  }, [cellState, saveStateImmediate, onRowselect, onRowdeselect, internalDataset, triggerSelectionCallback]);
+
+  // Handle selection for multiselect mode (add/remove from selection)
   var handleMultiSelection = (0, _react.useCallback)(function (rowId, rowData, isSelected) {
     if (isSelected) {
-      _selectionUtils.selectionStateHelpers.addToMultiSelection(cellState, rowId);
+      _selectionUtils.selectionStateHelpers.addToSelection(cellState, rowId);
     } else {
-      _selectionUtils.selectionStateHelpers.removeFromMultiSelection(cellState, rowId);
+      _selectionUtils.selectionStateHelpers.removeFromSelection(cellState, rowId);
     }
     forceUpdate({});
-    saveStateImmediate(); // Save state immediately
-  }, [cellState, saveStateImmediate]);
+    saveStateImmediate();
+
+    // Trigger appropriate callback
+    triggerSelectionCallback(null, rowData, isSelected ? onRowselect : onRowdeselect);
+  }, [cellState, saveStateImmediate, onRowselect, onRowdeselect, triggerSelectionCallback]);
 
   // Toggle all rows selection for multiselect
   var handleSelectAll = (0, _react.useCallback)(function (isSelected) {
     if (isSelected) {
       // Use ref to ensure we always have the latest dataset
       var allRowIds = (0, _selectionUtils.getRowIdsFromDataset)(datasetRef.current);
-      _selectionUtils.selectionStateHelpers.setAllMultiSelection(cellState, allRowIds);
+      _selectionUtils.selectionStateHelpers.setAllSelection(cellState, allRowIds);
     } else {
-      _selectionUtils.selectionStateHelpers.clearMultiSelection(cellState);
+      _selectionUtils.selectionStateHelpers.clearSelection(cellState);
     }
     forceUpdate({});
-    saveStateImmediate(); // Save state immediately
+    saveStateImmediate();
   }, [cellState, saveStateImmediate]);
 
-  // Handle row selection on click
+  // Handle row selection on click - unified handler
   var handleRowSelectionClick = (0, _react.useCallback)(function (event, rowId, rowData) {
     // If clicking on an interactive element, don't handle row selection
     if ((0, _selectionUtils.isInteractiveElement)(event)) {
       return false;
     }
 
-    // Handle multiselect if enabled
+    // Handle based on selection mode
     if (useMultiSelect) {
-      _selectionUtils.selectionStateHelpers.toggleMultiSelection(cellState, rowId);
-      saveStateImmediate(); // Save state immediately
+      // Check if row is currently selected and toggle
+      var isCurrentlySelected = _selectionUtils.selectionStateHelpers.isRowSelected(cellState, rowId);
+      var willBeSelected = !isCurrentlySelected;
+      _selectionUtils.selectionStateHelpers.toggleSelection(cellState, rowId);
+      forceUpdate({});
+      saveStateImmediate();
+
+      // Trigger appropriate callback based on new selection state
+      triggerSelectionCallback(event, rowData, willBeSelected ? onRowselect : onRowdeselect);
       return true;
-    }
-    // Handle radio selection if enabled (and multiselect is not)
-    else {
+    } else {
+      // Replace selection for radio select (or default mode)
       handleRadioSelection(rowId, rowData);
-      // No need to call saveStateImmediate here as handleRadioSelection already does it
       return true;
     }
-  }, [useMultiSelect, useRadioSelect, handleRadioSelection, cellState, saveStateImmediate]);
+  }, [useMultiSelect, handleRadioSelection, cellState, saveStateImmediate, triggerSelectionCallback, onRowselect, onRowdeselect]);
 
-  // First row selection logic
+  // First row selection logic - only runs once on initial render
   (0, _react.useEffect)(function () {
+    // Skip if initial selection has already been done
+    if (initialSelectionDoneRef.current) {
+      return;
+    }
+
     // Only proceed if gridfirstrowselect is true and we have data
     if (gridfirstrowselect && internalDataset.length > 0) {
       var firstRowData = internalDataset[0];
       var firstRowId = firstRowData._wmTableRowId || String(firstRowData.id) || String(0);
-      if (useMultiSelect) {
-        // For multiselect, only add to selection if no rows are currently selected
-        var selectedIds = _selectionUtils.selectionStateHelpers.getMultiSelection(cellState);
-        if (selectedIds.length === 0) {
-          _selectionUtils.selectionStateHelpers.addToMultiSelection(cellState, firstRowId);
+
+      // Check if any row is currently selected
+      var currentSelection = _selectionUtils.selectionStateHelpers.getSelection(cellState);
+      if (currentSelection.length === 0) {
+        // No selection - select the first row
+        if (useMultiSelect) {
+          _selectionUtils.selectionStateHelpers.addToSelection(cellState, firstRowId);
+        } else {
+          _selectionUtils.selectionStateHelpers.setSelection(cellState, firstRowId);
         }
-      } else {
-        // For radio select or default mode (when neither is explicitly enabled),
-        // only select the first row if no row is currently selected
-        // or if the currently selected row no longer exists in the dataset
-        var currentSelectedId = _selectionUtils.selectionStateHelpers.getRadioSelection(cellState);
-        if (!currentSelectedId || !(0, _selectionUtils.rowExistsInDataset)(currentSelectedId, internalDataset)) {
-          handleRadioSelection(firstRowId, firstRowData);
+        forceUpdate({});
+        initialSelectionDoneRef.current = true;
+      } else if (!useMultiSelect) {
+        // For radio select, check if the selected row still exists
+        var selectedId = currentSelection[0];
+        if (!(0, _selectionUtils.rowExistsInDataset)(selectedId, internalDataset)) {
+          _selectionUtils.selectionStateHelpers.setSelection(cellState, firstRowId);
+          forceUpdate({});
+          initialSelectionDoneRef.current = true;
         }
       }
     }
-  }, [gridfirstrowselect, internalDataset, useMultiSelect, useRadioSelect, handleRadioSelection, cellState]);
+  }, [gridfirstrowselect, internalDataset, useMultiSelect, cellState]);
+
+  // Page change selection logic - runs when page changes
+  (0, _react.useEffect)(function () {
+    var _savedState$selectedI;
+    // Only proceed if gridfirstrowselect is true and we have data
+    if (!gridfirstrowselect || internalDataset.length === 0 || !initialSelectionDoneRef.current) {
+      return;
+    }
+
+    // Get current page number
+    var currentPage = (getTableCurrentState === null || getTableCurrentState === void 0 ? void 0 : getTableCurrentState().currentPage) || 1;
+
+    // Check if there are already selected items on the current page
+    var savedState = (0, _tableHelpers.getTableState)(name, statehandler);
+    var selectedIdsInCurrentPage = (savedState === null || savedState === void 0 || (_savedState$selectedI = savedState.selectedItem) === null || _savedState$selectedI === void 0 ? void 0 : _savedState$selectedI.filter(function (item) {
+      return item.page === currentPage;
+    }).map(function (item) {
+      return item.index;
+    })) || [];
+    if (selectedIdsInCurrentPage.length > 0) {
+      return;
+    }
+
+    // Check if there's a selection for this page in current dataset
+    var currentSelection = _selectionUtils.selectionStateHelpers.getSelection(cellState);
+    var hasSelectionInCurrentPage = currentSelection.some(function (selectedId) {
+      return (0, _selectionUtils.rowExistsInDataset)(selectedId, internalDataset);
+    });
+
+    // Select first row if no selection exists on this page
+    if (!hasSelectionInCurrentPage) {
+      var firstRowData = internalDataset[0];
+      var firstRowId = firstRowData._wmTableRowId || String(firstRowData.id) || String(0);
+      if (useMultiSelect) {
+        _selectionUtils.selectionStateHelpers.addToSelection(cellState, firstRowId);
+      } else {
+        _selectionUtils.selectionStateHelpers.setSelection(cellState, firstRowId);
+      }
+      forceUpdate({});
+
+      // Trigger onRowselect callback for the first row
+      if (onRowselect) {
+        triggerSelectionCallback(null, firstRowData, onRowselect);
+      }
+    }
+  }, [gridfirstrowselect, internalDataset, useMultiSelect, cellState, getTableCurrentState, name, statehandler, onRowselect, triggerSelectionCallback]);
 
   // Check if a row is selected - memoized
   var isRowSelected = (0, _react.useCallback)(function (rowId) {
-    return _selectionUtils.selectionStateHelpers.isRowSelected(cellState, rowId, useMultiSelect, useRadioSelect);
-  }, [useMultiSelect, useRadioSelect, cellState]);
+    return _selectionUtils.selectionStateHelpers.isRowSelected(cellState, rowId);
+  }, [cellState]);
+
+  // Get selected row IDs - unified array that works for both modes
+  // For radio select: contains at most 1 item
+  // For multiselect: can contain multiple items
+  // Always track selections regardless of selection mode for state persistence purposes
+  // (internally treat as radioselect if no mode is specified)
+  var selectedRowIds = (0, _react.useMemo)(function () {
+    return _selectionUtils.selectionStateHelpers.getSelection(cellState);
+  }, [cellState, updateTrigger]);
+
+  // Restore selections when page changes (after initial restoration)
+  (0, _react.useEffect)(function () {
+    // Skip if no state handler or unsupported navigation
+    if (!statehandler || _utils.UNSUPPORTED_STATE_PERSISTENCE_TYPES.includes(navigation)) {
+      return;
+    }
+
+    // Skip if not yet initialized (wait for initial selection logic to complete)
+    if (!initialSelectionDoneRef.current) {
+      return;
+    }
+
+    // Get current page
+    var currentPage = (getTableCurrentState === null || getTableCurrentState === void 0 ? void 0 : getTableCurrentState().currentPage) || 1;
 
-  // Get selected values without forcing re-renders
-  var selectedRowId = useRadioSelect ? _selectionUtils.selectionStateHelpers.getRadioSelection(cellState) : null;
-  var selectedRowIds = useMultiSelect ? _selectionUtils.selectionStateHelpers.getMultiSelection(cellState) : [];
+    // Get saved state
+    var savedState = (0, _tableHelpers.getTableState)(name, statehandler);
+    if (!savedState || !savedState.selectedItem || savedState.selectedItem.length === 0) {
+      return;
+    }
+
+    // Check if there's an active filter - don't restore if filtering
+    var hasActiveFilter = savedState.search && savedState.search.length > 0;
+    if (hasActiveFilter) {
+      return;
+    }
+
+    // Get selections for current page from saved state
+    var currentPageSelections = savedState.selectedItem.filter(function (item) {
+      return item.page === currentPage;
+    }).map(function (item) {
+      return item.index;
+    });
+
+    // If there are selections for this page, restore them
+    if (currentPageSelections.length > 0 && internalDataset.length > 0) {
+      // Check if these selections are already applied
+      var currentSelection = _selectionUtils.selectionStateHelpers.getSelection(cellState);
+
+      // Build expected row IDs from indices
+      var expectedRowIds = [];
+      currentPageSelections.forEach(function (index) {
+        if (index >= 0 && index < internalDataset.length) {
+          var row = internalDataset[index];
+          if (row && row._wmTableRowId) {
+            expectedRowIds.push(row._wmTableRowId);
+          }
+        }
+      });
+
+      // Check if current selection matches expected
+      var isAlreadyRestored = expectedRowIds.length === currentSelection.length && expectedRowIds.every(function (id) {
+        return currentSelection.includes(id);
+      });
+      if (!isAlreadyRestored && expectedRowIds.length > 0) {
+        // Apply restored selections
+        if (useMultiSelect) {
+          // For multiselect, clear and add all restored items
+          _selectionUtils.selectionStateHelpers.clearSelection(cellState);
+          currentPageSelections.forEach(function (index) {
+            if (index >= 0 && index < internalDataset.length) {
+              var row = internalDataset[index];
+              if (row && row._wmTableRowId) {
+                _selectionUtils.selectionStateHelpers.addToSelection(cellState, row._wmTableRowId);
+              }
+            }
+          });
+        } else {
+          // For radio select, only restore the first selection
+          var firstIndex = currentPageSelections[0];
+          if (firstIndex >= 0 && firstIndex < internalDataset.length) {
+            var row = internalDataset[firstIndex];
+            if (row && row._wmTableRowId) {
+              _selectionUtils.selectionStateHelpers.setSelection(cellState, row._wmTableRowId);
+            }
+          }
+        }
+        forceUpdate({});
+      }
+    }
+  }, [getTableCurrentState, name, statehandler, navigation, internalDataset, cellState, useMultiSelect]);
   return {
-    selectedRowId: selectedRowId,
     selectedRowIds: selectedRowIds,
     useMultiSelect: useMultiSelect,
     useRadioSelect: useRadioSelect,

package/components/data/table/hooks/useServerSideSorting.js

@@ -10,6 +10,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = require("react");
 var _crudHandlers = require("../utils/crud-handlers");
 var _utils = require("../utils");
+var _useDebounce = require("@wavemaker/react-runtime/hooks/useDebounce");
 /**
  * Hook to handle server-side sorting for table data
  */
@@ -21,14 +22,16 @@ var useServerSideSorting = exports.useServerSideSorting = function useServerSide
     isServerSidePagination = _ref.isServerSidePagination,
     pageIndex = _ref.pageIndex,
     onError = _ref.onError,
+    onBeforefilter = _ref.onBeforefilter,
     filterFields = _ref.filterFields,
     logicalOp = _ref.logicalOp,
-    setLoading = _ref.setLoading;
+    setLoading = _ref.setLoading,
+    listener = _ref.listener,
+    name = _ref.name;
   var prevSortingRef = (0, _react.useRef)(sorting);
   var prevPageRef = (0, _react.useRef)(pageIndex);
   var prevFilterRef = (0, _react.useRef)("");
   var isMountedRef = (0, _react.useRef)(false);
-  var isFetchingRef = (0, _react.useRef)(false);
 
   // Determine if we should use server-side sorting
   var isServerSideSorting = !!(datasource && isServerSidePagination);
@@ -46,69 +49,70 @@ var useServerSideSorting = exports.useServerSideSorting = function useServerSide
   }, []);
 
   // Fetch data with sorting
-  var fetchSortedData = (0, _react.useCallback)(/*#__PURE__*/function () {
+  var fetchSortedDataImpl = (0, _react.useCallback)(/*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(forcePage) {
-      var orderBy, currentPage, response, responseData, dataWithIds;
+      var orderBy, currentPage, response, responseData, dataWithIds, _listener$Widgets, widget;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            if (!(!datasource || !isServerSideSorting || isFetchingRef.current)) {
+            if (!(!datasource || !isServerSideSorting)) {
               _context.next = 2;
               break;
             }
             return _context.abrupt("return");
           case 2:
-            // Prevent duplicate fetches
-            isFetchingRef.current = true;
             setLoading(true);
-            _context.prev = 4;
+            _context.prev = 3;
             orderBy = convertSortingToOrderBy(sorting); // Use forcePage if provided (for sorting changes), otherwise use current page
             currentPage = forcePage !== undefined ? forcePage : pageIndex + 1; // Convert 0-based to 1-based
-            _context.next = 9;
+            _context.next = 8;
             return (0, _crudHandlers.refreshDataSource)(datasource, {
               orderBy: orderBy,
               page: currentPage || 1,
               filterFields: filterFields || {},
               condition: logicalOp || ""
             });
-          case 9:
+          case 8:
             response = _context.sent;
-            if (response) {
-              responseData = []; // Handle different response formats
-              if (response.data) {
-                responseData = response.data;
-              }
-              // Add unique row IDs to the server response data
-              dataWithIds = (0, _utils.addUniqueRowIds)(responseData);
-              setInternalDataset(dataWithIds);
+            // Handle response data - always update dataset even if empty
+            responseData = []; // Handle different response formats
+            if (response && response.data) {
+              responseData = Array.isArray(response.data) ? response.data : [];
             }
-            _context.next = 18;
+
+            // Add unique row IDs to the server response data
+            dataWithIds = (0, _utils.addUniqueRowIds)(responseData);
+            setInternalDataset(dataWithIds);
+            _context.next = 20;
             break;
-          case 13:
-            _context.prev = 13;
-            _context.t0 = _context["catch"](4);
+          case 15:
+            _context.prev = 15;
+            _context.t0 = _context["catch"](3);
             console.error("Error fetching sorted data:", _context.t0);
             if (showToast) {
               showToast("Failed to sort data", "Error");
             }
             if (onError) {
-              onError("sort", _context.t0);
+              widget = name ? listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name] : undefined;
+              onError(null, widget, _context.t0, "sort");
             }
-          case 18:
-            _context.prev = 18;
-            isFetchingRef.current = false;
+          case 20:
+            _context.prev = 20;
             setLoading(false);
-            return _context.finish(18);
-          case 22:
+            return _context.finish(20);
+          case 23:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[4, 13, 18, 22]]);
+      }, _callee, null, [[3, 15, 20, 23]]);
     }));
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [datasource, isServerSideSorting, sorting, pageIndex, convertSortingToOrderBy, setInternalDataset, showToast, onError, filterFields, logicalOp]);
+  }(), [datasource, isServerSideSorting, sorting, pageIndex, convertSortingToOrderBy, setInternalDataset, showToast, onError, filterFields, logicalOp, setLoading, listener, name]);
+
+  // Debounced version to handle rapid successive calls
+  var fetchSortedData = (0, _useDebounce.useDebounceCallback)(fetchSortedDataImpl, 100);
 
   // Combined effect to handle sorting, pagination, and filter changes
   (0, _react.useEffect)(function () {
@@ -142,15 +146,55 @@ var useServerSideSorting = exports.useServerSideSorting = function useServerSide
 
     // Only fetch if something actually changed
     if (sortingChanged || filterChanged) {
-      // Update refs before fetching to prevent duplicate calls
-      prevSortingRef.current = sorting;
-      prevPageRef.current = pageIndex;
-      prevFilterRef.current = filterString;
+      // If filter changed, call onBeforefilter callback
+      if (filterChanged && onBeforefilter) {
+        var handleFilterChange = /*#__PURE__*/function () {
+          var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+            var _listener$Widgets2;
+            var widget, result;
+            return _regenerator["default"].wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
+                case 0:
+                  widget = name ? listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name] : undefined;
+                  _context2.next = 3;
+                  return onBeforefilter(widget, filterFields);
+                case 3:
+                  result = _context2.sent;
+                  if (!(result === false)) {
+                    _context2.next = 6;
+                    break;
+                  }
+                  return _context2.abrupt("return");
+                case 6:
+                  // Update refs before fetching to prevent duplicate calls
+                  prevSortingRef.current = sorting;
+                  prevPageRef.current = pageIndex;
+                  prevFilterRef.current = filterString;
+
+                  // When sorting or filter changes, fetch from page 1
+                  fetchSortedData(1);
+                case 10:
+                case "end":
+                  return _context2.stop();
+              }
+            }, _callee2);
+          }));
+          return function handleFilterChange() {
+            return _ref3.apply(this, arguments);
+          };
+        }();
+        handleFilterChange();
+      } else {
+        // Update refs before fetching to prevent duplicate calls
+        prevSortingRef.current = sorting;
+        prevPageRef.current = pageIndex;
+        prevFilterRef.current = filterString;
 
-      // When sorting or filter changes, fetch from page 1
-      fetchSortedData(1);
+        // When sorting or filter changes, fetch from page 1
+        fetchSortedData(1);
+      }
     }
-  }, [sorting, pageIndex, filterFields, logicalOp, isServerSideSorting, fetchSortedData]);
+  }, [sorting, pageIndex, filterFields, logicalOp, isServerSideSorting, fetchSortedData, onBeforefilter, listener, name]);
 
   // Custom sorting change handler
   var handleSortingChange = (0, _react.useCallback)(function (updaterOrValue) {