@mui/x-charts 7.20.0 → 7.21.0

package/node/LineChart/useLineChartProps.js

@@ -77,7 +77,8 @@ const useLineChartProps = props => {
     highlightedItem,
     onHighlightChange,
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
-    className
+    className,
+    skipAnimation
   });
   const axisClickHandlerProps = {
     onAxisClick
@@ -95,14 +96,12 @@ const useLineChartProps = props => {
   const areaPlotProps = {
     slots,
     slotProps,
-    onItemClick: onAreaClick,
-    skipAnimation
+    onItemClick: onAreaClick
   };
   const linePlotProps = {
     slots,
     slotProps,
-    onItemClick: onLineClick,
-    skipAnimation
+    onItemClick: onLineClick
   };
   const markPlotProps = {
     slots,

package/node/PieChart/PieChart.js

@@ -112,6 +112,7 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
     highlightedItem: highlightedItem,
     onHighlightChange: onHighlightChange,
     className: className,
+    skipAnimation: skipAnimation,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
@@ -122,8 +123,7 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PiePlot.PiePlot, {
       slots: slots,
       slotProps: slotProps,
-      onItemClick: onItemClick,
-      skipAnimation: skipAnimation
+      onItemClick: onItemClick
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
       loading: loading,
       slots: slots,
@@ -270,7 +270,7 @@ process.env.NODE_ENV !== "production" ? PieChart.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/PieChart/PiePlot.js

@@ -15,6 +15,7 @@ var _PieArcLabelPlot = require("./PieArcLabelPlot");
 var _getPercentageValue = require("../internals/getPercentageValue");
 var _getPieCoordinates = require("./getPieCoordinates");
 var _useSeries = require("../hooks/useSeries");
+var _AnimationProvider = require("../context/AnimationProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -28,7 +29,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 function PiePlot(props) {
   const {
-    skipAnimation,
+    skipAnimation: inSkipAnimation,
     slots,
     slotProps,
     onItemClick
@@ -40,6 +41,7 @@ function PiePlot(props) {
     width,
     height
   } = React.useContext(_DrawingProvider.DrawingContext);
+  const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(inSkipAnimation);
   if (seriesData === undefined) {
     return null;
   }

package/node/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -97,6 +97,11 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.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/ResponsiveChartContainer/useResponsiveChartContainerProps.js

@@ -9,7 +9,7 @@ exports.useResponsiveChartContainerProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useChartContainerDimensions = require("./useChartContainerDimensions");
-const _excluded = ["width", "height", "resolveSizeBeforeRender", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];
+const _excluded = ["width", "height", "resolveSizeBeforeRender", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis", "skipAnimation"];
 const useResponsiveChartContainerProps = (props, ref) => {
   const {
       width,
@@ -30,7 +30,8 @@ const useResponsiveChartContainerProps = (props, ref) => {
       viewBox,
       xAxis,
       yAxis,
-      zAxis
+      zAxis,
+      skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -62,6 +63,7 @@ const useResponsiveChartContainerProps = (props, ref) => {
     xAxis,
     yAxis,
     zAxis,
+    skipAnimation,
     width: dWidth,
     height: dHeight,
     ref

package/node/ScatterChart/ScatterChart.js

@@ -205,6 +205,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * An array of [[ScatterSeriesType]] objects.
    */
   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,
   /**
    * The props used for each component slot.
    * @default {}

package/node/ScatterChart/extremums.js

@@ -24,13 +24,13 @@ const getExtremumX = params => {
       seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
       seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
     });
-    const seriesMinMax = series[seriesId].data.reduce((accSeries, d, dataIndex) => {
+    const seriesMinMax = series[seriesId].data?.reduce((accSeries, d, dataIndex) => {
       if (filter && !filter(d, dataIndex)) {
         return accSeries;
       }
       return mergeMinMax(accSeries, [d.x, d.x]);
     }, [Infinity, -Infinity]);
-    return mergeMinMax(acc, seriesMinMax);
+    return mergeMinMax(acc, seriesMinMax ?? [Infinity, -Infinity]);
   }, [Infinity, -Infinity]);
 };
 exports.getExtremumX = getExtremumX;
@@ -51,13 +51,13 @@ const getExtremumY = params => {
       seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
       seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
     });
-    const seriesMinMax = series[seriesId].data.reduce((accSeries, d, dataIndex) => {
+    const seriesMinMax = series[seriesId].data?.reduce((accSeries, d, dataIndex) => {
       if (filter && !filter(d, dataIndex)) {
         return accSeries;
       }
       return mergeMinMax(accSeries, [d.y, d.y]);
     }, [Infinity, -Infinity]);
-    return mergeMinMax(acc, seriesMinMax);
+    return mergeMinMax(acc, seriesMinMax ?? [Infinity, -Infinity]);
   }, [Infinity, -Infinity]);
 };
 exports.getExtremumY = getExtremumY;

package/node/ScatterChart/formatter.js

@@ -1,16 +1,36 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defaultizeValueFormatter = require("../internals/defaultizeValueFormatter");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const formatter = ({
   series,
   seriesOrder
-}) => {
+}, dataset) => {
+  const completeSeries = Object.fromEntries(Object.entries(series).map(([seriesId, seriesData]) => {
+    const datasetKeys = seriesData?.datasetKeys;
+    const missingKeys = ['x', 'y', 'id'].filter(key => typeof datasetKeys?.[key] !== 'string');
+    if (seriesData?.datasetKeys && missingKeys.length > 0) {
+      throw new Error([`MUI X: scatter series with id='${seriesId}' has incomplete datasetKeys.`, `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.`].join('\n'));
+    }
+    const data = !datasetKeys ? seriesData.data ?? [] : dataset?.map(d => {
+      return {
+        x: d[datasetKeys.x],
+        y: d[datasetKeys.y],
+        z: datasetKeys.z && d[datasetKeys.z],
+        id: d[datasetKeys.id]
+      };
+    }) ?? [];
+    return [seriesId, (0, _extends2.default)({}, seriesData, {
+      data,
+      valueFormatter: seriesData.valueFormatter ?? (v => `(${v.x}, ${v.y})`)
+    })];
+  }));
   return {
-    series: (0, _defaultizeValueFormatter.defaultizeValueFormatter)(series, v => `(${v.x}, ${v.y})`),
+    series: completeSeries,
     seriesOrder
   };
 };

package/node/SparkLineChart/SparkLineChart.js

@@ -222,6 +222,11 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default false
    */
   showTooltip: _propTypes.default.bool,
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/node/context/AnimationProvider/Animation.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/context/AnimationProvider/AnimationContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnimationContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+const AnimationContext = exports.AnimationContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    skipAnimation: undefined
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  AnimationContext.displayName = 'AnimationContext';
+}

package/node/context/AnimationProvider/AnimationProvider.js

@@ -0,0 +1,60 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnimationProvider = AnimationProvider;
+var _web = require("@react-spring/web");
+var React = _interopRequireWildcard(require("react"));
+var _AnimationContext = require("./AnimationContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function AnimationProvider(props) {
+  // Part of the behavior was taken from:
+  // https://github.com/pmndrs/react-spring/blob/fd65b605b85c3a24143c4ce9dd322fdfca9c66be/packages/shared/src/hooks/useReducedMotion.ts
+  const {
+    children,
+    skipAnimation: inSkipAnimation
+  } = props;
+
+  // Skip animation test/jsdom
+  const isAnimationDisabledEnvironment = typeof window === 'undefined' || !window?.matchMedia;
+
+  // We use the value of `isAnimationDisabledEnvironment` as the initial value of `skipAnimation` to avoid
+  // re-rendering the component on environments where matchMedia is not supported, hence skipAnimation will always be true.
+  const [skipAnimation, setSkipAnimation] = React.useState(isAnimationDisabledEnvironment || undefined);
+  (0, _web.useIsomorphicLayoutEffect)(() => {
+    if (isAnimationDisabledEnvironment) {
+      return undefined;
+    }
+    const handleMediaChange = event => {
+      // This hook can remove animation but never activate it.
+      const inputValue = event.matches || undefined;
+      setSkipAnimation(inputValue);
+      _web.Globals.assign({
+        skipAnimation: inputValue
+      });
+    };
+    const mql = window.matchMedia('(prefers-reduced-motion)');
+    handleMediaChange(mql);
+
+    // MatchMedia is not fully supported in all environments, so we need to check if it exists before calling addEventListener
+    mql?.addEventListener?.('change', handleMediaChange);
+    return () => {
+      mql?.removeEventListener?.('change', handleMediaChange);
+    };
+  }, []);
+  const value = React.useMemo(() => ({
+    isInitialized: true,
+    data: {
+      // If dev sets `skipAnimation` to true, it will skip all animations.
+      // If dev sets `skipAnimation` to false, it will use user's preference.
+      skipAnimation: inSkipAnimation || skipAnimation
+    }
+  }), [skipAnimation, inSkipAnimation]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimationContext.AnimationContext.Provider, {
+    value: value,
+    children: children
+  });
+}

package/node/context/AnimationProvider/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Animation = require("./Animation.types");
+Object.keys(_Animation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Animation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Animation[key];
+    }
+  });
+});
+var _AnimationContext = require("./AnimationContext");
+Object.keys(_AnimationContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AnimationContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AnimationContext[key];
+    }
+  });
+});
+var _AnimationProvider = require("./AnimationProvider");
+Object.keys(_AnimationProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AnimationProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AnimationProvider[key];
+    }
+  });
+});
+var _useSkipAnimation = require("./useSkipAnimation");
+Object.keys(_useSkipAnimation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useSkipAnimation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useSkipAnimation[key];
+    }
+  });
+});

package/node/context/AnimationProvider/useSkipAnimation.js

@@ -0,0 +1,25 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSkipAnimation = useSkipAnimation;
+var React = _interopRequireWildcard(require("react"));
+var _AnimationContext = require("./AnimationContext");
+/**
+ * A hook to get if chart animations should be skipped.
+ *
+ * @returns {boolean|undefined} whether to skip animations
+ */
+function useSkipAnimation(skipAnimation) {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(_AnimationContext.AnimationContext);
+  if (!isInitialized) {
+    throw new Error(['MUI X: Could not find the animation ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  return skipAnimation || data.skipAnimation;
+}

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.20.0
+ * @mui/x-charts v7.21.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  useReducedMotion: true,
   useSeries: true,
   useInteractionItemProps: true,
   useDrawingArea: true,
@@ -58,12 +57,6 @@ Object.defineProperty(exports, "useLineChartProps", {
     return _useLineChartProps.useLineChartProps;
   }
 });
-Object.defineProperty(exports, "useReducedMotion", {
-  enumerable: true,
-  get: function () {
-    return _useReducedMotion.useReducedMotion;
-  }
-});
 Object.defineProperty(exports, "useResponsiveChartContainerProps", {
   enumerable: true,
   get: function () {
@@ -118,7 +111,6 @@ Object.keys(_ResizableContainer).forEach(function (key) {
     }
   });
 });
-var _useReducedMotion = require("../hooks/useReducedMotion");
 var _useSeries = require("../hooks/useSeries");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -284,6 +276,18 @@ Object.keys(_PluginProvider).forEach(function (key) {
     }
   });
 });
