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

package/components/data/pagination/components/BasicPagination.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BasicPagination = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Pagination = _interopRequireDefault(require("@mui/material/Pagination"));
+var _PaginationItem = _interopRequireDefault(require("@mui/material/PaginationItem"));
+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;
+// Constants for class names
+var CUSTOM_CLASSES = ["active", "disabled", "pagination-page", "pagination-prev", "pagination-next", "pagination-first", "pagination-last", "page-item"];
+var PAGE_ITEM_CLASS = "page-item";
+var PAGE_LINK_CLASS = "page-link";
+
+// Map MUI icon test IDs to pagination class names
+var ICON_TO_CLASS_MAP = {
+  NavigateBeforeIcon: "pagination-prev",
+  KeyboardArrowLeftIcon: "pagination-prev",
+  NavigateNextIcon: "pagination-next",
+  KeyboardArrowRightIcon: "pagination-next",
+  FirstPageIcon: "pagination-first",
+  LastPageIcon: "pagination-last"
+};
+var BasicPagination = exports.BasicPagination = function BasicPagination(_ref) {
+  var pageCount = _ref.pageCount,
+    currentPage = _ref.currentPage,
+    dataSize = _ref.dataSize,
+    maxResults = _ref.maxResults,
+    _ref$boundarylinks = _ref.boundarylinks,
+    boundarylinks = _ref$boundarylinks === void 0 ? false : _ref$boundarylinks,
+    _ref$directionlinks = _ref.directionlinks,
+    directionlinks = _ref$directionlinks === void 0 ? true : _ref$directionlinks,
+    navigationsize = _ref.navigationsize,
+    navigationClass = _ref.navigationClass,
+    _ref$maxsize = _ref.maxsize,
+    maxsize = _ref$maxsize === void 0 ? 5 : _ref$maxsize,
+    onPageChange = _ref.onPageChange;
+  var paginationRef = (0, _react.useRef)(null);
+  var addNavigationClasses = (0, _react.useCallback)(function (li, anchor, testId, isDisabled) {
+    if (!testId || !ICON_TO_CLASS_MAP[testId]) return;
+    var paginationClass = ICON_TO_CLASS_MAP[testId];
+    li.classList.add(paginationClass, PAGE_ITEM_CLASS);
+    if (isDisabled) {
+      li.classList.add("disabled");
+    }
+  }, []);
+  var updateClasses = (0, _react.useCallback)(function () {
+    if (!paginationRef.current) return;
+    var allLis = paginationRef.current.querySelectorAll(".MuiPagination-ul > li");
+    allLis.forEach(function (li) {
+      var _li$classList;
+      // Remove all custom classes first
+      (_li$classList = li.classList).remove.apply(_li$classList, CUSTOM_CLASSES);
+      var anchor = li.querySelector("a");
+      if (!anchor) return;
+      var isNavigationButton = anchor.classList.contains("MuiPaginationItem-previousNext");
+      var isPageButton = anchor.classList.contains("MuiPaginationItem-page");
+      var isDisabled = anchor.classList.contains("Mui-disabled");
+      var isSelected = anchor.classList.contains("Mui-selected");
+      if (isNavigationButton) {
+        var _svg$getAttribute;
+        var svg = anchor.querySelector("svg");
+        var testId = (_svg$getAttribute = svg === null || svg === void 0 ? void 0 : svg.getAttribute("data-testid")) !== null && _svg$getAttribute !== void 0 ? _svg$getAttribute : null;
+        addNavigationClasses(li, anchor, testId, isDisabled);
+      } else if (isPageButton) {
+        li.classList.add("pagination-page", PAGE_ITEM_CLASS);
+        if (isSelected) {
+          li.classList.add("active");
+        }
+      }
+
+      // Add page-link class to anchor if not already present
+      if (!anchor.classList.contains(PAGE_LINK_CLASS)) {
+        anchor.classList.add(PAGE_LINK_CLASS);
+      }
+    });
+  }, [addNavigationClasses]);
+  (0, _react.useEffect)(function () {
+    // Update classes immediately for instant visual feedback
+    updateClasses();
+
+    // Also schedule an update after a frame to catch any delayed MUI updates
+    var rafId = requestAnimationFrame(function () {
+      updateClasses();
+    });
+    return function () {
+      cancelAnimationFrame(rafId);
+    };
+  }, [currentPage, pageCount, updateClasses]);
+  return __jsx(_Box["default"], {
+    ref: paginationRef,
+    component: "nav",
+    role: "navigation",
+    className: "pagination basic",
+    "aria-label": "Showing Page ".concat(currentPage, " of ").concat(pageCount, " pages"),
+    sx: {
+      // Hide MUI SVG icons for navigation buttons since CSS ::before will provide the icons
+      "& .MuiPaginationItem-previousNext .MuiPaginationItem-icon": {
+        display: "none"
+      }
+    }
+  }, __jsx(_Pagination["default"], {
+    count: pageCount,
+    page: currentPage,
+    onChange: onPageChange,
+    showFirstButton: boundarylinks,
+    showLastButton: boundarylinks,
+    hidePrevButton: !directionlinks,
+    hideNextButton: !directionlinks,
+    size: navigationsize === "small" ? "small" : "medium",
+    siblingCount: Math.floor(maxsize / 2),
+    classes: {
+      ul: (0, _clsx["default"])("pagination", "basic", navigationClass)
+    },
+    renderItem: function renderItem(item) {
+      return __jsx(_PaginationItem["default"], (0, _extends2["default"])({}, item, {
+        sx: {
+          cursor: "pointer"
+        },
+        component: "a",
+        "aria-current": item.selected ? "true" : undefined,
+        "aria-disabled": item.disabled ? "true" : undefined
+      }));
+    }
+  }));
+};

