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

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

@@ -1,188 +1,195 @@
-"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
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, memo } from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import { APP_LOCALE } from "../../list/utils/constants";
+import { useAppSelector } from "../../../../store";
+const PageSizeSelectorComponent = ({
+  pagesizeoptions = "5,10,20,50,100",
+  maxResults = 10,
+  currentPage = 1,
+  dataSize = 0,
+  paginationMeta,
+  onPageSizeChange
+}) => {
+  const appLocale = useAppSelector((state) => state.i18n.appLocale);
+  const itemsPerPageLabel = (appLocale == null ? void 0 : appLocale.LABEL_ITEMS_PER_PAGE) || APP_LOCALE.LABEL_ITEMS_PER_PAGE;
+  const options = useMemo(() => {
+    const parsedOptions = pagesizeoptions.split(",").map((opt) => parseInt(opt.trim(), 10)).filter((opt) => !isNaN(opt));
+    if ((paginationMeta == null ? void 0 : paginationMeta.size) && !parsedOptions.includes(paginationMeta.size)) {
+      parsedOptions.unshift(paginationMeta.size);
+      parsedOptions.sort((a, b) => a - b);
     }
     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 () {
+  }, [pagesizeoptions, paginationMeta == null ? void 0 : paginationMeta.size]);
+  const effectiveMaxResults = useMemo(() => {
+    return (paginationMeta == null ? void 0 : paginationMeta.size) || maxResults;
+  }, [paginationMeta == null ? void 0 : paginationMeta.size, maxResults]);
+  const rowSummary = useMemo(() => {
     if (!dataSize) {
       return null;
     }
-    var startIndex = Math.min((currentPage - 1) * effectiveMaxResults + 1, dataSize);
-    var endIndex = Math.min(currentPage * effectiveMaxResults, dataSize);
+    const startIndex = Math.min((currentPage - 1) * effectiveMaxResults + 1, dataSize);
+    const endIndex = Math.min(currentPage * effectiveMaxResults, dataSize);
     return {
-      startIndex: startIndex,
-      endIndex: endIndex,
+      startIndex,
+      endIndex,
       totalRecords: dataSize
     };
   }, [currentPage, effectiveMaxResults, dataSize]);
-  var handleChange = function handleChange(event) {
-    var newValue = Number(event.target.value);
+  const handleChange = (event) => {
+    const 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"
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: 2
       },
-      "& .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
+      className: "pagination page-size-selector",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Typography,
+                {
+                  component: "label",
+                  sx: {
+                    fontSize: "14px",
+                    color: "text.primary",
+                    whiteSpace: "nowrap"
+                  },
+                  title: itemsPerPageLabel,
+                  children: [
+                    itemsPerPageLabel,
+                    " :"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                FormControl,
+                {
+                  size: "small",
+                  sx: {
+                    minWidth: 70,
+                    "& .MuiInputBase-root": {
+                      height: "auto"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    Select,
+                    {
+                      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"
+                        }
+                      },
+                      children: options.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option, children: option }, option))
+                    }
+                  )
+                }
+              )
+            ]
           }
-        }
-      },
-      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
+        ),
+        rowSummary && /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
+            },
+            className: "item-range",
+            children: /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                sx: {
+                  fontSize: "14px",
+                  color: "text.primary"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(Box, { component: "span", children: [
+                    rowSummary.startIndex,
+                    " - ",
+                    rowSummary.endIndex
+                  ] }),
+                  /* @__PURE__ */ jsx(Box, { component: "span", sx: { mx: 0.5 }, children: "\xA0\xA0of\xA0\xA0" }),
+                  /* @__PURE__ */ jsx(Box, { component: "span", children: rowSummary.totalRecords })
+                ]
+              }
+            )
+          }
+        )
+      ]
     }
-  }, "\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
+const PageSizeSelector = memo(PageSizeSelectorComponent, (prevProps, nextProps) => {
   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;
-});
+});
+export {
+  PageSizeSelector
+};

package/components/data/pagination/components/PagerNavigation.js

