@mui/x-charts 8.27.0 → 9.0.0-alpha.1

package/internals/createCommonKeyboardFocusHandler.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCommonKeyboardFocusHandler = createCommonKeyboardFocusHandler;
+var _commonNextFocusItem = require("./commonNextFocusItem");
+/**
+ * Create a keyboard focus handler for common use cases where focused item are defined by the series is and data index.
+ */
+function createCommonKeyboardFocusHandler(outSeriesTypes, allowCycles) {
+  const keyboardFocusHandler = event => {
+    switch (event.key) {
+      case 'ArrowRight':
+        return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(outSeriesTypes, allowCycles);
+      case 'ArrowLeft':
+        return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(outSeriesTypes, allowCycles);
+      case 'ArrowDown':
+        return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
+      case 'ArrowUp':
+        return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(outSeriesTypes);
+      default:
+        return null;
+    }
+  };
+  return keyboardFocusHandler;
+}

package/internals/{getBarDimensions.d.ts → createGetBarDimensions.d.ts}

@@ -1,14 +1,12 @@
 import type { ChartsXAxisProps, ChartsYAxisProps, ComputedAxis, ScaleName } from "../models/axis.js";
 import type { ChartSeriesDefaultized } from "../models/seriesType/config.js";
-export declare function getBarDimensions(params: {
+export declare function createGetBarDimensions(params: {
   verticalLayout: boolean;
   xAxisConfig: ComputedAxis<ScaleName, any, ChartsXAxisProps>;
   yAxisConfig: ComputedAxis<ScaleName, any, ChartsYAxisProps>;
   series: ChartSeriesDefaultized<'bar'>;
-  dataIndex: number;
   numberOfGroups: number;
-  groupIndex: number;
-}): {
+}): (dataIndex: number, groupIndex: number) => {
   x: number;
   y: number;
   height: number;

package/internals/createGetBarDimensions.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGetBarDimensions = createGetBarDimensions;
+var _findMinMax = require("./findMinMax");
+var _getBandSize = require("./getBandSize");
+function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
+  const isVerticalAndPositive = verticalLayout && baseValue > 0;
+  const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
+  const invertStartCoordinate = isVerticalAndPositive || isHorizontalAndNegative;
+  return reverse ? !invertStartCoordinate : invertStartCoordinate;
+}
+function createGetBarDimensions(params) {
+  const {
+    verticalLayout,
+    xAxisConfig,
+    yAxisConfig,
+    series,
+    numberOfGroups
+  } = params;
+  const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+  const reverse = (verticalLayout ? yAxisConfig.reverse : xAxisConfig.reverse) ?? false;
+  const {
+    barWidth,
+    offset
+  } = (0, _getBandSize.getBandSize)(baseScaleConfig.scale.bandwidth(), numberOfGroups, baseScaleConfig.barGapRatio);
+  const xScale = xAxisConfig.scale;
+  const yScale = yAxisConfig.scale;
+  return function getBarDimensions(dataIndex, groupIndex) {
+    const barOffset = groupIndex * (barWidth + offset);
+    const baseValue = baseScaleConfig.data[dataIndex];
+    const seriesValue = series.data[dataIndex];
+    if (seriesValue == null) {
+      return null;
+    }
+    const values = series.visibleStackedData[dataIndex];
+    const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
+    const [minValueCoord, maxValueCoord] = (0, _findMinMax.findMinMax)(valueCoordinates).map(v => Math.round(v));
+    let barSize = 0;
+    if (seriesValue !== 0) {
+      if (!series.hidden) {
+        barSize = Math.max(series.minBarSize, maxValueCoord - minValueCoord);
+      }
+    }
+    const shouldInvert = shouldInvertStartCoordinate(verticalLayout, seriesValue, reverse);
+    let startCoordinate = 0;
+    if (shouldInvert) {
+      startCoordinate = maxValueCoord - barSize;
+    } else {
+      startCoordinate = minValueCoord;
+    }
+    return {
+      x: verticalLayout ? xScale(baseValue) + barOffset : startCoordinate,
+      y: verticalLayout ? startCoordinate : yScale(baseValue) + barOffset,
+      height: verticalLayout ? barSize : barWidth,
+      width: verticalLayout ? barWidth : barSize
+    };
+  };
+}

package/internals/getChartPoint.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Transform mouse event position to coordinates relative to the layer container.
+ * (0, 0) is the top-left corner of the layer container.
+ * @param element The the layer container
+ * @param event The mouseEvent to transform
+ */
+export declare function getChartPoint(element: Element, event: Pick<MouseEvent, 'clientX' | 'clientY'>): DOMPoint;

package/internals/getChartPoint.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getChartPoint = getChartPoint;
+/**
+ * Transform mouse event position to coordinates relative to the layer container.
+ * (0, 0) is the top-left corner of the layer container.
+ * @param element The the layer container
+ * @param event The mouseEvent to transform
+ */
+function getChartPoint(element, event) {
+  const rect = element.getBoundingClientRect();
+  const style = getComputedStyle(element);
+  const transform = new DOMMatrix(style.transform);
+  const point = new DOMPoint(event.clientX - rect.left, event.clientY - rect.top);
+  return point.matrixTransform(transform.inverse());
+}

package/internals/getGraphemeCount.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getGraphemeCount = void 0;
-const segmenter = typeof window !== 'undefined' && 'Intl' in window && 'Segmenter' in Intl ? new Intl.Segmenter(undefined, {
+const segmenter = typeof window !== 'undefined' && 'Intl' in window && 'Segmenter' in Intl ?
+// eslint-disable-next-line compat/compat
+new Intl.Segmenter(undefined, {
   granularity: 'grapheme'
 }) : null;
 function getGraphemeCountFallback(text) {

package/internals/getSeriesColorFn.d.ts

@@ -1,5 +1,6 @@
 import { type CommonSeriesType, type ColorCallbackValue } from "../models/seriesType/common.js";
+import { type ChartSeriesType } from "../models/seriesType/config.js";
 export declare function getSeriesColorFn<TValue>(series: {
-  color: NonNullable<CommonSeriesType<TValue>['color']>;
-  colorGetter?: CommonSeriesType<TValue>['colorGetter'];
+  color: NonNullable<CommonSeriesType<TValue, ChartSeriesType>['color']>;
+  colorGetter?: CommonSeriesType<TValue, ChartSeriesType>['colorGetter'];
 }): (data: ColorCallbackValue<TValue>) => string;

package/internals/identifierCleaner.d.ts

@@ -0,0 +1,11 @@
+import type { SeriesId, SeriesItemIdentifierWithType } from "../models/index.js";
+import type { ChartSeriesType } from "../models/seriesType/config.js";
+/**
+ * Cleans an identifier by extracting only type, seriesId, and dataIndex properties.
+ * This is the common cleaner for most series types (bar, line, pie, scatter, radar, etc.).
+ */
+export declare const identifierCleanerSeriesIdDataIndex: <T extends ChartSeriesType>(identifier: {
+  type: T;
+  seriesId: SeriesId;
+  dataIndex?: number;
+}) => SeriesItemIdentifierWithType<T>;

package/internals/identifierCleaner.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.identifierCleanerSeriesIdDataIndex = void 0;
+/**
+ * Cleans an identifier by extracting only type, seriesId, and dataIndex properties.
+ * This is the common cleaner for most series types (bar, line, pie, scatter, radar, etc.).
+ */
+const identifierCleanerSeriesIdDataIndex = identifier => {
+  // @ts-expect-error we need to trust the output type here, since T is generic
+  return {
+    type: identifier.type,
+    seriesId: identifier.seriesId,
+    dataIndex: identifier.dataIndex
+  };
+};
+exports.identifierCleanerSeriesIdDataIndex = identifierCleanerSeriesIdDataIndex;

package/internals/index.d.ts

@@ -3,6 +3,7 @@ export * from "../ChartsLabel/ChartsLabelMark.js";
 export * from "./components/NotRendered.js";
 export * from "../BarChart/BarLabel/BarLabelPlot.js";
 export * from "../BarChart/BarClipPath.js";
+export * from "./components/WebGLContext.js";
 export { useSeries } from "../hooks/useSeries.js";
 export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";
@@ -15,6 +16,7 @@ export { useLinePlotData } from "../LineChart/useLinePlotData.js";
 export * from "../BarChart/useBarChartProps.js";
 export { processBarDataForPlot } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
+export * from "../ChartsContainer/useChartsContainerProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
 export * from "./seriesSelectorOfType.js";
@@ -24,6 +26,7 @@ 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/corePlugins/useChartSeriesConfig/index.js";
 export * from "./plugins/featurePlugins/useChartZAxis/index.js";
 export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
 export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
@@ -47,7 +50,7 @@ export * from "../RadarChart/RadarChart.plugins.js";
 export * from "../PieChart/PieChart.plugins.js";
 export * from "./configInit.js";
 export * from "./getLabel.js";
-export * from "./getSVGPoint.js";
+export * from "./getChartPoint.js";
 export * from "./isDefined.js";
 export * from "./getScale.js";
 export * from "./stacking/index.js";
@@ -62,9 +65,11 @@ export * from "./invertScale.js";
 export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
 export * from "./commonNextFocusItem.js";
+export { createCommonKeyboardFocusHandler } from "./createCommonKeyboardFocusHandler.js";
 export { getSeriesColorFn } from "./getSeriesColorFn.js";
 export { checkBarChartScaleErrors } from "../BarChart/checkBarChartScaleErrors.js";
 export { getBandSize } from "./getBandSize.js";
+export * from "./plugins/utils/defaultSeriesConfig.js";
 export { getAxisExtrema } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema.js";
 export * from "../context/ChartProvider/index.js";
 export * from "../context/ChartsSlotsContext.js";
@@ -77,4 +82,5 @@ export * from "./material/index.js";
 export * from "./createSvgIcon.js";
 export * from "./constants.js";
 export * from "./scales/index.js";
-export * from "./identifierSerializer.js";
+export * from "./identifierSerializer.js";
+export * from "./identifierCleaner.js";

package/internals/index.js

@@ -19,6 +19,7 @@ var _exportNames = {
   useRegisterPointerInteractions: true,
   getCartesianAxisTriggerTooltip: true,
   getCartesianAxisIndex: true,
+  createCommonKeyboardFocusHandler: true,
   getSeriesColorFn: true,
   checkBarChartScaleErrors: true,
   getBandSize: true,
@@ -30,6 +31,12 @@ Object.defineProperty(exports, "checkBarChartScaleErrors", {
     return _checkBarChartScaleErrors.checkBarChartScaleErrors;
   }
 });
+Object.defineProperty(exports, "createCommonKeyboardFocusHandler", {
+  enumerable: true,
+  get: function () {
+    return _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler;
+  }
+});
 Object.defineProperty(exports, "getAxisExtrema", {
   enumerable: true,
   get: function () {
@@ -198,6 +205,18 @@ Object.keys(_BarClipPath).forEach(function (key) {
     }
   });
 });
+var _WebGLContext = require("./components/WebGLContext");
+Object.keys(_WebGLContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WebGLContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _WebGLContext[key];
+    }
+  });
+});
 var _useSeries = require("../hooks/useSeries");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -221,6 +240,18 @@ Object.keys(_useBarChartProps).forEach(function (key) {
 });
 var _useBarPlotData = require("../BarChart/useBarPlotData");
 var _useRadarChartProps = require("../RadarChart/useRadarChartProps");
