@mui/x-charts-pro 8.0.0-alpha.1 → 8.0.0-alpha.11

package/node/LineChartPro/LineChartPro.js

@@ -13,7 +13,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _LineChart = require("@mui/x-charts/LineChart");
-var _ChartsOnAxisClickHandler = require("@mui/x-charts/ChartsOnAxisClickHandler");
 var _ChartsGrid = require("@mui/x-charts/ChartsGrid");
 var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
 var _ChartsAxis = require("@mui/x-charts/ChartsAxis");
@@ -21,18 +20,18 @@ var _ChartsAxisHighlight = require("@mui/x-charts/ChartsAxisHighlight");
 var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
 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 _ChartContainerPro = require("../ChartContainerPro");
-var _ZoomSetup = require("../context/ZoomProvider/ZoomSetup");
-var _useZoom = require("../context/ZoomProvider/useZoom");
+var _zoom = require("../hooks/zoom");
+var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
+var _ChartDataProviderPro = require("../ChartDataProviderPro");
+var _LineChartPro = require("./LineChartPro.plugins");
 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 = {
@@ -63,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 = {
@@ -98,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
   }));
@@ -110,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.
@@ -154,13 +143,14 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
     name: 'MuiLineChartPro'
   });
   const {
-      zoom,
-      onZoomChange
+      initialZoom,
+      onZoomChange,
+      apiRef
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
+    chartsWrapperProps,
     chartContainerProps,
-    axisClickHandlerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,
@@ -174,18 +164,27 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
     legendProps,
     children
   } = (0, _internals.useLineChartProps)(other);
+  const {
+    chartDataProviderProProps,
+    chartsSurfaceProps
+  } = (0, _useChartContainerProProps.useChartContainerProProps)((0, _extends2.default)({}, chartContainerProps, {
+    initialZoom,
+    onZoomChange,
+    apiRef,
+    plugins: _LineChartPro.LINE_CHART_PRO_PLUGINS
+  }), ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainerPro.ChartContainerPro, (0, _extends2.default)({
-    ref: ref
-  }, chartContainerProps, {
-    zoom: zoom,
-    onZoomChange: onZoomChange,
-    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, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AreaPlotZoom, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(LinePlotZoom, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-    })), /*#__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.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !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]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
+    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: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AreaPlotZoom, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(LinePlotZoom, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
+        })), /*#__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)), children]
+      }))]
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
@@ -193,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.
@@ -212,7 +216,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   className: _propTypes.default.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
   /**
@@ -230,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.
    */
@@ -250,12 +250,26 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   hideLegend: _propTypes.default.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
   }),
+  /**
+   * 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`.
@@ -271,7 +285,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,
@@ -337,6 +350,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.
@@ -379,7 +393,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -390,7 +403,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -442,7 +454,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -453,7 +464,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -475,11 +485,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/LineChartPro/LineChartPro.plugins.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LINE_CHART_PRO_PLUGINS = void 0;
+var _internals = require("@mui/x-charts/internals");
+var _useChartProZoom = require("../internals/plugins/useChartProZoom");
+const LINE_CHART_PRO_PLUGINS = exports.LINE_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProZoom.useChartProZoom];

package/node/ScatterChartPro/ScatterChartPro.js

@@ -14,18 +14,19 @@ 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");
 var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
+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 _ChartContainerPro = require("../ChartContainerPro");
-var _ZoomSetup = require("../context/ZoomProvider/ZoomSetup");
+var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
+var _ChartDataProviderPro = require("../ChartDataProviderPro");
+var _ScatterChartPro = require("./ScatterChartPro.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["zoom", "onZoomChange"];
+const _excluded = ["initialZoom", "onZoomChange", "apiRef"];
 /**
  * Demos:
  *
@@ -42,13 +43,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,
@@ -58,17 +60,26 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
     axisHighlightProps,
     children
   } = (0, _internals.useScatterChartProps)(other);
+  const {
+    chartDataProviderProProps,
+    chartsSurfaceProps
+  } = (0, _useChartContainerProProps.useChartContainerProProps)((0, _extends2.default)({}, chartContainerProps, {
+    initialZoom,
+    onZoomChange,
+    apiRef,
+    plugins: _ScatterChartPro.SCATTER_CHART_PRO_PLUGINS
+  }), ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContainerPro.ChartContainerPro, (0, _extends2.default)({
-    ref: ref
-  }, chartContainerProps, {
-    zoom: zoom,
-    onZoomChange: onZoomChange,
-    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)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props?.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomSetup.ZoomSetup, {}), children]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
+    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.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]
+      }))]
     }))
   }));
 });
@@ -77,6 +88,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.
@@ -96,7 +112,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   className: _propTypes.default.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
   /**
@@ -131,12 +147,26 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   hideLegend: _propTypes.default.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
   }),
+  /**
+   * 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`.
@@ -152,7 +182,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,
@@ -160,6 +189,13 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: _propTypes.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *
@@ -205,6 +241,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.
@@ -252,7 +289,6 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -263,7 +299,6 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -315,7 +350,6 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -326,7 +360,6 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -371,13 +404,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/ScatterChartPro/ScatterChartPro.plugins.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SCATTER_CHART_PRO_PLUGINS = void 0;
+var _internals = require("@mui/x-charts/internals");
+var _useChartProZoom = require("../internals/plugins/useChartProZoom");
+const SCATTER_CHART_PRO_PLUGINS = exports.SCATTER_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProZoom.useChartProZoom];

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.1
+ * @mui/x-charts-pro v8.0.0-alpha.11
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -187,17 +187,6 @@ Object.keys(_ChartsVoronoiHandler).forEach(function (key) {
     }
   });
 });
-var _ChartsOnAxisClickHandler = require("@mui/x-charts/ChartsOnAxisClickHandler");
-Object.keys(_ChartsOnAxisClickHandler).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ChartsOnAxisClickHandler[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartsOnAxisClickHandler[key];
-    }
-  });
-});
 var _BarChart = require("@mui/x-charts/BarChart");
 Object.keys(_BarChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -275,6 +264,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 +308,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 +351,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];
-    }
-  });
 });