@mui/x-charts-pro 8.0.0-alpha.7 → 8.0.0-alpha.9

package/node/Heatmap/Heatmap.js

@@ -24,6 +24,9 @@ var _HeatmapTooltip = require("./HeatmapTooltip");
 var _jsxRuntime = require("react/jsx-runtime");
 // The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
 const defaultColorMap = (0, _d3Interpolate.interpolateRgbBasis)(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
+const seriesConfig = {
+  heatmap: _plugin.plugin
+};
 const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,
@@ -73,7 +76,7 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
   const Tooltip = props.slots?.tooltip ?? _HeatmapTooltip.HeatmapTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainerPro.ChartContainerPro, {
     ref: ref,
-    plugins: [_plugin.plugin],
+    seriesConfig: seriesConfig,
     series: series.map(s => (0, _extends2.default)({
       type: 'heatmap'
     }, s)),
@@ -118,6 +121,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      setZoomData: _propTypes.default.func.isRequired
+    })
+  }),
   /**
    * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
@@ -153,6 +161,19 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    end: _propTypes.default.number.isRequired,
+    start: _propTypes.default.number.isRequired
+  })),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -168,7 +189,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -200,6 +220,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * An array of [[HeatmapSeriesType]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * The configuration helpers used to compute attributes according to the serries type.
+   * @ignore Unstable props for internal usage.
+   */
+  seriesConfig: _propTypes.default.object,
   /**
    * The props used for each component slot.
    * @default {}
@@ -211,6 +236,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    */
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
   /**
    * The configuration of the tooltip.

package/node/Heatmap/HeatmapTooltip.js

@@ -54,7 +54,8 @@ function DefaultHeatmapTooltipContent(props) {
   const {
     color,
     value,
-    identifier
+    identifier,
+    markType
   } = tooltipData;
   const [xIndex, yIndex] = value;
   const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
@@ -87,7 +88,8 @@ function DefaultHeatmapTooltipContent(props) {
           className: classes?.row,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
             className: (0, _clsx.default)(classes?.markCell, classes?.cell),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipMark, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.ChartsLabelMark, {
+              type: markType,
               color: color,
               className: classes?.mark
             })

package/node/Heatmap/formatter.js

@@ -16,7 +16,8 @@ const formatter = params => {
     defaultizedSeries[seriesId] = (0, _extends2.default)({
       // Defaultize the data and the value formatter.
       valueFormatter: v => v[2].toString(),
-      data: []
+      data: [],
+      labelMarkType: 'square'
     }, series[seriesId]);
   });
   return {

package/node/Heatmap/plugin.js

@@ -9,9 +9,9 @@ var _extremums = require("./extremums");
 var _formatter = _interopRequireDefault(require("./formatter"));
 var _getColor = _interopRequireDefault(require("./getColor"));
 const plugin = exports.plugin = {
-  seriesType: 'heatmap',
-  seriesFormatter: _formatter.default,
+  seriesProcessor: _formatter.default,
   colorProcessor: _getColor.default,
+  legendGetter: () => [],
   xExtremumGetter: _extremums.getBaseExtremum,
   yExtremumGetter: _extremums.getBaseExtremum
 };

package/node/LineChartPro/LineChartPro.js

@@ -23,18 +23,15 @@ var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
 var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
 var _internals = require("@mui/x-charts/internals");
-var _ZoomSetup = require("../context/ZoomProvider/ZoomSetup");
-var _useZoom = require("../context/ZoomProvider/useZoom");
-var _ChartDataProviderPro = require("../context/ChartDataProviderPro");
+var _zoom = require("../hooks/zoom");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
+var _ChartDataProviderPro = require("../ChartDataProviderPro");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["zoom", "onZoomChange"];
+const _excluded = ["initialZoom", "onZoomChange", "apiRef"];
 function AreaPlotZoom(props) {
-  const {
-    isInteracting
-  } = (0, _useZoom.useZoom)();
+  const isInteracting = (0, _zoom.useIsZoomInteracting)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, (0, _extends2.default)({}, props, {
-    skipAnimation: isInteracting || undefined
+    skipAnimation: isInteracting || props.skipAnimation
   }));
 }
 process.env.NODE_ENV !== "production" ? AreaPlotZoom.propTypes = {
@@ -65,11 +62,9 @@ process.env.NODE_ENV !== "production" ? AreaPlotZoom.propTypes = {
   slots: _propTypes.default.object
 } : void 0;
 function LinePlotZoom(props) {
-  const {
-    isInteracting
-  } = (0, _useZoom.useZoom)();
+  const isInteracting = (0, _zoom.useIsZoomInteracting)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, (0, _extends2.default)({}, props, {
-    skipAnimation: isInteracting || undefined
+    skipAnimation: isInteracting || props.skipAnimation
   }));
 }
 process.env.NODE_ENV !== "production" ? LinePlotZoom.propTypes = {
@@ -100,9 +95,7 @@ process.env.NODE_ENV !== "production" ? LinePlotZoom.propTypes = {
   slots: _propTypes.default.object
 } : void 0;
 function MarkPlotZoom(props) {
-  const {
-    isInteracting
-  } = (0, _useZoom.useZoom)();
+  const isInteracting = (0, _zoom.useIsZoomInteracting)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.MarkPlot, (0, _extends2.default)({}, props, {
     skipAnimation: isInteracting || undefined
   }));
@@ -112,12 +105,6 @@ process.env.NODE_ENV !== "production" ? MarkPlotZoom.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * If `true` the mark element will only be able to render circle.
-   * Giving fewer customization options, but saving around 40ms per 1.000 marks.
-   * @default false
-   */
-  experimentalRendering: _propTypes.default.bool,
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
@@ -156,8 +143,9 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
     name: 'MuiLineChartPro'
   });
   const {
-      zoom,
-      onZoomChange
+      initialZoom,
+      onZoomChange,
+      apiRef
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -180,11 +168,13 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
   const {
     chartDataProviderProProps,
     chartsSurfaceProps
-  } = (0, _useChartContainerProProps.useChartContainerProProps)(chartContainerProps, ref);
+  } = (0, _useChartContainerProProps.useChartContainerProProps)((0, _extends2.default)({}, chartContainerProps, {
+    initialZoom,
+    onZoomChange,
+    apiRef
+  }), ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
-    zoom: zoom,
-    onZoomChange: onZoomChange,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
@@ -192,7 +182,7 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
         })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkPlotZoom, (0, _extends2.default)({}, markPlotProps))
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomSetup.ZoomSetup, {}), children]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
       }))]
     }))
   }));