+var _useChartsContainerProps = require("../ChartsContainer/useChartsContainerProps");
+Object.keys(_useChartsContainerProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartsContainerProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartsContainerProps[key];
+    }
+  });
+});
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 Object.keys(_useChartContainerProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -307,6 +338,18 @@ Object.keys(_useChartInteractionListener).forEach(function (key) {
     }
   });
 });
+var _useChartSeriesConfig = require("./plugins/corePlugins/useChartSeriesConfig");
+Object.keys(_useChartSeriesConfig).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartSeriesConfig[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartSeriesConfig[key];
+    }
+  });
+});
 var _useChartZAxis = require("./plugins/featurePlugins/useChartZAxis");
 Object.keys(_useChartZAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -561,15 +604,15 @@ Object.keys(_getLabel).forEach(function (key) {
     }
   });
 });
-var _getSVGPoint = require("./getSVGPoint");
-Object.keys(_getSVGPoint).forEach(function (key) {
+var _getChartPoint = require("./getChartPoint");
+Object.keys(_getChartPoint).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _getSVGPoint[key]) return;
+  if (key in exports && exports[key] === _getChartPoint[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _getSVGPoint[key];
+      return _getChartPoint[key];
     }
   });
 });
@@ -741,9 +784,22 @@ Object.keys(_commonNextFocusItem).forEach(function (key) {
     }
   });
 });
