@flux-ui/statistics 3.0.0-next.72 → 3.0.0-next.73

package/dist/index.js

@@ -130,13 +130,39 @@ function deepResolveCssVars(value, root) {
 	return changed ? out : value;
 }
 //#endregion
+//#region src/util/html.ts
+var HTML_ESCAPES = {
+	"&": "&",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#39;"
+};
+var HTML_PATTERN = /[&<>"']/g;
+var ATTR_PATTERN = /[&<>"]/g;
+/**
+* Escapes a value for safe interpolation into HTML text content.
+*/
+function escapeHtml(value) {
+	return String(value ?? "").replace(HTML_PATTERN, (char) => HTML_ESCAPES[char]);
+}
+/**
+* Escapes a value for safe interpolation into a double-quoted HTML attribute
+* or inline style value. Prevents attribute breakout from untrusted input.
+*/
+function escapeAttr(value) {
+	return String(value ?? "").replace(ATTR_PATTERN, (char) => HTML_ESCAPES[char]);
+}
+//#endregion
 //#region src/util/icons.ts
 function renderIconSvg(name, color, size = 14) {
 	if (!name) return "";
 	const icon = iconRegistry[name];
 	if (!icon) return "";
 	const [width, height, , , pathData] = icon;
-	return `<svg viewBox="0 0 ${width} ${height}" width="${size}" height="${size}" focusable="false" aria-hidden="true">${(Array.isArray(pathData) ? pathData : [pathData]).map((d) => `<path d="${d}" fill="${color}"/>`).join("")}</svg>`;
+	const paths = Array.isArray(pathData) ? pathData : [pathData];
+	const safeColor = escapeAttr(color);
+	return `<svg viewBox="0 0 ${width} ${height}" width="${size}" height="${size}" focusable="false" aria-hidden="true">${paths.map((d) => `<path d="${escapeAttr(d)}" fill="${safeColor}"/>`).join("")}</svg>`;
 }
 //#endregion
 //#region src/util/series/chartColors.ts
@@ -6822,17 +6848,18 @@ function K(e, t, n) {
 //#region src/util/tooltips/render.ts
 function renderTooltip(t, styles, title, items, activeIndex = -1, valueFormatter) {
 	if (items.length === 0) return "";
-	const titleHtml = title ? `<div class="${styles.statisticsChartTooltipTitle}">${title}</div>` : "";
+	const titleHtml = title ? `<div class="${styles.statisticsChartTooltipTitle}">${escapeHtml(title)}</div>` : "";
 	const hasActive = activeIndex !== -1;
 	const body = items.map((item, idx) => {
 		const activeClass = !hasActive || idx === activeIndex ? ` ${styles.isActive}` : "";
 		const translatedName = item.name ? t(String(item.name)) : "";
-		const marker = item.icon ? `<div class="${styles.statisticsChartTooltipSeriesIcon}${activeClass}" style="color: ${item.color}">${renderIconSvg(item.icon, item.color, 14)}</div>` : `<div class="${styles.statisticsChartTooltipSeriesColor}${activeClass}" style="background: ${item.color}"></div>`;
+		const safeColor = escapeAttr(item.color);
+		const marker = item.icon ? `<div class="${styles.statisticsChartTooltipSeriesIcon}${activeClass}" style="color: ${safeColor}">${renderIconSvg(item.icon, item.color, 14)}</div>` : `<div class="${styles.statisticsChartTooltipSeriesColor}${activeClass}" style="background: ${safeColor}"></div>`;
 		const display = valueFormatter ? valueFormatter(item.value, item) : formatValue(item.value);
 		return `
             ${marker}
-            <div class="${styles.statisticsChartTooltipSeriesName}${activeClass}">${translatedName}</div>
-            <div class="${styles.statisticsChartTooltipSeriesValue}${activeClass}">${display}</div>
+            <div class="${styles.statisticsChartTooltipSeriesName}${activeClass}">${escapeHtml(translatedName)}</div>
+            <div class="${styles.statisticsChartTooltipSeriesValue}${activeClass}">${escapeHtml(display)}</div>
         `;
 	}).join("");
 	return `<div class="${styles.statisticsChartTooltip}">${titleHtml}<div class="${styles.statisticsChartTooltipBody}">${body}</div></div>`;