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

package/components/data/pagination/hooks/usePagination.js

@@ -21,6 +21,33 @@ var isDataSourceHasPaging = function isDataSourceHasPaging(datasource) {
 var calculatePagingValues = function calculatePagingValues(dataSize, maxResults) {
   return dataSize > maxResults ? Math.ceil(dataSize / maxResults) : dataSize < 0 ? 0 : 1;
 };
+
+// Utility function to create a dummy synthetic event when no event is available
+var createDummyEvent = function createDummyEvent() {
+  var eventName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "synthetic";
+  return {
+    bubbles: false,
+    cancelable: false,
+    currentTarget: null,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: false,
+    nativeEvent: new Event(eventName),
+    target: null,
+    timeStamp: Date.now(),
+    type: eventName,
+    // Dynamic type based on the event being triggered
+    isDefaultPrevented: function isDefaultPrevented() {
+      return false;
+    },
+    isPropagationStopped: function isPropagationStopped() {
+      return false;
+    },
+    persist: function persist() {},
+    preventDefault: function preventDefault() {},
+    stopPropagation: function stopPropagation() {}
+  };
+};
 var usePagination = exports.usePagination = function usePagination(_ref) {
   var _listener$Widgets;
   var dataset = _ref.dataset,
@@ -62,15 +89,16 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
     dataState = _useState2[0],
     setDataState = _useState2[1];
 
-  // Infinite scroll state
+  // Accumulated data state - used for both Scroll and On-Demand navigation
+  // Both modes need to accumulate data as user loads more pages
   var _useState3 = (0, _react.useState)({
       accumulatedData: [],
       lastLoadedPage: 0,
-      isAccumulating: navigation === "Scroll",
+      isAccumulating: navigation === "Scroll" || navigation === "On-Demand",
       isInitialized: false
     }),
-    infiniteScrollState = _useState3[0],
-    setInfiniteScrollState = _useState3[1];
+    accumulatingState = _useState3[0],
+    setAccumulatingState = _useState3[1];
 
   // Navigation disable states - consolidated for better performance
   var _useState4 = (0, _react.useState)({
@@ -84,16 +112,18 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
     disableStates = _useState4[0],
     setDisableStates = _useState4[1];
   var isFetchingRef = (0, _react.useRef)(false);
+  var isResettingRef = (0, _react.useRef)(false); // Track if we're currently resetting accumulated data
 
-  // Refs for infinite scroll
+  // Refs for accumulated data (Scroll and On-Demand)
   var observerRef = (0, _react.useRef)(null);
   var sentinelRef = (0, _react.useRef)(null);
-  var infiniteScrollStateRef = (0, _react.useRef)(infiniteScrollState);
+  var accumulatingStateRef = (0, _react.useRef)(accumulatingState);
+  var sentinelHasLeftViewportRef = (0, _react.useRef)(true); // Track if sentinel has left viewport after View Less
 
   // Keep ref in sync with state
   (0, _react.useEffect)(function () {
-    infiniteScrollStateRef.current = infiniteScrollState;
-  }, [infiniteScrollState]);
+    accumulatingStateRef.current = accumulatingState;
+  }, [accumulatingState]);
 
   // Memoized computed values for better performance
   var isFirstPage = (0, _react.useMemo)(function () {
@@ -114,7 +144,7 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
   }, [paginationState.currentPage, paginationState.pageCount, paginationMeta]);
 
   // Navigation controls
-  var allowedNavControls = ["Basic", "Classic", "Pager", "Scroll"];
+  var allowedNavControls = ["Basic", "Classic", "Pager", "Scroll", "On-Demand"];
   var getValidNavControl = function getValidNavControl(nav) {
     return allowedNavControls.includes(nav) ? nav : "Basic";
   };
@@ -157,15 +187,15 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
         return Promise.resolve(result).then(function (response) {
           isFetchingRef.current = false;
 
-          // For scroll mode, we need to accumulate data instead of replacing
+          // For accumulating mode (Scroll/On-Demand), we need to accumulate data instead of replacing
           if (isScrollMode && response && response.data) {
             // Get the new accumulated data using ref to avoid circular dependency
-            var currentAccumulatedData = infiniteScrollStateRef.current.accumulatedData;
+            var currentAccumulatedData = accumulatingStateRef.current.accumulatedData;
 
             // Ensure unique row IDs using the existing utility
             var newDataWithIds = (0, _utils.addUniqueRowIds)(response.data);
             var newAccumulatedData = [].concat((0, _toConsumableArray2["default"])(currentAccumulatedData), (0, _toConsumableArray2["default"])(newDataWithIds));
-            setInfiniteScrollState(function (prev) {
+            setAccumulatingState(function (prev) {
               return _objectSpread(_objectSpread({}, prev), {}, {
                 accumulatedData: newAccumulatedData,
                 lastLoadedPage: page
@@ -205,12 +235,53 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
     return Promise.resolve();
   }, [datasource, isServerSidePagination, datasourceInvokeOptions]);
 
-  // Function to load more data for infinite scroll
-  var loadMoreData = (0, _react.useCallback)(function () {
-    if (navigation !== "Scroll" || !isServerSidePagination || isLastPage || isFetchingRef.current) {
+  // Function to load more data for Scroll and On-Demand navigation
+  var loadMoreData = (0, _react.useCallback)(function (event) {
+    // Support both Scroll and On-Demand navigation
+    var isAccumulatingMode = navigation === "Scroll" || navigation === "On-Demand";
+    if (!isAccumulatingMode || isLastPage || isFetchingRef.current) {
       return;
     }
-    var nextPage = infiniteScrollStateRef.current.lastLoadedPage + 1;
+
+    // For client-side pagination (non-server), just show more items
+    if (!isServerSidePagination) {
+      var currentVisible = accumulatingStateRef.current.accumulatedData.length;
+      var totalAvailable = dataState.fullData.length;
+      var nextBatchSize = paginationState.currentMaxResults;
+      var newVisibleCount = Math.min(currentVisible + nextBatchSize, totalAvailable);
+
+      // Get next batch of data
+      var nextBatch = dataState.fullData.slice(currentVisible, newVisibleCount);
+      var newAccumulatedData = [].concat((0, _toConsumableArray2["default"])(accumulatingStateRef.current.accumulatedData), (0, _toConsumableArray2["default"])(nextBatch));
+      setAccumulatingState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          accumulatedData: newAccumulatedData,
+          lastLoadedPage: prev.lastLoadedPage + 1
+        });
+      });
+
+      // Update the result to show accumulated data
+      setDataState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          result: newAccumulatedData
+        });
+      });
+
+      // Update current page
+      var _nextPage = accumulatingStateRef.current.lastLoadedPage + 1;
+      setPaginationState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          currentPage: _nextPage
+        });
+      });
+      if (onPaginationChange) {
+        onPaginationChange(event || createDummyEvent("paginationchange"), widgetInstance, _nextPage);
+      }
+      return;
+    }
+
+    // Server-side pagination
+    var nextPage = accumulatingStateRef.current.lastLoadedPage + 1;
     if (setIsLoadingMore) {
       setIsLoadingMore(true);
     }
@@ -221,7 +292,7 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
         });
       });
       if (onPaginationChange) {
-        onPaginationChange(null, widgetInstance, nextPage);
+        onPaginationChange(event || createDummyEvent("paginationchange"), widgetInstance, nextPage);
       }
       if (setIsLoadingMore) {
         setIsLoadingMore(false);
@@ -231,7 +302,115 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
         setIsLoadingMore(false);
       }
     });
