@automattic/charts 4.10.0 → 4.11.0

package/dist/visx/group/index.js

@@ -1,2 +1 @@
-import { Group } from "@visx/group";
-export { Group };
+export { Group } from "@visx/group";

package/dist/visx/legend/index.js

@@ -1,2 +1 @@
-import { CircleShape, LineShape, RectShape } from "@visx/legend";
-export { CircleShape, LineShape, RectShape };
+export { CircleShape, LineShape, RectShape } from "@visx/legend";

package/dist/visx/text/index.js

@@ -1,2 +1 @@
-import { Text, getStringWidth, useText } from "@visx/text";
-export { Text, getStringWidth, useText };
+export { Text, getStringWidth, useText } from "@visx/text";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.10.0",
+	"version": "4.11.0",
 	"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.2.10",
+		"@automattic/number-formatters": "^1.2.11",
 		"@babel/runtime": "7.29.7",
 		"@date-fns/tz": "1.5.0",
 		"@react-spring/web": "10.1.1",
@@ -84,9 +84,9 @@
 		"@visx/vendor": "^4.0.0",
 		"@visx/xychart": "^4.0.0",
 		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/icons": "^16.0.0",
-		"@wordpress/theme": "2.1.1-next.v.202609031004.0",
-		"@wordpress/ui": "0.22.0",
+		"@wordpress/icons": "^18.0.0",
+		"@wordpress/theme": "2.3.0",
+		"@wordpress/ui": "0.24.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -104,26 +104,27 @@
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
 		"@testing-library/user-event": "^14.4.3",
-		"@tsdown/css": "0.22.14",
+		"@tsdown/css": "0.23.1",
 		"@types/jest": "^30.0.0",
 		"@types/node": "^24.12.0",
 		"@types/react": "18.3.31",
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"@visx/glyph": "4.0.0",
-		"@wordpress/components": "40.1.0",
-		"@wordpress/element": "8.7.0",
-		"@wordpress/private-apis": "1.55.0",
-		"babel-jest": "30.5.1",
+		"@wordpress/components": "42.0.0",
+		"@wordpress/element": "9.0.0",
+		"@wordpress/private-apis": "2.0.0",
+		"babel-jest": "30.5.2",
 		"identity-obj-proxy": "^3.0.0",
-		"jest": "30.5.1",
+		"jest": "30.5.2",
 		"jest-extended": "7.0.0",
+		"lightningcss": "^1.33.0",
 		"magic-string": "0.30.21",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.3",
 		"storybook": "10.4.6",
