@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.317

package/components/data/pagination/index.js

@@ -1,454 +1,401 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _hooks = require("./hooks");
-var _components = require("./components");
-var _constants = require("../list/utils/constants");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
-var __jsx = _react["default"].createElement;
-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; }
-var WmPagination = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var name = props.name,
-    dataset = props.dataset,
-    _props$maxResults = props.maxResults,
-    maxResults = _props$maxResults === void 0 ? 10 : _props$maxResults,
-    currentPage = props.currentPage,
-    _props$navigation = props.navigation,
-    navigation = _props$navigation === void 0 ? _constants.LIST_NAVIGATION_TYPES.BASIC : _props$navigation,
-    navigationsize = props.navigationsize,
-    _props$navigationalig = props.navigationalign,
-    navigationalign = _props$navigationalig === void 0 ? _constants.LIST_ALIGN.LEFT : _props$navigationalig,
-    _props$showrecordcoun = props.showrecordcount,
-    showrecordcount = _props$showrecordcoun === void 0 ? false : _props$showrecordcoun,
-    _props$maxsize = props.maxsize,
-    maxsize = _props$maxsize === void 0 ? 5 : _props$maxsize,
-    _props$boundarylinks = props.boundarylinks,
-    boundarylinks = _props$boundarylinks === void 0 ? false : _props$boundarylinks,
-    _props$directionlinks = props.directionlinks,
-    directionlinks = _props$directionlinks === void 0 ? true : _props$directionlinks,
-    _props$allowpagesizec = props.allowpagesizechange,
-    allowpagesizechange = _props$allowpagesizec === void 0 ? false : _props$allowpagesizec,
-    _props$pagesizeoption = props.pagesizeoptions,
-    pagesizeoptions = _props$pagesizeoption === void 0 ? "5,10,20,50,100" : _props$pagesizeoption,
-    className = props.className,
-    styles = props.styles,
-    listener = props.listener,
-    onPaginationChange = props.onPaginationChange,
-    onSetRecord = props.onSetRecord,
-    onPageSizeChange = props.onPageSizeChange,
-    datasource = props.datasource,
-    isLoadingMore = props.isLoadingMore,
-    setIsLoadingMore = props.setIsLoadingMore,
-    isServerSidePagination = props.isServerSidePagination,
-    onDataUpdate = props.onDataUpdate,
-    _props$ondemandmessag = props.ondemandmessage,
-    ondemandmessage = _props$ondemandmessag === void 0 ? "Load More" : _props$ondemandmessag,
-    _props$viewlessmessag = props.viewlessmessage,
-    viewlessmessage = _props$viewlessmessag === void 0 ? "View Less" : _props$viewlessmessag,
-    _props$showviewlessbu = props.showviewlessbutton,
-    showviewlessbutton = _props$showviewlessbu === void 0 ? false : _props$showviewlessbu,
-    listDirection = props.listDirection,
-    scrollContainerRef = props.scrollContainerRef;
-
-  // Custom hooks for pagination logic and navigation sizing
-  var pagination = (0, _hooks.usePagination)({
-    dataset: dataset,
-    maxResults: maxResults,
-    currentPage: currentPage,
-    navigation: navigation,
-    name: name,
-    listener: listener,
-    onPaginationChange: onPaginationChange,
-    onSetRecord: onSetRecord,
-    onPageSizeChange: onPageSizeChange,
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { memo, useMemo, useEffect } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import { usePagination, useNavigationSize } from "./hooks";
+import {
+  BasicPagination,
+  ClassicPagination,
+  PagerNavigation,
+  TotalRecords,
+  PageSizeSelector
+} from "./components";
+import { LIST_ALIGN, LIST_NAVIGATION_TYPES } from "../list/utils/constants";
+const WmPagination = memo((props) => {
+  const {
+    name,
+    dataset,
+    maxResults = 10,
+    currentPage,
+    navigation = LIST_NAVIGATION_TYPES.BASIC,
+    navigationsize,
+    navigationalign = LIST_ALIGN.LEFT,
+    showrecordcount = false,
+    maxsize = 5,
+    boundarylinks = false,
+    directionlinks = true,
+    allowpagesizechange = false,
+    pagesizeoptions = "5,10,20,50,100",
+    className,
+    styles,
+    listener,
+    onPaginationChange,
+    onSetRecord,
+    onPageSizeChange,
+    datasource,
+    isLoadingMore,
+    setIsLoadingMore,
+    isServerSidePagination,
+    onDataUpdate,
+    // On-Demand navigation props
+    ondemandmessage = "Load More",
+    viewlessmessage = "View Less",
+    showviewlessbutton = false,
+    listDirection,
+    scrollContainerRef
+  } = props;
+  const pagination = usePagination({
+    dataset,
+    maxResults,
+    currentPage,
+    navigation,
+    name,
+    listener,
+    onPaginationChange,
+    onSetRecord,
+    onPageSizeChange,
     paginationMeta: props.paginationMeta,
     totalItems: props.totalItems,
-    datasource: datasource,
-    isLoadingMore: isLoadingMore,
-    setIsLoadingMore: setIsLoadingMore,
-    isServerSidePagination: isServerSidePagination,
-    listDirection: listDirection,
-    scrollContainerRef: scrollContainerRef,
+    datasource,
+    isLoadingMore,
+    setIsLoadingMore,
+    isServerSidePagination,
+    listDirection,
+    scrollContainerRef,
     sentinelRef: props.sentinelRef,
     datasourceInvokeOptions: props.datasourceInvokeOptions
   });
-
-  // Notify parent component when data changes in Scroll or On-Demand mode
-  var prevResultLengthRef = _react["default"].useRef(0);
-  _react["default"].useEffect(function () {
-    var isAccumulatingMode = navigation === "Scroll" || navigation === "On-Demand";
+  const prevResultLengthRef = React.useRef(0);
+  React.useEffect(() => {
+    const isAccumulatingMode = navigation === "Scroll" || navigation === "On-Demand";
     if (isAccumulatingMode && onDataUpdate && pagination.result) {
-      // Only update if the result length has changed (new data added)
       if (pagination.result.length !== prevResultLengthRef.current) {
         prevResultLengthRef.current = pagination.result.length;
         onDataUpdate(pagination.result);
       }
     }
   }, [navigation, onDataUpdate, pagination.result]);
-  var _useNavigationSize = (0, _hooks.useNavigationSize)({
-      navigation: navigation,
-      navigationsize: navigationsize
-    }),
-    navigationClass = _useNavigationSize.navigationClass;
-
-  // Attach dataNavigator API to pagination widget proxy (like Angular's @ViewChild)
-  // Update properties every render so they stay current (like Angular component instance)
-  (0, _react.useEffect)(function () {
-    var _listener$Widgets, _listener$Widgets2, _props$onPaginationWi;
-    if (!name || !(listener !== null && listener !== void 0 && (_listener$Widgets = listener.Widgets) !== null && _listener$Widgets !== void 0 && _listener$Widgets[name])) return;
-    var paginationWidget = listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name];
-
-    // Spread entire pagination object to avoid manual property copying
-    // This includes: currentPage, pageCount, dataSize, result, navigatePage, etc.
+  const { navigationClass } = useNavigationSize({
+    navigation,
+    navigationsize
+  });
+  useEffect(() => {
+    var _a, _b, _c;
+    if (!name || !((_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name])) return;
+    const paginationWidget = (_b = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b[name];
     Object.assign(paginationWidget, pagination, {
       // Add convenience navigation methods
-      goToFirstPage: function goToFirstPage() {
-        return pagination.navigatePage("first");
-      },
-      goToLastPage: function goToLastPage() {
-        return pagination.navigatePage("last");
-      },
-      goToNextPage: function goToNextPage() {
-        return pagination.navigatePage("next");
-      },
-      goToPreviousPage: function goToPreviousPage() {
-        return pagination.navigatePage("prev");
-      },
+      goToFirstPage: () => pagination.navigatePage("first"),
+      goToLastPage: () => pagination.navigatePage("last"),
+      goToNextPage: () => pagination.navigatePage("next"),
+      goToPreviousPage: () => pagination.navigatePage("prev"),
       actualPageSize: pagination.currentMaxResults
     });
-
-    // Notify parent once on mount
-    props === null || props === void 0 || (_props$onPaginationWi = props.onPaginationWidgetReady) === null || _props$onPaginationWi === void 0 || _props$onPaginationWi.call(props, paginationWidget);
-  }, [name, pagination, props === null || props === void 0 ? void 0 : props.onPaginationWidgetReady]);
-
-  // Memoized flex container styles for better performance
-  var flexContainerStyles = (0, _react.useMemo)(function () {
-    var baseStyles = {
+    (_c = props == null ? void 0 : props.onPaginationWidgetReady) == null ? void 0 : _c.call(props, paginationWidget);
+  }, [name, pagination, props == null ? void 0 : props.onPaginationWidgetReady]);
+  const flexContainerStyles = useMemo(() => {
+    const baseStyles = {
       display: "flex",
       alignItems: "center",
       width: "100%",
       gap: 2
     };
-
-    // When showrecordcount is false, align based on navigationalign
-    // When showrecordcount is true, use space-between for proper distribution
     if (!showrecordcount) {
-      return _objectSpread(_objectSpread({}, baseStyles), {}, {
+      return __spreadProps(__spreadValues({}, baseStyles), {
         justifyContent: navigationalign === "right" ? "flex-end" : navigationalign === "center" ? "center" : "flex-start"
       });
     }
-    return _objectSpread(_objectSpread({}, baseStyles), {}, {
+    return __spreadProps(__spreadValues({}, baseStyles), {
       justifyContent: "space-between"
     });
   }, [showrecordcount, navigationalign]);
-
-  // Memoized common page size selector
-  var pageSizeSelector = (0, _react.useMemo)(function () {
-    var _props$paginationMeta;
+  const pageSizeSelector = useMemo(() => {
+    var _a;
     if (!allowpagesizechange) return null;
-
-    // Parse page size options to get the minimum value
-    var parsedOptions = pagesizeoptions.split(",").map(function (opt) {
-      return parseInt(opt.trim(), 10);
-    }).filter(function (opt) {
-      return !isNaN(opt);
-    });
-
-    // Include paginationMeta.size if available
-    if ((_props$paginationMeta = props.paginationMeta) !== null && _props$paginationMeta !== void 0 && _props$paginationMeta.size && !parsedOptions.includes(props.paginationMeta.size)) {
+    const parsedOptions = pagesizeoptions.split(",").map((opt) => parseInt(opt.trim(), 10)).filter((opt) => !isNaN(opt));
+    if (((_a = props.paginationMeta) == null ? void 0 : _a.size) && !parsedOptions.includes(props.paginationMeta.size)) {
       parsedOptions.push(props.paginationMeta.size);
     }
-    var minPageSize = parsedOptions.length > 0 ? Math.min.apply(Math, (0, _toConsumableArray2["default"])(parsedOptions)) : 0;
-
-    // Hide page size selector if total records is less than or equal to the minimum page size
-    // since all records are already visible
+    const minPageSize = parsedOptions.length > 0 ? Math.min(...parsedOptions) : 0;
     if (pagination.dataSize < minPageSize) return null;
-    return __jsx(_components.PageSizeSelector, {
-      pagesizeoptions: pagesizeoptions,
-      maxResults: pagination.currentMaxResults,
-      currentPage: pagination.currentPage,
-      dataSize: pagination.dataSize,
-      paginationMeta: props.paginationMeta,
-      onPageSizeChange: pagination.handlePageSizeChange
-    });
-  }, [allowpagesizechange, pagesizeoptions, pagination.currentMaxResults, pagination.currentPage, pagination.dataSize, pagination.handlePageSizeChange, props.paginationMeta]);
-
-  // Simple layout helper function - not memoized to avoid dependency issues
-  var renderWithLayout = function renderWithLayout(children, recordCountVariant) {
-    // When showrecordcount is false, use simple flex container with alignment
+    return /* @__PURE__ */ jsx(
+      PageSizeSelector,
+      {
+        pagesizeoptions,
+        maxResults: pagination.currentMaxResults,
+        currentPage: pagination.currentPage,
+        dataSize: pagination.dataSize,
+        paginationMeta: props.paginationMeta,
+        onPageSizeChange: pagination.handlePageSizeChange
+      }
+    );
+  }, [
+    allowpagesizechange,
+    pagesizeoptions,
+    pagination.currentMaxResults,
+    pagination.currentPage,
+    pagination.dataSize,
+    pagination.handlePageSizeChange,
+    props.paginationMeta
+  ]);
+  const renderWithLayout = (children, recordCountVariant) => {
     if (!showrecordcount) {
-      return __jsx(_Box["default"], {
-        sx: flexContainerStyles
-      }, __jsx(_Box["default"], {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          gap: 2
-        }
-      }, children));
+      return /* @__PURE__ */ jsx(Box, { sx: flexContainerStyles, children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children }) });
     }
-
-    // When showrecordcount is true, use complex layout with proper distribution
     if (navigationalign === "center") {
-      return __jsx(_Box["default"], {
-        sx: flexContainerStyles
-      }, __jsx(_Box["default"], {
-        sx: {
-          flex: 1
-        }
-      }), __jsx(_Box["default"], {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          gap: 2
-        }
-      }, children, __jsx(_components.TotalRecords, {
-        dataSize: pagination.dataSize,
-        variant: recordCountVariant
-      })), __jsx(_Box["default"], {
-        sx: {
-          flex: 1
-        }
-      }));
+      return /* @__PURE__ */ jsxs(Box, { sx: flexContainerStyles, children: [
+        /* @__PURE__ */ jsx(Box, { sx: { flex: 1 } }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+          children,
+          /* @__PURE__ */ jsx(TotalRecords, { dataSize: pagination.dataSize, variant: recordCountVariant })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { sx: { flex: 1 } })
+      ] });
     }
-    return __jsx(_Box["default"], {
-      sx: flexContainerStyles
-    }, __jsx(_Box["default"], {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: 2,
-        order: navigationalign === "right" ? 2 : 1
-      }
-    }, children), __jsx(_Box["default"], {
-      sx: {
-        order: navigationalign === "right" ? 1 : 2
-      }
-    }, __jsx(_components.TotalRecords, {
-      dataSize: pagination.dataSize,
-      variant: recordCountVariant
-    })));
+    return /* @__PURE__ */ jsxs(Box, { sx: flexContainerStyles, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 2,
+            order: navigationalign === "right" ? 2 : 1
+          },
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { sx: { order: navigationalign === "right" ? 1 : 2 }, children: /* @__PURE__ */ jsx(TotalRecords, { dataSize: pagination.dataSize, variant: recordCountVariant }) })
+    ] });
   };
-
-  // Render navigation components directly - avoid over-memoization
-  var renderNavigation = function renderNavigation() {
-    // Only show navigation when there are multiple pages (i.e., not all items are visible on current page)
-    var showNavigation = pagination.pageCount > 1;
+  const renderNavigation = () => {
+    const showNavigation = pagination.pageCount > 1;
     switch (pagination.navcontrols) {
       case "Basic":
-        return showNavigation ? __jsx(_components.BasicPagination, {
-          pageCount: pagination.pageCount,
-          currentPage: pagination.currentPage,
-          dataSize: pagination.dataSize,
-          maxResults: pagination.currentMaxResults,
-          boundarylinks: boundarylinks,
-          directionlinks: directionlinks,
-          navigationsize: navigationsize,
-          navigationClass: navigationClass,
-          maxsize: maxsize,
-          onPageChange: pagination.handlePageChange
-        }) : null;
+        return showNavigation ? /* @__PURE__ */ jsx(
+          BasicPagination,
+          {
+            pageCount: pagination.pageCount,
+            currentPage: pagination.currentPage,
+            dataSize: pagination.dataSize,
+            maxResults: pagination.currentMaxResults,
+            boundarylinks,
+            directionlinks,
+            navigationsize,
+            navigationClass,
+            maxsize,
+            onPageChange: pagination.handlePageChange
+          }
+        ) : null;
       case "Classic":
-        return showNavigation ? __jsx(_components.ClassicPagination, {
-          currentPage: pagination.currentPage,
-          pageCount: pagination.pageCount,
-          dataSize: pagination.dataSize,
-          maxResults: pagination.currentMaxResults,
-          navigationClass: navigationClass,
-          showrecordcount: false,
-          isDisableFirst: pagination.isDisableFirst,
-          isDisablePrevious: pagination.isDisablePrevious,
-          isDisableNext: pagination.isDisableNext,
-          isDisableLast: pagination.isDisableLast,
-          isDisableCurrent: pagination.isDisableCurrent,
-          isDisableCount: pagination.isDisableCount,
-          onNavigate: pagination.navigatePage,
-          onInputChange: pagination.handleInputChange,
-          onModelChange: pagination.onModelChange,
-          onKeyDown: pagination.onKeyDown
-        }) : null;
+        return showNavigation ? /* @__PURE__ */ jsx(
+          ClassicPagination,
+          {
+            currentPage: pagination.currentPage,
+            pageCount: pagination.pageCount,
+            dataSize: pagination.dataSize,
+            maxResults: pagination.currentMaxResults,
+            navigationClass,
+            showrecordcount: false,
+            isDisableFirst: pagination.isDisableFirst,
+            isDisablePrevious: pagination.isDisablePrevious,
+            isDisableNext: pagination.isDisableNext,
+            isDisableLast: pagination.isDisableLast,
+            isDisableCurrent: pagination.isDisableCurrent,
+            isDisableCount: pagination.isDisableCount,
+            onNavigate: pagination.navigatePage,
+            onInputChange: pagination.handleInputChange,
+            onModelChange: pagination.onModelChange,
+            onKeyDown: pagination.onKeyDown
+          }
+        ) : null;
       case "Pager":
-        return showNavigation ? __jsx(_components.PagerNavigation, {
-          navigationClass: navigationClass,
-          isDisablePrevious: pagination.isDisablePrevious,
-          isDisableNext: pagination.isDisableNext,
-          onNavigate: pagination.navigatePage
-        }) : null;
+        return showNavigation ? /* @__PURE__ */ jsx(
+          PagerNavigation,
+          {
+            navigationClass,
+            isDisablePrevious: pagination.isDisablePrevious,
+            isDisableNext: pagination.isDisableNext,
+            onNavigate: pagination.navigatePage
+          }
+        ) : null;
       default:
         return null;
     }
   };
-
-  // Simple render function - avoid over-optimization that causes re-renders
-  var renderPaginationContent = function renderPaginationContent() {
+  const renderPaginationContent = () => {
     if (navigation === "None" || navigation === "Scroll") {
       return null;
     }
-    var navigationComponent = renderNavigation();
-    var content = __jsx(_react["default"].Fragment, null, pageSizeSelector, navigationComponent);
-
-    // Single-page datasets have no nav arrows or page-size row; still show Total records when enabled
+    const navigationComponent = renderNavigation();
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      pageSizeSelector,
+      navigationComponent
+    ] });
     if (!pageSizeSelector && !navigationComponent && !showrecordcount) {
       return null;
     }
-
-    // Get the appropriate record count variant based on navigation type
-    var recordCountVariant = pagination.navcontrols === "Classic" ? "Classic" : "Basic";
+    const recordCountVariant = pagination.navcontrols === "Classic" ? "Classic" : "Basic";
     return renderWithLayout(content, recordCountVariant);
   };
-
-  // Render On-Demand navigation content
   if (pagination.navcontrols === "On-Demand") {
-    // Check if there's data to show and it's more than one page worth
-    // Don't show navigation if data is empty or already shows all items
-    var hasEnoughData = pagination.dataSize > 0 && pagination.dataSize > pagination.currentMaxResults;
-
-    // Determine if we should show Load More button
-    // Only show when there's more data AND accumulated data is less than total
-    var shouldShowLoadMore = hasEnoughData && pagination.hasMoreData && pagination.accumulatedDataCount < pagination.dataSize;
-
-    // Determine if we should show View Less button
-    // Show when all data is loaded, showviewlessbutton is true, and more than first page is loaded
-    var shouldShowViewLess = hasEnoughData && !pagination.hasMoreData && showviewlessbutton && pagination.accumulatedDataCount > pagination.currentMaxResults;
-
-    // Determine which button to show (if any)
-    var showButton = shouldShowLoadMore || shouldShowViewLess;
-
-    // If nothing to show and not loading, return null
+    const hasEnoughData = pagination.dataSize > 0 && pagination.dataSize > pagination.currentMaxResults;
+    const shouldShowLoadMore = hasEnoughData && pagination.hasMoreData && pagination.accumulatedDataCount < pagination.dataSize;
+    const shouldShowViewLess = hasEnoughData && !pagination.hasMoreData && showviewlessbutton && pagination.accumulatedDataCount > pagination.currentMaxResults;
+    const showButton = shouldShowLoadMore || shouldShowViewLess;
     if (!showButton && !pagination.isLoadingMore) {
       return null;
     }
-
-    // Determine button properties based on state
-    var buttonText = shouldShowViewLess ? viewlessmessage : ondemandmessage;
-    var buttonAction = shouldShowViewLess ? pagination.resetAccumulatedData : pagination.loadMoreData;
-    return __jsx(_Box["default"], {
-      component: "div",
-      className: (0, _clsx["default"])("on-demand-datagrid", className),
-      sx: _objectSpread({}, styles),
-      id: name
-    }, pagination.isLoadingMore && __jsx(_Box["default"], {
-      component: "div",
-      className: "loading-data-msg spin-icon-in-center",
-      sx: {
-        textAlign: "center",
-        padding: "16px"
-      }
-    }, __jsx(_Box["default"], {
-      component: "span"
-    }, __jsx(_Box["default"], {
-      component: "i",
-      className: "app-icon panel-icon fa-spin fa fa-circle-o-notch",
-      "aria-hidden": "true"
-    }), __jsx(_Box["default"], {
-      component: "span",
-      className: "sr-only"
-    }, "Loading"), __jsx(_Box["default"], {
-      component: "span",
-      className: "loading-text",
-      sx: {
-        marginLeft: 1
+    const buttonText = shouldShowViewLess ? viewlessmessage : ondemandmessage;
+    const buttonAction = shouldShowViewLess ? pagination.resetAccumulatedData : pagination.loadMoreData;
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "div",
+        className: clsx("on-demand-datagrid", className),
+        sx: __spreadValues({}, styles),
+        id: name,
+        children: [
+          pagination.isLoadingMore && /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "div",
+              className: "loading-data-msg spin-icon-in-center",
+              sx: { textAlign: "center", padding: "16px" },
+              children: /* @__PURE__ */ jsxs(Box, { component: "span", children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "i",
+                    className: "app-icon panel-icon fa-spin fa fa-circle-o-notch",
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", children: "Loading" }),
+                /* @__PURE__ */ jsx(Box, { component: "span", className: "loading-text", sx: { marginLeft: 1 }, children: "Loading..." })
+              ] })
+            }
+          ),
+          showButton && !pagination.isLoadingMore && /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "a",
+              className: "app-button btn btn-block on-demand-load-btn",
+              onClick: buttonAction,
+              sx: {
+                cursor: "pointer",
+                display: "block",
+                textAlign: "center",
+                padding: "10px",
+                "&:hover": {
+                  textDecoration: "none"
+                }
+              },
+              children: buttonText
+            }
+          )
+        ]
       }
-    }, "Loading..."))), showButton && !pagination.isLoadingMore && __jsx(_Box["default"], {
-      component: "a",
-      className: "app-button btn btn-block on-demand-load-btn",
-      onClick: buttonAction,
-      sx: {
-        cursor: "pointer",
-        display: "block",
-        textAlign: "center",
-        padding: "10px",
-        "&:hover": {
-          textDecoration: "none"
-        }
-      }
-    }, buttonText));
+    );
   }
