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

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v9.0.0-alpha.3
+ * @mui/x-charts-pro v9.0.0-alpha.4
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -11,15 +11,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  ChartsContainerPro: true,
-  ChartContainerPro: true
+  ChartsContainerPro: true
 };
-Object.defineProperty(exports, "ChartContainerPro", {
-  enumerable: true,
-  get: function () {
-    return _ChartContainerPro.ChartContainerPro;
-  }
-});
 Object.defineProperty(exports, "ChartsContainerPro", {
   enumerable: true,
   get: function () {
@@ -267,18 +260,6 @@ Object.keys(_ChartsDataProvider).forEach(function (key) {
     }
   });
 });
-var _ChartDataProvider = require("@mui/x-charts/ChartDataProvider");
-Object.keys(_ChartDataProvider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ChartDataProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartDataProvider[key];
-    }
-  });
-});
 var _ChartsLabel = require("@mui/x-charts/ChartsLabel");
 Object.keys(_ChartsLabel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -400,7 +381,6 @@ Object.keys(_Heatmap).forEach(function (key) {
   });
 });
 var _ChartsContainerPro = require("./ChartsContainerPro");
-var _ChartContainerPro = require("./ChartContainerPro");
 var _ChartsDataProviderPro = require("./ChartsDataProviderPro");
 Object.keys(_ChartsDataProviderPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -413,18 +393,6 @@ Object.keys(_ChartsDataProviderPro).forEach(function (key) {
     }
   });
 });
