@mui/x-charts 7.15.0 → 7.17.0

package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -1,9 +1,11 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
-import { getLabel } from '../internals/getLabel';
+import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from "./ChartsTooltipTable.js";
+import { getLabel } from "../internals/getLabel.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsItemTooltipContent(props) {
   const {
@@ -34,7 +36,7 @@ function DefaultChartsItemTooltipContent(props) {
   });
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    className: classes.root,
+    className: classes.paper,
     children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
       className: classes.table,
       children: /*#__PURE__*/_jsx("tbody", {

package/modern/ChartsTooltip/chartsTooltipClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generat
 export function getChartsTooltipUtilityClass(slot) {
   return generateUtilityClass('MuiChartsTooltip', slot);
 }
-export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);
+export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);

package/modern/ChartsTooltip/index.js

@@ -1,7 +1,7 @@
-export * from './ChartsTooltip';
-export * from './chartsTooltipClasses';
-export * from './ChartsAxisTooltipContent';
-export * from './ChartsItemTooltipContent';
-export * from './DefaultChartsAxisTooltipContent';
-export * from './DefaultChartsItemTooltipContent';
-export * from './ChartsTooltipTable';
+export * from "./ChartsTooltip.js";
+export * from "./chartsTooltipClasses.js";
+export * from "./ChartsAxisTooltipContent.js";
+export * from "./ChartsItemTooltipContent.js";
+export * from "./DefaultChartsAxisTooltipContent.js";
+export * from "./DefaultChartsItemTooltipContent.js";
+export * from "./ChartsTooltipTable.js";

