@automattic/charts 4.6.0 → 4.7.0

package/src/charts/private/with-responsive/with-responsive.tsx

@@ -1,6 +1,7 @@
 import { useParentSize } from '@visx/responsive';
 import clsx from 'clsx';
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { useIsomorphicLayoutEffect } from '../../../hooks';
 import { ChartScopeContext } from '../../../providers/chart-scope';
 import styles from './with-responsive.module.scss';
 import type { BaseChartProps } from '../../../types';
@@ -33,10 +34,6 @@ export type ResponsiveConfig = {
 	resizeDebounceTime?: number;
 };
 
-// useLayoutEffect on the client (so containment is resolved before paint, no flash),
-// useEffect on the server to avoid React's SSR warning.
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
 /**
  * A higher-order component that provides responsive dimensions
  * to the wrapped chart component using useParentSize from `@visx/responsive`.

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

@@ -19,7 +19,7 @@ export type FlattenedTooltipData = {
 	dataPointIndex: number;
 };
 
-// Enhanced tooltip with keyboard navigation and accessibility
+// The XY chart tooltip, as LineChart, AreaChart and BarChart render it: place it inside a visx `XYChart`, with `useKeyboardNavigation` for keyboard access.
 interface AccessibleTooltipProps extends Omit<
 	XyChartTooltipProps< DataPointDate >,
 	'renderTooltip'

package/src/components/tooltip/base-tooltip.module.scss

@@ -1,17 +1,21 @@
 // `.surface` is the look alone, for a chart that positions the box itself.
+// The box carries the chart scope class inside TooltipTheme, so these roles
+// resolve for the dark tooltip theme, as in @wordpress/ui's Tooltip popup.
 .surface,
 .tooltip {
-	padding: var(--wpds-dimension-padding-sm);
-	// No WPDS token fits a translucent dark tooltip surface:
-	// bg-interactive-neutral-strong is opaque, and there is no
-	// white-on-dark content foreground token. The role carries the
-	// hardcoded translucent value as its fallback.
-	background-color: var(--a8c-charts-color-tooltip-surface, rgba(0, 0, 0, 0.85));
-	color: #fff;
+	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm);
+	background-color: var(--a8c-charts-color-surface);
+	color: var(--a8c-charts-color-label);
 	border-radius: var(--wpds-border-radius-md);
-	font-size: var(--wpds-typography-font-size-md);
+	font-family: var(--wpds-typography-font-family-body);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: 1.4;
 	box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
 	pointer-events: none;
+
+	@media (forced-colors: active) {
+		border: var(--wpds-border-width-xs) solid CanvasText;
+	}
 }
 
 .tooltip {

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

@@ -1,7 +1,8 @@
 import { formatNumber } from '@automattic/number-formatters';
 import clsx from 'clsx';
-import { useStandaloneScopeClass } from '../../providers/chart-scope';
+import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
 import styles from './base-tooltip.module.scss';
+import { TooltipTheme } from './private/tooltip-theme';
 import type { CSSProperties, ComponentType, ReactNode } from 'react';
 
 type TooltipData = {
@@ -59,20 +60,21 @@ export const BaseTooltip = ( {
 	renderContainer = true,
 }: BaseTooltipProps ) => {
 	const content = children || ( data && <Component data={ data } className={ className } /> );
-	const standaloneScopeClass = useStandaloneScopeClass();
 
 	if ( ! renderContainer ) {
 		return content;
 	}
 
 	return (
-		<div
-			className={ clsx( standaloneScopeClass, styles.tooltip ) }
-			style={ { top, left, ...style } }
-			role="tooltip"
-		>
-			{ content }
-		</div>
+		<TooltipTheme>
+			<div
+				className={ clsx( CHART_SCOPE_CLASS, styles.tooltip ) }
+				style={ { top, left, ...style } }
+				role="tooltip"
+			>
+				{ content }
+			</div>
+		</TooltipTheme>
 	);
 };
 

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

@@ -1,5 +1,9 @@
-import { Tooltip, defaultStyles } from '@visx/tooltip';
+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 type { TooltipPlacement } from '../../../visx/types';
 import type { TooltipProps } from '@visx/tooltip';
 
@@ -27,6 +31,15 @@ const isClipping = ( element: Element ) => {
 	return [ overflow, overflowX, overflowY ].some( value => value && value !== 'visible' );
 };
 
+// The positioned wrapper the box renders into, past the tooltip theme's `display: contents` element, which has no box to measure.
+const findLayoutParent = ( node: Element ): Element | null => {
+	let element = node.parentElement;
+	while ( element && getComputedStyle( element ).display === 'contents' ) {
+		element = element.parentElement;
+	}
+	return element;
+};
+
 // The first ancestor that cuts its overflow off. The box may leave the chart
 // wrapper but never this element, which is what a body-level portal used to
 // guarantee by never being inside one.
@@ -136,8 +149,9 @@ export const getBoundedPosition = ( {
  * @param props.top        - Anchor y, in wrapper coordinates.
  * @param props.offsetLeft - Gap between the anchor and the box, horizontally.
  * @param props.offsetTop  - Gap between the anchor and the box, vertically.
- * @param props.style      - Box styles; visx's defaults unless `unstyled`.
- * @param props.unstyled   - Skip `style` and leave the box bare.
+ * @param props.style      - Inline overrides on the surface; ignored when `unstyled`.
+ * @param props.unstyled   - Drop the surface and `style`, leaving the box bare.
+ * @param props.className  - Extra classes beside the surface.
  * @param props.children   - Box content.
  * @param props.placement  - Below-axis, beside without vertical flipping, or automatic flipping.
  * @return The tooltip box.
@@ -147,8 +161,9 @@ export const BoundedTooltip = ( {
 	top = 0,
 	offsetLeft = DEFAULT_OFFSET,
 	offsetTop = DEFAULT_OFFSET,
-	style = defaultStyles,
+	style,
 	unstyled = false,
+	className,
 	children,
 	placement = 'auto',
 	...rest
@@ -159,7 +174,7 @@ export const BoundedTooltip = ( {
 
 	useLayoutEffect( () => {
 		const node = nodeRef.current;
-		const wrapper = node?.parentElement;
+		const wrapper = node && findLayoutParent( node );
 		if ( ! node || ! wrapper ) {
 			return;
 		}
@@ -198,10 +213,11 @@ export const BoundedTooltip = ( {
 	const x = position?.x ?? left + offsetLeft;
 	const y = position?.y ?? top + ( placement === 'below-axis' ? POINTER_HEIGHT : offsetTop );
 
-	return (
+	const box = (
 		<Tooltip
 			ref={ nodeRef }
 			data-testid="bounded-tooltip"
+			className={ clsx( ! unstyled && [ TOOLTIP_SCOPE_CLASS, styles.surface ], className ) }
 			style={ {
 				position: 'absolute',
 				left: 0,
@@ -220,9 +236,10 @@ export const BoundedTooltip = ( {
 						left: left - x - POINTER_HEIGHT,
 						top: -POINTER_HEIGHT,
 						width: POINTER_HEIGHT * 2,
-						height: POINTER_HEIGHT,
+						// One extra pixel overlaps the box, so anti-aliasing leaves no seam between them.
+						height: POINTER_HEIGHT + 1,
 						background: 'inherit',
-						clipPath: 'polygon(50% 0, 100% 100%, 0 100%)',
+						clipPath: `polygon(50% 0, 100% ${ POINTER_HEIGHT }px, 100% 100%, 0 100%, 0 ${ POINTER_HEIGHT }px)`,
 						pointerEvents: 'none',
 					} }
 				/>
@@ -230,4 +247,6 @@ export const BoundedTooltip = ( {
 			{ children }
 		</Tooltip>
 	);
+
+	return unstyled ? box : <TooltipTheme>{ box }</TooltipTheme>;
 };

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

@@ -0,0 +1,37 @@
+import { color as d3Color } from '@visx/vendor/d3-color';
+import { ThemeProvider } from '@wordpress/theme';
+import { useMemo } from 'react';
+import { useChartScopeElement } from '../../../providers/chart-scope';
+import { resolveCssVariable } from '../../../utils/resolve-css-var';
+import type { ReactNode } from 'react';
+
+const DEFAULT_SURFACE = '#1e1e1e';
+const TOOLTIP_SURFACE = `var(--a8c-charts-color-tooltip-surface, ${ DEFAULT_SURFACE })`;
+
+// `ThemeProvider` throws on a seed that is not an opaque sRGB color, which would unmount the chart.
+const toSeed = ( value: string | null ) => {
+	const parsed = value ? d3Color( value ) : null;
+	return parsed && parsed.opacity === 1 ? parsed.formatHex() : DEFAULT_SURFACE;
+};
+
+/**
+ * Themes the tooltip box for its dark surface, as `@wordpress/ui`'s Tooltip themes its popup. The box re-declares the catalog under this theme, so every role it reads is tuned for the surface, whatever theme the chart is in.
+ *
+ * @param props          - Component props.
+ * @param props.children - The tooltip box.
+ * @return The themed box.
+ */
+export const TooltipTheme = ( { children }: { children: ReactNode } ) => {
+	const scopeElement = useChartScopeElement();
+	const color = useMemo(
+		() => ( { background: toSeed( resolveCssVariable( TOOLTIP_SURFACE, scopeElement ) ) } ),
+		[ scopeElement ]
+	);
+
+	// Core's `wp-theme` in WordPress 7.0 exports only `privateApis`.
+	if ( ! ThemeProvider ) {
+		return <>{ children }</>;
+	}
+
+	return <ThemeProvider color={ color }>{ children }</ThemeProvider>;
+};

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

