@carto/meridian-ds 2.0.2 → 2.1.0-alpha-copiable-input-text.1

package/CHANGELOG.md

@@ -2,8 +2,14 @@
 
 ## Unreleased
 
+- New CopiableInputText component [#228](https://github.com/CartoDB/meridian-ds/pull/228)
+
 ## 2.0
 
+### 2.1.0
+
+- New Link components and Button with externalLink behavior [#202](https://github.com/CartoDB/meridian-ds/pull/202)
+
 ### 2.0.2
 
 - fix(TimeSeriesWidgetUI): Fix TimeSeriesWidgetUI overflowing available height [#226](https://github.com/CartoDB/meridian-ds/pull/226)

package/dist/{Alert-CnaTtNJd.js → Link-D5fKicEY.js}

@@ -1,65 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { b as ICON_SIZE_MEDIUM, T as Typography, c as ICON_SIZE_SMALL, I as ICON_SIZE_LARGE, u as useImperativeIntl } from "./TablePaginationActions-CCDi-BO-.js";
+import { styled, Alert as Alert$1, Fade, AlertTitle, IconButton as IconButton$1, Tooltip, CircularProgress, Link as Link$1 } from "@mui/material";
 import { forwardRef, useState } from "react";
-import { styled, IconButton as IconButton$1, Tooltip, CircularProgress, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
-import { b as ICON_SIZE_MEDIUM, T as Typography } from "./TablePaginationActions-Cz5Hbi6N.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);
+import { useIntl } from "react-intl";
+import { OpenInNewOutlined } from "@mui/icons-material";
+import "cartocolor";
 const StyledAlert = styled(Alert$1, {
   shouldForwardProp: (prop) => ![
     "isNeutral",
@@ -187,7 +132,172 @@ function _Alert({
   ) });
 }
 const Alert = forwardRef(_Alert);
+const ScreenReaderOnly = styled("span")(() => ({
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  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 _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)(() => ({
+  display: "inline-block"
+}));
+const Icon = styled("span", {
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "iconPosition"
+})(
+  ({ variant, iconPosition }) => ({
+    display: "inline-flex",
+    position: "relative",
+    top: "calc(1em * 5/32)",
+    // heuristic to align icon with true perceived baseline (25% offset ratio)
+    ...iconPosition === "right" && {
+      marginLeft: "0.25em"
+    },
+    ...iconPosition === "left" && {
+      marginRight: "0.25em"
+    },
+    svg: {
+      // Size adapts to the text size, but make sure the icon size is at least 12px
+      fontSize: `max(1em, ${ICON_SIZE_SMALL})`,
+      color: "inherit !important",
+      "> path": {
+        color: "inherit !important"
+      }
+    },
+    // Caption and undefined variants use smaller offset and smaller icon
+    ...variant === "caption" && {
+      top: "calc(1em * 1/5)",
+      // 20% offset ratio
+      svg: {
+        fontSize: ICON_SIZE_SMALL
+      }
+    },
+    // Button and body2 variants use medium-sized icons
+    ...(variant === "button" || variant === "body2") && {
+      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
+      }
+    }
+  })
+);
+function _Link({
+  children,
+  variant,
+  startIcon,
+  endIcon,
+  color,
+  external,
+  showExternalIcon = true,
+  fontWeight = 500,
+  target,
+  rel,
+  "aria-describedby": ariaDescribedby,
+  ...otherProps
+}, ref) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+  const isButtonLink = otherProps.component === "button";
+  return /* @__PURE__ */ jsxs(
+    StyledLink,
+    {
+      ...otherProps,
+      variant,
+      fontWeight,
+      "data-color": color,
+      "data-name": isButtonLink ? "button-link" : "link",
+      role: isButtonLink ? "button" : "link",
+      color,
+      ref,
+      target: external ? "_blank" : target,
+      rel: external ? "noopener noreferrer" : rel,
+      "aria-describedby": external ? "external-hint" : ariaDescribedby,
+      children: [
+        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"
+        })})` })
+      ]
+    }
+  );
+}
+const Link = forwardRef(_Link);
 export {
   Alert as A,
-  IconButton as I
+  IconButton as I,
+  Link as L,
+  ScreenReaderOnly as S
 };

package/dist/{Alert-BzEgeyQJ.cjs → Link-_lzRY1Ay.cjs}

@@ -1,66 +1,11 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
+const TablePaginationActions = require("./TablePaginationActions-D2K26kdR.cjs");
 const material = require("@mui/material");
-const TablePaginationActions = require("./TablePaginationActions-mbbjzV6Y.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 React = require("react");
+const reactIntl = require("react-intl");
+const iconsMaterial = require("@mui/icons-material");
+require("cartocolor");
 const StyledAlert = material.styled(material.Alert, {
   shouldForwardProp: (prop) => ![
     "isNeutral",
@@ -188,5 +133,170 @@ function _Alert({
   ) });
 }
 const Alert = React.forwardRef(_Alert);
+const ScreenReaderOnly = material.styled("span")(() => ({
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  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 _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)(() => ({
+  display: "inline-block"
+}));
+const Icon = material.styled("span", {
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "iconPosition"
+})(
+  ({ variant, iconPosition }) => ({
+    display: "inline-flex",
+    position: "relative",
+    top: "calc(1em * 5/32)",
+    // heuristic to align icon with true perceived baseline (25% offset ratio)
+    ...iconPosition === "right" && {
+      marginLeft: "0.25em"
+    },
+    ...iconPosition === "left" && {
+      marginRight: "0.25em"
+    },
+    svg: {
+      // Size adapts to the text size, but make sure the icon size is at least 12px
+      fontSize: `max(1em, ${TablePaginationActions.ICON_SIZE_SMALL})`,
+      color: "inherit !important",
+      "> path": {
+        color: "inherit !important"
+      }
+    },
+    // Caption and undefined variants use smaller offset and smaller icon
+    ...variant === "caption" && {
+      top: "calc(1em * 1/5)",
+      // 20% offset ratio
+      svg: {
+        fontSize: TablePaginationActions.ICON_SIZE_SMALL
+      }
+    },
+    // Button and body2 variants use medium-sized icons
+    ...(variant === "button" || variant === "body2") && {
+      top: "calc(1em * 1/4)",
+      // 25% offset ratio
+      svg: {
+        fontSize: TablePaginationActions.ICON_SIZE_MEDIUM
+      }
+    },
+    // Body1 variant uses large icons
+    ...variant === "body1" && {
+      top: "calc(1em * 1/3)",
+      // 33% offset ratio
+      svg: {
+        fontSize: TablePaginationActions.ICON_SIZE_LARGE
+      }
+    }
+  })
+);
+function _Link({
+  children,
+  variant,
+  startIcon,
+  endIcon,
+  color,
+  external,
+  showExternalIcon = true,
+  fontWeight = 500,
+  target,
+  rel,
+  "aria-describedby": ariaDescribedby,
+  ...otherProps
+}, ref) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const isButtonLink = otherProps.component === "button";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    StyledLink,
+    {
+      ...otherProps,
+      variant,
+      fontWeight,
+      "data-color": color,
+      "data-name": isButtonLink ? "button-link" : "link",
+      role: isButtonLink ? "button" : "link",
+      color,
+      ref,
+      target: external ? "_blank" : target,
+      rel: external ? "noopener noreferrer" : rel,
+      "aria-describedby": external ? "external-hint" : ariaDescribedby,
+      children: [
+        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"
+        })})` })
+      ]
+    }
+  );
+}
+const Link = React.forwardRef(_Link);
 exports.Alert = Alert;
 exports.IconButton = IconButton;