package/components/data/pagination/components/ClassicPagination.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ClassicPaginationProps } from "./props";
+export declare const ClassicPagination: React.FC<ClassicPaginationProps>;

package/components/data/pagination/components/ClassicPagination.js

@@ -0,0 +1,191 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClassicPagination = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _InputBase = _interopRequireDefault(require("@mui/material/InputBase"));
+var _styles = require("@mui/material/styles");
+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;
+var StyledPaginationList = (0, _styles.styled)("ul")(function () {
+  return {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    padding: 0,
+    margin: 0,
+    listStyle: "none"
+  };
+});
+var StyledPaginationItem = (0, _styles.styled)("li")(function () {
+  return {
+    margin: "0 2px",
+    "&.disabled": {
+      opacity: 0.38,
+      pointerEvents: "none"
+    }
+  };
+});
+var StyledPageInput = (0, _styles.styled)(_InputBase["default"])(function () {
+  return {
+    width: "50px",
+    textAlign: "center",
+    "& input": {
+      textAlign: "center",
+      padding: "0 4px"
+    }
+  };
+});
+var ClassicPagination = exports.ClassicPagination = function ClassicPagination(_ref) {
+  var currentPage = _ref.currentPage,
+    pageCount = _ref.pageCount,
+    dataSize = _ref.dataSize,
+    maxResults = _ref.maxResults,
+    navigationClass = _ref.navigationClass,
+    _ref$showrecordcount = _ref.showrecordcount,
+    showrecordcount = _ref$showrecordcount === void 0 ? false : _ref$showrecordcount,
+    isDisableFirst = _ref.isDisableFirst,
+    isDisablePrevious = _ref.isDisablePrevious,
+    isDisableNext = _ref.isDisableNext,
+    isDisableLast = _ref.isDisableLast,
+    isDisableCurrent = _ref.isDisableCurrent,
+    isDisableCount = _ref.isDisableCount,
+    onNavigate = _ref.onNavigate,
+    onInputChange = _ref.onInputChange,
+    onModelChange = _ref.onModelChange,
+    onKeyDown = _ref.onKeyDown;
+  var inputRef = (0, _react.useRef)(null);
+  return __jsx(StyledPaginationList, {
+    className: (0, _clsx["default"])("pagination", "advanced", navigationClass)
+  }, __jsx(StyledPaginationItem, {
+    className: (0, _clsx["default"])({
+      disabled: isDisableFirst
+    })
+  }, __jsx(_IconButton["default"], {
+    title: _constants.APP_LOCALE.LABEL_FIRST,
+    name: "first",
+    onClick: function onClick(e) {
+      return onNavigate("first", e);
+    },
+    disabled: isDisableFirst,
+    "aria-disabled": isDisableFirst ? "true" : "false",
+    size: "small"
+  }, __jsx(_Box["default"], {
+    component: "span",
+    "aria-hidden": "true"
+  }, __jsx("i", {
+    className: "wi wi-first-page"
+  })), __jsx(_Box["default"], {
+    component: "span",
+    className: "sr-only"
+  }, "Go to first page ", isDisableFirst ? " , Disabled" : ""))), __jsx(StyledPaginationItem, {
+    className: (0, _clsx["default"])({
+      disabled: isDisablePrevious
+    })
+  }, __jsx(_IconButton["default"], {
+    title: _constants.APP_LOCALE.LABEL_PREVIOUS,
+    name: "prev",
+    onClick: function onClick(e) {
+      return onNavigate("prev", e);
+    },
+    disabled: isDisablePrevious,
+    "aria-disabled": isDisablePrevious ? "true" : "false",
+    size: "small"
+  }, __jsx(_Box["default"], {
+    component: "span",
+    "aria-hidden": "true"
+  }, __jsx("i", {
+    className: "wi wi-chevron-left"
+  })), __jsx(_Box["default"], {
+    component: "span",
+    className: "sr-only"
+  }, "Go to previous page ", isDisablePrevious ? ", Disabled" : ""))), __jsx(StyledPaginationItem, {
+    className: "pagecount"
+  }, __jsx(_Box["default"], {
+    component: "span",
+    "aria-label": "Change Page Number"
+  }, __jsx(StyledPageInput, {
+    value: currentPage,
+    onChange: onInputChange,
+    onBlur: onModelChange,
+    onKeyDown: onKeyDown,
+    disabled: isDisableCurrent,
+    inputProps: {
+      "aria-label": "Showing Page ".concat(currentPage, " of ").concat(pageCount),
+      type: "number",
+      min: 1,
+      max: pageCount
+    },
+    inputRef: inputRef
+  }))), __jsx(StyledPaginationItem, {
+    className: "disabled"
+  }, __jsx(_Box["default"], {
+    component: "span",
+    sx: {
+      mx: 1
+    },
+    hidden: isDisableCount
+  }, "/ ", pageCount)), __jsx(StyledPaginationItem, {
+    className: (0, _clsx["default"])({
+      disabled: isDisableNext
+    })
+  }, __jsx(_IconButton["default"], {
+    title: _constants.APP_LOCALE.LABEL_NEXT,
+    name: "next",
+    onClick: function onClick(e) {
+      return onNavigate("next", e);
+    },
+    disabled: isDisableNext,
+    "aria-disabled": isDisableNext ? "true" : "false",
+    size: "small"
+  }, __jsx(_Box["default"], {
+    component: "span",
+    "aria-hidden": "true"
+  }, __jsx("i", {
+    className: "wi wi-chevron-right"
+  })), __jsx(_Box["default"], {
+    component: "span",
+    className: "sr-only"
+  }, "Go to next page ", isDisableNext ? " , Disabled" : ""))), __jsx(StyledPaginationItem, {
+    className: (0, _clsx["default"])({
+      disabled: isDisableLast
+    })
+  }, __jsx(_IconButton["default"], {
+    title: _constants.APP_LOCALE.LABEL_LAST,
+    name: "last",
+    onClick: function onClick(e) {
+      return onNavigate("last", e);
+    },
+    disabled: isDisableLast,
+    "aria-disabled": isDisableLast ? "true" : "false",
+    size: "small"
+  }, __jsx(_Box["default"], {
+    component: "span",
+    "aria-hidden": "true"
+  }, __jsx("i", {
+    className: "wi wi-last-page"
+  })), __jsx(_Box["default"], {
+    component: "span",
+    className: "sr-only"
+  }, "Go to last page ", isDisableLast ? " , Disabled" : ""))), showrecordcount && __jsx(StyledPaginationItem, {
+    className: "totalcount disabled"
+  }, __jsx(_Box["default"], {
+    component: "span",
+    tabIndex: -1,
+    "aria-disabled": "true",
+    sx: {
+      display: "block",
+      padding: "6px 12px",
+      fontSize: "14px",
+      userSelect: "none"
+    }
+  }, _constants.APP_LOCALE.LABEL_TOTAL_RECORDS, ": ", dataSize)));
+};