+var _createCommonKeyboardFocusHandler = require("./createCommonKeyboardFocusHandler");
 var _getSeriesColorFn = require("./getSeriesColorFn");
 var _checkBarChartScaleErrors = require("../BarChart/checkBarChartScaleErrors");
 var _getBandSize = require("./getBandSize");
+var _defaultSeriesConfig = require("./plugins/utils/defaultSeriesConfig");
+Object.keys(_defaultSeriesConfig).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _defaultSeriesConfig[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _defaultSeriesConfig[key];
+    }
+  });
+});
 var _getAxisExtrema = require("./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema");
 var _ChartProvider = require("../context/ChartProvider");
 Object.keys(_ChartProvider).forEach(function (key) {
@@ -888,4 +944,16 @@ Object.keys(_identifierSerializer).forEach(function (key) {
       return _identifierSerializer[key];
     }
   });
+});
+var _identifierCleaner = require("./identifierCleaner");
+Object.keys(_identifierCleaner).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _identifierCleaner[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _identifierCleaner[key];
+    }
+  });
 });

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

@@ -1,7 +1,9 @@
 import { type UseChartAnimationSignature } from "./useChartAnimation/index.js";
 import { type UseChartDimensionsSignature } from "./useChartDimensions/index.js";
+import { type UseChartElementRefSignature } from "./useChartElementRef/index.js";
 import { type UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature/index.js";
 import { type UseChartIdSignature, type UseChartIdParameters } from "./useChartId/index.js";
+import { type UseChartSeriesConfigSignature, type UseChartSeriesConfigParameters } from "./useChartSeriesConfig/index.js";
 import { type UseChartSeriesSignature } from "./useChartSeries/index.js";
 import { type UseChartInteractionListenerSignature } from "./useChartInteractionListener/index.js";
 import type { ChartSeriesType } from "../../../models/seriesType/config.js";
@@ -9,6 +11,6 @@ import type { ChartSeriesType } from "../../../models/seriesType/config.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<UseChartExperimentalFeaturesSignature>, 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<TSeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartIdSignature, UseChartExperimentalFeaturesSignature, UseChartDimensionsSignature, UseChartSeriesSignature<TSeriesType>, UseChartAnimationSignature, UseChartInteractionListenerSignature];
-export interface ChartCorePluginParameters extends UseChartIdParameters {}
+export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<UseChartElementRefSignature>, import("../models/index.js").ChartPlugin<UseChartIdSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesConfigSignature>, import("../models/index.js").ChartPlugin<UseChartExperimentalFeaturesSignature>, 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<TSeriesType extends ChartSeriesType = ChartSeriesType> = [UseChartElementRefSignature, UseChartIdSignature, UseChartSeriesConfigSignature<TSeriesType>, UseChartExperimentalFeaturesSignature, UseChartDimensionsSignature, UseChartSeriesSignature<TSeriesType>, UseChartAnimationSignature, UseChartInteractionListenerSignature];
+export interface ChartCorePluginParameters extends UseChartIdParameters, UseChartSeriesConfigParameters {}

package/internals/plugins/corePlugins/corePlugins.js

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.CHART_CORE_PLUGINS = void 0;
 var _useChartAnimation = require("./useChartAnimation");
 var _useChartDimensions = require("./useChartDimensions");
+var _useChartElementRef = require("./useChartElementRef");
 var _useChartExperimentalFeature = require("./useChartExperimentalFeature");
 var _useChartId = require("./useChartId");
+var _useChartSeriesConfig = require("./useChartSeriesConfig");
 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, _useChartExperimentalFeature.useChartExperimentalFeatures, _useChartDimensions.useChartDimensions, _useChartSeries.useChartSeries, _useChartInteractionListener.useChartInteractionListener, _useChartAnimation.useChartAnimation];
+const CHART_CORE_PLUGINS = exports.CHART_CORE_PLUGINS = [_useChartElementRef.useChartElementRef, _useChartId.useChartId, _useChartSeriesConfig.useChartSeriesConfig, _useChartExperimentalFeature.useChartExperimentalFeatures, _useChartDimensions.useChartDimensions, _useChartSeries.useChartSeries, _useChartInteractionListener.useChartInteractionListener, _useChartAnimation.useChartAnimation];

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

@@ -1,2 +1,3 @@
 export { CHART_CORE_PLUGINS } from "./corePlugins.js";
-export type { ChartCorePluginSignatures, ChartCorePluginParameters } from "./corePlugins.js";
+export type { ChartCorePluginSignatures, ChartCorePluginParameters } from "./corePlugins.js";
+export type { UseChartElementRefSignature, UseChartElementRefInstance } from "./useChartElementRef/index.js";

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

@@ -1,3 +1,3 @@
-export declare const selectorChartSkipAnimation: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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<{}> & {
+export declare const selectorChartSkipAnimation: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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;
 }) => boolean;

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

@@ -19,8 +19,11 @@ const MAX_COMPUTE_RUN = 10;
 const useChartDimensions = ({
   params,
   store,
-  svgRef
+  instance
 }) => {
+  const {
+    svgRef
+  } = instance;
   const hasInSize = params.width !== undefined && params.height !== undefined;
   const stateRef = React.useRef({
     displayError: false,

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

@@ -3,7 +3,7 @@ import type { UseChartDimensionsSignature } from "./useChartDimensions.types.js"
 import { type 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: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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<{}> & {
+export declare const selectorChartDrawingArea: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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;
 }) => {
   width: number;
@@ -13,15 +13,15 @@ export declare const selectorChartDrawingArea: (args_0: import("../useChartId/us
   top: number;
   bottom: number;
 };
-export declare const selectorChartSvgWidth: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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<{}> & {
+export declare const selectorChartSvgWidth: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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;
 }) => number;
-export declare const selectorChartSvgHeight: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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<{}> & {
+export declare const selectorChartSvgHeight: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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;
 }) => number;
-export declare const selectorChartPropsWidth: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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<{}> & {
+export declare const selectorChartPropsWidth: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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;
 }) => number | undefined;
-export declare const selectorChartPropsHeight: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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<{}> & {
+export declare const selectorChartPropsHeight: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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;
 }) => number | undefined;

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

@@ -0,0 +1,2 @@
+export { useChartElementRef } from "./useChartElementRef.js";
+export type { UseChartElementRefSignature, UseChartElementRefInstance } from "./useChartElementRef.types.js";

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

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

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

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

package/internals/plugins/corePlugins/useChartElementRef/useChartElementRef.js

@@ -0,0 +1,21 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartElementRef = void 0;
+var React = _interopRequireWildcard(require("react"));
+const useChartElementRef = () => {
+  const svgRef = React.useRef(null);
+  const chartRootRef = React.useRef(null);
+  return {
+    instance: {
+      svgRef,
+      chartRootRef
+    }
+  };
+};
+exports.useChartElementRef = useChartElementRef;
+useChartElementRef.params = {};

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

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+import { type ChartPluginSignature } from "../../models/index.js";
+export interface UseChartElementRefInstance {
+  /**
+   * Reference to the main svg element.
+   */
+  svgRef: React.RefObject<SVGSVGElement | null>;
+  /**
+   * Reference to the chart root element.
+   */
+  chartRootRef: React.RefObject<Element | null>;
+}
+export type UseChartElementRefSignature = ChartPluginSignature<{
+  instance: UseChartElementRefInstance;
+}>;

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

@@ -1,6 +1,6 @@
 import { type ChartRootSelector } from "../../utils/selectors.js";
 import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.js";
 export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature>;
-export declare const selectorPreferStrictDomainInLineCharts: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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<{}> & {
+export declare const selectorPreferStrictDomainInLineCharts: (args_0: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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;
 }) => boolean;

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

@@ -3,6 +3,6 @@
  * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
  * @returns {string} The id attribute of the chart.
  */
-export declare const selectorChartId: (args_0: import("./useChartId.types.js").UseChartIdState & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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<{}> & {
+export declare const selectorChartId: (args_0: import("./useChartId.types.js").UseChartIdState & import("../useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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;
 }) => string | undefined;

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

@@ -10,8 +10,11 @@ var React = _interopRequireWildcard(require("react"));
 var _core = require("@mui/x-internal-gestures/core");
 const preventDefault = event => event.preventDefault();
 const useChartInteractionListener = ({
-  svgRef
+  instance
 }) => {
+  const {
+    svgRef
+  } = instance;
   const gestureManagerRef = React.useRef(null);
   React.useEffect(() => {
     const svg = svgRef.current;
@@ -83,7 +86,7 @@ const useChartInteractionListener = ({
     const svg = svgRef.current;
     svg?.addEventListener(interaction, callback, options);
     return {
-      cleanup: () => svg?.removeEventListener(interaction, callback)
+      cleanup: () => svg?.removeEventListener(interaction, callback, options)
     };
   }, [svgRef]);
   const updateZoomInteractionListeners = React.useCallback((interaction, options) => {

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

@@ -1,3 +1,3 @@
 export { useChartSeries } from "./useChartSeries.js";
-export type { UseChartSeriesSignature, UseChartSeriesParameters, UseChartSeriesDefaultizedParameters, ProcessedSeries, SeriesLayout } from "./useChartSeries.types.js";
+export type { UseChartSeriesSignature, UseChartSeriesParameters, UseChartSeriesDefaultizedParameters, ProcessedSeries, SeriesIdToType, SeriesLayout } from "./useChartSeries.types.js";
 export * from "./useChartSeries.selectors.js";

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

@@ -1,8 +1,8 @@
 import { type ChartDrawingArea } from "../../../../hooks/useDrawingArea.js";
 import { type AllSeriesType } from "../../../../models/seriesType/index.js";
 import { type ChartSeriesType, type DatasetType } from "../../../../models/seriesType/config.js";
-import { type ChartSeriesConfig } from "../../models/seriesConfig/index.js";
-import { type DefaultizedSeriesGroups, type ProcessedSeries, type SeriesLayout } from "./useChartSeries.types.js";
+import { type ChartSeriesConfig } from "../useChartSeriesConfig/index.js";
+import { type DefaultizedSeriesGroups, type ProcessedSeries, type SeriesIdToType, type SeriesLayout } from "./useChartSeries.types.js";
 import type { IsItemVisibleFunction } from "../../featurePlugins/useChartVisibilityManager/index.js";
 /**
  * This method groups series by type and adds defaultized values such as the ids and colors.
@@ -19,7 +19,10 @@ export declare const defaultizeSeries: <TSeriesType extends ChartSeriesType>({
   series: Readonly<AllSeriesType<TSeriesType>[]>;
   colors: readonly string[];
   seriesConfig: ChartSeriesConfig<TSeriesType>;
-}) => DefaultizedSeriesGroups<TSeriesType>;
+}) => {
+  defaultizedSeries: DefaultizedSeriesGroups<TSeriesType>;
+  idToType: SeriesIdToType;
+};
 /**
  * Applies series processors to the defaultized series groups.
  * This should be called in a selector to compute processed series on-demand.