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

package/esm/SankeyChart/seriesConfig/getSeriesWithDefaultValues.js

@@ -54,6 +54,16 @@ export const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
       color: resolvedColor
     });
   });
+  const highlightScope = {
+    nodes: {
+      highlight: seriesData.nodeOptions?.highlight ?? 'links',
+      fade: seriesData.nodeOptions?.fade ?? 'none'
+    },
+    links: {
+      highlight: seriesData.linkOptions?.highlight ?? 'links',
+      fade: seriesData.linkOptions?.fade ?? 'none'
+    }
+  };
   if (!seriesData.data || !links) {
     return _extends({
       id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
@@ -62,7 +72,8 @@ export const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
       data: {
         nodes: [],
         links: []
-      }
+      },
+      highlightScope
     });
   }
 
@@ -93,6 +104,7 @@ export const getSeriesWithDefaultValues = (seriesData, seriesIndex, colors) => {
     id: seriesData.id ?? `auto-generated-id-${seriesIndex}`
   }, seriesData, {
     valueFormatter: seriesData.valueFormatter ?? defaultSankeyValueFormatter,
+    highlightScope,
     data
   });
 };

package/esm/SankeyChart/seriesConfig/identifierCleaner.d.ts

@@ -0,0 +1,3 @@
+import type { IdentifierCleaner } from '@mui/x-charts/internals';
+declare const identifierCleaner: IdentifierCleaner<'sankey'>;
+export default identifierCleaner;

package/esm/SankeyChart/seriesConfig/identifierCleaner.js

@@ -0,0 +1,18 @@
+const identifierCleaner = identifier => {
+  if (identifier.subType === 'node') {
+    return {
+      type: identifier.type,
+      seriesId: identifier.seriesId,
+      subType: 'node',
+      nodeId: identifier.nodeId
+    };
+  }
+  return {
+    type: identifier.type,
+    seriesId: identifier.seriesId,
+    subType: 'link',
+    sourceId: identifier.sourceId,
+    targetId: identifier.targetId
+  };
+};
+export default identifierCleaner;

package/esm/SankeyChart/seriesConfig/index.js

@@ -4,6 +4,7 @@ import { calculateSankeyLayout } from "../calculateSankeyLayout.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
 import keyboardFocusHandler from "./keyboardFocusHandler.js";
 import identifierSerializer from "./identifierSerializer.js";
+import identifierCleaner from "./identifierCleaner.js";
 
 // Simple passthrough functions for sankey chart
 const seriesProcessor = series => series;
@@ -28,5 +29,6 @@ export const sankeySeriesConfig = {
   tooltipItemPositionGetter,
   getSeriesWithDefaultValues,
   keyboardFocusHandler,
-  identifierSerializer
+  identifierSerializer,
+  identifierCleaner
 };

package/esm/ScatterChartPro/ScatterChartPro.d.ts

@@ -35,5 +35,5 @@ export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' |
  *
  * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
  */
-declare const ScatterChartPro: React.ForwardRefExoticComponent<ScatterChartProProps & React.RefAttributes<SVGSVGElement>>;
+declare const ScatterChartPro: React.ForwardRefExoticComponent<ScatterChartProProps & React.RefAttributes<HTMLDivElement>>;
 export { ScatterChartPro };

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -66,11 +66,12 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(i
     onZoomChange,
     apiRef,
     plugins: SCATTER_CHART_PRO_PLUGINS
-  }), ref);
+  }));
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      ref: ref,
       children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
@@ -96,6 +97,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       setZoomData: PropTypes.func.isRequired
     })
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: PropTypes.number,
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -170,8 +176,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['scatter']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['scatter'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -183,7 +189,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -213,8 +219,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['scatter']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['scatter'])
   })),
   /**
    * The list of zoom data related to each axis.
@@ -270,6 +276,14 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: PropTypes.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -319,14 +333,22 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    dataIndex: PropTypes.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['scatter']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['scatter'])
   }),
   /**
    * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.

package/esm/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/esm/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
@@ -44,6 +44,7 @@ export * from "./colorPalettes/index.js";
 
 // Pro components
 export * from "./Heatmap/index.js";
+export { ChartsContainerPro } from "./ChartsContainerPro/index.js";
 export { ChartContainerPro } from "./ChartContainerPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";

package/esm/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/esm/internals/index.js

@@ -1,4 +1,8 @@
+export { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.js";
 export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 export { seriesPreviewPlotMap } from "../ChartZoomSlider/internals/seriesPreviewPlotMap.js";
 export { defaultSeriesConfigPro } from "../ChartDataProviderPro/ChartDataProviderPro.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 { selectorHeatmapItemAtPosition } from "../plugins/selectors/useChartHeatmapPosition.selectors.js";

package/esm/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/esm/internals/plugins/useChartProExport/common.js

@@ -18,4 +18,40 @@ export 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.
+ */
+export 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/esm/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/esm/internals/plugins/useChartProExport/exportImage.js

@@ -1,6 +1,6 @@
 import ownerDocument from '@mui/utils/ownerDocument';
 import { loadStyleSheets } from '@mui/x-internals/export';
-import { applyStyles, createExportIframe } from "./common.js";
+import { applyStyles, copyCanvasesContent, createExportIframe } from "./common.js";
 import { defaultOnBeforeExport } from "./defaults.js";
 export const getDrawDocument = async () => {
   try {
@@ -52,6 +52,7 @@ export async function exportImage(element, svg, params) {
     if (copyStyles) {
       await Promise.all(loadStyleSheets(exportDoc, root, nonce));
     }
+    await copyCanvasesContent(element, elementClone);
     resolve();
   };
   doc.body.appendChild(iframe);

package/esm/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/esm/internals/plugins/useChartProExport/print.js

@@ -1,6 +1,6 @@
 import ownerDocument from '@mui/utils/ownerDocument';
 import { loadStyleSheets } from '@mui/x-internals/export';
-import { createExportIframe } from "./common.js";
+import { copyCanvasesContent, createExportIframe } from "./common.js";
 import { defaultOnBeforeExport } from "./defaults.js";
 export function printChart(element, {
   fileName,
@@ -20,6 +20,7 @@ export function printChart(element, {
     if (copyStyles) {
       await Promise.all(loadStyleSheets(printDoc, root, nonce));
     }
+    await copyCanvasesContent(element, elementClone);
     const mediaQueryList = printWindow.contentWindow.matchMedia('print');
     mediaQueryList.addEventListener('change', mql => {
       const isAfterPrint = mql.matches === false;

package/esm/internals/plugins/useChartProExport/useChartProExport.js

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

package/esm/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/esm/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/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.js

@@ -7,9 +7,11 @@ import { translateZoom } from "./useZoom.utils.js";
 import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const usePanOnDrag = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const config = store.use(selectorPanInteractionConfig, 'drag');

package/esm/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/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.js

@@ -7,9 +7,11 @@ import { translateZoom } from "./useZoom.utils.js";
 import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const usePanOnPressAndDrag = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const isInteracting = React.useRef(false);

package/esm/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/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.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 { translateZoom } from "./useZoom.utils.js";
 import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const usePanOnWheel = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const startedOutsideRef = React.useRef(false);
@@ -37,7 +39,7 @@ export const usePanOnWheel = ({
     }
     const rafThrottledSetZoomData = rafThrottle(setZoomDataCallback);
     const wheelHandler = instance.addInteractionListener('panTurnWheel', event => {
-      const point = getSVGPoint(element, {
+      const point = getChartPoint(element, {
         clientX: event.detail.centroid.x,
         clientY: event.detail.centroid.y
       });

package/esm/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/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.js

@@ -1,14 +1,16 @@
 '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 { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid } from "./useZoom.utils.js";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const useZoomOnBrush = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const config = store.use(selectorZoomInteractionConfig, 'brush');
@@ -26,11 +28,11 @@ export const useZoomOnBrush = ({
     const handleBrushEnd = event => {
       // Convert the brush rectangle to zoom percentages for each axis
       setZoomDataCallback(prev => {
-        const startPoint = getSVGPoint(element, {
+        const startPoint = getChartPoint(element, {
           clientX: event.detail.initialCentroid.x,
           clientY: event.detail.initialCentroid.y
         });
-        const endPoint = getSVGPoint(element, {
+        const endPoint = getChartPoint(element, {
           clientX: event.detail.centroid.x,
           clientY: event.detail.centroid.y
         });

package/esm/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/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnDoubleTapReset.js

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

package/esm/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/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.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, isSpanValid, zoomAtPoint } from "./useZoom.utils.js";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const useZoomOnPinch = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const config = store.use(selectorZoomInteractionConfig, 'pinch');
@@ -42,7 +44,7 @@ export const useZoomOnPinch = ({
           }
           const isZoomIn = event.detail.direction > 0;
           const scaleRatio = 1 + event.detail.deltaScale;
-          const point = getSVGPoint(element, {
+          const point = getChartPoint(element, {
             clientX: event.detail.centroid.x,
             clientY: event.detail.centroid.y
           });

package/esm/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;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.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, isSpanValid, zoomAtPoint } from "./useZoom.utils.js";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const useZoomOnTapAndDrag = ({
   store,
-  instance,
-  svgRef
+  instance
 }, setZoomDataCallback) => {
+  const {
+    svgRef
+  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const config = store.use(selectorZoomInteractionConfig, 'tapAndDrag');
@@ -47,7 +49,7 @@ export const useZoomOnTapAndDrag = ({
           }
           const isZoomIn = event.detail.deltaY > 0;
           const scaleRatio = 1 + event.detail.deltaY / 100;
-          const point = getSVGPoint(element, {
+          const point = getChartPoint(element, {
             clientX: event.detail.initialCentroid.x,
             clientY: event.detail.initialCentroid.y
           });

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.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 useZoomOnWheel: ({
   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;