@carto/meridian-ds 1.4.7 → 1.4.8-alpha-external-link.5

package/CHANGELOG.md

@@ -2,16 +2,26 @@
 
 ## Unreleased
 
+- New Link components and Button with externalLink behavior [#202](https://github.com/CartoDB/meridian-ds/pull/202)
+- Fix tooltips in ChartLegend pagination buttons [201](https://github.com/CartoDB/meridian-ds/pull/201)
+- Add `SplitButton` [#212](https://github.com/CartoDB/meridian-ds/pull/212)
+- CodeArea: Add automatic text marking for markdown [#209](https://github.com/CartoDB/meridian-ds/pull/209)
+
 ## 1.0
 
+### 1.4.8
+
+- Fix Category Widget Blanks [#210](https://github.com/CartoDB/meridian-ds/pull/210)
+- Add support for labels in Pie widget legend and ChartLegend [#208](https://github.com/CartoDB/meridian-ds/pull/208)
+
 ### 1.4.7
 
 - Fix Category Widget max value calculation [#206](https://github.com/CartoDB/meridian-ds/pull/206)
 
 ### 1.4.6
 
-- Fix tooltips in ChartLegend pagination buttons [201](https://github.com/CartoDB/meridian-ds/pull/201)
-- Remove `scrollIntoView` from Category Widget [203](https://github.com/CartoDB/meridian-ds/pull/203)
+- Fix tooltips in ChartLegend pagination buttons [#201](https://github.com/CartoDB/meridian-ds/pull/201)
+- Remove `scrollIntoView` from Category Widget [#203](https://github.com/CartoDB/meridian-ds/pull/203)
 
 ### 1.4.5
 

package/dist/{Alert-CywtIMOj.js → Alert-2L0Hy8lT.js}

@@ -1,7 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 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-KpTvhN4Y.js";
+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",
@@ -60,6 +63,73 @@ function _IconButton({
   ) });
 }
 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: {
+    // 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"
+    },
+    // Defined sizes in design specs
+    ...variant === "caption" && {
+      fontSize: ICON_SIZE_SMALL
+    },
+    ...variant === "button" && {
+      fontSize: ICON_SIZE_MEDIUM
+    },
+    ...variant === "body2" && {
+      fontSize: ICON_SIZE_MEDIUM
+    },
+    ...variant === "body1" && {
+      fontSize: ICON_SIZE_LARGE
+    }
+  }
+}));
+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",
@@ -189,5 +259,6 @@ function _Alert({
 const Alert = forwardRef(_Alert);
 export {
   Alert as A,
-  IconButton as I
+  IconButton as I,
+  Link as L
 };

package/dist/{Alert-BiOR9aar.cjs → Alert-CmDToT57.cjs}

@@ -2,7 +2,10 @@
 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 iconsMaterial = require("@mui/icons-material");
+const TablePaginationActions = require("./TablePaginationActions-CAmwcyTy.cjs");
+require("cartocolor");
 const Option = material.styled("div")(({ theme }) => ({
   position: "relative",
   display: "inline-flex",
@@ -61,6 +64,73 @@ function _IconButton({
   ) });
 }
 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: {
+    // 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"
+    },
+    // Defined sizes in design specs
+    ...variant === "caption" && {
+      fontSize: TablePaginationActions.ICON_SIZE_SMALL
+    },
+    ...variant === "button" && {
+      fontSize: TablePaginationActions.ICON_SIZE_MEDIUM
+    },
+    ...variant === "body2" && {
+      fontSize: TablePaginationActions.ICON_SIZE_MEDIUM
+    },
+    ...variant === "body1" && {
+      fontSize: TablePaginationActions.ICON_SIZE_LARGE
+    }
+  }
+}));
+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, {
   shouldForwardProp: (prop) => ![
     "isNeutral",
@@ -190,3 +260,4 @@ function _Alert({
 const Alert = React.forwardRef(_Alert);
 exports.Alert = Alert;
 exports.IconButton = IconButton;
+exports.Link = Link;

package/dist/{OpenDiagonallyRight-BrRyCV4Q.cjs → OpenDiagonallyRight-CM1tojUq.cjs}

@@ -2,6 +2,32 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const utils = require("@mui/material/utils");
+const Icon$2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M12.01 11.83 15.18 15l1.41-1.41L12.01 9l-4.59 4.59L8.84 15z",
+    clipRule: "evenodd"
+  }
+) });
+const BaseSvgIcon$2 = utils.createSvgIcon(Icon$2(), "ArrowUp");
+function ArrowUp({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon$2,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ArrowUp$1 = React.forwardRef(ArrowUp);
 const Icon$1 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
@@ -54,5 +80,6 @@ function OpenDiagonallyRight({ width, height, sx, ...props }, ref) {
   );
 }
 const OpenDiagonallyRight$1 = React.forwardRef(OpenDiagonallyRight);
+exports.ArrowUp = ArrowUp$1;
 exports.CloseDiagonallyRight = CloseDiagonallyRight$1;
 exports.OpenDiagonallyRight = OpenDiagonallyRight$1;

package/dist/{OpenDiagonallyRight-5HZXh46V.js → OpenDiagonallyRight-CSm5GYYJ.js}

@@ -1,6 +1,32 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { createSvgIcon } from "@mui/material/utils";
+const Icon$2 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M12.01 11.83 15.18 15l1.41-1.41L12.01 9l-4.59 4.59L8.84 15z",
+    clipRule: "evenodd"
+  }
+) });
+const BaseSvgIcon$2 = createSvgIcon(Icon$2(), "ArrowUp");
+function ArrowUp({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    BaseSvgIcon$2,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ArrowUp$1 = forwardRef(ArrowUp);
 const Icon$1 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
   "path",
   {
@@ -54,6 +80,7 @@ function OpenDiagonallyRight({ width, height, sx, ...props }, ref) {
 }
 const OpenDiagonallyRight$1 = forwardRef(OpenDiagonallyRight);
 export {
+  ArrowUp$1 as A,
   CloseDiagonallyRight$1 as C,
   OpenDiagonallyRight$1 as O
 };

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",