@wavemaker-ai/react-runtime 1.0.0-rc.647502 → 1.0.0-rc.647565

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

@@ -1,30 +1,32 @@
-"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) {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { isArray, isEmpty, isNull } from "lodash-es";
+import { addUniqueRowIds, extractDataArray } from "../../table/utils";
+const isDataSourceHasPaging = (datasource) => {
   return datasource && typeof datasource.execute === "function" && datasource.execute("IS_PAGEABLE");
 };
-
-// Utility function to calculate paging values
-var calculatePagingValues = function calculatePagingValues(dataSize, maxResults) {
+const 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";
+const createDummyEvent = (eventName = "synthetic") => {
   return {
     bubbles: false,
     cancelable: false,
@@ -37,451 +39,361 @@ var createDummyEvent = function createDummyEvent() {
     timeStamp: Date.now(),
     type: eventName,
     // Dynamic type based on the event being triggered
-    isDefaultPrevented: function isDefaultPrevented() {
-      return false;
+    isDefaultPrevented: () => false,
+    isPropagationStopped: () => false,
+    persist: () => {
     },
-    isPropagationStopped: function isPropagationStopped() {
-      return false;
+    preventDefault: () => {
     },
-    persist: function persist() {},
-    preventDefault: function preventDefault() {},
-    stopPropagation: function stopPropagation() {}
+    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 () {
+const usePagination = ({
+  dataset,
+  maxResults = 10,
+  currentPage: initialPage,
+  navigation,
+  name,
+  listener,
+  onPaginationChange,
+  onSetRecord,
+  onPageSizeChange,
+  paginationMeta,
+  totalItems,
+  datasource,
+  setIsLoadingMore,
+  isServerSidePagination = false,
+  listDirection,
+  scrollContainerRef,
+  sentinelRef: sentinelRefProp,
+  datasourceInvokeOptions
+}) => {
+  var _a;
+  const pageSizeChangeHandler = onPageSizeChange || (listener == null ? void 0 : listener.onPageSizeChange);
+  const widgetInstance = (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name];
+  const [paginationState, setPaginationState] = useState({
+    currentPage: initialPage || 1,
+    pageCount: 0,
+    dataSize: 0,
+    currentMaxResults: (paginationMeta == null ? void 0 : paginationMeta.size) || maxResults,
+    error: null
+  });
+  const [dataState, setDataState] = useState({
+    fullData: [],
+    result: []
+  });
+  const [accumulatingState, setAccumulatingState] = useState({
+    accumulatedData: [],
+    lastLoadedPage: 0,
+    isAccumulating: navigation === "Scroll" || navigation === "On-Demand",
+    isInitialized: false
+  });
+  const [disableStates, setDisableStates] = useState({
+    isDisableNext: true,
+    isDisablePrevious: true,
+    isDisableFirst: true,
+    isDisableLast: true,
+    isDisableCurrent: false,
+    isDisableCount: false
+  });
+  const isFetchingRef = useRef(false);
+  const isResettingRef = useRef(false);
+  const observerRef = useRef(null);
+  const internalSentinelRef = useRef(null);
+  const sentinelRef = sentinelRefProp !== void 0 ? sentinelRefProp : internalSentinelRef;
+  const accumulatingStateRef = useRef(accumulatingState);
+  const sentinelHasLeftViewportRef = useRef(true);
+  useEffect(() => {
     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) {
+  const isFirstPage = useMemo(() => {
+    if (paginationMeta && paginationMeta.first !== void 0) {
       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) {
+  const isLastPage = useMemo(() => {
+    if (paginationMeta && paginationMeta.last !== void 0) {
       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) {
+  const allowedNavControls = ["Basic", "Classic", "Pager", "Scroll", "On-Demand"];
+  const 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);
+  const [navcontrols, setNavcontrols] = useState(getValidNavControl(navigation));
+  const getPaginationStartIndex = () => {
+    var _a2, _b;
+    const startIndex = (_a2 = datasource == null ? void 0 : datasource._paginationConfig) == null ? void 0 : _a2.paginationStartIndex;
+    return startIndex !== void 0 && ((_b = datasource._paginationConfig) == null ? void 0 : _b.type) === "page" ? Number(startIndex) : 1;
+  };
+  const datasourceInvoke = useCallback(
+    (page, size, isScrollMode = false) => {
+      if (isServerSidePagination && datasource && typeof datasource.invoke === "function") {
+        if (isFetchingRef.current) {
+          return Promise.resolve();
         }
-
-        // 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), {}, {
+        isFetchingRef.current = true;
+        setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { error: null }));
+        try {
+          const invokeOptions = { page };
+          if (size !== void 0) {
+            invokeOptions.size = size;
+          }
+          if (datasourceInvokeOptions) {
+            Object.assign(invokeOptions, datasourceInvokeOptions);
+          }
+          invokeOptions.page = page - 1 + getPaginationStartIndex();
+          const result = datasource.invoke(invokeOptions);
+          return Promise.resolve(result).then((response) => {
+            isFetchingRef.current = false;
+            if (isScrollMode && response && response.data) {
+              const currentAccumulatedData = accumulatingStateRef.current.accumulatedData;
+              const newDataWithIds = addUniqueRowIds(response.data);
+              const newAccumulatedData = [...currentAccumulatedData, ...newDataWithIds];
+              setAccumulatingState((prev) => __spreadProps(__spreadValues({}, prev), {
                 accumulatedData: newAccumulatedData,
                 lastLoadedPage: page
-              });
-            });
-
-            // Immediately update the data state with accumulated data
-            setDataState(function (prev) {
-              return _objectSpread(_objectSpread({}, prev), {}, {
+              }));
+              setDataState((prev) => __spreadProps(__spreadValues({}, 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), {}, {
+              }));
+            }
+            return response;
+          }).catch((error) => {
+            isFetchingRef.current = false;
+            console.error("Error fetching page data:", error);
+            setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), {
               error: error.message || "Failed to fetch page data"
-            });
+            }));
+            return Promise.reject(error);
           });
-          return Promise.reject(error);
-        });
-      } catch (error) {
-        isFetchingRef.current = false;
-        console.error("Error invoking datasource:", error);
-        setPaginationState(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
+        } catch (error) {
+          isFetchingRef.current = false;
+          console.error("Error invoking datasource:", error);
+          setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), {
             error: error.message || "Failed to invoke datasource"
-          });
-        });
-        return Promise.reject(error);
+          }));
+          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), {}, {
+      return Promise.resolve();
+    },
+    [datasource, isServerSidePagination, datasourceInvokeOptions]
+  );
+  const loadMoreData = useCallback(
+    (event) => {
+      const isAccumulatingMode = navigation === "Scroll" || navigation === "On-Demand";
+      if (!isAccumulatingMode || isLastPage || isFetchingRef.current) {
+        return;
+      }
+      if (!isServerSidePagination) {
+        const currentVisible = accumulatingStateRef.current.accumulatedData.length;
+        const totalAvailable = dataState.fullData.length;
+        const nextBatchSize = paginationState.currentMaxResults;
+        const newVisibleCount = Math.min(currentVisible + nextBatchSize, totalAvailable);
+        const nextBatch = dataState.fullData.slice(currentVisible, newVisibleCount);
+        const newAccumulatedData = [...accumulatingStateRef.current.accumulatedData, ...nextBatch];
+        setAccumulatingState((prev) => __spreadProps(__spreadValues({}, prev), {
           accumulatedData: newAccumulatedData,
           lastLoadedPage: prev.lastLoadedPage + 1
-        });
-      });
-
-      // Update the result to show accumulated data
-      setDataState(function (prev) {
-        return _objectSpread(_objectSpread({}, prev), {}, {
+        }));
+        setDataState((prev) => __spreadProps(__spreadValues({}, 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);
+        }));
+        const nextPage2 = accumulatingStateRef.current.lastLoadedPage + 1;
+        setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentPage: nextPage2 }));
+        if (onPaginationChange) {
+          onPaginationChange(
+            event || createDummyEvent("paginationchange"),
+            widgetInstance,
+            nextPage2
+          );
+        }
+        return;
       }
