@automattic/charts 4.7.0 → 4.8.0

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

@@ -172,6 +172,26 @@ describe( 'HeatmapChart', () => {
 		).toHaveLength( 4 );
 	} );
 
+	test( 'paints the legend on the same scale as the cells', () => {
+		render(
+			<GlobalChartsProvider>
+				<HeatmapChart width={ 500 } height={ 300 } data={ data } primaryColor="#3858e9">
+					<HeatmapChart.Legend />
+				</HeatmapChart>
+			</GlobalChartsProvider>
+		);
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+
+		for ( const swatch of screen.getAllByTestId( 'heatmap-legend-swatch' ) ) {
+			for ( const end of [ 'primary', 'low', 'high' ] ) {
+				const property = `--a8c-charts-color-heatmap-${ end }`;
+				expect( swatch.style.getPropertyValue( property ) ).toBe(
+					grid.style.getPropertyValue( property )
+				);
+			}
+		}
+	} );
+
 	test( 'ArrowDown moves focus within a column, ArrowRight moves to next column', async () => {
 		renderChart( { rowLabels: [ 'Mon', 'Tue', 'Wed' ] } );
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
@@ -409,6 +429,78 @@ describe( 'HeatmapChart', () => {
 		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-primary' ) ).toBe( '#abcdef' );
 	} );
 
+	test( 'leaves the fill to the stylesheet when the primary color cannot resolve to hex', () => {
+		render(
+			<GlobalChartsProvider>
+				<HeatmapChart width={ 500 } height={ 300 } data={ data } primaryColor="oklch(0.6 0.2 260)">
+					<HeatmapChart.Legend />
+				</HeatmapChart>
+			</GlobalChartsProvider>
+		);
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+		const swatches = screen.getAllByTestId( 'heatmap-legend-swatch' );
+
+		for ( const element of [ grid, ...swatches ] ) {
+			expect( element.style.getPropertyValue( '--a8c-charts-color-heatmap-primary' ) ).toBe(
+				'oklch(0.6 0.2 260)'
+			);
+			expect( element.style.getPropertyValue( '--a8c-charts-color-heatmap-low' ) ).toBe( '' );
+			expect( element.style.getPropertyValue( '--a8c-charts-color-heatmap-high' ) ).toBe( '' );
+		}
+		expect( screen.getByText( '4' ) ).toHaveClass( 'heatmap-chart__cell-value', { exact: true } );
+	} );
+
+	test( 'builds the scale for white on a see-through background, as the palette does', () => {
+		const scope = document.createElement( 'div' );
+		scope.style.setProperty( '--a8c-charts-color-background', 'transparent' );
+		document.body.appendChild( scope );
+
+		render(
+			<GlobalChartsProvider>
+				<HeatmapChart width={ 500 } height={ 300 } data={ data } primaryColor="#3858e9" />
+			</GlobalChartsProvider>,
+			{ container: scope }
+		);
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+
+		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-low' ) ).toBe( '#6c83ef' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-high' ) ).toBe( '#283ea5' );
+
+		document.body.removeChild( scope );
+	} );
+
+	test( 'reads the computed style once per re-render for the fill scale', () => {
+		const { rerender } = renderChart();
+		const spy = jest.spyOn( window, 'getComputedStyle' );
+
+		rerender(
+			<GlobalChartsProvider>
+				<HeatmapChart width={ 500 } height={ 300 } data={ data } />
+			</GlobalChartsProvider>
+		);
+
+		expect( spy ).toHaveBeenCalledTimes( 1 );
+		spy.mockRestore();
+	} );
+
+	test( 'paints a zero as an empty cell, still announcing its value', () => {
+		renderChart();
+		const zero = screen.getByRole( 'gridcell', { name: 'W2: 0' } );
+
+		expect( zero ).not.toHaveClass( 'heatmap-chart__cell--filled' );
+		expect( zero.style.getPropertyValue( '--a8c-charts-heatmap-cell-intensity' ) ).toBe( '' );
+		expect( screen.getByRole( 'gridcell', { name: 'W1: 1' } ) ).toHaveClass(
+			'heatmap-chart__cell--filled'
+		);
+	} );
+
+	test( 'puts the lowest non-zero value on the lowest step', () => {
+		renderChart();
+		const lowest = screen.getByRole( 'gridcell', { name: 'W1: 1' } );
+
+		expect( lowest.style.getPropertyValue( '--a8c-charts-heatmap-cell-intensity' ) ).toBe( '0' );
+	} );
+
 	test( 'falls back to the first palette slot when no primaryColor prop is set', () => {
 		const scope = document.createElement( 'div' );
 		scope.style.setProperty( '--a8c-charts-color-series-1', '#0a0b0c' );
@@ -469,9 +561,9 @@ const mockRects = () =>
 	} );
 
 describe( 'HeatmapChart value text contrast', () => {
-	// Extent 0..100, so each value is its own intensity in hundredths.
+	// The low end, a mid-tone, and the high end of the scale.
 	const scale: HeatmapColumn[] = [
-		{ label: 'W1', data: [ { value: 0 }, { value: 85 }, { value: 100 } ] },
+		{ label: 'W1', data: [ { value: 1 }, { value: 30 }, { value: 100 } ] },
 	];
 
 	let injectedStyle: HTMLStyleElement | null = null;
@@ -497,14 +589,14 @@ describe( 'HeatmapChart value text contrast', () => {
 	test( 'picks the label role that reaches AA on light and dark cells', () => {
 		renderScale();
 
-		expect( screen.getByText( '0' ) ).toHaveClass( 'heatmap-chart__cell-value', { exact: true } );
+		expect( screen.getByText( '1' ) ).toHaveClass( 'heatmap-chart__cell-value', { exact: true } );
 		expect( screen.getByText( '100' ) ).toHaveClass( 'heatmap-chart__cell-value--inverse' );
 	} );
 
 	test( 'falls back to black on a mid-tone cell where neither role reaches AA', () => {
 		renderScale();
 
-		expect( screen.getByText( '85' ) ).toHaveClass( 'heatmap-chart__cell-value--black' );
+		expect( screen.getByText( '30' ) ).toHaveClass( 'heatmap-chart__cell-value--black' );
 	} );
 
 	test( 'reads the label roles once data arrives after an empty first render', () => {
@@ -542,7 +634,7 @@ describe( 'HeatmapChart value text contrast', () => {
 
 		renderScale( 'translucent-heatmap' );
 
-		expect( screen.getByText( '0' ) ).toHaveClass( 'heatmap-chart__cell-value--black' );
+		expect( screen.getByText( '1' ) ).toHaveClass( 'heatmap-chart__cell-value--black' );
 		expect( screen.getByText( '100' ) ).toHaveClass( 'heatmap-chart__cell-value--inverse' );
 	} );
 
@@ -565,7 +657,7 @@ describe( 'HeatmapChart value text contrast', () => {
 		);
 
 		expect( screen.getByText( '7' ) ).toHaveClass( 'heatmap-chart__cell-value', { exact: true } );
-		expect( screen.getByText( '0' ) ).toHaveClass( 'heatmap-chart__cell-value--inverse' );
+		expect( screen.getByText( '1' ) ).toHaveClass( 'heatmap-chart__cell-value--inverse' );
 	} );
 
 	test( "keeps one color when both label roles are set to it on the chart's own class", () => {
@@ -576,7 +668,7 @@ describe( 'HeatmapChart value text contrast', () => {
 
 		renderScale( 'pinned-heatmap' );
 
-		[ '0', '85', '100' ].forEach( value =>
+		[ '1', '30', '100' ].forEach( value =>
 			expect( screen.getByText( value ) ).toHaveClass( 'heatmap-chart__cell-value', {
 				exact: true,
 			} )

package/src/charts/heatmap-chart/test/heatmap-scale.test.ts

@@ -0,0 +1,78 @@
+import { MIN_BACKGROUND_CONTRAST } from '../../../providers/chart-context/private/palette-generator';
+import { contrastRatio } from '../../../providers/chart-context/private/perceptual-color';
+import { mixHexColors } from '../../../utils/color-utils';
+import { getHeatmapScale, HEATMAP_HIGH_CONTRAST } from '../private/heatmap-scale';
+
+// The wp-admin scheme colors, then the pre-7.0 ones, which include a sunrise below 3:1 on white.
+const PRIMARIES = [
+	'#007cba',
+	'#3858e9',
+	'#437aa8',
+	'#916745',
+	'#646c3e',
+	'#cf4339',
+	'#567958',
+	'#ad631e',
+	'#0085ba',
+	'#dd823b',
+];
+
+describe.each( [
+	[ 'light', '#ffffff', '#f0f0f0' ],
+	[ 'dark', '#242424', '#272727' ],
+] )( 'getHeatmapScale on a %s background', ( _mode, background, emptyCell ) => {
+	it.each( PRIMARIES )(
+		'keeps the lowest step of %s at 3:1 against the background and empty cell, no further',
+		primary => {
+			const { low } = getHeatmapScale( primary, background, emptyCell );
+			const contrasts = [ contrastRatio( low, background ), contrastRatio( low, emptyCell ) ];
+
+			expect( Math.min( ...contrasts ) ).toBeGreaterThanOrEqual( MIN_BACKGROUND_CONTRAST );
+			expect( Math.min( ...contrasts ) ).toBeLessThan( MIN_BACKGROUND_CONTRAST + 0.1 );
+		}
+	);
+
+	it.each( PRIMARIES )( 'runs the scale of %s out to 9:1', primary => {
+		const { high } = getHeatmapScale( primary, background );
+
+		expect( contrastRatio( high, background ) ).toBeGreaterThanOrEqual( HEATMAP_HIGH_CONTRAST );
+	} );
+} );
+
+describe( 'getHeatmapScale', () => {
+	it( 'keeps a primary already past 9:1 as the high end', () => {
+		expect( getHeatmapScale( '#1d2327', '#ffffff' ).high ).toBe( '#1d2327' );
+	} );
+
+	it.each( [
+		[ '#ffffff', '#808080' ],
+		[ '#ffd000', '#767676' ],
+		[ '#3858e9', '#808080' ],
+		[ '#1e1e1e', '#999999' ],
+	] )( 'keeps every step of %s at 3:1 on a mid-gray %s', ( primary, background ) => {
+		const { low, high } = getHeatmapScale( primary, background );
+
+		for ( let step = 0; step <= 20; step++ ) {
+			expect(
+				contrastRatio( mixHexColors( low, high, step / 20 ), background )
+			).toBeGreaterThanOrEqual( MIN_BACKGROUND_CONTRAST );
+		}
+	} );
+
+	it.each( [
+		[ 'no step clears it', '#ffffff', '#555555' ],
+		[ 'clearing it would pass the high end', '#ffffff', '#767676' ],
+		[ 'clearing it would pass the high end', '#1e1e1e', '#6b6b6b' ],
+	] )(
+		'measures against the background alone when %s (%s, %s)',
+		( _case, background, emptyCell ) => {
+			expect( getHeatmapScale( '#3858e9', background, emptyCell ) ).toEqual(
+				getHeatmapScale( '#3858e9', background )
+			);
+		}
+	);
+
+	it( 'ends on black or white when the background leaves no room for 9:1', () => {
+		expect( getHeatmapScale( '#3858e9', '#808080' ).high ).toBe( '#000000' );
+	} );
+} );

package/src/charts/heatmap-chart/test/use-heatmap-colors.test.ts

@@ -1,4 +1,4 @@
-import { getValueExtent, getNormalizedValue } from '../private/use-heatmap-colors';
+import { getValueExtent, getNormalizedValue, isEmptyValue } from '../private/use-heatmap-colors';
 import type { HeatmapColumn } from '../types';
 
 const data: HeatmapColumn[] = [
@@ -7,8 +7,12 @@ const data: HeatmapColumn[] = [
 ];
 
 describe( 'getValueExtent', () => {
-	test( 'returns [min, max] ignoring null/NaN', () => {
-		expect( getValueExtent( data ) ).toEqual( [ 0, 20 ] );
+	test( 'returns [min, max] ignoring null/NaN and empty zeros', () => {
+		expect( getValueExtent( data ) ).toEqual( [ 5, 20 ] );
+	} );
+
+	test( 'keeps a zero in the extent when the data has negatives', () => {
+		expect( getValueExtent( [ { data: [ { value: -4 }, { value: 0 } ] } ] ) ).toEqual( [ -4, 0 ] );
 	} );
 
 	test( 'leaves summary columns out of the extent', () => {
@@ -16,11 +20,12 @@ describe( 'getValueExtent', () => {
 			...data,
 			{ label: 'Total', summary: true, data: [ { value: 500 }, { value: 900 }, { value: null } ] },
 		];
-		expect( getValueExtent( withTotals ) ).toEqual( [ 0, 20 ] );
+		expect( getValueExtent( withTotals ) ).toEqual( [ 5, 20 ] );
 	} );
 
 	test( 'returns [0, 0] for all-empty data', () => {
 		expect( getValueExtent( [ { data: [ { value: null } ] } ] ) ).toEqual( [ 0, 0 ] );
+		expect( getValueExtent( [ { data: [ { value: 0 }, { value: 0 } ] } ] ) ).toEqual( [ 0, 0 ] );
 	} );
 } );
 
@@ -39,8 +44,15 @@ describe( 'getNormalizedValue', () => {
 	test( 'returns 1 when min === max', () => {
 		expect( getNormalizedValue( 7, [ 7, 7 ] ) ).toBe( 1 );
 	} );
+} );
+
+describe( 'isEmptyValue', () => {
+	test( 'paints a zero as empty in data with no negatives', () => {
+		expect( isEmptyValue( 0, [ 0, 20 ] ) ).toBe( true );
+		expect( isEmptyValue( 5, [ 0, 20 ] ) ).toBe( false );
+	} );
 
-	test( 'returns 0 for an all-zero extent so a no-activity grid stays at the scale bottom', () => {
-		expect( getNormalizedValue( 0, [ 0, 0 ] ) ).toBe( 0 );
+	test( 'keeps a zero on the scale when the data has negatives', () => {
+		expect( isEmptyValue( 0, [ -4, 6 ] ) ).toBe( false );
 	} );
 } );

package/src/charts/heatmap-chart/types.ts

@@ -1,7 +1,7 @@
 import type { BaseChartProps } from '../../types';
 import type { CSSProperties, ReactNode } from 'react';
 
-/** A single heatmap cell. `value: null` marks an empty cell. */
+/** A single heatmap cell. `value: null` marks an empty cell, as does a zero when no value is negative. */
 export type HeatmapCell = {
 	/** Per-cell label used in the tooltip / accessible name. */
 	label?: string;
@@ -102,8 +102,9 @@ export interface HeatmapChartProps extends Omit<
 	/** Floor a cell's height (px) in non-compact mode; see `minCellWidth`. */
 	minCellHeight?: number;
 	/**
-	 * Color the cell scale interpolates toward at the highest value. Defaults to the
-	 * first series palette slot, `--a8c-charts-color-series-1`.
+	 * Color the cell scale is built from, deepened at the highest value toward 9:1
+	 * against the background. Defaults to the first series palette slot,
+	 * `--a8c-charts-color-series-1`.
 	 */
 	primaryColor?: string;
 	renderTooltip?: ( data: HeatmapTooltipData ) => ReactNode;

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

@@ -15,7 +15,7 @@ import {
 	useCallback,
 } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
-import { AccessibleTooltip, useKeyboardNavigation } from '../../components/tooltip';
+import { XYChartTooltip, useKeyboardNavigation } from '../../components/tooltip';
 import {
 	useXYChartTheme,
 	useChartDataTransform,
@@ -784,7 +784,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 											</ZoomClip>
 
 											{ withTooltips && (
-												<AccessibleTooltip
+												<XYChartTooltip
 													detectBounds
 													snapTooltipToDatumX
 													tooltipPlacement={ tooltipPlacement }

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

@@ -6,8 +6,8 @@ import clsx from 'clsx';
 import isEqual from 'fast-deep-equal';
 import { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
-import { BaseTooltip } from '../../components/tooltip';
 import { BoundedTooltip } from '../../components/tooltip/private/bounded-tooltip';
+import { LabelValueContent } from '../../components/tooltip/private/label-value-content';
 import {
 	useDataWithPercentages,
 	useLegendVisibilityData,
@@ -57,13 +57,13 @@ export type PieChartRenderTooltipParams = {
 
 /**
  * Default tooltip renderer for pie charts.
- * Renders a BaseTooltip with the hovered segment's data.
+ * Renders the default `label: value` tooltip content for the hovered segment.
  *
  * @param {PieChartRenderTooltipParams} params - The tooltip parameters containing the hovered data point
  * @return {ReactNode} The rendered tooltip content
  */
 const renderDefaultPieTooltip = ( { tooltipData }: PieChartRenderTooltipParams ): ReactNode => {
-	return <BaseTooltip data={ tooltipData } top={ 0 } left={ 0 } renderContainer={ false } />;
+	return <LabelValueContent data={ tooltipData } />;
 };
 
 export interface PieChartProps extends BaseChartProps< DataPointPercentage[] > {
@@ -127,7 +127,7 @@ export interface PieChartProps extends BaseChartProps< DataPointPercentage[] > {
 
 	/**
 	 * Custom render function for tooltip content.
-	 * When provided, replaces the default BaseTooltip with custom content.
+	 * When provided, replaces the default `label: value` tooltip with custom content.
 	 */
 	renderTooltip?: ( params: PieChartRenderTooltipParams ) => ReactNode;
 }

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -5,8 +5,8 @@ import { useTooltip } from '@visx/tooltip';
 import clsx from 'clsx';
 import { useCallback, useContext, useMemo, useRef } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
-import { BaseTooltip } from '../../components/tooltip';
 import { BoundedTooltip } from '../../components/tooltip/private/bounded-tooltip';
+import { LabelValueContent } from '../../components/tooltip/private/label-value-content';
 import {
 	useDataWithPercentages,
 	useLegendVisibilityData,
@@ -53,7 +53,7 @@ export type PieSemiCircleChartRenderTooltipParams = {
 
 /**
  * Default tooltip renderer for semi-circle pie charts.
- * Renders a BaseTooltip with the hovered segment's data.
+ * Renders the default `label: value` tooltip content for the hovered segment.
  *
  * @param {PieSemiCircleChartRenderTooltipParams} params - The tooltip parameters containing the hovered data point
  * @return {ReactNode} The rendered tooltip content
@@ -61,7 +61,7 @@ export type PieSemiCircleChartRenderTooltipParams = {
 const renderDefaultPieSemiCircleTooltip = ( {
 	tooltipData,
 }: PieSemiCircleChartRenderTooltipParams ): ReactNode => {
-	return <BaseTooltip data={ tooltipData } top={ 0 } left={ 0 } renderContainer={ false } />;
+	return <LabelValueContent data={ tooltipData } />;
 };
 
 const PAD_ANGLE = 0.03; // Padding between segments
@@ -122,7 +122,7 @@ export interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercen
 
 	/**
 	 * Custom render function for tooltip content.
-	 * When provided, replaces the default BaseTooltip with custom content.
+	 * When provided, replaces the default `label: value` tooltip with custom content.
 	 */
 	renderTooltip?: ( params: PieSemiCircleChartRenderTooltipParams ) => ReactNode;
 }

package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx

@@ -96,7 +96,7 @@ describe( 'PieSemiCircleChart', () => {
 
 		await user.hover( firstSegment );
 
-		// Wait for tooltip to be visible - it should show in the BaseTooltip component
+		// Wait for tooltip to be visible - it should show the default label: value content
 		const tooltip = await screen.findByRole( 'tooltip' );
 		expect( tooltip ).toHaveTextContent( 'MacOS' );
 

package/src/charts/private/test/label-text-color.test.ts

@@ -5,6 +5,7 @@ import {
 	luminanceContrastRatio,
 	rgbLuminance,
 } from '../../../providers/chart-context/private/perceptual-color';
+import { getHeatmapScale } from '../../heatmap-chart/private/heatmap-scale';
 import {
 	pickLabelTextColor,
 	pickLabelTextColorForFill,
@@ -131,9 +132,9 @@ describe( 'pickLabelTextColorForFill', () => {
 	} );
 
 	describe.each( [
-		[ 'white', '#ffffff' ],
-		[ 'dark', '#1e1e1e' ],
-	] )( 'across a heatmap scale on a %s background', ( _name, background ) => {
+		[ 'white', '#ffffff', '#f0f0f0' ],
+		[ 'dark', '#242424', '#272727' ],
+	] )( 'across a heatmap scale on a %s background', ( _name, background, emptyCell ) => {
 		const painted: Record< LabelTextColor, number > = {
 			label: rgbLuminance( hexToRgb( '#1e1e1e' ) ),
 			'label-inverse': rgbLuminance( hexToRgb( '#f0f0f0' ) ),
@@ -155,12 +156,9 @@ describe( 'pickLabelTextColorForFill', () => {
 		];
 
 		it.each( primaries )( 'reaches AA on every intensity of %s', primary => {
+			const { low, high } = getHeatmapScale( primary, background, emptyCell );
 			for ( let step = 0; step <= 200; step++ ) {
-				const fill = blendRgb(
-					hexToRgb( primary ),
-					hexToRgb( background ),
-					0.15 + 0.85 * ( step / 200 )
-				);
+				const fill = blendRgb( hexToRgb( high ), hexToRgb( low ), step / 200 );
 				const choice = pickLabelTextColorForFill( fill, DEFAULT_ROLES, 'label' );
 				// Checked on the 8-bit channels the browser paints as well as the exact mix.
 				const [ r, g, b ] = fill.map( Math.round );

package/src/components/tooltip/base-tooltip.tsx

@@ -1,36 +1,32 @@
-import { formatNumber } from '@automattic/number-formatters';
-import clsx from 'clsx';
-import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
-import styles from './base-tooltip.module.scss';
-import { TooltipTheme } from './private/tooltip-theme';
+import { LabelValueContent } from './private/label-value-content';
+import { TooltipBox } from './tooltip-box';
+import type { TooltipData } from './types';
 import type { CSSProperties, ComponentType, ReactNode } from 'react';
 
-type TooltipData = {
-	label: string;
-	value: number;
-	valueDisplay?: string;
-};
-
 type TooltipComponentProps = {
 	data: TooltipData;
 	className?: string;
 };
 
 type TooltipCommonProps = {
-	top: number;
-	left: number;
+	/** @deprecated Position the box with `style`, or use `TooltipBox`. */
+	top?: number;
+	/** @deprecated Position the box with `style`, or use `TooltipBox`. */
+	left?: number;
 	style?: CSSProperties;
 	className?: string;
 	/**
 	 * Whether to render the tooltip container div. When false, only renders the content.
-	 * Useful when the tooltip is rendered inside a portal or custom container.
+	 * @deprecated Render the content directly; `TooltipBox` draws the box.
 	 * @default true
 	 */
 	renderContainer?: boolean;
 };
 
 type DefaultDataTooltip = {
+	/** @deprecated Pass the content as children, or use `TooltipBox`. */
 	data: TooltipData;
+	/** @deprecated Pass the content as children, or use `TooltipBox`. */
 	component?: ComponentType< TooltipComponentProps >;
 	children?: never;
 };
@@ -43,17 +39,25 @@ type CustomTooltip = {
 
 type BaseTooltipProps = TooltipCommonProps & ( DefaultDataTooltip | CustomTooltip );
 
-const DefaultTooltipContent = ( { data }: TooltipComponentProps ) => (
-	<>
-		{ data?.label }: { data?.valueDisplay || formatNumber( data?.value ) }
-	</>
-);
-
+/**
+ * A tooltip box with children or `label: value` content. Prefer `TooltipBox`.
+ *
+ * @param props                 - Tooltip props.
+ * @param props.data            - Data for the default content.
+ * @param props.top             - Deprecated vertical position.
+ * @param props.left            - Deprecated horizontal position.
+ * @param props.component       - Deprecated content component.
+ * @param props.children        - Tooltip content.
+ * @param props.className       - Class name passed to the content component.
+ * @param props.style           - Styles for the box.
+ * @param props.renderContainer - Deprecated; render the content alone when false.
+ * @return The tooltip.
+ */
 export const BaseTooltip = ( {
 	data,
 	top,
 	left,
-	component: Component = DefaultTooltipContent,
+	component: Component = LabelValueContent,
 	children,
 	className,
 	style,
@@ -65,17 +69,12 @@ export const BaseTooltip = ( {
 		return content;
 	}
 
-	return (
-		<TooltipTheme>
-			<div
-				className={ clsx( CHART_SCOPE_CLASS, styles.tooltip ) }
-				style={ { top, left, ...style } }
-				role="tooltip"
-			>
-				{ content }
-			</div>
-		</TooltipTheme>
-	);
+	const placement =
+		top === undefined && left === undefined
+			? undefined
+			: ( { position: 'absolute', top, left, transform: 'translate(-50%, -100%)' } as const );
+
+	return <TooltipBox style={ { ...placement, ...style } }>{ content }</TooltipBox>;
 };
 
 export type { BaseTooltipProps, TooltipData };

package/src/components/tooltip/index.ts

@@ -1,4 +1,6 @@
 export { BaseTooltip } from './base-tooltip';
-export { AccessibleTooltip, useKeyboardNavigation } from './accessible-tooltip';
+export { AccessibleTooltip, XYChartTooltip, useKeyboardNavigation } from './xy-chart-tooltip';
+export { TooltipBox } from './tooltip-box';
 export type { BaseTooltipProps, TooltipData } from './base-tooltip';
+export type { TooltipBoxProps } from './tooltip-box';
 export type { TooltipProps } from './types';

package/src/components/tooltip/private/bounded-tooltip.tsx

@@ -1,19 +1,19 @@
-import { Tooltip } from '@visx/tooltip';
-import clsx from 'clsx';
 import { useLayoutEffect, useRef, useState } from 'react';
-import { TOOLTIP_SCOPE_CLASS } from '../../../styles/chart-scope-class';
-import styles from '../base-tooltip.module.scss';
-import { TooltipTheme } from './tooltip-theme';
+import { TooltipBox } from '../tooltip-box';
 import type { TooltipPlacement } from '../../../visx/types';
-import type { TooltipProps } from '@visx/tooltip';
+import type { TooltipBoxProps } from '../tooltip-box';
+import type { ReactNode } from 'react';
 
 type Bounds = { left: number; top: number; right: number; bottom: number };
 type Size = { width: number; height: number };
 
-export type BoundedTooltipProps = Omit< TooltipProps, 'left' | 'top' | 'applyPositionStyle' > & {
+export type BoundedTooltipProps = Omit< TooltipBoxProps, 'children' > & {
+	children?: ReactNode;
 	/** Anchor, in the coordinates of the positioned wrapper the box renders into. */
 	left?: number;
 	top?: number;
+	offsetLeft?: number;
+	offsetTop?: number;
 	placement?: TooltipPlacement;
 };
 
@@ -135,7 +135,7 @@ export const getBoundedPosition = ( {
 };
 
 /**
- * visx's `Tooltip`, positioned like its `TooltipWithBounds` but kept inside the
+ * A `TooltipBox`, positioned like visx's `TooltipWithBounds` but kept inside the
  * nearest clipping ancestor — or the viewport when there is none — rather than
  * inside its own parent. Rendered in-tree, a tooltip's parent is the chart
  * wrapper, which is often narrower than the box; measuring against the parent
@@ -144,7 +144,7 @@ export const getBoundedPosition = ( {
  * Re-measures on every render, so a box whose content changes width between
  * two hovers is placed for its current size.
  *
- * @param props            - visx `Tooltip` props.
+ * @param props            - `TooltipBox` props plus placement.
  * @param props.left       - Anchor x, in wrapper coordinates.
  * @param props.top        - Anchor y, in wrapper coordinates.
  * @param props.offsetLeft - Gap between the anchor and the box, horizontally.
@@ -213,11 +213,13 @@ export const BoundedTooltip = ( {
 	const x = position?.x ?? left + offsetLeft;
 	const y = position?.y ?? top + ( placement === 'below-axis' ? POINTER_HEIGHT : offsetTop );
 
-	const box = (
-		<Tooltip
+	return (
+		<TooltipBox
 			ref={ nodeRef }
+			role="presentation"
 			data-testid="bounded-tooltip"
-			className={ clsx( ! unstyled && [ TOOLTIP_SCOPE_CLASS, styles.surface ], className ) }
+			unstyled={ unstyled }
+			className={ className }
 			style={ {
 				position: 'absolute',
 				left: 0,
@@ -245,8 +247,6 @@ export const BoundedTooltip = ( {
 				/>
 			) }
 			{ children }
-		</Tooltip>
+		</TooltipBox>
 	);
-
-	return unstyled ? box : <TooltipTheme>{ box }</TooltipTheme>;
 };

package/src/components/tooltip/private/label-value-content.tsx

@@ -0,0 +1,8 @@
+import { formatNumber } from '@automattic/number-formatters';
+import type { TooltipData } from '../types';
+
+export const LabelValueContent = ( { data }: { data: TooltipData } ) => (
+	<>
+		{ data.label }: { data.valueDisplay || formatNumber( data.value ) }
+	</>
+);