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

package/CHANGELOG.md

@@ -2,8 +2,15 @@
 
 ## Unreleased
 
+- New Link and ExternalLink components [#202](https://github.com/CartoDB/meridian-ds/pull/202)
+
 ## 1.0
 
+### 1.4.5
+
+- Fix Icon shapes size [#194](https://github.com/CartoDB/meridian-ds/pull/194)
+- New Tag component [#191](https://github.com/CartoDB/meridian-ds/pull/191)
+
 ### 1.4.4
 
 - feat(widgets): Pie&Category widget acceps otherValues prop [#186](https://github.com/CartoDB/meridian-ds/pull/186)

package/dist/{SwatchSquare-DDi0beUM.js → SwatchSquare-DhaaXt53.js}

@@ -27,7 +27,7 @@ function Search({ width, height, sx, ...props }, ref) {
   );
 }
 const Search$1 = forwardRef(Search);
-const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx("rect", { x: 4, y: 4, fill: "currentColor", rx: 2 }) });
+const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
 const BaseSvgIcon = createSvgIcon(Icon(), "SwatchSquare");
 function SwatchSquare({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsx(

package/dist/{SwatchSquare-w-U8-O-P.cjs → SwatchSquare-benaO55C.cjs}

@@ -28,7 +28,7 @@ function Search({ width, height, sx, ...props }, ref) {
   );
 }
 const Search$1 = React.forwardRef(Search);
-const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 4, y: 4, fill: "currentColor", rx: 2 }) });
+const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
 const BaseSvgIcon = utils.createSvgIcon(Icon(), "SwatchSquare");
 function SwatchSquare({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/index.cjs

@@ -6,6 +6,8 @@ const material = require("@mui/material");
 const TablePaginationActions = require("../TablePaginationActions-CFGXm44W.cjs");
 const reactIntl = require("react-intl");
 const iconsMaterial = require("@mui/icons-material");
+const Link = require("@mui/material/Link");
+const styles = require("@mui/material/styles");
 const Alert$1 = require("../Alert-zqtoWsBL.cjs");
 require("cartocolor");
 const MenuItem = require("../MenuItem-Br2jY2lt.cjs");
@@ -439,6 +441,77 @@ function _IconButton({
   ) });
 }
 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`,
+  "> 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,
+  useButton = false,
+  icon = /* @__PURE__ */ jsxRuntime.jsx(IconOpenInNewOutlined, {}),
+  ...props
+}, ref) {
+  if (useButton) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledButton,
+      {
+        ...externalLinkProps,
+        endIcon: showIcon && icon,
+        ...props,
+        ref,
+        children
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      InlineLink,
+      {
+        ...externalLinkProps,
+        ...props,
+        ref,
+        children: [
+          children,
+          showIcon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapperInline, { children: icon })
+        ]
+      }
+    );
+  }
+}
+const ExternalLink = React.forwardRef(_ExternalLink);
 const StyledMenu = material.styled(material.Menu, {
   shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
 })(({ theme, extended, width, height }) => ({
@@ -1755,6 +1828,195 @@ function Snackbar({
     }
   ) });
 }
+function colorProps(color, variant, theme, disabled) {
+  if (disabled) {
+    if (variant === "outlined") {
+      return {
+        color: theme.palette.text.disabled,
+        backgroundColor: theme.palette.black[4],
+        borderColor: theme.palette.action.focus
+      };
+    }
+    return {
+      color: theme.palette.text.disabled,
+      backgroundColor: theme.palette.action.disabledBackground,
+      borderColor: "transparent"
+    };
+  }
+  switch (color) {
+    case "default":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.text.secondary,
+          backgroundColor: theme.palette.black["4"],
+          borderColor: theme.palette.divider
+        };
+      }
+      return {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.default.main,
+        borderColor: "transparent"
+      };
+    case "primary":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.primary.main,
+          backgroundColor: theme.palette.primary.relatedLight,
+          borderColor: theme.palette.primary.main
+        };
+      }
+      return {
+        color: theme.palette.primary.contrastText,
+        backgroundColor: theme.palette.primary.main,
+        borderColor: "transparent"
+      };
+    case "secondary":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.secondary.main,
+          backgroundColor: theme.palette.secondary.relatedLight,
+          borderColor: theme.palette.secondary.main
+        };
+      }
+      return {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.secondary.main,
+        borderColor: "transparent"
+      };
+    case "success":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.success.main,
+          backgroundColor: theme.palette.success.relatedLight,
+          borderColor: theme.palette.success.main
+        };
+      }
+      return {
+        color: theme.palette.success.main,
+        backgroundColor: theme.palette.success.relatedLight,
+        borderColor: "transparent"
+      };
+    case "warning":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.warning.main,
+          backgroundColor: theme.palette.warning.relatedLight,
+          borderColor: theme.palette.warning.main
+        };
+      }
+      return {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.warning.main,
+        borderColor: "transparent"
+      };
+    case "error":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.error.main,
+          backgroundColor: theme.palette.error.relatedLight,
+          borderColor: theme.palette.error.main
+        };
+      }
+      return {
+        color: theme.palette.primary.contrastText,
+        backgroundColor: theme.palette.error.main,
+        borderColor: "transparent"
+      };
+  }
+}
+const TagRoot = material.styled("div", {
+  shouldForwardProp: (prop) => !["color", "variant", "disabled"].includes(prop)
+})(({
+  color,
+  variant,
+  disabled,
+  theme
+}) => {
+  return {
+    display: "inline-flex",
+    flexDirection: "row",
+    flexWrap: "nowrap",
+    alignItems: "center",
+    padding: theme.spacing(0, 0.5),
+    borderRadius: theme.spacing(0.25),
+    gap: theme.spacing(0.5),
+    height: theme.spacing(2),
+    borderWidth: "1px",
+    borderStyle: "solid",
+    ...colorProps(color ?? "primary", variant ?? "filled", theme, disabled),
+    '.Mui-selected &, [aria-selected="true"] &': {
+      borderColor: theme.palette.primary.main,
+      backgroundColor: theme.palette.primary.background,
+      ".MuiTypography-root": {
+        color: theme.palette.primary.main
+      }
+    }
+  };
+});
+const TagIcon = material.styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  "& svg": {
+    width: theme.spacing(TablePaginationActions.ICON_SIZE_SMALL),
+    height: theme.spacing(TablePaginationActions.ICON_SIZE_SMALL),
+    "& g": {
+      fill: "currentColor"
+    }
+  }
+}));
+const TagLabel = material.styled("div", {
+  shouldForwardProp: (prop) => !["type"].includes(prop)
+})(({ type, theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  paddingTop: type === "code" ? theme.spacing(0.25) : void 0
+}));
+function _Tag({
+  label,
+  color = "primary",
+  variant = "filled",
+  icon,
+  type = "default",
+  typographyProps,
+  noWrap = true,
+  disabled,
+  ...otherProps
+}, ref) {
+  const typeCode = type === "code";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TagRoot,
+    {
+      ref,
+      className: "CartoTag-root",
+      color,
+      variant,
+      disabled,
+      "aria-disabled": disabled,
+      "data-color": color,
+      "data-variant": variant,
+      "data-type": type,
+      "data-name": "tag",
+      ...otherProps,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(TagIcon, { children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(TagLabel, { type, children: /* @__PURE__ */ jsxRuntime.jsx(
+          TablePaginationActions.Typography,
+          {
+            component: "span",
+            color: "inherit",
+            variant: typeCode ? "code3" : "caption",
+            weight: typeCode ? "strong" : "medium",
+            noWrap,
+            ...typographyProps,
+            children: label
+          }
+        ) })
+      ]
+    }
+  );
+}
+const Tag = React.forwardRef(_Tag);
 const Menu = material.styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
@@ -4383,6 +4645,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;
@@ -4393,6 +4656,7 @@ exports.MultipleSelectField = MultipleSelectField;
 exports.PasswordField = PasswordField;
 exports.SelectField = SelectField;
 exports.Snackbar = Snackbar;
+exports.Tag = Tag;
 exports.TimePicker = TimePicker;
 exports.ToggleButtonGroup = ToggleButtonGroup;
 exports.TooltipData = TooltipData;

package/dist/components/index.js

@@ -1,10 +1,12 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect, useMemo, useRef, Fragment as Fragment$1, useImperativeHandle, useCallback } from "react";
-import { styled, Box, Button as Button$1, CircularProgress, TextField, InputAdornment, IconButton as IconButton$1, Tooltip, Select, MenuItem, FormControl, InputLabel, FormHelperText, ToggleButtonGroup as ToggleButtonGroup$1, Menu as Menu$2, MenuList as MenuList$1, Link, Checkbox, ListItemText, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Snackbar as Snackbar$1, Portal, Fade, Slide, alpha, useTheme, Toolbar, AppBar as AppBar$1, Paper, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1 } from "@mui/material";
+import { styled, Box, Button as Button$1, CircularProgress, TextField, InputAdornment, IconButton as IconButton$1, Tooltip, Select, MenuItem, FormControl, InputLabel, FormHelperText, ToggleButtonGroup as ToggleButtonGroup$1, Menu as Menu$2, MenuList as MenuList$1, Link as Link$1, Checkbox, ListItemText, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Snackbar as Snackbar$1, Portal, Fade, Slide, alpha, useTheme, Toolbar, AppBar as AppBar$1, Paper, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1 } from "@mui/material";
 import { T as Typography, c as ICON_SIZE_SMALL, u as useImperativeIntl, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-KpTvhN4Y.js";
 import { a } from "../TablePaginationActions-KpTvhN4Y.js";
 import { useIntl } from "react-intl";
-import { VisibilityOffOutlined, VisibilityOutlined, Cancel, AddCircleOutlineOutlined, ContentCopyOutlined, CloseOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
+import { VisibilityOffOutlined, VisibilityOutlined, OpenInNewOutlined, Cancel, AddCircleOutlineOutlined, ContentCopyOutlined, CloseOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
+import Link from "@mui/material/Link";
+import { styled as styled$1 } from "@mui/material/styles";
 import { A as Alert$1 } from "../Alert-D8jI1sG4.js";
 import "cartocolor";
 import { M as MenuItem$1 } from "../MenuItem-CXnnE5lK.js";
@@ -438,6 +440,77 @@ function _IconButton({
   ) });
 }
 const IconButton = forwardRef(_IconButton);
+const externalLinkProps = {
+  target: "_blank",
+  rel: "noopener noreferrer"
+};
+const InlineLink = styled$1(Link)(
+  ({ fontWeight = 500 }) => ({
+    display: "inline",
+    fontWeight
+  })
+);
+const IconOpenInNewOutlined = styled$1(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`,
+  "> path": {
+    color: "inherit !important"
+  }
+}));
+const IconWrapperInline = styled$1("span")(() => ({
+  marginLeft: "0.25em",
+  position: "relative",
+  top: "calc(1em * 5.0/32)"
+  // heuristic to align icon with true perceived baseline
+}));
+const StyledButton = styled$1(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,
+  useButton = false,
+  icon = /* @__PURE__ */ jsx(IconOpenInNewOutlined, {}),
+  ...props
+}, ref) {
+  if (useButton) {
+    return /* @__PURE__ */ jsx(
+      StyledButton,
+      {
+        ...externalLinkProps,
+        endIcon: showIcon && icon,
+        ...props,
+        ref,
+        children
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsxs(
+      InlineLink,
+      {
+        ...externalLinkProps,
+        ...props,
+        ref,
+        children: [
+          children,
+          showIcon && /* @__PURE__ */ jsx(IconWrapperInline, { children: icon })
+        ]
+      }
+    );
+  }
+}
+const ExternalLink = forwardRef(_ExternalLink);
 const StyledMenu = styled(Menu$2, {
   shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
 })(({ theme, extended, width, height }) => ({
@@ -519,7 +592,7 @@ const MenuList = forwardRef(_MenuList);
 const StyledMenuItem$1 = styled(MenuItem$1)(() => ({
   marginTop: "0 !important"
 }));
-const LinkFilter = styled(Link)(
+const LinkFilter = styled(Link$1)(
   ({ disabled, theme }) => ({
     display: "flex",
     alignItems: "center",
@@ -1754,6 +1827,195 @@ function Snackbar({
     }
   ) });
 }
+function colorProps(color, variant, theme, disabled) {
+  if (disabled) {
+    if (variant === "outlined") {
+      return {
+        color: theme.palette.text.disabled,
+        backgroundColor: theme.palette.black[4],
+        borderColor: theme.palette.action.focus
+      };
+    }
+    return {
+      color: theme.palette.text.disabled,
+      backgroundColor: theme.palette.action.disabledBackground,
+      borderColor: "transparent"
+    };
+  }
+  switch (color) {
+    case "default":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.text.secondary,
+          backgroundColor: theme.palette.black["4"],
+          borderColor: theme.palette.divider
+        };
+      }
+      return {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.default.main,
+        borderColor: "transparent"
+      };
+    case "primary":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.primary.main,
+          backgroundColor: theme.palette.primary.relatedLight,
+          borderColor: theme.palette.primary.main
+        };
+      }
+      return {
+        color: theme.palette.primary.contrastText,
+        backgroundColor: theme.palette.primary.main,
+        borderColor: "transparent"
+      };
+    case "secondary":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.secondary.main,
+          backgroundColor: theme.palette.secondary.relatedLight,
+          borderColor: theme.palette.secondary.main
+        };
+      }
+      return {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.secondary.main,
+        borderColor: "transparent"
+      };
+    case "success":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.success.main,
+          backgroundColor: theme.palette.success.relatedLight,
+          borderColor: theme.palette.success.main
+        };
+      }
+      return {
+        color: theme.palette.success.main,
+        backgroundColor: theme.palette.success.relatedLight,
+        borderColor: "transparent"
+      };
+    case "warning":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.warning.main,
+          backgroundColor: theme.palette.warning.relatedLight,
+          borderColor: theme.palette.warning.main
+        };
+      }
+      return {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.warning.main,
+        borderColor: "transparent"
+      };
+    case "error":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.error.main,
+          backgroundColor: theme.palette.error.relatedLight,
+          borderColor: theme.palette.error.main
+        };
+      }
+      return {
+        color: theme.palette.primary.contrastText,
+        backgroundColor: theme.palette.error.main,
+        borderColor: "transparent"
+      };
+  }
+}
+const TagRoot = styled("div", {
+  shouldForwardProp: (prop) => !["color", "variant", "disabled"].includes(prop)
+})(({
+  color,
+  variant,
+  disabled,
+  theme
+}) => {
+  return {
+    display: "inline-flex",
+    flexDirection: "row",
+    flexWrap: "nowrap",
+    alignItems: "center",
+    padding: theme.spacing(0, 0.5),
+    borderRadius: theme.spacing(0.25),
+    gap: theme.spacing(0.5),
+    height: theme.spacing(2),
+    borderWidth: "1px",
+    borderStyle: "solid",
+    ...colorProps(color ?? "primary", variant ?? "filled", theme, disabled),
+    '.Mui-selected &, [aria-selected="true"] &': {
+      borderColor: theme.palette.primary.main,
+      backgroundColor: theme.palette.primary.background,
+      ".MuiTypography-root": {
+        color: theme.palette.primary.main
+      }
+    }
+  };
+});
+const TagIcon = styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  "& svg": {
+    width: theme.spacing(ICON_SIZE_SMALL),
+    height: theme.spacing(ICON_SIZE_SMALL),
+    "& g": {
+      fill: "currentColor"
+    }
+  }
+}));
+const TagLabel = styled("div", {
+  shouldForwardProp: (prop) => !["type"].includes(prop)
+})(({ type, theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  paddingTop: type === "code" ? theme.spacing(0.25) : void 0
+}));
+function _Tag({
+  label,
+  color = "primary",
+  variant = "filled",
+  icon,
+  type = "default",
+  typographyProps,
+  noWrap = true,
+  disabled,
+  ...otherProps
+}, ref) {
+  const typeCode = type === "code";
+  return /* @__PURE__ */ jsxs(
+    TagRoot,
+    {
+      ref,
+      className: "CartoTag-root",
+      color,
+      variant,
+      disabled,
+      "aria-disabled": disabled,
+      "data-color": color,
+      "data-variant": variant,
+      "data-type": type,
+      "data-name": "tag",
+      ...otherProps,
+      children: [
+        icon && /* @__PURE__ */ jsx(TagIcon, { children: icon }),
+        /* @__PURE__ */ jsx(TagLabel, { type, children: /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "span",
+            color: "inherit",
+            variant: typeCode ? "code3" : "caption",
+            weight: typeCode ? "strong" : "medium",
+            noWrap,
+            ...typographyProps,
+            children: label
+          }
+        ) })
+      ]
+    }
+  );
+}
+const Tag = forwardRef(_Tag);
 const Menu = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
@@ -4380,6 +4642,7 @@ export {
   DialogHeader,
   DialogPaper,
   DialogStepper,
+  ExternalLink,
   IconButton,
   LabelWithIndicator,
   Menu$1 as Menu,
@@ -4392,6 +4655,7 @@ export {
   SelectField,
   Snackbar,
   a as TablePaginationActions,
+  Tag,
   TimePicker,
   ToggleButtonGroup,
   TooltipData,