@mui/x-charts 7.14.0 → 7.16.0

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -6,11 +6,11 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import Popper from '@mui/material/Popper';
 import NoSsr from '@mui/material/NoSsr';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { InteractionContext } from '../context/InteractionProvider';
-import { generateVirtualElement, useMouseTracker, getTooltipHasData } from './utils';
-import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';
-import { ChartsAxisTooltipContent } from './ChartsAxisTooltipContent';
-import { getChartsTooltipUtilityClass } from './chartsTooltipClasses';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { generateVirtualElement, useMouseTracker, getTooltipHasData } from "./utils.js";
+import { ChartsItemTooltipContent } from "./ChartsItemTooltipContent.js";
+import { ChartsAxisTooltipContent } from "./ChartsAxisTooltipContent.js";
+import { getChartsTooltipUtilityClass } from "./chartsTooltipClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -18,6 +18,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root'],
+    paper: ['paper'],
     table: ['table'],
     row: ['row'],
     cell: ['cell'],
@@ -48,9 +49,9 @@ const ChartsTooltipRoot = styled(Popper, {
  *
  * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
  */
-function ChartsTooltip(props) {
-  const themeProps = useThemeProps({
-    props,
+function ChartsTooltip(inProps) {
+  const props = useThemeProps({
+    props: inProps,
     name: 'MuiChartsTooltip'
   });
   const {
@@ -59,7 +60,7 @@ function ChartsTooltip(props) {
     axisContent,
     slots,
     slotProps
-  } = themeProps;
+  } = props;
   const mousePosition = useMouseTracker();
   const {
     item,
@@ -69,7 +70,7 @@ function ChartsTooltip(props) {
   const tooltipHasData = getTooltipHasData(trigger, displayedData);
   const popperOpen = mousePosition !== null && tooltipHasData;
   const classes = useUtilityClasses({
-    classes: themeProps.classes
+    classes: props.classes
   });
   const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
   const popperProps = useSlotProps({
@@ -93,6 +94,7 @@ function ChartsTooltip(props) {
   }
   return /*#__PURE__*/_jsx(NoSsr, {
     children: popperOpen && /*#__PURE__*/_jsx(PopperComponent, _extends({}, popperProps, {
+      className: classes.root,
       children: trigger === 'item' ? /*#__PURE__*/_jsx(ChartsItemTooltipContent, {
         itemData: displayedData,
         content: slots?.itemContent ?? itemContent,
@@ -147,7 +149,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
    * - 'item': Shows data about the item below the mouse.
    * - 'axis': Shows values associated with the hovered x value
    * - 'none': Does not display tooltip
-   * @default 'item'
+   * @default 'axis'
    */
   trigger: PropTypes.oneOf(['axis', 'item', 'none'])
 } : void 0;

package/modern/ChartsTooltip/ChartsTooltipTable.js

@@ -1,13 +1,14 @@
 import { styled } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system';
-import { chartsTooltipClasses } from './chartsTooltipClasses';
+import { chartsTooltipClasses } from "./chartsTooltipClasses.js";
 
 /**
  * @ignore - internal component.
  */
 export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
-  slot: 'Container'
+  slot: 'Container',
+  overridesResolver: (props, styles) => styles.paper
 })(({
   theme
 }) => ({
@@ -23,7 +24,8 @@ export const ChartsTooltipPaper = styled('div', {
  */
 export const ChartsTooltipTable = styled('table', {
   name: 'MuiChartsTooltip',
-  slot: 'Table'
+  slot: 'Table',
+  overridesResolver: (props, styles) => styles.table
 })(({
   theme
 }) => ({
@@ -38,7 +40,8 @@ export const ChartsTooltipTable = styled('table', {
  */
 export const ChartsTooltipRow = styled('tr', {
   name: 'MuiChartsTooltip',
-  slot: 'Row'
+  slot: 'Row',
+  overridesResolver: (props, styles) => styles.row
 })(({
   theme
 }) => ({
@@ -55,7 +58,8 @@ export const ChartsTooltipRow = styled('tr', {
  */
 export const ChartsTooltipCell = styled('td', {
   name: 'MuiChartsTooltip',
-  slot: 'Cell'
+  slot: 'Cell',
+  overridesResolver: (props, styles) => styles.cell
 })(({
   theme
 }) => ({
@@ -82,6 +86,7 @@ export const ChartsTooltipCell = styled('td', {
 export const ChartsTooltipMark = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Mark',
+  overridesResolver: (props, styles) => styles.mark,
   shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'color'
 })(({
   theme,

package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -2,10 +2,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
-import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
-import { utcFormatter } from './utils';
-import { getLabel } from '../internals/getLabel';
-import { isCartesianSeries } from '../internals/isCartesian';
+import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from "./ChartsTooltipTable.js";
+import { utcFormatter } from "./utils.js";
+import { getLabel } from "../internals/getLabel.js";
+import { isCartesianSeries } from "../internals/isCartesian.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsAxisTooltipContent(props) {
   const {
@@ -22,7 +22,7 @@ function DefaultChartsAxisTooltipContent(props) {
   const axisFormatter = axis.valueFormatter ?? (v => axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    className: classes.root,
+    className: classes.paper,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
       className: classes.table,
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {

package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
-import { getLabel } from '../internals/getLabel';
+import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from "./ChartsTooltipTable.js";
+import { getLabel } from "../internals/getLabel.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsItemTooltipContent(props) {
   const {
@@ -34,7 +34,7 @@ function DefaultChartsItemTooltipContent(props) {
   });
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    className: classes.root,
+    className: classes.paper,
     children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
       className: classes.table,
       children: /*#__PURE__*/_jsx("tbody", {

package/modern/ChartsTooltip/chartsTooltipClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generat
 export function getChartsTooltipUtilityClass(slot) {
   return generateUtilityClass('MuiChartsTooltip', slot);
 }
-export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);
+export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);

package/modern/ChartsTooltip/index.js

@@ -1,7 +1,7 @@
-export * from './ChartsTooltip';
-export * from './chartsTooltipClasses';
-export * from './ChartsAxisTooltipContent';
-export * from './ChartsItemTooltipContent';
-export * from './DefaultChartsAxisTooltipContent';
-export * from './DefaultChartsItemTooltipContent';
-export * from './ChartsTooltipTable';
+export * from "./ChartsTooltip.js";
+export * from "./chartsTooltipClasses.js";
+export * from "./ChartsAxisTooltipContent.js";
+export * from "./ChartsItemTooltipContent.js";
+export * from "./DefaultChartsAxisTooltipContent.js";
+export * from "./DefaultChartsItemTooltipContent.js";
+export * from "./ChartsTooltipTable.js";

package/modern/ChartsTooltip/utils.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useSvgRef } from '../hooks';
+import { useSvgRef } from "../hooks/index.js";
 export function generateVirtualElement(mousePosition) {
   if (mousePosition === null) {
     return {

package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -2,13 +2,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Delaunay } from '@mui/x-charts-vendor/d3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import { getSVGPoint } from '../internals/getSVGPoint';
-import { useDrawingArea, useSvgRef } from '../hooks';
-import { useHighlighted } from '../context';
-import { useScatterSeries } from '../hooks/useSeries';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { getSVGPoint } from "../internals/getSVGPoint.js";
+import { useDrawingArea, useSvgRef } from "../hooks/index.js";
+import { useHighlighted } from "../context/index.js";
+import { useScatterSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsVoronoiHandler(props) {
   const {

package/modern/ChartsVoronoiHandler/index.js

@@ -1 +1 @@
-export * from './ChartsVoronoiHandler';
+export * from "./ChartsVoronoiHandler.js";

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -5,18 +5,18 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { useThemeProps, useTheme } from '@mui/material/styles';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { useTicks } from '../hooks/useTicks';
-import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
-import { AxisRoot } from '../internals/components/AxisSharedComponents';
-import { ChartsText } from '../ChartsText';
-import { getMinXTranslation } from '../internals/geometry';
-import { useMounted } from '../hooks/useMounted';
-import { useDrawingArea } from '../hooks/useDrawingArea';
-import { getWordsByLines } from '../internals/getWordsByLines';
-import { isInfinity } from '../internals/isInfinity';
-import { isBandScale } from '../internals/isBandScale';
+import { useThemeProps, useTheme, styled } from '@mui/material/styles';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { useTicks } from "../hooks/useTicks.js";
+import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
+import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getMinXTranslation } from "../internals/geometry.js";
+import { useMounted } from "../hooks/useMounted.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { getWordsByLines } from "../internals/getWordsByLines.js";
+import { isInfinity } from "../internals/isInfinity.js";
+import { isBandScale } from "../internals/isBandScale.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -89,6 +89,11 @@ function addLabelDimension(xTicks, {
     return item;
   });
 }
+const XAxisRoot = styled(AxisRoot, {
+  name: 'MuiChartsXAxis',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
 const defaultProps = {
   position: 'bottom',
   disableLine: false,
@@ -210,7 +215,7 @@ function ChartsXAxis(inProps) {
   if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity)) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(AxisRoot, {
+  return /*#__PURE__*/_jsxs(XAxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
     sx: sx,

package/modern/ChartsXAxis/index.js

@@ -1 +1 @@
-export * from './ChartsXAxis';
+export * from "./ChartsXAxis.js";

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -5,15 +5,16 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { useThemeProps, useTheme } from '@mui/material/styles';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { useTicks } from '../hooks/useTicks';
-import { useDrawingArea } from '../hooks/useDrawingArea';
-import { AxisRoot } from '../internals/components/AxisSharedComponents';
-import { ChartsText } from '../ChartsText';
-import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
-import { isInfinity } from '../internals/isInfinity';
-import { isBandScale } from '../internals/isBandScale';
+import { useThemeProps, useTheme, styled } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { useTicks } from "../hooks/useTicks.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
+import { isInfinity } from "../internals/isInfinity.js";
+import { isBandScale } from "../internals/isBandScale.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -30,6 +31,11 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getAxisUtilityClass, classes);
 };
+const YAxisRoot = styled(AxisRoot, {
+  name: 'MuiChartsYAxis',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
 const defaultProps = {
   position: 'left',
   disableLine: false,
@@ -84,7 +90,7 @@ function ChartsYAxis(inProps) {
     sx
   } = defaultizedProps;
   const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
     theme
   }));
@@ -113,7 +119,7 @@ function ChartsYAxis(inProps) {
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? ChartsText;
   const Label = slots?.axisLabel ?? ChartsText;
-  const revertAnchor = !isRTL && position === 'right' || isRTL && position !== 'right';
+  const revertAnchor = !isRtl && position === 'right' || isRtl && position !== 'right';
   const axisTickLabelProps = useSlotProps({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
@@ -156,7 +162,7 @@ function ChartsYAxis(inProps) {
   if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity)) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(AxisRoot, {
+  return /*#__PURE__*/_jsxs(YAxisRoot, {
     transform: `translate(${position === 'right' ? left + width : left}, 0)`,
     className: classes.root,
     sx: sx,

package/modern/ChartsYAxis/index.js

@@ -1 +1 @@
-export * from './ChartsYAxis';
+export * from "./ChartsYAxis.js";

package/modern/Gauge/Gauge.js

@@ -5,11 +5,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
-import { GaugeContainer } from './GaugeContainer';
-import { GaugeValueArc } from './GaugeValueArc';
-import { GaugeReferenceArc } from './GaugeReferenceArc';
-import { getGaugeUtilityClass } from './gaugeClasses';
-import { GaugeValueText } from './GaugeValueText';
+import { GaugeContainer } from "./GaugeContainer.js";
+import { GaugeValueArc } from "./GaugeValueArc.js";
+import { GaugeReferenceArc } from "./GaugeReferenceArc.js";
+import { getGaugeUtilityClass } from "./gaugeClasses.js";
+import { GaugeValueText } from "./GaugeValueText.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = props => {
   const {

package/modern/Gauge/GaugeContainer.js

@@ -5,10 +5,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import useForkRef from '@mui/utils/useForkRef';
-import { useChartContainerDimensions } from '../ResponsiveChartContainer/useChartContainerDimensions';
-import { ChartsSurface } from '../ChartsSurface';
-import { DrawingProvider } from '../context/DrawingProvider';
-import { GaugeProvider } from './GaugeProvider';
+import { useChartContainerDimensions } from "../ResponsiveChartContainer/useChartContainerDimensions.js";
+import { ChartsSurface } from "../ChartsSurface/index.js";
+import { DrawingProvider } from "../context/DrawingProvider.js";
+import { GaugeProvider } from "./GaugeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ResizableContainer = styled('div', {
   name: 'MuiGauge',

package/modern/Gauge/GaugeProvider.js

@@ -1,8 +1,8 @@
 // @ignore - do not document.
 import * as React from 'react';
-import { getPercentageValue } from '../internals/getPercentageValue';
-import { getArcRatios, getAvailableRadius } from './utils';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { getPercentageValue } from "../internals/getPercentageValue.js";
+import { getArcRatios, getAvailableRadius } from "./utils.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GaugeContext = /*#__PURE__*/React.createContext({
   value: null,

package/modern/Gauge/GaugeReferenceArc.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { styled } from '@mui/material/styles';
-import { useGaugeState } from './GaugeProvider';
+import { useGaugeState } from "./GaugeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
   name: 'MuiGauge',

package/modern/Gauge/GaugeValueArc.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { styled } from '@mui/material/styles';
-import { useGaugeState } from './GaugeProvider';
+import { useGaugeState } from "./GaugeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
   name: 'MuiGauge',

package/modern/Gauge/GaugeValueText.js

@@ -3,8 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["text", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useGaugeState } from './GaugeProvider';
-import { ChartsText } from '../ChartsText';
+import { useGaugeState } from "./GaugeProvider.js";
+import { ChartsText } from "../ChartsText/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function defaultFormatter({
   value

package/modern/Gauge/index.js

@@ -1,7 +1,7 @@
-export * from './Gauge';
-export * from './GaugeContainer';
-export * from './GaugeValueText';
-export * from './GaugeValueArc';
-export * from './GaugeReferenceArc';
-export * from './gaugeClasses';
-export { useGaugeState } from './GaugeProvider';
+export * from "./Gauge.js";
+export * from "./GaugeContainer.js";
+export * from "./GaugeValueText.js";
+export * from "./GaugeValueArc.js";
+export * from "./GaugeReferenceArc.js";
+export * from "./gaugeClasses.js";
+export { useGaugeState } from "./GaugeProvider.js";

package/modern/LineChart/AnimatedArea.js

@@ -4,11 +4,11 @@ const _excluded = ["d", "skipAnimation", "ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { animated, useSpring } from '@react-spring/web';
+import { animated, useTransition } from '@react-spring/web';
 import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
-import { useAnimatedPath } from '../internals/useAnimatedPath';
-import { cleanId } from '../internals/cleanId';
-import { useChartId, useDrawingArea } from '../hooks';
+import { cleanId } from "../internals/cleanId.js";
+import { useChartId, useDrawingArea } from "../hooks/index.js";
+import { useStringInterpolator } from "../internals/useStringInterpolator.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const AreaElementPath = styled(animated.path, {
   name: 'MuiAreaElement',
@@ -48,16 +48,33 @@ function AnimatedArea(props) {
     height
   } = useDrawingArea();
   const chartId = useChartId();
-  const path = useAnimatedPath(d, skipAnimation);
-  const {
-    animatedWidth
-  } = useSpring({
+  const stringInterpolator = useStringInterpolator(d);
+  const transitionAppear = useTransition([1], {
     from: {
       animatedWidth: left
     },
     to: {
       animatedWidth: width + left + right
     },
+    enter: {
+      animatedWidth: width + left + right
+    },
+    leave: {
+      animatedWidth: left
+    },
+    reset: false,
+    immediate: skipAnimation
+  });
+  const transitionChange = useTransition([stringInterpolator], {
+    from: {
+      value: 0
+    },
+    to: {
+      value: 1
+    },
+    enter: {
+      value: 1
+    },
     reset: false,
     immediate: skipAnimation
   });
@@ -65,18 +82,18 @@ function AnimatedArea(props) {
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx("clipPath", {
       id: clipId,
-      children: /*#__PURE__*/_jsx(animated.rect, {
+      children: transitionAppear(style => /*#__PURE__*/_jsx(animated.rect, {
         x: 0,
         y: 0,
-        width: animatedWidth,
+        width: style.animatedWidth,
         height: top + height + bottom
-      })
+      }))
     }), /*#__PURE__*/_jsx("g", {
       clipPath: `url(#${clipId})`,
-      children: /*#__PURE__*/_jsx(AreaElementPath, _extends({}, other, {
+      children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(AreaElementPath, _extends({}, other, {
         ownerState: ownerState,
-        d: path
-      }))
+        d: style.value.to(interpolator)
+      })))
     })]
   });
 }

package/modern/LineChart/AnimatedLine.js

@@ -3,13 +3,13 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["d", "skipAnimation", "ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { animated, useSpring } from '@react-spring/web';
+import { animated, useTransition } from '@react-spring/web';
 import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
 import { styled } from '@mui/material/styles';
-import { useAnimatedPath } from '../internals/useAnimatedPath';
-import { cleanId } from '../internals/cleanId';
-import { useChartId } from '../hooks/useChartId';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { cleanId } from "../internals/cleanId.js";
+import { useChartId } from "../hooks/useChartId.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { useStringInterpolator } from "../internals/useStringInterpolator.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const LineElementPath = styled(animated.path, {
   name: 'MuiLineElement',
@@ -51,16 +51,33 @@ function AnimatedLine(props) {
     right
   } = useDrawingArea();
   const chartId = useChartId();
-  const path = useAnimatedPath(d, skipAnimation);
-  const {
-    animatedWidth
-  } = useSpring({
+  const stringInterpolator = useStringInterpolator(d);
+  const transitionAppear = useTransition([1], {
     from: {
       animatedWidth: left
     },
     to: {
       animatedWidth: width + left + right
     },
+    enter: {
+      animatedWidth: width + left + right
+    },
+    leave: {
+      animatedWidth: left
+    },
+    reset: false,
+    immediate: skipAnimation
+  });
+  const transitionChange = useTransition([stringInterpolator], {
+    from: {
+      value: 0
+    },
+    to: {
+      value: 1
+    },
+    enter: {
+      value: 1
+    },
     reset: false,
     immediate: skipAnimation
   });
@@ -68,18 +85,18 @@ function AnimatedLine(props) {
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx("clipPath", {
       id: clipId,
-      children: /*#__PURE__*/_jsx(animated.rect, {
+      children: transitionAppear(style => /*#__PURE__*/_jsx(animated.rect, {
         x: 0,
         y: 0,
-        width: animatedWidth,
+        width: style.animatedWidth,
         height: top + height + bottom
-      })
+      }))
     }), /*#__PURE__*/_jsx("g", {
       clipPath: `url(#${clipId})`,
-      children: /*#__PURE__*/_jsx(LineElementPath, _extends({}, other, {
+      children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(LineElementPath, _extends({}, other, {
         ownerState: ownerState,
-        d: path
-      }))
+        d: style.value.to(interpolator)
+      })))
     })]
   });
 }

package/modern/LineChart/AreaElement.js

@@ -7,9 +7,9 @@ import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { AnimatedArea } from './AnimatedArea';
-import { useItemHighlighted } from '../context';
+import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { AnimatedArea } from "./AnimatedArea.js";
+import { useItemHighlighted } from "../context/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getAreaElementUtilityClass(slot) {
   return generateUtilityClass('MuiAreaElement', slot);