@mui/x-charts 7.22.3 → 8.0.0-alpha.1

package/modern/ChartsTooltip/useAxisTooltip.js

@@ -1,34 +1,33 @@
 'use client';
 
 import * as React from 'react';
-import { InteractionContext } from "../context/InteractionProvider.js";
 import { useSeries } from "../hooks/useSeries.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { ZAxisContext } from "../context/ZAxisContextProvider.js";
 import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { useStore } from "../internals/useStore.js";
+import { useSelector } from "../internals/useSelector.js";
 import { getLabel } from "../internals/getLabel.js";
 import { isCartesianSeriesType } from "../internals/isCartesian.js";
 import { utcFormatter } from "./utils.js";
+import { useXAxis, useYAxis } from "../hooks/useAxis.js";
+import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis } from "../context/InteractionSelectors.js";
 export function useAxisTooltip() {
-  const {
-    axis
-  } = React.useContext(InteractionContext);
+  const defaultXAxis = useXAxis();
+  const defaultYAxis = useYAxis();
+  const xAxisHasData = defaultXAxis.data !== undefined && defaultXAxis.data.length !== 0;
+  const store = useStore();
+  const axisData = useSelector(store, xAxisHasData ? selectorChartsInteractionXAxis : selectorChartsInteractionYAxis);
   const series = useSeries();
   const {
     xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
+    yAxis
   } = useCartesianContext();
   const {
     zAxis,
     zAxisIds
   } = React.useContext(ZAxisContext);
   const colorProcessors = useColorProcessor();
-
-  // By default use the x-axis
-  const isXaxis = axis.x !== null && axis.x.index !== -1;
-  const axisData = isXaxis ? axis.x && axis.x : axis.y && axis.y;
   if (axisData === null) {
     return null;
   }
@@ -36,8 +35,8 @@ export function useAxisTooltip() {
     index: dataIndex,
     value: axisValue
   } = axisData;
-  const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
-  const usedAxis = isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
+  const USED_AXIS_ID = xAxisHasData ? defaultXAxis.id : defaultYAxis.id;
+  const usedAxis = xAxisHasData ? defaultXAxis : defaultYAxis;
   const relevantSeries = Object.keys(series).filter(isCartesianSeriesType).flatMap(seriesType => {
     const seriesOfType = series[seriesType];
     if (!seriesOfType) {
@@ -45,16 +44,16 @@ export function useAxisTooltip() {
     }
     return seriesOfType.seriesOrder.map(seriesId => {
       const seriesToAdd = seriesOfType.series[seriesId];
-      const providedXAxisId = seriesToAdd.xAxisId ?? seriesToAdd.xAxisKey;
-      const providedYAxisId = seriesToAdd.yAxisId ?? seriesToAdd.yAxisKey;
-      const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
+      const providedXAxisId = seriesToAdd.xAxisId;
+      const providedYAxisId = seriesToAdd.yAxisId;
+      const axisKey = xAxisHasData ? providedXAxisId : providedYAxisId;
 
       // Test if the series uses the default axis
       if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-        const xAxisId = providedXAxisId ?? xAxisIds[0];
-        const yAxisId = providedYAxisId ?? yAxisIds[0];
-        const zAxisId = seriesToAdd.zAxisId ?? seriesToAdd.zAxisKey ?? zAxisIds[0];
-        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId])(dataIndex) ?? '';
+        const xAxisId = providedXAxisId ?? defaultXAxis.id;
+        const yAxisId = providedYAxisId ?? defaultYAxis.id;
+        const zAxisId = 'zAxisId' in seriesToAdd ? seriesToAdd.zAxisId : zAxisIds[0];
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
         const value = seriesToAdd.data[dataIndex] ?? null;
         const formattedValue = seriesToAdd.valueFormatter(value, {
           dataIndex
@@ -76,7 +75,8 @@ export function useAxisTooltip() {
     location: 'tooltip'
   });
   return {
-    identifier: axis,
+    axisDirection: xAxisHasData ? 'x' : 'y',
+    dataIndex,
     seriesItems: relevantSeries,
     axisValue,
     axisFormattedValue

package/modern/ChartsTooltip/useItemTooltip.js

@@ -2,16 +2,17 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { InteractionContext } from "../context/InteractionProvider.js";
 import { useSeries } from "../hooks/useSeries.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { ZAxisContext } from "../context/ZAxisContextProvider.js";
 import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
 import { getLabel } from "../internals/getLabel.js";
+import { selectorChartsInteractionItem } from "../context/InteractionSelectors.js";
+import { useSelector } from "../internals/useSelector.js";
+import { useStore } from "../internals/useStore.js";
 export function useItemTooltip() {
-  const {
-    item
-  } = React.useContext(InteractionContext);
+  const store = useStore();
+  const item = useSelector(store, selectorChartsInteractionItem);
   const series = useSeries();
   const {
     xAxis,
@@ -24,9 +25,9 @@ export function useItemTooltip() {
     zAxisIds
   } = React.useContext(ZAxisContext);
   const colorProcessors = useColorProcessor();
-  const xAxisId = series.xAxisId ?? series.xAxisKey ?? xAxisIds[0];
-  const yAxisId = series.yAxisId ?? series.yAxisKey ?? yAxisIds[0];
-  const zAxisId = series.zAxisId ?? series.zAxisKey ?? zAxisIds[0];
+  const xAxisId = series.xAxisId ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? yAxisIds[0];
+  const zAxisId = series.zAxisId ?? zAxisIds[0];
   if (!item || item.dataIndex === undefined) {
     return null;
   }

package/modern/ChartsTooltip/utils.js

@@ -1,42 +1,8 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useSvgRef } from "../hooks/index.js";
-export function generateVirtualElement(mousePosition) {
-  if (mousePosition === null) {
-    return {
-      getBoundingClientRect: () => ({
-        width: 0,
-        height: 0,
-        x: 0,
-        y: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        toJSON: () => ''
-      })
-    };
-  }
-  const {
-    x,
-    y
-  } = mousePosition;
-  const boundingBox = {
-    width: 0,
-    height: 0,
-    x,
-    y,
-    top: y,
-    right: x,
-    bottom: y,
-    left: x
-  };
-  return {
-    getBoundingClientRect: () => _extends({}, boundingBox, {
-      toJSON: () => JSON.stringify(boundingBox)
-    })
-  };
-}
+/**
+ * @deprecated We recommend using vanilla JS to let popper track mouse position.
+ */
 export function useMouseTracker() {
   const svgRef = useSvgRef();
 
@@ -47,6 +13,7 @@ export function useMouseTracker() {
     if (element === null) {
       return () => {};
     }
+    const controller = new AbortController();
     const handleOut = event => {
       if (event.pointerType !== 'mouse') {
         setMousePosition(null);
@@ -60,24 +27,52 @@ export function useMouseTracker() {
         pointerType: event.pointerType
       });
     };
-    element.addEventListener('pointerdown', handleMove);
-    element.addEventListener('pointermove', handleMove);
-    element.addEventListener('pointerup', handleOut);
+    element.addEventListener('pointerdown', handleMove, {
+      signal: controller.signal
+    });
+    element.addEventListener('pointermove', handleMove, {
+      signal: controller.signal
+    });
+    element.addEventListener('pointerup', handleOut, {
+      signal: controller.signal
+    });
     return () => {
-      element.removeEventListener('pointerdown', handleMove);
-      element.removeEventListener('pointermove', handleMove);
-      element.removeEventListener('pointerup', handleOut);
+      // Calling `.abort()` removes ALL event listeners
+      // For more info, see https://kettanaito.com/blog/dont-sleep-on-abort-controller
+      controller.abort();
     };
   }, [svgRef]);
   return mousePosition;
 }
-export function getTooltipHasData(trigger, displayedData) {
-  if (trigger === 'item') {
-    return displayedData !== null;
-  }
-  const hasAxisXData = displayedData.x !== null;
-  const hasAxisYData = displayedData.y !== null;
-  return hasAxisXData || hasAxisYData;
+export function usePointerType() {
+  const svgRef = useSvgRef();
+
+  // Use a ref to avoid rerendering on every mousemove event.
+  const [pointerType, setPointerType] = React.useState(null);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null) {
+      return () => {};
+    }
+    const handleOut = event => {
+      if (event.pointerType !== 'mouse') {
+        setPointerType(null);
+      }
+    };
+    const handleEnter = event => {
+      setPointerType({
+        height: event.height,
+        pointerType: event.pointerType
+      });
+    };
+    element.addEventListener('pointerenter', handleEnter);
+    element.addEventListener('pointerup', handleOut);
+    return () => {
+      element.removeEventListener('pointerenter', handleEnter);
+      element.removeEventListener('pointerup', handleOut);
+    };
+  }, [svgRef]);
+  return pointerType;
 }
 export function utcFormatter(v) {
   if (v instanceof Date) {

package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -1,12 +1,13 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 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.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { useStore } from "../internals/useStore.js";
 import { getSVGPoint } from "../internals/getSVGPoint.js";
 import { useDrawingArea, useSvgRef } from "../hooks/index.js";
 import { useHighlighted } from "../context/index.js";
@@ -25,9 +26,7 @@ function ChartsVoronoiHandler(props) {
     xAxisIds,
     yAxisIds
   } = useCartesianContext();
-  const {
-    dispatch
-  } = React.useContext(InteractionContext);
+  const store = useStore();
   const {
     series,
     seriesOrder
@@ -42,17 +41,19 @@ function ChartsVoronoiHandler(props) {
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   useEnhancedEffect(() => {
-    dispatch({
-      type: 'updateVoronoiUsage',
-      useVoronoiInteraction: true
-    });
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        useVoronoiInteraction: true
+      })
+    }));
     return () => {
-      dispatch({
-        type: 'updateVoronoiUsage',
-        useVoronoiInteraction: false
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          useVoronoiInteraction: false
+        })
+      }));
     };
-  }, [dispatch]);
+  }, [store]);
   useEnhancedEffect(() => {
     // This effect generate and store the Delaunay object that's used to map coordinate to closest point.
 
@@ -66,12 +67,10 @@ function ChartsVoronoiHandler(props) {
       const {
         data,
         xAxisId,
-        yAxisId,
-        xAxisKey,
-        yAxisKey
+        yAxisId
       } = series[seriesId];
-      const xScale = xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId].scale;
-      const yScale = yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId].scale;
+      const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
       const getXPosition = getValueToPositionMapper(xScale);
       const getYPosition = getValueToPositionMapper(yScale);
       const seriesPoints = data.flatMap(({
@@ -143,27 +142,38 @@ function ChartsVoronoiHandler(props) {
       };
     }
     const handleMouseLeave = () => {
-      dispatch({
-        type: 'exitChart'
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          axis: {
+            x: null,
+            y: null
+          },
+          item: null
+        })
+      }));
       clearHighlighted();
     };
     const handleMouseMove = event => {
       const closestPoint = getClosestPoint(event);
       if (closestPoint === 'outside-chart') {
-        dispatch({
-          type: 'exitChart'
-        });
+        store.update(prev => _extends({}, prev, {
+          interaction: _extends({}, prev.interaction, {
+            axis: {
+              x: null,
+              y: null
+            },
+            item: null
+          })
+        }));
         clearHighlighted();
         return;
       }
       if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
-        dispatch({
-          type: 'leaveItem',
-          data: {
-            type: 'scatter'
-          }
-        });
+        store.update(prev => _extends({}, prev, {
+          interaction: _extends({}, prev.interaction, {
+            item: null
+          })
+        }));
         clearHighlighted();
         return;
       }