-    });
-  }, [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") {
+      const nextPage = accumulatingStateRef.current.lastLoadedPage + 1;
       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;
+      datasourceInvoke(nextPage, paginationState.currentMaxResults, true).then(() => {
+        setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentPage: nextPage }));
+        if (onPaginationChange) {
+          onPaginationChange(
+            event || createDummyEvent("paginationchange"),
+            widgetInstance,
+            nextPage
+          );
         }
         if (setIsLoadingMore) {
           setIsLoadingMore(false);
         }
-      })["catch"](function () {
-        // Clear resetting flag on error
-        isResettingRef.current = false;
+      }).catch(() => {
         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();
+    },
+    [
+      navigation,
+      isServerSidePagination,
+      isLastPage,
+      setIsLoadingMore,
+      datasourceInvoke,
+      paginationState.currentMaxResults,
+      onPaginationChange,
+      widgetInstance,
+      dataState.fullData
+    ]
+  );
+  const resetAccumulatedData = useCallback(
+    (event) => {
+      if (navigation === "Scroll") {
         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
+      isResettingRef.current = true;
+      setAccumulatingState({
+        accumulatedData: [],
+        lastLoadedPage: 0,
+        isAccumulating: navigation === "Scroll" || navigation === "On-Demand",
+        isInitialized: false
+      });
+      setDataState((prev) => __spreadProps(__spreadValues({}, prev), {
+        result: []
+      }));
+      setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentPage: 1 }));
+      if (onPaginationChange) {
+        onPaginationChange(event || createDummyEvent(), widgetInstance, 1);
+      }
+      if (!isServerSidePagination && dataState.fullData.length > 0) {
+        const firstPageData = dataState.fullData.slice(0, paginationState.currentMaxResults);
+        setDataState((prev) => __spreadProps(__spreadValues({}, prev), {
+          result: firstPageData
+        }));
+        setTimeout(() => {
+          setAccumulatingState({
+            accumulatedData: firstPageData,
+            lastLoadedPage: 1,
+            isAccumulating: true,
+            isInitialized: true
+          });
+        }, 0);
+      }
+      if (isServerSidePagination && datasource && typeof datasource.invoke === "function") {
+        if (setIsLoadingMore) {
+          setIsLoadingMore(true);
+        }
+        const invokeOptions = {
+          page: 1
+        };
+        if (datasourceInvokeOptions) {
+          Object.assign(invokeOptions, datasourceInvokeOptions);
+        }
+        const result = datasource.invoke(invokeOptions);
+        Promise.resolve(result).then((response) => {
+          if (response && response.data) {
+            const newDataWithIds = addUniqueRowIds(response.data);
+            setAccumulatingState({
+              accumulatedData: newDataWithIds,
+              lastLoadedPage: 1,
+              isAccumulating: true,
+              isInitialized: true
+            });
+            setDataState((prev) => __spreadProps(__spreadValues({}, prev), {
+              fullData: newDataWithIds,
+              result: newDataWithIds
+            }));
+            isResettingRef.current = false;
+          }
+          if (setIsLoadingMore) {
+            setIsLoadingMore(false);
+          }
+        }).catch(() => {
+          isResettingRef.current = false;
+          if (setIsLoadingMore) {
+            setIsLoadingMore(false);
+          }
         });
       } 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
