@automattic/charts 1.0.0 → 1.0.2

package/src/providers/chart-context/types.ts

@@ -35,4 +35,5 @@ export interface GlobalChartsContextValue {
 	toggleSeriesVisibility: ( chartId: string, seriesLabel: string ) => void;
 	isSeriesVisible: ( chartId: string, seriesLabel: string ) => boolean;
 	getHiddenSeries: ( chartId: string ) => Set< string >;
+	isColorPaletteResolved: boolean;
 }

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' ],
+	} );
+}

package/src/utils/test/color-utils.test.ts

@@ -716,6 +716,21 @@ describe( 'normalizeColorToHex', () => {
 		} );
 	} );
 
+	describe( 'HSLA strings', () => {
+		it( 'converts hsla(0, 100%, 50%, 1) to #ff0000', () => {
+			expect( normalizeColorToHex( 'hsla(0, 100%, 50%, 1)' ) ).toBe( '#ff0000' );
+		} );
+
+		it( 'converts hsla(120, 100%, 50%, 0.5) to #00ff00', () => {
+			expect( normalizeColorToHex( 'hsla(120, 100%, 50%, 0.5)' ) ).toBe( '#00ff00' );
+		} );
+
+		it( 'converts fully transparent hsla to #000000', () => {
+			// d3-color converts fully transparent colors (alpha=0) to black
+			expect( normalizeColorToHex( 'hsla(240, 100%, 50%, 0)' ) ).toBe( '#000000' );
+		} );
+	} );
+
 	describe( 'RGB strings', () => {
 		it( 'converts rgb(255, 0, 0) to #ff0000', () => {
 			expect( normalizeColorToHex( 'rgb(255, 0, 0)' ) ).toBe( '#ff0000' );
@@ -726,6 +741,36 @@ describe( 'normalizeColorToHex', () => {
 		} );
 	} );
 
+	describe( 'RGBA strings', () => {
+		it( 'converts rgba(255, 0, 0, 1) to #ff0000', () => {
+			expect( normalizeColorToHex( 'rgba(255, 0, 0, 1)' ) ).toBe( '#ff0000' );
+		} );
+
+		it( 'converts rgba(0, 0, 255, 0.5) to #0000ff', () => {
+			// Alpha channel is stripped in hex conversion
+			expect( normalizeColorToHex( 'rgba(0, 0, 255, 0.5)' ) ).toBe( '#0000ff' );
+		} );
+
+		it( 'converts fully transparent rgba to #000000', () => {
+			// d3-color converts fully transparent colors (alpha=0) to black
+			expect( normalizeColorToHex( 'rgba(128, 128, 128, 0)' ) ).toBe( '#000000' );
+		} );
+	} );
+
+	describe( 'Named CSS colors', () => {
+		it( 'converts steelblue to hex', () => {
+			expect( normalizeColorToHex( 'steelblue' ) ).toBe( '#4682b4' );
+		} );
+
+		it( 'converts red to hex', () => {
+			expect( normalizeColorToHex( 'red' ) ).toBe( '#ff0000' );
+		} );
+
+		it( 'returns unknown strings as-is', () => {
+			expect( normalizeColorToHex( 'notacolor' ) ).toBe( 'notacolor' );
+		} );
+	} );
+
 	describe( 'CSS variables', () => {
 		it( 'returns original if no resolveCss function provided', () => {
 			expect( normalizeColorToHex( '--my-color' ) ).toBe( '--my-color' );
@@ -755,6 +800,71 @@ describe( 'normalizeColorToHex', () => {
 			const mockResolve = jest.fn().mockReturnValue( null );
 			expect( normalizeColorToHex( '--my-color', null, mockResolve ) ).toBe( '--my-color' );
 		} );
+
+		it( 'returns original when CSS variable resolves to itself', () => {
+			const mockResolve = jest.fn().mockImplementation( ( v: string ) => v );
+			expect( normalizeColorToHex( '--loop', null, mockResolve ) ).toBe( '--loop' );
+		} );
+
+		it( 'returns original when CSS variable resolves to empty string', () => {
+			const mockResolve = jest.fn().mockReturnValue( '' );
+			expect( normalizeColorToHex( '--empty', null, mockResolve ) ).toBe( '--empty' );
+		} );
+
+		it( 'does not infinite loop on indirect CSS variable cycle', () => {
+			const mockResolve = jest.fn().mockImplementation( ( v: string ) => {
+				if ( v === '--a' ) return 'var(--b)';
+				if ( v === 'var(--b)' ) return '--a';
+
+				return null;
+			} );
+
+			expect( () => normalizeColorToHex( '--a', null, mockResolve ) ).not.toThrow();
+		} );
+
+		it( 'resolves multi-hop CSS variable chain', () => {
+			const mockResolve = jest.fn().mockImplementation( ( v: string ) => {
+				if ( v === '--a' ) return 'var(--b)';
+				if ( v === 'var(--b)' ) return 'hsl(0, 100%, 50%)';
+
+				return null;
+			} );
+
+			expect( normalizeColorToHex( '--a', null, mockResolve ) ).toBe( '#ff0000' );
+		} );
+	} );
+
+	describe( 'Whitespace handling', () => {
+		it( 'trims leading and trailing spaces from hex', () => {
+			expect( normalizeColorToHex( '  #ff0000  ' ) ).toBe( '#ff0000' );
+		} );
+
+		it( 'trims spaces from HSL string', () => {
+			expect( normalizeColorToHex( '  hsl(0, 100%, 50%)  ' ) ).toBe( '#ff0000' );
+		} );
+
+		it( 'trims spaces from named color', () => {
+			expect( normalizeColorToHex( '  red  ' ) ).toBe( '#ff0000' );
+		} );
+	} );
+
+	describe( 'Case insensitivity', () => {
+		it( 'converts uppercase HSL', () => {
+			expect( normalizeColorToHex( 'HSL(0, 100%, 50%)' ) ).toBe( '#ff0000' );
+		} );
+
+		it( 'converts uppercase RGB', () => {
+			expect( normalizeColorToHex( 'RGB(255, 0, 0)' ) ).toBe( '#ff0000' );
+		} );
+
+		it( 'converts uppercase RGBA', () => {
+			expect( normalizeColorToHex( 'RGBA(0, 0, 255, 1)' ) ).toBe( '#0000ff' );
+		} );
+
+		it( 'handles uppercase VAR() syntax', () => {
+			const mockResolve = jest.fn().mockReturnValue( '#ff0000' );
+			expect( normalizeColorToHex( 'VAR(--my-color)', null, mockResolve ) ).toBe( '#ff0000' );
+		} );
 	} );
 
 	describe( 'Invalid inputs', () => {

package/src/utils/test/sanitize-html.test.ts

@@ -0,0 +1,101 @@
+import { sanitizeHtml } from '../sanitize-html';
+
+describe( 'sanitizeHtml', () => {
+	test( 'preserves safe formatting tags', () => {
+		const input = '<b>Bold</b> <em>italic</em> <strong>strong</strong>';
+		expect( sanitizeHtml( input ) ).toBe( '<b>Bold</b> <em>italic</em> <strong>strong</strong>' );
+	} );
+
+	test( 'strips style attributes', () => {
+		const input = '<div style="padding: 12px;"><span style="color: red;">text</span></div>';
+		expect( sanitizeHtml( input ) ).toBe( '<div><span>text</span></div>' );
+	} );
+
+	test( 'preserves br tags', () => {
+		const input = 'line one<br>line two';
+		expect( sanitizeHtml( input ) ).toBe( 'line one<br>line two' );
+	} );
+
+	test( 'removes script tags', () => {
+		const input = '<b>Safe</b><script>alert("xss")</script>';
+		expect( sanitizeHtml( input ) ).toBe( '<b>Safe</b>' );
+	} );
+
+	test( 'removes img tags with onerror handlers', () => {
+		const input = '<b>Safe</b><img src=x onerror="alert(document.cookie)">';
+		expect( sanitizeHtml( input ) ).toBe( '<b>Safe</b>' );
+	} );
+
+	test( 'removes iframe tags', () => {
+		const input = '<div>text</div><iframe src="https://evil.com"></iframe>';
+		expect( sanitizeHtml( input ) ).toBe( '<div>text</div>' );
+	} );
+
+	test( 'removes event handler attributes from allowed tags', () => {
+		const input = '<div onclick="alert(1)" onmouseover="steal()">text</div>';
+		expect( sanitizeHtml( input ) ).toBe( '<div>text</div>' );
+	} );
+
+	test( 'removes javascript: URLs from href', () => {
+		const input = '<a href="javascript:alert(1)">click</a>';
+		expect( sanitizeHtml( input ) ).toBe( '<a>click</a>' );
+	} );
+
+	test( 'preserves safe href values', () => {
+		const input = '<a href="https://example.com" target="_blank" rel="noopener">link</a>';
+		expect( sanitizeHtml( input ) ).toBe(
+			'<a href="https://example.com" target="_blank" rel="noopener noreferrer">link</a>'
+		);
+	} );
+
+	test( 'removes object and embed tags', () => {
+		const input = '<div>safe</div><object data="x"></object><embed src="y">';
+		expect( sanitizeHtml( input ) ).toBe( '<div>safe</div>' );
+	} );
+
+	test( 'removes form tags but preserves safe child content', () => {
+		const input = '<form action="https://evil.com"><div>trap</div></form>';
+		const result = sanitizeHtml( input );
+		expect( result ).not.toContain( '<form' );
+		expect( result ).not.toContain( 'action' );
+		expect( result ).toContain( '<div>trap</div>' );
+	} );
+
+	test( 'handles complex tooltip HTML and strips style attributes', () => {
+		const input = `<div style="padding: 12px; font-family: sans-serif;">
+			<div style="font-weight: bold;">United States</div>
+			<div style="color: #666;">Orders: <strong>1,000</strong></div>
+		</div>`;
+		const result = sanitizeHtml( input );
+		expect( result ).toContain( 'United States' );
+		expect( result ).toContain( '<strong>1,000</strong>' );
+		expect( result ).not.toContain( 'style' );
+	} );
+
+	test( 'handles empty string', () => {
+		expect( sanitizeHtml( '' ) ).toBe( '' );
+	} );
+
+	test( 'handles plain text', () => {
+		expect( sanitizeHtml( 'just text' ) ).toBe( 'just text' );
+	} );
+
+	test( 'removes disallowed attributes like id and style', () => {
+		const input = '<div id="evil" style="color: red;">text</div>';
+		expect( sanitizeHtml( input ) ).toBe( '<div>text</div>' );
+	} );
+
+	test( 'enforces rel="noopener noreferrer" on target="_blank" links', () => {
+		const input = '<a href="https://example.com" target="_blank">link</a>';
+		expect( sanitizeHtml( input ) ).toBe(
+			'<a href="https://example.com" target="_blank" rel="noopener noreferrer">link</a>'
+		);
+	} );
+
+	test( 'overrides insufficient rel on target="_blank" links', () => {
+		const input = '<a href="https://example.com" target="_blank" rel="noopener">link</a>';
+		expect( sanitizeHtml( input ) ).toBe(
+			'<a href="https://example.com" target="_blank" rel="noopener noreferrer">link</a>'
+		);
+	} );
+} );