@mui/x-charts 8.5.3 → 8.7.0

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.5.3
+ * @mui/x-charts v8.7.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -10,9 +10,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  ChartContainer: true
+};
+Object.defineProperty(exports, "ChartContainer", {
+  enumerable: true,
+  get: function () {
+    return _ChartContainer.ChartContainer;
+  }
+});
 var _constants = require("./constants");
 Object.keys(_constants).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _constants[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -24,6 +34,7 @@ Object.keys(_constants).forEach(function (key) {
 var _context = require("./context");
 Object.keys(_context).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _context[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -35,6 +46,7 @@ Object.keys(_context).forEach(function (key) {
 var _hooks = require("./hooks");
 Object.keys(_hooks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _hooks[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -46,6 +58,7 @@ Object.keys(_hooks).forEach(function (key) {
 var _colorPalettes = require("./colorPalettes");
 Object.keys(_colorPalettes).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _colorPalettes[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -57,6 +70,7 @@ Object.keys(_colorPalettes).forEach(function (key) {
 var _models = require("./models");
 Object.keys(_models).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _models[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -68,6 +82,7 @@ Object.keys(_models).forEach(function (key) {
 var _ChartsClipPath = require("./ChartsClipPath");
 Object.keys(_ChartsClipPath).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsClipPath[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -79,6 +94,7 @@ Object.keys(_ChartsClipPath).forEach(function (key) {
 var _ChartsReferenceLine = require("./ChartsReferenceLine");
 Object.keys(_ChartsReferenceLine).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsReferenceLine[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -90,6 +106,7 @@ Object.keys(_ChartsReferenceLine).forEach(function (key) {
 var _ChartsAxis = require("./ChartsAxis");
 Object.keys(_ChartsAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -101,6 +118,7 @@ Object.keys(_ChartsAxis).forEach(function (key) {
 var _ChartsXAxis = require("./ChartsXAxis");
 Object.keys(_ChartsXAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsXAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -112,6 +130,7 @@ Object.keys(_ChartsXAxis).forEach(function (key) {
 var _ChartsYAxis = require("./ChartsYAxis");
 Object.keys(_ChartsYAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsYAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -123,6 +142,7 @@ Object.keys(_ChartsYAxis).forEach(function (key) {
 var _ChartsGrid = require("./ChartsGrid");
 Object.keys(_ChartsGrid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsGrid[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -134,6 +154,7 @@ Object.keys(_ChartsGrid).forEach(function (key) {
 var _ChartsText = require("./ChartsText");
 Object.keys(_ChartsText).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsText[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -145,6 +166,7 @@ Object.keys(_ChartsText).forEach(function (key) {
 var _ChartsTooltip = require("./ChartsTooltip");
 Object.keys(_ChartsTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsTooltip[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -156,6 +178,7 @@ Object.keys(_ChartsTooltip).forEach(function (key) {
 var _ChartsLabel = require("./ChartsLabel");
 Object.keys(_ChartsLabel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsLabel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -167,6 +190,7 @@ Object.keys(_ChartsLabel).forEach(function (key) {
 var _ChartsLegend = require("./ChartsLegend");
 Object.keys(_ChartsLegend).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsLegend[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -178,6 +202,7 @@ Object.keys(_ChartsLegend).forEach(function (key) {
 var _ChartsLocalizationProvider = require("./ChartsLocalizationProvider");
 Object.keys(_ChartsLocalizationProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsLocalizationProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -189,6 +214,7 @@ Object.keys(_ChartsLocalizationProvider).forEach(function (key) {
 var _ChartsAxisHighlight = require("./ChartsAxisHighlight");
 Object.keys(_ChartsAxisHighlight).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsAxisHighlight[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -200,6 +226,7 @@ Object.keys(_ChartsAxisHighlight).forEach(function (key) {
 var _BarChart = require("./BarChart");
 Object.keys(_BarChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _BarChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -211,6 +238,7 @@ Object.keys(_BarChart).forEach(function (key) {
 var _LineChart = require("./LineChart");
 Object.keys(_LineChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _LineChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -222,6 +250,7 @@ Object.keys(_LineChart).forEach(function (key) {
 var _PieChart = require("./PieChart");
 Object.keys(_PieChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PieChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -233,6 +262,7 @@ Object.keys(_PieChart).forEach(function (key) {
 var _ScatterChart = require("./ScatterChart");
 Object.keys(_ScatterChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScatterChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -244,6 +274,7 @@ Object.keys(_ScatterChart).forEach(function (key) {
 var _SparkLineChart = require("./SparkLineChart");
 Object.keys(_SparkLineChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _SparkLineChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -255,6 +286,7 @@ Object.keys(_SparkLineChart).forEach(function (key) {
 var _Gauge = require("./Gauge");
 Object.keys(_Gauge).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Gauge[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -266,6 +298,7 @@ Object.keys(_Gauge).forEach(function (key) {
 var _RadarChart = require("./RadarChart");
 Object.keys(_RadarChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RadarChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -277,6 +310,7 @@ Object.keys(_RadarChart).forEach(function (key) {
 var _ChartsSurface = require("./ChartsSurface");
 Object.keys(_ChartsSurface).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsSurface[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -286,19 +320,10 @@ Object.keys(_ChartsSurface).forEach(function (key) {
   });
 });
 var _ChartContainer = require("./ChartContainer");
-Object.keys(_ChartContainer).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ChartContainer[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartContainer[key];
-    }
-  });
-});
 var _ChartDataProvider = require("./ChartDataProvider");
 Object.keys(_ChartDataProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartDataProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -310,6 +335,7 @@ Object.keys(_ChartDataProvider).forEach(function (key) {
 var _Toolbar = require("./Toolbar");
 Object.keys(_Toolbar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Toolbar[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

package/internals/components/NotRendered.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * This component is used to assert that a certain component should not be rendered.
+ * It is used in cases where we want to apply styles to a component that is not rendered because we use the `as` prop (introduced by `styled`) to replace the rendered component.
+ * We need it because we don't know the component that will be rendered at the time of writing the styles.
+ *
+ * @param _props Not used
+ */
+export declare function NotRendered<T>(_props: T): React.ReactNode;

package/internals/components/NotRendered.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotRendered = NotRendered;
+/**
+ * This component is used to assert that a certain component should not be rendered.
+ * It is used in cases where we want to apply styles to a component that is not rendered because we use the `as` prop (introduced by `styled`) to replace the rendered component.
+ * We need it because we don't know the component that will be rendered at the time of writing the styles.
+ *
+ * @param _props Not used
+ */
+function NotRendered(_props) {
+  throw new Error('Failed assertion: should not be rendered');
+}

package/internals/index.d.ts

@@ -1,12 +1,17 @@
 export * from "./components/ChartsAxesGradients/index.js";
 export * from "./components/ChartsWrapper/index.js";
 export * from "../ChartsLabel/ChartsLabelMark.js";
+export * from "./components/NotRendered.js";
 export { useSeries } from "../hooks/useSeries.js";
 export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";
 export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
+export { useScatterPlotData } from "../ScatterChart/useScatterPlotData.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
+export { useAreaPlotData } from "../LineChart/useAreaPlotData.js";
+export { useLinePlotData } from "../LineChart/useLinePlotData.js";
 export { useBarChartProps } from "../BarChart/useBarChartProps.js";
+export { useBarPlotData } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
@@ -14,6 +19,7 @@ export * from "./createSeriesSelectorOfType.js";
 export * from "./plugins/corePlugins/useChartId/index.js";
 export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";
+export * from "./plugins/corePlugins/useChartInteractionListener/index.js";
 export * from "./plugins/featurePlugins/useChartZAxis/index.js";
 export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
 export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";

package/internals/index.js

@@ -8,8 +8,12 @@ var _exportNames = {
   useInteractionItemProps: true,
   useDrawingArea: true,
   useScatterChartProps: true,
+  useScatterPlotData: true,
   useLineChartProps: true,
+  useAreaPlotData: true,
+  useLinePlotData: true,
   useBarChartProps: true,
+  useBarPlotData: true,
   useRadarChartProps: true,
   getCartesianAxisTriggerTooltip: true,
   getCartesianAxisIndex: true,
@@ -33,12 +37,24 @@ Object.defineProperty(exports, "getCartesianAxisTriggerTooltip", {
     return _getAxisTriggerTooltip.getAxisTriggerTooltip;
   }
 });
+Object.defineProperty(exports, "useAreaPlotData", {
+  enumerable: true,
+  get: function () {
+    return _useAreaPlotData.useAreaPlotData;
+  }
+});
 Object.defineProperty(exports, "useBarChartProps", {
   enumerable: true,
   get: function () {
     return _useBarChartProps.useBarChartProps;
   }
 });
+Object.defineProperty(exports, "useBarPlotData", {
+  enumerable: true,
+  get: function () {
+    return _useBarPlotData.useBarPlotData;
+  }
+});
 Object.defineProperty(exports, "useDrawingArea", {
   enumerable: true,
   get: function () {
@@ -57,6 +73,12 @@ Object.defineProperty(exports, "useLineChartProps", {
     return _useLineChartProps.useLineChartProps;
   }
 });
+Object.defineProperty(exports, "useLinePlotData", {
+  enumerable: true,
+  get: function () {
+    return _useLinePlotData.useLinePlotData;
+  }
+});
 Object.defineProperty(exports, "useRadarChartProps", {
   enumerable: true,
   get: function () {
@@ -69,6 +91,12 @@ Object.defineProperty(exports, "useScatterChartProps", {
     return _useScatterChartProps.useScatterChartProps;
   }
 });
+Object.defineProperty(exports, "useScatterPlotData", {
+  enumerable: true,
+  get: function () {
+    return _useScatterPlotData.useScatterPlotData;
+  }
+});
 Object.defineProperty(exports, "useSeries", {
   enumerable: true,
   get: function () {
@@ -111,12 +139,28 @@ Object.keys(_ChartsLabelMark).forEach(function (key) {
     }
   });
 });
+var _NotRendered = require("./components/NotRendered");
+Object.keys(_NotRendered).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _NotRendered[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NotRendered[key];
+    }
+  });
+});
 var _useSeries = require("../hooks/useSeries");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useScatterChartProps = require("../ScatterChart/useScatterChartProps");
+var _useScatterPlotData = require("../ScatterChart/useScatterPlotData");
 var _useLineChartProps = require("../LineChart/useLineChartProps");
+var _useAreaPlotData = require("../LineChart/useAreaPlotData");
+var _useLinePlotData = require("../LineChart/useLinePlotData");
 var _useBarChartProps = require("../BarChart/useBarChartProps");
+var _useBarPlotData = require("../BarChart/useBarPlotData");
 var _useRadarChartProps = require("../RadarChart/useRadarChartProps");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 Object.keys(_useChartContainerProps).forEach(function (key) {
@@ -190,6 +234,18 @@ Object.keys(_useChartDimensions).forEach(function (key) {
     }
   });
 });
+var _useChartInteractionListener = require("./plugins/corePlugins/useChartInteractionListener");
+Object.keys(_useChartInteractionListener).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartInteractionListener[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartInteractionListener[key];
+    }
+  });
+});
 var _useChartZAxis = require("./plugins/featurePlugins/useChartZAxis");
 Object.keys(_useChartZAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/plugins/corePlugins/corePlugins.d.ts

@@ -2,10 +2,11 @@ import { type UseChartAnimationSignature } from "./useChartAnimation/index.js";
 import { type UseChartDimensionsSignature } from "./useChartDimensions/index.js";
 import { type UseChartIdSignature, UseChartIdParameters } from "./useChartId/index.js";
 import { type UseChartSeriesSignature } from "./useChartSeries/index.js";
+import { type UseChartInteractionListenerSignature } from "./useChartInteractionListener/index.js";
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the Charts components.
  */
-export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<UseChartIdSignature>, import("../models/index.js").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesSignature>, import("../models/index.js").ChartPlugin<UseChartAnimationSignature>];
-export type ChartCorePluginSignatures = [UseChartIdSignature, UseChartDimensionsSignature, UseChartSeriesSignature, UseChartAnimationSignature];
+export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<UseChartIdSignature>, import("../models/index.js").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesSignature>, import("../models/index.js").ChartPlugin<UseChartInteractionListenerSignature>, import("../models/index.js").ChartPlugin<UseChartAnimationSignature>];
+export type ChartCorePluginSignatures = [UseChartIdSignature, UseChartDimensionsSignature, UseChartSeriesSignature, UseChartAnimationSignature, UseChartInteractionListenerSignature];
 export interface ChartCorePluginParameters extends UseChartIdParameters {}

package/internals/plugins/corePlugins/corePlugins.js

@@ -8,8 +8,9 @@ var _useChartAnimation = require("./useChartAnimation");
 var _useChartDimensions = require("./useChartDimensions");
 var _useChartId = require("./useChartId");
 var _useChartSeries = require("./useChartSeries");
+var _useChartInteractionListener = require("./useChartInteractionListener");
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the Charts components.
  */
-const CHART_CORE_PLUGINS = exports.CHART_CORE_PLUGINS = [_useChartId.useChartId, _useChartDimensions.useChartDimensions, _useChartSeries.useChartSeries, _useChartAnimation.useChartAnimation];
+const CHART_CORE_PLUGINS = exports.CHART_CORE_PLUGINS = [_useChartId.useChartId, _useChartDimensions.useChartDimensions, _useChartSeries.useChartSeries, _useChartInteractionListener.useChartInteractionListener, _useChartAnimation.useChartAnimation];

package/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.d.ts

@@ -1,4 +1,4 @@
-export declare const selectorChartSkipAnimation: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartSkipAnimation: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -156,7 +156,7 @@ const useChartDimensions = ({
   const isYInside = React.useCallback(y => y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height, [drawingArea.height, drawingArea.top]);
   const isPointInside = React.useCallback((x, y, targetElement) => {
     // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
-    if (targetElement && targetElement.closest('[data-drawing-container]')) {
+    if (targetElement && 'closest' in targetElement && targetElement.closest('[data-drawing-container]')) {
       return true;
     }
     return isXInside(x) && isYInside(y);

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.d.ts

@@ -3,7 +3,7 @@ import type { UseChartDimensionsSignature } from "./useChartDimensions.types.js"
 import { ChartState } from "../../models/chart.js";
 export declare const selectorChartDimensionsState: ChartRootSelector<UseChartDimensionsSignature>;
 export declare const selectorChartMargin: (state: ChartState<[UseChartDimensionsSignature]>) => import("./useChartDimensions.types.js").ChartMargin;
-export declare const selectorChartDrawingArea: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartDrawingArea: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<import("../../../index.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -15,7 +15,7 @@ export declare const selectorChartDrawingArea: import("reselect").Selector<impor
   top: number;
   bottom: number;
 }, []>;
-export declare const selectorChartPropsSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartPropsSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -23,7 +23,7 @@ export declare const selectorChartPropsSize: import("reselect").Selector<import(
   width: number | undefined;
   height: number | undefined;
 }, any[]>;
-export declare const selectorChartContainerSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartContainerSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.d.ts

@@ -67,10 +67,10 @@ export interface UseChartDimensionsInstance {
    * Checks if a point is inside the drawing area.
    * @param {number} x The x coordinate of the point.
    * @param {number} y The y coordinate of the point.
-   * @param {Element} targetElement The element to check if it is allowed to overflow the drawing area.
+   * @param {Element | EventTarget | null} targetElement The element to check if it is allowed to overflow the drawing area.
    * @returns {boolean} `true` if the point is inside the drawing area, `false` otherwise.
    */
-  isPointInside: (x: number, y: number, targetElement?: Element) => boolean;
+  isPointInside: (x: number, y: number, targetElement?: Element | EventTarget | null) => boolean;
   /**
    * Checks if the x coordinate is inside the drawing area.
    * @param {number} x The x coordinate of the point.

package/internals/plugins/corePlugins/useChartId/useChartId.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/internals/plugins/corePlugins/useChartId/useChartId.selectors.d.ts

@@ -3,7 +3,7 @@
  * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
  * @returns {string} The id attribute of the chart.
  */
-export declare const selectorChartId: import("reselect").Selector<import("./useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartId: import("reselect").Selector<import("./useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/internals/plugins/corePlugins/useChartInteractionListener/index.d.ts

@@ -0,0 +1,2 @@
+export { useChartInteractionListener } from "./useChartInteractionListener.js";
+export type { UseChartInteractionListenerParameters, UseChartInteractionListenerState, UseChartInteractionListenerInstance, UseChartInteractionListenerSignature, ChartInteraction } from "./useChartInteractionListener.types.js";

package/internals/plugins/corePlugins/useChartInteractionListener/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useChartInteractionListener", {
+  enumerable: true,
+  get: function () {
+    return _useChartInteractionListener.useChartInteractionListener;
+  }
+});
+var _useChartInteractionListener = require("./useChartInteractionListener");

package/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.d.ts

@@ -0,0 +1,3 @@
+import { ChartPlugin } from "../../models/index.js";
+import { UseChartInteractionListenerSignature } from "./useChartInteractionListener.types.js";
+export declare const useChartInteractionListener: ChartPlugin<UseChartInteractionListenerSignature>;

package/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.js

@@ -0,0 +1,84 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartInteractionListener = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _core = require("@mui/x-internal-gestures/core");
+const preventDefault = event => event.preventDefault();
+const useChartInteractionListener = ({
+  svgRef
+}) => {
+  React.useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return undefined;
+    }
+    const gestureManager = new _core.GestureManager({
+      gestures: [new _core.PanGesture({
+        name: 'pan',
+        threshold: 0,
+        maxPointers: 1
+      }), new _core.MoveGesture({
+        name: 'move',
+        preventIf: ['pan', 'pinch'] // Prevent move gesture when pan is active
+      }), new _core.PinchGesture({
+        name: 'pinch',
+        threshold: 5,
+        preventIf: ['pan']
+      }), new _core.TurnWheelGesture({
+        name: 'turnWheel',
+        sensitivity: 0.01,
+        initialDelta: 1
+      }), new _core.TapGesture({
+        name: 'tap',
+        maxDistance: 10,
+        preventIf: ['pan', 'pinch']
+      }), new _core.PressGesture({
+        name: 'quickPress',
+        duration: 50,
+        maxDistance: 10
+      })]
+    });
+    gestureManager.registerElement(['pan', 'move', 'pinch', 'turnWheel', 'tap', 'quickPress'], svg);
+    return () => {
+      // Cleanup gesture manager
+      gestureManager.destroy();
+    };
+  }, [svgRef]);
+  const addInteractionListener = React.useCallback((interaction, callback, options) => {
+    // Forcefully cast the svgRef to any, it is annoying to fix the types.
+    const svg = svgRef.current;
+    svg?.addEventListener(interaction, callback, options);
+    return {
+      cleanup: () => svg?.removeEventListener(interaction, callback)
+    };
+  }, [svgRef]);
+  React.useEffect(() => {
+    const svg = svgRef.current;
+
+    // Disable gesture on safari
+    // https://use-gesture.netlify.app/docs/gestures/#about-the-pinch-gesture
+    svg?.addEventListener('gesturestart', preventDefault);
+    svg?.addEventListener('gesturechange', preventDefault);
+    svg?.addEventListener('gestureend', preventDefault);
+    return () => {
+      svg?.removeEventListener('gesturestart', preventDefault);
+      svg?.removeEventListener('gesturechange', preventDefault);
+      svg?.removeEventListener('gestureend', preventDefault);
+    };
+  }, [svgRef]);
+  return {
+    instance: {
+      addInteractionListener
+    }
+  };
+};
+exports.useChartInteractionListener = useChartInteractionListener;
+useChartInteractionListener.params = {};
+useChartInteractionListener.getInitialState = () => {
+  return {};
+};