@automattic/charts 4.1.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.1.0",
+	"version": "4.2.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,9 +63,9 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.2.8",
+		"@automattic/number-formatters": "^1.2.9",
 		"@babel/runtime": "7.29.7",
-		"@date-fns/tz": "1.4.1",
+		"@date-fns/tz": "1.5.0",
 		"@react-spring/web": "10.1.1",
 		"@visx/annotation": "^4.0.0",
 		"@visx/axis": "^4.0.0",
@@ -84,9 +84,9 @@
 		"@visx/vendor": "^4.0.0",
 		"@visx/xychart": "^4.0.0",
 		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/icons": "^15.0.0",
-		"@wordpress/theme": "2.1.1-next.v.202608281122.0",
-		"@wordpress/ui": "0.21.0",
+		"@wordpress/icons": "^16.0.0",
+		"@wordpress/theme": "2.1.1-next.v.202609031004.0",
+		"@wordpress/ui": "0.22.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -111,12 +111,12 @@
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"@visx/glyph": "4.0.0",
-		"@wordpress/components": "40.0.0",
-		"@wordpress/element": "8.6.0",
-		"@wordpress/private-apis": "1.54.0",
-		"babel-jest": "30.4.1",
+		"@wordpress/components": "40.1.0",
+		"@wordpress/element": "8.7.0",
+		"@wordpress/private-apis": "1.55.0",
+		"babel-jest": "30.5.1",
 		"identity-obj-proxy": "^3.0.0",
-		"jest": "30.4.2",
+		"jest": "30.5.1",
 		"jest-extended": "7.0.0",
 		"magic-string": "0.30.21",
 		"react": "18.3.1",

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

