@mui/x-charts 7.15.0 → 7.16.0

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);

package/modern/LineChart/AreaPlot.js

@@ -4,91 +4,96 @@ const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { area as d3Area } from '@mui/x-charts-vendor/d3-shape';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { AreaElement } from './AreaElement';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import getCurveFactory from '../internals/getCurve';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
-import { useChartGradient } from '../internals/components/ChartsAxesGradients';
-import { useLineSeries } from '../hooks/useSeries';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { AreaElement } from "./AreaElement.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import getCurveFactory from "../internals/getCurve.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import { useChartGradient } from "../internals/components/ChartsAxesGradients/index.js";
+import { useLineSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useAggregatedData = () => {
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
-  if (seriesData === undefined) {
-    return [];
-  }
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = axisData;
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
-  return stackingGroups.flatMap(({
-    ids: groupIds
-  }) => {
-    return [...groupIds].reverse() // Revert stacked area for a more pleasant animation
-    .map(seriesId => {
-      const {
-        xAxisId: xAxisIdProp,
-        yAxisId: yAxisIdProp,
-        xAxisKey = defaultXAxisId,
-        yAxisKey = defaultYAxisId,
-        stackedData,
-        data,
-        connectNulls,
-        baseline
-      } = series[seriesId];
-      const xAxisId = xAxisIdProp ?? xAxisKey;
-      const yAxisId = yAxisIdProp ?? yAxisKey;
-      const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
-      const yScale = yAxis[yAxisId].scale;
-      const xData = xAxis[xAxisId].data;
-      const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
-      if (process.env.NODE_ENV !== 'production') {
-        if (xData === undefined) {
-          throw new Error(`MUI X: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
-        }
-        if (xData.length < stackedData.length) {
-          throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
-        }
-      }
-      const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {
-        if (typeof baseline === 'number') {
-          return yScale(baseline);
-        }
-        if (baseline === 'max') {
-          return yScale.range()[1];
-        }
-        if (baseline === 'min') {
-          return yScale.range()[0];
-        }
-        const value = d.y && yScale(d.y[0]);
-        if (Number.isNaN(value)) {
-          return yScale.range()[0];
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const {
+      xAxis,
+      yAxis,
+      xAxisIds,
+      yAxisIds
+    } = axisData;
+    const defaultXAxisId = xAxisIds[0];
+    const defaultYAxisId = yAxisIds[0];
+    return stackingGroups.flatMap(({
+      ids: groupIds
+    }) => {
+      return [...groupIds].reverse() // Revert stacked area for a more pleasant animation
+      .map(seriesId => {
+        const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
+          xAxisKey = defaultXAxisId,
+          yAxisKey = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls,
+          baseline
+        } = series[seriesId];
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
+        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
+        const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          }
         }
-        return value;
-      }).y1(d => d.y && yScale(d.y[1]));
-      const curve = getCurveFactory(series[seriesId].curve);
-      const formattedData = xData?.map((x, index) => ({
-        x,
-        y: stackedData[index]
-      })) ?? [];
-      const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-      const d = areaPath.curve(curve)(d3Data) || '';
-      return _extends({}, series[seriesId], {
-        gradientUsed,
-        d,
-        seriesId
+        const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {
+          if (typeof baseline === 'number') {
+            return yScale(baseline);
+          }
+          if (baseline === 'max') {
+            return yScale.range()[1];
+          }
+          if (baseline === 'min') {
+            return yScale.range()[0];
+          }
+          const value = d.y && yScale(d.y[0]);
+          if (Number.isNaN(value)) {
+            return yScale.range()[0];
+          }
+          return value;
+        }).y1(d => d.y && yScale(d.y[1]));
+        const curve = getCurveFactory(series[seriesId].curve);
+        const formattedData = xData?.map((x, index) => ({
+          x,
+          y: stackedData[index]
+        })) ?? [];
+        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
+        const d = areaPath.curve(curve)(d3Data) || '';
+        return _extends({}, series[seriesId], {
+          gradientUsed,
+          d,
+          seriesId
+        });
       });
     });
-  });
+  }, [seriesData, axisData]);
+  return allData;
 };
 
 /**

package/modern/LineChart/LineChart.js

@@ -2,20 +2,20 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
-import { AreaPlot } from './AreaPlot';
-import { LinePlot } from './LinePlot';
-import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
-import { MarkPlot } from './MarkPlot';
-import { ChartsAxis } from '../ChartsAxis/ChartsAxis';
-import { ChartsTooltip } from '../ChartsTooltip';
-import { ChartsLegend } from '../ChartsLegend';
-import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
-import { ChartsClipPath } from '../ChartsClipPath';
-import { LineHighlightPlot } from './LineHighlightPlot';
-import { ChartsGrid } from '../ChartsGrid';
-import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
-import { ChartsOverlay } from '../ChartsOverlay';
-import { useLineChartProps } from './useLineChartProps';
+import { AreaPlot } from "./AreaPlot.js";
+import { LinePlot } from "./LinePlot.js";
+import { ResponsiveChartContainer } from "../ResponsiveChartContainer/index.js";
+import { MarkPlot } from "./MarkPlot.js";
+import { ChartsAxis } from "../ChartsAxis/ChartsAxis.js";
+import { ChartsTooltip } from "../ChartsTooltip/index.js";
+import { ChartsLegend } from "../ChartsLegend/index.js";
+import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
+import { ChartsClipPath } from "../ChartsClipPath/index.js";
+import { LineHighlightPlot } from "./LineHighlightPlot.js";
+import { ChartsGrid } from "../ChartsGrid/index.js";
+import { ChartsOnAxisClickHandler } from "../ChartsOnAxisClickHandler/index.js";
+import { ChartsOverlay } from "../ChartsOverlay/index.js";
+import { useLineChartProps } from "./useLineChartProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -52,7 +52,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({
     ref: ref
   }, chartContainerProps, {
-    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
       children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
     })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
       "data-drawing-container": true,
@@ -133,6 +133,17 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
+    itemGap: PropTypes.number,
+    itemMarkHeight: PropTypes.number,
+    itemMarkWidth: PropTypes.number,
+    labelStyle: PropTypes.object,
+    markGap: PropTypes.number,
+    padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      bottom: PropTypes.number,
+      left: PropTypes.number,
+      right: PropTypes.number,
+      top: PropTypes.number
+    })]),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired

package/modern/LineChart/LineElement.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 { AnimatedLine } from './AnimatedLine';
-import { useItemHighlighted } from '../context';
+import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { AnimatedLine } from "./AnimatedLine.js";
+import { useItemHighlighted } from "../context/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getLineElementUtilityClass(slot) {
   return generateUtilityClass('MuiLineElement', slot);

package/modern/LineChart/LineHighlightPlot.js

@@ -3,14 +3,14 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { LineHighlightElement } from './LineHighlightElement';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import { InteractionContext } from '../context/InteractionProvider';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
-import getColor from './getColor';
-import { useLineSeries } from '../hooks/useSeries';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { LineHighlightElement } from "./LineHighlightElement.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import getColor from "./getColor.js";
+import { useLineSeries } from "../hooks/useSeries.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:

package/modern/LineChart/LinePlot.js

@@ -4,73 +4,78 @@ const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { LineElement } from './LineElement';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import getCurveFactory from '../internals/getCurve';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
-import { useChartGradient } from '../internals/components/ChartsAxesGradients';
-import { useLineSeries } from '../hooks/useSeries';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { LineElement } from "./LineElement.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import getCurveFactory from "../internals/getCurve.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import { useChartGradient } from "../internals/components/ChartsAxesGradients/index.js";
+import { useLineSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useAggregatedData = () => {
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
-  if (seriesData === undefined) {
-    return [];
-  }
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = axisData;
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
-  return stackingGroups.flatMap(({
-    ids: groupIds
-  }) => {
-    return groupIds.flatMap(seriesId => {
-      const {
-        xAxisId: xAxisIdProp,
-        yAxisId: yAxisIdProp,
-        xAxisKey = defaultXAxisId,
-        yAxisKey = defaultYAxisId,
-        stackedData,
-        data,
-        connectNulls
-      } = series[seriesId];
-      const xAxisId = xAxisIdProp ?? xAxisKey;
-      const yAxisId = yAxisIdProp ?? yAxisKey;
-      const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
-      const yScale = yAxis[yAxisId].scale;
-      const xData = xAxis[xAxisId].data;
-      const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
-      if (process.env.NODE_ENV !== 'production') {
-        if (xData === undefined) {
-          throw new Error(`MUI X: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
-        }
-        if (xData.length < stackedData.length) {
-          throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const {
+      xAxis,
+      yAxis,
+      xAxisIds,
+      yAxisIds
+    } = axisData;
+    const defaultXAxisId = xAxisIds[0];
+    const defaultYAxisId = yAxisIds[0];
+    return stackingGroups.flatMap(({
+      ids: groupIds
+    }) => {
+      return groupIds.flatMap(seriesId => {
+        const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
+          xAxisKey = defaultXAxisId,
+          yAxisKey = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls
+        } = series[seriesId];
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
+        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
+        const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          }
         }
-      }
-      const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
-      const formattedData = xData?.map((x, index) => ({
-        x,
-        y: stackedData[index]
-      })) ?? [];
-      const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-      const d = linePath.curve(getCurveFactory(series[seriesId].curve))(d3Data) || '';
-      return _extends({}, series[seriesId], {
-        gradientUsed,
-        d,
-        seriesId
+        const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
+        const formattedData = xData?.map((x, index) => ({
+          x,
+          y: stackedData[index]
+        })) ?? [];
+        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
+        const d = linePath.curve(getCurveFactory(series[seriesId].curve))(d3Data) || '';
+        return _extends({}, series[seriesId], {
+          gradientUsed,
+          d,
+          seriesId
+        });
       });
     });
-  });
+  }, [seriesData, axisData]);
+  return allData;
 };
 
 /**

package/modern/LineChart/MarkElement.js

@@ -9,10 +9,10 @@ import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
 import { animated, to, useSpring } from '@react-spring/web';
-import { getSymbol } from '../internals/getSymbol';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { useItemHighlighted } from '../context';
+import { getSymbol } from "../internals/getSymbol.js";
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { useItemHighlighted } from "../context/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getMarkElementUtilityClass(slot) {
   return generateUtilityClass('MuiMarkElement', slot);

package/modern/LineChart/MarkPlot.js

@@ -3,15 +3,15 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { MarkElement } from './MarkElement';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import { useChartId } from '../hooks/useChartId';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
-import { cleanId } from '../internals/cleanId';
-import getColor from './getColor';
-import { useLineSeries } from '../hooks/useSeries';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { MarkElement } from "./MarkElement.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { useChartId } from "../hooks/useChartId.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import { cleanId } from "../internals/cleanId.js";
+import getColor from "./getColor.js";
+import { useLineSeries } from "../hooks/useSeries.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:

package/modern/LineChart/formatter.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
-import { getStackingGroups } from '../internals/stackSeries';
-import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
+import { getStackingGroups } from "../internals/stackSeries.js";
+import { defaultizeValueFormatter } from "../internals/defaultizeValueFormatter.js";
 let warnedOnce = false;
 
 // For now it's a copy past of bar charts formatter, but maybe will diverge later

package/modern/LineChart/index.js

@@ -1,11 +1,11 @@
-export * from './LineChart';
-export * from './LinePlot';
-export * from './AreaPlot';
-export * from './MarkPlot';
-export * from './LineHighlightPlot';
-export * from './AreaElement';
-export * from './AnimatedArea';
-export * from './LineElement';
-export * from './AnimatedLine';
-export * from './MarkElement';
-export * from './LineHighlightElement';
+export * from "./LineChart.js";
+export * from "./LinePlot.js";
+export * from "./AreaPlot.js";
+export * from "./MarkPlot.js";
+export * from "./LineHighlightPlot.js";
+export * from "./AreaElement.js";
+export * from "./AnimatedArea.js";
+export * from "./LineElement.js";
+export * from "./AnimatedLine.js";
+export * from "./MarkElement.js";
+export * from "./LineHighlightElement.js";

package/modern/LineChart/legend.js

@@ -1,4 +1,4 @@
-import { getLabel } from '../internals/getLabel';
+import { getLabel } from "../internals/getLabel.js";
 const legendGetter = params => {
   const {
     seriesOrder,

package/modern/LineChart/plugin.js

@@ -1,6 +1,6 @@
-import { getExtremumX, getExtremumY } from './extremums';
-import formatter from './formatter';
-import getColor from './getColor';
+import { getExtremumX, getExtremumY } from "./extremums.js";
+import formatter from "./formatter.js";
+import getColor from "./getColor.js";
 export const plugin = {
   seriesType: 'line',
   colorProcessor: getColor,

package/modern/LineChart/useLineChartProps.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
 import useId from '@mui/utils/useId';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.