-
-  // Render infinite scroll content
   if (pagination.navcontrols === "Scroll") {
-    var _hasEnoughData = pagination.dataSize > 0 && pagination.dataSize > pagination.currentMaxResults;
-    var shouldShowViewLessInScroll = _hasEnoughData && !pagination.hasMoreData && showviewlessbutton && pagination.accumulatedDataCount > pagination.currentMaxResults;
-    var showVerticalScrollSentinel = listDirection === "column" || listDirection === "vertical";
-    return __jsx(_Box["default"], {
-      className: (0, _clsx["default"])("app-datanavigator clearfix", className),
-      sx: _objectSpread(_objectSpread({}, styles), {}, {
-        width: "100%",
-        position: "relative"
-      }),
-      id: name
-    }, pagination.isLoadingMore && __jsx(_Box["default"], {
-      sx: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        padding: 2,
-        width: "100%",
-        textAlign: "center"
-      }
-    }, __jsx(_Box["default"], {
-      className: "status"
-    }, __jsx("i", {
-      className: "fa fa-circle-o-notch fa-spin"
-    }), __jsx(_Box["default"], {
-      component: "span",
-      className: "message",
-      sx: {
-        marginLeft: 1
+    const hasEnoughData = pagination.dataSize > 0 && pagination.dataSize > pagination.currentMaxResults;
+    const shouldShowViewLessInScroll = hasEnoughData && !pagination.hasMoreData && showviewlessbutton && pagination.accumulatedDataCount > pagination.currentMaxResults;
+    const showVerticalScrollSentinel = listDirection === "column" || listDirection === "vertical";
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: clsx("app-datanavigator clearfix", className),
+        sx: __spreadProps(__spreadValues({}, styles), {
+          width: "100%",
+          position: "relative"
+        }),
+        id: name,
+        children: [
+          pagination.isLoadingMore && /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                padding: 2,
+                width: "100%",
+                textAlign: "center"
+              },
+              children: /* @__PURE__ */ jsxs(Box, { className: "status", children: [
+                /* @__PURE__ */ jsx("i", { className: "fa fa-circle-o-notch fa-spin" }),
+                /* @__PURE__ */ jsx(Box, { component: "span", className: "message", sx: { marginLeft: 1 }, children: "Loading..." })
+              ] })
+            }
+          ),
+          shouldShowViewLessInScroll && /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "a",
+              className: "app-button btn btn-block on-demand-load-btn",
+              onClick: pagination.resetAccumulatedData,
+              children: viewlessmessage
+            }
+          ),
+          showVerticalScrollSentinel && /* @__PURE__ */ jsx(
+            Box,
+            {
+              ref: (el) => {
+                if (pagination.sentinelRef) {
+                  pagination.sentinelRef.current = el;
+                }
+              },
+              sx: {
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: "1px",
+                visibility: "hidden",
+                pointerEvents: "none"
+              },
+              "aria-hidden": "true"
+            }
+          )
+        ]
       }