-		"tsdown": "0.22.14",
+		"tsdown": "0.23.1",
 		"typescript": "6.0.3"
 	},
 	"peerDependencies": {

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss

@@ -85,6 +85,11 @@
 	background-color: var(--a8c-charts-color-surface-secondary);
 	position: relative;
 	cursor: pointer;
+
+	&:focus-visible {
+		outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus);
+		outline-offset: var(--wpds-border-width-focus);
+	}
 }
 
 .funnel-bar {

package/src/charts/geo-chart/geo-chart.module.scss

@@ -1,3 +1,5 @@
+@use "../../components/tooltip/surface" as tooltip;
+
 .container {
 	position: relative;
 	background-color: var(--a8c-charts-color-background, #fff);
@@ -8,5 +10,30 @@
 	// whole and grows the box instead.
 	:global(.google-visualization-tooltip) {
 		white-space: nowrap;
+		border: 0;
+
+		@include tooltip.surface;
+	}
+
+	:global(.google-visualization-tooltip-item-list) {
+		margin: 0;
+		padding: 0;
+	}
+
+	// The long chain outranks Google's `:first-child` item rule.
+	:global(.google-visualization-tooltip .google-visualization-tooltip-item-list .google-visualization-tooltip-item) {
+		margin: 0;
+		padding: 0;
+
+		&:first-child {
+			padding-block-end: var(--wpds-dimension-padding-md);
+		}
+	}
+
+	// Google writes these inline on every span.
+	:global(.google-visualization-tooltip-item) span {
+		color: inherit !important;
+		font-family: inherit !important;
+		font-size: inherit !important;
 	}
 }

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

@@ -3,11 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import { FC, useContext, useEffect, useMemo, useRef } from 'react';
+import { FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Chart, type GoogleChartPackages, type ReactGoogleChartEvent } from 'react-google-charts';
 /**
  * Internal dependencies
  */
+import { TooltipTheme } from '../../components/tooltip/private/tooltip-theme';
 import {
 	GlobalChartsContext,
 	GlobalChartsProvider,
@@ -21,6 +22,7 @@ import { sanitizeHtml } from '../../utils/sanitize-html';
 import { Center } from '../private/center';
 import { withResponsive } from '../private/with-responsive';
 import styles from './geo-chart.module.scss';
+import { useTooltipPosition } from './private/use-tooltip-position';
 import type { GeoChartError, GeoChartProps } from './types';
 
 const DEFAULT_FEATURE_FILL_COLOR = '#ffffff';
@@ -90,6 +92,40 @@ function involvesGeoChartErrorElement( node: Node ): boolean {
 	);
 }
 
+const isTooltipColumn = ( column: unknown ): boolean =>
+	typeof column === 'object' && column !== null && 'role' in column && column.role === 'tooltip';
+
+// Google renders a column or cell as markup when its `p.html` is truthy, even the string 'false'.
+const hasHtmlFlag = ( columnOrCell: unknown ): boolean =>
+	typeof columnOrCell === 'object' &&
+	columnOrCell !== null &&
+	'p' in columnOrCell &&
+	typeof columnOrCell.p === 'object' &&
+	columnOrCell.p !== null &&
+	'html' in columnOrCell.p &&
+	!! columnOrCell.p.html;
+
+const sanitizeIfString = ( value: unknown ) =>
+	typeof value === 'string' ? sanitizeHtml( value ) : value;
+
+/**
+ * Sanitizes a tooltip cell Google will render as markup, whether a string or a `{ v, f, p }` object.
+ *
+ * @param cell - The tooltip cell.
+ * @return The cell with its markup sanitized.
+ */
+function sanitizeTooltipCell( cell: unknown ): unknown {
+	if ( typeof cell !== 'object' || cell === null ) {
+		return sanitizeIfString( cell );
+	}
+
+	return {
+		...cell,
+		...( 'v' in cell && { v: sanitizeIfString( cell.v ) } ),
+		...( 'f' in cell && { f: sanitizeIfString( cell.f ) } ),
+	};
+}
+
 /**
  * Normalizes the raw Google Charts error event into the GeoChart error shape.
  *
@@ -155,6 +191,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	const scopeElement = useChartScopeElement();
 	const containerRef = useRef< HTMLDivElement >( null );
 	const reportedErrorIdsRef = useRef< Set< string > >( new Set() );
+	const [ isLoaded, setIsLoaded ] = useState( false );
 
 	// The ChartWrapper `error` event does not fire for every draw failure —
 	// notably not when GeoChart's asynchronous map-file load fails (e.g.
@@ -197,7 +234,10 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 		return () => observer.disconnect();
 	}, [ onError ] );
 
-	// Render loading placeholder
+	useTooltipPosition( containerRef );
+
+	const handleLoad = useCallback( () => setIsLoaded( true ), [] );
+
 	const loadingPlaceholder = (
 		<Center
 			className={ clsx( 'geo-chart', styles.container, className ) }
@@ -219,49 +259,30 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 		normalizeColorToHex( CATALOG_POINTERS.surfaceSecondary, scopeElement, resolveCssVariable ) ||
 		DEFAULT_FEATURE_FILL_COLOR;
 
-	// Identify HTML tooltip column indices and sanitize their content to prevent XSS.
 	const sanitizedData = useMemo( () => {
 		if ( data.length === 0 ) {
-			return { data, hasHtmlTooltips: false };
+			return data;
 		}
 
-		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 );
-			}
-		}
+		const tooltipColumns = data[ 0 ].flatMap( ( column, index ) =>
+			isTooltipColumn( column ) ? [ { index, isHtml: hasHtmlFlag( column ) } ] : []
+		);
 
-		if ( htmlTooltipIndices.length === 0 ) {
-			return { data, hasHtmlTooltips: false };
+		if ( tooltipColumns.length === 0 ) {
+			return data;
 		}
 
-		// 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 );
+			for ( const { index, isHtml } of tooltipColumns ) {
+				if ( isHtml || hasHtmlFlag( newRow[ index ] ) ) {
+					newRow[ index ] = sanitizeTooltipCell( newRow[ index ] ) as ( typeof newRow )[ number ];
 				}
 			}
 			return newRow;
 		} );
 
-		return {
-			data: [ data[ 0 ], ...sanitizedRows ] as typeof data,
-			hasHtmlTooltips: true,
-		};
+		return [ data[ 0 ], ...sanitizedRows ] as typeof data;
 	}, [ data ] );
 
 	const options: GoogleChartOptions = useMemo(
@@ -274,7 +295,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 			backgroundColor: backgroundColorHex,
 			datalessRegionColor: defaultFillColorHex,
 			defaultColor: defaultFillColorHex,
-			tooltip: { trigger: 'focus', isHtml: sanitizedData.hasHtmlTooltips },
+			tooltip: { trigger: 'focus', isHtml: true },
 			legend: 'none',
 			keepAspectRatio: true,
 		} ),
@@ -287,7 +308,6 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 			fullColorHex,
 			backgroundColorHex,
 			defaultFillColorHex,
-			sanitizedData.hasHtmlTooltips,
 		]
 	);
 
@@ -326,16 +346,21 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 			data-testid="geo-chart"
 			style={ { width, height } }
 		>
-			<Chart
-				chartType="GeoChart"
-				chartPackages={ GEO_CHART_PACKAGES }
-				width={ width }
-				height={ height }
-				data={ sanitizedData.data }
-				options={ options }
-				chartEvents={ chartEvents }
-				loader={ loadingPlaceholder }
-			/>
+			{ /* Outside TooltipTheme, so a custom placeholder keeps the host theme; `loader` would put it inside. */ }
+			{ ! isLoaded && loadingPlaceholder }
+			{ /* Every `--wpds-*` read inside resolves for the dark tooltip; map colors must keep coming from scopeElement. */ }
+			<TooltipTheme>
+				<Chart
+					chartType="GeoChart"
+					chartPackages={ GEO_CHART_PACKAGES }
+					width={ width }
+					height={ height }
+					data={ sanitizedData }
+					options={ options }
+					chartEvents={ chartEvents }
+					onLoad={ handleLoad }
+				/>
+			</TooltipTheme>
 		</Center>
 	);
 };

