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

package/node/Heatmap/HeatmapTooltip.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _hooks = require("@mui/x-charts/hooks");
@@ -34,10 +35,6 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _ChartsTooltip.getChartsTooltipUtilityClass, classes);
 };
-
-/**
- * @ignore - internal component.
- */
 function DefaultHeatmapTooltipContent(props) {
   const {
     classes
@@ -57,7 +54,8 @@ function DefaultHeatmapTooltipContent(props) {
   const {
     color,
     value,
-    identifier
+    identifier,
+    markType
   } = tooltipData;
   const [xIndex, yIndex] = value;
   const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
@@ -90,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
             })
@@ -139,26 +138,7 @@ process.env.NODE_ENV !== "production" ? HeatmapTooltip.propTypes = {
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: _propTypes.default.oneOfType([(props, propName) => {
-    if (props[propName] == null) {
-      return new Error(`Prop '${propName}' is required but wasn't specified`);
-    }
-    if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-      return new Error(`Expected prop '${propName}' to be of type Element`);
-    }
-    return null;
-  }, _propTypes.default.func, _propTypes.default.shape({
-    contextElement: (props, propName) => {
-      if (props[propName] == null) {
-        return null;
-      }
-      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error(`Expected prop '${propName}' to be of type Element`);
-      }
-      return null;
-    },
-    getBoundingClientRect: _propTypes.default.func.isRequired
-  })]),
+  anchorEl: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_HTMLElementType.default, _propTypes.default.object, _propTypes.default.func]),
   /**
    * Override or extend the styles applied to the component.
    */

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/heatmapClasses.js

@@ -7,15 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.getHeatmapUtilityClass = getHeatmapUtilityClass;
 exports.heatmapClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _utils = require("@mui/utils");
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getHeatmapUtilityClass(slot) {
   // Those should be common to all charts
   if (['highlighted', 'faded'].includes(slot)) {
-    return (0, _utils.unstable_generateUtilityClass)('Charts', slot);
+    return (0, _generateUtilityClass.default)('Charts', slot);
   }
-  return (0, _utils.unstable_generateUtilityClass)('MuiHeatmap', slot);
+  return (0, _generateUtilityClass.default)('MuiHeatmap', slot);
 }
-const heatmapClasses = exports.heatmapClasses = (0, _extends2.default)({}, (0, _utils.unstable_generateUtilityClasses)('MuiHeatmap', ['cell']), {
+const heatmapClasses = exports.heatmapClasses = (0, _extends2.default)({}, (0, _generateUtilityClasses.default)('MuiHeatmap', ['cell']), {
   highlighted: 'Charts-highlighted',
   faded: 'Charts-faded'
 });

package/node/Heatmap/plugin.js

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

package/node/Heatmap/tooltip.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _internals = require("@mui/x-charts/internals");
+const tooltipGetter = params => {
+  const {
+    series,
+    getColor,
+    identifier
+  } = params;
+  if (!identifier || identifier.dataIndex === undefined) {
+    return null;
+  }
+  const label = (0, _internals.getLabel)(series.label, 'tooltip');
+  const value = series.data[identifier.dataIndex];
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex: identifier.dataIndex
+  });
+  return {
+    identifier,
+    color: getColor(identifier.dataIndex),
+    label,
+    value,
+    formattedValue,
+    markType: series.labelMarkType
+  };
+};
+var _default = exports.default = tooltipGetter;

package/node/LineChartPro/LineChartPro.js

@@ -21,18 +21,17 @@ 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 _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,11 +143,13 @@ 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,
@@ -174,18 +165,26 @@ 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
+  }), 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: [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.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.
@@ -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/ScatterChartPro/ScatterChartPro.js

@@ -14,18 +14,18 @@ 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 _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["zoom", "onZoomChange"];
+const _excluded = ["initialZoom", "onZoomChange", "apiRef"];
 /**
  * Demos:
  *
@@ -42,13 +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,
@@ -58,17 +59,25 @@ 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
+  }), 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 +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.
@@ -131,12 +145,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 +180,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,
@@ -205,6 +232,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 +280,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 +290,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 +341,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 +351,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 +395,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;
+}