-        });
+        setTimeout(() => {
+          isResettingRef.current = false;
+        }, 0);
       }
-    });
-  }, [paginationMeta]);
-
-  // Function to disable navigation based on the current and total pages
-  var disableNavigation = (0, _react.useCallback)(function () {
+    },
+    [
+      navigation,
+      isServerSidePagination,
+      datasource,
+      datasourceInvokeOptions,
+      dataState.fullData,
+      paginationState.currentMaxResults,
+      setIsLoadingMore,
+      onPaginationChange,
+      widgetInstance
+    ]
+  );
+  const isRowScroll = navigation === "Scroll" && (listDirection === "row" || listDirection === "horizontal");
+  const setupInfiniteScrollObserver = useCallback(
+    (sentinel, scrollRoot) => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      if (!sentinel || navigation !== "Scroll" || !accumulatingStateRef.current.isInitialized) {
+        return;
+      }
+      if (isRowScroll && !scrollRoot) {
+        return;
+      }
+      observerRef.current = new IntersectionObserver(
+        (entries) => {
+          const 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 : null,
+          rootMargin: isRowScroll ? "0px" : "100px",
+          threshold: 0.1
+        }
+      );
+      observerRef.current.observe(sentinel);
+    },
+    [navigation, isLastPage, loadMoreData, listDirection, isRowScroll]
+  );
+  const setDefaultPagingValues = useCallback(
+    (newDataSize, newMaxResults, currentPage) => {
+      setPaginationState((prev) => {
+        if (!newDataSize && !newMaxResults) {
+          return __spreadProps(__spreadValues({}, prev), {
+            pageCount: 1,
+            dataSize: newDataSize,
+            currentPage: currentPage !== void 0 ? currentPage : prev.currentPage
+          });
+        } else {
+          const updatedMaxResults = newMaxResults || prev.currentMaxResults;
+          const updatedDataSize = newDataSize !== void 0 ? newDataSize : prev.dataSize;
+          const updatedCurrentPage = currentPage !== void 0 ? currentPage : prev.currentPage;
+          const newPageCount = (paginationMeta == null ? void 0 : paginationMeta.totalPages) !== void 0 && (paginationMeta == null ? void 0 : paginationMeta.totalPages) > 1 ? paginationMeta.totalPages : updatedDataSize > updatedMaxResults ? Math.ceil(updatedDataSize / updatedMaxResults) : updatedDataSize < 0 ? 0 : 1;
+          return __spreadProps(__spreadValues({}, prev), {
+            currentPage: updatedCurrentPage,
+            dataSize: updatedDataSize,
+            pageCount: newPageCount
+          });
+        }
+      });
+    },
+    [paginationMeta]
+  );
+  const disableNavigation = useCallback(() => {
     setDisableStates({
       isDisableFirst: isFirstPage,
       isDisablePrevious: isFirstPage,
@@ -491,363 +403,298 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
       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), {}, {
+  const setNonPageableData = useCallback(
+    (newVal) => {
+      let newDataSize, newMaxResults, currentPage, startIndex;
+      if (isServerSidePagination) {
+        const serverTotalCount = totalItems != null ? totalItems : paginationMeta == null ? void 0 : paginationMeta.totalElements;
+        newDataSize = serverTotalCount !== void 0 && serverTotalCount >= 0 ? serverTotalCount : isArray(newVal) ? newVal.length : isEmpty(newVal) ? 0 : 1;
+      } else {
+        newDataSize = isArray(newVal) ? newVal.length : isEmpty(newVal) ? 0 : 1;
+      }
+      newMaxResults = paginationState.currentMaxResults || newDataSize;
+      currentPage = paginationState.currentPage;
+      setDefaultPagingValues(newDataSize, newMaxResults, currentPage);
+      disableNavigation();
+      startIndex = (currentPage - 1) * newMaxResults;
+      setDataState((prev) => __spreadProps(__spreadValues({}, prev), {
+        result: isArray(newVal) ? newVal.slice(startIndex, startIndex + newMaxResults) : newVal
+      }));
+    },
+    [
+      paginationState.currentPage,
+      paginationState.currentMaxResults,
+      disableNavigation,
+      setDefaultPagingValues,
+      isServerSidePagination,
+      totalItems,
+      paginationMeta
+    ]
+  );
+  const setPagingValues = useCallback(
+    (newVal) => {
+      const isAccumulatingMode = (navigation === "Scroll" || navigation === "On-Demand") && isServerSidePagination;
+      if (isAccumulatingMode) {
+        const currentAccumulatedData = accumulatingStateRef.current.accumulatedData;
+        if (currentAccumulatedData.length === 0 && isArray(newVal)) {
+          const initialDataWithIds = addUniqueRowIds(newVal);
+          setAccumulatingState((prev) => __spreadProps(__spreadValues({}, prev), {
             accumulatedData: initialDataWithIds,
             lastLoadedPage: 1,
             isInitialized: true
-          });
-        });
-        setDataState(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
+          }));
+          setDataState((prev) => __spreadProps(__spreadValues({}, 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), {}, {
+          }));
+        } else if (currentAccumulatedData.length > 0) {
+          setDataState((prev) => __spreadProps(__spreadValues({}, prev), {
             fullData: currentAccumulatedData,
             result: currentAccumulatedData
-          });
-        });
+          }));
+        }
+        return;
       }