package/src/charts/geo-chart/private/use-tooltip-position.ts

@@ -0,0 +1,106 @@
+import { useEffect, type RefObject } from 'react';
+import {
+	DEFAULT_OFFSET,
+	findClippingAncestor,
+	getBoundedPosition,
+} from '../../../components/tooltip/private/bounded-tooltip';
+
+const TOOLTIP_CLASS = 'google-visualization-tooltip';
+
+const isTooltip = ( node: Node ): node is HTMLElement =>
+	node instanceof HTMLElement && node.classList.contains( TOOLTIP_CLASS );
+
+/**
+ * Moves Google's HTML tooltip to where the other chart tooltips sit, just off the cursor. Google places it about 30px away and has no option for it.
+ *
+ * @param containerRef - The element Google draws the chart into.
+ */
+export function useTooltipPosition( containerRef: RefObject< HTMLElement > ) {
+	useEffect( () => {
+		const container = containerRef.current;
+
+		if ( ! container || typeof MutationObserver === 'undefined' ) {
+			return undefined;
+		}
+
+		let pointer: { x: number; y: number } | null = null;
+		let clip: { parent: Element; element: Element | null } | null = null;
+		const ownStyles = new WeakMap< HTMLElement, string >();
+
+		const place = ( tooltip: HTMLElement ) => {
+			const parent = tooltip.offsetParent;
+
+			if ( ! pointer || ! parent ) {
+				return;
+			}
+
+			if ( clip?.parent !== parent ) {
+				clip = { parent, element: findClippingAncestor( parent ) };
+			}
+
+			const parentRect = parent.getBoundingClientRect();
+			const clipRect = clip.element?.getBoundingClientRect() ?? {
+				left: 0,
+				top: 0,
+				right: window.innerWidth,
+				bottom: window.innerHeight,
+			};
+			const { x, y } = getBoundedPosition( {
+				left: pointer.x - parentRect.left,
+				top: pointer.y - parentRect.top,
+				offsetLeft: DEFAULT_OFFSET,
+				offsetTop: DEFAULT_OFFSET,
+				box: { width: tooltip.offsetWidth, height: tooltip.offsetHeight },
+				wrapper: { left: 0, top: 0, right: parentRect.width, bottom: parentRect.height },
+				bounds: {
+					left: clipRect.left - parentRect.left,
+					top: clipRect.top - parentRect.top,
+					right: clipRect.right - parentRect.left,
+					bottom: clipRect.bottom - parentRect.top,
+				},
+			} );
+
+			tooltip.style.left = `${ x }px`;
+			tooltip.style.top = `${ y }px`;
+			ownStyles.set( tooltip, tooltip.style.cssText );
+		};
+
+		const trackPointer = ( event: MouseEvent ) => {
+			pointer = { x: event.clientX, y: event.clientY };
+		};
+
+		const observer = new MutationObserver( records => {
+			const tooltips = new Set< HTMLElement >();
+
+			for ( const record of records ) {
+				if ( isTooltip( record.target ) ) {
+					tooltips.add( record.target );
+				}
+				record.addedNodes.forEach( node => isTooltip( node ) && tooltips.add( node ) );
+			}
+
+			for ( const tooltip of tooltips ) {
+				// Our own write is observed too; placing again would loop.
+				if ( ownStyles.get( tooltip ) !== tooltip.style.cssText ) {
+					place( tooltip );
+				}
+			}
+		} );
+
+		// Google's own mouse events, captured so the pointer is current before Google writes the tooltip. Chrome sends mouse events, but no pointer events, when the map moves under a resting cursor.
+		container.addEventListener( 'mouseover', trackPointer, true );
+		container.addEventListener( 'mousemove', trackPointer, true );
+		observer.observe( container, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: [ 'style' ],
+		} );
+
+		return () => {
+			container.removeEventListener( 'mouseover', trackPointer, true );
+			container.removeEventListener( 'mousemove', trackPointer, true );
+			observer.disconnect();
+		};
+	}, [ containerRef ] );
+}

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

