@mui/x-charts 8.0.0-beta.1 → 8.0.0-beta.3

package/modern/PieChart/PieArcLabel.js

@@ -2,33 +2,34 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { animated, to } from '@react-spring/web';
-import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
+import { useAnimatePieArcLabel } from "../hooks/animation/useAnimatePieArcLabel.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPieArcLabelUtilityClass(slot) {
   return generateUtilityClass('MuiPieArcLabel', slot);
 }
-export const pieArcLabelClasses = generateUtilityClasses('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
+export const pieArcLabelClasses = generateUtilityClasses('MuiPieArcLabel', ['root', 'highlighted', 'faded', 'animate']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
     id,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    skipAnimation
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded', !skipAnimation && 'animate']
   };
   return composeClasses(slots, getPieArcLabelUtilityClass, classes);
 };
-const PieArcLabelRoot = styled(animated.text, {
+const PieArcLabelRoot = styled('text', {
   name: 'MuiPieArcLabel',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -38,29 +39,20 @@ const PieArcLabelRoot = styled(animated.text, {
   fill: (theme.vars || theme).palette.text.primary,
   textAnchor: 'middle',
   dominantBaseline: 'middle',
-  pointerEvents: 'none'
-}));
-/**
- * Helper to compute label position.
- * It's not an inline function because we need it in interpolation.
- */
-const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, arcLabelRadius, cornerRadius) => {
-  if (!formattedArcLabel) {
-    return 0;
-  }
-  const [x, y] = d3Arc().cornerRadius(cornerRadius).centroid({
-    padAngle,
-    startAngle,
-    endAngle,
-    innerRadius: arcLabelRadius,
-    outerRadius: arcLabelRadius
-  });
-  if (variable === 'x') {
-    return x;
+  pointerEvents: 'none',
+  animationName: 'animate-opacity',
+  animationDuration: '0s',
+  animationTimingFunction: ANIMATION_TIMING_FUNCTION,
+  [`&.${pieArcLabelClasses.animate}`]: {
+    animationDuration: `${ANIMATION_DURATION_MS}ms`
+  },
+  '@keyframes animate-opacity': {
+    from: {
+      opacity: 0
+    }
   }
-  return y;
-};
-function PieArcLabel(props) {
+}));
+const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, ref) {
   const {
       id,
       classes: innerClasses,
@@ -68,12 +60,13 @@ function PieArcLabel(props) {
       startAngle,
       endAngle,
       paddingAngle,
-      arcLabelRadius,
+      innerRadius,
+      outerRadius,
       cornerRadius,
       formattedArcLabel,
       isHighlighted,
       isFaded,
-      style
+      skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = {
@@ -81,33 +74,44 @@ function PieArcLabel(props) {
     classes: innerClasses,
     color,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    skipAnimation
   };
   const classes = useUtilityClasses(ownerState);
-  return (
-    /*#__PURE__*/
-    // @ts-expect-error
-    _jsx(PieArcLabelRoot, _extends({
-      className: classes.root
-    }, other, {
-      style: _extends({
-        x: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
-        y: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
-      }, style),
-      children: formattedArcLabel
-    }))
-  );
-}
+  const animatedProps = useAnimatePieArcLabel({
+    cornerRadius,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    paddingAngle,
+    skipAnimation,
+    ref
+  });
+  return /*#__PURE__*/_jsx(PieArcLabelRoot, _extends({
+    className: classes.root
+  }, other, animatedProps, {
+    children: formattedArcLabel
+  }));
+});
 process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  arcLabelRadius: PropTypes.number.isRequired,
   classes: PropTypes.object,
   color: PropTypes.string.isRequired,
+  cornerRadius: PropTypes.number.isRequired,
+  endAngle: PropTypes.number.isRequired,
   formattedArcLabel: PropTypes.string,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  innerRadius: PropTypes.number.isRequired,
   isFaded: PropTypes.bool.isRequired,
-  isHighlighted: PropTypes.bool.isRequired
+  isHighlighted: PropTypes.bool.isRequired,
+  outerRadius: PropTypes.number.isRequired,
+  paddingAngle: PropTypes.number.isRequired,
+  skipAnimation: PropTypes.bool.isRequired,
+  startAngle: PropTypes.number.isRequired
 } : void 0;
 export { PieArcLabel };