@@ -202,6 +192,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      setZoomData: _propTypes.default.func.isRequired
+    })
+  }),
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -239,10 +234,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
-  /**
-   * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
-   */
-  experimentalMarkRendering: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -265,6 +256,19 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    end: _propTypes.default.number.isRequired,
+    start: _propTypes.default.number.isRequired
+  })),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -280,7 +284,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -346,6 +349,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
   /**
    * Indicate which axis to display the top of the charts.
@@ -480,11 +484,28 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     }), _propTypes.default.bool])
   })),
   /**
-   * The list of zoom data related to each axis.
+   * The configuration of the z-axes.
    */
-  zoom: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    end: _propTypes.default.number.isRequired,
-    start: _propTypes.default.number.isRequired
+  zAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    id: _propTypes.default.string,
+    max: _propTypes.default.number,
+    min: _propTypes.default.number
   }))
 } : void 0;

package/node/ScatterChartPro/ScatterChartPro.js

@@ -14,7 +14,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
 var _ScatterChart = require("@mui/x-charts/ScatterChart");
-var _context = require("@mui/x-charts/context");
 var _ChartsVoronoiHandler = require("@mui/x-charts/ChartsVoronoiHandler");
 var _ChartsAxis = require("@mui/x-charts/ChartsAxis");
 var _ChartsGrid = require("@mui/x-charts/ChartsGrid");
@@ -23,11 +22,10 @@ var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
 var _ChartsAxisHighlight = require("@mui/x-charts/ChartsAxisHighlight");
 var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _internals = require("@mui/x-charts/internals");
-var _ZoomSetup = require("../context/ZoomProvider/ZoomSetup");
-var _ChartDataProviderPro = require("../context/ChartDataProviderPro");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
+var _ChartDataProviderPro = require("../ChartDataProviderPro");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["zoom", "onZoomChange"];
+const _excluded = ["initialZoom", "onZoomChange", "apiRef"];
 /**
  * Demos:
  *
@@ -44,14 +42,14 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
     name: 'MuiScatterChartPro'
   });
   const {
-      zoom,
-      onZoomChange
+      initialZoom,
+      onZoomChange,
+      apiRef
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
     chartsWrapperProps,
     chartContainerProps,
-    zAxisProps,
     voronoiHandlerProps,
     chartsAxisProps,
     gridProps,
@@ -64,21 +62,21 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
   const {
     chartDataProviderProProps,
     chartsSurfaceProps
-  } = (0, _useChartContainerProProps.useChartContainerProProps)(chartContainerProps, ref);
+  } = (0, _useChartContainerProProps.useChartContainerProProps)((0, _extends2.default)({}, chartContainerProps, {
+    initialZoom,
+    onZoomChange,
+    apiRef
+  }), ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
-    zoom: zoom,
-    onZoomChange: onZoomChange,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_context.ZAxisContextProvider, (0, _extends2.default)({}, zAxisProps, {
-          children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-            "data-drawing-container": true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props?.slotProps?.tooltip, {
-            trigger: "item"
-          })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomSetup.ZoomSetup, {}), children]
-        }))
+      children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+        children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+          "data-drawing-container": true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props?.slotProps?.tooltip, {
+          trigger: "item"
+        })), children]
       }))]
     }))
   }));
@@ -88,6 +86,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      setZoomData: _propTypes.default.func.isRequired
+    })
+  }),
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -148,6 +151,19 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    end: _propTypes.default.number.isRequired,
+    start: _propTypes.default.number.isRequired
+  })),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -163,7 +179,6 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -216,6 +231,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
   /**
    * Indicate which axis to display the top of the charts.
@@ -378,13 +394,5 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     id: _propTypes.default.string,
     max: _propTypes.default.number,
     min: _propTypes.default.number
-  })),
-  /**
-   * The list of zoom data related to each axis.
-   */
-  zoom: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    end: _propTypes.default.number.isRequired,
-    start: _propTypes.default.number.isRequired
   }))
 } : void 0;