+var _AnimationProvider = require("../context/AnimationProvider");
+Object.keys(_AnimationProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AnimationProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AnimationProvider[key];
+    }
+  });
+});
 var _getAxisExtremum = require("../context/CartesianProvider/getAxisExtremum");
 var _config = require("../models/seriesType/config");
 Object.keys(_config).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.20.0",
+  "version": "7.21.0",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -31,12 +31,12 @@
   "dependencies": {
     "@babel/runtime": "^7.25.7",
     "@mui/utils": "^5.16.6 || ^6.0.0",
-    "@react-spring/rafz": "^9.7.4",
-    "@react-spring/web": "^9.7.4",
+    "@react-spring/rafz": "^9.7.5",
+    "@react-spring/web": "^9.7.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "@mui/x-charts-vendor": "7.20.0",
-    "@mui/x-internals": "7.20.0"
+    "@mui/x-internals": "7.21.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/hooks/useReducedMotion.d.ts

@@ -1,8 +0,0 @@
-/**
- * Returns `boolean` or `null`, used to automatically
- * set skipAnimations to the value of the user's
- * `prefers-reduced-motion` query.
- *
- * The return value, post-effect, is the value of their preferred setting
- */
-export declare const useReducedMotion: () => void;

package/hooks/useReducedMotion.js

@@ -1,39 +0,0 @@
-'use client';
-
-import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
-const handleMediaChange = event => {
-  Globals.assign({
-    // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
-    skipAnimation: event.matches || undefined
-  });
-};
-
-/**
- * Returns `boolean` or `null`, used to automatically
- * set skipAnimations to the value of the user's
- * `prefers-reduced-motion` query.
- *
- * The return value, post-effect, is the value of their preferred setting
- */
-export const useReducedMotion = () => {
-  // Taken from: https://github.com/pmndrs/react-spring/blob/fd65b605b85c3a24143c4ce9dd322fdfca9c66be/packages/shared/src/hooks/useReducedMotion.ts
-
-  useIsomorphicLayoutEffect(() => {
-    // Skip animation test/jsdom
-    const shouldSkipAnimation = !window?.matchMedia;
-    if (shouldSkipAnimation) {
-      handleMediaChange({
-        matches: true
-      });
-      return undefined;
-    }
-    const mql = window.matchMedia('(prefers-reduced-motion)');
-    handleMediaChange(mql);
-
-    // MatchMedia is not fully supported in all environments, so we need to check if it exists before calling addEventListener
-    mql.addEventListener?.('change', handleMediaChange);
-    return () => {
-      mql.removeEventListener?.('change', handleMediaChange);
-    };
-  }, []);
-};

package/modern/hooks/useReducedMotion.js

@@ -1,39 +0,0 @@
-'use client';
-
-import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
-const handleMediaChange = event => {
-  Globals.assign({
-    // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
-    skipAnimation: event.matches || undefined
-  });
-};
-
-/**
- * Returns `boolean` or `null`, used to automatically
- * set skipAnimations to the value of the user's
- * `prefers-reduced-motion` query.
- *
- * The return value, post-effect, is the value of their preferred setting
- */
-export const useReducedMotion = () => {
-  // Taken from: https://github.com/pmndrs/react-spring/blob/fd65b605b85c3a24143c4ce9dd322fdfca9c66be/packages/shared/src/hooks/useReducedMotion.ts
-
-  useIsomorphicLayoutEffect(() => {
-    // Skip animation test/jsdom
-    const shouldSkipAnimation = !window?.matchMedia;
-    if (shouldSkipAnimation) {
-      handleMediaChange({
-        matches: true
-      });
-      return undefined;
-    }
-    const mql = window.matchMedia('(prefers-reduced-motion)');
-    handleMediaChange(mql);
-
-    // MatchMedia is not fully supported in all environments, so we need to check if it exists before calling addEventListener
-    mql.addEventListener?.('change', handleMediaChange);
-    return () => {
-      mql.removeEventListener?.('change', handleMediaChange);
-    };
-  }, []);
-};

package/node/hooks/useReducedMotion.js

@@ -1,45 +0,0 @@
-"use strict";
-'use client';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useReducedMotion = void 0;
-var _web = require("@react-spring/web");
-const handleMediaChange = event => {
-  _web.Globals.assign({
-    // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
-    skipAnimation: event.matches || undefined
-  });
-};
-
-/**
- * Returns `boolean` or `null`, used to automatically
- * set skipAnimations to the value of the user's
- * `prefers-reduced-motion` query.
- *
- * The return value, post-effect, is the value of their preferred setting
- */
-const useReducedMotion = () => {
-  // Taken from: https://github.com/pmndrs/react-spring/blob/fd65b605b85c3a24143c4ce9dd322fdfca9c66be/packages/shared/src/hooks/useReducedMotion.ts
-
-  (0, _web.useIsomorphicLayoutEffect)(() => {
-    // Skip animation test/jsdom
-    const shouldSkipAnimation = !window?.matchMedia;
-    if (shouldSkipAnimation) {
-      handleMediaChange({
-        matches: true
-      });
-      return undefined;
-    }
-    const mql = window.matchMedia('(prefers-reduced-motion)');
-    handleMediaChange(mql);
-
-    // MatchMedia is not fully supported in all environments, so we need to check if it exists before calling addEventListener
-    mql.addEventListener?.('change', handleMediaChange);
-    return () => {
-      mql.removeEventListener?.('change', handleMediaChange);
-    };
-  }, []);
-};
-exports.useReducedMotion = useReducedMotion;