-    }, "Loading..."))), shouldShowViewLessInScroll && __jsx(_Box["default"], {
-      component: "a",
-      className: "app-button btn btn-block on-demand-load-btn",
-      onClick: pagination.resetAccumulatedData
-    }, viewlessmessage), showVerticalScrollSentinel && __jsx(_Box["default"], {
-      ref: function ref(el) {
-        if (pagination.sentinelRef) {
-          pagination.sentinelRef.current = el;
-        }
-      },
-      sx: {
-        position: "absolute",
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: "1px",
-        visibility: "hidden",
-        pointerEvents: "none"
-      },
-      "aria-hidden": "true"
-    }));
+    );
   }
-  return __jsx(_Box["default"], {
-    className: (0, _clsx["default"])("app-datanavigator clearfix", className),
-    sx: _objectSpread(_objectSpread({}, styles), {}, {
-      width: "100%"
-    }),
-    id: name,
-    onClick: function onClick(e) {
-      return e.stopPropagation();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: clsx("app-datanavigator clearfix", className),
+      sx: __spreadProps(__spreadValues({}, styles), {
+        width: "100%"
+      }),
+      id: name,
+      onClick: (e) => e.stopPropagation(),
+      children: renderPaginationContent()
     }
-  }, renderPaginationContent());
+  );
 });
 WmPagination.displayName = "WmPagination";
-
-/**
- * The WmPagination component is used to navigate through multiple pages of data.
- *
- * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-pagination--showcase)
- *
- * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-pagination--docs#tab-overview)
- *
- * @param props - {@link WmPaginationProps}
- */
-var _default = exports["default"] = WmPagination;
+var pagination_default = WmPagination;
+export {
+  pagination_default as default
+};