@@ -171,14 +181,15 @@ function ChartsVoronoiHandler(props) {
         seriesId,
         dataIndex
       } = closestPoint;
-      dispatch({
-        type: 'enterItem',
-        data: {
-          type: 'scatter',
-          seriesId,
-          dataIndex
-        }
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          item: {
+            type: 'scatter',
+            seriesId,
+            dataIndex
+          }
+        })
+      }));
       setHighlighted({
         seriesId,
         dataIndex
@@ -211,7 +222,7 @@ function ChartsVoronoiHandler(props) {
       element.removeEventListener('pointermove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [svgRef, dispatch, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea]);
+  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea, store]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/_jsx(React.Fragment, {});

package/modern/Gauge/Gauge.js

@@ -137,12 +137,6 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * @default 0
    */
   valueMin: PropTypes.number,
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/modern/Gauge/GaugeContainer.js

@@ -1,18 +1,18 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
 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.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
-import { DrawingProvider } from "../context/DrawingProvider.js";
+import { DrawingAreaProvider } from "../context/DrawingAreaProvider/index.js";
 import { GaugeProvider } from "./GaugeProvider.js";
+import { SizeProvider, useSize } from "../context/SizeProvider/index.js";
+import { SvgRefProvider } from "../context/SvgRefProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const ResizableContainer = styled('div', {
+const ResizableContainerRoot = styled('div', {
   name: 'MuiGauge',
   slot: 'Container'
 })(({
@@ -36,6 +36,22 @@ const ResizableContainer = styled('div', {
     fill: (theme.vars || theme).palette.text.primary
   }
 }));
+function ResizableContainer(props) {
+  const {
+    inHeight,
+    inWidth,
+    hasIntrinsicSize,
+    containerRef
+  } = useSize();
+  return /*#__PURE__*/_jsx(ResizableContainerRoot, _extends({}, props, {
+    ownerState: {
+      width: inWidth,
+      height: inHeight
+    },
+    ref: containerRef,
+    children: hasIntrinsicSize && props.children
+  }));
+}
 const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(props, ref) {
   const {
       width: inWidth,
@@ -56,58 +72,47 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
       children
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    containerRef,
-    width,
-    height
-  } = useChartContainerDimensions(inWidth, inHeight);
-  const svgRef = React.useRef(null);
-  const chartSurfaceRef = useForkRef(ref, svgRef);
-  return /*#__PURE__*/_jsx(ResizableContainer, _extends({
-    ref: containerRef,
-    ownerState: {
-      width: inWidth,
-      height: inHeight
-    },
-    role: "meter",
-    "aria-valuenow": value === null ? undefined : value,
-    "aria-valuemin": valueMin,
-    "aria-valuemax": valueMax
-  }, other, {
-    children: width && height ? /*#__PURE__*/_jsx(DrawingProvider, {
-      width: width,
-      height: height,
-      margin: _extends({
-        left: 10,
-        right: 10,
-        top: 10,
-        bottom: 10
-      }, margin),
-      svgRef: svgRef,
-      children: /*#__PURE__*/_jsx(GaugeProvider, {
-        value: value,
-        valueMin: valueMin,
-        valueMax: valueMax,
-        startAngle: startAngle,
-        endAngle: endAngle,
-        outerRadius: outerRadius,
-        innerRadius: innerRadius,
-        cornerRadius: cornerRadius,
-        cx: cx,
-        cy: cy,
-        children: /*#__PURE__*/_jsx(ChartsSurface, {
-          width: width,
-          height: height,
-          ref: chartSurfaceRef,
-          title: title,
-          desc: desc,
-          disableAxisListener: true,
-          "aria-hidden": "true",
-          children: children
+  return /*#__PURE__*/_jsx(SizeProvider, {
+    width: inWidth,
+    height: inHeight,
+    children: /*#__PURE__*/_jsx(SvgRefProvider, {
+      children: /*#__PURE__*/_jsx(DrawingAreaProvider, {
+        margin: _extends({
+          left: 10,
+          right: 10,
+          top: 10,
+          bottom: 10
+        }, margin),
+        children: /*#__PURE__*/_jsx(GaugeProvider, {
+          value: value,
+          valueMin: valueMin,
+          valueMax: valueMax,
+          startAngle: startAngle,
+          endAngle: endAngle,
+          outerRadius: outerRadius,
+          innerRadius: innerRadius,
+          cornerRadius: cornerRadius,
+          cx: cx,
+          cy: cy,
+          children: /*#__PURE__*/_jsx(ResizableContainer, _extends({
+            role: "meter",
+            "aria-valuenow": value === null ? undefined : value,
+            "aria-valuemin": valueMin,
+            "aria-valuemax": valueMax
+          }, other, {
+            children: /*#__PURE__*/_jsx(ChartsSurface, {
+              title: title,
+              desc: desc,
+              disableAxisListener: true,
+              "aria-hidden": "true",
+              ref: ref,
+              children: children
+            })
+          }))
         })
       })
-    }) : null
-  }));
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -198,12 +203,6 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * @default 0
    */
   valueMin: PropTypes.number,
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/modern/LineChart/AnimatedArea.js

@@ -5,24 +5,10 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["d", "skipAnimation", "ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import { animated, useTransition } from '@react-spring/web';
-import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
 import { useStringInterpolator } from "../internals/useStringInterpolator.js";
 import { AppearingMask } from "./AppearingMask.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const AreaElementPath = styled(animated.path, {
-  name: 'MuiAreaElement',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  ownerState
-}) => ({
-  stroke: 'none',
-  fill: ownerState.gradientId && `url(#${ownerState.gradientId})` || ownerState.isHighlighted && d3Color(ownerState.color).brighter(1).formatHex() || d3Color(ownerState.color).brighter(0.5).formatHex(),
-  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
-  opacity: ownerState.isFaded ? 0.3 : 1
-}));
 /**
  * Demos:
  *
@@ -57,10 +43,15 @@ function AnimatedArea(props) {
   return /*#__PURE__*/_jsx(AppearingMask, {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-area-clip`,
-    children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(AreaElementPath, _extends({}, other, {
-      ownerState: ownerState,
-      d: style.value.to(interpolator)
-    })))
+    children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(animated.path, _extends({
+      d: style.value.to(interpolator),
+      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)))
   });
 }
 process.env.NODE_ENV !== "production" ? AnimatedArea.propTypes = {

package/modern/LineChart/AnimatedLine.js

@@ -6,25 +6,9 @@ const _excluded = ["d", "skipAnimation", "ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 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 { useStringInterpolator } from "../internals/useStringInterpolator.js";
 import { AppearingMask } from "./AppearingMask.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const LineElementPath = styled(animated.path, {
-  name: 'MuiLineElement',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  ownerState
-}) => ({
-  strokeWidth: 2,
-  strokeLinejoin: 'round',
-  fill: 'none',
-  stroke: ownerState.gradientId && `url(#${ownerState.gradientId})` || ownerState.isHighlighted && d3Color(ownerState.color).brighter(0.5).formatHex() || ownerState.color,
-  transition: 'opacity 0.2s ease-in, stroke 0.2s ease-in',
-  opacity: ownerState.isFaded ? 0.3 : 1
-}));
 /**
  * Demos:
  *
@@ -59,10 +43,15 @@ function AnimatedLine(props) {
   return /*#__PURE__*/_jsx(AppearingMask, {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-line-clip`,
-    children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(LineElementPath, _extends({}, other, {
-      ownerState: ownerState,
-      d: style.value.to(interpolator)
-    })))
+    children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(animated.path, _extends({
+      d: style.value.to(interpolator),
+      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)))
   });
 }
 process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {