@mui/x-charts-pro 8.27.2 → 9.0.0-alpha.1

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.js

@@ -1,15 +1,17 @@
 'use client';
 
 import * as React from 'react';
-import { getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { getChartPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { getHorizontalCenterRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.js";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const useZoomOnWheel = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const startedOutsideRef = React.useRef(false);
@@ -33,7 +35,7 @@ export const useZoomOnWheel = ({
     }
     const rafThrottledSetZoomData = rafThrottle(setZoomDataCallback);
     const zoomOnWheelHandler = instance.addInteractionListener('zoomTurnWheel', event => {
-      const point = getSVGPoint(element, {
+      const point = getChartPoint(element, {
         clientX: event.detail.centroid.x,
         clientY: event.detail.centroid.y
       });

package/esm/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts

@@ -1,18 +1,18 @@
 import { type AxisId, type ChartRootSelector } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "./useChartProZoom.types.js";
 export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature, 'zoom'>;
-export declare const selectorChartZoomIsInteracting: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartZoomIsInteracting: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;
-export declare const selectorChartZoomIsEnabled: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomIsEnabled: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;
-export declare const selectorChartAxisZoomData: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartAxisZoomData: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, axisId: AxisId) => import("@mui/x-charts/internals").ZoomData | undefined;
-export declare const selectorChartCanZoomOut: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartCanZoomOut: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;
-export declare const selectorChartCanZoomIn: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartCanZoomIn: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;

package/esm/models/seriesType/heatmap.d.ts

@@ -1,7 +1,7 @@
 import { type DefaultizedProps } from '@mui/x-internals/types';
 import { type CommonDefaultizedProps, type CommonSeriesType, type CartesianSeriesType } from '@mui/x-charts/internals';
 export type HeatmapValueType = readonly [number, number, number];
-export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType>, 'color' | 'colorGetter'>, CartesianSeriesType {
+export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType, 'heatmap'>, 'color' | 'colorGetter'>, CartesianSeriesType {
   type: 'heatmap';
   /**
    * Data associated to each bar.
@@ -34,10 +34,10 @@ export type HeatmapItemIdentifier = {
   /**
    * The x index of the cell. Useful to identify the cell position in the heatmap even if there is no data.
    */
-  xIndex?: number;
+  xIndex: number;
   /**
    * The y index of the cell. Useful to identify the cell position in the heatmap even if there is no data.
    */
-  yIndex?: number;
+  yIndex: number;
 };
 export interface DefaultizedHeatmapSeriesType extends DefaultizedProps<HeatmapSeriesType, CommonDefaultizedProps> {}

package/esm/plugins/selectors/useChartHeatmapPosition.selectors.d.ts

@@ -1,4 +1,4 @@
 import { type HeatmapItemIdentifier } from "../../models/index.js";
-export declare const selectorHeatmapItemAtPosition: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorHeatmapItemAtPosition: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, svgPoint: Pick<DOMPoint, "x" | "y">) => HeatmapItemIdentifier | undefined;

package/esm/plugins/selectors/useChartHeatmapPosition.selectors.js

@@ -31,7 +31,9 @@ export const selectorHeatmapItemAtPosition = createSelector(selectorChartXAxis,
       return {
         type: 'heatmap',
         seriesId,
-        dataIndex
+        dataIndex,
+        xIndex,
+        yIndex
       };
     }
   }

package/esm/typeOverloads/modules.d.ts

@@ -1,8 +1,9 @@
-import { type DefaultizedProps, type MakeRequired } from '@mui/x-internals/types';
-import { type AxisId, type ZoomOptions } from '@mui/x-charts/internals';
-import { type DefaultizedFunnelSeriesType, type FunnelItemIdentifier, type FunnelSeriesType, type FunnelValueType } from "../FunnelChart/funnel.types.js";
-import { type HeatmapItemIdentifier, type HeatmapSeriesType, type DefaultizedHeatmapSeriesType, type HeatmapValueType } from "../models/seriesType/heatmap.js";
-import { type SankeyLayout, type SankeySeriesType, type DefaultizedSankeySeriesType, type SankeyItemIdentifier, type SankeyItemIdentifierWithData } from "../SankeyChart/sankey.types.js";
+import type { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
+import type { AxisId, CommonHighlightScope, ZoomOptions } from '@mui/x-charts/internals';
+import type { DefaultizedFunnelSeriesType, FunnelItemIdentifier, FunnelSeriesType, FunnelValueType } from "../FunnelChart/funnel.types.js";
+import type { HeatmapItemIdentifier, HeatmapSeriesType, DefaultizedHeatmapSeriesType, HeatmapValueType } from "../models/seriesType/heatmap.js";
+import type { SankeyLayout, SankeySeriesType, DefaultizedSankeySeriesType, SankeyItemIdentifier, SankeyItemIdentifierWithData } from "../SankeyChart/sankey.types.js";
+import type { SankeyHighlightScope } from "../SankeyChart/sankey.highlight.types.js";
 declare module '@mui/x-charts/internals' {
   interface ChartsSeriesConfig {
     heatmap: {
@@ -14,6 +15,7 @@ declare module '@mui/x-charts/internals' {
       itemIdentifierWithData: HeatmapItemIdentifier;
       valueType: HeatmapValueType;
       axisType: 'cartesian';
+      highlightScope: CommonHighlightScope;
     };
     funnel: {
       seriesInput: Omit<DefaultizedProps<FunnelSeriesType, 'id'>, 'data'> & {
@@ -26,6 +28,7 @@ declare module '@mui/x-charts/internals' {
       itemIdentifierWithData: FunnelItemIdentifier;
       valueType: MakeRequired<FunnelValueType, 'id' | 'color'>;
       axisType: 'cartesian';
+      highlightScope: CommonHighlightScope;
     };
     sankey: {
       seriesInput: DefaultizedSankeySeriesType;
@@ -37,6 +40,7 @@ declare module '@mui/x-charts/internals' {
       itemIdentifier: SankeyItemIdentifier;
       itemIdentifierWithData: SankeyItemIdentifierWithData<true>;
       valueType: number;
+      highlightScope: SankeyHighlightScope;
     };
   }
   interface DefaultizedZoomOptions extends Required<ZoomOptions> {

package/index.d.ts

@@ -29,8 +29,10 @@ export * from "./models/index.js";
 export * from "./plugins/index.js";
 export * from "./colorPalettes/index.js";
 export * from "./Heatmap/index.js";
+export { ChartsContainerPro } from "./ChartsContainerPro/index.js";
+export type { ChartsContainerProProps, ChartsContainerProSlots, ChartsContainerProSlotProps } from "./ChartsContainerPro/index.js";
 export { ChartContainerPro } from "./ChartContainerPro/index.js";
-export type { ChartContainerProProps } from "./ChartContainerPro/index.js";
+export type { ChartContainerProProps, ChartContainerProSlots, ChartContainerProSlotProps } from "./ChartContainerPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./SankeyChart/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.27.2
+ * @mui/x-charts-pro v9.0.0-alpha.1
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -11,6 +11,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  ChartsContainerPro: true,
   ChartContainerPro: true
 };
 Object.defineProperty(exports, "ChartContainerPro", {
@@ -19,6 +20,12 @@ Object.defineProperty(exports, "ChartContainerPro", {
     return _ChartContainerPro.ChartContainerPro;
   }
 });
+Object.defineProperty(exports, "ChartsContainerPro", {
+  enumerable: true,
+  get: function () {
+    return _ChartsContainerPro.ChartsContainerPro;
+  }
+});
 require("./typeOverloads/modules");
 var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
 Object.keys(_ChartsClipPath).forEach(function (key) {
@@ -380,6 +387,7 @@ Object.keys(_Heatmap).forEach(function (key) {
     }
   });
 });
+var _ChartsContainerPro = require("./ChartsContainerPro");
 var _ChartContainerPro = require("./ChartContainerPro");
 var _ChartDataProviderPro = require("./ChartDataProviderPro");
 Object.keys(_ChartDataProviderPro).forEach(function (key) {

package/internals/index.d.ts

@@ -1,7 +1,13 @@
+export { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.js";
+export type { UseChartsContainerProPropsReturnValue } from "../ChartsContainerPro/useChartsContainerProProps.js";
 export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.js";
 export { seriesPreviewPlotMap } from "../ChartZoomSlider/internals/seriesPreviewPlotMap.js";
 export type { PreviewPlotProps } from "../ChartZoomSlider/internals/previews/PreviewPlot.types.js";
 export { defaultSeriesConfigPro } from "../ChartDataProviderPro/ChartDataProviderPro.js";
 export type { ProPluginsPerSeriesType } from "../context/ChartProApi.js";
-export { defaultSlotsMaterial } from "./material/index.js";
+export { useHeatmapProps } from "../Heatmap/useHeatmapProps.js";
+export { defaultSlotsMaterial } from "./material/index.js";
+export * from "../Heatmap/HeatmapSVGPlot.js";
+export type * from "../Heatmap/Heatmap.types.js";
+export { selectorHeatmapItemAtPosition } from "../plugins/selectors/useChartHeatmapPosition.selectors.js";

package/internals/index.js

@@ -3,6 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  useChartsContainerProProps: true,
+  useChartContainerProProps: true,
+  seriesPreviewPlotMap: true,
+  defaultSeriesConfigPro: true,
+  useHeatmapProps: true,
+  defaultSlotsMaterial: true,
+  selectorHeatmapItemAtPosition: true
+};
 Object.defineProperty(exports, "defaultSeriesConfigPro", {
   enumerable: true,
   get: function () {
@@ -15,6 +24,12 @@ Object.defineProperty(exports, "defaultSlotsMaterial", {
     return _material.defaultSlotsMaterial;
   }
 });
+Object.defineProperty(exports, "selectorHeatmapItemAtPosition", {
+  enumerable: true,
+  get: function () {
+    return _useChartHeatmapPosition.selectorHeatmapItemAtPosition;
+  }
+});
 Object.defineProperty(exports, "seriesPreviewPlotMap", {
   enumerable: true,
   get: function () {
@@ -27,7 +42,34 @@ Object.defineProperty(exports, "useChartContainerProProps", {
     return _useChartContainerProProps.useChartContainerProProps;
   }
 });
+Object.defineProperty(exports, "useChartsContainerProProps", {
+  enumerable: true,
+  get: function () {
+    return _useChartsContainerProProps.useChartsContainerProProps;
+  }
+});
+Object.defineProperty(exports, "useHeatmapProps", {
+  enumerable: true,
+  get: function () {
+    return _useHeatmapProps.useHeatmapProps;
+  }
+});
+var _useChartsContainerProProps = require("../ChartsContainerPro/useChartsContainerProProps");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _seriesPreviewPlotMap = require("../ChartZoomSlider/internals/seriesPreviewPlotMap");
 var _ChartDataProviderPro = require("../ChartDataProviderPro/ChartDataProviderPro");
-var _material = require("./material");
+var _useHeatmapProps = require("../Heatmap/useHeatmapProps");
+var _material = require("./material");
+var _HeatmapSVGPlot = require("../Heatmap/HeatmapSVGPlot");
+Object.keys(_HeatmapSVGPlot).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _HeatmapSVGPlot[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HeatmapSVGPlot[key];
+    }
+  });
+});
+var _useChartHeatmapPosition = require("../plugins/selectors/useChartHeatmapPosition.selectors");

package/internals/plugins/useChartProExport/common.d.ts

@@ -2,4 +2,8 @@ export declare function createExportIframe(title?: string): HTMLIFrameElement;
 /**
  * Applies styles to an element and returns the previous styles.
  */
-export declare function applyStyles(element: HTMLElement | SVGElement, styles: Record<string, string | null>): Record<string, string | null>;
+export declare function applyStyles(element: HTMLElement | SVGElement, styles: Record<string, string | null>): Record<string, string | null>;
+/**
+ * Copies the content of all canvases from the original element to the cloned element.
+ */
+export declare function copyCanvasesContent(original: Element, clone: Element): Promise<void[]>;

package/internals/plugins/useChartProExport/common.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.applyStyles = applyStyles;
+exports.copyCanvasesContent = copyCanvasesContent;
 exports.createExportIframe = createExportIframe;
 function createExportIframe(title) {
   const iframeEl = document.createElement('iframe');
@@ -25,4 +26,40 @@ function applyStyles(element, styles) {
     element.style.setProperty(key, value);
   });
   return previousStyles;
+}
+
+/**
+ * Copies the content of all canvases from the original element to the cloned element.
+ */
+function copyCanvasesContent(original, clone) {
+  const originalCanvases = original.querySelectorAll('canvas');
+  const cloneCanvases = clone.querySelectorAll('canvas');
+  const promises = Array.from(originalCanvases).map(async (originalCanvas, index) => {
+    return new Promise((resolve, reject) => {
+      const cloneCanvas = cloneCanvases[index];
+      if (cloneCanvas) {
+        const dataURL = originalCanvas.toDataURL();
+        const img = cloneCanvas.ownerDocument.createElement('img');
+        img.src = dataURL;
+        img.width = cloneCanvas.width;
+        img.height = cloneCanvas.height;
+        for (const styleKey in cloneCanvas.style) {
+          if (!Object.hasOwn(img.style, styleKey) || !Object.hasOwn(cloneCanvas.style, styleKey)) {
+            continue;
+          }
+          img.style[styleKey] = cloneCanvas.style[styleKey];
+        }
+        cloneCanvas.replaceWith(img);
+        img.onload = () => {
+          resolve();
+        };
+        img.onerror = event => {
+          reject(event);
+        };
+      } else {
+        resolve();
+      }
+    });
+  });
+  return Promise.all(promises);
 }

package/internals/plugins/useChartProExport/exportImage.d.ts

@@ -1,3 +1,3 @@
 import { type ChartImageExportOptions } from "./useChartProExport.types.js";
 export declare const getDrawDocument: () => Promise<typeof import("rasterizehtml").drawDocument>;
-export declare function exportImage(element: HTMLElement | SVGElement, svg: SVGElement, params?: ChartImageExportOptions): Promise<void>;
+export declare function exportImage(element: Element, svg: SVGElement, params?: ChartImageExportOptions): Promise<void>;

package/internals/plugins/useChartProExport/exportImage.js

@@ -62,6 +62,7 @@ async function exportImage(element, svg, params) {
     if (copyStyles) {
       await Promise.all((0, _export.loadStyleSheets)(exportDoc, root, nonce));
     }
+    await (0, _common.copyCanvasesContent)(element, elementClone);
     resolve();
   };
   doc.body.appendChild(iframe);

package/internals/plugins/useChartProExport/print.d.ts

@@ -1,5 +1,5 @@
 import { type ChartPrintExportOptions } from "./useChartProExport.types.js";
-export declare function printChart(element: HTMLElement | SVGElement, {
+export declare function printChart(element: Element, {
   fileName,
   onBeforeExport,
   copyStyles,

package/internals/plugins/useChartProExport/print.js

@@ -27,6 +27,7 @@ function printChart(element, {
     if (copyStyles) {
       await Promise.all((0, _export.loadStyleSheets)(printDoc, root, nonce));
     }
+    await (0, _common.copyCanvasesContent)(element, elementClone);
     const mediaQueryList = printWindow.contentWindow.matchMedia('print');
     mediaQueryList.addEventListener('change', mql => {
       const isAfterPrint = mql.matches === false;

package/internals/plugins/useChartProExport/useChartProExport.js

@@ -19,10 +19,12 @@ function waitForAnimationFrame() {
   return promise;
 }
 const useChartProExport = ({
-  chartRootRef,
-  svgRef,
   instance
 }) => {
+  const {
+    chartRootRef,
+    svgRef
+  } = instance;
   const exportAsPrint = async options => {
     const chartRoot = chartRootRef.current;
     if (chartRoot) {

package/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.d.ts

@@ -1,4 +1,4 @@
-export declare const selectorZoomInteractionConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorZoomInteractionConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, interactionName: "wheel" | "pinch" | "tapAndDrag" | "doubleTapReset" | "brush") => (Omit<import("./ZoomInteractionConfig.types.js").ZoomInteraction, "pointerMode"> & {
   mouse: {
@@ -10,7 +10,7 @@ export declare const selectorZoomInteractionConfig: (args_0: import("@mui/x-char
   pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
   allowedDirection?: "x" | "y" | "xy";
 }) | null;
-export declare const selectorPanInteractionConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorPanInteractionConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, interactionName: "wheel" | "drag" | "pressAndDrag") => (Omit<import("./ZoomInteractionConfig.types.js").PanInteraction, "pointerMode"> & {
   mouse: {

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const usePanOnDrag: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.js

@@ -13,9 +13,11 @@ var _useZoom = require("./useZoom.utils");
 var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const usePanOnDrag = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const config = store.use(_ZoomInteractionConfig.selectorPanInteractionConfig, 'drag');

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const usePanOnPressAndDrag: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.js

@@ -13,9 +13,11 @@ var _useZoom = require("./useZoom.utils");
 var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const usePanOnPressAndDrag = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const isInteracting = React.useRef(false);

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const usePanOnWheel: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.js

@@ -13,9 +13,11 @@ var _useZoom = require("./useZoom.utils");
 var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const usePanOnWheel = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const startedOutsideRef = React.useRef(false);
@@ -43,7 +45,7 @@ const usePanOnWheel = ({
     }
     const rafThrottledSetZoomData = (0, _rafThrottle.rafThrottle)(setZoomDataCallback);
     const wheelHandler = instance.addInteractionListener('panTurnWheel', event => {
-      const point = (0, _internals.getSVGPoint)(element, {
+      const point = (0, _internals.getChartPoint)(element, {
         clientX: event.detail.centroid.x,
         clientY: event.detail.centroid.y
       });

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnBrush: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<(prev: ZoomData[]) => ZoomData[]>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<(prev: ZoomData[]) => ZoomData[]>) => void;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.js

@@ -12,9 +12,11 @@ var _useZoom = require("./useZoom.utils");
 var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const useZoomOnBrush = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'brush');
@@ -32,11 +34,11 @@ const useZoomOnBrush = ({
     const handleBrushEnd = event => {
       // Convert the brush rectangle to zoom percentages for each axis
       setZoomDataCallback(prev => {
-        const startPoint = (0, _internals.getSVGPoint)(element, {
+        const startPoint = (0, _internals.getChartPoint)(element, {
           clientX: event.detail.initialCentroid.x,
           clientY: event.detail.initialCentroid.y
         });
-        const endPoint = (0, _internals.getSVGPoint)(element, {
+        const endPoint = (0, _internals.getChartPoint)(element, {
           clientX: event.detail.centroid.x,
           clientY: event.detail.centroid.y
         });

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnDoubleTapReset.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnDoubleTapReset: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnDoubleTapReset.js

@@ -11,9 +11,11 @@ var _internals = require("@mui/x-charts/internals");
 var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const useZoomOnDoubleTapReset = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'doubleTapReset');
   const isZoomOnDoubleTapResetEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnPinch: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.js

@@ -13,9 +13,11 @@ var _useZoom = require("./useZoom.utils");
 var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const useZoomOnPinch = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'pinch');
@@ -48,7 +50,7 @@ const useZoomOnPinch = ({
           }
           const isZoomIn = event.detail.direction > 0;
           const scaleRatio = 1 + event.detail.deltaScale;
-          const point = (0, _internals.getSVGPoint)(element, {
+          const point = (0, _internals.getChartPoint)(element, {
             clientX: event.detail.centroid.x,
             clientY: event.detail.centroid.y
           });

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.d.ts

@@ -3,6 +3,5 @@ import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnTapAndDrag: ({
   store,
-  instance,
-  svgRef
-}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;