@mui/x-charts 8.0.0-beta.2 → 8.0.0

package/ChartsYAxis/ChartsYAxis.js

@@ -15,6 +15,9 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _useIsHydrated = require("../hooks/useIsHydrated");
+var _defaultTextPlacement = require("../ChartsText/defaultTextPlacement");
+var _ellipsize = require("../internals/ellipsize");
 var _domUtils = require("../internals/domUtils");
 var _useTicks = require("../hooks/useTicks");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -25,6 +28,8 @@ var _isInfinity = require("../internals/isInfinity");
 var _isBandScale = require("../internals/isBandScale");
 var _ChartProvider = require("../context/ChartProvider");
 var _hooks = require("../hooks");
+var _clampAngle = require("../internals/clampAngle");
+var _invertTextAnchor = require("../internals/invertTextAnchor");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber"];
 const useUtilityClasses = ownerState => {
@@ -42,6 +47,47 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _axisClasses.getAxisUtilityClass, classes);
 };
+
+/* Gap between a tick and its label. */
+const TICK_LABEL_GAP = 2;
+/* Gap between the axis label and tick labels. */
+const AXIS_LABEL_TICK_LABEL_GAP = 2;
+function shortenLabels(visibleLabels, drawingArea, maxWidth, isRtl, tickLabelStyle) {
+  const shortenedLabels = new Map();
+  const angle = (0, _clampAngle.clampAngle)(tickLabelStyle?.angle ?? 0);
+  let topBoundFactor = 1;
+  let bottomBoundFactor = 1;
+  if (tickLabelStyle?.textAnchor === 'start') {
+    topBoundFactor = Infinity;
+    bottomBoundFactor = 1;
+  } else if (tickLabelStyle?.textAnchor === 'end') {
+    topBoundFactor = 1;
+    bottomBoundFactor = Infinity;
+  } else {
+    topBoundFactor = 2;
+    bottomBoundFactor = 2;
+  }
+  if (angle > 180) {
+    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
+  }
+  if (isRtl) {
+    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
+  }
+  for (const item of visibleLabels) {
+    if (item.formattedValue) {
+      // That maximum height of the tick depends on its proximity to the axis bounds.
+      const height = Math.min((item.offset + item.labelOffset) * topBoundFactor, (drawingArea.top + drawingArea.height + drawingArea.bottom - item.offset - item.labelOffset) * bottomBoundFactor);
+      const doesTextFit = text => (0, _ellipsize.doesTextFitInRect)(text, {
+        width: maxWidth,
+        height,
+        angle,
+        measureText: string => (0, _domUtils.getStringSize)(string, tickLabelStyle)
+      });
+      shortenedLabels.set(item, (0, _ellipsize.ellipsize)(item.formattedValue.toString(), doesTextFit));
+    }
+  }
+  return shortenedLabels;
+}
 const YAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
   name: 'MuiChartsYAxis',
   slot: 'Root',
@@ -99,16 +145,18 @@ function ChartsYAxis(inProps) {
   } = defaultizedProps;
   const theme = (0, _styles.useTheme)();
   const isRtl = (0, _RtlProvider.useRtl)();
