feat: Adds details renderer to core tooltip API

Author: pan-kot

src/core/components/core-tooltip.tsx

@@ -215,11 +215,15 @@ function getTooltipContentPie(
         </Box>
       </div>
     ),
-    body: renderers.body?.(tooltipDetails) ?? (
-      // 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.
-      <ChartSeriesDetails details={[{ key: point.series.name, value: point.y ?? 0 }]} />
-    ),
+    body:
+      renderers.body?.(tooltipDetails) ??
+      (renderers.details ? (
+        <ChartSeriesDetails details={renderers.details({ point })} compactList={true} />
+      ) : (
+        // 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.
+        <ChartSeriesDetails details={[{ key: point.series.name, value: point.y ?? 0 }]} />
+      )),
     footer: renderers.footer?.(tooltipDetails),
   };
 }

src/core/interfaces.ts

@@ -428,6 +428,7 @@ export namespace CoreChartProps {
   }
   export interface TooltipContentRenderer {
     point?: (props: TooltipPointProps) => TooltipPointFormatted;
+    details?: (props: TooltipDetailsProps) => readonly TooltipDetail[];
     header?: (props: TooltipSlotProps) => React.ReactNode;
     body?: (props: TooltipSlotProps) => React.ReactNode;
     footer?: (props: TooltipSlotProps) => React.ReactNode;
@@ -445,6 +446,15 @@ export namespace CoreChartProps {
     items: TooltipContentItem[];
   }
 
+  export interface TooltipDetailsProps {
+    point: Highcharts.Point;
+  }
+
+  export interface TooltipDetail {
+    key: React.ReactNode;
+    value: React.ReactNode;
+  }
+
   export interface LegendItemHighlightDetail {
     item: LegendItem;
   }

src/pie-chart/chart-pie-internal.tsx

@@ -12,7 +12,6 @@ import { CoreChartProps } from "../core/interfaces";
 import { getOptionsId } from "../core/utils";
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
 import * as Styles from "../internal/chart-styles";
-import ChartSeriesDetails from "../internal/components/series-details";
 import { fireNonCancelableEvent } from "../internal/events";
 import { SomeRequired, Writeable } from "../internal/utils/utils";
 import { useInnerArea } from "./chart-inner-area";
@@ -62,29 +61,24 @@ export const InternalPieChart = forwardRef(
     // We convert pie tooltip options to the core chart's getTooltipContent callback,
     // ensuring no internal types are exposed to the consumer-defined render functions.
     const getTooltipContent: CoreChartProps["getTooltipContent"] = () => {
-      const transformSlotProps = (props: CoreChartProps.TooltipSlotProps): PieChartProps.TooltipDetailsRenderProps => {
-        const point = props.items[0].point;
+      const transformDetailsProps = ({
+        point,
+      }: CoreChartProps.TooltipDetailsProps): PieChartProps.TooltipDetailsRenderProps => {
         return {
           totalValue: point.total ?? 0,
           segmentValue: point.y ?? 0,
           segmentId: getOptionsId(point.options),
           segmentName: point.name ?? "",
         };
       };
+      const transformSlotProps = (props: CoreChartProps.TooltipSlotProps): PieChartProps.TooltipDetailsRenderProps => {
+        const point = props.items[0].point;
+        return transformDetailsProps({ point });
+      };
       return {
         header: tooltip?.header ? (props) => tooltip.header!(transformSlotProps(props)) : undefined,
-        body:
-          tooltip?.body || tooltip?.details
-            ? (props) =>
-                tooltip.body ? (
-                  tooltip.body(transformSlotProps(props))
-                ) : (
-                  <ChartSeriesDetails
-                    details={tooltip?.details?.(transformSlotProps(props)) ?? []}
-                    compactList={true}
-                  />
-                )
-            : undefined,
+        details: tooltip?.details ? (props) => tooltip.details!(transformDetailsProps(props)) : undefined,
+        body: tooltip?.body ? (props) => tooltip.body!(transformSlotProps(props)) : undefined,
         footer: tooltip?.footer ? (props) => tooltip.footer!(transformSlotProps(props)) : undefined,
       };
     };