-  }, [navigation, isServerSidePagination, isLastPage, setIsLoadingMore, datasourceInvoke, paginationState.currentMaxResults, onPaginationChange, widgetInstance]);
+  }, [navigation, isServerSidePagination, isLastPage, setIsLoadingMore, datasourceInvoke, paginationState.currentMaxResults, onPaginationChange, widgetInstance, dataState.fullData]);
+
+  // Function to reset accumulated data (for View Less button in On-Demand navigation)
+  var resetAccumulatedData = (0, _react.useCallback)(function (event) {
+    if (navigation === "Scroll") {
+      sentinelHasLeftViewportRef.current = false;
+    }
+
+    // Set resetting flag to prevent dataset prop from overwriting our reset
+    isResettingRef.current = true;
+
+    // Reset to initial state
+    setAccumulatingState({
+      accumulatedData: [],
+      lastLoadedPage: 0,
+      isAccumulating: navigation === "Scroll" || navigation === "On-Demand",
+      isInitialized: false
+    });
+
+    // Immediately clear the result data to trigger UI update
+    setDataState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        result: []
+      });
+    });
+
+    // Reset current page to 1
+    setPaginationState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        currentPage: 1
+      });
+    });
+
+    // Immediately trigger pagination change callback to reset table's page index
+    if (onPaginationChange) {
+      onPaginationChange(event || createDummyEvent(), widgetInstance, 1);
+    }
+
+    // For client-side, reset result to first page
+    if (!isServerSidePagination && dataState.fullData.length > 0) {
+      var firstPageData = dataState.fullData.slice(0, paginationState.currentMaxResults);
+      setDataState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          result: firstPageData
+        });
+      });
+
+      // Re-initialize with first page data
+      setTimeout(function () {
+        setAccumulatingState({
+          accumulatedData: firstPageData,
+          lastLoadedPage: 1,
+          isAccumulating: true,
+          isInitialized: true
+        });
+      }, 0);
+    }
+
+    // For server-side, refetch first page
+    if (isServerSidePagination && datasource && typeof datasource.invoke === "function") {
+      if (setIsLoadingMore) {
+        setIsLoadingMore(true);
+      }
+      var invokeOptions = {
+        page: 1
+      };
+
+      // Include additional options if provided
+      if (datasourceInvokeOptions) {
+        Object.assign(invokeOptions, datasourceInvokeOptions);
+      }
+      var result = datasource.invoke(invokeOptions);
+      Promise.resolve(result).then(function (response) {
+        if (response && response.data) {
+          var newDataWithIds = (0, _utils.addUniqueRowIds)(response.data);
+          setAccumulatingState({
+            accumulatedData: newDataWithIds,
+            lastLoadedPage: 1,
+            isAccumulating: true,
+            isInitialized: true
+          });
+          setDataState(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), {}, {
+              fullData: newDataWithIds,
+              result: newDataWithIds
+            });
+          });
+          // Clear resetting flag after successfully setting new data
+          isResettingRef.current = false;
+        }
+        if (setIsLoadingMore) {
+          setIsLoadingMore(false);
+        }
+      })["catch"](function () {
+        // Clear resetting flag on error
+        isResettingRef.current = false;
+        if (setIsLoadingMore) {
+          setIsLoadingMore(false);
+        }
+      });
+    } else {
+      // For client-side, clear resetting flag after setTimeout
+      setTimeout(function () {
+        isResettingRef.current = false;
+      }, 0);
+    }
+
+    // Note: Pagination change callback is already called above when resetting state
+  }, [navigation, isServerSidePagination, datasource, datasourceInvokeOptions, dataState.fullData, paginationState.currentMaxResults, setIsLoadingMore, onPaginationChange, widgetInstance]);
 
   // Set up intersection observer for infinite scroll
   var setupInfiniteScrollObserver = (0, _react.useCallback)(function (sentinel) {
@@ -240,15 +419,21 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
       observerRef.current.disconnect();
       observerRef.current = null;
     }
-    if (!sentinel || navigation !== "Scroll" || !infiniteScrollStateRef.current.isInitialized) {
+    if (!sentinel || navigation !== "Scroll" || !accumulatingStateRef.current.isInitialized) {
       return;
     }
 
     // Create new observer
     observerRef.current = new IntersectionObserver(function (entries) {
       var entry = entries[0];
-      // Only trigger if initialized, intersecting, not last page, and not already fetching
-      if (entry.isIntersecting && infiniteScrollStateRef.current.isInitialized && !isLastPage && !isFetchingRef.current) {
+
+      // Track sentinel visibility changes for View Less handling
+      if (!entry.isIntersecting && sentinelHasLeftViewportRef.current === false) {
+        // Sentinel left viewport - allow future loading
+        sentinelHasLeftViewportRef.current = true;
+      }
+      if (entry.isIntersecting && accumulatingStateRef.current.isInitialized && !isLastPage && !isFetchingRef.current && sentinelHasLeftViewportRef.current // Only load if sentinel has left viewport before
+      ) {
         loadMoreData();
       }
     }, {
@@ -282,7 +467,7 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
 
         // Calculate page count based on updated values
         // Use paginationMeta.totalPages if available
-        var newPageCount = (paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.totalPages) !== undefined ? paginationMeta.totalPages : updatedDataSize > updatedMaxResults ? Math.ceil(updatedDataSize / updatedMaxResults) : updatedDataSize < 0 ? 0 : 1;
+        var newPageCount = (paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.totalPages) !== undefined && (paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.totalPages) > 1 ? paginationMeta.totalPages : updatedDataSize > updatedMaxResults ? Math.ceil(updatedDataSize / updatedMaxResults) : updatedDataSize < 0 ? 0 : 1;
         return _objectSpread(_objectSpread({}, prev), {}, {
           currentPage: updatedCurrentPage,
           dataSize: updatedDataSize,
@@ -307,7 +492,16 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
   // Set non-pageable data
   var setNonPageableData = (0, _react.useCallback)(function (newVal) {
     var newDataSize, newMaxResults, currentPage, startIndex;
-    newDataSize = (0, _lodash.isArray)(newVal) ? newVal.length : (0, _lodash.isEmpty)(newVal) ? 0 : 1;
+
+    // For server-side pagination, use totalItems or paginationMeta.totalElements as dataSize
+    // This represents the total count of all records, not just the current page
+    if (isServerSidePagination) {
+      var serverTotalCount = totalItems !== null && totalItems !== void 0 ? totalItems : paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.totalElements;
+      newDataSize = serverTotalCount !== undefined && serverTotalCount >= 0 ? serverTotalCount : (0, _lodash.isArray)(newVal) ? newVal.length : (0, _lodash.isEmpty)(newVal) ? 0 : 1;
+    } else {
+      // For client-side pagination, use the array length
+      newDataSize = (0, _lodash.isArray)(newVal) ? newVal.length : (0, _lodash.isEmpty)(newVal) ? 0 : 1;
+    }
     newMaxResults = paginationState.currentMaxResults || newDataSize;
     // Don't default to 1 if currentPage exists
     currentPage = paginationState.currentPage;
@@ -319,20 +513,21 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
         result: (0, _lodash.isArray)(newVal) ? newVal.slice(startIndex, startIndex + newMaxResults) : newVal
       });
     });
-  }, [paginationState.currentPage, paginationState.currentMaxResults, disableNavigation, setDefaultPagingValues]);
+  }, [paginationState.currentPage, paginationState.currentMaxResults, disableNavigation, setDefaultPagingValues, isServerSidePagination, totalItems, paginationMeta]);
 
   // Set pagination values
   var setPagingValues = (0, _react.useCallback)(function (newVal) {
-    // For scroll mode with server-side pagination, special handling
-    if (navigation === "Scroll" && isServerSidePagination) {
+    // Check if we're in accumulating mode (Scroll or On-Demand with server-side pagination)
+    var isAccumulatingMode = (navigation === "Scroll" || navigation === "On-Demand") && isServerSidePagination;
+    if (isAccumulatingMode) {
       // Use ref to check accumulated data to avoid circular dependency
-      var currentAccumulatedData = infiniteScrollStateRef.current.accumulatedData;
+      var currentAccumulatedData = accumulatingStateRef.current.accumulatedData;
 
       // Only update on initial load (when accumulated data is empty)
       if (currentAccumulatedData.length === 0 && (0, _lodash.isArray)(newVal)) {
         // Ensure initial data has unique IDs using the existing utility
         var initialDataWithIds = (0, _utils.addUniqueRowIds)(newVal);
-        setInfiniteScrollState(function (prev) {
+        setAccumulatingState(function (prev) {
           return _objectSpread(_objectSpread({}, prev), {}, {
             accumulatedData: initialDataWithIds,
             lastLoadedPage: 1,
@@ -346,7 +541,7 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
           });
         });
       } else if (currentAccumulatedData.length > 0) {
-        // For subsequent updates in scroll mode, always use accumulated data
+        // For subsequent updates in accumulating mode, always use accumulated data
         setDataState(function (prev) {
           return _objectSpread(_objectSpread({}, prev), {}, {
             fullData: currentAccumulatedData,
@@ -354,35 +549,77 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
           });
         });
       }
-      // Always return early for scroll mode to prevent normal pagination logic
+      // Always return early for accumulating mode to prevent normal pagination logic
       return;
-    } else {
-      // Store the data in fullData. This is used for client side searching without modifying the actual dataset
+    }
+
+    // For On-Demand with client-side pagination
+    if (navigation === "On-Demand" && !isServerSidePagination) {
+      // Store the full data
       setDataState(function (prev) {
         return _objectSpread(_objectSpread({}, prev), {}, {
           fullData: (0, _lodash.isArray)(newVal) ? newVal : []
         });
       });
-      if (newVal && !(0, _lodash.isArray)(newVal)) {
-        setNonPageableData(newVal);
-      } else if (newVal) {
-        setNonPageableData(newVal);
-      } else {
+      var _currentAccumulatedData = accumulatingStateRef.current.accumulatedData;
+
+      // Initialize accumulated data with first page if empty
+      if (_currentAccumulatedData.length === 0 && (0, _lodash.isArray)(newVal) && newVal.length > 0) {
+        var firstPageData = newVal.slice(0, paginationState.currentMaxResults);
+        setAccumulatingState(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            accumulatedData: firstPageData,
+            lastLoadedPage: 1,
+            isInitialized: true
+          });
+        });
         setDataState(function (prev) {
           return _objectSpread(_objectSpread({}, prev), {}, {
-            result: newVal
+            result: firstPageData
           });
         });
-        // Don't reset page navigation when dataset is empty - just update counts
-        setPaginationState(function (prev) {
+      } else if (_currentAccumulatedData.length > 0) {
+        // Use accumulated data for result
+        setDataState(function (prev) {
           return _objectSpread(_objectSpread({}, prev), {}, {
-            pageCount: 0,
-            dataSize: 0
+            result: _currentAccumulatedData
           });
         });
       }
+
+      // Update dataSize for proper pagination calculation
+      if ((0, _lodash.isArray)(newVal)) {
+        setDefaultPagingValues(newVal.length, paginationState.currentMaxResults, 1);
+      }
+      return;
+    }
+
+    // Standard pagination logic
+    // Store the data in fullData. This is used for client side searching without modifying the actual dataset
+    setDataState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        fullData: (0, _lodash.isArray)(newVal) ? newVal : []
+      });
+    });
+    if (newVal && !(0, _lodash.isArray)(newVal)) {
+      setNonPageableData(newVal);
+    } else if (newVal) {
+      setNonPageableData(newVal);
+    } else {
+      setDataState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          result: newVal
+        });
+      });
+      // Don't reset page navigation when dataset is empty - just update counts
+      setPaginationState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          pageCount: 0,
+          dataSize: 0
+        });
+      });
     }