+  const isHydrated = (0, _useIsHydrated.useIsHydrated)();
   const classes = useUtilityClasses(defaultizedProps);
   const {
     instance
   } = (0, _ChartProvider.useChartContext)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const {
     left,
     top,
     width,
     height
-  } = (0, _useDrawingArea.useDrawingArea)();
+  } = drawingArea;
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = (0, _useTicks.useTicks)({
     scale: yScale,
@@ -124,15 +172,16 @@ function ChartsYAxis(inProps) {
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
   const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
-  const revertAnchor = !isRtl && position === 'right' || isRtl && position !== 'right';
+  const defaultTextAnchor = (0, _defaultTextPlacement.getDefaultTextAnchor)((position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0));
+  const defaultDominantBaseline = (0, _defaultTextPlacement.getDefaultBaseline)((position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0));
   const axisTickLabelProps = (0, _useSlotProps.default)({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: (0, _extends2.default)({}, theme.typography.caption, {
         fontSize: tickFontSize,
-        textAnchor: revertAnchor ? 'start' : 'end',
-        dominantBaseline: 'central'
+        textAnchor: isRtl ? (0, _invertTextAnchor.invertTextAnchor)(defaultTextAnchor) : defaultTextAnchor,
+        dominantBaseline: defaultDominantBaseline
       }, tickLabelStyle)
     },
     className: classes.tickLabel,
@@ -147,7 +196,7 @@ function ChartsYAxis(inProps) {
         fontSize: 14,
         angle: positionSign * 90,
         textAnchor: 'middle',
-        dominantBaseline: 'auto'
+        dominantBaseline: 'text-before-edge'
       }, labelStyle)
     },
     ownerState: {}
@@ -170,11 +219,13 @@ function ChartsYAxis(inProps) {
   if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(_isInfinity.isInfinity) || position === 'none') {
     return null;
   }
-  const labelHeight = label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height : 0;
   const labelRefPoint = {
-    x: positionSign * (axisWidth - labelHeight),
+    x: positionSign * axisWidth,
     y: top + height / 2
   };
+  /* If there's an axis title, the tick labels have less space to render  */
+  const tickLabelsMaxWidth = Math.max(0, axisWidth - (label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
+  const tickLabels = isHydrated ? shortenLabels(yTicks, drawingArea, tickLabelsMaxWidth, isRtl, axisTickLabelProps.style) : new Map(Array.from(yTicks).map(item => [item, item.formattedValue]));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(YAxisRoot, {
     transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
     className: classes.root,
@@ -183,13 +234,13 @@ function ChartsYAxis(inProps) {
       y1: top,
       y2: top + height,
       className: classes.line
-    }, lineSlotProps)), yTicks.map(({
-      formattedValue,
-      offset: tickOffset,
-      labelOffset,
-      value
-    }, index) => {
-      const xTickLabel = positionSign * (tickSize + 2);
+    }, lineSlotProps)), yTicks.map((item, index) => {
+      const {
+        offset: tickOffset,
+        labelOffset,
+        value
+      } = item;
+      const xTickLabel = positionSign * (tickSize + TICK_LABEL_GAP);
       const yTickLabel = labelOffset;
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
       const showLabel = instance.isPointInside({
@@ -198,6 +249,7 @@ function ChartsYAxis(inProps) {
       }, {
         direction: 'y'
       });
+      const tickLabel = tickLabels.get(item);
       if (!showLabel) {
         return null;
       }
@@ -207,13 +259,13 @@ function ChartsYAxis(inProps) {
         children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
           x2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
+        }, slotProps?.axisTick)), tickLabel !== undefined && !skipLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
           x: xTickLabel,
           y: yTickLabel,
-          text: formattedValue.toString()
+          text: tickLabel
         }, axisTickLabelProps))]
       }, index);
-    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    }), label && isHydrated && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       className: classes.label,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
         text: label

package/Gauge/Gauge.js

@@ -19,7 +19,7 @@ var _GaugeReferenceArc = require("./GaugeReferenceArc");
 var _gaugeClasses = require("./gaugeClasses");
 var _GaugeValueText = require("./GaugeValueText");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["text", "children", "classes", "className"];