@@ -1,105 +1,84 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PagerNavigation = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _styles = require("@mui/material/styles");
-var _constants = require("../../list/utils/constants");
-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 PagerNavigation = exports.PagerNavigation = function PagerNavigation(_ref) {
-  var navigationClass = _ref.navigationClass,
-    isDisablePrevious = _ref.isDisablePrevious,
-    isDisableNext = _ref.isDisableNext,
-    onNavigate = _ref.onNavigate;
-  return __jsx(StyledPaginationList, {
-    className: (0, _clsx["default"])("pager", navigationClass)
-  }, __jsx(StyledPaginationItem, {
-    className: (0, _clsx["default"])("previous", {
-      disabled: isDisablePrevious
-    })
-  }, __jsx(_Box["default"], {
-    component: "a",
-    href: "#",
-    onClick: function onClick(e) {
-      e.preventDefault();
-      onNavigate("prev", e);
-    },
-    "aria-disabled": isDisablePrevious ? "true" : "false",
-    sx: {
-      display: "flex",
-      alignItems: "center",
-      padding: "6px 12px",
-      textDecoration: "none",
-      cursor: isDisablePrevious ? "not-allowed" : "pointer",
-      opacity: isDisablePrevious ? 0.5 : 1,
-      color: "inherit"
-    }
-  }, __jsx(_Box["default"], {
-    component: "span",
-    "aria-hidden": "true",
-    sx: {
-      mr: 1
-    }
-  }, __jsx("i", {
-    className: "wi wi-chevron-left"
-  })), _constants.APP_LOCALE.LABEL_PREVIOUS, __jsx(_Box["default"], {
-    component: "span",
-    className: "sr-only"
-  }, isDisablePrevious ? " , Disabled" : ""))), __jsx(StyledPaginationItem, {
-    className: (0, _clsx["default"])("next", {
-      disabled: isDisableNext
-    })
-  }, __jsx(_Box["default"], {
-    component: "a",
-    href: "#",
-    onClick: function onClick(e) {
-      e.preventDefault();
-      onNavigate("next", e);
-    },
-    "aria-disabled": isDisableNext ? "true" : "false",
-    sx: {
-      display: "flex",
-      alignItems: "center",
-      padding: "6px 12px",
-      textDecoration: "none",
-      cursor: isDisableNext ? "not-allowed" : "pointer",
-      opacity: isDisableNext ? 0.5 : 1,
-      color: "inherit"
-    }
-  }, _constants.APP_LOCALE.LABEL_NEXT, __jsx(_Box["default"], {
-    component: "span",
-    "aria-hidden": "true",
-    sx: {
-      ml: 1
-    }
-  }, __jsx("i", {
-    className: "wi wi-chevron-right"
-  })), __jsx(_Box["default"], {
-    component: "span",
-    className: "sr-only"
-  }, isDisableNext ? " , Disabled" : ""))));
-};
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import { APP_LOCALE } from "../../list/utils/constants";
+const StyledPaginationList = styled("ul")(() => ({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  padding: 0,
+  margin: 0,
+  listStyle: "none"
+}));
+const StyledPaginationItem = styled("li")(() => ({
+  margin: "0 2px",
+  "&.disabled": {
+    opacity: 0.38,
+    pointerEvents: "none"
+  }
+}));
+const PagerNavigation = ({
+  navigationClass,
+  isDisablePrevious,
+  isDisableNext,
+  onNavigate
+}) => {
+  return /* @__PURE__ */ jsxs(StyledPaginationList, { className: clsx("pager", navigationClass), children: [
+    /* @__PURE__ */ jsx(StyledPaginationItem, { className: clsx("previous", { disabled: isDisablePrevious }), children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "a",
+        href: "#",
+        onClick: (e) => {
+          e.preventDefault();
+          onNavigate("prev", e);
+        },
+        "aria-disabled": isDisablePrevious ? "true" : "false",
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          padding: "6px 12px",
+          textDecoration: "none",
+          cursor: isDisablePrevious ? "not-allowed" : "pointer",
+          opacity: isDisablePrevious ? 0.5 : 1,
+          color: "inherit"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": "true", sx: { mr: 1 }, children: /* @__PURE__ */ jsx("i", { className: "wi wi-chevron-left" }) }),
+          APP_LOCALE.LABEL_PREVIOUS,
+          /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", children: isDisablePrevious ? " , Disabled" : "" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(StyledPaginationItem, { className: clsx("next", { disabled: isDisableNext }), children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "a",
+        href: "#",
+        onClick: (e) => {
+          e.preventDefault();
+          onNavigate("next", e);
+        },
+        "aria-disabled": isDisableNext ? "true" : "false",
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          padding: "6px 12px",
+          textDecoration: "none",
+          cursor: isDisableNext ? "not-allowed" : "pointer",
+          opacity: isDisableNext ? 0.5 : 1,
+          color: "inherit"
+        },
+        children: [
+          APP_LOCALE.LABEL_NEXT,
+          /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": "true", sx: { ml: 1 }, children: /* @__PURE__ */ jsx("i", { className: "wi wi-chevron-right" }) }),
+          /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", children: isDisableNext ? " , Disabled" : "" })
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  PagerNavigation
+};