@wavemaker/react-runtime 11.14.1-15.6409

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

@@ -0,0 +1,796 @@
+"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;
+};
+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,
+    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];
+
+  // Infinite scroll state
+  var _useState3 = (0, _react.useState)({
+      accumulatedData: [],
+      lastLoadedPage: 0,
+      isAccumulating: navigation === "Scroll",
+      isInitialized: false
+    }),
+    infiniteScrollState = _useState3[0],
+    setInfiniteScrollState = _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);
+
+  // Refs for infinite scroll
+  var observerRef = (0, _react.useRef)(null);
+  var sentinelRef = (0, _react.useRef)(null);
+  var infiniteScrollStateRef = (0, _react.useRef)(infiniteScrollState);
+
+  // Keep ref in sync with state
+  (0, _react.useEffect)(function () {
+    infiniteScrollStateRef.current = infiniteScrollState;
+  }, [infiniteScrollState]);
+
+  // 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"];
+  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 scroll mode, we need to accumulate data instead of replacing
+          if (isScrollMode && response && response.data) {
+            // Get the new accumulated data using ref to avoid circular dependency
+            var currentAccumulatedData = infiniteScrollStateRef.current.accumulatedData;
+
+            // Ensure unique row IDs using the existing utility
+            var newDataWithIds = (0, _utils.addUniqueRowIds)(response.data);
+            var newAccumulatedData = [].concat((0, _toConsumableArray2["default"])(currentAccumulatedData), (0, _toConsumableArray2["default"])(newDataWithIds));
+            setInfiniteScrollState(function (prev) {
+              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 infinite scroll
+  var loadMoreData = (0, _react.useCallback)(function () {
+    if (navigation !== "Scroll" || !isServerSidePagination || isLastPage || isFetchingRef.current) {
+      return;
+    }
+    var nextPage = infiniteScrollStateRef.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(null, widgetInstance, nextPage);
+      }
+      if (setIsLoadingMore) {
+        setIsLoadingMore(false);
+      }
+    })["catch"](function () {
+      if (setIsLoadingMore) {
+        setIsLoadingMore(false);
+      }
+    });
+  }, [navigation, isServerSidePagination, isLastPage, setIsLoadingMore, datasourceInvoke, paginationState.currentMaxResults, onPaginationChange, widgetInstance]);
+
+  // Set up intersection observer for infinite scroll
+  var setupInfiniteScrollObserver = (0, _react.useCallback)(function (sentinel) {
+    // Clean up existing observer
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    if (!sentinel || navigation !== "Scroll" || !infiniteScrollStateRef.current.isInitialized) {
+      return;
+    }
+
+    // Create new observer
+    observerRef.current = new IntersectionObserver(function (entries) {
+      var entry = entries[0];
+      // Only trigger if initialized, intersecting, not last page, and not already fetching
+      if (entry.isIntersecting && infiniteScrollStateRef.current.isInitialized && !isLastPage && !isFetchingRef.current) {
+        loadMoreData();
+      }
+    }, {
+      root: null,
+      rootMargin: "100px",
+      // Start loading 100px before reaching the bottom
+      threshold: 0.1
+    });
+    observerRef.current.observe(sentinel);
+  }, [navigation, isLastPage, loadMoreData]);
+
+  // 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.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;
+    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]);
+
+  // Set pagination values
+  var setPagingValues = (0, _react.useCallback)(function (newVal) {
+    // For scroll mode with server-side pagination, special handling
+    if (navigation === "Scroll" && isServerSidePagination) {
+      // Use ref to check accumulated data to avoid circular dependency
+      var currentAccumulatedData = infiniteScrollStateRef.current.accumulatedData;
+
+      // Only update on initial load (when accumulated data is empty)
+      if (currentAccumulatedData.length === 0 && (0, _lodash.isArray)(newVal)) {
+        // Ensure initial data has unique IDs using the existing utility
+        var initialDataWithIds = (0, _utils.addUniqueRowIds)(newVal);
+        setInfiniteScrollState(function (prev) {
+          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 scroll mode, always use accumulated data
+        setDataState(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            fullData: currentAccumulatedData,
+            result: currentAccumulatedData
+          });
+        });
+      }
+      // Always return early for scroll mode to prevent normal pagination logic
+      return;
+    } else {
+      // Store the data in fullData. This is used for client side searching without modifying the actual dataset
+      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]);
+
+  // 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) {
+    // 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(null, 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;
+          onSetRecord(null, widgetInstance, newPage, data);
+        }
+
+        // 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(null, 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;
+        onSetRecord(null, widgetInstance, newPage, data);
+      }
+
+      // Clear loading state immediately - no delay needed for client-side pagination
+      if (setIsLoadingMore) {
+        setIsLoadingMore(false);
+      }
+    }
+  }, [isServerSidePagination, datasourceInvoke, onPaginationChange, onSetRecord, widgetInstance, paginationState, dataState.fullData, setIsLoadingMore]);
+
+  // 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);
+    }
+  }, [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);
+    }
+  }, [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;
+      var fullData = dataState.fullData;
+      var firstRow = (currentPage - 1) * currentMaxResults;
+      var startIndex = firstRow;
+      var data = (0, _lodash.isArray)(fullData) ? fullData.slice(startIndex, startIndex + currentMaxResults) : fullData;
+      onSetRecord(null, widgetInstance, currentPage, data);
+    }
+    goToPage();
+  }, [goToPage, validateCurrentPage, onSetRecord, paginationState, dataState.fullData, widgetInstance]);
+
+  // 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(null, widgetInstance, 1);
+        }
+
+        // Call onSetRecord with the new page data
+        if (onSetRecord) {
+          var data = (0, _lodash.isArray)(dataState.fullData) ? dataState.fullData.slice(0, pageSize) : dataState.fullData;
+          onSetRecord(null, widgetInstance, 1, data);
+        }
+
+        // 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]);
+
+  // Effect for navigation controls
+  (0, _react.useEffect)(function () {
+    setNavcontrols(getValidNavControl(navigation));
+
+    // Reset infinite scroll state when navigation changes
+    if (navigation === "Scroll") {
+      setInfiniteScrollState({
+        accumulatedData: [],
+        lastLoadedPage: 0,
+        isAccumulating: true,
+        isInitialized: false
+      });
+    }
+  }, [navigation]);
+
+  // for dataset changes
+  (0, _react.useEffect)(function () {
+    if (dataset !== undefined) {
+      setPagingValues(dataset);
+    }
+  }, [dataset, setPagingValues]);
+
+  // 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]);
+
+  // Re-setup observer when initialization state changes
+  (0, _react.useEffect)(function () {
+    if (infiniteScrollState.isInitialized && sentinelRef.current && navigation === "Scroll") {
+      setupInfiniteScrollObserver(sentinelRef.current);
+    }
+  }, [infiniteScrollState.isInitialized, navigation, setupInfiniteScrollObserver]);
+
+  // 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" && infiniteScrollStateRef.current.lastLoadedPage > 1,
+    hasMoreData: !isLastPage && navigation === "Scroll"
+  };
+};