+const _excluded = ["text", "children", "classes", "className", "skipAnimation"];
 const useUtilityClasses = props => {
   const {
     classes
@@ -36,7 +36,8 @@ const Gauge = exports.Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props
   const {
       text,
       children,
-      className
+      className,
+      skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const classes = useUtilityClasses(props);
@@ -46,7 +47,8 @@ const Gauge = exports.Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeReferenceArc.GaugeReferenceArc, {
       className: classes.referenceArc
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueArc.GaugeValueArc, {
-      className: classes.valueArc
+      className: classes.valueArc,
+      skipAnimation: skipAnimation
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueText.GaugeValueText, {
       className: classes.valueText,
       text: text
@@ -120,6 +122,11 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * @default '100%'
    */
   outerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: _propTypes.default.bool,
   /**
    * The start angle (deg).
    * @default 0

package/Gauge/GaugeContainer.js

@@ -151,6 +151,11 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * @default '100%'
    */
   outerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: _propTypes.default.bool,
   /**
    * The start angle (deg).
    * @default 0

package/Gauge/GaugeValueArc.d.ts

@@ -1,2 +1,8 @@
 import * as React from 'react';
-export declare function GaugeValueArc(props: React.ComponentProps<'path'>): React.JSX.Element | null;
+declare function GaugeValueArc(props: React.ComponentProps<'path'> & {
+  skipAnimation?: boolean;
+}): React.JSX.Element | null;
+declare namespace GaugeValueArc {
+  var propTypes: any;
+}
+export { GaugeValueArc };

package/Gauge/GaugeValueArc.js

@@ -1,18 +1,22 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GaugeValueArc = GaugeValueArc;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
+var _useSkipAnimation = require("../hooks/useSkipAnimation");
+var _useAnimateGaugeValueArc = require("../hooks/animation/useAnimateGaugeValueArc");
 var _GaugeProvider = require("./GaugeProvider");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["cx", "cy", "startAngle", "endAngle", "cornerRadius", "innerRadius", "outerRadius", "skipAnimation"];
 const StyledPath = (0, _styles.styled)('path', {
   name: 'MuiGauge',
   slot: 'ReferenceArc',
@@ -39,13 +43,59 @@ function GaugeValueArc(props) {
     return null;
   }
   const valueAngle = startAngle + (value - valueMin) / (valueMax - valueMin) * (endAngle - startAngle);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPath, (0, _extends2.default)({
-    transform: `translate(${cx}, ${cy})`,
-    d: (0, _d3Shape.arc)().cornerRadius(cornerRadius)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedGaugeValueArc, (0, _extends2.default)({}, props, {
+    cx: cx,
+    cy: cy,
+    startAngle: startAngle,
+    endAngle: valueAngle,
+    cornerRadius: cornerRadius,
+    innerRadius: innerRadius,
+    outerRadius: outerRadius
+  }));
+}
+process.env.NODE_ENV !== "production" ? GaugeValueArc.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  skipAnimation: _propTypes.default.bool
+} : void 0;
+function AnimatedGaugeValueArc(_ref) {
+  let {
+      cx,
+      cy,
       startAngle,
-      endAngle: valueAngle,
+      endAngle,
+      cornerRadius,
       innerRadius,
-      outerRadius
-    })
-  }, props));
-}
+      outerRadius,
+      skipAnimation: inSkipAnimation
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(inSkipAnimation);
+  const animatedProps = (0, _useAnimateGaugeValueArc.useAnimateGaugeValueArc)({
+    startAngle,
+    endAngle,
+    cornerRadius,
+    innerRadius,
+    outerRadius,
+    skipAnimation
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPath, (0, _extends2.default)({}, animatedProps, {
+    transform: `translate(${cx}, ${cy})`
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? AnimatedGaugeValueArc.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  cornerRadius: _propTypes.default.number.isRequired,
+  cx: _propTypes.default.number.isRequired,
+  cy: _propTypes.default.number.isRequired,
+  endAngle: _propTypes.default.number.isRequired,
+  innerRadius: _propTypes.default.number.isRequired,
+  outerRadius: _propTypes.default.number.isRequired,
+  skipAnimation: _propTypes.default.bool,
+  startAngle: _propTypes.default.number.isRequired
+} : void 0;

package/Gauge/gaugeClasses.d.ts

@@ -10,5 +10,4 @@ export interface GaugeClasses {
 }
 export type GaugeClassKey = keyof GaugeClasses;
 export declare function getGaugeUtilityClass(slot: string): string;
-export declare const gaugeClasses: GaugeClasses;
-export default gaugeClasses;
+export declare const gaugeClasses: GaugeClasses;

package/Gauge/gaugeClasses.js

@@ -4,12 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gaugeClasses = exports.default = void 0;
+exports.gaugeClasses = void 0;
 exports.getGaugeUtilityClass = getGaugeUtilityClass;
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 function getGaugeUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiGauge', slot);
 }
-const gaugeClasses = exports.gaugeClasses = (0, _generateUtilityClasses.default)('MuiGauge', ['root', 'valueArc', 'referenceArc', 'valueText']);
-var _default = exports.default = gaugeClasses;
+const gaugeClasses = exports.gaugeClasses = (0, _generateUtilityClasses.default)('MuiGauge', ['root', 'valueArc', 'referenceArc', 'valueText']);

package/LineChart/AnimatedArea.js

@@ -11,11 +11,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _web = require("@react-spring/web");
-var _useStringInterpolator = require("../internals/useStringInterpolator");
+var _useAnimateArea = require("../hooks/animation/useAnimateArea");
 var _AppearingMask = require("./AppearingMask");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["d", "skipAnimation", "ownerState"];
+const _excluded = ["skipAnimation", "ownerState"];
 /**
  * Demos:
  *
@@ -28,38 +27,22 @@ const _excluded = ["d", "skipAnimation", "ownerState"];
  */
 function AnimatedArea(props) {
   const {
-      d,
       skipAnimation,
       ownerState
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
-  const transitionChange = (0, _web.useTransition)([stringInterpolator], {
-    from: skipAnimation ? undefined : {
-      value: 0
-    },
-    to: {
-      value: 1
-    },
-    enter: {
-      value: 1
-    },
-    reset: false,
-    immediate: skipAnimation
-  });
+  const animatedProps = (0, _useAnimateArea.useAnimateArea)(props);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppearingMask.AppearingMask, {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-area-clip`,
-    children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.path, (0, _extends2.default)({
-      // @ts-expect-error
-      d: style.value.to(interpolator),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
       fill: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       filter:
       // eslint-disable-next-line no-nested-ternary
       ownerState.isHighlighted ? 'brightness(140%)' : ownerState.gradientId ? undefined : 'brightness(120%)',
       opacity: ownerState.isFaded ? 0.3 : 1,
       stroke: "none"
-    }, other)))
+    }, other, animatedProps))
   });
 }
 process.env.NODE_ENV !== "production" ? AnimatedArea.propTypes = {

package/LineChart/AnimatedLine.d.ts

@@ -19,8 +19,5 @@ export interface AnimatedLineProps extends React.ComponentPropsWithoutRef<'path'
  *
  * - [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
  */
-declare function AnimatedLine(props: AnimatedLineProps): React.JSX.Element;
-declare namespace AnimatedLine {
-  var propTypes: any;
-}
+declare const AnimatedLine: React.ForwardRefExoticComponent<AnimatedLineProps & React.RefAttributes<SVGPathElement>>;
 export { AnimatedLine };

package/LineChart/AnimatedLine.js

@@ -6,16 +6,15 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AnimatedLine = AnimatedLine;
+exports.AnimatedLine = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _web = require("@react-spring/web");
-var _useStringInterpolator = require("../internals/useStringInterpolator");
+var _hooks = require("../hooks");
 var _AppearingMask = require("./AppearingMask");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["d", "skipAnimation", "ownerState"];
+const _excluded = ["skipAnimation", "ownerState"];
 /**
  * Demos:
  *
@@ -26,42 +25,28 @@ const _excluded = ["d", "skipAnimation", "ownerState"];
  *
  * - [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
  */
-function AnimatedLine(props) {
+const AnimatedLine = exports.AnimatedLine = /*#__PURE__*/React.forwardRef(function AnimatedLine(props, ref) {
   const {
-      d,
       skipAnimation,
       ownerState
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
-  const transitionChange = (0, _web.useTransition)([stringInterpolator], {
-    from: skipAnimation ? undefined : {
-      value: 0
-    },
-    to: {
-      value: 1
-    },
-    enter: {
-      value: 1
-    },
-    reset: false,
-    immediate: skipAnimation
-  });
+  const animateProps = (0, _hooks.useAnimateLine)((0, _extends2.default)({}, props, {
+    ref
+  }));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppearingMask.AppearingMask, {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-line-clip`,
-    children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.path, (0, _extends2.default)({
-      // @ts-expect-error
-      d: style.value.to(interpolator),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
       stroke: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       strokeWidth: 2,
       strokeLinejoin: "round",
       fill: "none",
       filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
       opacity: ownerState.isFaded ? 0.3 : 1
-    }, other)))
+    }, other, animateProps))
   });
-}
+});
 process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/LineChart/AppearingMask.d.ts