@@ -1,7 +1,8 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import { Chart } from 'react-google-charts';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { Chart, type GoogleDataTableColumnRoleType } from 'react-google-charts';
 import { GlobalChartsProvider } from '../../../providers';
 import GeoChart, { GeoChartUnresponsive } from '../geo-chart';
+import type { GeoChartProps } from '../types';
 
 // Mock react-google-charts
 jest.mock( 'react-google-charts', () => ( {
@@ -97,20 +98,54 @@ describe( 'GeoChart', () => {
 			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 } );
+		test.each( [ true, 'true', 1, 'false' ] )(
+			'sanitizes HTML tooltip content when p.html is %p',
+			html => {
+				const testData: [ ( string | object )[], ...[ string, number, string ][] ] = [
+					[ 'Country', 'Value', { type: 'string', role: 'tooltip', p: { html } } ],
+					[ '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>' );
+			}
+		);
 
-			const chartData = screen.getByTestId( 'chart-data' );
-			const data = JSON.parse( chartData.textContent || '[]' );
+		const unsafe = '<b>US</b><img src=x onerror="alert(1)">';
+		const htmlColumn = { type: 'string', role: 'tooltip', p: { html: true } };
+		const textColumn = { type: 'string', role: 'tooltip' };
+
+		test.each( [
+			[
+				'a cell flagged HTML in a text column',
+				textColumn,
+				{ v: unsafe, p: { html: true } },
+				{ v: '<b>US</b>', p: { html: true } },
+			],
+			[
+				'an object cell in an HTML column',
+				htmlColumn,
+				{ v: unsafe, f: unsafe },
+				{ v: '<b>US</b>', f: '<b>US</b>' },
+			],
+			[ 'a plain cell in a text column, which Google escapes', textColumn, unsafe, unsafe ],
+		] )( 'sanitizes tooltip markup in %s', ( _, column, cell, expected ) => {
+			renderWithTheme( {
+				data: [
+					[ 'Country', 'Value', column ],
+					[ 'US', 100, cell ],
+				],
+			} );
 
-			// 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>' );
+			const data = JSON.parse( screen.getByTestId( 'chart-data' ).textContent || '[]' );
+
+			expect( data[ 1 ][ 2 ] ).toEqual( expected );
 		} );
 
 		test( 'handles header-only data with HTML tooltip column and no data rows', () => {
@@ -170,41 +205,22 @@ describe( 'GeoChart', () => {
 			expect( options.legend ).toBe( 'none' );
 		} );
 
-		test( 'sets tooltip trigger to focus with isHtml false by default', () => {
-			renderWithTheme();
-
-			const chartOptions = screen.getByTestId( 'chart-options' );
-			const options = JSON.parse( chartOptions.textContent || '{}' );
-
-			expect( options.tooltip ).toEqual( { trigger: 'focus', isHtml: false } );
-		} );
-
-		test( 'enables HTML tooltips when data has HTML tooltip column', () => {
-			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' ],
-				[ 'CA', 50, '<b>Canada</b><br/>50 orders' ],
-			];
-			renderWithTheme( { data: testData } );
-
-			const chartOptions = screen.getByTestId( 'chart-options' );
-			const options = JSON.parse( chartOptions.textContent || '{}' );
-
-			expect( options.tooltip ).toEqual( { trigger: 'focus', isHtml: true } );
-		} );
-
-		test( 'keeps isHtml false for text-only tooltips', () => {
-			const testData: [ ( string | object )[], ...[ string, number, string ][] ] = [
-				[ 'Country', 'Value', { type: 'string', role: 'tooltip' } ],
+		test( 'sets tooltip trigger to focus with isHtml true', () => {
+			const data: GeoChartProps[ 'data' ] = [
+				[
+					'Country',
+					'Value',
+					{ type: 'string', role: 'tooltip' as GoogleDataTableColumnRoleType },
+				],
 				[ 'US', 100, 'United States: 100 orders' ],
 				[ 'CA', 50, 'Canada: 50 orders' ],
 			];
-			renderWithTheme( { data: testData } );
+			renderWithTheme( { data } );
 
 			const chartOptions = screen.getByTestId( 'chart-options' );
 			const options = JSON.parse( chartOptions.textContent || '{}' );
 
-			expect( options.tooltip ).toEqual( { trigger: 'focus', isHtml: false } );
+			expect( options.tooltip ).toEqual( { trigger: 'focus', isHtml: true } );
 		} );
 
 		test( 'does not include region in options when set to world (default)', () => {
@@ -418,6 +434,16 @@ describe( 'GeoChart', () => {
 			// The component should call the custom placeholder function
 			expect( customPlaceholder ).toHaveBeenCalled();
 		} );
+
+		test( 'keeps the placeholder outside the chart until Google Charts loads', () => {
+			renderWithTheme();
+
+			expect( screen.getByTestId( 'geo-chart-loading' ) ).toBeInTheDocument();
+
+			act( () => ChartMock.mock.calls[ ChartMock.mock.calls.length - 1 ][ 0 ].onLoad() );
+
+			expect( screen.queryByTestId( 'geo-chart-loading' ) ).not.toBeInTheDocument();
+		} );
 	} );
 
 	describe( 'Responsive Wrapper', () => {

package/src/charts/geo-chart/test/use-tooltip-position.test.ts

@@ -0,0 +1,43 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { useTooltipPosition } from '../private/use-tooltip-position';
+
+const renderChart = () => {
+	const container = document.createElement( 'div' );
+	const chart = document.createElement( 'div' );
+	const tooltip = document.createElement( 'div' );
+	tooltip.className = 'google-visualization-tooltip';
+	chart.append( tooltip );
+	container.append( chart );
+	document.body.append( container );
+
+	chart.getBoundingClientRect = () => new DOMRect( 100, 50, 400, 300 );
+	Object.defineProperties( tooltip, {
+		offsetParent: { value: chart },
+		offsetWidth: { value: 80 },
+		offsetHeight: { value: 40 },
+	} );
+
+	renderHook( () => useTooltipPosition( { current: container } ) );
+
+	return { chart, tooltip };
+};
+
+describe( 'useTooltipPosition', () => {
+	afterEach( () => document.body.replaceChildren() );
+
+	it.each( [
+		[ 'beside the cursor', 200, 100, '110px', '60px' ],
+		[ 'flipped left near the right edge', 480, 100, '290px', '60px' ],
+	] )( 'moves the tooltip Google places %s', async ( _, clientX, clientY, left, top ) => {
+		const { chart, tooltip } = renderChart();
+		chart.addEventListener( 'mousemove', () => {
+			tooltip.style.left = '0px';
+			tooltip.style.top = '0px';
+		} );
+
+		// A bare mouse event, as Chrome sends when the map moves under a resting cursor.
+		chart.dispatchEvent( new MouseEvent( 'mousemove', { bubbles: true, clientX, clientY } ) );
+
+		await waitFor( () => expect( tooltip ).toHaveStyle( { left, top } ) );
+	} );
+} );

package/src/charts/heatmap-chart/heatmap-chart.module.scss

@@ -5,8 +5,8 @@ $focus-ring-width: var(--wpds-border-width-focus);
 
 $heatmap-empty-fill: var(--a8c-charts-color-track);
 
-// JS sets the ends (getHeatmapScale): 3:1 against background and empty cell at
-// the low end. Unresolved, the floor is 15% of the primary.
+// JS sets the ends (getHeatmapScale). Unresolved, the floor is 15% of the
+// primary.
 $heatmap-fill: color-mix(in sRGB, var(--a8c-charts-color-heatmap-high, var(--a8c-charts-color-heatmap-primary)) calc(var(--a8c-charts-heatmap-cell-intensity) * 100%), var(--a8c-charts-color-heatmap-low, color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) 15%, var(--a8c-charts-color-background, #fff))));
 
 .heatmap-chart {
@@ -49,7 +49,7 @@ $heatmap-fill: color-mix(in sRGB, var(--a8c-charts-color-heatmap-high, var(--a8c
 		outline:
 			$focus-ring-width solid
 			var(--wpds-color-stroke-focus);
-		outline-offset: 2px;
+		outline-offset: $focus-ring-width;
 		border-radius: var(--wpds-border-radius-sm);
 	}
 }