@mui/x-charts-pro 7.0.0-beta.4 → 7.0.0-beta.6

package/LineChartPro/LineChartPro.js

@@ -25,25 +25,112 @@ function AreaPlotZoom(props) {
     isInteracting
   } = useZoom();
   return /*#__PURE__*/_jsx(AreaPlot, _extends({}, props, {
-    skipAnimation: isInteracting ? true : props.skipAnimation
+    skipAnimation: isInteracting || undefined
   }));
 }
+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 {}
+   */
+  slots: PropTypes.object
+} : void 0;
 function LinePlotZoom(props) {
   const {
     isInteracting
   } = useZoom();
   return /*#__PURE__*/_jsx(LinePlot, _extends({}, props, {
-    skipAnimation: isInteracting ? true : props.skipAnimation
+    skipAnimation: isInteracting || undefined
   }));
 }
+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 MarkPlotZoom(props) {
   const {
     isInteracting
   } = useZoom();
   return /*#__PURE__*/_jsx(MarkPlot, _extends({}, props, {
-    skipAnimation: isInteracting ? true : props.skipAnimation
+    skipAnimation: isInteracting || undefined
   }));
 }
+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"  |
+  // ----------------------------------------------------------------------
+  /**
+   * 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.
+   * @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;
 /**
  * Demos:
  *

package/ResponsiveChartContainerPro/ResponsiveChartContainerPro.js

@@ -102,6 +102,11 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainerPro.propTypes =
    * Please refer to the appropriate docs page to learn more about it.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
   viewBox: PropTypes.shape({

package/ResponsiveChartContainerPro/useResponsiveChartContainerProProps.d.ts

@@ -19,6 +19,7 @@ export declare const useResponsiveChartContainerProProps: (props: ResponsiveChar
         sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
         series: (import("@mui/x-charts").ScatterSeriesType | import("@mui/x-charts").LineSeriesType | import("@mui/x-charts").BarSeriesType | import("@mui/x-charts").PieSeriesType<import("@mui/x-charts/internals").MakeOptional<import("@mui/x-charts").PieValueType, "id">> | import("../models").HeatmapSeriesType)[];
         onHighlightChange?: ((highlightedItem: import("@mui/x-charts").HighlightItemData | null) => void) | undefined;
+        skipAnimation?: boolean | undefined;
         zAxis?: import("@mui/x-charts/internals").MakeOptional<import("@mui/x-charts/internals").ZAxisConfig, "id">[] | undefined;
         dataset?: import("@mui/x-charts/internals").DatasetType | undefined;
         colors?: import("@mui/x-charts").ChartsColorPalette | undefined;

package/ScatterChartPro/ScatterChartPro.js

@@ -214,6 +214,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * An array of [[ScatterSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v7.0.0-beta.4
+ * @mui/x-charts-pro v7.0.0-beta.6
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcyODU5NzYwMDAwMA==";
+  const releaseInfo = "MTcyOTc5NjQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/BarChartPro/BarChartPro.js

@@ -25,9 +25,48 @@ function BarChartPlotZoom(props) {
     isInteracting
   } = useZoom();
   return /*#__PURE__*/_jsx(BarPlot, _extends({}, props, {
-    skipAnimation: isInteracting ? true : props.skipAnimation
+    skipAnimation: isInteracting || undefined
   }));
 }
+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 undefined
+   */
+  skipAnimation: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
 /**
  * Demos:
  *
@@ -244,7 +283,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * If `true`, animations are skipped.
-   * @default false
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: PropTypes.bool,
   /**

package/modern/ChartContainerPro/ChartContainerPro.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 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 { ChartsAxesGradients, DrawingProvider, InteractionProvider, PluginProvider, SeriesProvider, AnimationProvider } from '@mui/x-charts/internals';
 import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
 import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
 import { CartesianProviderPro } from "../context/CartesianProviderPro/index.js";
@@ -23,22 +23,25 @@ const ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainer(
     cartesianProviderProps,
     chartsSurfaceProps,
     pluginProviderProps,
+    animationProviderProps,
     children
   } = useChartContainerProProps(props, ref);
   useLicenseVerifier('x-charts-pro', releaseInfo);
   return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
-    children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
-      children: /*#__PURE__*/_jsx(ZoomProvider, _extends({}, zoomProviderProps, {
-        children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
-          children: /*#__PURE__*/_jsx(CartesianProviderPro, _extends({}, cartesianProviderProps, {
-            children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
-              children: /*#__PURE__*/_jsx(InteractionProvider, {
-                children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
-                  children: /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-                    children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), children]
+    children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
+      children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
+        children: /*#__PURE__*/_jsx(ZoomProvider, _extends({}, zoomProviderProps, {
+          children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
+            children: /*#__PURE__*/_jsx(CartesianProviderPro, _extends({}, cartesianProviderProps, {
+              children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
+                children: /*#__PURE__*/_jsx(InteractionProvider, {
+                  children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
+                    children: /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+                      children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), children]
+                    }))
                   }))
-                }))
-              })
+                })
+              }))
             }))
           }))
         }))