@@ -5,6 +5,11 @@ interface AppearingMaskProps {
   skipAnimation?: boolean;
   children: React.ReactNode;
 }
+export interface AppearingMaskClasses {
+  /** Styles applied if the element should be animated. */
+  animate: string;
+}
+export declare const appearingMaskClasses: AppearingMaskClasses;
 /**
  * @ignore - internal component.
  */

package/LineChart/AppearingMask.js

@@ -1,46 +1,53 @@
 "use strict";
 'use client';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AppearingMask = AppearingMask;
+exports.appearingMaskClasses = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _web = require("@react-spring/web");
+var _styles = require("@mui/material/styles");
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _animation = require("../internals/animation/animation");
 var _cleanId = require("../internals/cleanId");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
+const appearingMaskClasses = exports.appearingMaskClasses = (0, _generateUtilityClasses.default)('MuiAppearingMask', ['animate']);
+const AnimatedRect = (0, _styles.styled)('rect')({
+  animationName: 'animate-width',
+  animationTimingFunction: _animation.ANIMATION_TIMING_FUNCTION,
+  animationDuration: '0s',
+  [`&.${appearingMaskClasses.animate}`]: {
+    animationDuration: `${_animation.ANIMATION_DURATION_MS}ms`
+  },
+  '@keyframes animate-width': {
+    from: {
+      width: 0
+    }
+  }
+});
+
 /**
  * @ignore - internal component.
  */
 function AppearingMask(props) {
   const drawingArea = (0, _hooks.useDrawingArea)();
   const chartId = (0, _hooks.useChartId)();
-  const transitionAppear = (0, _web.useTransition)([drawingArea], {
-    from: props.skipAnimation ? undefined : v => ({
-      animatedWidth: v.left
-    }),
-    enter: v => ({
-      animatedWidth: v.width + v.left + v.right
-    }),
-    leave: v => ({
-      animatedWidth: v.width + v.left + v.right
-    }),
-    reset: false,
-    immediate: props.skipAnimation
-  });
   const clipId = (0, _cleanId.cleanId)(`${chartId}-${props.id}`);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
       id: clipId,
-      children: transitionAppear(style => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
-        // @ts-expect-error
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedRect, {
+        className: (0, _clsx.default)(!props.skipAnimation && appearingMaskClasses.animate),
         x: 0,
         y: 0,
-        width: style.animatedWidth,
+        width: drawingArea.left + drawingArea.width + drawingArea.right,
         height: drawingArea.top + drawingArea.height + drawingArea.bottom
-      }))
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       clipPath: `url(#${clipId})`,
       children: props.children

