@carto/meridian-ds 1.4.5-alpha-external-link.2 → 1.4.5-alpha-external-link.4

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-C0UdTQsO.js

@@ -0,0 +1,257 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { styled, IconButton as IconButton$1, Tooltip, CircularProgress, Link as Link$1, Box, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
+import { useIntl } from "react-intl";
+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 "./TablePaginationActions-b5wP_uRE.js";
+import "cartocolor";
+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 StyledLink = styled(Link$1)(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: theme.spacing(0.25)
+}));
+const Icon = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "variant"
+})(({ variant }) => ({
+  display: "flex",
+  svg: {
+    ...variant === "caption" && {
+      fontSize: ICON_SIZE_SMALL
+    },
+    ...variant === "body2" && {
+      fontSize: ICON_SIZE_MEDIUM
+    },
+    ...variant === "body1" && {
+      fontSize: ICON_SIZE_LARGE
+    },
+    ...variant === "button" && {
+      fontSize: ICON_SIZE_MEDIUM
+    }
+  }
+}));
+function _Link({
+  children,
+  variant,
+  startIcon,
+  endIcon,
+  color,
+  external,
+  showExternalIcon = true,
+  ...otherProps
+}, ref) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+  return /* @__PURE__ */ jsxs(
+    StyledLink,
+    {
+      ...otherProps,
+      variant,
+      "data-color": color,
+      "data-name": "link",
+      role: "link",
+      color,
+      ref,
+      target: external ? "_blank" : void 0,
+      rel: external ? "noopener noreferrer" : void 0,
+      "aria-label": external ? `${children == null ? void 0 : children.toString()} (${intlConfig.formatMessage({
+        id: "c4r.button.opensInNewTab"
+      })})` : void 0,
+      children: [
+        startIcon && /* @__PURE__ */ jsx(Icon, { variant, children: startIcon }),
+        children,
+        (endIcon || external && showExternalIcon) && /* @__PURE__ */ jsx(Icon, { variant, children: endIcon || /* @__PURE__ */ jsx(OpenInNewOutlined, {}) })
+      ]
+    }
+  );
+}
+const Link = forwardRef(_Link);
+const StyledAlert = styled(Alert$1, {
+  shouldForwardProp: (prop) => ![
+    "isNeutral",
+    "content",
+    "hasCloseButton",
+    "hasAction",
+    "hasTitle",
+    "isSticky"
+  ].includes(prop)
+})(
+  ({
+    isNeutral,
+    content,
+    hasCloseButton,
+    hasAction,
+    hasTitle,
+    isSticky,
+    theme
+  }) => ({
+    columnGap: theme.spacing(1),
+    minHeight: theme.spacing(6),
+    ...hasAction && {
+      display: "grid",
+      gridTemplateAreas: content === "inline" || hasCloseButton ? `"icon message actions"` : `
+    "icon message"
+    "icon actions"
+    `,
+      gridTemplateColumns: hasCloseButton ? `${ICON_SIZE_MEDIUM} 1fr ${theme.spacing(3)}` : `${ICON_SIZE_MEDIUM}`
+    },
+    ...isNeutral && {
+      backgroundColor: theme.palette.default.background,
+      color: theme.palette.text.primary
+    },
+    ...isSticky && {
+      borderRadius: 0
+    },
+    ".MuiAlert-message": {
+      flex: 1,
+      paddingTop: hasTitle ? theme.spacing(0.25) : theme.spacing(0.5),
+      "& a": {
+        color: theme.palette.primary.main,
+        textDecoration: "none",
+        "&:hover": {
+          textDecoration: "underline"
+        }
+      },
+      ...hasAction && {
+        gridArea: "message"
+      },
+      ...isNeutral && {
+        "& :not(.MuiAlertTitle-root)": {
+          color: theme.palette.text.secondary
+        },
+        a: {
+          color: `${theme.palette.primary.main} !important`
+        }
+      }
+    },
+    ".MuiAlert-icon": {
+      height: hasTitle ? theme.spacing(2.5) : theme.spacing(3),
+      marginRight: 0,
+      ...hasAction && {
+        gridArea: "icon"
+      },
+      ...isNeutral && {
+        color: theme.palette.text.primary
+      }
+    },
+    ".MuiAlert-action": {
+      alignItems: content === "inline" && !hasCloseButton ? "center" : "flex-start",
+      margin: content === "block" && !hasCloseButton ? theme.spacing(1.5, 0, 0.5) : 0,
+      marginLeft: content === "inline" || hasCloseButton ? "auto" : 0,
+      padding: 0,
+      ...hasAction && {
+        gridArea: "actions"
+      },
+      ".MuiIconButton-root svg path": {
+        fill: hasCloseButton ? theme.palette.text.secondary : void 0
+      }
+    }
+  })
+);
+function _Alert({
+  title,
+  action,
+  severity = "neutral",
+  content = "inline",
+  variant = "standard",
+  children,
+  onClose,
+  open: controlledOpen,
+  isSticky,
+  ...otherProps
+}, ref) {
+  const [open, setOpen] = useState(controlledOpen ?? true);
+  const handleClose = onClose ? (ev) => {
+    onClose(ev);
+    setOpen(false);
+  } : void 0;
+  const isNeutral = severity === "neutral";
+  const isOpen = controlledOpen ?? open;
+  return /* @__PURE__ */ jsx(Fade, { in: isOpen, appear: false, children: /* @__PURE__ */ jsxs(
+    StyledAlert,
+    {
+      ref,
+      severity: isNeutral ? "info" : severity,
+      isNeutral,
+      content,
+      action,
+      onClose: handleClose,
+      hasCloseButton: Boolean(onClose),
+      hasAction: Boolean(action),
+      hasTitle: Boolean(title),
+      isSticky,
+      variant,
+      "data-name": "alert",
+      "data-sticky": isSticky,
+      "data-content": content,
+      ...otherProps,
+      children: [
+        title && /* @__PURE__ */ jsx(AlertTitle, { children: title }),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "inherit", component: "div", children })
+      ]
+    }
+  ) });
+}
+const Alert = forwardRef(_Alert);
+export {
+  Alert as A,
+  IconButton as I,
+  Link as L
+};

