@automattic/charts 0.59.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.59.0",
+	"version": "1.0.1",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,7 +63,7 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.1.2",
+		"@automattic/number-formatters": "^1.1.3",
 		"@babel/runtime": "7.28.6",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",
@@ -88,6 +88,7 @@
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
+		"dompurify": "^3.3.3",
 		"fast-deep-equal": "3.1.3",
 		"gridicons": "3.4.2",
 		"react-google-charts": "^5.2.1",
@@ -111,13 +112,13 @@
 		"@visx/glyph": "3.12.0",
 		"@wordpress/components": "32.4.0",
 		"@wordpress/element": "6.42.0",
-		"babel-jest": "30.2.0",
+		"babel-jest": "30.3.0",
 		"babel-plugin-react-remove-properties": "^0.3.1",
 		"esbuild": "0.25.9",
 		"esbuild-plugin-babel": "^0.2.3",
 		"esbuild-sass-plugin": "^3.1.0",
 		"identity-obj-proxy": "^3.0.0",
-		"jest": "30.2.0",
+		"jest": "30.3.0",
 		"jest-extended": "7.0.0",
 		"postcss": "8.5.6",
 		"postcss-modules": "6.0.1",
@@ -133,6 +134,6 @@
 		"react-dom": "^17.0.0 || ^18.0.0"
 	},
 	"engines": {
-		"node": ">=20.10.0"
+		"node": ">=20.11.0"
 	}
 }

package/src/charts/geo-chart/geo-chart.tsx

@@ -11,6 +11,7 @@ import { Chart, type GoogleChartOptions } from 'react-google-charts';
 import { GlobalChartsContext, GlobalChartsProvider, useGlobalChartsContext } from '../../providers';
 import { lightenHexColor, normalizeColorToHex } from '../../utils/color-utils';
 import { resolveCssVariable } from '../../utils/resolve-css-var';
+import { sanitizeHtml } from '../../utils/sanitize-html';
 import { withResponsive } from '../private/with-responsive';
 import styles from './geo-chart.module.scss';
 import { GeoChartProps } from './types';
@@ -74,24 +75,50 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	const defaultFillColorHex =
 		normalizeColorToHex( featureFillColor, null, resolveCssVariable ) || DEFAULT_FEATURE_FILL_COLOR;
 
-	// Check if data has HTML tooltips (column with role: 'tooltip' and p.html: true)
-	const hasHtmlTooltips = useMemo(
-		() =>
-			data.length > 0 &&
-			data[ 0 ].some(
-				col =>
-					typeof col === 'object' &&
-					col !== null &&
-					'role' in col &&
-					col.role === 'tooltip' &&
-					'p' in col &&
-					typeof col.p === 'object' &&
-					col.p !== null &&
-					'html' in col.p &&
-					col.p.html === true
-			),
-		[ data ]
-	);
+	// Identify HTML tooltip column indices and sanitize their content to prevent XSS.
+	const sanitizedData = useMemo( () => {
+		if ( data.length === 0 ) {
+			return { data, hasHtmlTooltips: false };
+		}
+
+		const htmlTooltipIndices: number[] = [];
+		for ( let i = 0; i < data[ 0 ].length; i++ ) {
+			const col = data[ 0 ][ i ];
+			if (
+				typeof col === 'object' &&
+				col !== null &&
+				'role' in col &&
+				col.role === 'tooltip' &&
+				'p' in col &&
+				typeof col.p === 'object' &&
+				col.p !== null &&
+				'html' in col.p &&
+				col.p.html === true
+			) {
+				htmlTooltipIndices.push( i );
+			}
+		}
+
+		if ( htmlTooltipIndices.length === 0 ) {
+			return { data, hasHtmlTooltips: false };
+		}
+
+		// Sanitize HTML content in tooltip columns for data rows (skip header row)
+		const sanitizedRows = data.slice( 1 ).map( row => {
+			const newRow = [ ...row ];
+			for ( const colIndex of htmlTooltipIndices ) {
+				if ( typeof newRow[ colIndex ] === 'string' ) {
+					newRow[ colIndex ] = sanitizeHtml( newRow[ colIndex ] as string );
+				}
+			}
+			return newRow;
+		} );
+
+		return {
+			data: [ data[ 0 ], ...sanitizedRows ] as typeof data,
+			hasHtmlTooltips: true,
+		};
+	}, [ data ] );
 
 	const options: GoogleChartOptions = useMemo(
 		() => ( {
@@ -101,7 +128,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 			backgroundColor: backgroundColorHex,
 			datalessRegionColor: defaultFillColorHex,
 			defaultColor: defaultFillColorHex,
-			tooltip: { trigger: 'focus', isHtml: hasHtmlTooltips },
+			tooltip: { trigger: 'focus', isHtml: sanitizedData.hasHtmlTooltips },
 			legend: 'none',
 			keepAspectRatio: true,
 		} ),
@@ -112,7 +139,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 			fullColorHex,
 			backgroundColorHex,
 			defaultFillColorHex,
-			hasHtmlTooltips,
+			sanitizedData.hasHtmlTooltips,
 		]
 	);
 