package/modern/PieChart/PieArcLabelPlot.js

@@ -2,12 +2,9 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius"];
+const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTransition } from '@react-spring/web';
-import { getDefaultLabelTransitionConfig } from "./dataTransform/transition.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
 import { PieArcLabel } from "./PieArcLabel.js";
 import { getLabel } from "../internals/getLabel.js";
@@ -65,41 +62,26 @@ function PieArcLabelPlot(props) {
     faded,
     data
   });
-  const transition = useTransition(transformedData, _extends({}, getDefaultLabelTransitionConfig(skipAnimation), {
-    immediate: skipAnimation
-  }));
   if (data.length === 0) {
     return null;
   }
   const ArcLabel = slots?.pieArcLabel ?? PieArcLabel;
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: transition((_ref, item) => {
-      let {
-          startAngle,
-          endAngle,
-          paddingAngle: pA,
-          innerRadius: iR,
-          outerRadius: oR,
-          arcLabelRadius: aLR,
-          cornerRadius: cR
-        } = _ref,
-        style = _objectWithoutPropertiesLoose(_ref, _excluded2);
-      return /*#__PURE__*/_jsx(ArcLabel, _extends({
-        startAngle: startAngle,
-        endAngle: endAngle,
-        paddingAngle: pA,
-        innerRadius: iR,
-        outerRadius: oR,
-        arcLabelRadius: aLR,
-        cornerRadius: cR,
-        style: style,
-        id: id,
-        color: item.color,
-        isFaded: item.isFaded,
-        isHighlighted: item.isHighlighted,
-        formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
-      }, slotProps?.pieArcLabel));
-    })
+    children: transformedData.map(item => /*#__PURE__*/_jsx(ArcLabel, _extends({
+      startAngle: item.startAngle,
+      endAngle: item.endAngle,
+      paddingAngle: item.paddingAngle,
+      innerRadius: item.innerRadius,
+      outerRadius: item.outerRadius,
+      arcLabelRadius: item.arcLabelRadius,
+      cornerRadius: item.cornerRadius,
+      id: id,
+      color: item.color,
+      isFaded: item.isFaded,
+      isHighlighted: item.isHighlighted,
+      formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item),
+      skipAnimation: skipAnimation ?? false
+    }, slotProps?.pieArcLabel), item.id ?? item.dataIndex))
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {

package/modern/PieChart/PieArcPlot.js

@@ -5,9 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTransition } from '@react-spring/web';
 import { PieArc } from "./PieArc.js";
-import { getDefaultTransitionConfig } from "./dataTransform/transition.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function PieArcPlot(props) {
@@ -38,43 +36,32 @@ function PieArcPlot(props) {
     faded,
     data
   });
