@mui/x-charts-pro 7.0.0-alpha.2 → 7.0.0-beta.0

package/modern/BarChartPro/BarChartPro.js

@@ -1,8 +1,9 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["zoom", "onZoomChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
@@ -13,10 +14,18 @@ import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { useBarChartProps } from '@mui/x-charts/internals';
-import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro';
-import { ZoomSetup } from '../context/ZoomProvider/ZoomSetup';
-import { useZoom } from '../context/ZoomProvider/useZoom';
+import { ResponsiveChartContainerPro } from "../ResponsiveChartContainerPro/index.js";
+import { ZoomSetup } from "../context/ZoomProvider/ZoomSetup.js";
+import { useZoom } from "../context/ZoomProvider/useZoom.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function BarChartPlotZoom(props) {
+  const {
+    isInteracting
+  } = useZoom();
+  return /*#__PURE__*/_jsx(BarPlot, _extends({}, props, {
+    skipAnimation: isInteracting ? true : props.skipAnimation
+  }));
+}
 /**
  * Demos:
  *
@@ -28,7 +37,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(props, ref) {
+const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiBarChartPro'
+  });
   const {
       zoom,
       onZoomChange
@@ -53,7 +66,7 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(props, re
   }, chartContainerProps, {
     zoom: zoom,
     onZoomChange: onZoomChange,
-    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
       children: [/*#__PURE__*/_jsx(BarChartPlotZoom, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
     })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), /*#__PURE__*/_jsx(ZoomSetup, {}), children]
   }));
@@ -145,6 +158,17 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
+    itemGap: PropTypes.number,
+    itemMarkHeight: PropTypes.number,
+    itemMarkWidth: PropTypes.number,
+    labelStyle: PropTypes.object,
+    markGap: PropTypes.number,
+    padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      bottom: PropTypes.number,
+      left: PropTypes.number,
+      right: PropTypes.number,
+      top: PropTypes.number
+    })]),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
@@ -188,6 +212,12 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * Callback fired when the zoom has changed.
+   *
+   * @param {ZoomData[]} zoomData Updated zoom data.
+   */
+  onZoomChange: PropTypes.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -250,7 +280,6 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -285,6 +314,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     slotProps: PropTypes.object,
     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]),
@@ -297,6 +327,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,
@@ -311,7 +342,6 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -346,6 +376,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     slotProps: PropTypes.object,
     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]),
@@ -358,6 +389,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,
@@ -365,53 +397,14 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: PropTypes.bool,
       step: PropTypes.number
     }), PropTypes.bool])
-  }))
-} : void 0;
-function BarChartPlotZoom(props) {
-  const {
-    isInteracting
-  } = useZoom();
-  return /*#__PURE__*/_jsx(BarPlot, _extends({}, props, {
-    skipAnimation: isInteracting ? true : props.skipAnimation
-  }));
-}
-process.env.NODE_ENV !== "production" ? BarChartPlotZoom.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * If provided, the function will be used to format the label of the bar.
-   * It can be set to 'value' to display the current value.
-   * @param {BarItem} item The item to format.
-   * @param {BarLabelContext} context data about the bar.
-   * @returns {string} The formatted label.
-   */
-  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
-  /**
-   * Defines the border radius of the bar element.
-   */
-  borderRadius: PropTypes.number,
-  /**
-   * Callback fired when a bar item is clicked.
-   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
-   * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
-   */
-  onItemClick: PropTypes.func,
-  /**
-   * If `true`, animations are skipped.
-   * @default false
-   */
-  skipAnimation: PropTypes.bool,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
+  })),
   /**
-   * Overridable component slots.
-   * @default {}
+   * The list of zoom data related to each axis.
    */
-  slots: PropTypes.object
+  zoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  }))
 } : void 0;
 export { BarChartPro };

package/modern/BarChartPro/index.js

@@ -1 +1 @@
-export * from './BarChartPro';
+export * from "./BarChartPro.js";