package/components/data/pagination/components/InlinePagination.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare const InlineNavigation: React.FC<{
+    navigation: string;
+    currentPage: number;
+    totalPages: number;
+    noDataFound: boolean;
+    onPageChange: (page: number) => void;
+    children: React.ReactNode;
+    isLoading?: boolean;
+    showNavigation?: boolean;
+}>;

package/components/data/pagination/components/InlinePagination.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineNavigation = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _clsx = _interopRequireDefault(require("clsx"));
+var __jsx = _react["default"].createElement;
+// Inline Navigation Component
+var InlineNavigation = exports.InlineNavigation = function InlineNavigation(_ref) {
+  var navigation = _ref.navigation,
+    currentPage = _ref.currentPage,
+    totalPages = _ref.totalPages,
+    noDataFound = _ref.noDataFound,
+    onPageChange = _ref.onPageChange,
+    children = _ref.children,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$showNavigation = _ref.showNavigation,
+    showNavigation = _ref$showNavigation === void 0 ? true : _ref$showNavigation;
+  if (navigation !== "Inline" || noDataFound || !showNavigation) return __jsx(_react["default"].Fragment, null, children);
+  return __jsx(_material.Box, {
+    sx: {
+      display: "grid",
+      gridTemplateColumns: "auto 1fr auto",
+      alignItems: "center",
+      width: "100%"
+    }
+  }, __jsx(_material.Box, {
+    component: "div",
+    className: "app-datanavigator",
+    "aria-disabled": currentPage <= 1 || isLoading,
+    "aria-label": "Previous page navigation"
+  }, __jsx("ul", {
+    className: "pager"
+  }, __jsx("li", {
+    className: (0, _clsx["default"])("previous", {
+      disabled: currentPage <= 1 || isLoading
+    })
+  }, __jsx("a", {
+    href: "#",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      if (currentPage > 1 && !isLoading) {
+        onPageChange(currentPage - 1);
+      }
+    },
+    "aria-disabled": currentPage <= 1 || isLoading,
+    style: {
+      cursor: currentPage <= 1 || isLoading ? "not-allowed" : "pointer"
+    }
+  }, __jsx("i", {
+    className: "wi wi-chevron-left",
+    "aria-hidden": "true"
+  }), __jsx("span", {
+    className: "sr-only"
+  }, "Go to Previous page ", currentPage <= 1 || isLoading ? ", Disabled" : ""))))), __jsx(_material.Box, {
+    sx: {
+      opacity: isLoading ? 0.6 : 1,
+      transition: "opacity 0.2s"
+    }
+  }, children), __jsx(_material.Box, {
+    component: "div",
+    className: "app-datanavigator",
+    "aria-disabled": currentPage >= totalPages || isLoading,
+    "aria-label": "Next page navigation"
+  }, __jsx("ul", {
+    className: "pager"
+  }, __jsx("li", {
+    className: (0, _clsx["default"])("next", {
+      disabled: currentPage >= totalPages || isLoading
+    })
+  }, __jsx("a", {
+    href: "#",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      if (currentPage < totalPages && !isLoading) {
+        onPageChange(currentPage + 1);
+      }
+    },
+    "aria-disabled": currentPage >= totalPages || isLoading,
+    style: {
+      cursor: currentPage >= totalPages || isLoading ? "not-allowed" : "pointer"
+    }
+  }, __jsx("i", {
+    className: "wi wi-chevron-right",
+    "aria-hidden": "true"
+  }), __jsx("span", {
+    className: "sr-only"
+  }, "Go to Next page ", currentPage >= totalPages || isLoading ? ", Disabled" : ""))))), __jsx(_material.Box, {
+    component: "div",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    className: "sr-only"
+  }, "Page ", currentPage, " of ", totalPages));
+};