@@ -115,6 +118,11 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
    * Please refer to the appropriate docs page to learn more about it.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
   viewBox: PropTypes.shape({

package/modern/ChartContainerPro/useChartContainerProProps.js

@@ -18,6 +18,7 @@ export const useChartContainerProProps = (props, ref) => {
     highlightedProviderProps,
     chartsSurfaceProps,
     pluginProviderProps,
+    animationProviderProps,
     xAxis,
     yAxis
   } = useChartContainerProps(baseProps, ref);
@@ -36,6 +37,7 @@ export const useChartContainerProProps = (props, ref) => {
     cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
-    chartsSurfaceProps
+    chartsSurfaceProps,
+    animationProviderProps
   };
 };

package/modern/LineChartPro/LineChartPro.js

@@ -25,25 +25,112 @@ function AreaPlotZoom(props) {
     isInteracting
   } = useZoom();
   return /*#__PURE__*/_jsx(AreaPlot, _extends({}, props, {
-    skipAnimation: isInteracting ? true : props.skipAnimation
+    skipAnimation: isInteracting || undefined
   }));
 }
+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 {}
+   */
+  slots: PropTypes.object
+} : void 0;
 function LinePlotZoom(props) {
   const {
     isInteracting
   } = useZoom();
   return /*#__PURE__*/_jsx(LinePlot, _extends({}, props, {
-    skipAnimation: isInteracting ? true : props.skipAnimation
+    skipAnimation: isInteracting || undefined
   }));
 }
+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 MarkPlotZoom(props) {
   const {
     isInteracting
   } = useZoom();
   return /*#__PURE__*/_jsx(MarkPlot, _extends({}, props, {
-    skipAnimation: isInteracting ? true : props.skipAnimation
+    skipAnimation: isInteracting || undefined
   }));
 }
+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"  |
+  // ----------------------------------------------------------------------
+  /**
+   * 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.
+   * @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;
 /**
  * Demos:
  *

package/modern/ResponsiveChartContainerPro/ResponsiveChartContainerPro.js

@@ -102,6 +102,11 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainerPro.propTypes =
    * Please refer to the appropriate docs page to learn more about it.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
   viewBox: PropTypes.shape({

package/modern/ScatterChartPro/ScatterChartPro.js

@@ -214,6 +214,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * An array of [[ScatterSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v7.0.0-beta.4
+ * @mui/x-charts-pro v7.0.0-beta.6
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcyODU5NzYwMDAwMA==";
+  const releaseInfo = "MTcyOTc5NjQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/BarChartPro/BarChartPro.js

@@ -32,9 +32,48 @@ function BarChartPlotZoom(props) {
     isInteracting
   } = (0, _useZoom.useZoom)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, (0, _extends2.default)({}, props, {
-    skipAnimation: isInteracting ? true : props.skipAnimation
+    skipAnimation: isInteracting || undefined
   }));
 }
+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.default.oneOfType([_propTypes.default.oneOf(['value']), _propTypes.default.func]),
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: _propTypes.default.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.default.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation: _propTypes.default.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
+} : void 0;
 /**
  * Demos:
  *
@@ -251,7 +290,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
    * If `true`, animations are skipped.
-   * @default false
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: _propTypes.default.bool,
   /**

package/node/ChartContainerPro/ChartContainerPro.js

@@ -30,22 +30,25 @@ const ChartContainerPro = exports.ChartContainerPro = /*#__PURE__*/React.forward
     cartesianProviderProps,
     chartsSurfaceProps,
     pluginProviderProps,
+    animationProviderProps,
     children
   } = (0, _useChartContainerProProps.useChartContainerProProps)(props, ref);
   (0, _useLicenseVerifier.useLicenseVerifier)('x-charts-pro', releaseInfo);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.DrawingProvider, (0, _extends2.default)({}, drawingProviderProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PluginProvider, (0, _extends2.default)({}, pluginProviderProps, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomProvider.ZoomProvider, (0, _extends2.default)({}, zoomProviderProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProviderPro.CartesianProviderPro, (0, _extends2.default)({}, cartesianProviderProps, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.InteractionProvider, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.HighlightedProvider, (0, _extends2.default)({}, highlightedProviderProps, {
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.ChartsAxesGradients, {}), children]
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.AnimationProvider, (0, _extends2.default)({}, animationProviderProps, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PluginProvider, (0, _extends2.default)({}, pluginProviderProps, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomProvider.ZoomProvider, (0, _extends2.default)({}, zoomProviderProps, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProviderPro.CartesianProviderPro, (0, _extends2.default)({}, cartesianProviderProps, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.InteractionProvider, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.HighlightedProvider, (0, _extends2.default)({}, highlightedProviderProps, {
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.ChartsAxesGradients, {}), children]
+                    }))
                   }))
-                }))
-              })
+                })
+              }))
             }))
           }))
         }))
@@ -122,6 +125,11 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
    * Please refer to the appropriate docs page to learn more about it.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: _propTypes.default.bool,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   title: _propTypes.default.string,
   viewBox: _propTypes.default.shape({

package/node/ChartContainerPro/useChartContainerProProps.js

@@ -24,6 +24,7 @@ const useChartContainerProProps = (props, ref) => {
     highlightedProviderProps,
     chartsSurfaceProps,
     pluginProviderProps,
+    animationProviderProps,
     xAxis,
     yAxis
   } = (0, _internals.useChartContainerProps)(baseProps, ref);
@@ -42,7 +43,8 @@ const useChartContainerProProps = (props, ref) => {
     cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
-    chartsSurfaceProps
+    chartsSurfaceProps,
+    animationProviderProps
   };
 };
 exports.useChartContainerProProps = useChartContainerProProps;