@mui/x-charts-pro 8.0.0-alpha.6 → 8.0.0-alpha.8

package/Heatmap/Heatmap.js

@@ -17,6 +17,9 @@ import { HeatmapTooltip } from "./HeatmapTooltip.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
 const defaultColorMap = interpolateRgbBasis(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
+const seriesConfig = {
+  heatmap: heatmapPlugin
+};
 const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -66,7 +69,7 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
   const Tooltip = props.slots?.tooltip ?? HeatmapTooltip;
   return /*#__PURE__*/_jsxs(ChartContainerPro, {
     ref: ref,
-    plugins: [heatmapPlugin],
+    seriesConfig: seriesConfig,
     series: series.map(s => _extends({
       type: 'heatmap'
     }, s)),
@@ -111,6 +114,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.shape({
+    current: PropTypes.shape({
+      setZoomData: PropTypes.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`.
@@ -146,6 +154,19 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     dataIndex: PropTypes.number,
     seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.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.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.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`.
@@ -161,7 +182,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.shape({
     bottom: PropTypes.number,
@@ -193,6 +213,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * An array of [[HeatmapSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * The configuration helpers used to compute attributes according to the serries type.
+   * @ignore Unstable props for internal usage.
+   */
+  seriesConfig: PropTypes.object,
   /**
    * The props used for each component slot.
    * @default {}
@@ -204,6 +229,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    */
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
    * The configuration of the tooltip.

package/Heatmap/HeatmapTooltip.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import composeClasses from '@mui/utils/composeClasses';
-import { ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, ChartsTooltipMark, useItemTooltip, getChartsTooltipUtilityClass, ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
+import { ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, useItemTooltip, getChartsTooltipUtilityClass, ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
 import { useXAxis, useYAxis } from '@mui/x-charts/hooks';
-import { getLabel } from '@mui/x-charts/internals';
+import { getLabel, ChartsLabelMark } from '@mui/x-charts/internals';
 import { useHeatmapSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -47,7 +47,8 @@ function DefaultHeatmapTooltipContent(props) {
   const {
     color,
     value,
-    identifier
+    identifier,
+    markType
   } = tooltipData;
   const [xIndex, yIndex] = value;
   const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
@@ -80,7 +81,8 @@ function DefaultHeatmapTooltipContent(props) {
           className: classes?.row,
           children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
             className: clsx(classes?.markCell, classes?.cell),
-            children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
+            children: /*#__PURE__*/_jsx(ChartsLabelMark, {
+              type: markType,
               color: color,
               className: classes?.mark
             })

package/Heatmap/extremums.d.ts

@@ -1,2 +1,2 @@
-import { ExtremumGetter } from '@mui/x-charts/internals';
-export declare const getBaseExtremum: ExtremumGetter<'heatmap'>;
+import { CartesianExtremumGetter } from '@mui/x-charts/internals';
+export declare const getBaseExtremum: CartesianExtremumGetter<'heatmap'>;

package/Heatmap/formatter.d.ts

@@ -1,3 +1,3 @@
-import { SeriesFormatter } from '@mui/x-charts/internals';
-declare const formatter: SeriesFormatter<'heatmap'>;
+import { SeriesProcessor } from '@mui/x-charts/internals';
+declare const formatter: SeriesProcessor<'heatmap'>;
 export default formatter;

package/Heatmap/formatter.js

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

package/Heatmap/plugin.d.ts

@@ -1,2 +1,2 @@
-import { ChartsPlugin } from '@mui/x-charts/internals';
-export declare const plugin: ChartsPlugin<'heatmap'>;
+import { ChartSeriesTypeConfig } from '@mui/x-charts/internals';
+export declare const plugin: ChartSeriesTypeConfig<'heatmap'>;

package/Heatmap/plugin.js

@@ -2,8 +2,7 @@ import { getBaseExtremum } from "./extremums.js";
 import formatter from "./formatter.js";
 import getColor from "./getColor.js";
 export const plugin = {
-  seriesType: 'heatmap',
-  seriesFormatter: formatter,
+  seriesProcessor: formatter,
   colorProcessor: getColor,
   xExtremumGetter: getBaseExtremum,
   yExtremumGetter: getBaseExtremum

package/LineChartPro/LineChartPro.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { LineChartProps } from '@mui/x-charts/LineChart';
-import { ZoomProps } from '../context/ZoomProvider';
-export interface LineChartProProps extends LineChartProps, ZoomProps {
+import { ChartContainerProProps } from '../ChartContainerPro';
+export interface LineChartProProps extends Omit<LineChartProps, 'apiRef'>, Omit<ChartContainerProProps<'line'>, 'series' | 'plugins' | 'seriesConfig'> {
 }
 /**
  * Demos:

package/LineChartPro/LineChartPro.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["zoom", "onZoomChange"];
+const _excluded = ["initialZoom", "onZoomChange", "apiRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
@@ -15,15 +15,14 @@ import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
-import { useLineChartProps } from '@mui/x-charts/internals';
-import { ChartContainerPro } from "../ChartContainerPro/index.js";
-import { ZoomSetup } from "../context/ZoomProvider/ZoomSetup.js";
-import { useZoom } from "../context/ZoomProvider/useZoom.js";
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { useLineChartProps, ChartsWrapper } from '@mui/x-charts/internals';
+import { ChartDataProvider } from '@mui/x-charts/context';
+import { useIsZoomInteracting } from "../hooks/zoom/index.js";
+import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function AreaPlotZoom(props) {
-  const {
-    isInteracting
-  } = useZoom();
+  const isInteracting = useIsZoomInteracting();
   return /*#__PURE__*/_jsx(AreaPlot, _extends({}, props, {
     skipAnimation: isInteracting || undefined
   }));
@@ -56,9 +55,7 @@ process.env.NODE_ENV !== "production" ? AreaPlotZoom.propTypes = {
   slots: PropTypes.object
 } : void 0;
 function LinePlotZoom(props) {
-  const {
-    isInteracting
-  } = useZoom();
+  const isInteracting = useIsZoomInteracting();
   return /*#__PURE__*/_jsx(LinePlot, _extends({}, props, {
     skipAnimation: isInteracting || undefined
   }));
@@ -91,9 +88,7 @@ process.env.NODE_ENV !== "production" ? LinePlotZoom.propTypes = {
   slots: PropTypes.object
 } : void 0;
 function MarkPlotZoom(props) {
-  const {
-    isInteracting
-  } = useZoom();
+  const isInteracting = useIsZoomInteracting();
   return /*#__PURE__*/_jsx(MarkPlot, _extends({}, props, {
     skipAnimation: isInteracting || undefined
   }));
@@ -147,11 +142,13 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
     name: 'MuiLineChartPro'
   });
   const {
-      zoom,
-      onZoomChange
+      initialZoom,
+      onZoomChange,
+      apiRef
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
+    chartsWrapperProps,
     chartContainerProps,
     axisClickHandlerProps,
     gridProps,
@@ -167,18 +164,27 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
     legendProps,
     children
   } = useLineChartProps(other);
+  const {
+    chartDataProviderProProps,
+    chartsSurfaceProps
+  } = useChartContainerProProps(_extends({}, chartContainerProps, {
+    apiRef
+  }), ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
-  return /*#__PURE__*/_jsxs(ChartContainerPro, _extends({
-    ref: ref
-  }, chartContainerProps, {
-    zoom: zoom,
+  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProProps, {
+    apiRef: apiRef,
+    initialZoom: initialZoom,
     onZoomChange: onZoomChange,
-    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
-      children: [/*#__PURE__*/_jsx(AreaPlotZoom, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlotZoom, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
-      "data-drawing-container": true,
-      children: /*#__PURE__*/_jsx(MarkPlotZoom, _extends({}, markPlotProps))
-    }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), /*#__PURE__*/_jsx(ZoomSetup, {}), children]
+    children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+          children: [/*#__PURE__*/_jsx(AreaPlotZoom, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlotZoom, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
+          "data-drawing-container": true,
+          children: /*#__PURE__*/_jsx(MarkPlotZoom, _extends({}, markPlotProps))
+        }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+      }))]
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
@@ -186,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.shape({
+    current: PropTypes.shape({
+      setZoomData: PropTypes.func.isRequired
+    })
+  }),
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -249,6 +260,19 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     dataIndex: PropTypes.number,
     seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.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.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.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`.
@@ -264,7 +288,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.shape({
     bottom: PropTypes.number,
@@ -330,6 +353,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
    * Indicate which axis to display the top of the charts.
@@ -464,12 +488,29 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     }), PropTypes.bool])
   })),
   /**
-   * The list of zoom data related to each axis.
+   * The configuration of the z-axes.
    */
-  zoom: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    end: PropTypes.number.isRequired,
-    start: PropTypes.number.isRequired
+  zAxis: PropTypes.arrayOf(PropTypes.shape({
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    id: PropTypes.string,
+    max: PropTypes.number,
+    min: PropTypes.number
   }))
 } : void 0;
 export { LineChartPro };

package/ScatterChartPro/ScatterChartPro.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ScatterChartProps } from '@mui/x-charts/ScatterChart';
-import { ZoomProps } from '../context/ZoomProvider';
-export interface ScatterChartProProps extends ScatterChartProps, ZoomProps {
+import { ChartContainerProProps } from '../ChartContainerPro/ChartContainerPro';
+export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef'>, Omit<ChartContainerProProps<'scatter'>, 'series' | 'plugins' | 'seriesConfig'> {
 }
 /**
  * Demos:

package/ScatterChartPro/ScatterChartPro.js

@@ -2,22 +2,22 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["zoom", "onZoomChange"];
+const _excluded = ["initialZoom", "onZoomChange", "apiRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ScatterPlot } from '@mui/x-charts/ScatterChart';
-import { ZAxisContextProvider } from '@mui/x-charts/context';
+import { ChartDataProvider } from '@mui/x-charts/context';
 import { ChartsVoronoiHandler } from '@mui/x-charts/ChartsVoronoiHandler';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
 import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
-import { useScatterChartProps } from '@mui/x-charts/internals';
-import { ChartContainerPro } from "../ChartContainerPro/index.js";
-import { ZoomSetup } from "../context/ZoomProvider/ZoomSetup.js";
+import { useScatterChartProps, ChartsWrapper } from '@mui/x-charts/internals';
+import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -35,13 +35,14 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(i
     name: 'MuiScatterChartPro'
   });
   const {
-      zoom,
-      onZoomChange
+      initialZoom,
+      onZoomChange,
+      apiRef
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
+    chartsWrapperProps,
     chartContainerProps,
-    zAxisProps,
     voronoiHandlerProps,
     chartsAxisProps,
     gridProps,
@@ -51,19 +52,26 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(i
     axisHighlightProps,
     children
   } = useScatterChartProps(other);
+  const {
+    chartDataProviderProProps,
+    chartsSurfaceProps
+  } = useChartContainerProProps(_extends({}, chartContainerProps, {
+    apiRef
+  }), ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
-  return /*#__PURE__*/_jsx(ChartContainerPro, _extends({
-    ref: ref
-  }, chartContainerProps, {
-    zoom: zoom,
+  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProProps, {
+    apiRef: apiRef,
+    initialZoom: initialZoom,
     onZoomChange: onZoomChange,
-    children: /*#__PURE__*/_jsxs(ZAxisContextProvider, _extends({}, zAxisProps, {
-      children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
-        "data-drawing-container": true,
-        children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
-      }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props?.slotProps?.tooltip, {
-        trigger: "item"
-      })), /*#__PURE__*/_jsx(ZoomSetup, {}), children]
+    children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+        children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
+          "data-drawing-container": true,
+          children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
+        }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props?.slotProps?.tooltip, {
+          trigger: "item"
+        })), children]
+      }))]
     }))
   }));
 });
@@ -72,6 +80,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.shape({
+    current: PropTypes.shape({
+      setZoomData: PropTypes.func.isRequired
+    })
+  }),
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -132,6 +145,19 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     dataIndex: PropTypes.number,
     seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.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.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.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`.
@@ -147,7 +173,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.shape({
     bottom: PropTypes.number,
@@ -200,6 +225,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
    * Indicate which axis to display the top of the charts.
@@ -362,14 +388,6 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     id: PropTypes.string,
     max: PropTypes.number,
     min: PropTypes.number
-  })),
-  /**
-   * The list of zoom data related to each axis.
-   */
-  zoom: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    end: PropTypes.number.isRequired,
-    start: PropTypes.number.isRequired
   }))
 } : void 0;
 export { ScatterChartPro };

package/hooks/index.d.ts

@@ -1 +1,2 @@
 export { useHeatmapSeries as unstable_useHeatmapSeries } from './useSeries';
+export * from './zoom';

package/hooks/index.js

@@ -1 +1,2 @@
-export { useHeatmapSeries as unstable_useHeatmapSeries } from "./useSeries.js";
+export { useHeatmapSeries as unstable_useHeatmapSeries } from "./useSeries.js";
+export * from "./zoom/index.js";

package/hooks/zoom/index.d.ts

@@ -0,0 +1 @@
+export * from './useIsZoomInteracting';

package/hooks/zoom/index.js

@@ -0,0 +1 @@
+export * from "./useIsZoomInteracting.js";

package/hooks/zoom/useIsZoomInteracting.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Get access to the zoom state.
+ *
+ * @returns {boolean} Inform the zoom is interacting.
+ */
+export declare function useIsZoomInteracting(): boolean;

package/hooks/zoom/useIsZoomInteracting.js

@@ -0,0 +1,14 @@
+'use client';
+
+import { useSelector, useStore } from '@mui/x-charts/internals';
+import { selectorChartZoomIsInteracting } from "../../internals/plugins/useChartProZoom/index.js";
+/**
+ * Get access to the zoom state.
+ *
+ * @returns {boolean} Inform the zoom is interacting.
+ */
+export function useIsZoomInteracting() {
+  const store = useStore();
+  const isInteracting = useSelector(store, selectorChartZoomIsInteracting);
+  return isInteracting;
+}

package/index.d.ts

@@ -27,4 +27,3 @@ export * from './ChartContainerPro';
 export * from './ScatterChartPro';
 export * from './BarChartPro';
 export * from './LineChartPro';
-export * from './context';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.0.0-alpha.6
+ * @mui/x-charts-pro v8.0.0-alpha.8
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -38,7 +38,4 @@ export * from "./Heatmap/index.js";
 export * from "./ChartContainerPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";
-export * from "./LineChartPro/index.js";
-
-// Pro context
-export * from "./context/index.js";
+export * from "./LineChartPro/index.js";

package/internals/plugins/allPlugins.d.ts

@@ -0,0 +1,10 @@
+import { ChartSeriesType, ConvertSignaturesIntoPlugins, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartZAxisSignature } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from './useChartProZoom';
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [
+    UseChartZAxisSignature,
+    UseChartCartesianAxisSignature<TSeries>,
+    UseChartInteractionSignature,
+    UseChartProZoomSignature
+];
+export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
+export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<keyof import("@mui/x-charts/internals").ChartsSeriesConfig>>)[];

package/internals/plugins/allPlugins.js

@@ -0,0 +1,5 @@
+// This file should be removed after creating all plugins in favor of a file per chart type.
+
+import { useChartCartesianAxis, useChartInteraction, useChartZAxis } from '@mui/x-charts/internals';
+import { useChartProZoom } from "./useChartProZoom/index.js";
+export const ALL_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartProZoom];

package/internals/plugins/useChartProZoom/defaultizeZoom.d.ts

@@ -0,0 +1,2 @@
+import { AxisId, DefaultizedZoomOptions, ZoomOptions } from '@mui/x-charts/internals';
+export declare const defaultizeZoom: (zoom: boolean | ZoomOptions | undefined, axisId: AxisId, axisDirection: "x" | "y") => DefaultizedZoomOptions | undefined;

package/internals/plugins/useChartProZoom/defaultizeZoom.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+const defaultZoomOptions = {
+  minStart: 0,
+  maxEnd: 100,
+  step: 5,
+  minSpan: 10,
+  maxSpan: 100,
+  panning: true,
+  filterMode: 'keep'
+};
+export const defaultizeZoom = (zoom, axisId, axisDirection) => {
+  if (!zoom) {
+    return undefined;
+  }
+  if (zoom === true) {
+    return _extends({
+      axisId,
+      axisDirection
+    }, defaultZoomOptions);
+  }
+  return _extends({
+    axisId,
+    axisDirection
+  }, defaultZoomOptions, zoom);
+};

package/internals/plugins/useChartProZoom/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useChartProZoom.selectors';
+export * from './useChartProZoom';
+export * from './useChartProZoom.types';

package/internals/plugins/useChartProZoom/index.js

@@ -0,0 +1,3 @@
+export * from "./useChartProZoom.selectors.js";
+export * from "./useChartProZoom.js";
+export * from "./useChartProZoom.types.js";

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

@@ -0,0 +1,3 @@
+import { ChartPlugin } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from './useChartProZoom.types';
+export declare const useChartProZoom: ChartPlugin<UseChartProZoomSignature>;