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

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,17 +15,16 @@ 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 { useIsZoomInteracting } from "../hooks/zoom/index.js";
+import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
+import { ChartDataProviderPro } from "../ChartDataProviderPro/index.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
+    skipAnimation: isInteracting || props.skipAnimation
   }));
 }
 process.env.NODE_ENV !== "production" ? AreaPlotZoom.propTypes = {
@@ -56,11 +55,9 @@ 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
+    skipAnimation: isInteracting || props.skipAnimation
   }));
 }
 process.env.NODE_ENV !== "production" ? LinePlotZoom.propTypes = {
@@ -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
   }));
@@ -103,12 +98,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.bool,
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
@@ -147,11 +136,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,
@@ -165,20 +156,28 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
     axisHighlightProps,
     lineHighlightPlotProps,
     legendProps,
-    tooltipProps,
     children
   } = useLineChartProps(other);
-  return /*#__PURE__*/_jsxs(ChartContainerPro, _extends({
-    ref: ref
-  }, chartContainerProps, {
-    zoom: zoom,
-    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(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), /*#__PURE__*/_jsx(ZoomSetup, {}), children]
+  const {
+    chartDataProviderProProps,
+    chartsSurfaceProps
+  } = useChartContainerProProps(_extends({}, chartContainerProps, {
+    initialZoom,
+    onZoomChange,
+    apiRef
+  }), ref);
+  const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
+    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,9 +185,14 @@ 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.
+   * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
    * @default { x: 'line' }
    */
   axisHighlight: PropTypes.shape({
@@ -223,10 +227,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
-  /**
-   * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
-   */
-  experimentalMarkRendering: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -243,12 +243,26 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   hideLegend: PropTypes.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.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.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 +278,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,
@@ -303,16 +316,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * @param {ZoomData[]} zoomData Updated zoom data.
    */
   onZoomChange: PropTypes.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -340,32 +343,14 @@ 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,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   * @default { trigger: 'item' }
-   */
-  tooltip: PropTypes.shape({
-    axisContent: PropTypes.elementType,
-    classes: PropTypes.object,
-    itemContent: PropTypes.elementType,
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
-  }),
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -401,7 +386,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -412,7 +396,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
@@ -464,7 +447,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -475,7 +457,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
@@ -497,12 +478,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/README.md

@@ -1,7 +1,7 @@
 # MUI X Pro
 
 This package is the Pro plan edition of the chart components.
-It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of our Core libraries, with advanced components.
 
 ## Installation
 
@@ -16,8 +16,8 @@ This component has the following peer dependencies that you need to install as w
 ```json
 "peerDependencies": {
   "@mui/material": "^5.15.14 || ^6.0.0",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 },
 ```
 

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 { 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 { ChartDataProviderPro } from "../ChartDataProviderPro/index.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,
@@ -49,19 +50,27 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(i
     overlayProps,
     legendProps,
     axisHighlightProps,
-    tooltipProps,
     children
   } = useScatterChartProps(other);
-  return /*#__PURE__*/_jsx(ChartContainerPro, _extends({
-    ref: ref
-  }, chartContainerProps, {
-    zoom: zoom,
-    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(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ZoomSetup, {}), children]
+  const {
+    chartDataProviderProProps,
+    chartsSurfaceProps
+  } = useChartContainerProProps(_extends({}, chartContainerProps, {
+    initialZoom,
+    onZoomChange,
+    apiRef
+  }), ref);
+  const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
+    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]
+      }))]
     }))
   }));
 });
@@ -70,9 +79,14 @@ 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.
+   * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
    * @default { x: 'none', y: 'none' }
    */
   axisHighlight: PropTypes.shape({
@@ -124,12 +138,26 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    */
   hideLegend: PropTypes.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.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.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`.
@@ -145,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,
@@ -171,16 +198,6 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * @param {ZoomData[]} zoomData Updated zoom data.
    */
   onZoomChange: PropTypes.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -208,32 +225,14 @@ 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,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   * @default { trigger: 'item' }
-   */
-  tooltip: PropTypes.shape({
-    axisContent: PropTypes.elementType,
-    classes: PropTypes.object,
-    itemContent: PropTypes.elementType,
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
-  }),
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
    * If `undefined`, the radius is assumed to be infinite.
@@ -274,7 +273,6 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -285,7 +283,6 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
@@ -337,7 +334,6 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     label: PropTypes.string,
-    labelFontSize: PropTypes.number,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -348,7 +344,6 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
     tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
@@ -393,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/useSeries.d.ts

@@ -1,3 +1,4 @@
+import { ProcessedSeries } from '@mui/x-charts/internals';
 /**
  * Get access to the internal state of heatmap series.
  * The returned object contains:
@@ -5,7 +6,4 @@
  * - seriesOrder: the array of series ids.
  * @returns { series: Record<SeriesId, DefaultizedHeatmapSeriesType>; seriesOrder: SeriesId[]; } | undefined heatmapSeries
  */
-export declare function useHeatmapSeries(): {
-    series: Record<import("@mui/x-charts/internals").SeriesId, import("../models").DefaultizedHeatmapSeriesType>;
-    seriesOrder: import("@mui/x-charts/internals").SeriesId[];
-} | undefined;
+export declare function useHeatmapSeries(): ProcessedSeries['heatmap'];

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

@@ -22,9 +22,11 @@ export * from '@mui/x-charts/ScatterChart';
 export * from '@mui/x-charts/SparkLineChart';
 export * from '@mui/x-charts/Gauge';
 export * from '@mui/x-charts/ChartsSurface';
+export * from '@mui/x-charts/ChartDataProvider';
+export * from '@mui/x-charts/ChartsLabel';
 export * from './Heatmap';
 export * from './ChartContainerPro';
+export * from './ChartDataProviderPro';
 export * from './ScatterChartPro';
 export * from './BarChartPro';
 export * from './LineChartPro';
-export * from './context';