@automattic/charts 1.5.3 → 1.7.0

package/dist/visx/group/index.cjs

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../chunk-DZUJEN5N.cjs');
-
-// src/visx/group/index.ts
-var _group = require('@visx/group');
-
-
-exports.Group = _group.Group;
-//# sourceMappingURL=index.cjs.map
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _visx_group = require("@visx/group");
+Object.defineProperty(exports, "Group", {
+	enumerable: true,
+	get: function() {
+		return _visx_group.Group;
+	}
+});

package/dist/visx/group/index.d.cts

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

package/dist/visx/group/index.d.ts

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

package/dist/visx/group/index.js

@@ -1,8 +1,2 @@
-import "../../chunk-5WRI5ZAA.js";
-
-// src/visx/group/index.ts
 import { Group } from "@visx/group";
-export {
-  Group
-};
-//# sourceMappingURL=index.js.map
+export { Group };

package/dist/visx/legend/index.cjs

@@ -1,10 +1,20 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../chunk-DZUJEN5N.cjs');
-
-// src/visx/legend/index.ts
-var _legend = require('@visx/legend');
-
-
-
-
-exports.CircleShape = _legend.CircleShape; exports.LineShape = _legend.LineShape; exports.RectShape = _legend.RectShape;
-//# sourceMappingURL=index.cjs.map
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _visx_legend = require("@visx/legend");
+Object.defineProperty(exports, "CircleShape", {
+	enumerable: true,
+	get: function() {
+		return _visx_legend.CircleShape;
+	}
+});
+Object.defineProperty(exports, "LineShape", {
+	enumerable: true,
+	get: function() {
+		return _visx_legend.LineShape;
+	}
+});
+Object.defineProperty(exports, "RectShape", {
+	enumerable: true,
+	get: function() {
+		return _visx_legend.RectShape;
+	}
+});

package/dist/visx/legend/index.d.cts

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

package/dist/visx/legend/index.d.ts

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

package/dist/visx/legend/index.js

@@ -1,10 +1,2 @@
-import "../../chunk-5WRI5ZAA.js";
-
-// src/visx/legend/index.ts
-import { LineShape, CircleShape, RectShape } from "@visx/legend";
-export {
-  CircleShape,
-  LineShape,
-  RectShape
-};
-//# sourceMappingURL=index.js.map
+import { CircleShape, LineShape, RectShape } from "@visx/legend";
+export { CircleShape, LineShape, RectShape };

package/dist/visx/text/index.cjs

@@ -1,12 +1,20 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-
-var _chunk7OZEQ5HEcjs = require('../../chunk-7OZEQ5HE.cjs');
-require('../../chunk-DZUJEN5N.cjs');
-
-
-
-
-exports.Text = _chunk7OZEQ5HEcjs.Text; exports.getStringWidth = _chunk7OZEQ5HEcjs.getStringWidth; exports.useText = _chunk7OZEQ5HEcjs.useText;
-//# sourceMappingURL=index.cjs.map
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _visx_text = require("@visx/text");
+Object.defineProperty(exports, "Text", {
+	enumerable: true,
+	get: function() {
+		return _visx_text.Text;
+	}
+});
+Object.defineProperty(exports, "getStringWidth", {
+	enumerable: true,
+	get: function() {
+		return _visx_text.getStringWidth;
+	}
+});
+Object.defineProperty(exports, "useText", {
+	enumerable: true,
+	get: function() {
+		return _visx_text.useText;
+	}
+});

package/dist/visx/text/index.d.cts

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

package/dist/visx/text/index.d.ts

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

package/dist/visx/text/index.js

