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

package/dist/{Alert-CETC14v2.js → Alert-C0UdTQsO.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, Box, Link as Link$1, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
-import { b as ICON_SIZE_MEDIUM, T as Typography } from "./TablePaginationActions-b5wP_uRE.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,27 +63,61 @@ function _IconButton({
   ) });
 }
 const IconButton = forwardRef(_IconButton);
-const Icon = styled(Box)(({ 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
+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, startIcon, endIcon, color, ...otherProps }, ref) {
+function _Link({
+  children,
+  variant,
+  startIcon,
+  endIcon,
+  color,
+  external,
+  showExternalIcon = true,
+  ...otherProps
+}, ref) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
   return /* @__PURE__ */ jsxs(
-    Link$1,
+    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, { children: startIcon }),
+        startIcon && /* @__PURE__ */ jsx(Icon, { variant, children: startIcon }),
         children,
-        endIcon && /* @__PURE__ */ jsx(Icon, { children: endIcon })
+        (endIcon || external && showExternalIcon) && /* @__PURE__ */ jsx(Icon, { variant, children: endIcon || /* @__PURE__ */ jsx(OpenInNewOutlined, {}) })
       ]
     }
   );

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

@@ -2,7 +2,10 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 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",
@@ -61,27 +64,61 @@ function _IconButton({
   ) });
 }
 const IconButton = React.forwardRef(_IconButton);
-const Icon = material.styled(material.Box)(({ 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
+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, startIcon, endIcon, color, ...otherProps }, ref) {
+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(
-    material.Link,
+    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, { children: startIcon }),
+        startIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { variant, children: startIcon }),
         children,
-        endIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: endIcon })
+        (endIcon || external && showExternalIcon) && /* @__PURE__ */ jsxRuntime.jsx(Icon, { variant, children: endIcon || /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) })
       ]
     }
   );

package/dist/components/index.cjs

@@ -2,11 +2,11 @@
 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-CAmwcyTy.cjs");
 const reactIntl = require("react-intl");
+const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const Alert$1 = require("../Alert-hun6016k.cjs");
+const TablePaginationActions = require("../TablePaginationActions-CAmwcyTy.cjs");
+const Alert$1 = require("../Alert-D01HgLe0.cjs");
 const styles = require("@mui/material/styles");
 require("cartocolor");
 const MenuItem = require("../MenuItem-Br2jY2lt.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() })
     }
@@ -400,8 +414,6 @@ function _ExternalLink({
   icon = /* @__PURE__ */ jsxRuntime.jsx(IconOpenInNewOutlined, {}),
   ...props
 }, ref) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   if (useButton) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Button,
