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

package/dist/util/html.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Escapes a value for safe interpolation into HTML text content.
+ */
+export declare function escapeHtml(value: unknown): string;
+/**
+ * Escapes a value for safe interpolation into a double-quoted HTML attribute
+ * or inline style value. Prevents attribute breakout from untrusted input.
+ */
+export declare function escapeAttr(value: unknown): string;

package/dist/util/index.d.ts

@@ -1,4 +1,5 @@
 export * from './colors';
+export * from './html';
 export * from './icons';
 export * from './options';
 export * from './series';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/statistics",
     "description": "Statistics components for the Flux UI library.",
-    "version": "3.0.0-next.72",
+    "version": "3.0.0-next.73",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -51,9 +51,9 @@
     "dependencies": {
         "@basmilius/common": "^3.37.0",
         "@basmilius/utils": "^3.37.0",
-        "@flux-ui/components": "3.0.0-next.72",
-        "@flux-ui/internals": "3.0.0-next.72",
-        "@flux-ui/types": "3.0.0-next.72",
+        "@flux-ui/components": "3.0.0-next.73",
+        "@flux-ui/internals": "3.0.0-next.73",
+        "@flux-ui/types": "3.0.0-next.73",
         "clsx": "^2.1.1"
     },
     "peerDependencies": {

package/src/util/html.ts

@@ -0,0 +1,25 @@
+const HTML_ESCAPES: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    '\'': '&#39;'
+};
+
+const HTML_PATTERN = /[&<>"']/g;
+const ATTR_PATTERN = /[&<>"]/g;
+
+/**
+ * Escapes a value for safe interpolation into HTML text content.
+ */
+export function escapeHtml(value: unknown): string {
+    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.
+ */
+export function escapeAttr(value: unknown): string {
+    return String(value ?? '').replace(ATTR_PATTERN, char => HTML_ESCAPES[char]);
+}

package/src/util/icons.ts

@@ -1,5 +1,6 @@
 import { iconRegistry } from '@flux-ui/components';
 import type { FluxIconName } from '@flux-ui/types';
+import { escapeAttr } from './html';
 
 export function renderIconSvg(name: FluxIconName | undefined, color: string, size: number = 14): string {
     if (!name) {
@@ -14,7 +15,8 @@ export function renderIconSvg(name: FluxIconName | undefined, color: string, siz
 
     const [width, height, , , pathData] = icon;
     const paths = Array.isArray(pathData) ? pathData : [pathData];
-    const pathElements = paths.map(d => `<path d="${d}" fill="${color}"/>`).join('');
+    const safeColor = escapeAttr(color);
+    const pathElements = paths.map(d => `<path d="${escapeAttr(d)}" fill="${safeColor}"/>`).join('');
 
     return `<svg viewBox="0 0 ${width} ${height}" width="${size}" height="${size}" focusable="false" aria-hidden="true">${pathElements}</svg>`;
 }

package/src/util/index.ts

@@ -1,4 +1,5 @@
 export * from './colors';
+export * from './html';
 export * from './icons';
 export * from './options';
 export * from './series';

package/src/util/tooltips/render.ts

@@ -1,4 +1,5 @@
 import { formatNumber } from '@basmilius/utils';
+import { escapeAttr, escapeHtml } from '../html';
 import { renderIconSvg } from '../icons';
 import type { ChartTooltipValueFormatter, SharedTooltipItem, TooltipParam, TooltipStyleClasses, Translator } from './types';
 
@@ -15,7 +16,7 @@ export function renderTooltip(
     }
 
     const titleHtml = title
-        ? `<div class="${styles.statisticsChartTooltipTitle}">${title}</div>`
+        ? `<div class="${styles.statisticsChartTooltipTitle}">${escapeHtml(title)}</div>`
         : '';
 
     const hasActive = activeIndex !== -1;
@@ -25,16 +26,17 @@ export function renderTooltip(
         const activeClass = isActive ? ` ${styles.isActive}` : '';
         const translatedName = item.name ? t(String(item.name)) : '';
 
+        const safeColor = escapeAttr(item.color);
         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>`;
+            ? `<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('');