@@ -1,12 +1,2 @@
-import {
-  Text,
-  getStringWidth,
-  useText
-} from "../../chunk-NFRB2POF.js";
-import "../../chunk-5WRI5ZAA.js";
-export {
-  Text,
-  getStringWidth,
-  useText
-};
-//# sourceMappingURL=index.js.map
+import { Text, getStringWidth, useText } from "@visx/text";
+export { Text, getStringWidth, useText };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.5.3",
+	"version": "1.7.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -56,35 +56,35 @@
 	},
 	"scripts": {
 		"build": "pnpm run build:prod",
-		"build:prod": "tsup",
+		"build:prod": "tsdown",
 		"storybook": "cd ../storybook && pnpm run storybook:dev",
 		"test": "TZ=UTC jest --config=tests/jest.config.cjs",
 		"test-coverage": "pnpm run test --coverage",
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.2.2",
-		"@babel/runtime": "7.29.2",
-		"@react-spring/web": "9.7.5",
-		"@visx/annotation": "^3.12.0",
-		"@visx/axis": "^3.12.0",
-		"@visx/curve": "^3.12.0",
-		"@visx/event": "^3.12.0",
-		"@visx/gradient": "^3.12.0",
-		"@visx/grid": "^3.12.0",
-		"@visx/group": "^3.12.0",
-		"@visx/legend": "^3.12.0",
-		"@visx/pattern": "^3.12.0",
-		"@visx/responsive": "^3.12.0",
-		"@visx/scale": "^3.12.0",
-		"@visx/shape": "^3.12.0",
-		"@visx/text": "^3.12.0",
-		"@visx/tooltip": "^3.12.0",
-		"@visx/vendor": "^3.12.0",
-		"@visx/xychart": "^3.12.0",
+		"@automattic/number-formatters": "^1.2.4",
+		"@babel/runtime": "7.29.7",
+		"@react-spring/web": "10.1.1",
+		"@visx/annotation": "^4.0.0",
+		"@visx/axis": "^4.0.0",
+		"@visx/curve": "^4.0.0",
+		"@visx/event": "^4.0.0",
+		"@visx/gradient": "^4.0.0",
+		"@visx/grid": "^4.0.0",
+		"@visx/group": "^4.0.0",
+		"@visx/legend": "^4.0.0",
+		"@visx/pattern": "^4.0.0",
+		"@visx/responsive": "^4.0.0",
+		"@visx/scale": "^4.0.0",
+		"@visx/shape": "^4.0.0",
+		"@visx/text": "^4.0.0",
+		"@visx/tooltip": "^4.0.0",
+		"@visx/vendor": "^4.0.0",
+		"@visx/xychart": "^4.0.0",
 		"@wordpress/i18n": "^6.0.0",
 		"@wordpress/icons": "^13.0.0",
-		"@wordpress/theme": "0.15.0",
+		"@wordpress/theme": "0.15.1",
 		"@wordpress/ui": "0.13.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
@@ -96,43 +96,37 @@
 	},
 	"devDependencies": {
 		"@automattic/jetpack-webpack-config": "workspace:*",
-		"@babel/core": "7.29.0",
-		"@babel/preset-react": "7.28.5",
-		"@babel/preset-typescript": "7.28.5",
+		"@babel/core": "^7.29.7",
 		"@storybook/addon-docs": "10.3.6",
 		"@storybook/react": "10.3.6",
 		"@testing-library/dom": "^10.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
 		"@testing-library/user-event": "^14.4.3",
+		"@tsdown/css": "0.22.2",
 		"@types/jest": "^30.0.0",
 		"@types/react": "18.3.28",
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260225.1",
-		"@visx/glyph": "3.12.0",
-		"@wordpress/components": "35.0.0",
-		"@wordpress/element": "8.0.0",
-		"@wordpress/private-apis": "1.48.0",
+		"@visx/glyph": "4.0.0",
+		"@wordpress/components": "35.0.1",
+		"@wordpress/element": "8.0.1",
+		"@wordpress/private-apis": "1.48.1",
 		"babel-jest": "30.4.1",
-		"babel-plugin-react-remove-properties": "^0.3.1",
-		"esbuild": "0.27.4",
-		"esbuild-plugin-babel": "^0.2.3",
-		"esbuild-sass-plugin": "^3.1.0",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.4.2",
 		"jest-extended": "7.0.0",
-		"postcss": "8.5.14",
-		"postcss-modules": "6.0.1",
+		"magic-string": "0.30.21",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.3",
 		"storybook": "10.3.6",
-		"tsup": "8.5.1",
+		"tsdown": "0.22.2",
 		"typescript": "5.9.3"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0 || ^18.0.0",
-		"react-dom": "^17.0.0 || ^18.0.0"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"engines": {
 		"node": ">=20.11.0"

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

@@ -1,6 +1,6 @@
 import type { BaseChartProps, DataPointDate, SeriesData } from '../../types';
+import type { RenderTooltipParams } from '../../visx/types';
 import type { CurveType } from '../line-chart/types';
-import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
 import type { ReactNode } from 'react';
 
 export interface AreaChartProps extends BaseChartProps< SeriesData[] > {

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

@@ -29,8 +29,8 @@ import { withResponsive } from '../private/with-responsive';
 import styles from './bar-chart.module.scss';
 import { useBarChartOptions } from './private';
 import type { BaseChartProps, DataPointDate, SeriesData, Optional } from '../../types';
+import type { RenderTooltipParams } from '../../visx/types';
 import type { ResponsiveConfig } from '../private/with-responsive';
-import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
 import type { FC, ReactNode, ComponentType } from 'react';
 
 export interface BarChartProps extends BaseChartProps< SeriesData[] > {

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

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { FC, useContext, useMemo } from 'react';
-import { Chart, type GoogleChartOptions } from 'react-google-charts';
+import { Chart } from 'react-google-charts';
 /**
  * Internal dependencies
  */
@@ -20,6 +20,8 @@ import { GeoChartProps } from './types';
 const DEFAULT_FEATURE_FILL_COLOR = '#ffffff';
 const DEFAULT_BACKGROUND_COLOR = '#ffffff';
 
+type GoogleChartOptions = Record< string, unknown >;
+
 /**
  * Renders a geographical chart using Google Charts GeoChart to visualize data.
  *

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

@@ -31,7 +31,7 @@
 	&.is-overlay {
 		grid-template: "overlap" 1fr / 1fr;
 
-		/* contains a single cell callded 'overlap' */
+		/* contains a single cell called 'overlap' */
 
 		>* {
 			grid-area: overlap;
@@ -45,6 +45,9 @@
 	.bar {
 		height: 100%;
 		min-height: 6px;
+		// Keeps a sliver of bar visible for tiny shares, and stops the interactive
+		// row's fixed-pixel hover inset from collapsing a narrow bar to nothing.
+		min-width: var(--wpds-dimension-size-5xs, 4px);
 
 		border-radius: var(--a8c--charts--leaderboard--bar--border-radius, 9999px);
 		z-index: -1; /* places it behind the label */
@@ -80,3 +83,112 @@
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: italic;
 }
+
+.interactiveRow {
+	--focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+
+	display: grid;
+	grid-column: 1 / -1;
+	grid-template-columns: subgrid;
+	align-items: center;
+	position: relative;
+
+	// Native button reset.
+	box-sizing: border-box;
+	appearance: none;
+	width: 100%;
+	margin: 0;
+	// Reserve a ring's worth of space on every edge so the inset focus outline
+	// hugs the row without the bar painting over it (see :focus-visible below).
+	padding: var(--focus-ring-width);
+	border: 0;
+	background: none;
+	color: inherit;
+	font: inherit;
+	text-align: inherit;
+	cursor: pointer;
+
+	// On hover/focus the bar dims and its inline-end edge pulls back while the
+	// value/delta slides toward the inline start to clear room for the chevron
+	// revealed at the inline-end edge. The value always slides the full inset
+	// (it must clear the chevron), but the bar pulls back in proportion to its
+	// length (see getBarWidth in leaderboard-chart.tsx): the full-length bar —
+	// the one that reaches the value — pulls back the whole inset to keep its
+	// gap, while shorter bars move proportionally less, down to ~0. The bar is
+	// a grid item aligned to the inline start, so its inset mirrors in RTL; the
+	// value slide is given an RTL override below. No row background.
+	.bar {
+		transition: opacity 0.15s ease, width 0.15s ease;
+	}
+
+	.valueContainer {
+		transition: transform 0.15s ease;
+	}
+
+	&:hover,
+	&:focus-visible {
+
+		// Fixed reserve for the chevron — the value slides by it in full, and the
+		// bar width inset (see leaderboard-chart.tsx) scales it by the bar's share.
+		--a8c--charts--leaderboard--bar--hover-inset: var(--wpds-dimension-gap-2xl, 32px);
+
+		.bar {
+			opacity: 0.5;
+		}
+
+		.valueContainer {
+			transform: translateX(calc(var(--a8c--charts--leaderboard--bar--hover-inset) * -1));
+		}
+
+		.chevron {
+			opacity: 1;
+		}
+	}
+
+	// In RTL the value slides toward the inline start the other way (rightward).
+	[dir="rtl"] &:hover .valueContainer,
+	[dir="rtl"] &:focus-visible .valueContainer {
+		transform: translateX(var(--a8c--charts--leaderboard--bar--hover-inset));
+	}
+
+	&:focus-visible {
+		border-radius: var(--wpds-border-radius-sm, 2px);
+		outline:
+			var(--focus-ring-width) solid
+			var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		// Inset by its own width so the outer edge hugs the row boundary: the
+		// outline then sits in the row's padding (also a ring width), clear of the
+		// bar, and stays inside the overflow:auto container that would clip an
+		// outset ring.
+		outline-offset: calc(-1 * var(--focus-ring-width));
+	}
+}
+
+.chevron {
+	position: absolute;
+	inset-inline-end: var(--wpds-dimension-padding-xs, 4px);
+	top: 0;
+	bottom: 0;
+	margin-block: auto;
+	opacity: 0;
+	color: var(--wpds-color-fg-content-neutral-weak, #707070);
+	transition: opacity 0.15s ease;
+	pointer-events: none;
+
+	// The glyph points toward the inline end, so flip it to point left in RTL.
+	[dir="rtl"] & {
+		transform: scaleX(-1);
+	}
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+
+	.interactiveRow {
+
+		.bar,
+		.valueContainer,
+		.chevron {
+			transition: none;
+		}
+	}
+}

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

@@ -2,6 +2,7 @@
 import { __experimentalGrid as Grid } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Icon, chevronRight } from '@wordpress/icons';
 import { Stack, Text } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useContext, useMemo, type FC } from 'react';
@@ -51,7 +52,20 @@ const defaultDeltaFormatter = ( value: number ): string => {
 	} );
 };
 
-const BarLabel = ( { label }: { label: string | JSX.Element } ) => (
+/**
+ * Build a bar's width. A hover-inset CSS variable (0 by default) is subtracted
+ * on hover, scaled by the bar's share so the pull-back is proportional to its
+ * length: the full-length (100%) bar — the one that reaches the value — pulls
+ * back the whole inset to keep its gap with the value, while shorter bars pull
+ * back proportionally less, down to ~0 for a very short bar.
+ *
+ * @param share - The bar's share of the row width, as a percentage.
+ * @return A CSS width value.
+ */
+const getBarWidth = ( share: number ): string =>
+	`calc(${ share }% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px) * ${ share } / 100)`;
+
+const BarLabel = ( { label }: { label: LeaderboardEntry[ 'label' ] } ) => (
 	<>{ typeof label === 'string' ? <Text className={ styles.label }>{ label }</Text> : label }</>
 );
 
@@ -87,7 +101,7 @@ const BarWithLabel = ( {
 					[ styles[ 'bar--animated' ] ]: animation,
 				} ) }
 				style={ {
-					width: entry.currentShare + '%',
+					width: getBarWidth( entry.currentShare ),
 					backgroundColor: primaryColor,
 				} }
 			></div>
@@ -99,7 +113,7 @@ const BarWithLabel = ( {
 					[ styles[ 'bar--animated' ] ]: animation,
 				} ) }
 				style={ {
-					width: entry.previousShare + '%',
+					width: getBarWidth( entry.previousShare ),
 					backgroundColor: secondaryColor,
 				} }
 			></div>
@@ -324,8 +338,8 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 								const colorIndex = Math.sign( entry.delta ) + 1;
 								const deltaColor = deltaColors[ colorIndex ];
 
-								return (
-									<Fragment key={ entry.id }>
+								const rowCells = (
+									<>
 										<Stack direction="column" gap={ labelSpacing }>
 											<BarWithLabel
 												entry={ entry }
@@ -354,8 +368,25 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 												</Text>
 											) }
 										</Stack>
-									</Fragment>
+									</>
 								);