-  const transition = useTransition(transformedData, _extends({}, getDefaultTransitionConfig(skipAnimation), {
-    immediate: skipAnimation
-  }));
   if (data.length === 0) {
     return null;
   }
   const Arc = slots?.pieArc ?? PieArc;
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: transition(({
-      startAngle,
-      endAngle,
-      paddingAngle: pA,
-      innerRadius: iR,
-      outerRadius: oR,
-      cornerRadius: cR
-    }, item, _, index) => {
-      return /*#__PURE__*/_jsx(Arc, _extends({
-        startAngle: startAngle,
-        endAngle: endAngle,
-        paddingAngle: pA,
-        innerRadius: iR,
-        outerRadius: oR,
-        cornerRadius: cR,
-        id: id,
-        color: item.color,
-        dataIndex: index,
-        isFaded: item.isFaded,
-        isHighlighted: item.isHighlighted,
-        onClick: onItemClick && (event => {
-          onItemClick(event, {
-            type: 'pie',
-            seriesId: id,
-            dataIndex: index
-          }, item);
-        })
-      }, slotProps?.pieArc));
-    })
+    children: transformedData.map((item, index) => /*#__PURE__*/_jsx(Arc, _extends({
+      startAngle: item.startAngle,
+      endAngle: item.endAngle,
+      paddingAngle: item.paddingAngle,
+      innerRadius: item.innerRadius,
+      outerRadius: item.outerRadius,
+      cornerRadius: item.cornerRadius,
+      skipAnimation: skipAnimation ?? false,
+      id: id,
+      color: item.color,
+      dataIndex: index,
+      isFaded: item.isFaded,
+      isHighlighted: item.isHighlighted,
+      onClick: onItemClick && (event => {
+        onItemClick(event, {
+          type: 'pie',
+          seriesId: id,
+          dataIndex: index
+        }, item);
+      })
+    }, slotProps?.pieArc), item.dataIndex))
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {

package/modern/PieChart/seriesConfig/tooltip.js

@@ -10,6 +10,9 @@ const tooltipGetter = params => {
     return null;
   }
   const point = series.data[identifier.dataIndex];
+  if (point == null) {
+    return null;
+  }
   const label = getLabel(point.label, 'tooltip');
   const value = _extends({}, point, {
     label

package/modern/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js

@@ -5,7 +5,7 @@ import { useSelector } from "../../internals/store/useSelector.js";
 import { useStore } from "../../internals/store/useStore.js";
 import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
 import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
-import { selectorChartsInteractionXAxis } from "../../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { selectorChartsInteractionRotationAxisIndex, selectorChartsInteractionRotationAxisValue } from "../../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js";
 export function useRadarAxisHighlight(params) {
   const {
     includesNeighbors = false
@@ -20,10 +20,14 @@ export function useRadarAxisHighlight(params) {
     instance
   } = useChartContext();
   const store = useStore();
-  const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
+  const rotationAxisIndex = useSelector(store, selectorChartsInteractionRotationAxisIndex);
+  const rotationAxisValue = useSelector(store, selectorChartsInteractionRotationAxisValue);
   const center = useSelector(store, selectorChartPolarCenter);
-  const highlightedIndex = xAxisIdentifier?.index;
-  if (highlightedIndex === undefined) {
+  const highlightedIndex = rotationAxisIndex;
+  if (!rotationScale) {
+    return null;
+  }
+  if (highlightedIndex === null || highlightedIndex === -1) {
     return null;
   }
   if (radarSeries === undefined || radarSeries.length === 0) {
@@ -31,7 +35,7 @@ export function useRadarAxisHighlight(params) {
   }
   const metric = radiusAxisIds[highlightedIndex];
   const radiusScale = radiusAxis[metric].scale;
-  const angle = rotationScale(xAxisIdentifier?.value);
+  const angle = rotationScale(rotationAxisValue);
   const radius = radiusScale.range()[1];
   return {
     center,

package/modern/RadarChart/RadarGrid/RadarGrid.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RadarGridProps } from "./RadarGrid.types.js";
-declare function RadarGrid(props: RadarGridProps): React.JSX.Element;
+declare function RadarGrid(props: RadarGridProps): React.JSX.Element | null;
 declare namespace RadarGrid {
   var propTypes: any;
 }

package/modern/RadarChart/RadarGrid/RadarGrid.js

@@ -9,11 +9,15 @@ function RadarGrid(props) {
     divisions = 5,
     shape = 'sharp'
   } = props;
+  const gridData = useRadarGridData();
+  if (gridData === null) {
+    return null;
+  }
   const {
     center,
     corners,
     radius
-  } = useRadarGridData();
+  } = gridData;
   return shape === 'sharp' ? /*#__PURE__*/_jsx(SharpRadarGrid, {
     divisions: divisions,
     corners: corners,

package/modern/RadarChart/RadarGrid/useRadarGridData.d.ts

@@ -8,4 +8,4 @@ export declare function useRadarGridData(): {
     y: number;
   }[];
   radius: number;
-};
+} | null;

package/modern/RadarChart/RadarGrid/useRadarGridData.js

@@ -13,6 +13,9 @@ export function useRadarGridData() {
   const drawingArea = useDrawingArea();
   const cx = drawingArea.left + drawingArea.width / 2;
   const cy = drawingArea.top + drawingArea.height / 2;
+  if (!rotationScale || rotationScale.domain().length === 0) {
+    return null;
+  }
   const metrics = rotationScale.domain();
   const angles = metrics.map(key => rotationScale(key));
   return {

package/modern/RadarChart/RadarSeriesPlot/useRadarSeriesData.js

@@ -23,8 +23,8 @@ export function useRadarSeriesData(querySeriesId) {
     isFaded: isItemFaded,
     isHighlighted: isItemHighlighted
   } = useItemHighlightedGetter();
-  const metrics = rotationScale.domain();
-  const angles = metrics.map(key => rotationScale(key));
+  const metrics = rotationScale?.domain() ?? [];
+  const angles = metrics.map(key => rotationScale?.(key));
   return radarSeries.map(series => {
     const seriesId = series.id;
     const isSeriesHighlighted = isItemHighlighted({

package/modern/ScatterChart/ScatterChart.js

@@ -229,6 +229,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -284,6 +285,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),

package/modern/ScatterChart/useScatterChartProps.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
 import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
@@ -24,5 +25,5 @@ export declare const useScatterChartProps: (props: ScatterChartProps) => {
   overlayProps: ChartsOverlayProps;
   legendProps: ChartsLegendSlotExtension;
   axisHighlightProps: ChartsAxisHighlightProps;
-  children: import("react").ReactNode;
+  children: React.ReactNode;
 };

package/modern/ScatterChart/useScatterChartProps.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
+import * as React from 'react';
 import { SCATTER_CHART_PLUGINS } from "./ScatterChart.plugins.js";
 /**
  * A helper function that extracts ScatterChartProps from the input props
@@ -36,10 +37,11 @@ export const useScatterChartProps = props => {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const seriesWithDefault = React.useMemo(() => series.map(s => _extends({
+    type: 'scatter'
+  }, s)), [series]);
   const chartContainerProps = _extends({}, other, {
-    series: series.map(s => _extends({
-      type: 'scatter'
-    }, s)),
+    series: seriesWithDefault,
     width,
     height,
     margin,

package/modern/SparkLineChart/SparkLineChart.js

@@ -292,6 +292,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -346,6 +347,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),

package/modern/colorPalettes/colorPalettes.js

@@ -1,5 +1,5 @@
-export const rainbowSurgePaletteLight = ['#4254FB', '#FFB219', '#54C690', '#FF5463', '#F287B3', '#2EAFFF', '#FD8731'];
-export const rainbowSurgePaletteDark = ['#273DFF', '#FAC04E', '#32ae6a', '#F3616E', '#F286B3', '#2EAFFF', '#FD8731'];
+export const rainbowSurgePaletteLight = ['#4254FB', '#FFB422', '#FA4F58', '#0DBEFF', '#22BF75', '#FA83B4', '#FF7511'];
+export const rainbowSurgePaletteDark = ['#495AFB', '#FFC758', '#F35865', '#30C8FF', '#44CE8D', '#F286B3', '#FF8C39'];
 export const rainbowSurgePalette = mode => mode === 'dark' ? rainbowSurgePaletteDark : rainbowSurgePaletteLight;
 export const blueberryTwilightPaletteLight = ['#02B2AF', '#2E96FF', '#B800D8', '#60009B', '#2731C8', '#03008D'];
 export const blueberryTwilightPaletteDark = ['#02B2AF', '#72CCFF', '#DA00FF', '#9001CB', '#2E96FF', '#3B48E0'];

package/modern/constants/index.d.ts

@@ -8,6 +8,6 @@ export declare const DEFAULT_MARGINS: {
   left: number;
   right: number;
 };
-export declare const DEFAULT_AXIS_SIZE_WIDTH = 30;
+export declare const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export declare const DEFAULT_AXIS_SIZE_HEIGHT = 25;
 export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;

package/modern/constants/index.js

@@ -8,7 +8,7 @@ export const DEFAULT_MARGINS = {
   left: 20,
   right: 20
 };
-export const DEFAULT_AXIS_SIZE_WIDTH = 30;
+export const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export const DEFAULT_AXIS_SIZE_HEIGHT = 25;
 
 // How many pixels to add to the default axis size if that axis has a label

package/modern/context/AnimationProvider/AnimationProvider.js

@@ -1,7 +1,7 @@
 'use client';
 
-import { Globals, useIsomorphicLayoutEffect } from '@react-spring/web';
 import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { AnimationContext } from "./AnimationContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function AnimationProvider(props) {
@@ -18,7 +18,7 @@ function AnimationProvider(props) {
   // 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(process.env.NODE_ENV === 'test' ? isAnimationDisabledEnvironment || undefined : undefined);
-  useIsomorphicLayoutEffect(() => {
+  useEnhancedEffect(() => {
     if (isAnimationDisabledEnvironment) {
       return undefined;
     }
@@ -26,9 +26,6 @@ function AnimationProvider(props) {
       // This hook can remove animation but never activate it.
       const inputValue = event.matches || undefined;
       setSkipAnimation(inputValue);
-      Globals.assign({
-        skipAnimation: inputValue
-      });
     };
     const mql = window.matchMedia('(prefers-reduced-motion)');
     handleMediaChange(mql);
@@ -38,7 +35,7 @@ function AnimationProvider(props) {
     return () => {
       mql?.removeEventListener?.('change', handleMediaChange);
     };
-  }, []);
+  }, [isAnimationDisabledEnvironment]);
   const value = React.useMemo(() => ({
     isInitialized: true,
     data: {

package/modern/hooks/animation/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./useAnimateArea.js";
+export * from "./useAnimateBar.js";
+export * from "./useAnimateBarLabel.js";
+export * from "./useAnimateLine.js";
+export * from "./useAnimatePieArc.js";
+export * from "./useAnimatePieArcLabel.js";

package/modern/hooks/animation/index.js

@@ -0,0 +1,6 @@
+export * from "./useAnimateArea.js";
+export * from "./useAnimateBar.js";
+export * from "./useAnimateBarLabel.js";
+export * from "./useAnimateLine.js";
+export * from "./useAnimatePieArc.js";
+export * from "./useAnimatePieArcLabel.js";

package/modern/hooks/animation/useAnimateArea.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { AnimatedAreaProps } from '../../LineChart';
+type UseAnimateAreaParams = Pick<AnimatedAreaProps, 'd' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimatedAreaReturn = {
+  ref: React.Ref<SVGPathElement>;
+  d: string;
+};
+/** Animates an area of a line chart using a `path` element.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export declare function useAnimateArea(props: UseAnimateAreaParams): UseAnimatedAreaReturn;
+export {};

package/modern/hooks/animation/useAnimateArea.js

@@ -0,0 +1,27 @@
+import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
+import useForkRef from '@mui/utils/useForkRef';
+import { useAnimate } from "../../internals/animation/useAnimate.js";
+/** Animates an area of a line chart using a `path` element.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export function useAnimateArea(props) {
+  const ref = useAnimate({
+    d: props.d
+  }, {
+    createInterpolator: (lastProps, newProps) => {
+      const interpolate = interpolateString(lastProps.d, newProps.d);
+      return t => ({
+        d: interpolate(t)
+      });
+    },
+    applyProps: (element, {
+      d
+    }) => element.setAttribute('d', d),
+    skip: props.skipAnimation
+  });
+  return {
+    ref: useForkRef(ref, props.ref),
+    d: props.d
+  };
+}

package/modern/hooks/animation/useAnimateBar.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { BarProps } from '../../BarChart/AnimatedBarElement';
+type UseAnimateBarParams = Pick<BarProps, 'x' | 'y' | 'xOrigin' | 'yOrigin' | 'width' | 'height' | 'skipAnimation' | 'layout'> & {
+  ref?: React.Ref<SVGRectElement>;
+};
+type UseAnimateBarReturnValue = {
+  ref: React.Ref<SVGRectElement>;
+} & Pick<BarProps, 'x' | 'y' | 'width' | 'height'>;
+/**
+ * Animates a bar from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to its
+ * final position.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export declare function useAnimateBar(props: UseAnimateBarParams): UseAnimateBarReturnValue;
+export {};