@@ -126,6 +126,87 @@ describe( 'BoundedTooltip', () => {
 		jest.restoreAllMocks();
 	} );
 
+	test( 'draws the package surface, not the visx default box', () => {
+		render(
+			<BoundedTooltip left={ 10 } top={ 10 } data-testid="box">
+				content
+			</BoundedTooltip>
+		);
+		const box = screen.getByTestId( 'box' );
+		expect( box ).toHaveClass( 'surface' );
+		expect( box ).not.toHaveStyle( { backgroundColor: 'white' } );
+		// toHaveStyle can't assert an absent inline style; box.style reads the empty string directly.
+		// eslint-disable-next-line jest-dom/prefer-to-have-style
+		expect( box.style.boxShadow ).toBe( '' );
+		// eslint-disable-next-line jest-dom/prefer-to-have-style
+		expect( box.style.padding ).toBe( '' );
+	} );
+
+	test( 'keeps a caller class beside the surface', () => {
+		render(
+			<BoundedTooltip left={ 10 } top={ 10 } className="extra" data-testid="box">
+				content
+			</BoundedTooltip>
+		);
+		expect( screen.getByTestId( 'box' ) ).toHaveClass( 'surface', 'extra' );
+	} );
+
+	test( 'drops the surface when unstyled', () => {
+		render(
+			<BoundedTooltip left={ 10 } top={ 10 } unstyled data-testid="box">
+				content
+			</BoundedTooltip>
+		);
+		expect( screen.getByTestId( 'box' ) ).not.toHaveClass( 'surface' );
+		expect( screen.getByTestId( 'box' ) ).not.toHaveClass( 'a8c-charts-tooltip-scope' );
+	} );
+
+	test( 're-declares the chart catalog on a styled box under its own class, out of reach of page-wide chart overrides', () => {
+		render(
+			<BoundedTooltip left={ 10 } top={ 10 } data-testid="box">
+				content
+			</BoundedTooltip>
+		);
+		const box = screen.getByTestId( 'box' );
+		expect( box ).toHaveClass( 'a8c-charts-tooltip-scope', 'surface' );
+		expect( box ).not.toHaveClass( 'a8c-charts-scope' );
+	} );
+
+	test( 'measures against the positioned wrapper past a display: contents element', () => {
+		jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+			this: Element
+		) {
+			if ( this.classList.contains( 'visx-tooltip' ) ) {
+				return rect( 0, 0, 208, 36 );
+			}
+			return this.getAttribute( 'data-testid' ) === 'contents'
+				? rect( 0, 0, 0, 0 )
+				: rect( 0, 0, 600, 200 );
+		} );
+
+		render(
+			<div style={ { position: 'relative', overflow: 'hidden' } }>
+				<div data-testid="contents" style={ { display: 'contents' } }>
+					<BoundedTooltip left={ 300 } top={ 50 } unstyled data-testid="box">
+						content
+					</BoundedTooltip>
+				</div>
+			</div>
+		);
+
+		// Measured against the zero-size contents element, the box would flip to (82, 4).
+		expect( screen.getByTestId( 'box' ) ).toHaveStyle( { transform: 'translate(310px, 60px)' } );
+	} );
+
+	test( 'lets an inline style override the surface', () => {
+		render(
+			<BoundedTooltip left={ 10 } top={ 10 } style={ { background: 'red' } } data-testid="box">
+				content
+			</BoundedTooltip>
+		);
+		expect( screen.getByTestId( 'box' ) ).toHaveStyle( { background: 'red' } );
+	} );
+
 	test( 'keeps the box inside an overflow-hidden ancestor that is wider than the wrapper', () => {
 		// Card at x=400 (400 wide, overflow hidden); plot wrapper at x=440, 346 wide.
 		jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
@@ -209,7 +290,7 @@ describe( 'BoundedTooltip', () => {
 				left: `${ pointerLeft }px`,
 				top: '-6px',
 				width: '12px',
-				height: '6px',
+				height: '7px',
 			} );
 			expect( screen.getByTestId( 'tooltip-axis-pointer' ) ).toHaveAttribute(
 				'aria-hidden',

package/src/components/tooltip/test/tool-tip.test.tsx

@@ -36,6 +36,11 @@ describe( 'BaseTooltip', () => {
 		} );
 	} );
 
+	test( 'renders the standalone container on the tooltip chrome', () => {
+		render( <BaseTooltip { ...defaultProps } /> );
+		expect( screen.getByRole( 'tooltip' ) ).toHaveClass( 'tooltip' );
+	} );
+
 	test( 'handles missing valueDisplay', () => {
 		const propsWithoutDisplay = {
 			...defaultProps,

package/src/components/tooltip/test/tooltip-theme.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import { resolveCssVariable } from '../../../utils/resolve-css-var';
+import { TooltipTheme } from '../private/tooltip-theme';
+
+jest.mock( '@wordpress/theme', () => ( { ...jest.requireActual( '@wordpress/theme' ) } ) );
+jest.mock( '../../../utils/resolve-css-var', () => ( { resolveCssVariable: jest.fn() } ) );
+
+const theme = jest.requireMock( '@wordpress/theme' );
+const { ThemeProvider } = jest.requireActual( '@wordpress/theme' );
+
+const spyOnThemeProvider = () =>
+	jest.spyOn( theme, 'ThemeProvider' ).mockImplementation( ( { children } ) => children );
+
+describe( 'TooltipTheme', () => {
+	afterEach( () => {
+		jest.restoreAllMocks();
+		theme.ThemeProvider = ThemeProvider;
+	} );
+
+	test( 'renders the box unthemed when core exports no public ThemeProvider', () => {
+		theme.ThemeProvider = undefined;
+		jest.mocked( resolveCssVariable ).mockReturnValue( '#1e1e1e' );
+
+		render( <TooltipTheme>box</TooltipTheme> );
+
+		expect( screen.getByText( 'box' ) ).toBeInTheDocument();
+	} );
+
+	test.each( [ 'rgba(0, 0, 0, 0.85)', 'not-a-color', null ] )(
+		'seeds the default surface when the surface role resolves to %p',
+		value => {
+			const provider = spyOnThemeProvider();
+			jest.mocked( resolveCssVariable ).mockReturnValue( value );
+
+			render( <TooltipTheme>box</TooltipTheme> );
+
+			expect( provider.mock.calls[ 0 ][ 0 ] ).toMatchObject( {
+				color: { background: '#1e1e1e' },
+			} );
+		}
+	);
+
+	test( 'seeds an opaque surface role as hex', () => {
+		const provider = spyOnThemeProvider();
+		jest.mocked( resolveCssVariable ).mockReturnValue( 'rgb(255, 255, 255)' );
+
+		render( <TooltipTheme>box</TooltipTheme> );
+
+		expect( provider.mock.calls[ 0 ][ 0 ] ).toMatchObject( {
+			color: { background: '#ffffff' },
+		} );
+	} );
+
+	test( 'renders with the real ThemeProvider when the surface role is translucent', () => {
+		jest.mocked( resolveCssVariable ).mockReturnValue( 'rgba(0, 0, 0, 0.85)' );
+
+		render( <TooltipTheme>box</TooltipTheme> );
+
+		expect( screen.getByText( 'box' ) ).toBeInTheDocument();
+	} );
+} );

package/src/components/tooltip/test/xy-chart-tooltip.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import { BarSeries, buildChartTheme, LineSeries, TooltipContext, XYChart } from '@visx/xychart';
+import { BarSeries, LineSeries, TooltipContext, XYChart } from '@visx/xychart';
 import { useContext, useEffect } from 'react';
 import { XyChartTooltip } from '../xy-chart-tooltip';
 import type { XyChartTooltipProps } from '../../../visx/types';
@@ -103,20 +103,35 @@ const renderChart = (
 
 describe( 'XyChartTooltip', () => {
 	test.each( [
-		[ 'CanvasText', '0 1px 2px #22222255' ],
-		[ '#123456', '0 1px 2px #12345655' ],
-	] )( 'renders a valid shadow for htmlLabel color %s', async ( color, boxShadow ) => {
-		const theme = buildChartTheme( {
-			backgroundColor: '#ffffff',
-			colors: [ '#123456' ],
-			tickLength: 4,
-			gridColor: '#dddddd',
-			gridColorDark: '#222222',
-			htmlLabel: { color },
-		} );
-		renderChart( {}, undefined, undefined, theme );
+		[ 'bounded', {} ],
+		[ 'unbounded', { detectBounds: false } ],
+		[ 'below-axis', { tooltipPlacement: 'below-axis' as const } ],
+	] )( 'draws the %s box on the package surface, with no visx box styles', async ( _, props ) => {
+		renderChart( props );
+		const box = await screen.findByTestId( 'tooltip-box' );
+		expect( box ).toHaveClass( 'surface' );
+		expect( box ).not.toHaveAttribute( 'style', expect.stringContaining( 'box-shadow' ) );
+		expect( box ).not.toHaveAttribute( 'style', expect.stringContaining( 'background-color' ) );
+		expect( box ).not.toHaveAttribute( 'style', expect.stringContaining( 'padding' ) );
+		expect( box ).not.toHaveAttribute( 'style', expect.stringContaining( 'border-radius' ) );
+	} );
+
+	test( 'strips the surface from an unbounded box when unstyled', async () => {
+		renderChart( { detectBounds: false, unstyled: true } );
+		const box = await screen.findByTestId( 'tooltip-box' );
+		expect( box ).not.toHaveClass( 'surface' );
+	} );
+
+	test( 'strips the surface from a bounded box when unstyled', async () => {
+		renderChart( { unstyled: true } );
+		const box = await screen.findByTestId( 'tooltip-box' );
+		expect( box ).not.toHaveClass( 'surface' );
+	} );
 
-		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( { boxShadow } );
+	test( 'keeps a caller class beside the surface on an unbounded box', async () => {
+		renderChart( { detectBounds: false, className: 'extra' } );
+		const box = await screen.findByTestId( 'tooltip-box' );
+		expect( box ).toHaveClass( 'surface', 'extra' );
 	} );
 
 	test( 'renders the tooltip box inside the chart wrapper, not in a body-level portal', async () => {
@@ -351,25 +366,23 @@ describe( 'XyChartTooltip', () => {
 	} );
 
 	test.each( [ 'auto', 'below-axis' ] as const )(
-		'preserves %s background and stacking with a partial style override',
+		'keeps the %s surface and stacking under a partial style override',
 		async tooltipPlacement => {
-			const { unmount } = renderChart( { tooltipPlacement } );
-			const defaultBox = await screen.findByTestId( 'tooltip-box' );
-			const background = defaultBox.style.backgroundColor;
-			expect( background ).not.toBe( '' );
-			expect( background ).not.toBe( 'transparent' );
-			unmount();
-
 			renderChart( { tooltipPlacement, style: { color: 'red' } } );
-
-			await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( {
-				backgroundColor: background,
-				zIndex: '3',
-				color: 'rgb(255, 0, 0)',
-			} );
+			const box = await screen.findByTestId( 'tooltip-box' );
+			expect( box ).toHaveClass( 'surface' );
+			expect( box ).toHaveStyle( { zIndex: '3', color: 'rgb(255, 0, 0)' } );
 		}
 	);
 
+	test( 'lets a style override paint the box', async () => {
+		renderChart( { style: { background: 'rgb(0, 0, 0)', color: 'rgb(255, 255, 255)' } } );
+		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( {
+			background: 'rgb(0, 0, 0)',
+			color: 'rgb(255, 255, 255)',
+		} );
+	} );
+
 	test( 'accepts the portal-era options without passing them to the box', async () => {
 		renderChart( { scroll: true, debounce: 50, resizeObserverPolyfill: undefined } );
 

package/src/components/tooltip/xy-chart-tooltip.tsx

@@ -1,9 +1,12 @@
-import { Tooltip, defaultStyles } from '@visx/tooltip';
+import { Tooltip } from '@visx/tooltip';
 import { DataContext, TooltipContext } from '@visx/xychart';
+import clsx from 'clsx';
 import { useCallback, useContext, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { isValidHexColor } from '../../utils';
+import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
+import styles from './base-tooltip.module.scss';
 import { BoundedTooltip, TOOLTIP_Z_INDEX } from './private/bounded-tooltip';
+import { TooltipTheme } from './private/tooltip-theme';
 import type {
 	CrosshairStyle,
 	RenderTooltipGlyphProps,
@@ -215,16 +218,29 @@ const XyChartTooltipContent = < Datum extends object >( {
 	const marginLeft = margin?.left ?? 0;
 
 	const TooltipComponent = detectBounds || tooltipPlacement !== 'auto' ? BoundedTooltip : Tooltip;
-	const boxStyle: CSSProperties = {
-		...defaultStyles,
-		zIndex,
-		backgroundColor: theme?.backgroundColor ?? 'white',
-		boxShadow: `0 1px 2px ${
-			isValidHexColor( theme?.htmlLabel?.color ) ? `${ theme.htmlLabel.color }55` : '#22222255'
-		}`,
-		...theme?.htmlLabel,
-		...style,
-	};
+	const boxStyle: CSSProperties = { zIndex, ...style };
+	// BoundedTooltip themes its own box.
+	const themesOwnBox = TooltipComponent === Tooltip && ! tooltipProps.unstyled;
+	const box = (
+		<TooltipComponent
+			left={ tooltipLeft }
+			top={
+				tooltipPlacement === 'below-axis'
+					? marginTop + innerHeight + ( margin?.bottom ?? 0 )
+					: ( tooltipAnchorTop ?? tooltipTop )
+			}
+			style={ boxStyle }
+			applyPositionStyle
+			{ ...tooltipProps }
+			className={ clsx(
+				themesOwnBox && [ CHART_SCOPE_CLASS, styles.surface ],
+				tooltipProps.className
+			) }
+			{ ...( tooltipPlacement !== 'auto' && { placement: tooltipPlacement } ) }
+		>
+			{ tooltipContent }
+		</TooltipComponent>
+	);
 
 	return (
 		<>
@@ -258,23 +274,7 @@ const XyChartTooltipContent = < Datum extends object >( {
 				{ glyphs }
 			</g>
 			{ container &&
-				createPortal(
-					<TooltipComponent
-						left={ tooltipLeft }
-						top={
-							tooltipPlacement === 'below-axis'
-								? marginTop + innerHeight + ( margin?.bottom ?? 0 )
-								: ( tooltipAnchorTop ?? tooltipTop )
-						}
-						style={ boxStyle }
-						applyPositionStyle
-						{ ...tooltipProps }
-						{ ...( tooltipPlacement !== 'auto' && { placement: tooltipPlacement } ) }
-					>
-						{ tooltipContent }
-					</TooltipComponent>,
-					container
-				) }
+				createPortal( themesOwnBox ? <TooltipTheme>{ box }</TooltipTheme> : box, container ) }
 		</>
 	);
 };

package/src/components/trend-indicator/trend-indicator.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { useStandaloneScopeClass } from '../../providers/chart-scope';
 import styles from './trend-indicator.module.scss';
 import type { TrendIndicatorProps, TrendDirection } from './types';
+import type { JSX } from 'react';
 
 const DIRECTION_LABELS: Record< TrendDirection, string > = {
 	up: 'Increase',

package/src/hooks/index.ts

@@ -9,3 +9,4 @@ export { useZeroValueDisplay } from './use-zero-value-display';
 export { useDataWithPercentages } from './use-data-with-percentages';
 export { useLegendVisibilityData } from './use-legend-visibility-data';
 export { usePrefersReducedMotion } from './use-prefers-reduced-motion';
+export { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';

package/src/hooks/test/use-xychart-theme.test.tsx

@@ -1,4 +1,5 @@
 import { renderHook } from '@testing-library/react';
+import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
 import { ChartScopeContext } from '../../providers/chart-scope';
 import { useXYChartTheme } from '../use-xychart-theme';
 import type { ReactNode } from 'react';
@@ -48,8 +49,7 @@ describe( 'useXYChartTheme', () => {
 		document.body.removeChild( scope );
 	} );
 
-	// The one label color that has to arrive resolved: visx paints it on a portal container appended to `document.body`, where the catalog is not declared, and concatenates it into `box-shadow: 0 1px 2px ${color}55`, which a `var()` chain would invalidate.
-	it( 'resolves the tooltip label color while the tick labels keep the pointer', () => {
+	it( 'hands visx the label pointer for the HTML label, even with an override in scope', () => {
 		const scope = document.createElement( 'div' );
 		scope.style.setProperty( '--a8c-charts-color-label-axis', '#0000ff' );
 		document.body.appendChild( scope );
@@ -60,7 +60,7 @@ describe( 'useXYChartTheme', () => {
 
 		const { result } = renderHook( () => useXYChartTheme( [] ), { wrapper } );
 
-		expect( result.current.htmlLabel.color ).toBe( '#0000ff' );
+		expect( result.current.htmlLabel.color ).toBe( CATALOG_POINTERS.labelAxis );
 		expect( result.current.svgLabelSmall.fill ).toBe(
 			'var(--a8c-charts-color-label-axis, #1e1e1e)'
 		);

package/src/hooks/use-isomorphic-layout-effect.ts

@@ -0,0 +1,5 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+// useLayoutEffect on the client, useEffect on the server to avoid React's SSR warning.
+export const useIsomorphicLayoutEffect =
+	typeof window !== 'undefined' ? useLayoutEffect : useEffect;