package/dist/{Alert-CVfTyHiz.cjs → Alert-D01HgLe0.cjs}

@@ -2,20 +2,126 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const TablePaginationActions = require("./TablePaginationActions-CFGXm44W.cjs");
-const Icon = material.styled(material.Box)(({ theme }) => ({
+const reactIntl = require("react-intl");
+const iconsMaterial = require("@mui/icons-material");
+const TablePaginationActions = require("./TablePaginationActions-CAmwcyTy.cjs");
+require("cartocolor");
+const Option = material.styled("div")(({ 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
+  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)
+  }
 }));
-function _Link({ children, startIcon, endIcon, ...otherProps }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(material.Link, { ...otherProps, ref, children: [
-    startIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: startIcon }),
-    children,
-    endIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: endIcon })
-  ] });
+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 StyledLink = material.styled(material.Link)(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: theme.spacing(0.25)
+}));
+const Icon = material.styled(material.Box, {
+  shouldForwardProp: (prop) => prop !== "variant"
+})(({ variant }) => ({
+  display: "flex",
+  svg: {
+    ...variant === "caption" && {
+      fontSize: TablePaginationActions.ICON_SIZE_SMALL
+    },
+    ...variant === "body2" && {
+      fontSize: TablePaginationActions.ICON_SIZE_MEDIUM
+    },
+    ...variant === "body1" && {
+      fontSize: TablePaginationActions.ICON_SIZE_LARGE
+    },
+    ...variant === "button" && {
+      fontSize: TablePaginationActions.ICON_SIZE_MEDIUM
+    }
+  }
+}));
+function _Link({
+  children,
+  variant,
+  startIcon,
+  endIcon,
+  color,
+  external,
+  showExternalIcon = true,
+  ...otherProps
+}, ref) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    StyledLink,
+    {
+      ...otherProps,
+      variant,
+      "data-color": color,
+      "data-name": "link",
+      role: "link",
+      color,
+      ref,
+      target: external ? "_blank" : void 0,
+      rel: external ? "noopener noreferrer" : void 0,
+      "aria-label": external ? `${children == null ? void 0 : children.toString()} (${intlConfig.formatMessage({
+        id: "c4r.button.opensInNewTab"
+      })})` : void 0,
+      children: [
+        startIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { variant, children: startIcon }),
+        children,
+        (endIcon || external && showExternalIcon) && /* @__PURE__ */ jsxRuntime.jsx(Icon, { variant, children: endIcon || /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) })
+      ]
+    }
+  );
 }
 const Link = React.forwardRef(_Link);
 const StyledAlert = material.styled(material.Alert, {
@@ -146,4 +252,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

@@ -2,12 +2,12 @@
 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 reactIntl = require("react-intl");
+const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
+const TablePaginationActions = require("../TablePaginationActions-CAmwcyTy.cjs");
+const Alert$1 = require("../Alert-D01HgLe0.cjs");
 const styles = require("@mui/material/styles");
-const Alert$1 = require("../Alert-CVfTyHiz.cjs");
 require("cartocolor");
 const MenuItem = require("../MenuItem-Br2jY2lt.cjs");
 const ArrowDown = require("../ArrowDown-8fLj23Ge.cjs");
@@ -62,8 +62,11 @@ function _Button({
   startIcon,
   endIcon,
   loadingPosition,
+  external,
   ...otherProps
 }, ref) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   const defaultIconLoader = /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" });
   const isDefaultLoading = loading && loadingPosition === void 0;
   const renderContent = () => {
@@ -85,7 +88,11 @@ function _Button({
       }
       return void 0;
     }
-    return position === "start" ? startIcon : endIcon;
+    if (position === "start") {
+      return startIcon;
+    } else {
+      return endIcon || (external && otherProps.href ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) : void 0);
+    }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Button,
@@ -95,6 +102,13 @@ function _Button({
       endIcon: getIconForPosition("end"),
       ...otherProps,
       role: otherProps.href ? "link" : "button",
+      ...otherProps.href && external && {
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
+      "aria-label": external && otherProps.href ? `${children == null ? void 0 : children.toString()} (${intlConfig.formatMessage({
+        id: "c4r.button.opensInNewTab"
+      })})` : void 0,
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
     }
@@ -382,71 +396,12 @@ 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 IconOpenInNewOutlined = styles.styled(iconsMaterial.OpenInNewOutlined)(() => ({
   fontSize: "1em",
-  // in some place, like alerts all svg/icon colors are overriden, so force color to link color
   color: "inherit !important",
   "> path": {
     color: "inherit !important"
@@ -457,7 +412,6 @@ function _ExternalLink({
   showIcon = true,
   useButton = false,
   icon = /* @__PURE__ */ jsxRuntime.jsx(IconOpenInNewOutlined, {}),
-  fontWeight = "medium",
   ...props
 }, ref) {
   if (useButton) {
@@ -475,10 +429,9 @@ function _ExternalLink({
     return /* @__PURE__ */ jsxRuntime.jsx(
       Alert$1.Link,
       {
-        ...externalLinkProps,
-        endIcon: showIcon && icon,
-        fontWeight,
         ...props,
+        external: true,
+        showExternalIcon: showIcon,
         ref,
         children
       }
@@ -1527,7 +1480,7 @@ const _CopiableComponent = ({
             children: [
               children,
               button && /* @__PURE__ */ jsxRuntime.jsx(
-                IconButton,
+                Alert$1.IconButton,
                 {
                   ...buttonProps,
                   disabled,
@@ -1786,7 +1739,7 @@ function Snackbar({
               }
             ),
             closeable && /* @__PURE__ */ jsxRuntime.jsx(CloseButtonWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              IconButton,
+              Alert$1.IconButton,
               {
                 color: "default",
                 onClick: (e) => onClose(e, "timeout"),
@@ -3036,7 +2989,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,
@@ -3100,7 +3053,7 @@ function CodeAreaHeader({
       }
     ),
     showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
+      Alert$1.IconButton,
       {
         color: "default",
         size,
@@ -4590,6 +4543,7 @@ 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;
@@ -4621,7 +4575,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;