@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.10

package/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:
  *
@@ -42,7 +28,7 @@ function AnimatedArea(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const stringInterpolator = useStringInterpolator(d);
   const transitionChange = useTransition([stringInterpolator], {
-    from: {
+    from: skipAnimation ? undefined : {
       value: 0
     },
     to: {
@@ -57,10 +43,16 @@ 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({
+      // @ts-expect-error
+      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 = {