@automattic/charts 3.0.0 → 3.1.1

package/src/charts/private/svg-empty-state/get-all-hidden-message.ts

@@ -0,0 +1,41 @@
+import { _x } from '@wordpress/i18n';
+
+export type HiddenChartItemType = 'series' | 'segments';
+
+/**
+ * Return the empty-state message for a chart whose items are all hidden.
+ *
+ * Each translation call has a distinct gettext context. This prevents Terser
+ * from folding conditional calls into one call with a conditional msgid, which
+ * would make the strings unavailable to static translation extraction.
+ *
+ * @param interactive - Whether the legend can be used to show hidden items.
+ * @param itemType    - The chart-specific name for its data items.
+ * @return The translated empty-state message.
+ */
+export const getAllHiddenMessage = (
+	interactive: boolean,
+	itemType: HiddenChartItemType
+): string => {
+	if ( itemType === 'segments' ) {
+		if ( interactive ) {
+			return _x(
+				'All segments are hidden. Click legend items to show data.',
+				'chart empty state: interactive segments',
+				'jetpack-charts'
+			);
+		}
+
+		return _x( 'All segments are hidden.', 'chart empty state: segments', 'jetpack-charts' );
+	}
+
+	if ( interactive ) {
+		return _x(
+			'All series are hidden. Click legend items to show data.',
+			'chart empty state: interactive series',
+			'jetpack-charts'
+		);
+	}
+
+	return _x( 'All series are hidden.', 'chart empty state: series', 'jetpack-charts' );
+};

package/src/charts/private/svg-empty-state/index.ts

@@ -1 +1,2 @@
 export { SvgEmptyState } from './svg-empty-state';
+export { getAllHiddenMessage } from './get-all-hidden-message';

package/src/charts/private/svg-empty-state/test/get-all-hidden-message.test.ts

@@ -0,0 +1,15 @@
+import { getAllHiddenMessage } from '../get-all-hidden-message';
+
+describe( 'getAllHiddenMessage', () => {
+	it.each( [
+		[ false, 'series', 'All series are hidden.' ],
+		[ true, 'series', 'All series are hidden. Click legend items to show data.' ],
+		[ false, 'segments', 'All segments are hidden.' ],
+		[ true, 'segments', 'All segments are hidden. Click legend items to show data.' ],
+	] as const )(
+		'returns the expected message for interactive=%s %s',
+		( interactive, type, message ) => {
+			expect( getAllHiddenMessage( interactive, type ) ).toBe( message );
+		}
+	);
+} );

package/src/charts/private/x-zoom/test/x-zoom.test.tsx

@@ -2,7 +2,7 @@ import { act, render, renderHook, screen, waitFor } from '@testing-library/react
 import userEvent from '@testing-library/user-event';
 import { useCallback, useRef, useState } from 'react';
 import { useXZoom, ZoomResetButton } from '../index';
-import type { SingleChartRef } from '../../single-chart-context';
+import type { ChartInstanceRef } from '../../chart-instance-context';
 import type { EventHandlerParams } from '@visx/xychart';
 import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
 
@@ -23,7 +23,7 @@ const makeChartRef = (
 			getScales: () => ( scale ? { xScale: scale, yScale: scale } : null ),
 			getChartDimensions: () => ( { width: 0, height: 0, margin: {} } ),
 		},