package/modern/ChartsTooltip/utils.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useSvgRef } from '../hooks';
+import { useSvgRef } from "../hooks/index.js";
 export function generateVirtualElement(mousePosition) {
   if (mousePosition === null) {
     return {

package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -1,14 +1,16 @@
+'use client';
+
 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';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import { getSVGPoint } from '../internals/getSVGPoint';
-import { useDrawingArea, useSvgRef } from '../hooks';
-import { useHighlighted } from '../context';
-import { useScatterSeries } from '../hooks/useSeries';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { getSVGPoint } from "../internals/getSVGPoint.js";
+import { useDrawingArea, useSvgRef } from "../hooks/index.js";
+import { useHighlighted } from "../context/index.js";
+import { useScatterSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsVoronoiHandler(props) {
   const {

package/modern/ChartsVoronoiHandler/index.js

@@ -1 +1 @@
-export * from './ChartsVoronoiHandler';
+export * from "./ChartsVoronoiHandler.js";

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["scale", "tickNumber", "reverse"];
@@ -5,18 +7,18 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { useThemeProps, useTheme } from '@mui/material/styles';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { useTicks } from '../hooks/useTicks';
-import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
-import { AxisRoot } from '../internals/components/AxisSharedComponents';
-import { ChartsText } from '../ChartsText';
-import { getMinXTranslation } from '../internals/geometry';
-import { useMounted } from '../hooks/useMounted';
-import { useDrawingArea } from '../hooks/useDrawingArea';
-import { getWordsByLines } from '../internals/getWordsByLines';
-import { isInfinity } from '../internals/isInfinity';
-import { isBandScale } from '../internals/isBandScale';
+import { useThemeProps, useTheme, styled } from '@mui/material/styles';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { useTicks } from "../hooks/useTicks.js";
+import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
+import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getMinXTranslation } from "../internals/geometry.js";
+import { useMounted } from "../hooks/useMounted.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { getWordsByLines } from "../internals/getWordsByLines.js";
+import { isInfinity } from "../internals/isInfinity.js";
+import { isBandScale } from "../internals/isBandScale.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -89,6 +91,11 @@ function addLabelDimension(xTicks, {
     return item;
   });
 }
+const XAxisRoot = styled(AxisRoot, {
+  name: 'MuiChartsXAxis',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
 const defaultProps = {
   position: 'bottom',
   disableLine: false,
@@ -210,7 +217,7 @@ function ChartsXAxis(inProps) {
   if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity)) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(AxisRoot, {
+  return /*#__PURE__*/_jsxs(XAxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
     sx: sx,

package/modern/ChartsXAxis/index.js

@@ -1 +1 @@
-export * from './ChartsXAxis';
+export * from "./ChartsXAxis.js";

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["scale", "tickNumber"];
@@ -5,16 +7,16 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { useThemeProps, useTheme } from '@mui/material/styles';
+import { useThemeProps, useTheme, styled } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { useTicks } from '../hooks/useTicks';
-import { useDrawingArea } from '../hooks/useDrawingArea';
-import { AxisRoot } from '../internals/components/AxisSharedComponents';
-import { ChartsText } from '../ChartsText';
-import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
-import { isInfinity } from '../internals/isInfinity';
-import { isBandScale } from '../internals/isBandScale';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { useTicks } from "../hooks/useTicks.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
+import { isInfinity } from "../internals/isInfinity.js";
+import { isBandScale } from "../internals/isBandScale.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -31,6 +33,11 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getAxisUtilityClass, classes);
 };
+const YAxisRoot = styled(AxisRoot, {
+  name: 'MuiChartsYAxis',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
 const defaultProps = {
   position: 'left',
   disableLine: false,
@@ -157,7 +164,7 @@ function ChartsYAxis(inProps) {
   if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity)) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(AxisRoot, {
+  return /*#__PURE__*/_jsxs(YAxisRoot, {
     transform: `translate(${position === 'right' ? left + width : left}, 0)`,
     className: classes.root,
     sx: sx,

package/modern/ChartsYAxis/index.js

@@ -1 +1 @@
-export * from './ChartsYAxis';
+export * from "./ChartsYAxis.js";

package/modern/Gauge/Gauge.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["text", "children", "classes", "className"];
@@ -5,11 +7,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
-import { GaugeContainer } from './GaugeContainer';
-import { GaugeValueArc } from './GaugeValueArc';
-import { GaugeReferenceArc } from './GaugeReferenceArc';
-import { getGaugeUtilityClass } from './gaugeClasses';
-import { GaugeValueText } from './GaugeValueText';
+import { GaugeContainer } from "./GaugeContainer.js";
+import { GaugeValueArc } from "./GaugeValueArc.js";
+import { GaugeReferenceArc } from "./GaugeReferenceArc.js";
+import { getGaugeUtilityClass } from "./gaugeClasses.js";
+import { GaugeValueText } from "./GaugeValueText.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = props => {
   const {

package/modern/Gauge/GaugeContainer.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
@@ -5,10 +7,10 @@ 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';
-import { ChartsSurface } from '../ChartsSurface';
-import { DrawingProvider } from '../context/DrawingProvider';
-import { GaugeProvider } from './GaugeProvider';
+import { useChartContainerDimensions } from "../ResponsiveChartContainer/useChartContainerDimensions.js";
+import { ChartsSurface } from "../ChartsSurface/index.js";
+import { DrawingProvider } from "../context/DrawingProvider.js";
+import { GaugeProvider } from "./GaugeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ResizableContainer = styled('div', {
   name: 'MuiGauge',

package/modern/Gauge/GaugeProvider.js

@@ -1,8 +1,8 @@
 // @ignore - do not document.
 import * as React from 'react';
-import { getPercentageValue } from '../internals/getPercentageValue';
-import { getArcRatios, getAvailableRadius } from './utils';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { getPercentageValue } from "../internals/getPercentageValue.js";
+import { getArcRatios, getAvailableRadius } from "./utils.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GaugeContext = /*#__PURE__*/React.createContext({
   value: null,

package/modern/Gauge/GaugeReferenceArc.js

@@ -1,8 +1,10 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { styled } from '@mui/material/styles';
-import { useGaugeState } from './GaugeProvider';
+import { useGaugeState } from "./GaugeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
   name: 'MuiGauge',

package/modern/Gauge/GaugeValueArc.js

@@ -1,8 +1,10 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { styled } from '@mui/material/styles';
-import { useGaugeState } from './GaugeProvider';
+import { useGaugeState } from "./GaugeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
   name: 'MuiGauge',

package/modern/Gauge/GaugeValueText.js

@@ -1,10 +1,12 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["text", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useGaugeState } from './GaugeProvider';
-import { ChartsText } from '../ChartsText';
+import { useGaugeState } from "./GaugeProvider.js";
+import { ChartsText } from "../ChartsText/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function defaultFormatter({
   value

package/modern/Gauge/index.js

@@ -1,7 +1,7 @@
-export * from './Gauge';
-export * from './GaugeContainer';
-export * from './GaugeValueText';
-export * from './GaugeValueArc';
-export * from './GaugeReferenceArc';
-export * from './gaugeClasses';
-export { useGaugeState } from './GaugeProvider';
+export * from "./Gauge.js";
+export * from "./GaugeContainer.js";
+export * from "./GaugeValueText.js";
+export * from "./GaugeValueArc.js";
+export * from "./GaugeReferenceArc.js";
+export * from "./gaugeClasses.js";
+export { useGaugeState } from "./GaugeProvider.js";

package/modern/LineChart/AnimatedArea.js

@@ -1,14 +1,16 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["d", "skipAnimation", "ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-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 { useAnimatedPath } from '../internals/useAnimatedPath';
-import { cleanId } from '../internals/cleanId';
-import { useChartId, useDrawingArea } from '../hooks';
+import { cleanId } from "../internals/cleanId.js";
+import { useChartId, useDrawingArea } from "../hooks/index.js";
+import { useStringInterpolator } from "../internals/useStringInterpolator.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const AreaElementPath = styled(animated.path, {
   name: 'MuiAreaElement',
@@ -48,16 +50,33 @@ function AnimatedArea(props) {
     height
   } = 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
   });
@@ -65,18 +84,18 @@ function AnimatedArea(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(AreaElementPath, _extends({}, other, {
+      children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(AreaElementPath, _extends({}, other, {
         ownerState: ownerState,
-        d: path
-      }))
+        d: style.value.to(interpolator)
+      })))
     })]
   });
 }

package/modern/LineChart/AnimatedLine.js

@@ -1,15 +1,17 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 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 +53,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 +87,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

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
@@ -7,9 +9,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);