package/components/data/pagination/components/LoadingComponent.d.ts

@@ -0,0 +1,3 @@
+export default function LoadingComponent({ message }: {
+    message?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/components/data/pagination/components/LoadingComponent.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = LoadingComponent;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var __jsx = _react["default"].createElement;
+function LoadingComponent(_ref) {
+  var message = _ref.message;
+  return __jsx(_material.Box, {
+    className: "overlay",
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 10
+    }
+  }, __jsx(_material.Box, {
+    className: "status"
+  }, __jsx("i", {
+    className: "fa fa-circle-o-notch fa-spin"
+  }), __jsx(_material.Typography, {
+    component: "span",
+    className: "message"
+  }, message || "Loading...")));
+}

package/components/data/pagination/components/PageSizeSelector.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { PageSizeSelectorProps } from "./props";
+export declare const PageSizeSelector: React.NamedExoticComponent<PageSizeSelectorProps>;

package/components/data/pagination/components/PageSizeSelector.js

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PageSizeSelector = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _constants = require("../../list/utils/constants");
+var _store = require("@wavemaker-ai/react-runtime/store");
+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;
+var PageSizeSelectorComponent = function PageSizeSelectorComponent(_ref) {
+  var _ref$pagesizeoptions = _ref.pagesizeoptions,
+    pagesizeoptions = _ref$pagesizeoptions === void 0 ? "5,10,20,50,100" : _ref$pagesizeoptions,
+    _ref$maxResults = _ref.maxResults,
+    maxResults = _ref$maxResults === void 0 ? 10 : _ref$maxResults,
+    _ref$currentPage = _ref.currentPage,
+    currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
+    _ref$dataSize = _ref.dataSize,
+    dataSize = _ref$dataSize === void 0 ? 0 : _ref$dataSize,
+    paginationMeta = _ref.paginationMeta,
+    onPageSizeChange = _ref.onPageSizeChange;
+  // Get localized strings from store with fallback to APP_LOCALE constant
+  var appLocale = (0, _store.useAppSelector)(function (state) {
+    return state.i18n.appLocale;
+  });
+  var itemsPerPageLabel = (appLocale === null || appLocale === void 0 ? void 0 : appLocale.LABEL_ITEMS_PER_PAGE) || _constants.APP_LOCALE.LABEL_ITEMS_PER_PAGE;
+
+  // Parse page size options and include paginationMeta.size if available
+  var options = (0, _react.useMemo)(function () {
+    var parsedOptions = pagesizeoptions.split(",").map(function (opt) {
+      return parseInt(opt.trim(), 10);
+    }).filter(function (opt) {
+      return !isNaN(opt);
+    });
+
+    // Add paginationMeta.size to options if it exists and is not already included
+    if (paginationMeta !== null && paginationMeta !== void 0 && paginationMeta.size && !parsedOptions.includes(paginationMeta.size)) {
+      parsedOptions.unshift(paginationMeta.size); // Add it to the beginning
+      parsedOptions.sort(function (a, b) {
+        return a - b;
+      }); // Sort in ascending order
+    }
+    return parsedOptions;
+  }, [pagesizeoptions, paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.size]);
+
+  // Use paginationMeta.size as the effective maxResults if available
+  var effectiveMaxResults = (0, _react.useMemo)(function () {
+    return (paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.size) || maxResults;
+  }, [paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.size, maxResults]);
+
+  // Calculate row summary
+  var rowSummary = (0, _react.useMemo)(function () {
+    if (!dataSize) {
+      return null;
+    }
+    var startIndex = Math.min((currentPage - 1) * effectiveMaxResults + 1, dataSize);
+    var endIndex = Math.min(currentPage * effectiveMaxResults, dataSize);
+    return {
+      startIndex: startIndex,
+      endIndex: endIndex,
+      totalRecords: dataSize
+    };
+  }, [currentPage, effectiveMaxResults, dataSize]);
+  var handleChange = function handleChange(event) {
+    var newValue = Number(event.target.value);
+    if (onPageSizeChange) {
+      onPageSizeChange(event, newValue);
+    }
+  };
+  return __jsx(_Box["default"], {
+    sx: {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      gap: 2
+    },
+    className: "pagination page-size-selector"
+  }, __jsx(_Box["default"], {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      gap: 1
+    }
+  }, __jsx(_Typography["default"], {
+    component: "label",
+    sx: {
+      fontSize: "14px",
+      color: "text.primary",
+      whiteSpace: "nowrap"
+    },
+    title: itemsPerPageLabel
+  }, itemsPerPageLabel, " :"), __jsx(_FormControl["default"], {
+    size: "small",
+    sx: {
+      minWidth: 70,
+      "& .MuiInputBase-root": {
+        height: "auto"
+      }
+    }
+  }, __jsx(_Select["default"], {
+    id: "page-size-select",
+    value: effectiveMaxResults,
+    onChange: handleChange,
+    sx: {
+      fontSize: "14px",
+      minHeight: "auto",
+      "& .MuiSelect-select": {
+        paddingTop: "6px",
+        paddingBottom: "6px",
+        paddingLeft: "10px",
+        paddingRight: "32px",
+        // Space for dropdown arrow
+        minHeight: "auto"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        borderColor: "rgba(0, 0, 0, 0.23)"
+      }
+    },
+    MenuProps: {
+      PaperProps: {
+        sx: {
+          maxHeight: 300,
+          "& .MuiMenuItem-root": {
+            fontSize: "14px",
+            padding: "6px 16px",
+            // Override any global padding
+            margin: 0 // Override any global margin
+          },
+          "& .MuiList-root": {
+            padding: "8px 0" // Ensure proper list padding
+          },
+          "& li": {
+            padding: 0,
+            // Override global li padding
+            margin: 0 // Override global li margin
+          }
+        }
+      },
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "center"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      }
+    }
+  }, options.map(function (option) {
+    return __jsx(_MenuItem["default"], {
+      key: option,
+      value: option
+    }, option);
+  })))), rowSummary && __jsx(_Box["default"], {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      gap: 0.5
+    },
+    className: "item-range"
+  }, __jsx(_Typography["default"], {
+    sx: {
+      fontSize: "14px",
+      color: "text.primary"
+    }
+  }, __jsx(_Box["default"], {
+    component: "span"
+  }, rowSummary.startIndex, " - ", rowSummary.endIndex), __jsx(_Box["default"], {
+    component: "span",
+    sx: {
+      mx: 0.5
+    }
+  }, "\xA0\xA0of\xA0\xA0"), __jsx(_Box["default"], {
+    component: "span"
+  }, rowSummary.totalRecords))));
+};
+PageSizeSelectorComponent.displayName = "PageSizeSelector";
+var PageSizeSelector = exports.PageSizeSelector = /*#__PURE__*/(0, _react.memo)(PageSizeSelectorComponent, function (prevProps, nextProps) {
+  // Custom comparison to prevent unnecessary re-renders
+  return prevProps.pagesizeoptions === nextProps.pagesizeoptions && prevProps.maxResults === nextProps.maxResults && prevProps.currentPage === nextProps.currentPage && prevProps.dataSize === nextProps.dataSize && prevProps.paginationMeta === nextProps.paginationMeta && prevProps.onPageSizeChange === nextProps.onPageSizeChange;
+});

package/components/data/pagination/components/PagerNavigation.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { PagerNavigationProps } from "./props";
+export declare const PagerNavigation: React.FC<PagerNavigationProps>;