@@ -411,6 +411,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 
 						return (
 							<div
+								ref={ chartRef }
 								role="grid"
 								aria-label={ __( 'Area chart', 'jetpack-charts' ) }
 								tabIndex={ 0 }
@@ -419,7 +420,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 								onBlur={ onChartBlur }
 							>
 								{ chartHeight > 0 && (
-									<div ref={ chartRef } className={ plotStyles[ 'xy-plot' ] }>
+									<div className={ plotStyles[ 'xy-plot' ] }>
 										{ zoomable && zoom.domain && <ZoomResetButton onClick={ zoom.reset } /> }
 										<XYChart
 											theme={ theme }

package/src/charts/area-chart/private/overlays.tsx

@@ -57,8 +57,7 @@ export const HoverGlyphs: FC< {
 	const yScale = dataContext?.yScale as ScaleFn | undefined;
 	const tooltipOpen = tooltipContext?.tooltipOpen;
 	const nearestDatum = tooltipContext?.tooltipData?.nearestDatum?.datum as
-		| DataPointDate
-		| undefined;
+		DataPointDate | undefined;
 
 	if (
 		! tooltipOpen ||

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

@@ -52,6 +52,37 @@ describe( 'AreaChart', () => {
 		);
 	};
 
+	test.each( [ [ 'Escape', '{Escape}' ] ] )(
+		'returns focus to the grid after %s',
+		async ( _name, keys ) => {
+			jest.useFakeTimers();
+			try {
+				const user = userEvent.setup( { advanceTimers: jest.advanceTimersByTime } );
+				renderWithProvider();
+				const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+
+				await user.tab();
+				expect( chart ).toHaveFocus();
+				await user.keyboard( '{ArrowRight}' );
+				expect( screen.getByRole( 'tooltip' ) ).toHaveFocus();
+
+				await user.keyboard( keys );
+				await act( async () => {
+					jest.advanceTimersByTime( 5000 );
+				} );
+				expect( chart ).toHaveFocus();
+				expect( screen.queryByRole( 'tooltip' ) ).not.toBeInTheDocument();
+
+				await user.keyboard( '{ArrowRight}' );
+				const tooltip = screen.getByRole( 'tooltip' );
+				expect( tooltip ).toHaveFocus();
+				expect( tooltip ).toHaveTextContent( 'Series A:10' );
+			} finally {
+				jest.useRealTimers();
+			}
+		}
+	);
+
 	describe( 'Data Validation', () => {
 		test( 'shows error when data is empty', () => {
 			renderWithProvider( { data: [] } );

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

@@ -31,6 +31,8 @@ import plotStyles from '../private/xy-plot/xy-plot.module.scss';
 import styles from './bar-chart.module.scss';
 import {
 	useBarChartOptions,
+	BandHighlight,
+	BandTooltip,
 	ComparisonBars,
 	DEFAULT_COMPARISON_WIDTH_FACTOR,
 	COMPARISON_INNER_GAP,
@@ -51,15 +53,31 @@ import type { RenderTooltipParams } from '../../visx/types';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { FC, ReactNode, ComponentType } from 'react';
 
+export type BandHighlightSelection = {
+	datum: DataPointDate;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+
 export interface BarChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
 	/**
 	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
 	 */
 	legend?: SeriesChartLegendConfig;
 	renderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;
+	/** Place the tooltip beside its category without vertical flipping. */
+	tooltipPlacement?: 'auto' | 'beside';
+	/** Tooltip top anchor in SVG coordinates; negative offsets are supported. */
+	tooltipAnchorTop?: number;
 	orientation?: 'horizontal' | 'vertical';
 	withPatterns?: boolean;
 	showZeroValues?: boolean;
+	/** Highlight the active band across the plot when tooltips are enabled. */
+	withBandHighlight?: boolean;
+	/** Receive active band bounds in SVG coordinates, or null when dismissed. */
+	onBandHighlightChange?: ( selection: BandHighlightSelection | null ) => void;
 	children?: ReactNode;
 }
 
@@ -121,10 +139,14 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	legend = {},
 	gridVisibility: gridVisibilityProp,
 	renderTooltip,
+	tooltipPlacement,
+	tooltipAnchorTop,
 	options = {},
 	orientation = 'vertical',
 	withPatterns = false,
 	showZeroValues = false,
+	withBandHighlight = false,
+	onBandHighlightChange,
 	defaultHiddenSeries,
 	animation,
 	children,
@@ -193,13 +215,6 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );
 	const [ isNavigating, setIsNavigating ] = useState( false );
 
-	// Comparison series have no .visx-bar elements; count only primary series so
-	// keyboard navigation doesn't cycle phantom indices into comparison-only slots.
-	const primarySeriesForNav = dataWithVisibleZeros.filter( s => s.options?.type !== 'comparison' );
-	const totalPoints =
-		Math.max( 0, ...primarySeriesForNav.map( s => s.data?.length || 0 ) ) *
-		primarySeriesForNav.length;
-
 	// Add visibility information from the shared legend state.
 	const seriesWithVisibility = useMemo(
 		() =>
@@ -225,6 +240,9 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ seriesWithVisibility ]
 	);
 
+	const totalPoints =
+		Math.max( 0, ...primaryEntries.map( e => e.series.data.length ) ) * primaryEntries.length;
+
 	const primaryKeys = useMemo(
 		() => primaryEntries.map( ( { series } ) => series.label ),
 		[ primaryEntries ]
@@ -259,6 +277,8 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ primaryEntries, onDatumActivate ]
 	);
 
+	const visibleSeriesKey = useMemo( () => JSON.stringify( primaryKeys ), [ primaryKeys ] );
+
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
 		selectedIndex,
 		setSelectedIndex,
@@ -267,6 +287,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		chartRef,
 		totalPoints,
 		onActivate: activateSelectedBar,
+		visibleSeriesKey,
 	} );
 
 	const comparisonEntries = useMemo( () => {
@@ -342,10 +363,10 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	}, [ comparisonEntries.length, chartOptions.xScale, chartOptions.yScale, horizontal ] );
 
 	const getBarBackground = useCallback(
-		( index: number ) => () =>
+		( index: number ) => ( datum: DataPointDate ) =>
 			withPatterns
 				? `url(#${ getPatternId( chartId, index ) })`
-				: getElementStyles( { data: dataSorted[ index ], index } ).color,
+				: ( datum.color ?? getElementStyles( { data: dataSorted[ index ], index } ).color ),
 		[ withPatterns, getElementStyles, dataSorted, chartId ]
 	);
 
@@ -581,6 +602,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 					return (
 						<div
 							role="grid"
+							ref={ chartRef }
 							aria-label={ __( 'Bar chart', 'jetpack-charts' ) }
 							tabIndex={ 0 }
 							onKeyDown={ onChartKeyDown }
@@ -588,7 +610,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 							onBlur={ onChartBlur }
 						>
 							{ chartHeight > 0 && (
-								<div ref={ chartRef } className={ plotStyles[ 'xy-plot' ] }>
+								<div className={ plotStyles[ 'xy-plot' ] }>
 									<XYChart
 										theme={ theme }
 										width={ width }
@@ -600,18 +622,34 @@ const BarChartInternal: FC< BarChartProps > = ( {
 										xScale={ xScale }
 										yScale={ yScale }
 										horizontal={ horizontal }
-										onPointerDown={ onPointerDown }
-										onPointerUp={ onPointerUp }
 										pointerEventsDataKey="nearest"
 									>
-										{ ! allSeriesHidden && (
-											<Grid
-												columns={ gridVisibility.includes( 'y' ) }
-												rows={ gridVisibility.includes( 'x' ) }
-												numTicks={ 4 }
+										{ withTooltips && ( withBandHighlight || onBandHighlightChange ) && (
+											<BandHighlight
+												visible={ withBandHighlight }
+												horizontal={ horizontal }
+												onChange={ onBandHighlightChange }
 											/>
 										) }
 
+										{ ! allSeriesHidden && (
+											<>
+												{ /* Visx forwards tickValues to its grid primitives but omits it from GridProps. */ }
+												<Grid
+													columns={ gridVisibility.includes( 'y' ) }
+													rows={ false }
+													numTicks={ 4 }
+													{ ...{ tickValues: chartOptions.axis.x.tickValues } }
+												/>
+												<Grid
+													columns={ false }
+													rows={ gridVisibility.includes( 'x' ) }
+													numTicks={ 4 }
+													{ ...{ tickValues: chartOptions.axis.y.tickValues } }
+												/>
+											</>
+										) }
+
 										{ withPatterns && (
 											<>
 												<defs data-testid="bar-chart-patterns">
@@ -673,6 +711,16 @@ const BarChartInternal: FC< BarChartProps > = ( {
 												/>
 											) ) }
 										</BarGroup>
+										{ /* Do not reorder: for one key the last showTooltip wins, so this must run after BarGroup. */ }
+										{ ( withTooltips || onPointerDown || onPointerUp ) && (
+											<BandTooltip
+												keys={ primaryKeys }
+												groupPadding={ groupPadding }
+												withTooltips={ withTooltips }
+												onPointerDown={ onPointerDown }
+												onPointerUp={ onPointerUp }
+											/>
+										) }
 
 										{ /* With every series hidden there is no data to build the value scale from, so
 										     visx collapses the domain and the axes render squished at the top. Drop them
@@ -686,6 +734,8 @@ const BarChartInternal: FC< BarChartProps > = ( {
 
 										{ withTooltips && (
 											<AccessibleTooltip
+												tooltipPlacement={ tooltipPlacement }
+												tooltipAnchorTop={ tooltipAnchorTop }
 												detectBounds
 												snapTooltipToDatumX
 												snapTooltipToDatumY

package/src/charts/bar-chart/index.ts

@@ -1,2 +1,2 @@
 export { default as BarChart, BarChartUnresponsive } from './bar-chart';
-export type { BarChartProps } from './bar-chart';
+export type { BarChartProps, BandHighlightSelection } from './bar-chart';

package/src/charts/bar-chart/private/band-highlight.tsx

@@ -0,0 +1,85 @@
+import { DataContext, TooltipContext } from '@visx/xychart';
+import { useContext, useEffect, useMemo, useRef } from 'react';
+import { useDeepMemo } from '../../../hooks';
+import { CATALOG_POINTERS } from '../../../providers/chart-context/private/catalog-pointers';
+import type { BandScale } from './band-scale';
+import type { DataPointDate } from '../../../types';
+import type { BandHighlightSelection } from '../bar-chart';
+
+type Props = {
+	visible: boolean;
+	horizontal: boolean;
+	onChange?: ( selection: BandHighlightSelection | null ) => void;
+};
+
+/**
+ * Render and report the active band using the chart’s registered scales.
+ * @param root0            - Highlight options.
+ * @param root0.visible    - Whether to paint the band.
+ * @param root0.horizontal - Whether categories run vertically.
+ * @param root0.onChange   - Receives selected band geometry.
+ * @return The optional band highlight.
+ */
+export function BandHighlight( { visible, horizontal, onChange }: Props ) {
+	const { xScale, yScale, dataRegistry, margin, innerWidth, innerHeight } =
+		useContext( DataContext );
+	const { tooltipOpen, tooltipData } = useContext( TooltipContext );
+	const nearest = tooltipData?.nearestDatum;
+	const selection = useMemo( () => {
+		if ( ! tooltipOpen || ! nearest ) {
+			return null;
+		}
+		const scale = ( horizontal ? yScale : xScale ) as BandScale | undefined;
+		const entry = dataRegistry?.get( nearest.key );
+		const accessor = horizontal ? entry?.yAccessor : entry?.xAccessor;
+		if ( ! scale?.bandwidth || ! accessor ) {
+			return null;
+		}
+		const position = scale( accessor( nearest.datum ) );
+		if ( position === undefined || ! Number.isFinite( position ) ) {
+			return null;
+		}
+		return {
+			datum: nearest.datum as DataPointDate,
+			x: horizontal ? ( margin?.left ?? 0 ) : position,
+			y: horizontal ? position : ( margin?.top ?? 0 ),
+			width: horizontal ? innerWidth : scale.bandwidth(),
+			height: horizontal ? scale.bandwidth() : innerHeight,
+		};
+	}, [
+		tooltipOpen,
+		nearest,
+		horizontal,
+		xScale,
+		yScale,
+		dataRegistry,
+		margin,
+		innerWidth,
+		innerHeight,
+	] );
+
+	const stableSelection = useDeepMemo( selection );
+	const onChangeRef = useRef( onChange );
+	onChangeRef.current = onChange;
+	useEffect( () => {
+		onChangeRef.current?.( stableSelection );
+	}, [ stableSelection ] );
+
+	useEffect( () => () => onChangeRef.current?.( null ), [] );
+
+	if ( ! visible || ! selection ) {
+		return null;
+	}
+	const { x, y, width, height } = selection;
+	return (
+		<rect
+			x={ x }
+			y={ y }
+			width={ width }
+			height={ height }
+			data-testid="bar-chart-band-highlight"
+			pointerEvents="none"
+			fill={ CATALOG_POINTERS.surfaceSecondary }
+		/>
+	);
+}

package/src/charts/bar-chart/private/band-scale.ts

@@ -0,0 +1,13 @@
+import { scaleBand } from '@visx/scale';
+
+export type BandScale = ( ( value: unknown ) => number | undefined ) & { bandwidth: () => number };
+
+/**
+ * Match the inner slot scale used by visx BarGroup.
+ * @param keys      - Visible primary series keys.
+ * @param bandwidth - Category band width.
+ * @param padding   - Padding between slots.
+ * @return The grouped bar scale.
+ */
+export const createGroupScale = ( keys: string[], bandwidth: number, padding: number ) =>
+	scaleBand( { domain: keys, range: [ 0, bandwidth ], padding } );

package/src/charts/bar-chart/private/band-tooltip.tsx

@@ -0,0 +1,138 @@
+import { DataContext, TooltipContext, useEventEmitter } from '@visx/xychart';
+import { useCallback, useContext, useMemo } from 'react';
+import { createGroupScale } from './band-scale';
+import type { BandScale } from './band-scale';
+import type { BarChartProps } from '../bar-chart';
+
+type PointerHandler = NonNullable< Parameters< typeof useEventEmitter >[ 1 ] >;
+type PointerSelection = Parameters< NonNullable< BarChartProps[ 'onPointerUp' ] > >[ 0 ];
+
+/**
+ * Find a category by its painted center, including outer padding and reversed ranges.
+ * @param data     - Registered series points.
+ * @param accessor - Category accessor.
+ * @param scale    - Rendered category band scale.
+ * @param position - Pointer coordinate on the category axis.
+ * @return Index of the nearest category, or -1 when none is registered.
+ */
+export function nearestBandIndex< Datum >(
+	data: Datum[],
+	accessor: ( datum: Datum ) => unknown,
+	scale: BandScale,
+	position: number
+): number {
+	let nearest = -1;
+	let distance = Infinity;
+	data.forEach( ( datum, index ) => {
+		const start = scale( accessor( datum ) );
+		if ( start === undefined ) {
+			return;
+		}
+		const candidate = Math.abs( start + scale.bandwidth() / 2 - position );
+		if ( candidate < distance ) {
+			distance = candidate;
+			nearest = index;
+		}
+	} );
+	return nearest;
+}
+
+/**
+ * Correct visx's range-based band inversion, which omits outer padding.
+ * @param root0               - Registered series selection.
+ * @param root0.keys          - Visible series keys.
+ * @param root0.groupPadding  - Padding between grouped bars.
+ * @param root0.withTooltips  - Whether pointer events update the tooltip.
+ * @param root0.onPointerDown - Receives the corrected pointer-down datum.
+ * @param root0.onPointerUp   - Receives the corrected pointer-up datum.
+ * @return No visual content.
+ */
+export function BandTooltip( {
+	keys,
+	groupPadding,
+	withTooltips,
+	onPointerDown,
+	onPointerUp,
+}: { keys: string[]; groupPadding: number } & Pick<
+	BarChartProps,
+	'withTooltips' | 'onPointerDown' | 'onPointerUp'
+> ) {
+	const { xScale, yScale, dataRegistry, horizontal } = useContext( DataContext );
+	const { showTooltip } = useContext( TooltipContext );
+	const scale = ( horizontal ? yScale : xScale ) as BandScale | undefined;
+	const bandwidth = scale?.bandwidth?.() ?? 0;
+	const groupScale = useMemo(
+		() => createGroupScale( keys, bandwidth, groupPadding ),
+		[ keys, bandwidth, groupPadding ]
+	);
+	const getSelections = useCallback(
+		( params: Parameters< PointerHandler >[ 0 ] ) => {
+			const point = params?.svgPoint;
+			if ( ! point || ! scale?.bandwidth ) {
+				return [];
+			}
+			const selections: PointerSelection[] = [];
+			for ( const key of keys ) {
+				const entry = dataRegistry?.get( key );
+				if ( ! entry ) {
+					continue;
+				}
+				const accessor = horizontal ? entry.yAccessor : entry.xAccessor;
+				const index = nearestBandIndex(
+					entry.data,
+					accessor,
+					scale,
+					horizontal ? point.y : point.x
+				);
+				if ( index < 0 ) {
+					continue;
+				}
+				const datum = entry.data[ index ];
+				const start = Number( scale( accessor( datum ) ) ) + Number( groupScale( key ) );
+				const end = start + groupScale.step();
+				const position = horizontal ? point.y : point.x;
+				const distance =
+					position >= start && position <= end ? 0 : Math.abs( position - ( start + end ) / 2 );
+				selections.push( {
+					event: params.event,
+					key,
+					datum,
+					index,
+					svgPoint: point,
+					distanceX: horizontal ? 0 : distance,
+					distanceY: horizontal ? distance : 0,
+				} );
+			}
+			return selections;
+		},
+		[ scale, dataRegistry, horizontal, keys, groupScale ]
+	);
+	const handlePointer = useCallback< PointerHandler >(
+		params => {
+			const selections = getSelections( params );
+			if ( withTooltips && params?.event.type !== 'pointerup' ) {
+				selections.forEach( showTooltip );
+			}
+			const callback = params?.event.type === 'pointerdown' ? onPointerDown : onPointerUp;
+			if ( params?.event.type === 'pointermove' || ! callback ) {
+				return;
+			}
+			const nearest = selections.reduce(
+				( best, selection ) => {
+					const distance = ( value: typeof selection ) =>
+						Math.hypot( value.distanceX, value.distanceY );
+					return ! best || distance( selection ) <= distance( best ) ? selection : best;
+				},
+				undefined as ( typeof selections )[ number ] | undefined
+			);
+			if ( nearest ) {
+				callback( nearest );
+			}
+		},
+		[ getSelections, withTooltips, showTooltip, onPointerDown, onPointerUp ]
+	);
+	useEventEmitter( 'pointermove', withTooltips ? handlePointer : undefined );
+	useEventEmitter( 'pointerdown', handlePointer );
+	useEventEmitter( 'pointerup', onPointerUp ? handlePointer : undefined );
+	return null;
+}

package/src/charts/bar-chart/private/comparison-bars.tsx

@@ -1,11 +1,12 @@
-import { scaleBand } from '@visx/scale';
 import { DataContext } from '@visx/xychart';
 import { useContext } from 'react';
+import { createGroupScale } from './band-scale';
 import { computeComparisonRect, getValueScaleBaseline } from './comparison-bars-geometry';
 import {
 	DEFAULT_COMPARISON_OPACITY,
 	DEFAULT_COMPARISON_WIDTH_FACTOR,
 } from './comparison-constants';
+import type { BandScale } from './band-scale';
 import type { ElementStyles, GetElementStylesParams } from '../../../providers';
 import type { DataPointDate, SeriesData } from '../../../types';
 import type { FC, ReactNode } from 'react';
@@ -26,10 +27,8 @@ export type ComparisonSeriesEntry = {
 
 // Minimal shape we need from visx scales — avoids spreading `any` while
 // remaining compatible with both band and continuous scale return types.
-type AnyScale = ( ( input: unknown ) => number ) & {
-	bandwidth?: () => number;
-	range: () => unknown[];
-};
+type AnyScale = ( ( input: unknown ) => number ) &
+	Partial< Pick< BandScale, 'bandwidth' > > & { range: () => unknown[] };
 
 // Renders translucent "shadow" bars for comparison series behind their paired primary bars.
 // IMPORTANT: each comparison datum's category key (label or date) must exactly match a key
@@ -73,11 +72,7 @@ export const ComparisonBars: FC< {
 	}
 
 	// Rebuild visx's inner group scale exactly as BarGroup does.
-	const groupScale = scaleBand( {
-		domain: primaryKeys,
-		range: [ 0, bandwidth ],
-		padding: groupPadding,
-	} );
+	const groupScale = createGroupScale( primaryKeys, bandwidth, groupPadding );
 	const slotThickness = groupScale.bandwidth();
 	const baseline = getValueScaleBaseline( valueScale );
 

package/src/charts/bar-chart/private/index.ts

@@ -9,3 +9,5 @@ export {
 	COMPARISON_TICK_GAP_FACTOR,
 } from './comparison-constants';
 export { BASE_BAND_PADDING_INNER } from './use-bar-chart-options';
+export { BandHighlight } from './band-highlight';
+export { BandTooltip } from './band-tooltip';