@@ -126,7 +153,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 				chartType="GeoChart"
 				width={ width }
 				height={ height }
-				data={ data }
+				data={ sanitizedData.data }
 				options={ options }
 				loader={ loadingPlaceholder }
 			/>

package/src/charts/geo-chart/test/geo-chart.test.tsx

@@ -67,24 +67,62 @@ describe( 'GeoChart', () => {
 	} );
 
 	describe( 'Data Handling', () => {
-		test( 'passes data directly to Google Charts without modification', () => {
-			// Test with complex data including plain values, formatted values, and tooltip columns
-			const testData: [
-				( string | object )[],
-				...[ string, number | { v: number; f: string }, string ][],
-			] = [
-				[ 'Country', 'Revenue', { type: 'string', role: 'tooltip', p: { html: true } } ],
-				[ 'US', { v: 1234567, f: '$1.23M' }, '<b>United States</b>' ],
-				[ 'CA', 543210, '<b>Canada</b>' ],
+		test( 'passes non-tooltip data without modification', () => {
+			const testData: [ string[], ...[ string, number ][] ] = [
+				[ 'Country', 'Revenue' ],
+				[ 'US', 1234567 ],
+				[ 'CA', 543210 ],
 			];
 			renderWithTheme( { data: testData } );
 
 			const chartData = screen.getByTestId( 'chart-data' );
 			const data = JSON.parse( chartData.textContent || '[]' );
 
-			// Data should be passed through exactly as provided
 			expect( data ).toEqual( testData );
 		} );
+
+		test( 'sanitizes HTML tooltip content to prevent XSS', () => {
+			const testData: [ ( string | object )[], ...[ string, number, string ][] ] = [
+				[ 'Country', 'Value', { type: 'string', role: 'tooltip', p: { html: true } } ],
+				[ 'US', 100, '<b>United States</b><script>alert("xss")</script>' ],
+				[ 'CA', 50, '<b>Canada</b><img src=x onerror="alert(1)">' ],
+			];
+			renderWithTheme( { data: testData } );
+
+			const chartData = screen.getByTestId( 'chart-data' );
+			const data = JSON.parse( chartData.textContent || '[]' );
+
+			// Script tags and img (not in allowlist) should be stripped
+			expect( data[ 1 ][ 2 ] ).toBe( '<b>United States</b>' );
+			expect( data[ 2 ][ 2 ] ).toBe( '<b>Canada</b>' );
+		} );
+
+		test( 'handles header-only data with HTML tooltip column and no data rows', () => {
+			const testData: [ ( string | object )[] ] = [
+				[ 'Country', 'Value', { type: 'string', role: 'tooltip', p: { html: true } } ],
+			];
+			renderWithTheme( { data: testData } );
+
+			const chartData = screen.getByTestId( 'chart-data' );
+			const data = JSON.parse( chartData.textContent || '[]' );
+
+			// Header row should be preserved as-is
+			expect( data ).toHaveLength( 1 );
+			expect( data[ 0 ][ 0 ] ).toBe( 'Country' );
+		} );
+
+		test( 'preserves safe HTML in tooltip content', () => {
+			const testData: [ ( string | object )[], ...[ string, number, string ][] ] = [
+				[ 'Country', 'Value', { type: 'string', role: 'tooltip', p: { html: true } } ],
+				[ 'US', 100, '<b>United States</b><br>100 orders' ],
+			];
+			renderWithTheme( { data: testData } );
+
+			const chartData = screen.getByTestId( 'chart-data' );
+			const data = JSON.parse( chartData.textContent || '[]' );
+
+			expect( data[ 1 ][ 2 ] ).toBe( '<b>United States</b><br>100 orders' );
+		} );
 	} );
 
 	describe( 'Chart Options', () => {

package/src/charts/private/chart-layout/chart-layout.module.scss

@@ -4,4 +4,12 @@
 	flex: 1;
 	min-height: 0;
 	min-width: 0;
+
+	// The svg displaying inline includes a few px for descenders, which
+	// confuses some browser environments (e.g. headless Chrome) into
+	// constantly growing the container. Setting it to display as block avoids
+	// that.
+	svg {
+		display: block;
+	}
 }

package/src/providers/chart-context/global-charts-provider.tsx

@@ -86,25 +86,19 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 		if ( Array.isArray( colors ) ) {
 			for ( const color of colors ) {
 				if ( color && typeof color === 'string' ) {
-					let colorValue = color;
-
-					// Handle CSS custom properties - resolve them to actual values
-					// Supports both '--var-name' and 'var(--var-name)' formats
-					// Use wrapper element to resolve scoped CSS variables
-					if ( color.startsWith( '--' ) || color.startsWith( 'var(' ) ) {
-						const resolved = resolveCssVariable( color, wrapperRef.current );
-
-						if ( resolved === null || resolved === '' ) {
-							continue;
-						}
-
-						colorValue = resolved;
-					}
-
-					// Process hex colors
-					if ( colorValue.startsWith( '#' ) ) {
-						resolvedColors.push( colorValue );
-						const hslColor = d3Hsl( colorValue );
+					// Normalize color to hex format, handling CSS variables, RGB, HSL, etc.
+					// This uses normalizeColorToHex which resolves CSS variables and converts
+					// rgb(), rgba(), hsl() formats to hex
+					const normalizedColor = normalizeColorToHex(
+						color,
+						wrapperRef.current,
+						resolveCssVariable
+					);
+
+					// Only process valid hex colors
+					if ( normalizedColor.startsWith( '#' ) ) {
+						resolvedColors.push( normalizedColor );
+						const hslColor = d3Hsl( normalizedColor );
 						// d3Hsl returns NaN values for invalid colors
 						if ( ! isNaN( hslColor.h ) ) {
 							const hslTuple: [ number, number, number ] = [

package/src/providers/chart-context/test/chart-context.test.tsx

@@ -1907,7 +1907,7 @@ describe( 'ChartContext', () => {
 				};
 
 				const cssVarTheme: ChartTheme = {
-					colors: [ '--rgb-color', '#ff0000' ],
+					colors: [ '--rgb-color', '#00ff00' ],
 				} as ChartTheme;
 
 				render(
@@ -1916,7 +1916,7 @@ describe( 'ChartContext', () => {
 					</GlobalChartsProvider>
 				);
 
-				// Non-hex colors are currently skipped, should use second color
+				// RGB colors should now be converted to hex and used
 				const color = contextValue.getElementStyles( {
 					data: undefined,
 					index: 0,
@@ -1924,6 +1924,127 @@ describe( 'ChartContext', () => {
 
 				expect( color ).toBe( '#ff0000' );
 			} );
+
+			it( 'handles CSS variables resolving to HSL colors', () => {
+				window.getComputedStyle = jest.fn( () => ( {
+					getPropertyValue: ( prop: string ) => {
+						if ( prop === '--hsl-color' ) {
+							return 'hsl(120, 100%, 50%)'; // HSL format (green)
+						}
+						return '';
+					},
+				} ) ) as unknown as typeof window.getComputedStyle;
+
+				let contextValue: GlobalChartsContextValue;
+
+				const TestComponent = () => {
+					contextValue = useGlobalChartsContext();
+					return <div>Test</div>;
+				};
+
+				const cssVarTheme: ChartTheme = {
+					colors: [ '--hsl-color', '#ff0000' ],
+				} as ChartTheme;
+
+				render(
+					<GlobalChartsProvider theme={ cssVarTheme }>
+						<TestComponent />
+					</GlobalChartsProvider>
+				);
+
+				// HSL colors should be converted to hex and used
+				const color = contextValue.getElementStyles( {
+					data: undefined,
+					index: 0,
+				} ).color;
+
+				expect( color ).toBe( '#00ff00' );
+			} );
+
+			it( 'handles CSS variables resolving to RGBA colors', () => {
+				window.getComputedStyle = jest.fn( () => ( {
+					getPropertyValue: ( prop: string ) => {
+						if ( prop === '--rgba-color' ) {
+							return 'rgba(0, 0, 255, 0.5)'; // RGBA format (blue with transparency)
+						}
+						return '';
+					},
+				} ) ) as unknown as typeof window.getComputedStyle;
+
+				let contextValue: GlobalChartsContextValue;
+
+				const TestComponent = () => {
+					contextValue = useGlobalChartsContext();
+					return <div>Test</div>;
+				};
+
+				const cssVarTheme: ChartTheme = {
+					colors: [ '--rgba-color', '#ff0000' ],
+				} as ChartTheme;
+
+				render(
+					<GlobalChartsProvider theme={ cssVarTheme }>
+						<TestComponent />
+					</GlobalChartsProvider>
+				);
+
+				// RGBA colors are converted to hex (alpha is stripped)
+				const color = contextValue.getElementStyles( {
+					data: undefined,
+					index: 0,
+				} ).color;
+
+				expect( color ).toBe( '#0000ff' );
+			} );
+
+			it( 'handles mix of RGB, HSL, and hex in theme colors', () => {
+				window.getComputedStyle = jest.fn( () => ( {
+					getPropertyValue: ( prop: string ) => {
+						if ( prop === '--rgb-red' ) {
+							return 'rgb(255, 0, 0)';
+						}
+						if ( prop === '--hsl-green' ) {
+							return 'hsl(120, 100%, 50%)';
+						}
+						return '';
+					},
+				} ) ) as unknown as typeof window.getComputedStyle;
+
+				let contextValue: GlobalChartsContextValue;
+
+				const TestComponent = () => {
+					contextValue = useGlobalChartsContext();
+					return <div>Test</div>;
+				};
+
+				const cssVarTheme: ChartTheme = {
+					colors: [ '--rgb-red', '--hsl-green', '#0000ff' ],
+				} as ChartTheme;
+
+				render(
+					<GlobalChartsProvider theme={ cssVarTheme }>
+						<TestComponent />
+					</GlobalChartsProvider>
+				);
+
+				// All color formats should be properly converted
+				const color1 = contextValue.getElementStyles( {
+					data: undefined,
+					index: 0,
+				} ).color;
+				const color2 = contextValue.getElementStyles( {
+					data: undefined,
+					index: 1,
+				} ).color;
+				const color3 = contextValue.getElementStyles( {
+					data: undefined,
+					index: 2,
+				} ).color;
+
+				expect( color1 ).toBe( '#ff0000' ); // RGB red
+				expect( color2 ).toBe( '#00ff00' ); // HSL green
+				expect( color3 ).toBe( '#0000ff' ); // Hex blue
+			} );
 		} );
 
 		describe( 'Error Handling', () => {
@@ -2058,7 +2179,7 @@ describe( 'ChartContext', () => {
 				} ).color;
 
 				expect( color1 ).toBe( '#ff0000' );
-				expect( color2 ).toBe( '#bad' ); // Invalid color is still in palette
+				expect( color2 ).toBe( '#bbaadd' ); // #bad is expanded to #bbaadd by normalizeColorToHex
 				expect( color3 ).toBe( '#0000ff' );
 			} );
 		} );

package/src/utils/color-utils.ts

@@ -111,13 +111,15 @@ export const parseHslString = ( hslString: string ): [ number, number, number ]
 /**
  * Parse an RGB string like 'rgb(255, 0, 0)' into a hex color.
  *
- * @param rgbString - RGB color string
- * @return hex color string or null if invalid
+ * @deprecated    Use normalizeColorToHex() instead, which handles all color formats including rgb() and rgba().
+ * @param      rgbString - RGB color string (not RGBA)
+ * @return        hex color string or null if invalid
  */
 export const parseRgbString = ( rgbString: string ): string | null => {
 	const lower = rgbString.toLowerCase().trim();
 
 	// Check prefix - only handle rgb(), not rgba()
+	// This is intentional - use normalizeColorToHex for rgba() support
 	if ( ! lower.startsWith( 'rgb(' ) || lower.startsWith( 'rgba(' ) ) {
 		return null;
 	}
@@ -135,17 +137,19 @@ export const parseRgbString = ( rgbString: string ): string | null => {
 
 /**
  * Normalize any CSS color value to a hex color string.
- * Handles hex colors, HSL strings, RGB strings, and CSS variables.
+ * Handles hex, HSL, HSLA, RGB, RGBA, named CSS colors, and CSS variables.
  *
  * @param color      - Any CSS color value
  * @param element    - Optional DOM element for resolving CSS variables
  * @param resolveCss - Function to resolve CSS variables (injected for testability)
+ * @param _depth     - Internal recursion depth counter to prevent infinite loops
  * @return hex color string, or the original value if conversion fails
  */
 export const normalizeColorToHex = (
 	color: string,
 	element?: HTMLElement | null,
-	resolveCss?: ( value: string, el?: HTMLElement | null ) => string | null
+	resolveCss?: ( value: string, el?: HTMLElement | null ) => string | null,
+	_depth = 0
 ): string => {
 	if ( ! color || typeof color !== 'string' ) {
 		return '';
@@ -170,21 +174,22 @@ export const normalizeColorToHex = (
 	if ( trimmed.startsWith( '--' ) || trimmed.startsWith( 'var(' ) ) {
 		if ( resolveCss ) {
 			const resolved = resolveCss( color, element );
-			if ( resolved ) {
+			if ( resolved && resolved !== color && _depth < 10 ) {
 				// Recursively normalize the resolved value
-				return normalizeColorToHex( resolved, element, resolveCss );
+				return normalizeColorToHex( resolved, element, resolveCss, _depth + 1 );
 			}
 		}
 		// Can't resolve CSS variable, return original
 		return color;
 	}
 
-	// Handle HSL and RGB strings using d3-color
-	if ( trimmed.startsWith( 'hsl(' ) || trimmed.startsWith( 'rgb(' ) ) {
-		// Reject rgba() - we only handle rgb()
-		if ( trimmed.startsWith( 'rgba(' ) ) {
-			return color;
-		}
+	// Handle HSL, HSLA, RGB, and RGBA strings using d3-color
+	if (
+		trimmed.startsWith( 'hsl(' ) ||
+		trimmed.startsWith( 'hsla(' ) ||
+		trimmed.startsWith( 'rgb(' ) ||
+		trimmed.startsWith( 'rgba(' )
+	) {
 		const parsed = d3Color( trimmed );
 		if ( parsed ) {
 			return parsed.formatHex();
@@ -192,6 +197,12 @@ export const normalizeColorToHex = (
 		return color;
 	}
 
+	// Attempt d3-color for any remaining format (e.g. named CSS colors like "steelblue")
+	const parsed = d3Color( trimmed );
+	if ( parsed ) {
+		return parsed.formatHex();
+	}
+
 	// Unknown format, return as-is
 	return color;
 };

package/src/utils/sanitize-html.ts

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import DOMPurify from 'dompurify';
+
+// Enforce rel="noopener noreferrer" on links with target="_blank" to prevent tab-napping.
+// Registered once at module level since DOMPurify hooks are global state.
+DOMPurify.addHook( 'afterSanitizeAttributes', ( node: Element ) => {
+	if ( node.tagName === 'A' && node.getAttribute( 'target' ) === '_blank' ) {
+		node.setAttribute( 'rel', 'noopener noreferrer' );
+	}
+} );
+
+/**
+ * Sanitizes an HTML string using DOMPurify, allowing only safe formatting
+ * markup suitable for chart tooltip content.
+ *
+ * @param html - The HTML string to sanitize
+ * @return Sanitized HTML string safe for rendering
+ */
+export function sanitizeHtml( html: string ): string {
+	return DOMPurify.sanitize( html, {
+		ALLOWED_TAGS: [
+			'a',
+			'b',
+			'br',
+			'div',
+			'em',
+			'i',
+			'li',
+			'ol',
+			'p',
+			'small',
+			'span',
+			'strong',
+			'sub',
+			'sup',
+			'table',
+			'tbody',
+			'td',
+			'th',
+			'thead',
+			'tr',
+			'u',
+			'ul',
+		],
+		ALLOWED_ATTR: [ 'class', 'href', 'target', 'rel' ],
+	} );
+}