-var _ChartDataProviderPro = require("./ChartDataProviderPro");
-Object.keys(_ChartDataProviderPro).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ChartDataProviderPro[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartDataProviderPro[key];
-    }
-  });
-});
 var _ScatterChartPro = require("./ScatterChartPro");
 Object.keys(_ScatterChartPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v9.0.0-alpha.3
+ * @mui/x-charts-pro v9.0.0-alpha.4
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -28,7 +28,6 @@ export * from '@mui/x-charts/Gauge';
 export * from '@mui/x-charts/RadarChart';
 export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartsDataProvider';
-export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
 export * from '@mui/x-charts/ChartsOverlay';
 export * from '@mui/x-charts/ChartsWrapper';
@@ -46,9 +45,7 @@ export * from "./colorPalettes/index.mjs";
 // Pro components
 export * from "./Heatmap/index.mjs";
 export { ChartsContainerPro } from "./ChartsContainerPro/index.mjs";
-export { ChartContainerPro } from "./ChartContainerPro/index.mjs";
 export * from "./ChartsDataProviderPro/index.mjs";
-export * from "./ChartDataProviderPro/index.mjs";
 export * from "./ScatterChartPro/index.mjs";
 export * from "./SankeyChart/index.mjs";
 export * from "./BarChartPro/index.mjs";

package/internals/index.d.mts

@@ -1,6 +1,5 @@
 export { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.mjs";
 export type { UseChartsContainerProPropsReturnValue } from "../ChartsContainerPro/useChartsContainerProProps.mjs";
-export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.mjs";
 export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.mjs";
 export { seriesPreviewPlotMap } from "../ChartsZoomSlider/internals/seriesPreviewPlotMap.mjs";
 export type { PreviewPlotProps } from "../ChartsZoomSlider/internals/previews/PreviewPlot.types.mjs";

package/internals/index.d.ts

@@ -1,6 +1,5 @@
 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 "../ChartsZoomSlider/internals/seriesPreviewPlotMap.js";
 export type { PreviewPlotProps } from "../ChartsZoomSlider/internals/previews/PreviewPlot.types.js";

package/internals/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   useChartsContainerProProps: true,
-  useChartContainerProProps: true,
   seriesPreviewPlotMap: true,
   defaultSeriesConfigPro: true,
   useHeatmapProps: true,
@@ -36,12 +35,6 @@ Object.defineProperty(exports, "seriesPreviewPlotMap", {
     return _seriesPreviewPlotMap.seriesPreviewPlotMap;
   }
 });
-Object.defineProperty(exports, "useChartContainerProProps", {
-  enumerable: true,
-  get: function () {
-    return _useChartContainerProProps.useChartContainerProProps;
-  }
-});
 Object.defineProperty(exports, "useChartsContainerProProps", {
   enumerable: true,
   get: function () {
@@ -55,7 +48,6 @@ Object.defineProperty(exports, "useHeatmapProps", {
   }
 });
 var _useChartsContainerProProps = require("../ChartsContainerPro/useChartsContainerProProps");
-var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _seriesPreviewPlotMap = require("../ChartsZoomSlider/internals/seriesPreviewPlotMap");
 var _ChartsDataProviderPro = require("../ChartsDataProviderPro/ChartsDataProviderPro");
 var _useHeatmapProps = require("../Heatmap/useHeatmapProps");

package/internals/index.mjs

@@ -1,5 +1,4 @@
 export { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.mjs";
-export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.mjs";
 export { seriesPreviewPlotMap } from "../ChartsZoomSlider/internals/seriesPreviewPlotMap.mjs";
 export { defaultSeriesConfigPro } from "../ChartsDataProviderPro/ChartsDataProviderPro.mjs";
 export { useHeatmapProps } from "../Heatmap/useHeatmapProps.mjs";

package/internals/plugins/useChartProExport/common.js

@@ -41,14 +41,10 @@ function copyCanvasesContent(original, clone) {
         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];
-        }
+        // Use the CSS dimensions (not canvas.width/height which are in device pixels)
+        img.width = originalCanvas.clientWidth;
+        img.height = originalCanvas.clientHeight;
+        img.style.cssText = cloneCanvas.style.cssText;
         cloneCanvas.replaceWith(img);
         img.onload = () => {
           resolve();

package/internals/plugins/useChartProExport/common.mjs

@@ -33,14 +33,10 @@ export function copyCanvasesContent(original, clone) {
         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];
-        }
+        // Use the CSS dimensions (not canvas.width/height which are in device pixels)
+        img.width = originalCanvas.clientWidth;
+        img.height = originalCanvas.clientHeight;
+        img.style.cssText = cloneCanvas.style.cssText;
         cloneCanvas.replaceWith(img);
         img.onload = () => {
           resolve();

package/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.mts

@@ -99,7 +99,7 @@ export type DoubleTapResetInteraction = Unpack<{
 } & AllModeProp & AllKeysProp>;
 export type BrushInteraction = Unpack<{
   type: 'brush';
-} & NoModeProp & NoKeysProp>;
+} & AllModeProp & AllKeysProp>;
 export type AnyInteraction = {
   type: string;
   pointerMode?: InteractionMode;

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

@@ -99,7 +99,7 @@ export type DoubleTapResetInteraction = Unpack<{
 } & AllModeProp & AllKeysProp>;
 export type BrushInteraction = Unpack<{
   type: 'brush';
-} & NoModeProp & NoKeysProp>;
+} & AllModeProp & AllKeysProp>;
 export type AnyInteraction = {
   type: string;
   pointerMode?: InteractionMode;

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

@@ -22,8 +22,23 @@ const useZoomOnBrush = ({
   const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'brush');
   const isZoomOnBrushEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
-    instance.setZoomBrushEnabled(isZoomOnBrushEnabled);
+    if ('setZoomBrushEnabled' in instance) {
+      instance.setZoomBrushEnabled(isZoomOnBrushEnabled);
+    }
   }, [isZoomOnBrushEnabled, instance]);
+  React.useEffect(() => {
+    if (!isZoomOnBrushEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('brush', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [isZoomOnBrushEnabled, config, instance]);
 
   // Zoom on brush
   React.useEffect(() => {

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

@@ -16,8 +16,23 @@ export const useZoomOnBrush = ({
   const config = store.use(selectorZoomInteractionConfig, 'brush');
   const isZoomOnBrushEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
-    instance.setZoomBrushEnabled(isZoomOnBrushEnabled);
+    if ('setZoomBrushEnabled' in instance) {
+      instance.setZoomBrushEnabled(isZoomOnBrushEnabled);
+    }
   }, [isZoomOnBrushEnabled, instance]);
+  React.useEffect(() => {
+    if (!isZoomOnBrushEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('brush', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [isZoomOnBrushEnabled, config, instance]);
 
   // Zoom on brush
   React.useEffect(() => {