package/modern/ChartContainerPro/ChartContainerPro.js

@@ -5,10 +5,10 @@ import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { HighlightedProvider, ZAxisContextProvider } from '@mui/x-charts/context';
 import { ChartsAxesGradients, DrawingProvider, InteractionProvider, PluginProvider, SeriesProvider } from '@mui/x-charts/internals';
 import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
-import { getReleaseInfo } from '../internals/utils/releaseInfo';
-import { CartesianProviderPro } from '../context/CartesianProviderPro';
-import { ZoomProvider } from '../context/ZoomProvider';
-import { useChartContainerProProps } from './useChartContainerProProps';
+import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
+import { CartesianProviderPro } from "../context/CartesianProviderPro/index.js";
+import { ZoomProvider } from "../context/ZoomProvider/index.js";
+import { useChartContainerProProps } from "./useChartContainerProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 const ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {

package/modern/ChartContainerPro/index.js

@@ -1 +1 @@
-export * from './ChartContainerPro';
+export * from "./ChartContainerPro.js";

package/modern/Heatmap/DefaultHeatmapTooltip.js

@@ -89,7 +89,7 @@ process.env.NODE_ENV !== "production" ? DefaultHeatmapTooltip.propTypes = {
     type: PropTypes.oneOf(['heatmap']).isRequired
   }).isRequired,
   /**
-   * The series linked to the triggered axis.
+   * The series linked to the triggered item.
    */
   series: PropTypes.object.isRequired,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])

package/modern/Heatmap/Heatmap.js

@@ -1,21 +1,26 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
+import { useThemeProps } from '@mui/material/styles';
 import useId from '@mui/utils/useId';
+import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
-import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro';
-import { HeatmapPlot } from './HeatmapPlot';
-import { plugin as heatmapPlugin } from './plugin';
-import { DefaultHeatmapTooltip } from './DefaultHeatmapTooltip';
+import { ResponsiveChartContainerPro } from "../ResponsiveChartContainerPro/index.js";
+import { HeatmapPlot } from "./HeatmapPlot.js";
+import { plugin as heatmapPlugin } from "./plugin.js";
+import { DefaultHeatmapTooltip } from "./DefaultHeatmapTooltip.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 Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(props, ref) {
+const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiHeatmap'
+  });
   const {
     xAxis,
     yAxis,

package/modern/Heatmap/HeatmapItem.js

@@ -8,7 +8,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useItemHighlighted } from '@mui/x-charts/context';
 import { useInteractionItemProps } from '@mui/x-charts/internals';
-import { getHeatmapUtilityClass } from './heatmapClasses';
+import { getHeatmapUtilityClass } from "./heatmapClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const HeatmapCell = styled('rect', {
   name: 'MuiHeatmap',

package/modern/Heatmap/HeatmapPlot.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useXScale, useYScale, useZColorScale } from '@mui/x-charts/hooks';
-import { useHeatmapSeries } from '../hooks/useSeries';
-import { HeatmapItem } from './HeatmapItem';
+import { useHeatmapSeries } from "../hooks/useSeries.js";
+import { HeatmapItem } from "./HeatmapItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function HeatmapPlot(props) {
   const xScale = useXScale();

package/modern/Heatmap/index.js

@@ -1,4 +1,4 @@
-export { Heatmap } from './Heatmap';
-export { HeatmapPlot } from './HeatmapPlot';
-export * from './DefaultHeatmapTooltip';
-export * from './heatmapClasses';
+export { Heatmap } from "./Heatmap.js";
+export { HeatmapPlot } from "./HeatmapPlot.js";
+export * from "./DefaultHeatmapTooltip.js";
+export * from "./heatmapClasses.js";

package/modern/Heatmap/plugin.js

