@carto/meridian-ds 2.0.0-alpha-external-link.7 → 2.0.0-alpha-external-link.8

package/dist/{Alert-DmbdMf46.js → Alert-Cw9nu2Pw.js}

@@ -123,11 +123,23 @@ function _Link({
   external,
   showExternalIcon = true,
   fontWeight = 500,
+  target,
+  rel,
+  "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
   const intl = useIntl();
   const intlConfig = useImperativeIntl(intl);
   const isButtonLink = otherProps.component === "button";
+  if (process.env.NODE_ENV !== "production") {
+    const hasTargetBlank = target === "_blank";
+    const hasNoopenerRel = rel === "noopener noreferrer";
+    if (hasTargetBlank || hasNoopenerRel) {
+      console.error(
+        'Link: You are using target="_blank" and/or rel="noopener noreferrer" directly. Please use the `external` prop instead for better consistency and accessibility:\n\nInstead of:\n<Link target="_blank" rel="noopener noreferrer" href="...">Link text</Link>\n\nUse:\n<Link external href="...">Link text</Link>\n\nThe `external` prop automatically handles target="_blank", rel="noopener noreferrer", and adds proper accessibility attributes and visual indicators.'
+      );
+    }
+  }
   return /* @__PURE__ */ jsxs(
     StyledLink,
     {
@@ -139,14 +151,14 @@ function _Link({
       role: isButtonLink ? "button" : "link",
       color,
       ref,
-      target: external ? "_blank" : void 0,
-      rel: external ? "noopener noreferrer" : void 0,
-      "aria-describedby": external ? "external-hint" : void 0,
+      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({
+        external && /* @__PURE__ */ jsx(ScreenReaderOnly, { id: "external-hint", children: ` (${intlConfig.formatMessage({
           id: "c4r.button.opensInNewTab"
         })})` })
       ]

package/dist/{Alert-C-rl1sPM.cjs → Alert-a_Y9ZK5R.cjs}

@@ -124,11 +124,23 @@ function _Link({
   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";
+  if (process.env.NODE_ENV !== "production") {
+    const hasTargetBlank = target === "_blank";
+    const hasNoopenerRel = rel === "noopener noreferrer";
+    if (hasTargetBlank || hasNoopenerRel) {
+      console.error(
+        'Link: You are using target="_blank" and/or rel="noopener noreferrer" directly. Please use the `external` prop instead for better consistency and accessibility:\n\nInstead of:\n<Link target="_blank" rel="noopener noreferrer" href="...">Link text</Link>\n\nUse:\n<Link external href="...">Link text</Link>\n\nThe `external` prop automatically handles target="_blank", rel="noopener noreferrer", and adds proper accessibility attributes and visual indicators.'
+      );
+    }
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     StyledLink,
     {
@@ -140,14 +152,14 @@ function _Link({
       role: isButtonLink ? "button" : "link",
       color,
       ref,
-      target: external ? "_blank" : void 0,
-      rel: external ? "noopener noreferrer" : void 0,
-      "aria-describedby": external ? "external-hint" : void 0,
+      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({
+        external && /* @__PURE__ */ jsxRuntime.jsx(ScreenReaderOnly, { id: "external-hint", children: ` (${intlConfig.formatMessage({
           id: "c4r.button.opensInNewTab"
         })})` })
       ]

package/dist/components/index.cjs

@@ -6,7 +6,7 @@ const reactIntl = require("react-intl");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
 const TablePaginationActions = require("../TablePaginationActions-MwqZJoRm.cjs");
-const Alert$1 = require("../Alert-C-rl1sPM.cjs");
+const Alert$1 = require("../Alert-a_Y9ZK5R.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
 require("cartocolor");

package/dist/components/index.js

@@ -5,8 +5,8 @@ import { styled, Box, Button as Button$1, CircularProgress, Popper, Grow, Paper,
 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, f as MENU_ITEM_SIZE_EXTENDED, e as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, M as MENU_ITEM_SIZE_DEFAULT, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-BWer8cmX.js";
 import { a } from "../TablePaginationActions-BWer8cmX.js";
-import { S as ScreenReaderOnly, I as IconButton$1, A as Alert$1 } from "../Alert-DmbdMf46.js";
-import { L } from "../Alert-DmbdMf46.js";
+import { S as ScreenReaderOnly, I as IconButton$1, A as Alert$1 } from "../Alert-Cw9nu2Pw.js";
+import { L } from "../Alert-Cw9nu2Pw.js";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
 import "cartocolor";

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

@@ -10,6 +10,29 @@ export type LinkProps = MUILinkProps<React.ElementType, {
      * Whether to show the external icon when external is true. Defaults to true.
      */
     showExternalIcon?: boolean;
+    /**
+     * For target="_blank", use the `external` prop instead for better consistency and accessibility.
+     *
+     * Instead of: `<Link target="_blank" rel="noopener noreferrer" href="...">Link text</Link>`
+     *
+     * Use: `<Link external href="...">Link text</Link>`
+     *
+     * The `external` prop automatically handles target="_blank", rel="noopener noreferrer",
+     * and adds proper accessibility attributes and visual indicators.
+     */
+    target?: string;
+    /**
+     * For rel="noopener noreferrer", use the `external` prop instead for better consistency and accessibility.
+     *
+     * Instead of: `<Link target="_blank" rel="noopener noreferrer" href="...">Link text</Link>`
+     *
+     * Use: `<Link external href="...">Link text</Link>`
+     *
+     * The `external` prop automatically handles target="_blank", rel="noopener noreferrer",
+     * and adds proper accessibility attributes and visual indicators.
+     */
+    rel?: string;
+    'aria-describedby'?: string;
 }>;
 declare const Link: import('react').ForwardRefExoticComponent<Omit<LinkProps, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
 export default Link;

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":"AAEA,OAAO,EAEL,SAAS,IAAI,YAAY,EAG1B,MAAM,eAAe,CAAA;AAqDtB,MAAM,MAAM,SAAS,GAAG,YAAY,CAClC,KAAK,CAAC,WAAW,EACjB;IACE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CACF,CAAA;AA0DD,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;AAqDtB,MAAM,MAAM,SAAS,GAAG,YAAY,CAClC,KAAK,CAAC,WAAW,EACjB;IACE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CACF,CAAA;AAmFD,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-B8PIY3Rd.cjs");
 const iconsMaterial = require("@mui/icons-material");
-const Alert = require("../Alert-C-rl1sPM.cjs");
+const Alert = require("../Alert-a_Y9ZK5R.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-CaaLsjAC.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-DmbdMf46.js";
+import { I as IconButton, L as Link$1, A as Alert } from "../Alert-Cw9nu2Pw.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": "2.0.0-alpha-external-link.7",
+  "version": "2.0.0-alpha-external-link.8",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {