@mui/x-charts 9.0.0-alpha.3 → 9.0.0-alpha.4

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -2,10 +2,12 @@
 'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsItemTooltipContent = ChartsItemTooltipContent;
+var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
@@ -13,6 +15,8 @@ var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _useItemTooltip = require("./useItemTooltip");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
 var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
+var _useStore = require("../internals/store/useStore");
+var _useChartSeriesConfig = require("../internals/plugins/corePlugins/useChartSeriesConfig");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsItemTooltipContent(props) {
   const {
@@ -20,10 +24,14 @@ function ChartsItemTooltipContent(props) {
     sx
   } = props;
   const tooltipData = (0, _useItemTooltip.useInternalItemTooltip)();
+  const store = (0, _useStore.useStore)();
+  const seriesConfig = store.use(_useChartSeriesConfig.selectorChartSeriesConfig);
   const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
   if (!tooltipData) {
     return null;
   }
+  const config = seriesConfig[tooltipData.identifier.type];
+  const ItemTooltipContent = config && 'ItemTooltipContent' in config ? config.ItemTooltipContent : null;
   if ('values' in tooltipData) {
     const {
       label: seriesLabel,
@@ -31,6 +39,7 @@ function ChartsItemTooltipContent(props) {
       markType,
       markShape
     } = tooltipData;
+    const Content = ItemTooltipContent ?? DefaultMultipleValueContent;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
       sx: sx,
       className: classes.paper,
@@ -48,62 +57,89 @@ function ChartsItemTooltipContent(props) {
             })
           }), seriesLabel]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
-          children: tooltipData.values.map(({
-            formattedValue,
-            label
-          }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
-            className: classes.row,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-              className: (0, _clsx.default)(classes.labelCell, classes.cell),
-              component: "th",
-              children: label
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-              className: (0, _clsx.default)(classes.valueCell, classes.cell),
-              component: "td",
-              children: formattedValue
-            })]
-          }, label))
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+            classes: propClasses,
+            item: tooltipData
+          })
         })]
       })
     });
   }
-  const {
-    color,
-    label,
-    formattedValue,
-    markType,
-    markShape
-  } = tooltipData;
+  const Content = ItemTooltipContent ?? DefaultSingleValueContent;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
     sx: sx,
     className: classes.paper,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipTable, {
       className: classes.table,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
-          className: classes.row,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: (0, _clsx.default)(classes.labelCell, classes.cell),
-            component: "th",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: classes.markContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
-                type: markType,
-                markShape: markShape,
-                color: color,
-                className: classes.mark
-              })
-            }), label]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: (0, _clsx.default)(classes.valueCell, classes.cell),
-            component: "td",
-            children: formattedValue
-          })]
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+          classes: propClasses,
+          item:
+          /* TypeScript can't guarantee that the item's series type is the same as the Content's series type,
+           * so we need to cast */
+          tooltipData
         })
       })
     })
   });
 }
+function DefaultMultipleValueContent({
+  classes: propClasses,
+  item
+}) {
+  const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: item.values.map(value => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+      className: classes.row,
+      "data-series": item.identifier.seriesId,
+      "data-index": item.identifier.dataIndex,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+        className: (0, _clsx.default)(classes.labelCell, classes.cell),
+        component: "th",
+        children: value.label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+        className: (0, _clsx.default)(classes.valueCell, classes.cell),
+        component: "td",
+        children: value.formattedValue
+      })]
+    }, value.label))
+  });
+}
+function DefaultSingleValueContent({
+  classes: propClasses,
+  item
+}) {
+  const {
+    color,
+    label,
+    formattedValue,
+    markType,
+    markShape
+  } = item;
+  const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+    className: classes.row,
+    "data-series": item.identifier.seriesId,
+    "data-index": 'dataIndex' in item.identifier ? item.identifier.dataIndex : undefined,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipCell, {
+      className: (0, _clsx.default)(classes.labelCell, classes.cell),
+      component: "th",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes.markContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+          type: markType,
+          markShape: markShape,
+          color: color,
+          className: classes.mark
+        })
+      }), label]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+      className: (0, _clsx.default)(classes.valueCell, classes.cell),
+      component: "td",
+      children: formattedValue
+    })]
+  });
+}
 process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/ChartsTooltip/ChartsItemTooltipContent.mjs

@@ -1,5 +1,6 @@
 'use client';
 
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
@@ -7,6 +8,8 @@ import { useUtilityClasses } from "./chartsTooltipClasses.mjs";
 import { useInternalItemTooltip } from "./useItemTooltip.mjs";
 import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.mjs";
 import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.mjs";
+import { useStore } from "../internals/store/useStore.mjs";
+import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ChartsItemTooltipContent(props) {
   const {
@@ -14,10 +17,14 @@ function ChartsItemTooltipContent(props) {
     sx
   } = props;
   const tooltipData = useInternalItemTooltip();
+  const store = useStore();
+  const seriesConfig = store.use(selectorChartSeriesConfig);
   const classes = useUtilityClasses(propClasses);
   if (!tooltipData) {
     return null;
   }
+  const config = seriesConfig[tooltipData.identifier.type];
+  const ItemTooltipContent = config && 'ItemTooltipContent' in config ? config.ItemTooltipContent : null;
   if ('values' in tooltipData) {
     const {
       label: seriesLabel,
@@ -25,6 +32,7 @@ function ChartsItemTooltipContent(props) {
       markType,
       markShape
     } = tooltipData;
+    const Content = ItemTooltipContent ?? DefaultMultipleValueContent;
     return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
       sx: sx,
       className: classes.paper,
@@ -42,62 +50,89 @@ function ChartsItemTooltipContent(props) {
             })
           }), seriesLabel]
         }), /*#__PURE__*/_jsx("tbody", {
-          children: tooltipData.values.map(({
-            formattedValue,
-            label
-          }) => /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-            className: classes.row,
-            children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: clsx(classes.labelCell, classes.cell),
-              component: "th",
-              children: label
-            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: clsx(classes.valueCell, classes.cell),
-              component: "td",
-              children: formattedValue
-            })]
-          }, label))
+          children: /*#__PURE__*/_jsx(Content, {
+            classes: propClasses,
+            item: tooltipData
+          })
         })]
       })
     });
   }
-  const {
-    color,
-    label,
-    formattedValue,
-    markType,
-    markShape
-  } = tooltipData;
+  const Content = ItemTooltipContent ?? DefaultSingleValueContent;
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
     className: classes.paper,
     children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
       className: classes.table,
       children: /*#__PURE__*/_jsx("tbody", {
-        children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-          className: classes.row,
-          children: [/*#__PURE__*/_jsxs(ChartsTooltipCell, {
-            className: clsx(classes.labelCell, classes.cell),
-            component: "th",
-            children: [/*#__PURE__*/_jsx("div", {
-              className: classes.markContainer,
-              children: /*#__PURE__*/_jsx(ChartsLabelMark, {
-                type: markType,
-                markShape: markShape,
-                color: color,
-                className: classes.mark
-              })
-            }), label]
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes.valueCell, classes.cell),
-            component: "td",
-            children: formattedValue
-          })]
+        children: /*#__PURE__*/_jsx(Content, {
+          classes: propClasses,
+          item:
+          /* TypeScript can't guarantee that the item's series type is the same as the Content's series type,
+           * so we need to cast */
+          tooltipData
         })
       })
     })
   });
 }
+function DefaultMultipleValueContent({
+  classes: propClasses,
+  item
+}) {
+  const classes = useUtilityClasses(propClasses);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: item.values.map(value => /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+      className: classes.row,
+      "data-series": item.identifier.seriesId,
+      "data-index": item.identifier.dataIndex,
+      children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
+        className: clsx(classes.labelCell, classes.cell),
+        component: "th",
+        children: value.label
+      }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+        className: clsx(classes.valueCell, classes.cell),
+        component: "td",
+        children: value.formattedValue
+      })]
+    }, value.label))
+  });
+}
+function DefaultSingleValueContent({
+  classes: propClasses,
+  item
+}) {
+  const {
+    color,
+    label,
+    formattedValue,
+    markType,
+    markShape
+  } = item;
+  const classes = useUtilityClasses(propClasses);
+  return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+    className: classes.row,
+    "data-series": item.identifier.seriesId,
+    "data-index": 'dataIndex' in item.identifier ? item.identifier.dataIndex : undefined,
+    children: [/*#__PURE__*/_jsxs(ChartsTooltipCell, {
+      className: clsx(classes.labelCell, classes.cell),
+      component: "th",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: classes.markContainer,
+        children: /*#__PURE__*/_jsx(ChartsLabelMark, {
+          type: markType,
+          markShape: markShape,
+          color: color,
+          className: classes.mark
+        })
+      }), label]
+    }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+      className: clsx(classes.valueCell, classes.cell),
+      component: "td",
+      children: formattedValue
+    })]
+  });
+}
 process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -220,7 +220,11 @@ function ChartsTooltipContainer(inProps) {
         placement: other.placement ?? position ?? (!isTooltipNodeAnchored && isMouse ? 'right-start' : 'top'),
         popperRef: popperRef,
         anchorEl: itemPosition ? anchorRef.current : pointerAnchorEl,
-        modifiers: modifiers
+        modifiers: modifiers,
+        container: chartsLayerContainerRef.current,
+        popperOptions: (0, _extends2.default)({}, other.popperOptions, {
+          strategy: 'fixed'
+        })
       }), children)
     })]
   });

package/ChartsTooltip/ChartsTooltipContainer.mjs

@@ -213,7 +213,11 @@ function ChartsTooltipContainer(inProps) {
         placement: other.placement ?? position ?? (!isTooltipNodeAnchored && isMouse ? 'right-start' : 'top'),
         popperRef: popperRef,
         anchorEl: itemPosition ? anchorRef.current : pointerAnchorEl,
-        modifiers: modifiers
+        modifiers: modifiers,
+        container: chartsLayerContainerRef.current,
+        popperOptions: _extends({}, other.popperOptions, {
+          strategy: 'fixed'
+        })
       }), children)
     })]
   });

package/ChartsTooltip/index.d.mts

@@ -1,7 +1,7 @@
 export * from "./ChartsTooltip.mjs";
 export * from "./ChartsTooltipContainer.mjs";
 export type { ChartsTooltipClasses, ChartsTooltipClassKey } from "./chartsTooltipClasses.mjs";
-export { getChartsTooltipUtilityClass, chartsTooltipClasses } from "./chartsTooltipClasses.mjs";
+export { chartsTooltipClasses } from "./chartsTooltipClasses.mjs";
 export * from "./ChartsAxisTooltipContent.mjs";
 export * from "./ChartsItemTooltipContent.mjs";
 export * from "./ChartsTooltipTable.mjs";
@@ -9,5 +9,4 @@ export type { ItemTooltip } from "../internals/plugins/corePlugins/useChartSerie
 export type { UseItemTooltipReturnValue, UseRadarItemTooltipReturnValue } from "./useItemTooltip.mjs";
 export { useItemTooltip, useRadarItemTooltip } from "./useItemTooltip.mjs";
 export * from "./useAxesTooltip.mjs";
-export { useMouseTracker } from "./utils.mjs";
 export * from "./ChartTooltip.types.mjs";

package/ChartsTooltip/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./ChartsTooltip.js";
 export * from "./ChartsTooltipContainer.js";
 export type { ChartsTooltipClasses, ChartsTooltipClassKey } from "./chartsTooltipClasses.js";
-export { getChartsTooltipUtilityClass, chartsTooltipClasses } from "./chartsTooltipClasses.js";
+export { chartsTooltipClasses } from "./chartsTooltipClasses.js";
 export * from "./ChartsAxisTooltipContent.js";
 export * from "./ChartsItemTooltipContent.js";
 export * from "./ChartsTooltipTable.js";
@@ -9,5 +9,4 @@ export type { ItemTooltip } from "../internals/plugins/corePlugins/useChartSerie
 export type { UseItemTooltipReturnValue, UseRadarItemTooltipReturnValue } from "./useItemTooltip.js";
 export { useItemTooltip, useRadarItemTooltip } from "./useItemTooltip.js";
 export * from "./useAxesTooltip.js";
-export { useMouseTracker } from "./utils.js";
 export * from "./ChartTooltip.types.js";

package/ChartsTooltip/index.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  getChartsTooltipUtilityClass: true,
   chartsTooltipClasses: true,
   useItemTooltip: true,
-  useRadarItemTooltip: true,
-  useMouseTracker: true
+  useRadarItemTooltip: true
 };
 Object.defineProperty(exports, "chartsTooltipClasses", {
   enumerable: true,
@@ -16,24 +14,12 @@ Object.defineProperty(exports, "chartsTooltipClasses", {
     return _chartsTooltipClasses.chartsTooltipClasses;
   }
 });
-Object.defineProperty(exports, "getChartsTooltipUtilityClass", {
-  enumerable: true,
-  get: function () {
-    return _chartsTooltipClasses.getChartsTooltipUtilityClass;
-  }
-});
 Object.defineProperty(exports, "useItemTooltip", {
   enumerable: true,
   get: function () {
     return _useItemTooltip.useItemTooltip;
   }
 });
-Object.defineProperty(exports, "useMouseTracker", {
-  enumerable: true,
-  get: function () {
-    return _utils.useMouseTracker;
-  }
-});
 Object.defineProperty(exports, "useRadarItemTooltip", {
   enumerable: true,
   get: function () {
@@ -114,7 +100,6 @@ Object.keys(_useAxesTooltip).forEach(function (key) {
     }
   });
 });
-var _utils = require("./utils");
 var _ChartTooltip = require("./ChartTooltip.types");
 Object.keys(_ChartTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/ChartsTooltip/index.mjs

@@ -1,10 +1,9 @@
 export * from "./ChartsTooltip.mjs";
 export * from "./ChartsTooltipContainer.mjs";
-export { getChartsTooltipUtilityClass, chartsTooltipClasses } from "./chartsTooltipClasses.mjs";
+export { chartsTooltipClasses } from "./chartsTooltipClasses.mjs";
 export * from "./ChartsAxisTooltipContent.mjs";
 export * from "./ChartsItemTooltipContent.mjs";
 export * from "./ChartsTooltipTable.mjs";
 export { useItemTooltip, useRadarItemTooltip } from "./useItemTooltip.mjs";
 export * from "./useAxesTooltip.mjs";
-export { useMouseTracker } from "./utils.mjs";
 export * from "./ChartTooltip.types.mjs";

package/ChartsTooltip/useAxesTooltip.d.mts

@@ -18,7 +18,7 @@ export interface UseAxesTooltipParams {
    */
   directions?: ('x' | 'y' | 'rotation')[];
 }
-interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
+export interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
   seriesId: SeriesId;
   color: string;
   value: ChartsSeriesConfig[T]['valueType'];
@@ -30,5 +30,4 @@ interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType>
 /**
  * Returns the axes to display in the tooltip and the series item related to them.
  */
-export declare function useAxesTooltip(params?: UseAxesTooltipParams): UseAxesTooltipReturnValue[] | null;
-export {};
+export declare function useAxesTooltip(params?: UseAxesTooltipParams): UseAxesTooltipReturnValue[] | null;

package/ChartsTooltip/useAxesTooltip.d.ts

@@ -18,7 +18,7 @@ export interface UseAxesTooltipParams {
    */
   directions?: ('x' | 'y' | 'rotation')[];
 }
-interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
+export interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
   seriesId: SeriesId;
   color: string;
   value: ChartsSeriesConfig[T]['valueType'];
@@ -30,5 +30,4 @@ interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType>
 /**
  * Returns the axes to display in the tooltip and the series item related to them.
  */
-export declare function useAxesTooltip(params?: UseAxesTooltipParams): UseAxesTooltipReturnValue[] | null;
-export {};
+export declare function useAxesTooltip(params?: UseAxesTooltipParams): UseAxesTooltipReturnValue[] | null;

package/ChartsTooltip/useItemTooltip.d.mts

@@ -1,10 +1,8 @@
 import { type ChartSeriesType } from "../models/seriesType/config.mjs";
 import { type ItemTooltip, type ItemTooltipWithMultipleValues } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
-export type UseItemTooltipReturnValue<SeriesType extends ChartSeriesType> = SeriesType extends 'heatmap' ? Omit<ItemTooltip<SeriesType>, 'value'> & {
-  value: number | null;
-} : ItemTooltip<SeriesType>;
+export type UseItemTooltipReturnValue<SeriesType extends ChartSeriesType> = ItemTooltip<SeriesType>;
 export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;
-export declare function useInternalItemTooltip<SeriesType extends ChartSeriesType>(): (SeriesType extends 'radar' ? ItemTooltipWithMultipleValues<SeriesType> : UseItemTooltipReturnValue<SeriesType>) | null;
+export declare function useInternalItemTooltip<SeriesType extends ChartSeriesType>(): (SeriesType extends 'radar' ? ItemTooltipWithMultipleValues<SeriesType> : ItemTooltip<SeriesType>) | null;
 /**
  * Returns a config object when the tooltip contains a single item to display.
  * Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.

package/ChartsTooltip/useItemTooltip.d.ts

@@ -1,10 +1,8 @@
 import { type ChartSeriesType } from "../models/seriesType/config.js";
 import { type ItemTooltip, type ItemTooltipWithMultipleValues } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
-export type UseItemTooltipReturnValue<SeriesType extends ChartSeriesType> = SeriesType extends 'heatmap' ? Omit<ItemTooltip<SeriesType>, 'value'> & {
-  value: number | null;
-} : ItemTooltip<SeriesType>;
+export type UseItemTooltipReturnValue<SeriesType extends ChartSeriesType> = ItemTooltip<SeriesType>;
 export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;
-export declare function useInternalItemTooltip<SeriesType extends ChartSeriesType>(): (SeriesType extends 'radar' ? ItemTooltipWithMultipleValues<SeriesType> : UseItemTooltipReturnValue<SeriesType>) | null;
+export declare function useInternalItemTooltip<SeriesType extends ChartSeriesType>(): (SeriesType extends 'radar' ? ItemTooltipWithMultipleValues<SeriesType> : ItemTooltip<SeriesType>) | null;
 /**
  * Returns a config object when the tooltip contains a single item to display.
  * Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.

package/ChartsTooltip/utils.d.mts

@@ -5,10 +5,6 @@ type MousePosition = {
   height: number;
 };
 export type UseMouseTrackerReturnValue = null | MousePosition;
-/**
- * @deprecated We recommend using vanilla JS to let popper track mouse position.
- */
-export declare function useMouseTracker(): UseMouseTrackerReturnValue;
 export type TriggerOptions = 'item' | 'axis' | 'none';
 export declare function utcFormatter(v: string | number | Date): string;
 /**

package/ChartsTooltip/utils.d.ts

@@ -5,10 +5,6 @@ type MousePosition = {
   height: number;
 };
 export type UseMouseTrackerReturnValue = null | MousePosition;
-/**
- * @deprecated We recommend using vanilla JS to let popper track mouse position.
- */
-export declare function useMouseTracker(): UseMouseTrackerReturnValue;
 export type TriggerOptions = 'item' | 'axis' | 'none';
 export declare function utcFormatter(v: string | number | Date): string;
 /**

package/ChartsTooltip/utils.js

@@ -1,51 +1,12 @@
 "use strict";
-'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useIsFineMainPointer = void 0;
-exports.useMouseTracker = useMouseTracker;
 exports.utcFormatter = utcFormatter;
-var React = _interopRequireWildcard(require("react"));
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
-var _ChartProvider = require("../context/ChartProvider");
-/**
- * @deprecated We recommend using vanilla JS to let popper track mouse position.
- */
-function useMouseTracker() {
-  const {
-    instance
-  } = (0, _ChartProvider.useChartContext)();
-
-  // Use a ref to avoid rerendering on every mousemove event.
-  const [mousePosition, setMousePosition] = React.useState(null);
-  React.useEffect(() => {
-    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
-      if (!event.detail.activeGestures.pan) {
-        setMousePosition(null);
-      }
-    });
-    const gestureHandler = event => {
-      setMousePosition({
-        x: event.detail.centroid.x,
-        y: event.detail.centroid.y,
-        height: event.detail.srcEvent.height,
-        pointerType: event.detail.srcEvent.pointerType
-      });
-    };
-    const moveHandler = instance.addInteractionListener('move', gestureHandler);
-    const panHandler = instance.addInteractionListener('pan', gestureHandler);
-    return () => {
-      moveHandler.cleanup();
-      panHandler.cleanup();
-      moveEndHandler.cleanup();
-    };
-  }, [instance]);
-  return mousePosition;
-}
 function utcFormatter(v) {
   if (v instanceof Date) {
     return v.toUTCString();

package/ChartsTooltip/utils.mjs

@@ -1,42 +1,4 @@
-'use client';
-
-import * as React from 'react';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useChartContext } from "../context/ChartProvider/index.mjs";
-/**
- * @deprecated We recommend using vanilla JS to let popper track mouse position.
- */
-export function useMouseTracker() {
-  const {
-    instance
-  } = useChartContext();
-
-  // Use a ref to avoid rerendering on every mousemove event.
-  const [mousePosition, setMousePosition] = React.useState(null);
-  React.useEffect(() => {
-    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
-      if (!event.detail.activeGestures.pan) {
-        setMousePosition(null);
-      }
-    });
-    const gestureHandler = event => {
-      setMousePosition({
-        x: event.detail.centroid.x,
-        y: event.detail.centroid.y,
-        height: event.detail.srcEvent.height,
-        pointerType: event.detail.srcEvent.pointerType
-      });
-    };
-    const moveHandler = instance.addInteractionListener('move', gestureHandler);
-    const panHandler = instance.addInteractionListener('pan', gestureHandler);
-    return () => {
-      moveHandler.cleanup();
-      panHandler.cleanup();
-      moveEndHandler.cleanup();
-    };
-  }, [instance]);
-  return mousePosition;
-}
 export function utcFormatter(v) {
   if (v instanceof Date) {
     return v.toUTCString();

package/ChartsXAxis/ChartsGroupedXAxisTicks.js

@@ -11,7 +11,7 @@ var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/form
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _scaleGuards = require("../internals/scaleGuards");
-var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _useChartsContext = require("../context/ChartsProvider/useChartsContext");
 var _utilities = require("./utilities");
 var _useTicksGrouped = require("../hooks/useTicksGrouped");
 var _useAxisTicksProps = require("./useAxisTicksProps");
@@ -56,7 +56,7 @@ function ChartsGroupedXAxisTicks(inProps) {
   const groups = defaultizedProps.groups;
   const {
     instance
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
   const xTicks = (0, _useTicksGrouped.useTicksGrouped)({
     scale: xScale,
     tickNumber,