@mui/x-charts 7.19.0 → 7.21.0

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.19.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.19.0",
+  "version": "7.21.0",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -29,14 +29,14 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.6",
-    "@mui/utils": "^5.16.6",
-    "@react-spring/rafz": "^9.7.4",
-    "@react-spring/web": "^9.7.4",
+    "@babel/runtime": "^7.25.7",
+    "@mui/utils": "^5.16.6 || ^6.0.0",
+    "@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.19.0",
-    "@mui/x-internals": "7.18.0"
+    "@mui/x-charts-vendor": "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;