@@ -1,6 +1,6 @@
-import { getBaseExtremum } from './extremums';
-import formatter from './formatter';
-import getColor from './getColor';
+import { getBaseExtremum } from "./extremums.js";
+import formatter from "./formatter.js";
+import getColor from "./getColor.js";
 export const plugin = {
   seriesType: 'heatmap',
   seriesFormatter: formatter,

package/modern/LineChartPro/LineChartPro.js

@@ -1,8 +1,9 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["zoom", "onZoomChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { AreaPlot, LineHighlightPlot, LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
 import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
@@ -13,10 +14,34 @@ 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 { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro';
-import { ZoomSetup } from '../context/ZoomProvider/ZoomSetup';
-import { useZoom } from '../context/ZoomProvider/useZoom';
+import { ResponsiveChartContainerPro } from "../ResponsiveChartContainerPro/index.js";
+import { ZoomSetup } from "../context/ZoomProvider/ZoomSetup.js";
+import { useZoom } from "../context/ZoomProvider/useZoom.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function AreaPlotZoom(props) {
+  const {
+    isInteracting
+  } = useZoom();
+  return /*#__PURE__*/_jsx(AreaPlot, _extends({}, props, {
+    skipAnimation: isInteracting ? true : props.skipAnimation
+  }));
+}
+function LinePlotZoom(props) {
+  const {
+    isInteracting
+  } = useZoom();
+  return /*#__PURE__*/_jsx(LinePlot, _extends({}, props, {
+    skipAnimation: isInteracting ? true : props.skipAnimation
+  }));
+}
+function MarkPlotZoom(props) {
+  const {
+    isInteracting
+  } = useZoom();
+  return /*#__PURE__*/_jsx(MarkPlot, _extends({}, props, {
+    skipAnimation: isInteracting ? true : props.skipAnimation
+  }));
+}
 /**
  * Demos:
  *
@@ -27,7 +52,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
  */
-const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(props, ref) {
+const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiLineChartPro'
+  });
   const {
       zoom,
       onZoomChange
@@ -55,7 +84,7 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(props,
   }, chartContainerProps, {
     zoom: zoom,
     onZoomChange: onZoomChange,
-    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+    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,
@@ -136,6 +165,17 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
+    itemGap: PropTypes.number,
+    itemMarkHeight: PropTypes.number,
+    itemMarkWidth: PropTypes.number,
+    labelStyle: PropTypes.object,
+    markGap: PropTypes.number,
+    padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      bottom: PropTypes.number,
+      left: PropTypes.number,
+      right: PropTypes.number,
+      top: PropTypes.number
+    })]),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
@@ -185,6 +225,12 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * Callback fired when a mark element is clicked.
    */
   onMarkClick: PropTypes.func,
+  /**
+   * Callback fired when the zoom has changed.
+   *
+   * @param {ZoomData[]} zoomData Updated zoom data.
+   */
+  onZoomChange: PropTypes.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -248,7 +294,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -283,6 +328,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     slotProps: PropTypes.object,
     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]),
@@ -295,6 +341,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,
@@ -309,7 +356,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -344,6 +390,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     slotProps: PropTypes.object,
     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]),
@@ -356,6 +403,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,
@@ -363,111 +411,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       panning: PropTypes.bool,
       step: PropTypes.number
     }), PropTypes.bool])
