From 48a54a7b4f9dd8d04dd2b6c056f8086e6adabea1 Mon Sep 17 00:00:00 2001 From: Mael Kerichard Date: Tue, 4 Nov 2025 10:05:00 +0000 Subject: [PATCH 1/4] feat(tooltip): add dismissTooltip callback to custom content renderers Add dismissTooltip callback function to tooltip content renderers (point, header, footer, body) allowing custom content to programmatically dismiss tooltips. This enables interactive elements like buttons within tooltips to close the tooltip when clicked. --- pages/03-core/core-line-chart.page.tsx | 8 +- .../__tests__/chart-core-tooltip.test.tsx | 189 ++++++++++++++++++ src/core/chart-api/index.tsx | 4 +- src/core/components/core-tooltip.tsx | 39 +++- src/core/interfaces.ts | 12 ++ src/pie-chart/chart-pie-internal.tsx | 2 +- 6 files changed, 242 insertions(+), 12 deletions(-) diff --git a/pages/03-core/core-line-chart.page.tsx b/pages/03-core/core-line-chart.page.tsx index a7d8bb6d..b255b905 100644 --- a/pages/03-core/core-line-chart.page.tsx +++ b/pages/03-core/core-line-chart.page.tsx @@ -122,18 +122,18 @@ export default function () { chartHeight={400} tooltip={{ placement: "outside" }} getTooltipContent={() => ({ - point({ item }) { + point({ item, dismissTooltip }) { const value = item ? (item.point.y ?? null) : null; return { value: (
- {numberFormatter(value)}
), }; }, - footer() { - return ; + footer({ dismissTooltip }) { + return ; }, })} getLegendTooltipContent={({ legendItem }) => ({ diff --git a/src/core/__tests__/chart-core-tooltip.test.tsx b/src/core/__tests__/chart-core-tooltip.test.tsx index 12bb13b3..4a1fb3ba 100644 --- a/src/core/__tests__/chart-core-tooltip.test.tsx +++ b/src/core/__tests__/chart-core-tooltip.test.tsx @@ -460,4 +460,193 @@ describe("CoreChart: tooltip", () => { expect(wrapper.findTooltip()!.findBody()!.getElement().textContent).toBe("[P3] [60] [custom key] [custom value]"); }); + + describe("dismissTooltip", () => { + test("provides dismissTooltip callback to header renderer", async () => { + let dismissCallback: (() => void) | undefined; + const { wrapper } = renderChart({ + highcharts, + options: { series: pieSeries }, + getTooltipContent: () => ({ + header: ({ dismissTooltip }) => { + dismissCallback = dismissTooltip; + return "Header with dismiss"; + }, + body: () => "Body", + }), + }); + + act(() => hc.highlightChartPoint(0, 0)); + + await waitFor(() => { + expect(wrapper.findTooltip()).not.toBe(null); + expect(dismissCallback).toBeDefined(); + }); + + act(() => { + dismissCallback!(); + hc.leaveChartPoint(0, 0); + }); + + await waitFor(() => { + expect(wrapper.findTooltip()).toBe(null); + }); + }); + + test("provides dismissTooltip callback to body renderer", async () => { + let dismissCallback: (() => void) | undefined; + const { wrapper } = renderChart({ + highcharts, + options: { series: lineSeries }, + getTooltipContent: () => ({ + header: () => "Header", + body: ({ dismissTooltip }) => { + dismissCallback = dismissTooltip; + return "Body with dismiss"; + }, + }), + }); + + act(() => hc.highlightChartPoint(0, 0)); + + await waitFor(() => { + expect(wrapper.findTooltip()).not.toBe(null); + expect(dismissCallback).toBeDefined(); + }); + + act(() => dismissCallback!()); + + await waitFor(() => { + expect(wrapper.findTooltip()).toBe(null); + }); + }); + + test("provides dismissTooltip callback to footer renderer", async () => { + let dismissCallback: (() => void) | undefined; + const { wrapper } = renderChart({ + highcharts, + options: { series: lineSeries }, + getTooltipContent: () => ({ + header: () => "Header", + body: () => "Body", + footer: ({ dismissTooltip }) => { + dismissCallback = dismissTooltip; + return "Footer with dismiss"; + }, + }), + }); + + act(() => hc.highlightChartPoint(0, 0)); + + await waitFor(() => { + expect(wrapper.findTooltip()).not.toBe(null); + expect(dismissCallback).toBeDefined(); + }); + + act(() => dismissCallback!()); + + await waitFor(() => { + expect(wrapper.findTooltip()).toBe(null); + }); + }); + + test("provides dismissTooltip callback to point renderer for cartesian charts", async () => { + let dismissCallback: (() => void) | undefined; + const { wrapper } = renderChart({ + highcharts, + options: { series: lineSeries }, + getTooltipContent: () => ({ + header: () => "Header", + point: ({ item, dismissTooltip }) => { + dismissCallback = dismissTooltip; + return { key: item.point.series.name, value: `${item.point.y}` }; + }, + }), + }); + + act(() => hc.highlightChartPoint(0, 0)); + + await waitFor(() => { + expect(wrapper.findTooltip()).not.toBe(null); + expect(dismissCallback).toBeDefined(); + }); + + act(() => dismissCallback!()); + + await waitFor(() => { + expect(wrapper.findTooltip()).toBe(null); + }); + }); + + test("provides dismissTooltip callback to details renderer for pie charts", async () => { + let dismissCallback: (() => void) | undefined; + const { wrapper } = renderChart({ + highcharts, + options: { series: pieSeries }, + getTooltipContent: () => ({ + header: () => "Header", + details: ({ point, dismissTooltip }) => { + dismissCallback = dismissTooltip; + return [{ key: point.name, value: `${point.y}` }]; + }, + }), + }); + + act(() => hc.highlightChartPoint(0, 0)); + + await waitFor(() => { + expect(wrapper.findTooltip()).not.toBe(null); + expect(dismissCallback).toBeDefined(); + }); + + act(() => { + dismissCallback!(); + hc.leaveChartPoint(0, 0); + }); + + await waitFor(() => { + expect(wrapper.findTooltip()).toBe(null); + }); + }); + + test("dismissTooltip callback works when tooltip is pinned", async () => { + let dismissCallback: (() => void) | undefined; + const { wrapper } = renderChart({ + highcharts, + options: { series: pieSeries }, + getTooltipContent: () => ({ + header: ({ dismissTooltip }) => { + dismissCallback = dismissTooltip; + return "Header"; + }, + body: () => "Body", + }), + }); + + act(() => hc.highlightChartPoint(0, 0)); + + await waitFor(() => { + expect(wrapper.findTooltip()).not.toBe(null); + expect(wrapper.findTooltip()!.findDismissButton()).toBe(null); + expect(dismissCallback).toBeDefined(); + }); + + // Pin tooltip + act(() => hc.clickChartPoint(0, 0)); + + await waitFor(() => { + expect(wrapper.findTooltip()).not.toBe(null); + expect(wrapper.findTooltip()!.findDismissButton()).not.toBe(null); + }); + + act(() => { + hc.leaveChartPoint(0, 0); + dismissCallback!(); + }); + + await waitFor(() => { + expect(wrapper.findTooltip()).toBe(null); + }); + }); + }); }); diff --git a/src/core/chart-api/index.tsx b/src/core/chart-api/index.tsx index f0056750..04ceb22b 100644 --- a/src/core/chart-api/index.tsx +++ b/src/core/chart-api/index.tsx @@ -169,9 +169,9 @@ export class ChartAPI { // Callbacks assigned to the tooltip. public onMouseEnterTooltip = this.chartExtraPointer.onMouseEnterTooltip.bind(this.chartExtraPointer); public onMouseLeaveTooltip = this.chartExtraPointer.onMouseLeaveTooltip.bind(this.chartExtraPointer); - public onDismissTooltip = (outsideClick?: boolean) => { + public onDismissTooltip = (outsideClick?: boolean, ignorePinned: boolean = false) => { const { pinned, point, group } = this.chartExtraTooltip.get(); - if (pinned) { + if (ignorePinned || pinned) { this.chartExtraTooltip.hideTooltip(); // The chart highlight is preserved while the tooltip is pinned. We need to clear it manually here, for the case // when the pointer lands outside the chart after the tooltip is dismissed, so that the mouse-out event won't fire. diff --git a/src/core/components/core-tooltip.tsx b/src/core/components/core-tooltip.tsx index 25ce55eb..555f95e2 100644 --- a/src/core/components/core-tooltip.tsx +++ b/src/core/components/core-tooltip.tsx @@ -70,6 +70,9 @@ export function ChartTooltip({ group: tooltip.group, expandedSeries, setExpandedSeries, + dismissTooltip: () => { + api.onDismissTooltip(false, true); + }, }); if (!content) { return null; @@ -117,6 +120,7 @@ function getTooltipContent( api: ChartAPI, props: CoreChartProps.GetTooltipContentProps & { renderers?: CoreChartProps.TooltipContentRenderer; + dismissTooltip: () => void; } & ExpandedSeriesStateProps, ): null | RenderedTooltipContent { if (props.point && props.point.series.type === "pie") { @@ -136,8 +140,10 @@ function getTooltipContentCartesian( expandedSeries, renderers = {}, setExpandedSeries, + dismissTooltip, }: CoreChartProps.GetTooltipContentProps & { renderers?: CoreChartProps.TooltipContentRenderer; + dismissTooltip: () => void; } & ExpandedSeriesStateProps, ): RenderedTooltipContent { // The cartesian tooltip might or might not have a selected point, but it always has a non-empty group. @@ -150,7 +156,12 @@ function getTooltipContentCartesian( const detailItems: ChartSeriesDetailItem[] = matchedItems.map((item) => { const valueFormatter = getFormatter(item.point.series.yAxis); const itemY = isXThreshold(item.point.series) ? null : (item.point.y ?? null); - const customContent = renderers.point ? renderers.point({ item }) : undefined; + const customContent = renderers.point + ? renderers.point({ + item, + dismissTooltip, + }) + : undefined; return { key: customContent?.key ?? item.point.series.name, value: customContent?.value ?? valueFormatter(itemY), @@ -177,7 +188,11 @@ function getTooltipContentCartesian( }); // We only support cartesian charts with a single x axis. const titleFormatter = getFormatter(chart.xAxis[0]); - const slotRenderProps: CoreChartProps.TooltipSlotProps = { x, items: matchedItems }; + const slotRenderProps: CoreChartProps.TooltipSlotProps = { + x, + items: matchedItems, + dismissTooltip, + }; return { header: renderers.header?.(slotRenderProps) ?? titleFormatter(x), body: renderers.body?.(slotRenderProps) ?? ( @@ -203,9 +218,17 @@ function getTooltipContentCartesian( function getTooltipContentPie( api: ChartAPI, - { point, renderers = {} }: { point: Highcharts.Point } & { renderers?: CoreChartProps.TooltipContentRenderer }, + { + point, + renderers = {}, + dismissTooltip, + }: { point: Highcharts.Point } & { renderers?: CoreChartProps.TooltipContentRenderer; dismissTooltip: () => void }, ): RenderedTooltipContent { - const tooltipDetails: CoreChartProps.TooltipSlotProps = { x: point.x, items: [{ point, errorRanges: [] }] }; + const tooltipDetails: CoreChartProps.TooltipSlotProps = { + x: point.x, + items: [{ point, errorRanges: [] }], + dismissTooltip, + }; return { header: renderers.header?.(tooltipDetails) ?? (
@@ -218,7 +241,13 @@ function getTooltipContentPie( body: renderers.body?.(tooltipDetails) ?? (renderers.details ? ( - + ) : ( // We expect all pie chart segments to have defined y values. We use y=0 as fallback // because the property is optional in Highcharts types. diff --git a/src/core/interfaces.ts b/src/core/interfaces.ts index e299768e..ebde9073 100644 --- a/src/core/interfaces.ts +++ b/src/core/interfaces.ts @@ -451,14 +451,26 @@ export namespace CoreChartProps { } export interface TooltipPointProps { item: TooltipContentItem; + /** + * Method used to dismiss the tooltip. + */ + dismissTooltip: () => void; } export interface TooltipSlotProps { x: number; items: TooltipContentItem[]; + /** + * Method used to dismiss the tooltip. + */ + dismissTooltip: () => void; } export interface TooltipDetailsProps { point: Highcharts.Point; + /** + * Method used to dismiss the tooltip. + */ + dismissTooltip: () => void; } export type TooltipDetail = BaseTooltipDetail; diff --git a/src/pie-chart/chart-pie-internal.tsx b/src/pie-chart/chart-pie-internal.tsx index 68c401f2..fa6093b7 100644 --- a/src/pie-chart/chart-pie-internal.tsx +++ b/src/pie-chart/chart-pie-internal.tsx @@ -73,7 +73,7 @@ export const InternalPieChart = forwardRef( }; const transformSlotProps = (props: CoreChartProps.TooltipSlotProps): PieChartProps.TooltipDetailsRenderProps => { const point = props.items[0].point; - return transformDetailsProps({ point }); + return transformDetailsProps({ point, dismissTooltip: props.dismissTooltip }); }; return { header: tooltip?.header ? (props) => tooltip.header!(transformSlotProps(props)) : undefined, From 0efd461c3fb409fd09ad89197065ee8b3d624b86 Mon Sep 17 00:00:00 2001 From: Mael Kerichard Date: Wed, 5 Nov 2025 13:05:36 +0000 Subject: [PATCH 2/4] refactor: rename dismissTooltip to hideTooltip in chart tooltip API - Rename dismissTooltip to hideTooltip in header, body, footer, and point tooltip renderers - Refactor tooltip tests to use parameterized tests (test.each) for both line and pie chart types, improving test maintainability --- pages/03-core/core-line-chart.page.tsx | 8 +- .../__tests__/chart-core-tooltip.test.tsx | 189 ++++++------------ src/core/__tests__/common.tsx | 3 +- src/core/chart-api/index.tsx | 12 +- src/core/components/core-tooltip.tsx | 22 +- src/core/interfaces.ts | 15 +- src/pie-chart/chart-pie-internal.tsx | 2 +- 7 files changed, 96 insertions(+), 155 deletions(-) diff --git a/pages/03-core/core-line-chart.page.tsx b/pages/03-core/core-line-chart.page.tsx index b255b905..7d0f70fb 100644 --- a/pages/03-core/core-line-chart.page.tsx +++ b/pages/03-core/core-line-chart.page.tsx @@ -122,18 +122,18 @@ export default function () { chartHeight={400} tooltip={{ placement: "outside" }} getTooltipContent={() => ({ - point({ item, dismissTooltip }) { + point({ item, hideTooltip }) { const value = item ? (item.point.y ?? null) : null; return { value: (
- {numberFormatter(value)}
), }; }, - footer({ dismissTooltip }) { - return ; + footer({ hideTooltip }) { + return ; }, })} getLegendTooltipContent={({ legendItem }) => ({ diff --git a/src/core/__tests__/chart-core-tooltip.test.tsx b/src/core/__tests__/chart-core-tooltip.test.tsx index 4a1fb3ba..e85ed5e8 100644 --- a/src/core/__tests__/chart-core-tooltip.test.tsx +++ b/src/core/__tests__/chart-core-tooltip.test.tsx @@ -6,8 +6,8 @@ import { waitFor } from "@testing-library/react"; import highcharts from "highcharts"; import { vi } from "vitest"; -import { CoreChartProps } from "../../../lib/components/core/interfaces"; import testClasses from "../../../lib/components/core/test-classes/styles.selectors"; +import { CoreChartProps } from "../../../lib/components/internal-do-not-use/core-chart"; import { createChartWrapper, renderChart } from "./common"; import { HighchartsTestHelper } from "./highcharts-utils"; @@ -462,146 +462,87 @@ describe("CoreChart: tooltip", () => { }); describe("dismissTooltip", () => { - test("provides dismissTooltip callback to header renderer", async () => { - let dismissCallback: (() => void) | undefined; - const { wrapper } = renderChart({ - highcharts, - options: { series: pieSeries }, - getTooltipContent: () => ({ - header: ({ dismissTooltip }) => { - dismissCallback = dismissTooltip; - return "Header with dismiss"; + test.each<{ + name: string; + series: highcharts.SeriesOptionsType[]; + getTooltipContent: () => CoreChartProps.GetTooltipContent; + }>( + [ + [lineSeries, "line"], + [pieSeries, "pie"], + ].flatMap(([series, type]) => { + return [ + { + name: `header renderer - ${type} chart`, + series, + getTooltipContent: () => ({ + body: () => "Body", + footer: () => "Footer", + header: ({ hideTooltip }) => { + return ( + + ); + }, + }), }, - body: () => "Body", - }), - }); - - act(() => hc.highlightChartPoint(0, 0)); - - await waitFor(() => { - expect(wrapper.findTooltip()).not.toBe(null); - expect(dismissCallback).toBeDefined(); - }); - - act(() => { - dismissCallback!(); - hc.leaveChartPoint(0, 0); - }); - - await waitFor(() => { - expect(wrapper.findTooltip()).toBe(null); - }); - }); - - test("provides dismissTooltip callback to body renderer", async () => { - let dismissCallback: (() => void) | undefined; - const { wrapper } = renderChart({ - highcharts, - options: { series: lineSeries }, - getTooltipContent: () => ({ - header: () => "Header", - body: ({ dismissTooltip }) => { - dismissCallback = dismissTooltip; - return "Body with dismiss"; + { + name: `body renderer - ${type} chart`, + series, + getTooltipContent: () => ({ + header: () => "Header", + footer: () => "Footer", + body: ({ hideTooltip }) => { + return ( + + ); + }, + }), }, - }), - }); - - act(() => hc.highlightChartPoint(0, 0)); - - await waitFor(() => { - expect(wrapper.findTooltip()).not.toBe(null); - expect(dismissCallback).toBeDefined(); - }); - - act(() => dismissCallback!()); - - await waitFor(() => { - expect(wrapper.findTooltip()).toBe(null); - }); - }); - - test("provides dismissTooltip callback to footer renderer", async () => { - let dismissCallback: (() => void) | undefined; - const { wrapper } = renderChart({ - highcharts, - options: { series: lineSeries }, - getTooltipContent: () => ({ - header: () => "Header", - body: () => "Body", - footer: ({ dismissTooltip }) => { - dismissCallback = dismissTooltip; - return "Footer with dismiss"; + { + name: `footer renderer - ${type} chart`, + series, + getTooltipContent: () => ({ + header: () => "Header", + body: () => "Body", + footer: ({ hideTooltip }) => { + return ( + + ); + }, + }), }, - }), - }); - - act(() => hc.highlightChartPoint(0, 0)); - - await waitFor(() => { - expect(wrapper.findTooltip()).not.toBe(null); - expect(dismissCallback).toBeDefined(); - }); - - act(() => dismissCallback!()); - - await waitFor(() => { - expect(wrapper.findTooltip()).toBe(null); - }); - }); - - test("provides dismissTooltip callback to point renderer for cartesian charts", async () => { - let dismissCallback: (() => void) | undefined; - const { wrapper } = renderChart({ + ]; + }), + )("provides dismissTooltip callback to $name", async ({ series, getTooltipContent }) => { + const { wrapper, getByTestId } = renderChart({ highcharts, - options: { series: lineSeries }, - getTooltipContent: () => ({ - header: () => "Header", - point: ({ item, dismissTooltip }) => { - dismissCallback = dismissTooltip; - return { key: item.point.series.name, value: `${item.point.y}` }; - }, - }), + options: { series }, + getTooltipContent: getTooltipContent, }); act(() => hc.highlightChartPoint(0, 0)); await waitFor(() => { expect(wrapper.findTooltip()).not.toBe(null); - expect(dismissCallback).toBeDefined(); - }); - - act(() => dismissCallback!()); - - await waitFor(() => { - expect(wrapper.findTooltip()).toBe(null); }); - }); - test("provides dismissTooltip callback to details renderer for pie charts", async () => { - let dismissCallback: (() => void) | undefined; - const { wrapper } = renderChart({ - highcharts, - options: { series: pieSeries }, - getTooltipContent: () => ({ - header: () => "Header", - details: ({ point, dismissTooltip }) => { - dismissCallback = dismissTooltip; - return [{ key: point.name, value: `${point.y}` }]; - }, - }), + act(() => { + hoverTooltip(); + hc.leaveChartPoint(0, 0); }); - act(() => hc.highlightChartPoint(0, 0)); - await waitFor(() => { expect(wrapper.findTooltip()).not.toBe(null); - expect(dismissCallback).toBeDefined(); }); act(() => { - dismissCallback!(); - hc.leaveChartPoint(0, 0); + getByTestId("hideTooltip").click(); }); await waitFor(() => { @@ -615,8 +556,8 @@ describe("CoreChart: tooltip", () => { highcharts, options: { series: pieSeries }, getTooltipContent: () => ({ - header: ({ dismissTooltip }) => { - dismissCallback = dismissTooltip; + header: ({ hideTooltip }) => { + dismissCallback = hideTooltip; return "Header"; }, body: () => "Body", diff --git a/src/core/__tests__/common.tsx b/src/core/__tests__/common.tsx index bf5bd025..d8337534 100644 --- a/src/core/__tests__/common.tsx +++ b/src/core/__tests__/common.tsx @@ -48,9 +48,10 @@ export function renderChart({ i18nProvider, ...props }: CoreChartTestProps, Comp ); }; - const { rerender } = render(); + const { rerender, getByTestId } = render(); return { wrapper: createChartWrapper(), + getByTestId, rerender: (props: CoreChartTestProps) => rerender(), }; } diff --git a/src/core/chart-api/index.tsx b/src/core/chart-api/index.tsx index 04ceb22b..95a0cbde 100644 --- a/src/core/chart-api/index.tsx +++ b/src/core/chart-api/index.tsx @@ -169,9 +169,9 @@ export class ChartAPI { // Callbacks assigned to the tooltip. public onMouseEnterTooltip = this.chartExtraPointer.onMouseEnterTooltip.bind(this.chartExtraPointer); public onMouseLeaveTooltip = this.chartExtraPointer.onMouseLeaveTooltip.bind(this.chartExtraPointer); - public onDismissTooltip = (outsideClick?: boolean, ignorePinned: boolean = false) => { + public onDismissTooltip = (outsideClick?: boolean) => { const { pinned, point, group } = this.chartExtraTooltip.get(); - if (ignorePinned || pinned) { + if (pinned) { this.chartExtraTooltip.hideTooltip(); // The chart highlight is preserved while the tooltip is pinned. We need to clear it manually here, for the case // when the pointer lands outside the chart after the tooltip is dismissed, so that the mouse-out event won't fire. @@ -184,6 +184,14 @@ export class ChartAPI { } }; + // Hide the tooltip from an action initiated by the tooltip's content + public hideTooltip = () => { + this.chartExtraTooltip.hideTooltip(); + // The chart highlight is preserved while the tooltip is pinned. We need to clear it manually here, for the case + // when the pointer lands outside the chart after the tooltip is dismissed, so that the mouse-out event won't fire. + this.clearChartHighlight({ isApiCall: false }); + }; + // Reference to the role="application" element used for navigation. public setApplication = this.chartExtraNavigation.setApplication.bind(this.chartExtraNavigation); diff --git a/src/core/components/core-tooltip.tsx b/src/core/components/core-tooltip.tsx index 555f95e2..f50cb5fa 100644 --- a/src/core/components/core-tooltip.tsx +++ b/src/core/components/core-tooltip.tsx @@ -70,8 +70,8 @@ export function ChartTooltip({ group: tooltip.group, expandedSeries, setExpandedSeries, - dismissTooltip: () => { - api.onDismissTooltip(false, true); + hideTooltip: () => { + api.hideTooltip(); }, }); if (!content) { @@ -120,7 +120,7 @@ function getTooltipContent( api: ChartAPI, props: CoreChartProps.GetTooltipContentProps & { renderers?: CoreChartProps.TooltipContentRenderer; - dismissTooltip: () => void; + hideTooltip: () => void; } & ExpandedSeriesStateProps, ): null | RenderedTooltipContent { if (props.point && props.point.series.type === "pie") { @@ -140,10 +140,10 @@ function getTooltipContentCartesian( expandedSeries, renderers = {}, setExpandedSeries, - dismissTooltip, + hideTooltip, }: CoreChartProps.GetTooltipContentProps & { renderers?: CoreChartProps.TooltipContentRenderer; - dismissTooltip: () => void; + hideTooltip: () => void; } & ExpandedSeriesStateProps, ): RenderedTooltipContent { // The cartesian tooltip might or might not have a selected point, but it always has a non-empty group. @@ -159,7 +159,7 @@ function getTooltipContentCartesian( const customContent = renderers.point ? renderers.point({ item, - dismissTooltip, + hideTooltip, }) : undefined; return { @@ -191,7 +191,7 @@ function getTooltipContentCartesian( const slotRenderProps: CoreChartProps.TooltipSlotProps = { x, items: matchedItems, - dismissTooltip, + hideTooltip: hideTooltip, }; return { header: renderers.header?.(slotRenderProps) ?? titleFormatter(x), @@ -221,13 +221,13 @@ function getTooltipContentPie( { point, renderers = {}, - dismissTooltip, - }: { point: Highcharts.Point } & { renderers?: CoreChartProps.TooltipContentRenderer; dismissTooltip: () => void }, + hideTooltip, + }: { point: Highcharts.Point } & { renderers?: CoreChartProps.TooltipContentRenderer; hideTooltip: () => void }, ): RenderedTooltipContent { const tooltipDetails: CoreChartProps.TooltipSlotProps = { x: point.x, items: [{ point, errorRanges: [] }], - dismissTooltip, + hideTooltip, }; return { header: renderers.header?.(tooltipDetails) ?? ( @@ -244,7 +244,7 @@ function getTooltipContentPie( diff --git a/src/core/interfaces.ts b/src/core/interfaces.ts index ebde9073..0d7c028f 100644 --- a/src/core/interfaces.ts +++ b/src/core/interfaces.ts @@ -451,26 +451,17 @@ export namespace CoreChartProps { } export interface TooltipPointProps { item: TooltipContentItem; - /** - * Method used to dismiss the tooltip. - */ - dismissTooltip: () => void; + hideTooltip: () => void; } export interface TooltipSlotProps { x: number; items: TooltipContentItem[]; - /** - * Method used to dismiss the tooltip. - */ - dismissTooltip: () => void; + hideTooltip: () => void; } export interface TooltipDetailsProps { point: Highcharts.Point; - /** - * Method used to dismiss the tooltip. - */ - dismissTooltip: () => void; + hideTooltip: () => void; } export type TooltipDetail = BaseTooltipDetail; diff --git a/src/pie-chart/chart-pie-internal.tsx b/src/pie-chart/chart-pie-internal.tsx index fa6093b7..8392f71c 100644 --- a/src/pie-chart/chart-pie-internal.tsx +++ b/src/pie-chart/chart-pie-internal.tsx @@ -73,7 +73,7 @@ export const InternalPieChart = forwardRef( }; const transformSlotProps = (props: CoreChartProps.TooltipSlotProps): PieChartProps.TooltipDetailsRenderProps => { const point = props.items[0].point; - return transformDetailsProps({ point, dismissTooltip: props.dismissTooltip }); + return transformDetailsProps({ point, hideTooltip: props.hideTooltip }); }; return { header: tooltip?.header ? (props) => tooltip.header!(transformSlotProps(props)) : undefined, From 79a4b93399d701e49e647c1f92f6236e242fb4a7 Mon Sep 17 00:00:00 2001 From: Mael Kerichard Date: Wed, 12 Nov 2025 13:24:05 +0000 Subject: [PATCH 3/4] chore: remove usage of getByTestId --- src/core/__tests__/chart-core-tooltip.test.tsx | 4 ++-- src/core/__tests__/common.tsx | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/core/__tests__/chart-core-tooltip.test.tsx b/src/core/__tests__/chart-core-tooltip.test.tsx index e85ed5e8..c7c06a68 100644 --- a/src/core/__tests__/chart-core-tooltip.test.tsx +++ b/src/core/__tests__/chart-core-tooltip.test.tsx @@ -520,7 +520,7 @@ describe("CoreChart: tooltip", () => { ]; }), )("provides dismissTooltip callback to $name", async ({ series, getTooltipContent }) => { - const { wrapper, getByTestId } = renderChart({ + const { wrapper } = renderChart({ highcharts, options: { series }, getTooltipContent: getTooltipContent, @@ -542,7 +542,7 @@ describe("CoreChart: tooltip", () => { }); act(() => { - getByTestId("hideTooltip").click(); + wrapper.findTooltip()!.find(`[data-testid="hideTooltip"]`).click(); }); await waitFor(() => { diff --git a/src/core/__tests__/common.tsx b/src/core/__tests__/common.tsx index d8337534..bf5bd025 100644 --- a/src/core/__tests__/common.tsx +++ b/src/core/__tests__/common.tsx @@ -48,10 +48,9 @@ export function renderChart({ i18nProvider, ...props }: CoreChartTestProps, Comp ); }; - const { rerender, getByTestId } = render(); + const { rerender } = render(); return { wrapper: createChartWrapper(), - getByTestId, rerender: (props: CoreChartTestProps) => rerender(), }; } From a17595a544267cd352768f648bb736dca3eecf43 Mon Sep 17 00:00:00 2001 From: Mael Kerichard Date: Thu, 13 Nov 2025 16:44:56 +0000 Subject: [PATCH 4/4] test: remove unneeded leaveChartPoint --- src/core/__tests__/chart-core-tooltip.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/core/__tests__/chart-core-tooltip.test.tsx b/src/core/__tests__/chart-core-tooltip.test.tsx index c7c06a68..2fe28bc2 100644 --- a/src/core/__tests__/chart-core-tooltip.test.tsx +++ b/src/core/__tests__/chart-core-tooltip.test.tsx @@ -534,7 +534,6 @@ describe("CoreChart: tooltip", () => { act(() => { hoverTooltip(); - hc.leaveChartPoint(0, 0); }); await waitFor(() => { @@ -581,7 +580,6 @@ describe("CoreChart: tooltip", () => { }); act(() => { - hc.leaveChartPoint(0, 0); dismissCallback!(); });