-	} ) as unknown as ReturnType< typeof useRef< SingleChartRef > >;
+	} ) as unknown as ReturnType< typeof useRef< ChartInstanceRef > >;
 
 const makeParams = ( x: number ): EventHandlerParams< object > =>
 	( {

package/src/charts/private/x-zoom/x-zoom.tsx

@@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/ui';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import styles from './x-zoom.module.scss';
-import type { SingleChartRef } from '../single-chart-context';
+import type { ChartInstanceRef } from '../chart-instance-context';
 import type { AxisScale } from '@visx/axis';
 import type { EventHandlerParams } from '@visx/xychart';
 import type { KeyboardEvent, ReactNode, RefObject } from 'react';
@@ -38,7 +38,7 @@ export function useXZoom< T extends Date | number = Date >( {
 	userHandlers,
 }: {
 	enabled: boolean;
-	chartRef: RefObject< SingleChartRef | null >;
+	chartRef: RefObject< ChartInstanceRef | null >;
 	userHandlers?: {
 		onPointerDown?: PointerHandler;
 		onPointerMove?: PointerHandler;

package/src/components/legend/legend.tsx

@@ -1,5 +1,5 @@
 import { useContext, useMemo, forwardRef } from 'react';
-import { SingleChartContext } from '../../charts/private/single-chart-context';
+import { ChartInstanceContext } from '../../charts/private/chart-instance-context';
 import { GlobalChartsContext } from '../../providers';
 import { BaseLegend } from './private';
 import type { LegendProps } from './types';
@@ -20,11 +20,11 @@ export const Legend = forwardRef< HTMLDivElement, LegendProps >(
 	( { chartId, items, shape, ...props }, ref ) => {
 		// Get context but don't throw if it doesn't exist
 		const context = useContext( GlobalChartsContext );
-		const singleChartContext = useContext( SingleChartContext );
+		const chartInstanceContext = useContext( ChartInstanceContext );
 
 		// When chartId is used, it is standalone mode
-		// When chartId is not provided, we use the context's chartId, meaning it is in a single chart context
-		const contextChartId = chartId ?? singleChartContext?.chartId;
+		// When chartId is not provided, we use the context's chartId, meaning it is inside a chart instance
+		const contextChartId = chartId ?? chartInstanceContext?.chartId;
 
 		const chartData = useMemo(
 			() => ( contextChartId && context ? context.getChartData( contextChartId ) : undefined ),

package/src/components/legend/private/base-legend.module.scss

@@ -54,6 +54,6 @@
 }
 
 .legend-item-value {
-	font-weight: var(--wpds-typography-font-weight-emphasis, 499);
+	font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 	flex-shrink: 0; // Prevent value from shrinking when text is ellipsized
 }

package/src/components/legend/private/base-legend.tsx

@@ -1,6 +1,7 @@
 import { Group } from '@visx/group';
 import { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from '@visx/legend';
 import { scaleOrdinal } from '@visx/scale';
+import { _x, sprintf } from '@wordpress/i18n';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import {
@@ -11,12 +12,13 @@ import {
 	useCallback,
 	useContext,
 } from 'react';
+import { ChartInstanceContext } from '../../../charts/private/chart-instance-context';
 import { useTextTruncation } from '../../../hooks';
 import { GlobalChartsContext, useGlobalChartsTheme } from '../../../providers';
 import { useStandaloneScopeClass } from '../../../providers/chart-scope';
 import { valueOrIdentity, valueOrIdentityString, labelTransformFactory } from '../utils';
 import styles from './base-legend.module.scss';
-import type { BaseLegendProps } from '../types';
+import type { BaseLegendItem, BaseLegendProps } from '../types';
 
 const ALIGNMENT_TO_FLEX = {
 	start: 'flex-start',
@@ -58,6 +60,52 @@ const LegendText = ( {
 	);
 };
 
+// Interactive items get a toggle affordance; non-interactive items only need a label
+// when hidden, since a visible item's own text already serves as its accessible name.
+const getLegendItemAriaLabel = (
+	text: string,
+	value: BaseLegendItem[ 'value' ],
+	visible: boolean,
+	interactive: boolean
+) => {
+	const accessibleText =
+		value != null && value !== ''
+			? sprintf(
+					/* translators: 1: legend item label; 2: legend item value. */
+					_x( '%1$s, %2$s', 'legend item label and value', 'jetpack-charts' ),
+					text,
+					String( value )
+			  )
+			: text;
+
+	if ( interactive ) {
+		if ( visible ) {
+			return sprintf(
+				/* translators: %s: legend item label (e.g. a series or segment name) */
+				_x(
+					'%s: visible. Toggle visibility.',
+					'visible interactive legend item',
+					'jetpack-charts'
+				),
+				accessibleText
+			);
+		}
+		return sprintf(
+			/* translators: %s: legend item label (e.g. a series or segment name) */
+			_x( '%s: hidden. Toggle visibility.', 'hidden interactive legend item', 'jetpack-charts' ),
+			accessibleText
+		);
+	}
+	if ( visible ) {
+		return undefined;
+	}
+	return sprintf(
+		/* translators: %s: legend item label (e.g. a series or segment name) */
+		_x( '%s: hidden', 'hidden non-interactive legend item', 'jetpack-charts' ),
+		accessibleText
+	);
+};
+
 /*
  * Base legend component that displays color-coded items with labels based on visx LegendOrdinal.
  * We avoid using LegendOrdinal directly to enable support for advanced features such as interactivity.
@@ -103,6 +151,7 @@ export const BaseLegend: ForwardRefExoticComponent<
 
 		const theme = useGlobalChartsTheme();
 		const context = useContext( GlobalChartsContext );
+		const chartInstanceContext = useContext( ChartInstanceContext );
 		const standaloneScopeClass = useStandaloneScopeClass();
 
 		const legendScale = scaleOrdinal( {
@@ -120,29 +169,28 @@ export const BaseLegend: ForwardRefExoticComponent<
 		const handleLegendClick = useCallback(
 			( seriesLabels: string[] ) => {
 				if ( interactive && chartId && context ) {
-					// Converge the whole group on the representative's next state: only toggle series that
-					// currently match it, so a desynced group (e.g. one member hidden programmatically)
-					// ends up uniformly hidden/shown after one click.
 					const representativeVisible = context.isSeriesVisible( chartId, seriesLabels[ 0 ] );
-					seriesLabels.forEach( label => {
-						if ( context.isSeriesVisible( chartId, label ) === representativeVisible ) {
-							context.toggleSeriesVisibility( chartId, label );
-						}
-					} );
+					seriesLabels.forEach( label =>
+						context.setSeriesVisibility( chartId, label, ! representativeVisible )
+					);
 				}
 			},
 			[ interactive, chartId, context ]
 		);
 
-		// Check if a series is visible
+		// Visibility is display state, not interaction state: a series hidden
+		// programmatically must read as hidden even when the legend cannot be clicked.
 		const isSeriesVisible = useCallback(
 			( seriesLabel: string ) => {
-				if ( ! interactive || ! chartId || ! context ) {
+				if ( chartInstanceContext?.isSeriesVisible ) {
+					return chartInstanceContext.isSeriesVisible( seriesLabel );
+				}
+				if ( ! chartId || ! context ) {
 					return true;
 				}
 				return context.isSeriesVisible( chartId, seriesLabel );
 			},
-			[ interactive, chartId, context ]
+			[ chartId, chartInstanceContext, context ]
 		);
 
 		// Create event handlers to avoid inline arrow functions
@@ -189,7 +237,7 @@ export const BaseLegend: ForwardRefExoticComponent<
 						align={ orientation === 'vertical' ? flexAlignment : undefined }
 						justify={ orientation === 'horizontal' ? flexAlignment : undefined }
 						wrap={ orientation === 'horizontal' ? 'wrap' : undefined }
-						role="list"
+						role={ interactive ? undefined : 'list' }
 						data-testid={ `legend-${ orientation }` }
 						className={ clsx( standaloneScopeClass, styles.legend, className ) }
 						style={ theme.legend?.containerStyles }
@@ -223,14 +271,15 @@ export const BaseLegend: ForwardRefExoticComponent<
 									}
 									onClick={ handleClick }
 									onKeyDown={ handleKeyDown }
-									role={ interactive ? 'button' : undefined }
+									role={ interactive ? 'button' : 'listitem' }
 									tabIndex={ interactive ? 0 : undefined }
 									aria-pressed={ interactive ? visible : undefined }
-									aria-label={
+									aria-label={ getLegendItemAriaLabel(
+										label.text,
+										matchedItem?.value,
+										visible,
 										interactive
-											? `${ label.text }: ${ visible ? 'visible' : 'hidden' }. Toggle visibility.`
-											: undefined
-									}
+									) }
 								>
 									{ items[ i ]?.renderGlyph ? (
 										<svg

package/src/components/legend/test/legend.test.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/jsx-no-bind */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useMemo } from 'react';
-import { SingleChartContext } from '../../../charts/private/single-chart-context';
+import { useEffect, useMemo } from 'react';
+import { ChartInstanceContext } from '../../../charts/private/chart-instance-context';
 import {
 	GlobalChartsProvider,
 	useChartId,
@@ -473,9 +473,9 @@ describe( 'BaseLegend', () => {
 			return render(
 				<GlobalChartsProvider>
 					<ChartRegistrar chartType={ chartType } chartId={ chartId } />
-					<SingleChartContext.Provider value={ { chartId } }>
+					<ChartInstanceContext.Provider value={ { chartId } }>
 						<Legend shape={ explicitShape } />
-					</SingleChartContext.Provider>
+					</ChartInstanceContext.Provider>
 				</GlobalChartsProvider>
 			);
 		};
@@ -535,6 +535,7 @@ describe( 'BaseLegend', () => {
 			expect( legendItems ).toHaveLength( 2 );
 			expect( legendItems[ 0 ] ).toHaveAttribute( 'tabIndex', '0' );
 			expect( legendItems[ 0 ] ).toHaveAttribute( 'aria-pressed', 'true' );
+			expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument();
 		} );
 
 		it( 'handles click events to toggle visibility', async () => {
@@ -621,6 +622,24 @@ describe( 'BaseLegend', () => {
 			expect( buttons ).toHaveLength( 0 );
 		} );
 
+		it( 'uses chart-instance visibility before provider state', () => {
+			render(
+				<GlobalChartsProvider>
+					<ChartInstanceContext.Provider
+						value={ {
+							chartId: 'test-chart',
+							isSeriesVisible: label => label !== 'Item 1',
+						} }
+					>
+						<BaseLegend items={ defaultItems } chartId="test-chart" />
+					</ChartInstanceContext.Provider>
+				</GlobalChartsProvider>
+			);
+
+			expect( screen.getByRole( 'listitem', { name: /Item 1.*hidden/ } ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Item 2' ) ).toBeInTheDocument();
+		} );
+
 		it( 'works without chartId but does not toggle', async () => {
 			const user = userEvent.setup();
 
@@ -754,4 +773,81 @@ describe( 'BaseLegend', () => {
 			expect( legendButton ).toHaveAttribute( 'aria-pressed', 'false' );
 		} );
 	} );
+
+	describe( 'Non-interactive legend reflects hidden state', () => {
+		const HiddenSeriesHarness = ( { interactive }: { interactive: boolean } ) => {
+			const context = useGlobalChartsContext();
+			useEffect( () => {
+				context.toggleSeriesVisibility( 'legend-a11y-chart', 'Series A' );
+				// eslint-disable-next-line react-hooks/exhaustive-deps
+			}, [] );
+			return (
+				<BaseLegend
+					chartId="legend-a11y-chart"
+					interactive={ interactive }
+					items={ [
+						{ label: 'Series A', value: '10', color: '#ff0000' },
+						{ label: 'Series B', value: '20', color: '#00ff00' },
+					] }
+				/>
+			);
+		};
+
+		it( 'marks a programmatically hidden series inactive on a non-interactive legend', () => {
+			render(
+				<GlobalChartsProvider>
+					<HiddenSeriesHarness interactive={ false } />
+				</GlobalChartsProvider>
+			);
+
+			const items = screen.getAllByTestId( 'legend-item' );
+			expect( items[ 0 ] ).toHaveClass( 'legend-item--inactive' );
+			expect( items[ 1 ] ).not.toHaveClass( 'legend-item--inactive' );
+		} );
+
+		it( 'does not make a non-interactive legend item operable', () => {
+			render(
+				<GlobalChartsProvider>
+					<HiddenSeriesHarness interactive={ false } />
+				</GlobalChartsProvider>
+			);
+
+			expect( screen.queryAllByRole( 'button' ) ).toHaveLength( 0 );
+			const items = screen.getAllByTestId( 'legend-item' );
+			expect( items[ 0 ] ).not.toHaveAttribute( 'aria-pressed' );
+			expect( items[ 0 ] ).not.toHaveAttribute( 'tabindex' );
+			expect( items[ 0 ] ).toHaveAttribute( 'role', 'listitem' );
+		} );
+
+		it( 'names the hidden state accessibly on a non-interactive legend', () => {
+			render(
+				<GlobalChartsProvider>
+					<HiddenSeriesHarness interactive={ false } />
+				</GlobalChartsProvider>
+			);
+
+			const items = screen.getAllByTestId( 'legend-item' );
+			expect( items[ 0 ] ).toHaveAttribute( 'aria-label', 'Series A, 10: hidden' );
+			expect( items[ 1 ] ).not.toHaveAttribute( 'aria-label' );
+		} );
+
+		it( 'includes the item value in interactive accessible names', () => {
+			render(
+				<GlobalChartsProvider>
+					<HiddenSeriesHarness interactive={ true } />
+				</GlobalChartsProvider>
+			);
+
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Series A, 10: hidden. Toggle visibility.',
+				} )
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Series B, 20: visible. Toggle visibility.',
+				} )
+			).toBeInTheDocument();
+		} );
+	} );
 } );

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

@@ -1,6 +1,6 @@
 import { Tooltip, TooltipContext } from '@visx/xychart';
 import clsx from 'clsx';
-import { useContext, useEffect, useCallback, useMemo } from 'react';
+import { useContext, useEffect, useCallback, useMemo, useRef } from 'react';
 import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
 import type { SeriesData, DataPointDate } from '../../types';
 import type { RenderTooltipParams, XyChartTooltipProps } from '../../visx/types';
@@ -79,13 +79,24 @@ export const AccessibleTooltip: React.FC< AccessibleTooltipProps > = ( {
 		return flattened;
 	}, [ series, mode ] );
 
+	// Tracks whether this effect opened a tooltip, so it only closes its own.
+	const hasKeyboardSelection = useRef( false );
+
 	// Handle tooltip highlighting for keyboard navigation
 	useEffect( () => {
 		if ( selectedIndex === undefined ) {
-			tooltipContext?.hideTooltip();
+			// visx debounces the hide and cancels only the most recently scheduled one,
+			// so hiding on every run leaves earlier hides pending. One of those lands
+			// mid-navigation and closes the tooltip the user is reading.
+			if ( hasKeyboardSelection.current ) {
+				hasKeyboardSelection.current = false;
+				tooltipContext?.hideTooltip();
+			}
 			return;
 		}
 
+		hasKeyboardSelection.current = true;
+
 		if ( mode === 'group' ) {
 			// Show all series at the selected data point index in single tooltip.
 			series.forEach( ( s, index ) => {

package/src/components/trend-indicator/trend-indicator.module.scss

@@ -3,7 +3,7 @@
 	align-items: center;
 	gap: 0.125em;
 	font-size: var(--wpds-typography-font-size-md, 13px);
-	font-weight: var(--wpds-typography-font-weight-emphasis, 499);
+	font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 	line-height: 1;
 
 	&--up {

package/src/hooks/index.ts

@@ -7,5 +7,5 @@ export { useElementSize } from './use-element-size';
 export { useTextTruncation } from './use-text-truncation';
 export { useZeroValueDisplay } from './use-zero-value-display';
 export { useDataWithPercentages } from './use-data-with-percentages';
-export { useInteractiveLegendData } from './use-interactive-legend-data';
+export { useLegendVisibilityData } from './use-legend-visibility-data';
 export { usePrefersReducedMotion } from './use-prefers-reduced-motion';

package/src/hooks/{use-interactive-legend-data.ts → use-legend-visibility-data.ts}

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 /**
- * Data point interface for charts with interactive legends.
+ * Data point interface for charts with visibility-aware legends.
  * Requires label for series identification, value for calculations,
  * and percentage (should be pre-calculated by the chart component).
  */
@@ -12,23 +12,21 @@ interface DataPointWithPercentage {
 }
 
 /**
- * Parameters for the useInteractiveLegendData hook.
+ * Parameters for the useLegendVisibilityData hook.
  */
-interface UseInteractiveLegendDataParams< T extends DataPointWithPercentage > {
+interface UseLegendVisibilityDataParams< T extends DataPointWithPercentage > {
 	/** The chart data with pre-calculated percentages */
 	data: T[];
-	/** Unique chart identifier, required for interactive legends */
+	/** Unique chart identifier, required for filtering */
 	chartId: string | undefined;
-	/** Whether interactive legend filtering is enabled */
-	legendInteractive: boolean;
 	/** Function to check if a series is visible in the legend */
 	isSeriesVisible: ( chartId: string, label: string ) => boolean;
 }
 
 /**
- * Return value from the useInteractiveLegendData hook.
+ * Return value from the useLegendVisibilityData hook.
  */
-interface UseInteractiveLegendDataResult< T extends DataPointWithPercentage > {
+interface UseLegendVisibilityDataResult< T extends DataPointWithPercentage > {
 	/** Filtered data array containing only visible segments with recalculated percentages */
 	visibleData: T[];
 	/** Boolean indicating if all segments are hidden */
@@ -42,10 +40,10 @@ interface UseInteractiveLegendDataResult< T extends DataPointWithPercentage > {
 }
 
 /**
- * Custom hook to filter and recalculate chart data for interactive legends.
+ * Custom hook to filter and recalculate chart data based on series visibility.
  *
- * When interactive legends are enabled, this hook:
- * 1. Filters data to show only visible series based on legend selection
+ * Regardless of whether the legend is interactive (clickable), this hook:
+ * 1. Filters data to show only visible series (visibility can also be set programmatically)
  * 2. Recalculates percentages so visible segments total 100%
  * 3. Tracks whether all segments are hidden to show empty state
  *
@@ -54,10 +52,9 @@ interface UseInteractiveLegendDataResult< T extends DataPointWithPercentage > {
  *
  * @example
  * ```tsx
- * const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData({
+ * const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData({
  *   data: chartData,
  *   chartId: 'my-pie-chart',
- *   legendInteractive: true,
  *   isSeriesVisible: (id, label) => context.isSeriesVisible(id, label),
  * });
  *
@@ -72,24 +69,24 @@ interface UseInteractiveLegendDataResult< T extends DataPointWithPercentage > {
  * return <PieChart data={visibleData} />;
  * ```
  *
- * @param params                   - Configuration object for the hook
- * @param params.data              - The chart data to filter
- * @param params.chartId           - Unique identifier for the chart (required for interactive mode)
- * @param params.legendInteractive - Whether to enable interactive filtering
- * @param params.isSeriesVisible   - Function to check series visibility
+ * @param params                 - Configuration object for the hook
+ * @param params.data            - The chart data to filter
+ * @param params.chartId         - Unique identifier for the chart (required for filtering)
+ * @param params.isSeriesVisible - Function to check series visibility
  * @return Object containing visibleData, allSegmentsHidden flag, and legendData with recalculated percentages
  */
-export const useInteractiveLegendData = < T extends DataPointWithPercentage >( {
+export const useLegendVisibilityData = < T extends DataPointWithPercentage >( {
 	data,
 	chartId,
-	legendInteractive,
 	isSeriesVisible,
-}: UseInteractiveLegendDataParams< T > ): UseInteractiveLegendDataResult< T > => {
-	// Filter and recalculate data for interactive legends
+}: UseLegendVisibilityDataParams< T > ): UseLegendVisibilityDataResult< T > => {
+	// Filter and recalculate data based on shared legend visibility state.
 	// Note: data should already have percentages calculated by the chart component
 	const visibleData = useMemo( () => {
-		// If interactive mode is disabled or no chartId, return data as-is
-		if ( ! chartId || ! legendInteractive ) {
+		// Visibility filtering applies regardless of whether the legend is
+		// interactive: interactivity only controls whether clicking the legend
+		// can change visibility, not whether the chart honors it.
+		if ( ! chartId ) {
 			return data;
 		}
 
@@ -107,18 +104,20 @@ export const useInteractiveLegendData = < T extends DataPointWithPercentage >( {
 			...segment,
 			percentage: totalValue > 0 ? ( segment.value / totalValue ) * 100 : 0,
 		} ) );
-	}, [ data, chartId, isSeriesVisible, legendInteractive ] );
+	}, [ data, chartId, isSeriesVisible ] );
 
-	// Check if all segments are hidden (only relevant in interactive mode)
+	// Check if all segments are hidden. Guard on the source data being non-empty:
+	// unlike line/area's `.every()`, an empty `visibleData` alone can't distinguish
+	// "everything was hidden" from "there was nothing to show" for an empty dataset.
 	const allSegmentsHidden = useMemo( () => {
-		return legendInteractive && visibleData.length === 0;
-	}, [ legendInteractive, visibleData ] );
+		return visibleData.length === 0 && data.length > 0;
+	}, [ visibleData, data ] );
 
 	// Prepare legend data with percentages
 	// Hidden items keep their original percentage (calculated from all values)
 	// Visible items show recalculated percentages (totaling 100%)
 	const legendData = useMemo( () => {
-		if ( ! legendInteractive || ! chartId ) {
+		if ( ! chartId ) {
 			return data;
 		}
 
@@ -135,7 +134,7 @@ export const useInteractiveLegendData = < T extends DataPointWithPercentage >( {
 			// For visible items, get the recalculated percentage from visibleData
 			return visibleDataMap.get( segment.label ) || segment;
 		} );
-	}, [ data, visibleData, legendInteractive, chartId, isSeriesVisible ] );
+	}, [ data, visibleData, chartId, isSeriesVisible ] );
 
 	return { visibleData, allSegmentsHidden, legendData };
 };

package/src/index.ts

@@ -4,6 +4,8 @@ export { BarChart, BarChartUnresponsive } from './charts/bar-chart';
 export { BarListChart, BarListChartUnresponsive } from './charts/bar-list-chart';
 export { ConversionFunnelChart } from './charts/conversion-funnel-chart';
 export { GeoChart, GeoChartUnresponsive } from './charts/geo-chart';
+// A value export, not a type: building a tooltip column header needs the enum member itself.
+export { GoogleDataTableColumnRoleType } from './types';
 export {
 	HeatmapChart,
 	HeatmapChartUnresponsive,
@@ -61,9 +63,9 @@ export type {
 	LegendPosition,
 	ChartLegendConfig,
 	SeriesChartLegendConfig,
+	SeriesVisibilityProps,
 	BaseChartProps,
 	GoogleDataTableColumn,
-	GoogleDataTableColumnRoleType,
 	GoogleDataTableRow,
 	LegendShape,
 	LegendShapeLabel,