Summary

This fixes a bug that throws an error when react hooks are used inside of a customTooltipDetails component, under rare circumstances.

BREAKING CHANGE: The customTooltipDetails type is now passing details as props using a ComponentType.

- const OldPrompt = (details) => {
-   return <div>{details}</div>;
- };

+ const NewPrompt = (props) => {
+   return <div>{props.details}</div>;
+ };

 return (
   <Chart>
     <RectAnnotation
       id="annotation"
       dataValues={dataValues}
-      customTooltipDetails={OldPrompt}
+      customTooltipDetails={NewPrompt}
     />
   </Chart>
 );

Before

Throws error entering the LineAnnotation marker icon directly from a RectAnnotation, not from the outside.

After

Details

We were treating the customTooltipDetails option as a simple JSX.Element that somehow did not fully register the hooks inside when called as a function in JSX rather than a react component. The solution is to treat customTooltipDetails as a ComponentType instead.

Issues

Kibana issue elastic/kibana#149414

Checklist

• The proper chart type label has been added (e.g. :xy, :partition)
• The proper feature labels have been added (e.g. :interactions, :axis)
• All related issues have been linked (i.e. closes #123, fixes #123)
• New public API exports have been added to packages/charts/src/index.ts
• Unit tests have been added or updated to match the most common scenarios