-  }, [setNonPageableData, navigation, isServerSidePagination]);
+  }, [setNonPageableData, navigation, isServerSidePagination, paginationState.currentMaxResults, setDefaultPagingValues]);
 
   // Validate current page
   var validateCurrentPage = (0, _react.useCallback)(function (event) {
@@ -425,7 +662,7 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
   }, [paginationState, dataState.fullData, disableNavigation]);
 
   // Shared function for common pagination logic
-  var performPageNavigation = (0, _react.useCallback)(function (newPage, previousPage) {
+  var performPageNavigation = (0, _react.useCallback)(function (newPage, previousPage, event) {
     // Set loading state if available
     if (setIsLoadingMore) {
       setIsLoadingMore(true);
@@ -443,7 +680,7 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
       datasourceInvoke(newPage).then(function () {
         // Only trigger callbacks on successful data fetch
         if (onPaginationChange) {
-          onPaginationChange(null, widgetInstance, newPage);
+          onPaginationChange(event || createDummyEvent("paginationchange"), widgetInstance, newPage);
         }
 
         // Call onSetRecord with the new page data
@@ -451,7 +688,13 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
           var firstRow = (newPage - 1) * paginationState.currentMaxResults;
           var startIndex = firstRow;
           var data = (0, _lodash.isArray)(dataState.fullData) ? dataState.fullData.slice(startIndex, startIndex + paginationState.currentMaxResults) : dataState.fullData;
-          onSetRecord(null, widgetInstance, newPage, data);
+          var pageInfo = {
+            currentPage: newPage,
+            size: paginationState.currentMaxResults,
+            totalElements: (paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.totalElements) || dataState.fullData.length,
+            totalPages: paginationState.pageCount
+          };
+          onSetRecord(event || createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
         }
 
         // Clear loading state immediately for better UX
@@ -475,7 +718,7 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
       // Client-side pagination - no API call needed
       // Just trigger the callbacks directly
       if (onPaginationChange) {
-        onPaginationChange(null, widgetInstance, newPage);
+        onPaginationChange(event || createDummyEvent("paginationchange"), widgetInstance, newPage);
       }
 
       // Call onSetRecord with the new page data
@@ -483,7 +726,13 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
         var firstRow = (newPage - 1) * paginationState.currentMaxResults;
         var startIndex = firstRow;
         var data = (0, _lodash.isArray)(dataState.fullData) ? dataState.fullData.slice(startIndex, startIndex + paginationState.currentMaxResults) : dataState.fullData;
-        onSetRecord(null, widgetInstance, newPage, data);
+        var pageInfo = {
+          currentPage: newPage,
+          size: paginationState.currentMaxResults,
+          totalElements: (paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.totalElements) || dataState.fullData.length,
+          totalPages: paginationState.pageCount
+        };
+        onSetRecord(event || createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
       }
 
       // Clear loading state immediately - no delay needed for client-side pagination
@@ -491,7 +740,7 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
         setIsLoadingMore(false);
       }
     }
-  }, [isServerSidePagination, datasourceInvoke, onPaginationChange, onSetRecord, widgetInstance, paginationState, dataState.fullData, setIsLoadingMore]);
+  }, [isServerSidePagination, datasourceInvoke, onPaginationChange, onSetRecord, widgetInstance, paginationState, dataState.fullData, setIsLoadingMore, paginationMeta]);
 
   // Navigate to page
   var navigatePage = (0, _react.useCallback)(function (index, event) {
@@ -542,7 +791,7 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
 
     // Call handlers only when page actually changes
     if (newPage !== currentPage) {
-      performPageNavigation(newPage, currentPage);
+      performPageNavigation(newPage, currentPage, event);
     }
   }, [paginationState, isFirstPage, isLastPage, validateCurrentPage, goToPage, performPageNavigation]);
 
@@ -552,7 +801,7 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
     if (page !== paginationState.currentPage) {
       // Save current page to restore in case of error
       var previousPage = paginationState.currentPage;
-      performPageNavigation(page, previousPage);
+      performPageNavigation(page, previousPage, event);
     }
   }, [paginationState.currentPage, performPageNavigation]);
 
