@carto/meridian-ds 2.5.5-alpha-ellipsis.2 → 2.5.5-alpha-translations.1

package/CHANGELOG.md

@@ -2,7 +2,9 @@
 
 ## Unreleased
 
-- New EllipsisWithTooltip component [#299](https://github.com/CartoDB/meridian-ds/pull/299)
+- Improve translations handling with `useTranslationFallback` hook [#293](https://github.com/CartoDB/meridian-ds/pull/293)
+- Add unit tests for data display components [#292](https://github.com/CartoDB/meridian-ds/pull/292)
+- Add unit tests for action components [#290](https://github.com/CartoDB/meridian-ds/pull/290)
 
 ## 2.0
 

package/dist/{Alert-wE4A0ify.js → Alert-CRVceJ9N.js}

@@ -1,10 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
-import { styled, IconButton as IconButton$1, Tooltip, CircularProgress, Link as Link$1, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
-import { useIntl } from "react-intl";
+import { styled, Link as Link$1, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
 import { OpenInNewOutlined } from "@mui/icons-material";
-import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, I as ICON_SIZE_LARGE, u as useImperativeIntl, T as Typography } from "./css-utils-CTJjJR0x.js";
 import "cartocolor";
+import { u as useImperativeIntl, c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, T as Typography } from "./TablePaginationActions-DIFPc_wQ.js";
+import { useIntl } from "react-intl";
 const ScreenReaderOnly = styled("span")(() => ({
   position: "absolute",
   width: 1,
@@ -16,64 +16,14 @@ const ScreenReaderOnly = styled("span")(() => ({
   whiteSpace: "nowrap",
   border: 0
 }));
-const Option = styled("div")(({ theme }) => ({
-  position: "relative",
-  display: "inline-flex",
-  // TODO: Remove this once we have a better way to handle the spacing between icon buttons:
-  // https://app.shortcut.com/cartoteam/story/471284/create-iconbuttongroup-component-to-properly-group-several-icons
-  "& + &, & + .optionIconButton": {
-    marginLeft: theme.spacing(0.5)
-  }
-}));
-const StyledIconButton = styled(IconButton$1, {
-  shouldForwardProp: (prop) => !["active"].includes(prop)
-})(({ active, theme }) => ({
-  ...active && {
-    color: theme.palette.primary.main,
-    backgroundColor: theme.palette.primary.background,
-    "& svg:not(.doNotFillIcon) path": {
-      fill: theme.palette.primary.main
-    }
+function useTranslationFallback(translationKey, customText) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+  if (customText !== void 0 && customText !== null) {
+    return customText;
   }
-}));
-function _IconButton({
-  tooltip,
-  tooltipPlacement = "top",
-  icon,
-  size = "medium",
-  variant = "icon",
-  color = "default",
-  sx,
-  className,
-  loading,
-  disabled,
-  active,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsx(Tooltip, { placement: tooltipPlacement, title: tooltip ?? "", children: /* @__PURE__ */ jsx(
-    Option,
-    {
-      className: `optionIconButton ${className ?? ""}`,
-      sx,
-      "data-testid": "icon-button",
-      children: /* @__PURE__ */ jsx(
-        StyledIconButton,
-        {
-          ...props,
-          ref,
-          size,
-          variant,
-          color,
-          active,
-          disabled: disabled || loading,
-          role: "button",
-          children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : icon
-        }
-      )
-    }
-  ) });
+  return intlConfig.formatMessage({ id: translationKey });
 }
-const IconButton = forwardRef(_IconButton);
 const StyledLink = styled(Link$1)(() => ({
   display: "inline-block"
 }));
@@ -107,21 +57,13 @@ const Icon = styled("span", {
         fontSize: ICON_SIZE_SMALL
       }
     },
-    // Button and body2 variants use medium-sized icons
-    ...(variant === "button" || variant === "body2") && {
+    // Button, body2 and body1 variants use medium-sized icons
+    ...(variant === "button" || variant === "body2" || variant === "body1") && {
       top: "calc(1em * 1/4)",
       // 25% offset ratio
       svg: {
         fontSize: ICON_SIZE_MEDIUM
       }
-    },
-    // Body1 variant uses large icons
-    ...variant === "body1" && {
-      top: "calc(1em * 1/3)",
-      // 33% offset ratio
-      svg: {
-        fontSize: ICON_SIZE_LARGE
-      }
     }
   })
 );
@@ -133,14 +75,17 @@ function _Link({
   color,
   external,
   showExternalIcon = true,
+  screenReaderText,
   fontWeight = 500,
   target,
   rel,
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
+  const screenReaderTextValue = useTranslationFallback(
+    "c4r.button.opensInNewTab",
+    screenReaderText
+  );
   const isButtonLink = otherProps.component === "button";
   return /* @__PURE__ */ jsxs(
     StyledLink,
@@ -160,9 +105,7 @@ function _Link({
         startIcon && /* @__PURE__ */ jsx(Icon, { variant, iconPosition: "left", children: startIcon }),
         children,
         (endIcon || external && showExternalIcon) && /* @__PURE__ */ jsx(Icon, { variant, iconPosition: "right", children: endIcon || /* @__PURE__ */ jsx(OpenInNewOutlined, {}) }),
-        external && /* @__PURE__ */ jsx(ScreenReaderOnly, { id: "external-hint", children: ` (${intlConfig.formatMessage({
-          id: "c4r.button.opensInNewTab"
-        })})` })
+        external && /* @__PURE__ */ jsx(ScreenReaderOnly, { id: "external-hint", children: screenReaderTextValue })
       ]
     }
   );
@@ -297,7 +240,7 @@ function _Alert({
 const Alert = forwardRef(_Alert);
 export {
   Alert as A,
-  IconButton as I,
   Link as L,
-  ScreenReaderOnly as S
+  ScreenReaderOnly as S,
+  useTranslationFallback as u
 };

package/dist/{Alert-CaashKPj.cjs → Alert-Dyw7Z9wJ.cjs}

@@ -2,10 +2,10 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const reactIntl = require("react-intl");
 const iconsMaterial = require("@mui/icons-material");
-const cssUtils = require("./css-utils-W9dzgcXq.cjs");
 require("cartocolor");
+const TablePaginationActions = require("./TablePaginationActions-CMC_ZxDN.cjs");
+const reactIntl = require("react-intl");
 const ScreenReaderOnly = material.styled("span")(() => ({
   position: "absolute",
   width: 1,
@@ -17,64 +17,14 @@ const ScreenReaderOnly = material.styled("span")(() => ({
   whiteSpace: "nowrap",
   border: 0
 }));
-const Option = material.styled("div")(({ theme }) => ({
-  position: "relative",
-  display: "inline-flex",
-  // TODO: Remove this once we have a better way to handle the spacing between icon buttons:
-  // https://app.shortcut.com/cartoteam/story/471284/create-iconbuttongroup-component-to-properly-group-several-icons
-  "& + &, & + .optionIconButton": {
-    marginLeft: theme.spacing(0.5)
-  }
-}));
-const StyledIconButton = material.styled(material.IconButton, {
-  shouldForwardProp: (prop) => !["active"].includes(prop)
-})(({ active, theme }) => ({
-  ...active && {
-    color: theme.palette.primary.main,
-    backgroundColor: theme.palette.primary.background,
-    "& svg:not(.doNotFillIcon) path": {
-      fill: theme.palette.primary.main
-    }
+function useTranslationFallback(translationKey, customText) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  if (customText !== void 0 && customText !== null) {
+    return customText;
   }
-}));
-function _IconButton({
-  tooltip,
-  tooltipPlacement = "top",
-  icon,
-  size = "medium",
-  variant = "icon",
-  color = "default",
-  sx,
-  className,
-  loading,
-  disabled,
-  active,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { placement: tooltipPlacement, title: tooltip ?? "", children: /* @__PURE__ */ jsxRuntime.jsx(
-    Option,
-    {
-      className: `optionIconButton ${className ?? ""}`,
-      sx,
-      "data-testid": "icon-button",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        StyledIconButton,
-        {
-          ...props,
-          ref,
-          size,
-          variant,
-          color,
-          active,
-          disabled: disabled || loading,
-          role: "button",
-          children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : icon
-        }
-      )
-    }
-  ) });
+  return intlConfig.formatMessage({ id: translationKey });
 }
-const IconButton = React.forwardRef(_IconButton);
 const StyledLink = material.styled(material.Link)(() => ({
   display: "inline-block"
 }));
@@ -94,7 +44,7 @@ const Icon = material.styled("span", {
     },
     svg: {
       // Size adapts to the text size, but make sure the icon size is at least 12px
-      fontSize: `max(1em, ${cssUtils.ICON_SIZE_SMALL})`,
+      fontSize: `max(1em, ${TablePaginationActions.ICON_SIZE_SMALL})`,
       color: "inherit !important",
       "> path": {
         color: "inherit !important"
@@ -105,23 +55,15 @@ const Icon = material.styled("span", {
       top: "calc(1em * 1/5)",
       // 20% offset ratio
       svg: {
-        fontSize: cssUtils.ICON_SIZE_SMALL
+        fontSize: TablePaginationActions.ICON_SIZE_SMALL
       }
     },
-    // Button and body2 variants use medium-sized icons
-    ...(variant === "button" || variant === "body2") && {
+    // Button, body2 and body1 variants use medium-sized icons
+    ...(variant === "button" || variant === "body2" || variant === "body1") && {
       top: "calc(1em * 1/4)",
       // 25% offset ratio
       svg: {
-        fontSize: cssUtils.ICON_SIZE_MEDIUM
-      }
-    },
-    // Body1 variant uses large icons
-    ...variant === "body1" && {
-      top: "calc(1em * 1/3)",
-      // 33% offset ratio
-      svg: {
-        fontSize: cssUtils.ICON_SIZE_LARGE
+        fontSize: TablePaginationActions.ICON_SIZE_MEDIUM
       }
     }
   })
@@ -134,14 +76,17 @@ function _Link({
   color,
   external,
   showExternalIcon = true,
+  screenReaderText,
   fontWeight = 500,
   target,
   rel,
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+  const screenReaderTextValue = useTranslationFallback(
+    "c4r.button.opensInNewTab",
+    screenReaderText
+  );
   const isButtonLink = otherProps.component === "button";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     StyledLink,
@@ -161,9 +106,7 @@ function _Link({
         startIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { variant, iconPosition: "left", children: startIcon }),
         children,
         (endIcon || external && showExternalIcon) && /* @__PURE__ */ jsxRuntime.jsx(Icon, { variant, iconPosition: "right", children: endIcon || /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) }),
-        external && /* @__PURE__ */ jsxRuntime.jsx(ScreenReaderOnly, { id: "external-hint", children: ` (${intlConfig.formatMessage({
-          id: "c4r.button.opensInNewTab"
-        })})` })
+        external && /* @__PURE__ */ jsxRuntime.jsx(ScreenReaderOnly, { id: "external-hint", children: screenReaderTextValue })
       ]
     }
   );
@@ -196,7 +139,7 @@ const StyledAlert = material.styled(material.Alert, {
     "icon message"
     "icon actions"
     `,
-      gridTemplateColumns: hasCloseButton ? `${cssUtils.ICON_SIZE_MEDIUM} 1fr ${theme.spacing(3)}` : `${cssUtils.ICON_SIZE_MEDIUM}`
+      gridTemplateColumns: hasCloseButton ? `${TablePaginationActions.ICON_SIZE_MEDIUM} 1fr ${theme.spacing(3)}` : `${TablePaginationActions.ICON_SIZE_MEDIUM}`
     },
     ...isNeutral && {
       backgroundColor: theme.palette.default.background,
@@ -290,13 +233,13 @@ function _Alert({
       ...otherProps,
       children: [
         title && /* @__PURE__ */ jsxRuntime.jsx(material.AlertTitle, { children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", color: "inherit", component: "div", children })
+        /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", color: "inherit", component: "div", children })
       ]
     }
   ) });
 }
 const Alert = React.forwardRef(_Alert);
 exports.Alert = Alert;
-exports.IconButton = IconButton;
 exports.Link = Link;
 exports.ScreenReaderOnly = ScreenReaderOnly;
+exports.useTranslationFallback = useTranslationFallback;

package/dist/{MenuItem-BUe4eJZH.js → MenuItem-h41wtQTz.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { styled, MenuItem as MenuItem$1 } from "@mui/material";
-import { f as MENU_ITEM_SIZE_DENSE, h as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-CTJjJR0x.js";
+import { e as MENU_ITEM_SIZE_DENSE, f as MENU_ITEM_SIZE_EXTENDED } from "./TablePaginationActions-DIFPc_wQ.js";
 const StyledMenuItem = styled(MenuItem$1, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop

package/dist/{MenuItem-BZWWJptW.cjs → MenuItem-o51jnNjL.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const cssUtils = require("./css-utils-W9dzgcXq.cjs");
+const TablePaginationActions = require("./TablePaginationActions-CMC_ZxDN.cjs");
 const StyledMenuItem = material.styled(material.MenuItem, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop
@@ -29,7 +29,7 @@ const StyledMenuItem = material.styled(material.MenuItem, {
         color: theme.palette.text.secondary
       },
       "&.MuiMenuItem-root": {
-        minHeight: cssUtils.MENU_ITEM_SIZE_DENSE,
+        minHeight: TablePaginationActions.MENU_ITEM_SIZE_DENSE,
         paddingTop: 0,
         paddingBottom: 0,
         marginTop: theme.spacing(1),
@@ -96,7 +96,7 @@ const StyledMenuItem = material.styled(material.MenuItem, {
     },
     ...extended && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
-        minHeight: cssUtils.MENU_ITEM_SIZE_EXTENDED
+        minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED
       }
     },
     ...fixed && {
@@ -107,14 +107,14 @@ const StyledMenuItem = material.styled(material.MenuItem, {
         bottom: 0,
         right: 0,
         zIndex: 2,
-        minHeight: cssUtils.MENU_ITEM_SIZE_EXTENDED,
+        minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED,
         marginBottom: theme.spacing(1),
         padding: theme.spacing(0.5, 1.5),
         backgroundColor: `${theme.palette.background.paper} !important`,
         borderBottom: `1px solid ${theme.palette.divider}`
       },
       ".MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type": {
-        minHeight: cssUtils.MENU_ITEM_SIZE_EXTENDED,
+        minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED,
         marginTop: 0,
         "&:hover": {
           backgroundColor: theme.palette.background.paper
@@ -128,7 +128,7 @@ const StyledMenuItem = material.styled(material.MenuItem, {
     },
     ...dense && {
       "&.MuiButtonBase-root.MuiMenuItem-root": {
-        minHeight: cssUtils.MENU_ITEM_SIZE_DENSE,
+        minHeight: TablePaginationActions.MENU_ITEM_SIZE_DENSE,
         padding: theme.spacing(0.25, 1.5)
       }
     }

package/dist/{css-utils-W9dzgcXq.cjs → TablePaginationActions-CMC_ZxDN.cjs}

@@ -782,6 +782,31 @@ const MENU_LIST_MAX_SIZE = 312;
 const MENU_ITEM_SIZE_DENSE = 24;
 const MENU_ITEM_SIZE_DEFAULT = 32;
 const MENU_ITEM_SIZE_EXTENDED = 48;
+const FontWeight = {
+  regular: 400,
+  medium: 500,
+  strong: 600
+};
+function _Typography({ italic, weight, style, children, ...otherProps }, ref) {
+  const fontConfiguration = {
+    fontWeight: FontWeight[weight],
+    fontStyle: italic ? "italic" : void 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Typography,
+    {
+      ...otherProps,
+      ref,
+      style: {
+        ...fontConfiguration,
+        ...style
+      },
+      "data-name": "typography",
+      children
+    }
+  );
+}
+const Typography = React.forwardRef(_Typography);
 const en = {
   c4r: {
     button: {
@@ -796,7 +821,7 @@ const en = {
       showOptions: "Show options",
       hide: "Hide",
       show: "Show",
-      opensInNewTab: "Opens in new tab"
+      opensInNewTab: "(Opens in new tab)"
     },
     form: {
       selectAll: "Select all",
@@ -945,7 +970,7 @@ const es = {
       showOptions: "Mostrar opciones",
       hide: "Ocultar",
       show: "Mostrar",
-      opensInNewTab: "Abre en una nueva pestaña"
+      opensInNewTab: "(Abre en una nueva pestaña)"
     },
     form: {
       selectAll: "Seleccionar todos",
@@ -1092,7 +1117,7 @@ const id = {
       showOptions: "Tampilkan opsi",
       hide: "Sembunyikan",
       show: "Tampilkan",
-      opensInNewTab: "Buka di tab baru"
+      opensInNewTab: "(Buka di tab baru)"
     },
     form: {
       selectAll: "Select all",
@@ -5566,48 +5591,78 @@ const getGloballyCachedIntl = (intlConfig) => {
 function useImperativeIntl(intlConfig) {
   return getGloballyCachedIntl(intlConfig);
 }
-const FontWeight = {
-  regular: 400,
-  medium: 500,
-  strong: 600
-};
-function _Typography({ italic, weight, style, children, ...otherProps }, ref) {
-  const fontConfiguration = {
-    fontWeight: FontWeight[weight],
-    fontStyle: italic ? "italic" : void 0
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Typography,
+const Option = material.styled("div")(({ theme }) => ({
+  position: "relative",
+  display: "inline-flex",
+  // TODO: Remove this once we have a better way to handle the spacing between icon buttons:
+  // https://app.shortcut.com/cartoteam/story/471284/create-iconbuttongroup-component-to-properly-group-several-icons
+  "& + &, & + .optionIconButton": {
+    marginLeft: theme.spacing(0.5)
+  }
+}));
+const StyledIconButton = material.styled(material.IconButton, {
+  shouldForwardProp: (prop) => !["active"].includes(prop)
+})(({ active, theme }) => ({
+  ...active && {
+    color: theme.palette.primary.main,
+    backgroundColor: theme.palette.primary.background,
+    "& svg:not(.doNotFillIcon) path": {
+      fill: theme.palette.primary.main
+    }
+  }
+}));
+function _IconButton({
+  tooltip,
+  tooltipPlacement = "top",
+  icon,
+  size = "medium",
+  variant = "icon",
+  color = "default",
+  sx,
+  className,
+  loading,
+  disabled,
+  active,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { placement: tooltipPlacement, title: tooltip ?? "", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Option,
     {
-      ...otherProps,
-      ref,
-      style: {
-        ...fontConfiguration,
-        ...style
-      },
-      "data-name": "typography",
-      children
+      className: `optionIconButton ${className ?? ""}`,
+      sx,
+      "data-testid": "icon-button",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        StyledIconButton,
+        {
+          ...props,
+          ref,
+          size,
+          variant,
+          color,
+          active,
+          disabled: disabled || loading,
+          role: "button",
+          children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : icon
+        }
+      )
     }
-  );
+  ) });
 }
-const Typography = React.forwardRef(_Typography);
+const IconButton = React.forwardRef(_IconButton);
 const Root = material.styled(material.Box)(({ theme }) => ({
   display: "flex",
   gap: theme.spacing(0.5),
   marginLeft: theme.spacing(1)
 }));
-const Button = material.styled("div")(({ theme }) => ({
-  "& .MuiIconButton-root:not(.Mui-disabled)": {
-    color: theme.palette.text.secondary
-  }
-}));
-function TablePaginationActions({
+function _TablePaginationActions({
   count,
   page,
   rowsPerPage = 10,
   onPageChange,
-  lastPageTooltip
-}) {
+  lastPageTooltip,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId
+}, ref) {
   const intl = reactIntl.useIntl();
   const intlConfig = useImperativeIntl(intl);
   const handleBackButtonClick = (event) => {
@@ -5627,43 +5682,45 @@ function TablePaginationActions({
   const noMorePagesText = intlConfig.formatMessage({
     id: "c4r.form.pagination.noMorePages"
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: isFirstPage ? noMorePagesText : prevLabel, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      material.IconButton,
-      {
-        onClick: handleBackButtonClick,
-        disabled: page === 0,
-        "aria-label": prevLabel,
-        children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.KeyboardArrowLeftOutlined, {})
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      material.Tooltip,
-      {
-        title: isLastPage ? lastPageTooltip ?? noMorePagesText : nextLabel,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Button, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          material.IconButton,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Root,
+    {
+      ref,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "data-name": "table-pagination-actions",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            onClick: handleBackButtonClick,
+            disabled: page === 0,
+            "aria-label": prevLabel,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.KeyboardArrowLeftOutlined, {}),
+            tooltip: isFirstPage ? noMorePagesText : prevLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
           {
             onClick: handleNextButtonClick,
             disabled: page >= Math.ceil(count / rowsPerPage) - 1,
-            "aria-label": nextLabel.toLocaleLowerCase(),
-            children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.KeyboardArrowRightOutlined, {})
+            "aria-label": nextLabel,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.KeyboardArrowRightOutlined, {}),
+            tooltip: isLastPage ? lastPageTooltip ?? noMorePagesText : nextLabel
           }
-        ) })
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 }
-const ellipsisStyles = {
-  textOverflow: "ellipsis",
-  overflow: "hidden",
-  whiteSpace: "nowrap"
-};
+const TablePaginationActions = React.forwardRef(_TablePaginationActions);
 exports.APPBAR_SIZE = APPBAR_SIZE;
 exports.BREAKPOINTS = BREAKPOINTS;
 exports.ICON_SIZE_LARGE = ICON_SIZE_LARGE;
 exports.ICON_SIZE_MEDIUM = ICON_SIZE_MEDIUM;
 exports.ICON_SIZE_SMALL = ICON_SIZE_SMALL;
+exports.IconButton = IconButton;
 exports.MENU_ITEM_SIZE_DEFAULT = MENU_ITEM_SIZE_DEFAULT;
 exports.MENU_ITEM_SIZE_DENSE = MENU_ITEM_SIZE_DENSE;
 exports.MENU_ITEM_SIZE_EXTENDED = MENU_ITEM_SIZE_EXTENDED;
@@ -5672,7 +5729,6 @@ exports.NOTIFICATION_DURATION_IN_MS = NOTIFICATION_DURATION_IN_MS;
 exports.SPACING = SPACING;
 exports.TablePaginationActions = TablePaginationActions;
 exports.Typography = Typography;
-exports.ellipsisStyles = ellipsisStyles;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
 exports.getSpacing = getSpacing;
 exports.useImperativeIntl = useImperativeIntl;