package/LineChart/AreaElement.d.ts

@@ -9,6 +9,11 @@ export interface AreaElementClasses {
   highlighted: string;
   /** Styles applied to the root element when faded. */
   faded: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${areaElementClasses.series}-${seriesId}`.
+   */
+  series: string;
 }
 export type AreaElementClassKey = keyof AreaElementClasses;
 export interface AreaElementOwnerState {

package/LineChart/AreaElement.js

@@ -25,7 +25,7 @@ const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps",
 function getAreaElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAreaElement', slot);
 }
-const areaElementClasses = exports.areaElementClasses = (0, _generateUtilityClasses.default)('MuiAreaElement', ['root', 'highlighted', 'faded']);
+const areaElementClasses = exports.areaElementClasses = (0, _generateUtilityClasses.default)('MuiAreaElement', ['root', 'highlighted', 'faded', 'series']);
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/LineChart/AreaPlot.js

@@ -19,7 +19,7 @@ var _getCurve = require("../internals/getCurve");
 var _isBandScale = require("../internals/isBandScale");
 var _constants = require("../constants");
 var _useLineSeries = require("../hooks/useLineSeries");
-var _AnimationProvider = require("../context/AnimationProvider");
+var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useChartGradientId = require("../hooks/useChartGradientId");
 var _useAxis = require("../hooks/useAxis");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
@@ -168,7 +168,7 @@ function AreaPlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
-  const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
+  const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaPlotRoot, (0, _extends2.default)({}, other, {
     children: completedData.map(({