+exports.Link = Link;
+exports.ScreenReaderOnly = ScreenReaderOnly;

package/dist/{MenuItem-C4bG5WHw.cjs → MenuItem-BY6fuF5U.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const TablePaginationActions = require("./TablePaginationActions-mbbjzV6Y.cjs");
+const TablePaginationActions = require("./TablePaginationActions-D2K26kdR.cjs");
 const StyledMenuItem = material.styled(material.MenuItem, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop

package/dist/{MenuItem-C1DvWMry.js → MenuItem-CKrhDizf.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 { e as MENU_ITEM_SIZE_DENSE, f as MENU_ITEM_SIZE_EXTENDED } from "./TablePaginationActions-Cz5Hbi6N.js";
+import { e as MENU_ITEM_SIZE_DENSE, f as MENU_ITEM_SIZE_EXTENDED } from "./TablePaginationActions-CCDi-BO-.js";
 const StyledMenuItem = styled(MenuItem$1, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop

package/dist/{TablePaginationActions-Cz5Hbi6N.js → TablePaginationActions-CCDi-BO-.js}

@@ -817,7 +817,10 @@ const en = {
       copy: "Copy",
       save: "Save",
       add: "Add",
-      showOptions: "Show options"
+      showOptions: "Show options",
+      hide: "Hide",
+      show: "Show",
+      opensInNewTab: "Opens in new tab"
     },
     form: {
       selectAll: "Select all",
@@ -880,8 +883,6 @@ const en = {
       },
       legend: {
         layerOptions: "Layer options",
-        hide: "Hide",
-        show: "Show",
         layer: "layer",
         opacity: "Opacity",
         hideLayer: "Hide layer",
@@ -965,7 +966,10 @@ const es = {
       copy: "Copiar",
       save: "Guardar",
       add: "Añadir",
-      showOptions: "Mostrar opciones"
+      showOptions: "Mostrar opciones",
+      hide: "Ocultar",
+      show: "Mostrar",
+      opensInNewTab: "Abre en una nueva pestaña"
     },
     form: {
       selectAll: "Seleccionar todos",
@@ -1028,8 +1032,6 @@ const es = {
       },
       legend: {
         layerOptions: "Opciones de capa",
-        hide: "Ocultar",
-        show: "Mostrar",
         layer: "capa",
         opacity: "Opacidad",
         hideLayer: "Ocultar capa",
@@ -1111,7 +1113,10 @@ const id = {
       copy: "Salin",
       save: "Simpan",
       add: "Tambah",
-      showOptions: "Tampilkan opsi"
+      showOptions: "Tampilkan opsi",
+      hide: "Sembunyikan",
+      show: "Tampilkan",
+      opensInNewTab: "Buka di tab baru"
     },
     form: {
       selectAll: "Select all",
@@ -1174,8 +1179,6 @@ const id = {
       },
       legend: {
         layerOptions: "Opsi Layer",
-        hide: "Sembunyikan",
-        show: "Tampilkan",
         layer: "layer",
         opacity: "Opasitas",
         hideLayer: "Sembunyikan layer",

package/dist/{TablePaginationActions-mbbjzV6Y.cjs → TablePaginationActions-D2K26kdR.cjs}

@@ -818,7 +818,10 @@ const en = {
       copy: "Copy",
       save: "Save",
       add: "Add",
-      showOptions: "Show options"
+      showOptions: "Show options",
+      hide: "Hide",
+      show: "Show",
+      opensInNewTab: "Opens in new tab"
     },
     form: {
       selectAll: "Select all",
@@ -881,8 +884,6 @@ const en = {
       },
       legend: {
         layerOptions: "Layer options",
-        hide: "Hide",
-        show: "Show",
         layer: "layer",
         opacity: "Opacity",
         hideLayer: "Hide layer",
@@ -966,7 +967,10 @@ const es = {
       copy: "Copiar",
       save: "Guardar",
       add: "Añadir",
-      showOptions: "Mostrar opciones"
+      showOptions: "Mostrar opciones",
+      hide: "Ocultar",
+      show: "Mostrar",
+      opensInNewTab: "Abre en una nueva pestaña"
     },
     form: {
       selectAll: "Seleccionar todos",
@@ -1029,8 +1033,6 @@ const es = {
       },
       legend: {
         layerOptions: "Opciones de capa",
-        hide: "Ocultar",
-        show: "Mostrar",
         layer: "capa",
         opacity: "Opacidad",
         hideLayer: "Ocultar capa",
@@ -1112,7 +1114,10 @@ const id = {
       copy: "Salin",
       save: "Simpan",
       add: "Tambah",
-      showOptions: "Tampilkan opsi"
+      showOptions: "Tampilkan opsi",
+      hide: "Sembunyikan",
+      show: "Tampilkan",
+      opensInNewTab: "Buka di tab baru"
     },
     form: {
       selectAll: "Select all",
@@ -1175,8 +1180,6 @@ const id = {
       },
       legend: {
         layerOptions: "Opsi Layer",
-        hide: "Sembunyikan",
-        show: "Tampilkan",
         layer: "layer",
         opacity: "Opasitas",
         hideLayer: "Sembunyikan layer",