+
+								if ( entry.onClick ) {
+									return (
+										<button
+											key={ entry.id }
+											type="button"
+											className={ styles.interactiveRow }
+											onClick={ entry.onClick }
+											aria-label={ entry.ariaLabel }
+										>
+											{ rowCells }
+											<Icon className={ styles.chevron } icon={ chevronRight } size={ 24 } />
+										</button>
+									);
+								}
+
+								return <Fragment key={ entry.id }>{ rowCells }</Fragment>;
 							} ) }
 						</Grid>
 					) }

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

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import LeaderboardChart from '../leaderboard-chart';
 import type { LeaderboardEntry } from '../../../types';
 
@@ -367,4 +368,84 @@ describe( 'LeaderboardChart', () => {
 			expect( chartContainer ).toHaveStyle( { width: '500px', height: '240px' } );
 		} );
 	} );
+
+	describe( 'Interactive items', () => {
+		it( 'renders a button for an entry with onClick', () => {
+			render( <LeaderboardChart data={ [ { ...mockData[ 0 ], onClick: jest.fn() } ] } /> );
+			expect( screen.getByRole( 'button' ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'button' ).tagName ).toBe( 'BUTTON' );
+		} );
+
+		it( 'calls onClick when the row is clicked', async () => {
+			const user = userEvent.setup();
+			const onClick = jest.fn();
+			render( <LeaderboardChart data={ [ { ...mockData[ 0 ], onClick } ] } /> );
+			await user.click( screen.getByRole( 'button' ) );
+			expect( onClick ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'activates onClick via the keyboard (Enter and Space)', async () => {
+			const user = userEvent.setup();
+			const onClick = jest.fn();
+			render( <LeaderboardChart data={ [ { ...mockData[ 0 ], onClick } ] } /> );
+
+			await user.tab();
+			expect( screen.getByRole( 'button' ) ).toHaveFocus();
+
+			await user.keyboard( '[Enter]' );
+			await user.keyboard( '[Space]' );
+			expect( onClick ).toHaveBeenCalledTimes( 2 );
+		} );
+
+		it( 'gives the interactive row an accessible name from the label and value', () => {
+			render( <LeaderboardChart data={ [ { ...mockData[ 0 ], onClick: jest.fn() } ] } /> );
+			// mockData[0] label is 'Direct', currentValue 12500 → '12.5K'
+			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName( /Direct.*12\.5K/ );
+		} );
+
+		it( 'derives the accessible name from an image label via its alt text', () => {
+			render(
+				<LeaderboardChart
+					data={ [
+						{
+							...mockData[ 0 ],
+							label: <img src="https://example.com/flag.svg" alt="United States" />,
+							onClick: jest.fn(),
+						},
+					] }
+				/>
+			);
+			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName( /United States.*12\.5K/ );
+		} );
+
+		it( 'uses ariaLabel as the accessible name when provided', () => {
+			render(
+				<LeaderboardChart
+					data={ [
+						{
+							...mockData[ 0 ],
+							label: <img src="https://example.com/flag.svg" alt="" />,
+							ariaLabel: 'United States: 12.5K visitors',
+							onClick: jest.fn(),
+						},
+					] }
+				/>
+			);
+			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName(
+				'United States: 12.5K visitors'
+			);
+		} );
+
+		it( 'does not render a button for entries without onClick', () => {
+			render( <LeaderboardChart data={ [ mockData[ 0 ] ] } /> );
+			expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'renders a button only for interactive entries in mixed data', () => {
+			render(
+				<LeaderboardChart data={ [ { ...mockData[ 0 ], onClick: jest.fn() }, mockData[ 1 ] ] } />
+			);
+			expect( screen.getAllByRole( 'button' ) ).toHaveLength( 1 );
+		} );
+	} );
 } );

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

@@ -42,10 +42,10 @@ import styles from './line-chart.module.scss';
 import { LineChartAnnotation, LineChartAnnotationsOverlay, LineChartGlyph } from './private';
 import type { RenderLineGlyphProps, LineChartProps, TooltipDatum } from './types';
 import type { DataPoint, DataPointDate, SeriesData, Optional } from '../../types';
+import type { RenderTooltipParams } from '../../visx/types';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { TickFormatter } from '@visx/axis';
 import type { GlyphProps } from '@visx/xychart';
-import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
 import type { FC, Ref } from 'react';
 
 const defaultRenderGlyph = < Datum extends object >( props: RenderLineGlyphProps< Datum > ) => {