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

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,9 +2,9 @@ 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,
+  legendGetter: () => [],
   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';
@@ -17,17 +17,14 @@ import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { useLineChartProps, ChartsWrapper } from '@mui/x-charts/internals';
-import { ZoomSetup } from "../context/ZoomProvider/ZoomSetup.js";
-import { useZoom } from "../context/ZoomProvider/useZoom.js";
-import { ChartDataProviderPro } from "../context/ChartDataProviderPro/index.js";
+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 = {
@@ -58,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 = {
@@ -93,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
   }));
@@ -105,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.
@@ -149,8 +136,9 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
     name: 'MuiLineChartPro'
   });
   const {
-      zoom,
-      onZoomChange
+      initialZoom,
+      onZoomChange,
+      apiRef
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -173,11 +161,13 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
   const {
     chartDataProviderProProps,
     chartsSurfaceProps
-  } = useChartContainerProProps(chartContainerProps, ref);
+  } = useChartContainerProProps(_extends({}, chartContainerProps, {
+    initialZoom,
+    onZoomChange,
+    apiRef
+  }), ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
-    zoom: zoom,
-    onZoomChange: onZoomChange,
     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, {
@@ -185,7 +175,7 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
         })), /*#__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)), /*#__PURE__*/_jsx(ZoomSetup, {}), children]
+        }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
       }))]
     }))
   }));
@@ -195,6 +185,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.
@@ -232,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.
    */
@@ -258,6 +249,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`.
@@ -273,7 +277,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,
@@ -339,6 +342,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.
@@ -473,12 +477,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,13 +2,12 @@
 
 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';
@@ -17,9 +16,8 @@ import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { useScatterChartProps, ChartsWrapper } from '@mui/x-charts/internals';
-import { ZoomSetup } from "../context/ZoomProvider/ZoomSetup.js";
-import { ChartDataProviderPro } from "../context/ChartDataProviderPro/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";
 /**
  * Demos:
@@ -37,14 +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,
@@ -57,21 +55,21 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(i
   const {
     chartDataProviderProProps,
     chartsSurfaceProps
-  } = useChartContainerProProps(chartContainerProps, ref);
+  } = useChartContainerProProps(_extends({}, chartContainerProps, {
+    initialZoom,
+    onZoomChange,
+    apiRef
+  }), ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
-    zoom: zoom,
-    onZoomChange: onZoomChange,
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        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)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props?.slotProps?.tooltip, {
-            trigger: "item"
-          })), /*#__PURE__*/_jsx(ZoomSetup, {}), children]
-        }))
+      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]
       }))]
     }))
   }));
@@ -81,6 +79,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.
@@ -141,6 +144,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`.
@@ -156,7 +172,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,
@@ -209,6 +224,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.
@@ -371,14 +387,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

@@ -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';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.0.0-alpha.7
+ * @mui/x-charts-pro v8.0.0-alpha.9
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -32,13 +32,13 @@ 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';
 
 // Pro components
 export * from "./Heatmap/index.js";
 export * from "./ChartContainerPro/index.js";
+export * from "./ChartDataProviderPro/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/creatZoomLookup.d.ts

@@ -0,0 +1,3 @@
+import { AxisId, DefaultizedZoomOptions } from '@mui/x-charts/internals';
+import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '@mui/x-charts/models';
+export declare const creatZoomLookup: (axes: AxisConfig<ScaleName, any, ChartsXAxisProps | ChartsYAxisProps>[]) => Record<AxisId, DefaultizedZoomOptions>;

package/internals/plugins/useChartProZoom/creatZoomLookup.js

@@ -0,0 +1,12 @@
+import { defaultizeZoom } from "./defaultizeZoom.js";
+export const creatZoomLookup = axes => axes.reduce((acc, v) => {
+  const {
+    zoom,
+    id: axisId
+  } = v;
+  const defaultizedZoom = defaultizeZoom(zoom, axisId, 'x');
+  if (defaultizedZoom) {
+    acc[axisId] = defaultizedZoom;
+  }
+  return acc;
+}, {});

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>;