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

package/node/ChartsXAxis/ChartsXAxis.js

@@ -14,7 +14,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _useTicks = require("../hooks/useTicks");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
@@ -25,6 +24,8 @@ var _useDrawingArea = require("../hooks/useDrawingArea");
 var _getWordsByLines = require("../internals/getWordsByLines");
 var _isInfinity = require("../internals/isInfinity");
 var _isBandScale = require("../internals/isBandScale");
+var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _useAxis = require("../hooks/useAxis");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber", "reverse"];
 const useUtilityClasses = ownerState => {
@@ -121,9 +122,9 @@ const defaultProps = {
  */
 function ChartsXAxis(inProps) {
   const {
-    xAxisIds,
-    xAxis
-  } = (0, _CartesianProvider.useCartesianContext)();
+    xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
   const _xAxis = xAxis[inProps.axisId ?? xAxisIds[0]],
     {
       scale: xScale,
@@ -144,8 +145,6 @@ function ChartsXAxis(inProps) {
     tickLabelStyle,
     label,
     labelStyle,
-    tickFontSize,
-    labelFontSize,
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
@@ -164,9 +163,11 @@ function ChartsXAxis(inProps) {
     left,
     top,
     width,
-    height,
-    isPointInside
+    height
   } = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    instance
+  } = (0, _useChartContext.useChartContext)();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const positionSign = position === 'bottom' ? 1 : -1;
   const Line = slots?.axisLine ?? 'line';
@@ -178,9 +179,9 @@ function ChartsXAxis(inProps) {
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: (0, _extends2.default)({
+        fontSize: 12,
         textAnchor: 'middle',
-        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
-        fontSize: tickFontSize ?? 12
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
       }, tickLabelStyle)
     },
     className: classes.tickLabel,
@@ -209,7 +210,7 @@ function ChartsXAxis(inProps) {
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: (0, _extends2.default)({
-        fontSize: labelFontSize ?? 14,
+        fontSize: 14,
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
       }, labelStyle)
@@ -240,13 +241,13 @@ function ChartsXAxis(inProps) {
     }, index) => {
       const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + 3);
-      const showTick = isPointInside({
+      const showTick = instance.isPointInside({
         x: offset,
         y: -1
       }, {
         direction: 'x'
       });
-      const showTickLabel = isPointInside({
+      const showTickLabel = instance.isPointInside({
         x: offset + xTickLabel,
         y: -1
       }, {
@@ -306,12 +307,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * The label of the axis.
    */
   label: _propTypes.default.string,
-  /**
-   * The font size of the axis label.
-   * @default 14
-   * @deprecated Consider using `labelStyle.fontSize` instead.
-   */
-  labelFontSize: _propTypes.default.number,
   /**
    * The style applied to the axis label.
    */
@@ -336,12 +331,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    */
   stroke: _propTypes.default.string,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  /**
-   * The font size of the axis ticks text.
-   * @default 12
-   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
-   */
-  tickFontSize: _propTypes.default.number,
   /**
    * Defines which ticks are displayed.
    * Its value can be:

package/node/ChartsYAxis/ChartsYAxis.js

@@ -15,7 +15,6 @@ 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 _CartesianProvider = require("../context/CartesianProvider");
 var _useTicks = require("../hooks/useTicks");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
@@ -23,6 +22,8 @@ var _ChartsText = require("../ChartsText");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _isInfinity = require("../internals/isInfinity");
 var _isBandScale = require("../internals/isBandScale");
+var _ChartProvider = require("../context/ChartProvider");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber"];
 const useUtilityClasses = ownerState => {
@@ -49,8 +50,6 @@ const defaultProps = {
   position: 'left',
   disableLine: false,
   disableTicks: false,
-  tickFontSize: 12,
-  labelFontSize: 14,
   tickSize: 6
 };
 
@@ -67,7 +66,7 @@ function ChartsYAxis(inProps) {
   const {
     yAxisIds,
     yAxis
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _hooks.useYAxes)();
   const _yAxis = yAxis[inProps.axisId ?? yAxisIds[0]],
     {
       scale: yScale,
@@ -83,9 +82,7 @@ function ChartsYAxis(inProps) {
     position,
     disableLine,
     disableTicks,
-    tickFontSize,
     label,
-    labelFontSize,
     labelStyle,
     tickLabelStyle,
     tickSize: tickSizeProp,
@@ -103,12 +100,14 @@ function ChartsYAxis(inProps) {
   const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
     theme
   }));
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   const {
     left,
     top,
     width,
-    height,
-    isPointInside
+    height
   } = (0, _useDrawingArea.useDrawingArea)();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = (0, _useTicks.useTicks)({
@@ -120,6 +119,7 @@ function ChartsYAxis(inProps) {
     tickInterval
   });
   const positionSign = position === 'right' ? 1 : -1;
+  const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : 12;
   const labelRefPoint = {
     x: positionSign * (tickFontSize + tickSize + 10),
     y: top + height / 2
@@ -147,7 +147,7 @@ function ChartsYAxis(inProps) {
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: (0, _extends2.default)({
-        fontSize: labelFontSize,
+        fontSize: 14,
         angle: positionSign * 90,
         textAnchor: 'middle',
         dominantBaseline: 'auto'
@@ -188,7 +188,7 @@ function ChartsYAxis(inProps) {
       const xTickLabel = positionSign * (tickSize + 2);
       const yTickLabel = labelOffset;
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
-      const showLabel = isPointInside({
+      const showLabel = instance.isPointInside({
         x: -1,
         y: offset
       }, {
@@ -250,12 +250,6 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * The label of the axis.
    */
   label: _propTypes.default.string,
-  /**
-   * The font size of the axis label.
-   * @default 14
-   * @deprecated Consider using `labelStyle.fontSize` instead.
-   */
-  labelFontSize: _propTypes.default.number,
   /**
    * The style applied to the axis label.
    */
@@ -280,12 +274,6 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    */
   stroke: _propTypes.default.string,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  /**
-   * The font size of the axis ticks text.
-   * @default 12
-   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
-   */
-  tickFontSize: _propTypes.default.number,
   /**
    * Defines which ticks are displayed.
    * Its value can be:

package/node/Gauge/Gauge.js

@@ -95,6 +95,11 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
   /**
    * The radius between circle center and the beginning of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.
@@ -106,7 +111,6 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -144,12 +148,6 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * @default 0
    */
   valueMin: _propTypes.default.number,
-  viewBox: _propTypes.default.shape({
-    height: _propTypes.default.number,
-    width: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/node/Gauge/GaugeContainer.js

@@ -12,33 +12,14 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useChartContainerDimensions = require("../ChartContainer/useChartContainerDimensions");
 var _ChartsSurface = require("../ChartsSurface");
-var _DrawingProvider = require("../context/DrawingProvider");
 var _GaugeProvider = require("./GaugeProvider");
+var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
-const ResizableContainer = (0, _styles.styled)('div', {
-  name: 'MuiGauge',
-  slot: 'Container'
-})(({
-  ownerState,
+const GStyled = (0, _styles.styled)('g')(({
   theme
 }) => ({
-  width: ownerState.width ?? '100%',
-  height: ownerState.height ?? '100%',
-  display: 'flex',
-  position: 'relative',
-  flexGrow: 1,
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'hidden',
-  '&>svg': {
-    width: '100%',
-    height: '100%'
-  },
   '& text': {
     fill: (theme.vars || theme).palette.text.primary
   }
@@ -63,58 +44,45 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
       children
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const {
-    containerRef,
-    width,
-    height
-  } = (0, _useChartContainerDimensions.useChartContainerDimensions)(inWidth, inHeight);
-  const svgRef = React.useRef(null);
-  const chartSurfaceRef = (0, _useForkRef.default)(ref, svgRef);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, (0, _extends2.default)({
-    ref: containerRef,
-    ownerState: {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, {
+    pluginParams: {
       width: inWidth,
-      height: inHeight
-    },
-    role: "meter",
-    "aria-valuenow": value === null ? undefined : value,
-    "aria-valuemin": valueMin,
-    "aria-valuemax": valueMax
-  }, other, {
-    children: width && height ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, {
-      width: width,
-      height: height,
+      height: inHeight,
       margin: (0, _extends2.default)({
         left: 10,
         right: 10,
         top: 10,
         bottom: 10
-      }, margin),
-      svgRef: svgRef,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeProvider.GaugeProvider, {
-        value: value,
-        valueMin: valueMin,
-        valueMax: valueMax,
-        startAngle: startAngle,
-        endAngle: endAngle,
-        outerRadius: outerRadius,
-        innerRadius: innerRadius,
-        cornerRadius: cornerRadius,
-        cx: cx,
-        cy: cy,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, {
-          width: width,
-          height: height,
-          ref: chartSurfaceRef,
-          title: title,
-          desc: desc,
-          disableAxisListener: true,
+      }, margin)
+    },
+    plugins: [],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeProvider.GaugeProvider, {
+      value: value,
+      valueMin: valueMin,
+      valueMax: valueMax,
+      startAngle: startAngle,
+      endAngle: endAngle,
+      outerRadius: outerRadius,
+      innerRadius: innerRadius,
+      cornerRadius: cornerRadius,
+      cx: cx,
+      cy: cy,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({
+        title: title,
+        desc: desc,
+        role: "meter",
+        "aria-valuenow": value === null ? undefined : value,
+        "aria-valuemin": valueMin,
+        "aria-valuemax": valueMax
+      }, other, {
+        ref: ref,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GStyled, {
           "aria-hidden": "true",
           children: children
         })
-      })
-    }) : null
-  }));
+      }))
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -157,6 +125,11 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
   /**
    * The radius between circle center and the beginning of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.
@@ -168,7 +141,6 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -205,12 +177,6 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * @default 0
    */
   valueMin: _propTypes.default.number,
-  viewBox: _propTypes.default.shape({
-    height: _propTypes.default.number,
-    width: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/node/Gauge/GaugeProvider.js

@@ -1,4 +1,6 @@
 "use strict";
+// @ignore - do not document.
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -12,8 +14,6 @@ var _getPercentageValue = require("../internals/getPercentageValue");
 var _utils = require("./utils");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _jsxRuntime = require("react/jsx-runtime");
-// @ignore - do not document.
-
 const GaugeContext = exports.GaugeContext = /*#__PURE__*/React.createContext({
   value: null,
   valueMin: 0,

package/node/LineChart/AnimatedArea.js

@@ -7,30 +7,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AnimatedArea = AnimatedArea;
-exports.AreaElementPath = 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 _styles = require("@mui/material/styles");
 var _web = require("@react-spring/web");
-var _d3Color = require("@mui/x-charts-vendor/d3-color");
 var _useStringInterpolator = require("../internals/useStringInterpolator");
 var _AppearingMask = require("./AppearingMask");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["d", "skipAnimation", "ownerState"];
-const AreaElementPath = exports.AreaElementPath = (0, _styles.styled)(_web.animated.path, {
-  name: 'MuiAreaElement',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  ownerState
-}) => ({
-  stroke: 'none',
-  fill: ownerState.gradientId && `url(#${ownerState.gradientId})` || ownerState.isHighlighted && (0, _d3Color.color)(ownerState.color).brighter(1).formatHex() || (0, _d3Color.color)(ownerState.color).brighter(0.5).formatHex(),
-  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
-  opacity: ownerState.isFaded ? 0.3 : 1
-}));
 /**
  * Demos:
  *
@@ -50,7 +35,7 @@ function AnimatedArea(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
   const transitionChange = (0, _web.useTransition)([stringInterpolator], {
-    from: {
+    from: skipAnimation ? undefined : {
       value: 0
     },
     to: {
@@ -65,10 +50,16 @@ function AnimatedArea(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppearingMask.AppearingMask, {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-area-clip`,
-    children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaElementPath, (0, _extends2.default)({}, other, {
-      ownerState: ownerState,
-      d: style.value.to(interpolator)
-    })))
+    children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.path, (0, _extends2.default)({
+      // @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 = {

package/node/LineChart/AnimatedLine.js

@@ -7,32 +7,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AnimatedLine = AnimatedLine;
-exports.LineElementPath = 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 _d3Color = require("@mui/x-charts-vendor/d3-color");
-var _styles = require("@mui/material/styles");
 var _useStringInterpolator = require("../internals/useStringInterpolator");
 var _AppearingMask = require("./AppearingMask");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["d", "skipAnimation", "ownerState"];
-const LineElementPath = exports.LineElementPath = (0, _styles.styled)(_web.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 && (0, _d3Color.color)(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:
  *
@@ -52,7 +35,7 @@ function AnimatedLine(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
   const transitionChange = (0, _web.useTransition)([stringInterpolator], {
-    from: {
+    from: skipAnimation ? undefined : {
       value: 0
     },
     to: {
@@ -67,10 +50,16 @@ function AnimatedLine(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppearingMask.AppearingMask, {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-line-clip`,
-    children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(LineElementPath, (0, _extends2.default)({}, other, {
-      ownerState: ownerState,
-      d: style.value.to(interpolator)
-    })))
+    children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.path, (0, _extends2.default)({
+      // @ts-expect-error
+      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 = {

package/node/LineChart/AppearingMask.js

@@ -18,7 +18,7 @@ function AppearingMask(props) {
   const drawingArea = (0, _hooks.useDrawingArea)();
   const chartId = (0, _hooks.useChartId)();
   const transitionAppear = (0, _web.useTransition)([drawingArea], {
-    from: v => ({
+    from: props.skipAnimation ? undefined : v => ({
       animatedWidth: v.left
     }),
     enter: v => ({
@@ -35,6 +35,7 @@ function AppearingMask(props) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
       id: clipId,
       children: transitionAppear(style => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
+        // @ts-expect-error
         x: 0,
         y: 0,
         width: style.animatedWidth,

package/node/LineChart/AreaElement.js

@@ -18,8 +18,8 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
+var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _AnimatedArea = require("./AnimatedArea");
-var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
 function getAreaElementUtilityClass(slot) {
@@ -63,7 +63,7 @@ function AreaElement(props) {
   const {
     isFaded,
     isHighlighted
-  } = (0, _context.useItemHighlighted)({
+  } = (0, _useItemHighlighted.useItemHighlighted)({
     seriesId: id
   });
   const ownerState = {