package/node/hooks/index.js

@@ -3,10 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  unstable_useHeatmapSeries: true
+};
 Object.defineProperty(exports, "unstable_useHeatmapSeries", {
   enumerable: true,
   get: function () {
     return _useSeries.useHeatmapSeries;
   }
 });
-var _useSeries = require("./useSeries");
+var _useSeries = require("./useSeries");
+var _zoom = require("./zoom");
+Object.keys(_zoom).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _zoom[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _zoom[key];
+    }
+  });
+});

package/node/{context/CartesianProviderPro → hooks/zoom}/index.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _CartesianProviderPro = require("./CartesianProviderPro");
-Object.keys(_CartesianProviderPro).forEach(function (key) {
+var _useIsZoomInteracting = require("./useIsZoomInteracting");
+Object.keys(_useIsZoomInteracting).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _CartesianProviderPro[key]) return;
+  if (key in exports && exports[key] === _useIsZoomInteracting[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _CartesianProviderPro[key];
+      return _useIsZoomInteracting[key];
     }
   });
 });

package/node/hooks/zoom/useIsZoomInteracting.js

@@ -0,0 +1,19 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsZoomInteracting = useIsZoomInteracting;
+var _internals = require("@mui/x-charts/internals");
+var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
+/**
+ * Get access to the zoom state.
+ *
+ * @returns {boolean} Inform the zoom is interacting.
+ */
+function useIsZoomInteracting() {
+  const store = (0, _internals.useStore)();
+  const isInteracting = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartZoomIsInteracting);
+  return isInteracting;
+}

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.0.0-alpha.7
+ * @mui/x-charts-pro v8.0.0-alpha.9
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -275,6 +275,28 @@ Object.keys(_ChartsSurface).forEach(function (key) {
     }
   });
 });
+var _ChartDataProvider = require("@mui/x-charts/ChartDataProvider");
+Object.keys(_ChartDataProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") 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;
+  if (key in exports && exports[key] === _ChartsLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsLabel[key];
+    }
+  });
+});
 var _Heatmap = require("./Heatmap");
 Object.keys(_Heatmap).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -297,6 +319,17 @@ Object.keys(_ChartContainerPro).forEach(function (key) {
     }
   });
 });
+var _ChartDataProviderPro = require("./ChartDataProviderPro");
+Object.keys(_ChartDataProviderPro).forEach(function (key) {
+  if (key === "default" || key === "__esModule") 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;
@@ -329,15 +362,4 @@ Object.keys(_LineChartPro).forEach(function (key) {
       return _LineChartPro[key];
     }
   });
-});
-var _context2 = require("./context");
-Object.keys(_context2).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _context2[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _context2[key];
-    }
-  });
 });

package/node/internals/plugins/allPlugins.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ALL_PLUGINS = void 0;
+var _internals = require("@mui/x-charts/internals");
+var _useChartProZoom = require("./useChartProZoom");
+// This file should be removed after creating all plugins in favor of a file per chart type.
+
+const ALL_PLUGINS = exports.ALL_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _useChartProZoom.useChartProZoom];

package/node/internals/plugins/useChartProZoom/creatZoomLookup.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.creatZoomLookup = void 0;
+var _defaultizeZoom = require("./defaultizeZoom");
+const creatZoomLookup = axes => axes.reduce((acc, v) => {
+  const {
+    zoom,
+    id: axisId
+  } = v;
+  const defaultizedZoom = (0, _defaultizeZoom.defaultizeZoom)(zoom, axisId, 'x');
+  if (defaultizedZoom) {
+    acc[axisId] = defaultizedZoom;
+  }
+  return acc;
+}, {});
+exports.creatZoomLookup = creatZoomLookup;

package/node/internals/plugins/useChartProZoom/defaultizeZoom.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultizeZoom = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const defaultZoomOptions = {
+  minStart: 0,
+  maxEnd: 100,
+  step: 5,
+  minSpan: 10,
+  maxSpan: 100,
+  panning: true,
+  filterMode: 'keep'
+};
+const defaultizeZoom = (zoom, axisId, axisDirection) => {
+  if (!zoom) {
+    return undefined;
+  }
+  if (zoom === true) {
+    return (0, _extends2.default)({
+      axisId,
+      axisDirection
+    }, defaultZoomOptions);
+  }
+  return (0, _extends2.default)({
+    axisId,
+    axisDirection
+  }, defaultZoomOptions, zoom);
+};
+exports.defaultizeZoom = defaultizeZoom;