@@ -577,15 +826,22 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
     // Call onSetRecord with the current page data
     if (onSetRecord) {
       var currentPage = paginationState.currentPage,
-        currentMaxResults = paginationState.currentMaxResults;
+        currentMaxResults = paginationState.currentMaxResults,
+        pageCount = paginationState.pageCount;
       var fullData = dataState.fullData;
       var firstRow = (currentPage - 1) * currentMaxResults;
       var startIndex = firstRow;
       var data = (0, _lodash.isArray)(fullData) ? fullData.slice(startIndex, startIndex + currentMaxResults) : fullData;
-      onSetRecord(null, widgetInstance, currentPage, data);
+      var pageInfo = {
+        currentPage: currentPage,
+        size: currentMaxResults,
+        totalElements: (paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.totalElements) || fullData.length,
+        totalPages: pageCount
+      };
+      onSetRecord(event, widgetInstance, data, pageInfo);
     }
     goToPage();
-  }, [goToPage, validateCurrentPage, onSetRecord, paginationState, dataState.fullData, widgetInstance]);
+  }, [goToPage, validateCurrentPage, onSetRecord, paginationState, dataState.fullData, widgetInstance, paginationMeta]);
 
   // Handle key down
   var onKeyDown = (0, _react.useCallback)(function (event) {
@@ -638,13 +894,20 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
       datasourceInvoke(1, pageSize).then(function () {
         // Trigger paginationchange event
         if (onPaginationChange) {
-          onPaginationChange(null, widgetInstance, 1);
+          onPaginationChange(event || createDummyEvent("paginationchange"), widgetInstance, 1);
         }
 
         // Call onSetRecord with the new page data
         if (onSetRecord) {
           var data = (0, _lodash.isArray)(dataState.fullData) ? dataState.fullData.slice(0, pageSize) : dataState.fullData;
-          onSetRecord(null, widgetInstance, 1, data);
+          var newPageCount = calculatePagingValues(dataState.fullData.length, pageSize);
+          var pageInfo = {
+            currentPage: 1,
+            size: pageSize,
+            totalElements: (paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.totalElements) || dataState.fullData.length,
+            totalPages: newPageCount
+          };
+          onSetRecord(event || createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
         }
 
         // Clear loading state
@@ -668,15 +931,15 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
         setIsLoadingMore(false);
       }
     }
-  }, [pageSizeChangeHandler, navigatePage, datasource, paginationState, isServerSidePagination, datasourceInvoke, onPaginationChange, onSetRecord, widgetInstance, dataState.fullData, setIsLoadingMore]);
+  }, [pageSizeChangeHandler, navigatePage, datasource, paginationState, isServerSidePagination, datasourceInvoke, onPaginationChange, onSetRecord, widgetInstance, dataState.fullData, setIsLoadingMore, paginationMeta]);
 
   // Effect for navigation controls
   (0, _react.useEffect)(function () {
     setNavcontrols(getValidNavControl(navigation));
 
-    // Reset infinite scroll state when navigation changes
-    if (navigation === "Scroll") {
-      setInfiniteScrollState({
+    // Reset accumulated data state when navigation changes to Scroll or On-Demand
+    if (navigation === "Scroll" || navigation === "On-Demand") {
+      setAccumulatingState({
         accumulatedData: [],
         lastLoadedPage: 0,
         isAccumulating: true,
@@ -688,9 +951,25 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
   // for dataset changes
   (0, _react.useEffect)(function () {
     if (dataset !== undefined) {
-      setPagingValues(dataset);
+      // Check if we're in accumulating mode (Scroll or On-Demand with server-side pagination)
+      var isAccumulatingMode = (navigation === "Scroll" || navigation === "On-Demand") && isServerSidePagination;
+
+      // For accumulating mode, only process dataset updates if accumulated data is empty
+      // This prevents overwriting accumulated data when datasource updates with new page data
+      // Also skip if we're currently resetting (to prevent old dataset from overwriting reset)
+      if (isAccumulatingMode) {
+        var currentAccumulatedData = accumulatingStateRef.current.accumulatedData;
+        // Only process dataset if accumulated data is empty (initial load or after reset)
+        // AND we're not currently in the middle of a reset operation
+        if (currentAccumulatedData.length === 0 && !isResettingRef.current) {
+          setPagingValues(dataset);
+        }
+      } else {
+        // For non-accumulating modes, always process dataset updates
+        setPagingValues(dataset);
+      }
     }
-  }, [dataset, setPagingValues]);
+  }, [dataset, setPagingValues, navigation, isServerSidePagination]);
 
   // For server-side pagination, update dataSize and pageCount based on metadata
   (0, _react.useEffect)(function () {
@@ -741,10 +1020,10 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
 
   // Re-setup observer when initialization state changes
   (0, _react.useEffect)(function () {
-    if (infiniteScrollState.isInitialized && sentinelRef.current && navigation === "Scroll") {
+    if (accumulatingState.isInitialized && sentinelRef.current && navigation === "Scroll") {
       setupInfiniteScrollObserver(sentinelRef.current);
     }
-  }, [infiniteScrollState.isInitialized, navigation, setupInfiniteScrollObserver]);
+  }, [accumulatingState.isInitialized, navigation, setupInfiniteScrollObserver]);
 
   // Cleanup observer on unmount
   (0, _react.useEffect)(function () {
@@ -790,7 +1069,11 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
     // Infinite scroll specific
     setupInfiniteScrollObserver: setupInfiniteScrollObserver,
     sentinelRef: sentinelRef,
-    isLoadingMore: isFetchingRef.current && navigation === "Scroll" && infiniteScrollStateRef.current.lastLoadedPage > 1,
-    hasMoreData: !isLastPage && navigation === "Scroll"
+    isLoadingMore: isFetchingRef.current && (navigation === "Scroll" || navigation === "On-Demand") && accumulatingStateRef.current.lastLoadedPage > 0,
+    hasMoreData: !isLastPage && (navigation === "Scroll" || navigation === "On-Demand"),
+    // On-Demand specific
+    loadMoreData: loadMoreData,
+    resetAccumulatedData: resetAccumulatedData,
+    accumulatedDataCount: accumulatingStateRef.current.accumulatedData.length
   };
 };