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

package/node/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -12,27 +12,33 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Delaunay = require("@mui/x-charts-vendor/d3-delaunay");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _CartesianProvider = require("../context/CartesianProvider");
 var _useScale = require("../hooks/useScale");
-var _useStore = require("../internals/useStore");
+var _useStore = require("../internals/store/useStore");
 var _getSVGPoint = require("../internals/getSVGPoint");
-var _hooks = require("../hooks");
-var _context = require("../context");
 var _useSeries = require("../hooks/useSeries");
+var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _useSvgRef = require("../hooks/useSvgRef");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsVoronoiHandler(props) {
   const {
     voronoiMaxRadius,
     onItemClick
   } = props;
-  const svgRef = (0, _hooks.useSvgRef)();
-  const drawingArea = (0, _hooks.useDrawingArea)();
+  const svgRef = (0, _useSvgRef.useSvgRef)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    instance
+  } = (0, _useChartContext.useChartContext)();
   const {
     xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _hooks.useYAxes)();
   const store = (0, _useStore.useStore)();
   const {
     series,
@@ -41,10 +47,6 @@ function ChartsVoronoiHandler(props) {
   const voronoiRef = React.useRef({});
   const delauneyRef = React.useRef(undefined);
   const lastFind = React.useRef(undefined);
-  const {
-    setHighlighted,
-    clearHighlighted
-  } = (0, _context.useHighlighted)();
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   (0, _useEnhancedEffect.default)(() => {
@@ -86,7 +88,7 @@ function ChartsVoronoiHandler(props) {
       }) => {
         const pointX = getXPosition(x);
         const pointY = getYPosition(y);
-        if (!drawingArea.isPointInside({
+        if (!instance.isPointInside({
           x: pointX,
           y: pointY
         })) {
@@ -106,16 +108,16 @@ function ChartsVoronoiHandler(props) {
     });
     delauneyRef.current = new _d3Delaunay.Delaunay(points);
     lastFind.current = undefined;
-  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea]);
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea, instance]);
   React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null) {
+    if (svgRef.current === null) {
       return undefined;
     }
+    const element = svgRef.current;
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
-      if (!drawingArea.isPointInside(svgPoint)) {
+      if (!instance.isPointInside(svgPoint)) {
         lastFind.current = undefined;
         return 'outside-chart';
       }
@@ -158,7 +160,7 @@ function ChartsVoronoiHandler(props) {
           item: null
         })
       }));
-      clearHighlighted();
+      instance.clearHighlight();
     };
     const handleMouseMove = event => {
       const closestPoint = getClosestPoint(event);
@@ -172,7 +174,7 @@ function ChartsVoronoiHandler(props) {
             item: null
           })
         }));
-        clearHighlighted();
+        instance.clearHighlight();
         return;
       }
       if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
@@ -181,7 +183,7 @@ function ChartsVoronoiHandler(props) {
             item: null
           })
         }));
-        clearHighlighted();
+        instance.clearHighlight();
         return;
       }
       const {
@@ -197,7 +199,7 @@ function ChartsVoronoiHandler(props) {
           }
         })
       }));
-      setHighlighted({
+      instance.setHighlight({
         seriesId,
         dataIndex
       });
@@ -229,7 +231,7 @@ function ChartsVoronoiHandler(props) {
       element.removeEventListener('pointermove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea, store]);
+  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, drawingArea, store, instance]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {});

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

@@ -80,12 +80,6 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    */
   cy: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   desc: _propTypes.default.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: _propTypes.default.bool,
   /**
    * The end angle (deg).
    * @default 360
@@ -95,6 +89,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 +105,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,

package/node/Gauge/GaugeContainer.js

@@ -7,58 +7,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GaugeContainer = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 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 _ChartsSurface = require("../ChartsSurface");
-var _DrawingAreaProvider = require("../context/DrawingAreaProvider");
 var _GaugeProvider = require("./GaugeProvider");
-var _SizeProvider = require("../context/SizeProvider");
-var _SvgRefProvider = require("../context/SvgRefProvider");
+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 ResizableContainerRoot = (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
   }
 }));
-function ResizableContainer(props) {
-  const {
-    inHeight,
-    inWidth,
-    hasIntrinsicSize,
-    containerRef
-  } = (0, _SizeProvider.useSize)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainerRoot, (0, _extends2.default)({}, props, {
-    ownerState: {
-      width: inWidth,
-      height: inHeight
-    },
-    ref: containerRef,
-    children: hasIntrinsicSize && props.children
-  }));
-}
 const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(props, ref) {
   const {
       width: inWidth,
@@ -79,45 +44,43 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
       children
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SizeProvider.SizeProvider, {
-    width: inWidth,
-    height: inHeight,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgRefProvider.SvgRefProvider, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingAreaProvider.DrawingAreaProvider, {
-        margin: (0, _extends2.default)({
-          left: 10,
-          right: 10,
-          top: 10,
-          bottom: 10
-        }, margin),
-        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)(ResizableContainer, (0, _extends2.default)({
-            role: "meter",
-            "aria-valuenow": value === null ? undefined : value,
-            "aria-valuemin": valueMin,
-            "aria-valuemax": valueMax
-          }, other, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, {
-              title: title,
-              desc: desc,
-              disableAxisListener: true,
-              "aria-hidden": "true",
-              ref: ref,
-              children: children
-            })
-          }))
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, {
+    pluginParams: {
+      width: inWidth,
+      height: inHeight,
+      margin: (0, _extends2.default)({
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10
+      }, 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
         })
-      })
+      }))
     })
   });
 });
@@ -147,12 +110,6 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    */
   cy: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   desc: _propTypes.default.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: _propTypes.default.bool,
   /**
    * The end angle (deg).
    * @default 360
@@ -162,6 +119,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%'.
@@ -173,7 +135,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,

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

@@ -35,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: {
@@ -51,6 +51,7 @@ function AnimatedArea(props) {
     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),
       fill: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       filter:

package/node/LineChart/AnimatedLine.js

@@ -35,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: {
@@ -51,6 +51,7 @@ function AnimatedLine(props) {
     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),
       stroke: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       strokeWidth: 2,

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 = {