@@ -417,13 +429,10 @@ function _ExternalLink({
     return /* @__PURE__ */ jsxRuntime.jsx(
       Alert$1.Link,
       {
-        ...externalLinkProps,
-        endIcon: showIcon && icon,
         ...props,
+        external: true,
+        showExternalIcon: showIcon,
         ref,
-        "aria-label": `${children == null ? void 0 : children.toString()} (${intlConfig.formatMessage({
-          id: "c4r.button.opensInNewTab"
-        })})`,
         children
       }
     );

package/dist/components/index.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect, useMemo, useRef, Fragment as Fragment$1, useImperativeHandle, useCallback } from "react";
+import { useIntl } from "react-intl";
 import { styled, Box, Button as Button$1, CircularProgress, TextField, InputAdornment, IconButton, 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-b5wP_uRE.js";
+import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, AddCircleOutlineOutlined, ContentCopyOutlined, CloseOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
+import { u as useImperativeIntl, T as Typography, c as ICON_SIZE_SMALL, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-b5wP_uRE.js";
 import { a } from "../TablePaginationActions-b5wP_uRE.js";
-import { useIntl } from "react-intl";
-import { VisibilityOffOutlined, VisibilityOutlined, OpenInNewOutlined, Cancel, AddCircleOutlineOutlined, ContentCopyOutlined, CloseOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
-import { L as Link, I as IconButton$1, A as Alert$1 } from "../Alert-CETC14v2.js";
+import { L as Link, I as IconButton$1, A as Alert$1 } from "../Alert-C0UdTQsO.js";
 import { styled as styled$1 } from "@mui/material/styles";
 import "cartocolor";
 import { M as MenuItem$1 } from "../MenuItem-CXnnE5lK.js";
@@ -61,8 +61,11 @@ function _Button({
   startIcon,
   endIcon,
   loadingPosition,
+  external,
   ...otherProps
 }, ref) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
   const defaultIconLoader = /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" });
   const isDefaultLoading = loading && loadingPosition === void 0;
   const renderContent = () => {
@@ -84,7 +87,11 @@ function _Button({
       }
       return void 0;
     }
-    return position === "start" ? startIcon : endIcon;
+    if (position === "start") {
+      return startIcon;
+    } else {
+      return endIcon || (external && otherProps.href ? /* @__PURE__ */ jsx(OpenInNewOutlined, {}) : void 0);
+    }
   };
   return /* @__PURE__ */ jsx(
     Button$1,
@@ -94,6 +101,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__ */ jsx(Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
     }
@@ -399,8 +413,6 @@ function _ExternalLink({
   icon = /* @__PURE__ */ jsx(IconOpenInNewOutlined, {}),
   ...props
 }, ref) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
   if (useButton) {
     return /* @__PURE__ */ jsx(
       Button,
@@ -416,13 +428,10 @@ function _ExternalLink({
     return /* @__PURE__ */ jsx(
       Link,
       {
-        ...externalLinkProps,
-        endIcon: showIcon && icon,
         ...props,
+        external: true,
+        showExternalIcon: showIcon,
         ref,
-        "aria-label": `${children == null ? void 0 : children.toString()} (${intlConfig.formatMessage({
-          id: "c4r.button.opensInNewTab"
-        })})`,
         children
       }
     );

package/dist/types/components/atoms/Button.d.ts

@@ -9,6 +9,11 @@ export type ButtonProps = MUIButtonProps<React.ElementType, {
      * - 'end': Shows spinner at the end position, replacing the endIcon
      */
     loadingPosition?: 'start' | 'end';
+    /**
+     * Whether the button is external. If true, the button will open in a new tab.
+     * Needs to have a href prop to be considered external.
+     */
+    external?: boolean;
 }>;
 declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/types/components/atoms/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,IAAI,cAAc,EAK9B,MAAM,eAAe,CAAA;AAmBtB,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,KAAK,CAAC,WAAW,EACjB;IACE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAClC,CACF,CAAA;AAoED,QAAA,MAAM,MAAM,wHAAsB,CAAA;AAClC,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,WAAW,IAAI,cAAc,EAK9B,MAAM,eAAe,CAAA;AAsBtB,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,KAAK,CAAC,WAAW,EACjB;IACE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CACF,CAAA;AA2FD,QAAA,MAAM,MAAM,wHAAsB,CAAA;AAClC,eAAe,MAAM,CAAA"}

package/dist/types/components/atoms/ExternalLink.d.ts

@@ -10,7 +10,8 @@ declare const ExternalLink: import('react').ForwardRefExoticComponent<(Omit<impo
     target?: string;
     loading?: boolean;
     loadingPosition?: "start" | "end";
-} & import('@mui/material').ButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<any, "style" | "className" | "classes" | "color" | "children" | "sx" | "variant" | "target" | "tabIndex" | "href" | "disabled" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "fullWidth" | "disableElevation" | "endIcon" | "startIcon" | "loadingPosition"> & {
+    external?: boolean;
+} & import('@mui/material').ButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<any, "style" | "className" | "classes" | "color" | "children" | "sx" | "variant" | "target" | "tabIndex" | "href" | "disabled" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "fullWidth" | "disableElevation" | "endIcon" | "startIcon" | "loadingPosition" | "external"> & {
     component?: import('react').ElementType;
 } & {
     showIcon?: boolean;

package/dist/types/components/atoms/ExternalLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalLink.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/ExternalLink.tsx"],"names":[],"mappings":"AAuEA,QAAA,MAAM,YAAY;;;;;eAvCH,OAAO;gBACN,OAAO;WACZ,GAAG,CAAC,OAAO;;;;;;;;eAFP,OAAO;gBACN,OAAO;WACZ,GAAG,CAAC,OAAO;kFAqCwB,CAAA;AAC9C,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ExternalLink.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/ExternalLink.tsx"],"names":[],"mappings":"AA+DA,QAAA,MAAM,YAAY;;;;;eAjCH,OAAO;gBACN,OAAO;WACZ,GAAG,CAAC,OAAO;;;;;;;;;eAFP,OAAO;gBACN,OAAO;WACZ,GAAG,CAAC,OAAO;kFA+BwB,CAAA;AAC9C,eAAe,YAAY,CAAA"}

package/dist/types/components/atoms/Link.d.ts

@@ -1,4 +1,14 @@
-import { LinkProps } from '@mui/material';
+import { LinkProps as MUILinkProps } from '@mui/material';
+export type LinkProps = MUILinkProps<React.ElementType, {
+    /**
+     * Whether the link is external. If true, the link will open in a new tab.
+     */
+    external?: boolean;
+    /**
+     * Whether to show the external icon when external is true. Defaults to true.
+     */
+    showExternalIcon?: boolean;
+}>;
 declare const Link: import('react').ForwardRefExoticComponent<Omit<LinkProps, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
 export default Link;
 //# sourceMappingURL=Link.d.ts.map

package/dist/types/components/atoms/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,SAAS,EAA2B,MAAM,eAAe,CAAA;AA+BvE,QAAA,MAAM,IAAI,sHAAoB,CAAA;AAC9B,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,SAAS,IAAI,YAAY,EAG1B,MAAM,eAAe,CAAA;AAkCtB,MAAM,MAAM,SAAS,GAAG,YAAY,CAClC,KAAK,CAAC,WAAW,EACjB;IACE;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CACF,CAAA;AAgDD,QAAA,MAAM,IAAI,sHAAoB,CAAA;AAC9B,eAAe,IAAI,CAAA"}

package/dist/widgets/index.cjs

@@ -9,7 +9,7 @@ const _ReactEcharts = require("echarts-for-react");
 const reactWindow = require("react-window");
 const SwatchSquare = require("../SwatchSquare-benaO55C.cjs");
 const iconsMaterial = require("@mui/icons-material");
-const Alert = require("../Alert-hun6016k.cjs");
+const Alert = require("../Alert-D01HgLe0.cjs");
 const paletteUtils = require("../paletteUtils-B9ybmwiI.cjs");
 function detectTouchscreen() {
   let result = false;

package/dist/widgets/index.js

@@ -7,7 +7,7 @@ import _ReactEcharts from "echarts-for-react";
 import { FixedSizeList } from "react-window";
 import { S as Search, a as SwatchSquare } from "../SwatchSquare-DhaaXt53.js";
 import { ChevronLeft, ChevronRight, KeyboardArrowDown, ErrorOutline, Cancel, VisibilityOutlined, VisibilityOffOutlined, ExpandLess, ExpandMore, Close, LayersOutlined, MoreVert } from "@mui/icons-material";
-import { I as IconButton, L as Link$1, A as Alert } from "../Alert-CETC14v2.js";
+import { I as IconButton, L as Link$1, A as Alert } from "../Alert-C0UdTQsO.js";
 import { a as getColorByCategory, c as commonPalette, b as getPalette } from "../paletteUtils-BHqJlHm9.js";
 function detectTouchscreen() {
   let result = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "1.4.5-alpha-external-link.3",
+  "version": "1.4.5-alpha-external-link.4",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {