@carto/meridian-ds 1.4.5-alpha-external-link.1 → 1.4.5-alpha-external-link.3

package/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 - New Link and ExternalLink components [#202](https://github.com/CartoDB/meridian-ds/pull/202)
+- Fix tooltips in ChartLegend pagination buttons [201](https://github.com/CartoDB/meridian-ds/pull/201)
 
 ## 1.0
 

package/dist/{Alert-D8jI1sG4.js → Alert-CETC14v2.js}

@@ -1,7 +1,91 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { b as ICON_SIZE_MEDIUM, T as Typography } from "./TablePaginationActions-KpTvhN4Y.js";
-import { styled, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
 import { forwardRef, useState } from "react";
+import { styled, IconButton as IconButton$1, Tooltip, CircularProgress, Box, Link as Link$1, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
+import { b as ICON_SIZE_MEDIUM, T as Typography } from "./TablePaginationActions-b5wP_uRE.js";
+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 _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
+        }
+      )
+    }
+  ) });
+}
+const IconButton = forwardRef(_IconButton);
+const Icon = styled(Box)(({ theme }) => ({
+  position: "relative",
+  display: "inline-block",
+  margin: theme.spacing(0, 0.25),
+  top: "calc(1em * 5.0/32)"
+  // heuristic to align icon with true perceived baseline
+}));
+function _Link({ children, startIcon, endIcon, color, ...otherProps }, ref) {
+  return /* @__PURE__ */ jsxs(
+    Link$1,
+    {
+      ...otherProps,
+      "data-color": color,
+      "data-name": "link",
+      role: "link",
+      color,
+      ref,
+      children: [
+        startIcon && /* @__PURE__ */ jsx(Icon, { children: startIcon }),
+        children,
+        endIcon && /* @__PURE__ */ jsx(Icon, { children: endIcon })
+      ]
+    }
+  );
+}
+const Link = forwardRef(_Link);
 const StyledAlert = styled(Alert$1, {
   shouldForwardProp: (prop) => ![
     "isNeutral",
@@ -130,5 +214,7 @@ function _Alert({
 }
 const Alert = forwardRef(_Alert);
 export {
-  Alert as A
+  Alert as A,
+  IconButton as I,
+  Link as L
 };

package/dist/{Alert-zqtoWsBL.cjs → Alert-hun6016k.cjs}

@@ -1,8 +1,92 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
-const TablePaginationActions = require("./TablePaginationActions-CFGXm44W.cjs");
-const material = require("@mui/material");
 const React = require("react");
+const material = require("@mui/material");
+const TablePaginationActions = require("./TablePaginationActions-CAmwcyTy.cjs");
+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,
+    {
+      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 IconButton = React.forwardRef(_IconButton);
+const Icon = material.styled(material.Box)(({ theme }) => ({
+  position: "relative",
+  display: "inline-block",
+  margin: theme.spacing(0, 0.25),
+  top: "calc(1em * 5.0/32)"
+  // heuristic to align icon with true perceived baseline
+}));
+function _Link({ children, startIcon, endIcon, color, ...otherProps }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Link,
+    {
+      ...otherProps,
+      "data-color": color,
+      "data-name": "link",
+      role: "link",
+      color,
+      ref,
+      children: [
+        startIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: startIcon }),
+        children,
+        endIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: endIcon })
+      ]
+    }
+  );
+}
+const Link = React.forwardRef(_Link);
 const StyledAlert = material.styled(material.Alert, {
   shouldForwardProp: (prop) => ![
     "isNeutral",
@@ -131,3 +215,5 @@ function _Alert({
 }
 const Alert = React.forwardRef(_Alert);
 exports.Alert = Alert;
+exports.IconButton = IconButton;
+exports.Link = Link;

package/dist/{TablePaginationActions-CFGXm44W.cjs → TablePaginationActions-CAmwcyTy.cjs}

@@ -814,7 +814,8 @@ const en = {
       copy: "Copy",
       save: "Save",
       add: "Add",
-      showOptions: "Show options"
+      showOptions: "Show options",
+      opensInNewTab: "Opens in new tab"
     },
     form: {
       selectAll: "Select all",
@@ -962,7 +963,8 @@ const es = {
       copy: "Copiar",
       save: "Guardar",
       add: "Añadir",
-      showOptions: "Mostrar opciones"
+      showOptions: "Mostrar opciones",
+      opensInNewTab: "Abre en una nueva pestaña"
     },
     form: {
       selectAll: "Seleccionar todos",
@@ -1108,7 +1110,8 @@ const id = {
       copy: "Salin",
       save: "Simpan",
       add: "Tambah",
-      showOptions: "Tampilkan opsi"
+      showOptions: "Tampilkan opsi",
+      opensInNewTab: "Buka di tab baru"
     },
     form: {
       selectAll: "Select all",

package/dist/{TablePaginationActions-KpTvhN4Y.js → TablePaginationActions-b5wP_uRE.js}

@@ -813,7 +813,8 @@ const en = {
       copy: "Copy",
       save: "Save",
       add: "Add",
-      showOptions: "Show options"
+      showOptions: "Show options",
+      opensInNewTab: "Opens in new tab"
     },
     form: {
       selectAll: "Select all",
@@ -961,7 +962,8 @@ const es = {
       copy: "Copiar",
       save: "Guardar",
       add: "Añadir",
-      showOptions: "Mostrar opciones"
+      showOptions: "Mostrar opciones",
+      opensInNewTab: "Abre en una nueva pestaña"
     },
     form: {
       selectAll: "Seleccionar todos",
@@ -1107,7 +1109,8 @@ const id = {
       copy: "Salin",
       save: "Simpan",
       add: "Tambah",
-      showOptions: "Tampilkan opsi"
+      showOptions: "Tampilkan opsi",
+      opensInNewTab: "Buka di tab baru"
     },
     form: {
       selectAll: "Select all",

package/dist/components/index.cjs

@@ -3,12 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const TablePaginationActions = require("../TablePaginationActions-CFGXm44W.cjs");
+const TablePaginationActions = require("../TablePaginationActions-CAmwcyTy.cjs");
 const reactIntl = require("react-intl");
 const iconsMaterial = require("@mui/icons-material");
-const Link = require("@mui/material/Link");
+const Alert$1 = require("../Alert-hun6016k.cjs");
 const styles = require("@mui/material/styles");
-const Alert$1 = require("../Alert-zqtoWsBL.cjs");
 require("cartocolor");
 const MenuItem = require("../MenuItem-Br2jY2lt.cjs");
 const ArrowDown = require("../ArrowDown-8fLj23Ge.cjs");
@@ -383,101 +382,17 @@ function ToggleButtonGroup({
     }
   );
 }
-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,
-    {
-      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 IconButton = React.forwardRef(_IconButton);
 const externalLinkProps = {
   target: "_blank",
   rel: "noopener noreferrer"
 };
-const InlineLink = styles.styled(Link)(
-  ({ fontWeight = 500 }) => ({
-    display: "inline",
-    fontWeight
-  })
-);
 const IconOpenInNewOutlined = styles.styled(iconsMaterial.OpenInNewOutlined)(() => ({
-  display: "inline",
   fontSize: "1em",
-  // in some place, like alerts all svg/icon colors are overriden, so force color to link color
-  color: `inherit !important`,
+  color: "inherit !important",
   "> path": {
     color: "inherit !important"
   }
 }));
-const IconWrapperInline = styles.styled("span")(() => ({
-  marginLeft: "0.25em",
-  position: "relative",
-  top: "calc(1em * 5.0/32)"
-  // heuristic to align icon with true perceived baseline
-}));
-const StyledButton = styles.styled(Button)(({ size, theme }) => ({
-  "& > span": {
-    display: "inline-flex",
-    alignItems: "center"
-  },
-  ...size === "small" && {
-    svg: {
-      width: `${theme.spacing(2)} !important`,
-      height: `${theme.spacing(2)} !important`
-    }
-  }
-}));
 function _ExternalLink({
   children,
   showIcon = true,
@@ -485,9 +400,11 @@ function _ExternalLink({
   icon = /* @__PURE__ */ jsxRuntime.jsx(IconOpenInNewOutlined, {}),
   ...props
 }, ref) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   if (useButton) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      StyledButton,
+      Button,
       {
         ...externalLinkProps,
         endIcon: showIcon && icon,
@@ -497,16 +414,17 @@ function _ExternalLink({
       }
     );
   } else {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      InlineLink,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Alert$1.Link,
       {
         ...externalLinkProps,
+        endIcon: showIcon && icon,
         ...props,
         ref,
-        children: [
-          children,
-          showIcon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapperInline, { children: icon })
-        ]
+        "aria-label": `${children == null ? void 0 : children.toString()} (${intlConfig.formatMessage({
+          id: "c4r.button.opensInNewTab"
+        })})`,
+        children
       }
     );
   }
@@ -1553,7 +1471,7 @@ const _CopiableComponent = ({
             children: [
               children,
               button && /* @__PURE__ */ jsxRuntime.jsx(
-                IconButton,
+                Alert$1.IconButton,
                 {
                   ...buttonProps,
                   disabled,
@@ -1812,7 +1730,7 @@ function Snackbar({
               }
             ),
             closeable && /* @__PURE__ */ jsxRuntime.jsx(CloseButtonWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              IconButton,
+              Alert$1.IconButton,
               {
                 color: "default",
                 onClick: (e) => onClose(e, "timeout"),
@@ -3062,7 +2980,7 @@ function CodeAreaHeader({
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          IconButton,
+          Alert$1.IconButton,
           {
             color: "default",
             size,
@@ -3126,7 +3044,7 @@ function CodeAreaHeader({
       }
     ),
     showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
+      Alert$1.IconButton,
       {
         color: "default",
         size,
@@ -4616,6 +4534,8 @@ function CodeAreaDialog({
 exports.TablePaginationActions = TablePaginationActions.TablePaginationActions;
 exports.Typography = TablePaginationActions.Typography;
 exports.Alert = Alert$1.Alert;
+exports.IconButton = Alert$1.IconButton;
+exports.Link = Alert$1.Link;
 exports.MenuItem = MenuItem.MenuItem;
 exports.AccordionGroup = AccordionGroup;
 exports.AppBar = AppBar;
@@ -4646,7 +4566,6 @@ exports.DialogHeader = DialogHeader;
 exports.DialogPaper = DialogPaper;
 exports.DialogStepper = DialogStepper;
 exports.ExternalLink = ExternalLink;
-exports.IconButton = IconButton;
 exports.LabelWithIndicator = LabelWithIndicator;
 exports.Menu = Menu$1;
 exports.MenuItemFilter = MenuItemFilter;