-      // 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), {}, {
+      if (navigation === "On-Demand" && !isServerSidePagination) {
+        setDataState((prev) => __spreadProps(__spreadValues({}, prev), {
+          fullData: isArray(newVal) ? newVal : []
+        }));
+        const currentAccumulatedData = accumulatingStateRef.current.accumulatedData;
+        if (currentAccumulatedData.length === 0 && isArray(newVal) && newVal.length > 0) {
+          const firstPageData = newVal.slice(0, paginationState.currentMaxResults);
+          setAccumulatingState((prev) => __spreadProps(__spreadValues({}, prev), {
             accumulatedData: firstPageData,
             lastLoadedPage: 1,
             isInitialized: true
-          });
-        });
-        setDataState(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
+          }));
+          setDataState((prev) => __spreadProps(__spreadValues({}, prev), {
             result: firstPageData
-          });
-        });
-      } else if (_currentAccumulatedData.length > 0) {
-        // Use accumulated data for result
-        setDataState(function (prev) {
-          return _objectSpread(_objectSpread({}, prev), {}, {
-            result: _currentAccumulatedData
-          });
-        });
+          }));
+        } else if (currentAccumulatedData.length > 0) {
+          setDataState((prev) => __spreadProps(__spreadValues({}, prev), {
+            result: currentAccumulatedData
+          }));
+        }
+        if (isArray(newVal)) {
+          setDefaultPagingValues(newVal.length, paginationState.currentMaxResults, 1);
+        }
+        return;
       }