-  }))
-} : void 0;
-function MarkPlotZoom(props) {
-  const {
-    isInteracting
-  } = useZoom();
-  return /*#__PURE__*/_jsx(MarkPlot, _extends({}, props, {
-    skipAnimation: isInteracting ? true : props.skipAnimation
-  }));
-}
-process.env.NODE_ENV !== "production" ? MarkPlotZoom.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Callback fired when a line mark item is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
-   */
-  onItemClick: PropTypes.func,
-  /**
-   * If `true`, animations are skipped.
-   * @default false
-   */
-  skipAnimation: PropTypes.bool,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object
-} : void 0;
-function LinePlotZoom(props) {
-  const {
-    isInteracting
-  } = useZoom();
-  return /*#__PURE__*/_jsx(LinePlot, _extends({}, props, {
-    skipAnimation: isInteracting ? true : props.skipAnimation
-  }));
-}
-process.env.NODE_ENV !== "production" ? LinePlotZoom.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Callback fired when a line item is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
-   */
-  onItemClick: PropTypes.func,
-  /**
-   * If `true`, animations are skipped.
-   * @default false
-   */
-  skipAnimation: PropTypes.bool,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object
-} : void 0;
-function AreaPlotZoom(props) {
-  const {
-    isInteracting
-  } = useZoom();
-  return /*#__PURE__*/_jsx(AreaPlot, _extends({}, props, {
-    skipAnimation: isInteracting ? true : props.skipAnimation
-  }));
-}
-process.env.NODE_ENV !== "production" ? AreaPlotZoom.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Callback fired when a line area item is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
-   */
-  onItemClick: PropTypes.func,
-  /**
-   * If `true`, animations are skipped.
-   * @default false
-   */
-  skipAnimation: PropTypes.bool,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
+  })),
   /**
-   * Overridable component slots.
-   * @default {}
+   * The list of zoom data related to each axis.
    */
-  slots: PropTypes.object
+  zoom: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    end: PropTypes.number.isRequired,
+    start: PropTypes.number.isRequired
+  }))
 } : void 0;
 export { LineChartPro };

package/modern/LineChartPro/index.js

@@ -1 +1 @@
-export * from './LineChartPro';
+export * from "./LineChartPro.js";

package/modern/ResponsiveChartContainerPro/ResponsiveChartContainerPro.js

@@ -3,9 +3,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Watermark } from '@mui/x-license/Watermark';
 import { ResizableContainer } from '@mui/x-charts/internals';
-import { getReleaseInfo } from '../internals/utils/releaseInfo';
-import { ChartContainerPro } from '../ChartContainerPro';
-import { useResponsiveChartContainerProProps } from './useResponsiveChartContainerProProps';
+import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
+import { ChartContainerPro } from "../ChartContainerPro/index.js";
+import { useResponsiveChartContainerProProps } from "./useResponsiveChartContainerProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 const ResponsiveChartContainerPro = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainerPro(props, ref) {

package/modern/ResponsiveChartContainerPro/index.js

@@ -1 +1 @@
-export * from './ResponsiveChartContainerPro';
+export * from "./ResponsiveChartContainerPro.js";

package/modern/ScatterChartPro/ScatterChartPro.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["zoom", "onZoomChange"];
 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';
@@ -13,8 +14,8 @@ import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
 import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { useScatterChartProps } from '@mui/x-charts/internals';
-import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro';
-import { ZoomSetup } from '../context/ZoomProvider/ZoomSetup';
+import { ResponsiveChartContainerPro } from "../ResponsiveChartContainerPro/index.js";
+import { ZoomSetup } from "../context/ZoomProvider/ZoomSetup.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -26,7 +27,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
  */
-const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(props, ref) {
+const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiScatterChartPro'
+  });
   const {
       zoom,
       onZoomChange
@@ -51,7 +56,7 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(p
     zoom: zoom,
     onZoomChange: onZoomChange,
     children: /*#__PURE__*/_jsxs(ZAxisContextProvider, _extends({}, zAxisProps, {
-      children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
+      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(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ZoomSetup, {}), children]
@@ -132,6 +137,17 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
+    itemGap: PropTypes.number,
+    itemMarkHeight: PropTypes.number,
+    itemMarkWidth: PropTypes.number,
+    labelStyle: PropTypes.object,
+    markGap: PropTypes.number,
+    padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      bottom: PropTypes.number,
+      left: PropTypes.number,
+      right: PropTypes.number,
+      top: PropTypes.number
+    })]),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired

package/modern/ScatterChartPro/index.js

@@ -1 +1 @@
-export * from './ScatterChartPro';
+export * from "./ScatterChartPro.js";