@wavemaker-ai/react-runtime 1.0.0-rc.309

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

@@ -0,0 +1,1095 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePagination = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _lodash = require("lodash");
+var _utils = require("../../table/utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Utility function to check if the datasource has paging capability
+var isDataSourceHasPaging = function isDataSourceHasPaging(datasource) {
+  return datasource && typeof datasource.execute === "function" && datasource.execute("IS_PAGEABLE");
+};
+
+// Utility function to calculate paging values
+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,
+    _ref$maxResults = _ref.maxResults,
+    maxResults = _ref$maxResults === void 0 ? 10 : _ref$maxResults,
+    initialPage = _ref.currentPage,
+    navigation = _ref.navigation,
+    name = _ref.name,
+    listener = _ref.listener,
+    onPaginationChange = _ref.onPaginationChange,
+    onSetRecord = _ref.onSetRecord,
+    onPageSizeChange = _ref.onPageSizeChange,
+    paginationMeta = _ref.paginationMeta,
+    totalItems = _ref.totalItems,
+    datasource = _ref.datasource,
+    setIsLoadingMore = _ref.setIsLoadingMore,
+    _ref$isServerSidePagi = _ref.isServerSidePagination,
+    isServerSidePagination = _ref$isServerSidePagi === void 0 ? false : _ref$isServerSidePagi,
+    listDirection = _ref.listDirection,
+    scrollContainerRef = _ref.scrollContainerRef,
+    sentinelRefProp = _ref.sentinelRef,
+    datasourceInvokeOptions = _ref.datasourceInvokeOptions;
+  // Extract onPageSizeChange from listener if not provided directly
+  var pageSizeChangeHandler = onPageSizeChange || (listener === null || listener === void 0 ? void 0 : listener.onPageSizeChange);
+  var widgetInstance = listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name];
+  // Consolidated pagination state
+  var _useState = (0, _react.useState)({
+      currentPage: initialPage || 1,
+      pageCount: 0,
+      dataSize: 0,
+      currentMaxResults: (paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.size) || maxResults,
+      error: null
+    }),
+    paginationState = _useState[0],
+    setPaginationState = _useState[1];
+
+  // Data state
+  var _useState2 = (0, _react.useState)({
+      fullData: [],
+      result: []
+    }),
+    dataState = _useState2[0],
+    setDataState = _useState2[1];
+
+  // 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" || navigation === "On-Demand",
+      isInitialized: false
+    }),
+    accumulatingState = _useState3[0],
+    setAccumulatingState = _useState3[1];
+
+  // Navigation disable states - consolidated for better performance
+  var _useState4 = (0, _react.useState)({
+      isDisableNext: true,
+      isDisablePrevious: true,
+      isDisableFirst: true,
+      isDisableLast: true,
+      isDisableCurrent: false,
+      isDisableCount: false
+    }),
+    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 accumulated data (Scroll and On-Demand)
+  var observerRef = (0, _react.useRef)(null);
+  var internalSentinelRef = (0, _react.useRef)(null);
+  var sentinelRef = sentinelRefProp !== undefined ? sentinelRefProp : internalSentinelRef;
+  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 () {
+    accumulatingStateRef.current = accumulatingState;
+  }, [accumulatingState]);
+
+  // Memoized computed values for better performance
+  var isFirstPage = (0, _react.useMemo)(function () {
+    // First check pagination metadata if available
+    if (paginationMeta && paginationMeta.first !== undefined) {
+      return paginationMeta.first;
+    }
+    // Fall back to calculation
+    return paginationState.currentPage === 1 || !paginationState.currentPage;
+  }, [paginationState.currentPage, paginationMeta]);
+  var isLastPage = (0, _react.useMemo)(function () {
+    // First check pagination metadata if available
+    if (paginationMeta && paginationMeta.last !== undefined) {
+      return paginationMeta.last;
+    }
+    // Fall back to calculation
+    return paginationState.currentPage === paginationState.pageCount;
+  }, [paginationState.currentPage, paginationState.pageCount, paginationMeta]);
+
+  // Navigation controls
+  var allowedNavControls = ["Basic", "Classic", "Pager", "Scroll", "On-Demand"];
+  var getValidNavControl = function getValidNavControl(nav) {
+    return allowedNavControls.includes(nav) ? nav : "Basic";
+  };
+  var _useState5 = (0, _react.useState)(getValidNavControl(navigation)),
+    navcontrols = _useState5[0],
+    setNavcontrols = _useState5[1];
+
+  // Function to invoke datasource for API-based pagination
+  var datasourceInvoke = (0, _react.useCallback)(function (page, size) {
+    var isScrollMode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    // Only invoke datasource if server-side pagination is enabled
+    if (isServerSidePagination && datasource && typeof datasource.invoke === "function") {
+      // Prevent concurrent requests
+      if (isFetchingRef.current) {
+        return Promise.resolve();
+      }
+      isFetchingRef.current = true;
+      setPaginationState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          error: null
+        });
+      });
+      try {
+        // Prepare invoke options with page and optionally size
+        var invokeOptions = {
+          page: page
+        };
+        if (size !== undefined) {
+          invokeOptions.size = size;
+        }
+
+        // Include additional invoke options if provided (for table sorting/filtering)
+        if (datasourceInvokeOptions) {
+          // Merge the additional options with page/size
+          Object.assign(invokeOptions, datasourceInvokeOptions);
+        }
+
+        // Wrap the result in Promise.resolve to handle cases where invoke doesn't return a Promise
+        var result = datasource.invoke(invokeOptions);
+        return Promise.resolve(result).then(function (response) {
+          isFetchingRef.current = false;
+
+          // 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 = 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));
+            setAccumulatingState(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, {
+                accumulatedData: newAccumulatedData,
+                lastLoadedPage: page
+              });
+            });
+
+            // Immediately update the data state with accumulated data
+            setDataState(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, {
+                fullData: newAccumulatedData,
+                result: newAccumulatedData
+              });
+            });
+          }
+          return response;
+        })["catch"](function (error) {
+          isFetchingRef.current = false;
+          console.error("Error fetching page data:", error);
+          setPaginationState(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), {}, {
+              error: error.message || "Failed to fetch page data"
+            });
+          });
+          return Promise.reject(error);
+        });
+      } catch (error) {
+        isFetchingRef.current = false;
+        console.error("Error invoking datasource:", error);
+        setPaginationState(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            error: error.message || "Failed to invoke datasource"
+          });
+        });
+        return Promise.reject(error);
+      }
+    }
+    return Promise.resolve();
+  }, [datasource, isServerSidePagination, datasourceInvokeOptions]);
+
+  // 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;
+    }
+
+    // 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);
+    }
+    datasourceInvoke(nextPage, paginationState.currentMaxResults, true).then(function () {
+      setPaginationState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          currentPage: nextPage
+        });
+      });
+      if (onPaginationChange) {
+        onPaginationChange(event || createDummyEvent("paginationchange"), widgetInstance, nextPage);
+      }
+      if (setIsLoadingMore) {
+        setIsLoadingMore(false);
+      }
+    })["catch"](function () {
+      if (setIsLoadingMore) {
+        setIsLoadingMore(false);
+      }
+    });
+  }, [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]);
+
+  // Vertical/column: sentinel in footer, root = viewport (null). Row/horizontal: sentinel inside list, root = list scroll container.
+  var isRowScroll = navigation === "Scroll" && (listDirection === "row" || listDirection === "horizontal");
+
+  // Single IntersectionObserver for both directions: root = viewport (vertical) or list scroll container (row)
+  var setupInfiniteScrollObserver = (0, _react.useCallback)(function (sentinel, scrollRoot) {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    if (!sentinel || navigation !== "Scroll" || !accumulatingStateRef.current.isInitialized) {
+      return;
+    }
+    if (isRowScroll && !scrollRoot) {
+      return; // Row needs list container as root; sentinel is inside list
+    }
+    observerRef.current = new IntersectionObserver(function (entries) {
+      var entry = entries[0];
+      if (!entry.isIntersecting && sentinelHasLeftViewportRef.current === false) {
+        sentinelHasLeftViewportRef.current = true;
+      }
+      if (entry.isIntersecting && accumulatingStateRef.current.isInitialized && !isLastPage && !isFetchingRef.current && sentinelHasLeftViewportRef.current) {
+        loadMoreData();
+        sentinelHasLeftViewportRef.current = false;
+      }
+    }, {
+      root: scrollRoot !== null && scrollRoot !== void 0 ? scrollRoot : null,
+      rootMargin: isRowScroll ? "0px" : "100px",
+      threshold: 0.1
+    });
+    observerRef.current.observe(sentinel);
+  }, [navigation, isLastPage, loadMoreData, listDirection, isRowScroll]);
+
+  // Function to reset the paging values to default
+
+  // Function to calculate the paging values
+
+  // Function to set default values to the paging parameters
+  var setDefaultPagingValues = (0, _react.useCallback)(function (newDataSize, newMaxResults, currentPage) {
+    setPaginationState(function (prev) {
+      // If neither 'dataSize' nor 'maxResults' is set, then set default values to the paging parameters
+      if (!newDataSize && !newMaxResults) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          pageCount: 1,
+          dataSize: newDataSize,
+          currentPage: currentPage !== undefined ? currentPage : prev.currentPage
+        });
+      } else {
+        // Else, set the specified values and recalculate paging parameters
+        var updatedMaxResults = newMaxResults || prev.currentMaxResults;
+        var updatedDataSize = newDataSize !== undefined ? newDataSize : prev.dataSize;
+        var updatedCurrentPage = currentPage !== undefined ? currentPage : prev.currentPage;
+
+        // 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 === 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,
+          pageCount: newPageCount
+        });
+      }
+    });
+  }, [paginationMeta]);
+
+  // Function to disable navigation based on the current and total pages
+  var disableNavigation = (0, _react.useCallback)(function () {
+    setDisableStates({
+      isDisableFirst: isFirstPage,
+      isDisablePrevious: isFirstPage,
+      isDisableNext: isLastPage,
+      isDisableLast: isLastPage,
+      isDisableCurrent: isFirstPage && isLastPage,
+      isDisableCount: false
+    });
+  }, [isFirstPage, isLastPage]);
+
+  // Set non-pageable data
+  var setNonPageableData = (0, _react.useCallback)(function (newVal) {
+    var newDataSize, newMaxResults, currentPage, startIndex;
+
+    // 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;
+    setDefaultPagingValues(newDataSize, newMaxResults, currentPage);
+    disableNavigation();
+    startIndex = (currentPage - 1) * newMaxResults;
+    setDataState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        result: (0, _lodash.isArray)(newVal) ? newVal.slice(startIndex, startIndex + newMaxResults) : newVal
+      });
+    });
+  }, [paginationState.currentPage, paginationState.currentMaxResults, disableNavigation, setDefaultPagingValues, isServerSidePagination, totalItems, paginationMeta]);
+
+  // Set pagination values
+  var setPagingValues = (0, _react.useCallback)(function (newVal) {
+    // 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 = 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);
+        setAccumulatingState(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            accumulatedData: initialDataWithIds,
+            lastLoadedPage: 1,
+            isInitialized: true
+          });
+        });
+        setDataState(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            fullData: initialDataWithIds,
+            result: initialDataWithIds
+          });
+        });
+      } else if (currentAccumulatedData.length > 0) {
+        // For subsequent updates in accumulating mode, always use accumulated data
+        setDataState(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            fullData: currentAccumulatedData,
+            result: currentAccumulatedData
+          });
+        });
+      }
+      // Always return early for accumulating mode to prevent normal pagination logic
+      return;
+    }
+
+    // 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 : []
+        });
+      });
+      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: firstPageData
+          });
+        });
+      } else if (_currentAccumulatedData.length > 0) {
+        // Use accumulated data for result
+        setDataState(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            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, paginationState.currentMaxResults, setDefaultPagingValues]);
+
+  // Validate current page
+  var validateCurrentPage = (0, _react.useCallback)(function (event) {
+    var currentPage = paginationState.currentPage,
+      pageCount = paginationState.pageCount;
+    // If the value entered is greater than the last page number or invalid value, then update the page
+    if (event && (isNaN(currentPage) || currentPage <= 0 || pageCount && (currentPage > pageCount || (0, _lodash.isNull)(currentPage)))) {
+      if (currentPage <= 0) {
+        setPaginationState(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            currentPage: 1
+          });
+        });
+      } else if (currentPage > pageCount) {
+        setPaginationState(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            currentPage: pageCount
+          });
+        });
+      }
+      return false;
+    }
+    return true;
+  }, [paginationState]);
+
+  // Go to page
+  var goToPage = (0, _react.useCallback)(function () {
+    var currentPage = paginationState.currentPage,
+      currentMaxResults = paginationState.currentMaxResults;
+    var fullData = dataState.fullData;
+    var firstRow = (currentPage - 1) * currentMaxResults;
+    var startIndex = firstRow;
+    var data = (0, _lodash.isArray)(fullData) ? fullData.slice(startIndex, startIndex + currentMaxResults) : fullData;
+    setDataState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        result: data
+      });
+    });
+    disableNavigation();
+  }, [paginationState, dataState.fullData, disableNavigation]);
+
+  // Shared function for common pagination logic
+  var performPageNavigation = (0, _react.useCallback)(function (newPage, previousPage, event) {
+    // Set loading state if available
+    if (setIsLoadingMore) {
+      setIsLoadingMore(true);
+    }
+
+    // Always update the current page immediately for better UX
+    setPaginationState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        currentPage: newPage
+      });
+    });
+
+    // If server-side pagination is enabled, use API-based pagination
+    if (isServerSidePagination) {
+      datasourceInvoke(newPage).then(function () {
+        // Only trigger callbacks on successful data fetch
+        if (onPaginationChange) {
+          onPaginationChange(event || createDummyEvent("paginationchange"), widgetInstance, newPage);
+        }
+
+        // Call onSetRecord with the new page data
+        if (onSetRecord) {
+          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;
+          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
+        if (setIsLoadingMore) {
+          setIsLoadingMore(false);
+        }
+      })["catch"](function () {
+        // If the data fetch fails, revert to the previous page
+        setPaginationState(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            currentPage: previousPage || paginationState.currentPage
+          });
+        });
+
+        // Clear loading state
+        if (setIsLoadingMore) {
+          setIsLoadingMore(false);
+        }
+      });
+    } else {
+      // Client-side pagination - no API call needed
+      // Just trigger the callbacks directly
+      if (onPaginationChange) {
+        onPaginationChange(event || createDummyEvent("paginationchange"), widgetInstance, newPage);
+      }
+
+      // Call onSetRecord with the new page data
+      if (onSetRecord) {
+        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;
+        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
+      if (setIsLoadingMore) {
+        setIsLoadingMore(false);
+      }
+    }
+  }, [isServerSidePagination, datasourceInvoke, onPaginationChange, onSetRecord, widgetInstance, paginationState, dataState.fullData, setIsLoadingMore, paginationMeta]);
+
+  // Navigate to page
+  var navigatePage = (0, _react.useCallback)(function (index, event) {
+    var isRefresh = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    // Convert the current page to a valid page number
+    var currentPage = +paginationState.currentPage;
+    var newPage = currentPage;
+    switch (index) {
+      case "first":
+        if (!isFirstPage) {
+          newPage = 1;
+        } else if (isRefresh) {
+          goToPage();
+          return;
+        } else {
+          return;
+        }
+        break;
+      case "prev":
+        // Return if already on the first page or invalid page
+        if (isFirstPage || !validateCurrentPage(event)) {
+          return;
+        }
+        // Decrement the current page by 1
+        newPage = currentPage - 1;
+        break;
+      case "next":
+        // Return if already on the last page or invalid page
+        if (isLastPage || !validateCurrentPage(event)) {
+          return;
+        }
+        // Increment the current page by 1
+        newPage = currentPage + 1;
+        break;
+      case "last":
+        if (!isLastPage) {
+          newPage = paginationState.pageCount;
+        } else if (isRefresh) {
+          goToPage();
+          return;
+        } else {
+          return;
+        }
+        break;
+      default:
+        return;
+    }
+
+    // Call handlers only when page actually changes
+    if (newPage !== currentPage) {
+      performPageNavigation(newPage, currentPage, event);
+    }
+  }, [paginationState, isFirstPage, isLastPage, validateCurrentPage, goToPage, performPageNavigation]);
+
+  // Handle page change for basic pagination
+  var handlePageChange = (0, _react.useCallback)(function (event, page) {
+    // Do not call goToPage if page has not changed
+    if (page !== paginationState.currentPage) {
+      // Save current page to restore in case of error
+      var previousPage = paginationState.currentPage;
+      performPageNavigation(page, previousPage, event);
+    }
+  }, [paginationState.currentPage, performPageNavigation]);
+
+  // Handle input change for classic pagination
+  var handleInputChange = (0, _react.useCallback)(function (event) {
+    var value = parseInt(event.target.value, 10);
+    if (!isNaN(value)) {
+      setPaginationState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          currentPage: value
+        });
+      });
+    }
+  }, []);
+
+  // Handle model change
+  var onModelChange = (0, _react.useCallback)(function (event) {
+    if (!validateCurrentPage(event)) {
+      return;
+    }
+
+    // Call onSetRecord with the current page data
+    if (onSetRecord) {
+      var currentPage = paginationState.currentPage,
+        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;
+      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, paginationMeta]);
+
+  // Handle key down
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.code === "KeyE") {
+      event.currentTarget.classList.add("ng-invalid");
+      return false;
+    }
+    event.currentTarget.classList.remove("ng-invalid");
+    return true;
+  }, []);
+
+  // Handle page size change
+  var handlePageSizeChange = (0, _react.useCallback)(function (event, pageSize) {
+    var oldPageSize = paginationState.currentMaxResults,
+      oldPage = paginationState.currentPage,
+      dataSize = paginationState.dataSize;
+
+    // Store actualPageSize (the previous page size) similar to Angular
+    var actualPageSize = oldPageSize;
+
+    // Update datasource maxResults if datasource has paging capability
+    if (isDataSourceHasPaging(datasource) && datasource) {
+      datasource.maxResults = pageSize;
+    }
+
+    // Update page size and reset to first page (similar to Angular behavior)
+    setPaginationState(function (prev) {
+      // Calculate new page count
+      var newPageCount = calculatePagingValues(dataSize, pageSize);
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        currentMaxResults: pageSize,
+        currentPage: 1,
+        // Always go to first page like Angular
+        pageCount: newPageCount
+      });
+    });
+
+    // Set loading state if available
+    if (setIsLoadingMore) {
+      setIsLoadingMore(true);
+    }
+
+    // Call the external handler if provided
+    if (pageSizeChangeHandler) {
+      pageSizeChangeHandler(pageSize);
+    }
+
+    // Invoke datasource with new page size for server-side pagination
+    if (isServerSidePagination) {
+      datasourceInvoke(1, pageSize).then(function () {
+        // Trigger paginationchange event
+        if (onPaginationChange) {
+          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;
+          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
+        if (setIsLoadingMore) {
+          setIsLoadingMore(false);
+        }
+      })["catch"](function () {
+        // Clear loading state on error
+        if (setIsLoadingMore) {
+          setIsLoadingMore(false);
+        }
+      });
+    } else {
+      // For client-side pagination, navigate to first page
+      setTimeout(function () {
+        navigatePage("first", event, true);
+      }, 0);
+
+      // Clear loading state immediately for client-side pagination
+      if (setIsLoadingMore) {
+        setIsLoadingMore(false);
+      }
+    }
+  }, [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 accumulated data state when navigation changes to Scroll or On-Demand
+    if (navigation === "Scroll" || navigation === "On-Demand") {
+      setAccumulatingState({
+        accumulatedData: [],
+        lastLoadedPage: 0,
+        isAccumulating: true,
+        isInitialized: false
+      });
+    }
+  }, [navigation]);
+
+  // for dataset changes
+  (0, _react.useEffect)(function () {
+    if (dataset !== undefined) {
+      // 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, navigation, isServerSidePagination]);
+
+  // For server-side pagination, update dataSize and pageCount based on metadata
+  (0, _react.useEffect)(function () {
+    if (isServerSidePagination) {
+      // Handle totalItems/totalElements
+      var totalCount = totalItems !== null && totalItems !== void 0 ? totalItems : paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.totalElements;
+      if (totalCount !== undefined && totalCount >= 0) {
+        setPaginationState(function (prev) {
+          var updates = {
+            dataSize: totalCount
+          };
+
+          // If totalPages not provided, calculate it
+          if ((paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.totalPages) !== undefined) {
+            updates.pageCount = paginationMeta.totalPages;
+          } else if (prev.currentMaxResults > 0) {
+            updates.pageCount = Math.ceil(totalCount / prev.currentMaxResults) || 1;
+          }
+
+          // Handle edge case: current page is out of range
+          if (paginationMeta !== null && paginationMeta !== void 0 && paginationMeta.totalPages && prev.currentPage > paginationMeta.totalPages) {
+            updates.currentPage = Math.max(1, paginationMeta.totalPages);
+          }
+
+          // Handle empty results
+          if (totalCount === 0) {
+            updates.pageCount = 1; // Show at least one page for empty results
+            updates.currentPage = 1;
+          }
+          return _objectSpread(_objectSpread({}, prev), updates);
+        });
+      }
+    }
+  }, [isServerSidePagination, totalItems, paginationMeta]);
+
+  // Sync internal state with currentPage prop changes (for controlled pagination)
+  (0, _react.useEffect)(function () {
+    if (initialPage !== undefined && initialPage !== paginationState.currentPage) {
+      setPaginationState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          currentPage: initialPage
+        });
+      });
+      // Update navigation buttons when page changes
+      disableNavigation();
+    }
+  }, [initialPage, paginationState.currentPage, disableNavigation]);
+
+  // Sync currentMaxResults when maxResults prop changes (e.g. when table passes updated page size from script/broadcast)
+  (0, _react.useEffect)(function () {
+    if (maxResults !== paginationState.currentMaxResults) {
+      setPaginationState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          currentMaxResults: maxResults
+        });
+      });
+    }
+  }, [maxResults, paginationState.currentMaxResults]);
+
+  // Re-setup observer when init or direction changes: vertical = viewport root, row = list scroll container root
+  (0, _react.useEffect)(function () {
+    var _scrollContainerRef$c;
+    if (!accumulatingState.isInitialized || !sentinelRef.current || navigation !== "Scroll") return;
+    var scrollRoot = isRowScroll ? (_scrollContainerRef$c = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current) !== null && _scrollContainerRef$c !== void 0 ? _scrollContainerRef$c : null : null;
+    if (isRowScroll && !scrollRoot) return;
+    setupInfiniteScrollObserver(sentinelRef.current, scrollRoot);
+  }, [accumulatingState.isInitialized, navigation, setupInfiniteScrollObserver, isRowScroll]);
+
+  // Cleanup observer on unmount
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, []);
+  return {
+    // State
+    currentPage: paginationState.currentPage,
+    pageCount: paginationState.pageCount,
+    dataSize: paginationState.dataSize,
+    result: dataState.result,
+    navcontrols: navcontrols,
+    currentMaxResults: paginationState.currentMaxResults,
+    error: paginationState.error,
+    // Disable states
+    isDisableNext: disableStates.isDisableNext,
+    isDisablePrevious: disableStates.isDisablePrevious,
+    isDisableFirst: disableStates.isDisableFirst,
+    isDisableLast: disableStates.isDisableLast,
+    isDisableCurrent: disableStates.isDisableCurrent,
+    isDisableCount: disableStates.isDisableCount,
+    // Actions
+    navigatePage: navigatePage,
+    handlePageChange: handlePageChange,
+    handleInputChange: handleInputChange,
+    onModelChange: onModelChange,
+    onKeyDown: onKeyDown,
+    setDn: function setDn(value) {
+      return setPaginationState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), value);
+      });
+    },
+    handlePageSizeChange: handlePageSizeChange,
+    // Utilities
+    isFirstPage: isFirstPage,
+    isLastPage: isLastPage,
+    isFetching: isFetchingRef.current,
+    // Infinite scroll specific
+    setupInfiniteScrollObserver: setupInfiniteScrollObserver,
+    sentinelRef: sentinelRef,
+    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
+  };
+};