-
-      // Update dataSize for proper pagination calculation
-      if ((0, _lodash.isArray)(newVal)) {
-        setDefaultPagingValues(newVal.length, paginationState.currentMaxResults, 1);
+      setDataState((prev) => __spreadProps(__spreadValues({}, prev), {
+        fullData: isArray(newVal) ? newVal : []
+      }));
+      if (newVal && !isArray(newVal)) {
+        setNonPageableData(newVal);
+      } else if (newVal) {
+        setNonPageableData(newVal);
+      } else {
+        setDataState((prev) => __spreadProps(__spreadValues({}, prev), { result: newVal }));
+        setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { pageCount: 0, dataSize: 0 }));
       }
-      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
-          });
-        });
+    },
+    [
+      setNonPageableData,
+      navigation,
+      isServerSidePagination,
+      paginationState.currentMaxResults,
+      setDefaultPagingValues
+    ]
+  );
+  const validateCurrentPage = useCallback(
+    (event) => {
+      const { currentPage, pageCount } = paginationState;
+      if (event && (isNaN(currentPage) || currentPage <= 0 || pageCount && (currentPage > pageCount || isNull(currentPage)))) {
+        if (currentPage <= 0) {
+          setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentPage: 1 }));
+        } else if (currentPage > pageCount) {
+          setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentPage: pageCount }));
+        }
+        return false;
       }
