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

package/CHANGELOG.md

@@ -2,9 +2,6 @@
 
 ## 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
 
 ### 1.4.5

package/dist/Alert-D8jI1sG4.js

@@ -0,0 +1,134 @@
+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";
+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
+};

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

@@ -1,129 +1,8 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const TablePaginationActions = require("./TablePaginationActions-CFGXm44W.cjs");
 const material = require("@mui/material");
-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-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 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 React = require("react");
 const StyledAlert = material.styled(material.Alert, {
   shouldForwardProp: (prop) => ![
     "isNeutral",
@@ -252,5 +131,3 @@ function _Alert({
 }
 const Alert = React.forwardRef(_Alert);
 exports.Alert = Alert;
-exports.IconButton = IconButton;
-exports.Link = Link;

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

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

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

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

package/dist/components/index.cjs

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const reactIntl = require("react-intl");
 const material = require("@mui/material");
+const TablePaginationActions = require("../TablePaginationActions-CFGXm44W.cjs");
+const reactIntl = require("react-intl");
 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-zqtoWsBL.cjs");
 require("cartocolor");
 const MenuItem = require("../MenuItem-Br2jY2lt.cjs");
 const ArrowDown = require("../ArrowDown-8fLj23Ge.cjs");
@@ -62,11 +61,8 @@ 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 = () => {
@@ -88,11 +84,7 @@ function _Button({
       }
       return void 0;
     }
-    if (position === "start") {
-      return startIcon;
-    } else {
-      return endIcon || (external && otherProps.href ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) : void 0);
-    }
+    return position === "start" ? startIcon : endIcon;
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Button,
@@ -102,13 +94,6 @@ 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() })
     }
@@ -396,49 +381,64 @@ function ToggleButtonGroup({
     }
   );
 }
-const externalLinkProps = {
-  target: "_blank",
-  rel: "noopener noreferrer"
-};
-const IconOpenInNewOutlined = styles.styled(iconsMaterial.OpenInNewOutlined)(() => ({
-  fontSize: "1em",
-  color: "inherit !important",
-  "> path": {
-    color: "inherit !important"
+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)
   }
 }));
-function _ExternalLink({
-  children,
-  showIcon = true,
-  useButton = false,
-  icon = /* @__PURE__ */ jsxRuntime.jsx(IconOpenInNewOutlined, {}),
+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) {
-  if (useButton) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        ...externalLinkProps,
-        endIcon: showIcon && icon,
-        ...props,
-        ref,
-        children
-      }
-    );
-  } else {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Alert$1.Link,
-      {
-        ...props,
-        external: true,
-        showExternalIcon: showIcon,
-        ref,
-        children
-      }
-    );
-  }
+  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 ExternalLink = React.forwardRef(_ExternalLink);
+const IconButton = React.forwardRef(_IconButton);
 const StyledMenu = material.styled(material.Menu, {
   shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
 })(({ theme, extended, width, height }) => ({
@@ -1480,7 +1480,7 @@ const _CopiableComponent = ({
             children: [
               children,
               button && /* @__PURE__ */ jsxRuntime.jsx(
-                Alert$1.IconButton,
+                IconButton,
                 {
                   ...buttonProps,
                   disabled,
@@ -1739,7 +1739,7 @@ function Snackbar({
               }
             ),
             closeable && /* @__PURE__ */ jsxRuntime.jsx(CloseButtonWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              Alert$1.IconButton,
+              IconButton,
               {
                 color: "default",
                 onClick: (e) => onClose(e, "timeout"),
@@ -2989,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(
-          Alert$1.IconButton,
+          IconButton,
           {
             color: "default",
             size,
@@ -3053,7 +3053,7 @@ function CodeAreaHeader({
       }
     ),
     showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
-      Alert$1.IconButton,
+      IconButton,
       {
         color: "default",
         size,
@@ -4543,8 +4543,6 @@ 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;
@@ -4574,7 +4572,7 @@ exports.DialogFooter = DialogFooter;
 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;