@mui/x-charts 8.0.0-beta.2 → 8.0.0

package/esm/Gauge/GaugeValueArc.d.ts

@@ -1,2 +1,8 @@
 import * as React from 'react';
-export declare function GaugeValueArc(props: React.ComponentProps<'path'>): React.JSX.Element | null;
+declare function GaugeValueArc(props: React.ComponentProps<'path'> & {
+  skipAnimation?: boolean;
+}): React.JSX.Element | null;
+declare namespace GaugeValueArc {
+  var propTypes: any;
+}
+export { GaugeValueArc };

package/esm/Gauge/GaugeValueArc.js

@@ -1,9 +1,13 @@
 'use client';
 
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["cx", "cy", "startAngle", "endAngle", "cornerRadius", "innerRadius", "outerRadius", "skipAnimation"];
 import * as React from 'react';
-import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
+import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
+import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
+import { useAnimateGaugeValueArc } from "../hooks/animation/useAnimateGaugeValueArc.js";
 import { useGaugeState } from "./GaugeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
@@ -15,7 +19,7 @@ const StyledPath = styled('path', {
 }) => ({
   fill: (theme.vars || theme).palette.primary.main
 }));
-export function GaugeValueArc(props) {
+function GaugeValueArc(props) {
   const {
     value,
     valueMin,
@@ -32,13 +36,60 @@ export function GaugeValueArc(props) {
     return null;
   }
   const valueAngle = startAngle + (value - valueMin) / (valueMax - valueMin) * (endAngle - startAngle);
-  return /*#__PURE__*/_jsx(StyledPath, _extends({
-    transform: `translate(${cx}, ${cy})`,
-    d: d3Arc().cornerRadius(cornerRadius)({
+  return /*#__PURE__*/_jsx(AnimatedGaugeValueArc, _extends({}, props, {
+    cx: cx,
+    cy: cy,
+    startAngle: startAngle,
+    endAngle: valueAngle,
+    cornerRadius: cornerRadius,
+    innerRadius: innerRadius,
+    outerRadius: outerRadius
+  }));
+}
+process.env.NODE_ENV !== "production" ? GaugeValueArc.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  skipAnimation: PropTypes.bool
+} : void 0;
+export { GaugeValueArc };
+function AnimatedGaugeValueArc(_ref) {
+  let {
+      cx,
+      cy,
       startAngle,
-      endAngle: valueAngle,
+      endAngle,
+      cornerRadius,
       innerRadius,
-      outerRadius
-    })
-  }, props));
-}
+      outerRadius,
+      skipAnimation: inSkipAnimation
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const skipAnimation = useSkipAnimation(inSkipAnimation);
+  const animatedProps = useAnimateGaugeValueArc({
+    startAngle,
+    endAngle,
+    cornerRadius,
+    innerRadius,
+    outerRadius,
+    skipAnimation
+  });
+  return /*#__PURE__*/_jsx(StyledPath, _extends({}, animatedProps, {
+    transform: `translate(${cx}, ${cy})`
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? AnimatedGaugeValueArc.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  cornerRadius: PropTypes.number.isRequired,
+  cx: PropTypes.number.isRequired,
+  cy: PropTypes.number.isRequired,
+  endAngle: PropTypes.number.isRequired,
+  innerRadius: PropTypes.number.isRequired,
+  outerRadius: PropTypes.number.isRequired,
+  skipAnimation: PropTypes.bool,
+  startAngle: PropTypes.number.isRequired
+} : void 0;

package/esm/Gauge/gaugeClasses.d.ts

@@ -10,5 +10,4 @@ export interface GaugeClasses {
 }
 export type GaugeClassKey = keyof GaugeClasses;
 export declare function getGaugeUtilityClass(slot: string): string;
-export declare const gaugeClasses: GaugeClasses;
-export default gaugeClasses;
+export declare const gaugeClasses: GaugeClasses;

package/esm/Gauge/gaugeClasses.js

@@ -3,5 +3,4 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getGaugeUtilityClass(slot) {
   return generateUtilityClass('MuiGauge', slot);
 }
-export const gaugeClasses = generateUtilityClasses('MuiGauge', ['root', 'valueArc', 'referenceArc', 'valueText']);
-export default gaugeClasses;
+export const gaugeClasses = generateUtilityClasses('MuiGauge', ['root', 'valueArc', 'referenceArc', 'valueText']);

package/esm/LineChart/AnimatedArea.js

@@ -2,11 +2,10 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["d", "skipAnimation", "ownerState"];
+const _excluded = ["skipAnimation", "ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { animated, useTransition } from '@react-spring/web';
-import { useStringInterpolator } from "../internals/useStringInterpolator.js";
+import { useAnimateArea } from "../hooks/animation/useAnimateArea.js";
 import { AppearingMask } from "./AppearingMask.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -21,38 +20,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 function AnimatedArea(props) {
   const {
-      d,
       skipAnimation,
       ownerState
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const stringInterpolator = useStringInterpolator(d);
-  const transitionChange = useTransition([stringInterpolator], {
-    from: skipAnimation ? undefined : {
-      value: 0
-    },
-    to: {
-      value: 1
-    },
-    enter: {
-      value: 1
-    },
-    reset: false,
-    immediate: skipAnimation
-  });
+  const animatedProps = useAnimateArea(props);
   return /*#__PURE__*/_jsx(AppearingMask, {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-area-clip`,
-    children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(animated.path, _extends({
-      // @ts-expect-error
-      d: style.value.to(interpolator),
+    children: /*#__PURE__*/_jsx("path", _extends({
       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)))
+    }, other, animatedProps))
   });
 }
 process.env.NODE_ENV !== "production" ? AnimatedArea.propTypes = {

package/esm/LineChart/AnimatedLine.d.ts

@@ -19,8 +19,5 @@ export interface AnimatedLineProps extends React.ComponentPropsWithoutRef<'path'
  *
  * - [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
  */
-declare function AnimatedLine(props: AnimatedLineProps): React.JSX.Element;
-declare namespace AnimatedLine {
-  var propTypes: any;
-}
+declare const AnimatedLine: React.ForwardRefExoticComponent<AnimatedLineProps & React.RefAttributes<SVGPathElement>>;
 export { AnimatedLine };

package/esm/LineChart/AnimatedLine.js

@@ -2,11 +2,10 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["d", "skipAnimation", "ownerState"];
+const _excluded = ["skipAnimation", "ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { animated, useTransition } from '@react-spring/web';
-import { useStringInterpolator } from "../internals/useStringInterpolator.js";
+import { useAnimateLine } from "../hooks/index.js";
 import { AppearingMask } from "./AppearingMask.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -19,42 +18,28 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * - [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
  */
-function AnimatedLine(props) {
+const AnimatedLine = /*#__PURE__*/React.forwardRef(function AnimatedLine(props, ref) {
   const {
-      d,
       skipAnimation,
       ownerState
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const stringInterpolator = useStringInterpolator(d);
-  const transitionChange = useTransition([stringInterpolator], {
-    from: skipAnimation ? undefined : {
-      value: 0
-    },
-    to: {
-      value: 1
-    },
-    enter: {
-      value: 1
-    },
-    reset: false,
-    immediate: skipAnimation
-  });
+  const animateProps = useAnimateLine(_extends({}, props, {
+    ref
+  }));
   return /*#__PURE__*/_jsx(AppearingMask, {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-line-clip`,
-    children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(animated.path, _extends({
-      // @ts-expect-error
-      d: style.value.to(interpolator),
+    children: /*#__PURE__*/_jsx("path", _extends({
       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)))
+    }, other, animateProps))
   });
-}
+});
 process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/LineChart/AppearingMask.d.ts

@@ -5,6 +5,11 @@ interface AppearingMaskProps {
   skipAnimation?: boolean;
   children: React.ReactNode;
 }
+export interface AppearingMaskClasses {
+  /** Styles applied if the element should be animated. */
+  animate: string;
+}
+export declare const appearingMaskClasses: AppearingMaskClasses;
 /**
  * @ignore - internal component.
  */

package/esm/LineChart/AppearingMask.js

@@ -1,40 +1,45 @@
 'use client';
 
 import * as React from 'react';
-import { animated, useTransition } from '@react-spring/web';
+import { styled } from '@mui/material/styles';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import clsx from 'clsx';
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { cleanId } from "../internals/cleanId.js";
 import { useChartId, useDrawingArea } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const appearingMaskClasses = generateUtilityClasses('MuiAppearingMask', ['animate']);
+const AnimatedRect = styled('rect')({
+  animationName: 'animate-width',
+  animationTimingFunction: ANIMATION_TIMING_FUNCTION,
+  animationDuration: '0s',
+  [`&.${appearingMaskClasses.animate}`]: {
+    animationDuration: `${ANIMATION_DURATION_MS}ms`
+  },
+  '@keyframes animate-width': {
+    from: {
+      width: 0
+    }
+  }
+});
+
 /**
  * @ignore - internal component.
  */
 export function AppearingMask(props) {
   const drawingArea = useDrawingArea();
   const chartId = useChartId();
-  const transitionAppear = useTransition([drawingArea], {
-    from: props.skipAnimation ? undefined : v => ({
-      animatedWidth: v.left
-    }),
-    enter: v => ({
-      animatedWidth: v.width + v.left + v.right
-    }),
-    leave: v => ({
-      animatedWidth: v.width + v.left + v.right
-    }),
-    reset: false,
-    immediate: props.skipAnimation
-  });
   const clipId = cleanId(`${chartId}-${props.id}`);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx("clipPath", {
       id: clipId,
-      children: transitionAppear(style => /*#__PURE__*/_jsx(animated.rect, {
-        // @ts-expect-error
+      children: /*#__PURE__*/_jsx(AnimatedRect, {
+        className: clsx(!props.skipAnimation && appearingMaskClasses.animate),
         x: 0,
         y: 0,
-        width: style.animatedWidth,
+        width: drawingArea.left + drawingArea.width + drawingArea.right,
         height: drawingArea.top + drawingArea.height + drawingArea.bottom
-      }))
+      })
     }), /*#__PURE__*/_jsx("g", {
       clipPath: `url(#${clipId})`,
       children: props.children

package/esm/LineChart/AreaElement.d.ts

@@ -9,6 +9,11 @@ export interface AreaElementClasses {
   highlighted: string;
   /** Styles applied to the root element when faded. */
   faded: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${areaElementClasses.series}-${seriesId}`.
+   */
+  series: string;
 }
 export type AreaElementClassKey = keyof AreaElementClasses;
 export interface AreaElementOwnerState {

package/esm/LineChart/AreaElement.js

@@ -16,7 +16,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function getAreaElementUtilityClass(slot) {
   return generateUtilityClass('MuiAreaElement', slot);
 }
-export const areaElementClasses = generateUtilityClasses('MuiAreaElement', ['root', 'highlighted', 'faded']);
+export const areaElementClasses = generateUtilityClasses('MuiAreaElement', ['root', 'highlighted', 'faded', 'series']);
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/esm/LineChart/AreaPlot.js

@@ -13,7 +13,7 @@ import { getCurveFactory } from "../internals/getCurve.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useLineSeriesContext } from "../hooks/useLineSeries.js";
-import { useSkipAnimation } from "../context/AnimationProvider/index.js";
+import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
 import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";

package/esm/LineChart/CircleMarkElement.js

@@ -5,15 +5,23 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTheme } from '@mui/material/styles';
-import { animated, useSpringValue } from '@react-spring/web';
+import { styled, useTheme } from '@mui/material/styles';
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
-import { useUtilityClasses } from "./markElementClasses.js";
+import { markElementClasses, useUtilityClasses } from "./markElementClasses.js";
 import { useSelector } from "../internals/store/useSelector.js";
-import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const Circle = styled('circle')({
+  [`&.${markElementClasses.animate}`]: {
+    transitionDuration: `${ANIMATION_DURATION_MS}ms`,
+    transitionProperty: 'cx, cy',
+    transitionTimingFunction: ANIMATION_TIMING_FUNCTION
+  }
+});
+
 /**
  * The line mark element that only render circle for performance improvement.
  *
@@ -51,33 +59,19 @@ function CircleMarkElement(props) {
     seriesId: id
   });
   const store = useStore();
-  const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
-  const cx = useSpringValue(x, {
-    immediate: skipAnimation
-  });
-  const cy = useSpringValue(y, {
-    immediate: skipAnimation
-  });
-  React.useEffect(() => {
-    cy.start(y, {
-      immediate: skipAnimation
-    });
-    cx.start(x, {
-      immediate: skipAnimation
-    });
-  }, [cy, y, cx, x, skipAnimation]);
+  const xAxisInteractionIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: xAxisIdentifier?.index === dataIndex || isHighlighted,
+    isHighlighted: xAxisInteractionIndex === dataIndex || isHighlighted,
     isFaded,
-    color
+    color,
+    skipAnimation
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(animated.circle, _extends({}, other, {
-    // @ts-expect-error
-    cx: cx,
-    cy: cy,
+  return /*#__PURE__*/_jsx(Circle, _extends({}, other, {
+    cx: x,
+    cy: y,
     r: 5,
     fill: (theme.vars || theme).palette.background.paper,
     stroke: color,