@rojaostudio/ds 2.0.0-next.22 → 2.0.0-next.23

package/dist/components/chart.d.ts

@@ -43,7 +43,8 @@ interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'onS
     showAllDates?: boolean;
     /**
      * bar and column: where each item leads, in the order of `labels`. In bar each bar becomes a link named
-     * "<label>: <value>"; in column a click or Enter on the plot follows the item's link.
+     * "<label>: <value>"; in column a click or Enter on the plot follows the item's link. Only http(s) URLs, relative
+     * paths and #fragments are followed; any other scheme (javascript:, data:…) is ignored, with a warning in dev.
      */
     hrefs?: Array<string | undefined>;
     /** bar and column: called with the item's index when it is chosen (click, Enter). In bar each bar becomes a button. */
@@ -53,11 +54,6 @@ interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'onS
     /** Height of the plot area, in px (Figma: 200). */
     height?: number;
 }
-/**
- * Chart — Figma [RDS] Content/Chart. The chart area, to go inside a Card. Every chart carries a table with the same
- * data (visually hidden unless `showTable`). In line and column the plot is a slider for screen readers and the
- * keyboard: the arrows move from point to point, and each point is read with its label and values. Styles: chart.css.
- */
-declare function Chart({ label, type, labels, series, formatLeft, formatRight, showRightAxis, showLegend, showTooltip, dates, dateEvery, showAllDates, hrefs, onSelect, showTable, height, className, ...rest }: ChartProps): react.JSX.Element;
+declare function Chart({ label, type, labels, series, formatLeft, formatRight, showRightAxis, showLegend, showTooltip, dates, dateEvery, showAllDates, hrefs: hrefsProp, onSelect, showTable, height, className, ...rest }: ChartProps): react.JSX.Element;
 
 export { Chart, type ChartProps, type ChartSeries, type ChartType };

package/dist/components/chart.js

@@ -5,7 +5,7 @@ import {
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useId, useState } from "react";
+import { useId, useMemo, useState } from "react";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
 const compact = new Intl.NumberFormat("pt-BR", { notation: "compact", maximumFractionDigits: 1 });
 const defaultFormat = (value) => compact.format(value);
@@ -25,6 +25,20 @@ function scaleOf(values) {
   const max = min + step * 4;
   return { min, max, ticks: [4, 3, 2, 1, 0].map((i) => min + step * i) };
 }
+const SAFE_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:"]);
+function safeHref(href) {
+  if (!href) return void 0;
+  if (href.startsWith("#")) return href;
+  try {
+    const base = typeof window !== "undefined" && SAFE_PROTOCOLS.has(window.location.protocol) ? window.location.href : "https://example.invalid/";
+    if (SAFE_PROTOCOLS.has(new URL(href, base).protocol)) return href;
+  } catch (e) {
+  }
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(`Chart: href "${href}" ignored. Only http(s) URLs, relative paths and #fragments are followed.`);
+  }
+  return void 0;
+}
 function Chart(_a) {
   var _b = _a, {
     label,
@@ -39,7 +53,7 @@ function Chart(_a) {
     dates,
     dateEvery,
     showAllDates,
-    hrefs,
+    hrefs: hrefsProp,
     onSelect,
     showTable = false,
     height = 200,
@@ -65,6 +79,7 @@ function Chart(_a) {
   ]);
   var _a2;
   const [active, setActive] = useState(null);
+  const hrefs = useMemo(() => hrefsProp == null ? void 0 : hrefsProp.map(safeHref), [hrefsProp]);
   const tooltipId = useId();
   const count = labels.length;
   const shown = type === "bar" ? series.slice(0, 1) : series.slice(0, 5);
@@ -92,7 +107,10 @@ function Chart(_a) {
   const linked = type !== "line" && Boolean(onSelect || (hrefs == null ? void 0 : hrefs.some(Boolean)));
   const choose = (index) => {
     if (onSelect) onSelect(index);
-    else if (hrefs == null ? void 0 : hrefs[index]) window.location.assign(hrefs[index]);
+    else {
+      const href = safeHref(hrefs == null ? void 0 : hrefs[index]);
+      if (href) window.location.assign(href);
+    }
   };
   const onPointerMove = (event) => {
     const box = event.currentTarget.getBoundingClientRect();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.22",
+  "version": "2.0.0-next.23",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",
@@ -190,7 +190,7 @@
     "@radix-ui/react-toggle": "^1.1.18",
     "@radix-ui/react-toggle-group": "^1.1.19",
     "@radix-ui/react-tooltip": "^1.2.16",
-    "@rojaostudio/ds-core": "1.1.0-next.8"
+    "@rojaostudio/ds-core": "1.1.0-next.9"
   },
   "scripts": {
     "build": "pnpm run build:tokens && pnpm run build:themes && pnpm run build:rds && pnpm run build:native && tsup",