-      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
-      });
-    });
+      return true;
+    },
+    [paginationState]
+  );
+  const goToPage = useCallback(() => {
+    const { currentPage, currentMaxResults } = paginationState;
+    const { fullData } = dataState;
+    const firstRow = (currentPage - 1) * currentMaxResults;
+    const startIndex = firstRow;
+    const data = isArray(fullData) ? fullData.slice(startIndex, startIndex + currentMaxResults) : fullData;
+    setDataState((prev) => __spreadProps(__spreadValues({}, 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
+  const performPageNavigation = useCallback(
+    (newPage, previousPage, event) => {
+      if (setIsLoadingMore) {
+        setIsLoadingMore(true);
+      }
+      setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentPage: newPage }));
+      if (isServerSidePagination) {
+        datasourceInvoke(newPage).then(() => {
+          if (onPaginationChange) {
+            onPaginationChange(
+              event || createDummyEvent("paginationchange"),
+              widgetInstance,
+              newPage
+            );
+          }
+          if (onSetRecord) {
+            const firstRow = (newPage - 1) * paginationState.currentMaxResults;
+            const startIndex = firstRow;
+            const data = isArray(dataState.fullData) ? dataState.fullData.slice(
+              startIndex,
+              startIndex + paginationState.currentMaxResults
+            ) : dataState.fullData;
+            const pageInfo = {
+              currentPage: newPage,
+              size: paginationState.currentMaxResults,
+              totalElements: (paginationMeta == null ? void 0 : paginationMeta.totalElements) || dataState.fullData.length,
+              totalPages: paginationState.pageCount
+            };
+            onSetRecord(event || createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
+          }
+          if (setIsLoadingMore) {
+            setIsLoadingMore(false);
+          }
+        }).catch(() => {
+          setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), {
+            currentPage: previousPage || paginationState.currentPage
+          }));
+          if (setIsLoadingMore) {
+            setIsLoadingMore(false);
+          }
+        });
+      } else {
         if (onPaginationChange) {
-          onPaginationChange(event || createDummyEvent("paginationchange"), widgetInstance, newPage);
+          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 = {
+          const firstRow = (newPage - 1) * paginationState.currentMaxResults;
+          const startIndex = firstRow;
+          const data = isArray(dataState.fullData) ? dataState.fullData.slice(startIndex, startIndex + paginationState.currentMaxResults) : dataState.fullData;
+          const pageInfo = {
             currentPage: newPage,
             size: paginationState.currentMaxResults,
-            totalElements: (paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.totalElements) || dataState.fullData.length,
+            totalElements: (paginationMeta == null ? 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);
+    },
+    [
+      isServerSidePagination,
+      datasourceInvoke,
+      onPaginationChange,
+      onSetRecord,
+      widgetInstance,
+      paginationState,
+      dataState.fullData,
+      setIsLoadingMore,
+      paginationMeta
+    ]
+  );
+  const navigatePage = useCallback(
+    (index, event, isRefresh = false) => {
+      const currentPage = +paginationState.currentPage;
+      let newPage = currentPage;
+      switch (index) {
+        case "first":
+          if (!isFirstPage) {
+            newPage = 1;
+          } else if (isRefresh) {
+            goToPage();
+            return;
+          } else {
+            return;
+          }
+          break;
+        case "prev":
+          if (isFirstPage || !validateCurrentPage(event)) {
+            return;
+          }
+          newPage = currentPage - 1;
+          break;
+        case "next":
+          if (isLastPage || !validateCurrentPage(event)) {
+            return;
+          }
+          newPage = currentPage + 1;
+          break;
+        case "last":
+          if (!isLastPage) {
+            newPage = paginationState.pageCount;
+          } else if (isRefresh) {
+            goToPage();
+            return;
+          } else {
+            return;
+          }
+          break;
+        default:
+          return;
       }
-
-      // Clear loading state immediately - no delay needed for client-side pagination
-      if (setIsLoadingMore) {
-        setIsLoadingMore(false);
+      if (newPage !== currentPage) {
+        performPageNavigation(newPage, currentPage, event);
       }
-    }
-  }, [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);
+    },
+    [paginationState, isFirstPage, isLastPage, validateCurrentPage, goToPage, performPageNavigation]
+  );
+  const handlePageChange = useCallback(
+    (event, page) => {
+      if (page !== paginationState.currentPage) {
+        const previousPage = paginationState.currentPage;
+        performPageNavigation(page, previousPage, event);
+      }
+    },
+    [paginationState.currentPage, performPageNavigation]
+  );
+  const handleInputChange = useCallback((event) => {
+    const value = parseInt(event.target.value, 10);
     if (!isNaN(value)) {
-      setPaginationState(function (prev) {
-        return _objectSpread(_objectSpread({}, prev), {}, {
-          currentPage: value
-        });
-      });
+      setPaginationState((prev) => __spreadProps(__spreadValues({}, 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) {
+  const onModelChange = useCallback(
+    (event) => {
+      if (!validateCurrentPage(event)) {
+        return;
+      }
+      if (onSetRecord) {
+        const { currentPage, currentMaxResults, pageCount } = paginationState;
+        const { fullData } = dataState;
+        const firstRow = (currentPage - 1) * currentMaxResults;
+        const startIndex = firstRow;
+        const data = isArray(fullData) ? fullData.slice(startIndex, startIndex + currentMaxResults) : fullData;
+        const pageInfo = {
+          currentPage,
+          size: currentMaxResults,
+          totalElements: (paginationMeta == null ? void 0 : paginationMeta.totalElements) || fullData.length,
+          totalPages: pageCount
+        };
+        onSetRecord(event, widgetInstance, data, pageInfo);
+      }
+      goToPage();
+    },
+    [
+      goToPage,
+      validateCurrentPage,
+      onSetRecord,
+      paginationState,
+      dataState.fullData,
+      widgetInstance,
+      paginationMeta
+    ]
+  );
+  const onKeyDown = useCallback((event) => {
     if (event.code === "KeyE") {
       event.currentTarget.classList.add("ng-invalid");
       return false;
@@ -855,92 +702,78 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
     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
+  const handlePageSizeChange = useCallback(
+    (event, pageSize) => {
+      const { currentMaxResults: oldPageSize, currentPage: oldPage, dataSize } = paginationState;
+      const actualPageSize = oldPageSize;
+      if (isDataSourceHasPaging(datasource) && datasource) {
+        datasource.maxResults = pageSize;
+      }
+      setPaginationState((prev) => {
+        const newPageCount = calculatePagingValues(dataSize, pageSize);
+        return __spreadProps(__spreadValues({}, 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(true);
+      }
+      if (pageSizeChangeHandler) {
+        pageSizeChangeHandler(pageSize);
+      }
+      if (isServerSidePagination) {
+        datasourceInvoke(1, pageSize).then(() => {
+          if (onPaginationChange) {
+            onPaginationChange(event || createDummyEvent("paginationchange"), widgetInstance, 1);
+          }
+          if (onSetRecord) {
+            const data = isArray(dataState.fullData) ? dataState.fullData.slice(0, pageSize) : dataState.fullData;
+            const newPageCount = calculatePagingValues(dataState.fullData.length, pageSize);
+            const pageInfo = {
+              currentPage: 1,
+              size: pageSize,
+              totalElements: (paginationMeta == null ? void 0 : paginationMeta.totalElements) || dataState.fullData.length,
+              totalPages: newPageCount
+            };
+            onSetRecord(event || createDummyEvent("setrecord"), widgetInstance, data, pageInfo);
+          }
+          if (setIsLoadingMore) {
+            setIsLoadingMore(false);
+          }
+        }).catch(() => {
+          if (setIsLoadingMore) {
+            setIsLoadingMore(false);
+          }
+        });
+      } else {
+        setTimeout(() => {
+          navigatePage("first", event, true);
+        }, 0);
         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 () {
+    },
+    [
+      pageSizeChangeHandler,
+      navigatePage,
+      datasource,
+      paginationState,
+      isServerSidePagination,
+      datasourceInvoke,
+      onPaginationChange,
+      onSetRecord,
+      widgetInstance,
+      dataState.fullData,
+      setIsLoadingMore,
+      paginationMeta
+    ]
+  );
+  useEffect(() => {
     setNavcontrols(getValidNavControl(navigation));
-
-    // Reset accumulated data state when navigation changes to Scroll or On-Demand
     if (navigation === "Scroll" || navigation === "On-Demand") {
       setAccumulatingState({
         accumulatedData: [],
@@ -950,100 +783,65 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
       });
     }
   }, [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)
+  useEffect(() => {
+    if (dataset !== void 0) {
+      const processedDataset = extractDataArray(dataset);
+      const isAccumulatingMode = (navigation === "Scroll" || navigation === "On-Demand") && isServerSidePagination;
       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
+        const currentAccumulatedData = accumulatingStateRef.current.accumulatedData;
         if (currentAccumulatedData.length === 0 && !isResettingRef.current) {
-          setPagingValues(dataset);
+          setPagingValues(processedDataset);
         }
       } else {
-        // For non-accumulating modes, always process dataset updates
-        setPagingValues(dataset);
+        setPagingValues(processedDataset);
       }
     }
   }, [dataset, setPagingValues, navigation, isServerSidePagination]);
-
-  // For server-side pagination, update dataSize and pageCount based on metadata
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     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 = {
+      const totalCount = totalItems != null ? totalItems : paginationMeta == null ? void 0 : paginationMeta.totalElements;
+      if (totalCount !== void 0 && totalCount >= 0) {
+        setPaginationState((prev) => {
+          let updates = {
             dataSize: totalCount
           };
-
-          // If totalPages not provided, calculate it
-          if ((paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.totalPages) !== undefined) {
+          if ((paginationMeta == null ? void 0 : paginationMeta.totalPages) !== void 0) {
             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) {
+          if ((paginationMeta == null ? 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.pageCount = 1;
             updates.currentPage = 1;
           }
-          return _objectSpread(_objectSpread({}, prev), updates);
+          return __spreadValues(__spreadValues({}, 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
+  useEffect(() => {
+    if (initialPage !== void 0 && initialPage !== paginationState.currentPage) {
+      setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), { currentPage: initialPage }));
       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 () {
+  useEffect(() => {
     if (maxResults !== paginationState.currentMaxResults) {
-      setPaginationState(function (prev) {
-        return _objectSpread(_objectSpread({}, prev), {}, {
-          currentMaxResults: maxResults
-        });
-      });
+      setPaginationState((prev) => __spreadProps(__spreadValues({}, 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;
+  useEffect(() => {
+    var _a2;
     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;
+    const scrollRoot = isRowScroll ? (_a2 = scrollContainerRef == null ? void 0 : scrollContainerRef.current) != null ? _a2 : 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 () {
+  useEffect(() => {
+    return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
         observerRef.current = null;
@@ -1056,7 +854,7 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
     pageCount: paginationState.pageCount,
     dataSize: paginationState.dataSize,
     result: dataState.result,
-    navcontrols: navcontrols,
+    navcontrols,
     currentMaxResults: paginationState.currentMaxResults,
     error: paginationState.error,
     // Disable states
@@ -1067,29 +865,28 @@ var usePagination = exports.usePagination = function usePagination(_ref) {
     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,
+    navigatePage,
+    handlePageChange,
+    handleInputChange,
+    onModelChange,
+    onKeyDown,
+    setDn: (value) => setPaginationState((prev) => __spreadValues(__spreadValues({}, prev), value)),
+    handlePageSizeChange,
     // Utilities
-    isFirstPage: isFirstPage,
-    isLastPage: isLastPage,
+    isFirstPage,
+    isLastPage,
     isFetching: isFetchingRef.current,
     // Infinite scroll specific
-    setupInfiniteScrollObserver: setupInfiniteScrollObserver,
-    sentinelRef: sentinelRef,
+    setupInfiniteScrollObserver,
+    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,
+    loadMoreData,
+    resetAccumulatedData,
     accumulatedDataCount: accumulatingStateRef.current.accumulatedData.length
   };
-};
+};
+export {
+  usePagination
+};