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

package/modern/context/AnimationProvider/AnimationProvider.js

@@ -1,7 +1,7 @@
 'use client';
 
-import { Globals, useIsomorphicLayoutEffect } from '@react-spring/web';
 import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { AnimationContext } from "./AnimationContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function AnimationProvider(props) {
@@ -18,7 +18,7 @@ function AnimationProvider(props) {
   // We use the value of `isAnimationDisabledEnvironment` as the initial value of `skipAnimation` to avoid
   // re-rendering the component on environments where matchMedia is not supported, hence skipAnimation will always be true.
   const [skipAnimation, setSkipAnimation] = React.useState(process.env.NODE_ENV === 'test' ? isAnimationDisabledEnvironment || undefined : undefined);
-  useIsomorphicLayoutEffect(() => {
+  useEnhancedEffect(() => {
     if (isAnimationDisabledEnvironment) {
       return undefined;
     }
@@ -26,9 +26,6 @@ function AnimationProvider(props) {
       // This hook can remove animation but never activate it.
       const inputValue = event.matches || undefined;
       setSkipAnimation(inputValue);
-      Globals.assign({
-        skipAnimation: inputValue
-      });
     };
     const mql = window.matchMedia('(prefers-reduced-motion)');
     handleMediaChange(mql);
@@ -38,7 +35,7 @@ function AnimationProvider(props) {
     return () => {
       mql?.removeEventListener?.('change', handleMediaChange);
     };
-  }, []);
+  }, [isAnimationDisabledEnvironment]);
   const value = React.useMemo(() => ({
     isInitialized: true,
     data: {

package/modern/hooks/animation/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./useAnimateArea.js";
+export * from "./useAnimateBar.js";
+export * from "./useAnimateBarLabel.js";
+export * from "./useAnimateLine.js";
+export * from "./useAnimatePieArc.js";
+export * from "./useAnimatePieArcLabel.js";

package/modern/hooks/animation/index.js

@@ -0,0 +1,6 @@
+export * from "./useAnimateArea.js";
+export * from "./useAnimateBar.js";
+export * from "./useAnimateBarLabel.js";
+export * from "./useAnimateLine.js";
+export * from "./useAnimatePieArc.js";
+export * from "./useAnimatePieArcLabel.js";

package/modern/hooks/animation/useAnimateArea.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { AnimatedAreaProps } from '../../LineChart';
+type UseAnimateAreaParams = Pick<AnimatedAreaProps, 'd' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimatedAreaReturn = {
+  ref: React.Ref<SVGPathElement>;
+  d: string;
+};
+/** Animates an area of a line chart using a `path` element.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export declare function useAnimateArea(props: UseAnimateAreaParams): UseAnimatedAreaReturn;
+export {};

package/modern/hooks/animation/useAnimateArea.js

@@ -0,0 +1,27 @@
+import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
+import useForkRef from '@mui/utils/useForkRef';
+import { useAnimate } from "../../internals/animation/useAnimate.js";
+/** Animates an area of a line chart using a `path` element.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export function useAnimateArea(props) {
+  const ref = useAnimate({
+    d: props.d
+  }, {
+    createInterpolator: (lastProps, newProps) => {
+      const interpolate = interpolateString(lastProps.d, newProps.d);
+      return t => ({
+        d: interpolate(t)
+      });
+    },
+    applyProps: (element, {
+      d
+    }) => element.setAttribute('d', d),
+    skip: props.skipAnimation
+  });
+  return {
+    ref: useForkRef(ref, props.ref),
+    d: props.d
+  };
+}

package/modern/hooks/animation/useAnimateBar.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { BarProps } from '../../BarChart/AnimatedBarElement';
+type UseAnimateBarParams = Pick<BarProps, 'x' | 'y' | 'xOrigin' | 'yOrigin' | 'width' | 'height' | 'skipAnimation' | 'layout'> & {
+  ref?: React.Ref<SVGRectElement>;
+};
+type UseAnimateBarReturnValue = {
+  ref: React.Ref<SVGRectElement>;
+} & Pick<BarProps, 'x' | 'y' | 'width' | 'height'>;
+/**
+ * Animates a bar from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to its
+ * final position.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export declare function useAnimateBar(props: UseAnimateBarParams): UseAnimateBarReturnValue;
+export {};

package/modern/hooks/animation/useAnimateBar.js

@@ -0,0 +1,56 @@
+import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { useAnimate } from "../../internals/animation/useAnimate.js";
+function barPropsInterpolator(from, to) {
+  const interpolateX = interpolateNumber(from.x, to.x);
+  const interpolateY = interpolateNumber(from.y, to.y);
+  const interpolateWidth = interpolateNumber(from.width, to.width);
+  const interpolateHeight = interpolateNumber(from.height, to.height);
+  return t => {
+    return {
+      x: interpolateX(t),
+      y: interpolateY(t),
+      width: interpolateWidth(t),
+      height: interpolateHeight(t)
+    };
+  };
+}
+
+/**
+ * Animates a bar from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to its
+ * final position.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export function useAnimateBar(props) {
+  const initialProps = {
+    x: props.layout === 'vertical' ? props.x : props.xOrigin,
+    y: props.layout === 'vertical' ? props.yOrigin : props.y,
+    width: props.layout === 'vertical' ? props.width : 0,
+    height: props.layout === 'vertical' ? 0 : props.height
+  };
+  const ref = useAnimate({
+    x: props.x,
+    y: props.y,
+    width: props.width,
+    height: props.height
+  }, {
+    createInterpolator: barPropsInterpolator,
+    applyProps(element, animatedProps) {
+      element.setAttribute('x', animatedProps.x.toString());
+      element.setAttribute('y', animatedProps.y.toString());
+      element.setAttribute('width', animatedProps.width.toString());
+      element.setAttribute('height', animatedProps.height.toString());
+    },
+    initialProps,
+    skip: props.skipAnimation
+  });
+  const usedProps = props.skipAnimation ? props : initialProps;
+  return {
+    ref,
+    x: usedProps.x,
+    y: usedProps.y,
+    width: usedProps.width,
+    height: usedProps.height
+  };
+}

package/modern/hooks/animation/useAnimateBarLabel.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { BarLabelProps } from '../../BarChart';
+type UseAnimateBarLabelParams = Pick<BarLabelProps, 'xOrigin' | 'yOrigin' | 'x' | 'y' | 'width' | 'height' | 'layout' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGTextElement>;
+};
+type UseAnimateBarLabelReturn = {
+  ref: React.Ref<SVGTextElement>;
+} & Pick<BarLabelProps, 'x' | 'y' | 'width' | 'height'>;
+/**
+ * Animates a bar label from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to the
+ * center of the bar it belongs to.
+ * The label is horizontally centered within the bar when the layout is vertical, and vertically centered for laid out
+ * horizontally.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export declare function useAnimateBarLabel(props: UseAnimateBarLabelParams): UseAnimateBarLabelReturn;
+export {};

package/modern/hooks/animation/useAnimateBarLabel.js

@@ -0,0 +1,59 @@
+import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { useAnimate } from "../../internals/animation/useAnimate.js";
+function barLabelPropsInterpolator(from, to) {
+  const interpolateX = interpolateNumber(from.x, to.x);
+  const interpolateY = interpolateNumber(from.y, to.y);
+  const interpolateWidth = interpolateNumber(from.width, to.width);
+  const interpolateHeight = interpolateNumber(from.height, to.height);
+  return t => {
+    return {
+      x: interpolateX(t),
+      y: interpolateY(t),
+      width: interpolateWidth(t),
+      height: interpolateHeight(t)
+    };
+  };
+}
+
+/**
+ * Animates a bar label from the start of the axis (x-axis for vertical layout, y-axis for horizontal layout) to the
+ * center of the bar it belongs to.
+ * The label is horizontally centered within the bar when the layout is vertical, and vertically centered for laid out
+ * horizontally.
+ *
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called.
+ */
+export function useAnimateBarLabel(props) {
+  const initialProps = {
+    x: props.layout === 'vertical' ? props.x + props.width / 2 : props.xOrigin,
+    y: props.layout === 'vertical' ? props.yOrigin : props.y + props.height / 2,
+    width: props.width,
+    height: props.height
+  };
+  const currentProps = {
+    x: props.x + props.width / 2,
+    y: props.y + props.height / 2,
+    width: props.width,
+    height: props.height
+  };
+  const ref = useAnimate(currentProps, {
+    createInterpolator: barLabelPropsInterpolator,
+    applyProps(element, animatedProps) {
+      element.setAttribute('x', animatedProps.x.toString());
+      element.setAttribute('y', animatedProps.y.toString());
+      element.setAttribute('width', animatedProps.width.toString());
+      element.setAttribute('height', animatedProps.height.toString());
+    },
+    initialProps,
+    skip: props.skipAnimation
+  });
+  const usedProps = props.skipAnimation ? currentProps : initialProps;
+  return {
+    ref,
+    x: usedProps.x,
+    y: usedProps.y,
+    width: usedProps.width,
+    height: usedProps.height
+  };
+}

package/modern/hooks/animation/useAnimateLine.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { AnimatedLineProps } from '../../LineChart';
+type UseAnimateLineParams = Pick<AnimatedLineProps, 'd' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimatedReturnValue = {
+  ref: React.Ref<SVGPathElement>;
+  d: string;
+};
+/** Animates a line of a line chart using a `path` element.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export declare function useAnimateLine(props: UseAnimateLineParams): UseAnimatedReturnValue;
+export {};

package/modern/hooks/animation/useAnimateLine.js

@@ -0,0 +1,26 @@
+import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
+import useForkRef from '@mui/utils/useForkRef';
+import { useAnimate } from "../../internals/animation/useAnimate.js";
+/** Animates a line of a line chart using a `path` element.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export function useAnimateLine(props) {
+  const ref = useAnimate({
+    d: props.d
+  }, {
+    createInterpolator: (lastProps, newProps) => {
+      const interpolate = interpolateString(lastProps.d, newProps.d);
+      return t => ({
+        d: interpolate(t)
+      });
+    },
+    applyProps: (element, {
+      d
+    }) => element.setAttribute('d', d),
+    skip: props.skipAnimation
+  });
+  return {
+    ref: useForkRef(ref, props.ref),
+    d: props.d
+  };
+}

package/modern/hooks/animation/useAnimatePieArc.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { PieArcProps } from '../../PieChart';
+type UseAnimatePieArcParams = Pick<PieArcProps, 'startAngle' | 'endAngle' | 'cornerRadius' | 'paddingAngle' | 'innerRadius' | 'outerRadius' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGPathElement>;
+};
+type UseAnimatePieArcReturnValue = {
+  ref: React.Ref<SVGPathElement>;
+  d: string;
+  visibility: 'hidden' | 'visible';
+};
+/** Animates a slice of a pie chart by increasing the start and end angles from the middle angle to their final values.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export declare function useAnimatePieArc(props: UseAnimatePieArcParams): UseAnimatePieArcReturnValue;
+export {};

package/modern/hooks/animation/useAnimatePieArc.js

@@ -0,0 +1,70 @@
+import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
+import useForkRef from '@mui/utils/useForkRef';
+import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { useAnimate } from "../../internals/animation/useAnimate.js";
+function pieArcPropsInterpolator(from, to) {
+  const interpolateStartAngle = interpolateNumber(from.startAngle, to.startAngle);
+  const interpolateEndAngle = interpolateNumber(from.endAngle, to.endAngle);
+  const interpolateInnerRadius = interpolateNumber(from.innerRadius, to.innerRadius);
+  const interpolateOuterRadius = interpolateNumber(from.outerRadius, to.outerRadius);
+  const interpolatePaddingAngle = interpolateNumber(from.paddingAngle, to.paddingAngle);
+  const interpolateCornerRadius = interpolateNumber(from.cornerRadius, to.cornerRadius);
+  return t => {
+    return {
+      startAngle: interpolateStartAngle(t),
+      endAngle: interpolateEndAngle(t),
+      innerRadius: interpolateInnerRadius(t),
+      outerRadius: interpolateOuterRadius(t),
+      paddingAngle: interpolatePaddingAngle(t),
+      cornerRadius: interpolateCornerRadius(t)
+    };
+  };
+}
+
+/** Animates a slice of a pie chart by increasing the start and end angles from the middle angle to their final values.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export function useAnimatePieArc(props) {
+  const initialProps = {
+    startAngle: (props.startAngle + props.endAngle) / 2,
+    endAngle: (props.startAngle + props.endAngle) / 2,
+    innerRadius: props.innerRadius,
+    outerRadius: props.outerRadius,
+    paddingAngle: props.paddingAngle,
+    cornerRadius: props.cornerRadius
+  };
+  const ref = useAnimate({
+    startAngle: props.startAngle,
+    endAngle: props.endAngle,
+    innerRadius: props.innerRadius,
+    outerRadius: props.outerRadius,
+    paddingAngle: props.paddingAngle,
+    cornerRadius: props.cornerRadius
+  }, {
+    createInterpolator: pieArcPropsInterpolator,
+    applyProps(element, animatedProps) {
+      element.setAttribute('d', d3Arc().cornerRadius(animatedProps.cornerRadius)({
+        padAngle: animatedProps.paddingAngle,
+        innerRadius: animatedProps.innerRadius,
+        outerRadius: animatedProps.outerRadius,
+        startAngle: animatedProps.startAngle,
+        endAngle: animatedProps.endAngle
+      }).toString());
+      element.setAttribute('visibility', animatedProps.startAngle === animatedProps.endAngle ? 'hidden' : 'visible');
+    },
+    initialProps,
+    skip: props.skipAnimation
+  });
+  const usedProps = props.skipAnimation ? props : initialProps;
+  return {
+    ref: useForkRef(ref, props.ref),
+    d: d3Arc().cornerRadius(usedProps.cornerRadius)({
+      padAngle: usedProps.paddingAngle,
+      innerRadius: usedProps.innerRadius,
+      outerRadius: usedProps.outerRadius,
+      startAngle: usedProps.startAngle,
+      endAngle: usedProps.endAngle
+    }),
+    visibility: usedProps.startAngle === usedProps.endAngle ? 'hidden' : 'visible'
+  };
+}

package/modern/hooks/animation/useAnimatePieArcLabel.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { PieArcLabelProps } from '../../PieChart';
+type UseAnimatePieArcLabelParams = Pick<PieArcLabelProps, 'startAngle' | 'endAngle' | 'cornerRadius' | 'paddingAngle' | 'innerRadius' | 'outerRadius' | 'skipAnimation'> & {
+  ref?: React.Ref<SVGTextElement>;
+};
+type UseAnimatePieArcLabelReturn = {
+  ref: React.Ref<SVGTextElement>;
+  x: number;
+  y: number;
+};
+/** Animates the label of pie slice from its middle point to the centroid of the slice.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export declare function useAnimatePieArcLabel(props: UseAnimatePieArcLabelParams): UseAnimatePieArcLabelReturn;
+export {};

package/modern/hooks/animation/useAnimatePieArcLabel.js

@@ -0,0 +1,72 @@
+import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
+import useForkRef from '@mui/utils/useForkRef';
+import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { useAnimate } from "../../internals/animation/useAnimate.js";
+function pieArcLabelPropsInterpolator(from, to) {
+  const interpolateStartAngle = interpolateNumber(from.startAngle, to.startAngle);
+  const interpolateEndAngle = interpolateNumber(from.endAngle, to.endAngle);
+  const interpolateInnerRadius = interpolateNumber(from.innerRadius, to.innerRadius);
+  const interpolateOuterRadius = interpolateNumber(from.outerRadius, to.outerRadius);
+  const interpolatePaddingAngle = interpolateNumber(from.paddingAngle, to.paddingAngle);
+  const interpolateCornerRadius = interpolateNumber(from.cornerRadius, to.cornerRadius);
+  return t => {
+    return {
+      startAngle: interpolateStartAngle(t),
+      endAngle: interpolateEndAngle(t),
+      innerRadius: interpolateInnerRadius(t),
+      outerRadius: interpolateOuterRadius(t),
+      paddingAngle: interpolatePaddingAngle(t),
+      cornerRadius: interpolateCornerRadius(t)
+    };
+  };
+}
+
+/** Animates the label of pie slice from its middle point to the centroid of the slice.
+ * The props object also accepts a `ref` which will be merged with the ref returned from this hook. This means you can
+ * pass the ref returned by this hook to the `path` element and the `ref` provided as argument will also be called. */
+export function useAnimatePieArcLabel(props) {
+  const initialProps = {
+    startAngle: (props.startAngle + props.endAngle) / 2,
+    endAngle: (props.startAngle + props.endAngle) / 2,
+    innerRadius: props.innerRadius,
+    outerRadius: props.outerRadius,
+    paddingAngle: props.paddingAngle,
+    cornerRadius: props.cornerRadius
+  };
+  const ref = useAnimate({
+    startAngle: props.startAngle,
+    endAngle: props.endAngle,
+    innerRadius: props.innerRadius,
+    outerRadius: props.outerRadius,
+    paddingAngle: props.paddingAngle,
+    cornerRadius: props.cornerRadius
+  }, {
+    createInterpolator: pieArcLabelPropsInterpolator,
+    applyProps(element, animatedProps) {
+      const [x, y] = d3Arc().cornerRadius(animatedProps.cornerRadius).centroid({
+        padAngle: animatedProps.paddingAngle,
+        startAngle: animatedProps.startAngle,
+        endAngle: animatedProps.endAngle,
+        innerRadius: animatedProps.innerRadius,
+        outerRadius: animatedProps.outerRadius
+      });
+      element.setAttribute('x', x.toString());
+      element.setAttribute('y', y.toString());
+    },
+    initialProps,
+    skip: props.skipAnimation
+  });
+  const usedProps = props.skipAnimation ? props : initialProps;
+  const [x, y] = d3Arc().cornerRadius(usedProps.cornerRadius).centroid({
+    padAngle: usedProps.paddingAngle,
+    startAngle: usedProps.startAngle,
+    endAngle: usedProps.endAngle,
+    innerRadius: usedProps.innerRadius,
+    outerRadius: usedProps.outerRadius
+  });
+  return {
+    ref: useForkRef(ref, props.ref),
+    x,
+    y
+  };
+}

package/modern/hooks/index.d.ts

@@ -13,4 +13,5 @@ export * from "./useLineSeries.js";
 export * from "./useItemHighlighted.js";
 export * from "./useItemHighlightedGetter.js";
 export * from "./useLegend.js";
-export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";
+export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";
+export * from "./animation/index.js";

package/modern/hooks/index.js

@@ -13,4 +13,5 @@ export * from "./useLineSeries.js";
 export * from "./useItemHighlighted.js";
 export * from "./useItemHighlightedGetter.js";
 export * from "./useLegend.js";
-export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";
+export { useChartGradientId, useChartGradientIdObjectBound } from "./useChartGradientId.js";
+export * from "./animation/index.js";

package/modern/hooks/useInteractionItemProps.js

@@ -11,7 +11,9 @@ export const useInteractionItemProps = (data, skip) => {
   const {
     instance
   } = useChartContext();
+  const interactionActive = React.useRef(false);
   const onPointerEnter = React.useCallback(() => {
+    interactionActive.current = true;
     instance.setItemInteraction({
       type: data.type,
       seriesId: data.seriesId,
@@ -23,6 +25,7 @@ export const useInteractionItemProps = (data, skip) => {
     });
   }, [instance, data.type, data.seriesId, data.dataIndex]);
   const onPointerLeave = React.useCallback(() => {
+    interactionActive.current = false;
     instance.removeItemInteraction({
       type: data.type,
       seriesId: data.seriesId,
@@ -30,6 +33,14 @@ export const useInteractionItemProps = (data, skip) => {
     });
     instance.clearHighlight();
   }, [instance, data.type, data.seriesId, data.dataIndex]);
+  React.useEffect(() => {
+    return () => {
+      /* Clean up state if this item is unmounted while active. */
+      if (interactionActive.current) {
+        onPointerLeave();
+      }
+    };
+  }, [onPointerLeave]);
   if (skip) {
     return {};
   }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-beta.2
+ * @mui/x-charts v8.0.0-beta.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/animation/Transition.d.ts

@@ -0,0 +1,37 @@
+/**
+ * A resumable transition class inspired by d3-transition.
+ * Allows for starting, and stopping and resuming transitions.
+ *
+ * The transition is started automatically.
+ * A transition cannot be restarted after it has finished.
+ * Resuming a transition will continue from the point it was stopped, i.e., easing will continue from the point it was
+ * stopped.
+ */
+export declare class Transition {
+  private readonly duration;
+  private elapsed;
+  private readonly easingFn;
+  private timer;
+  private readonly onTickCallback;
+  /**
+   * Create a new ResumableTransition.
+   * @param duration Duration in milliseconds
+   * @param easingFn The easing function
+   * @param onTick Callback function called on each animation frame with the eased time in range [0, 1].
+   */
+  constructor(duration: number, easingFn: (t: number) => number, onTick: (easedT: number) => void);
+  private get running();
+  private timerCallback;
+  /**
+   * Resume the transition
+   */
+  resume(): this;
+  /**
+   * Stops the transition.
+   */
+  stop(): this;
+  /**
+   * Immediately finishes the transition and calls the tick callback with the final value.
+   */
+  finish(): this;
+}

package/modern/internals/animation/Transition.js

@@ -0,0 +1,83 @@
+import { timer, now, timeout, timerFlush } from '@mui/x-charts-vendor/d3-timer';
+
+/**
+ * A resumable transition class inspired by d3-transition.
+ * Allows for starting, and stopping and resuming transitions.
+ *
+ * The transition is started automatically.
+ * A transition cannot be restarted after it has finished.
+ * Resuming a transition will continue from the point it was stopped, i.e., easing will continue from the point it was
+ * stopped.
+ */
+export class Transition {
+  /**
+   * Create a new ResumableTransition.
+   * @param duration Duration in milliseconds
+   * @param easingFn The easing function
+   * @param onTick Callback function called on each animation frame with the eased time in range [0, 1].
+   */
+  constructor(duration, easingFn, onTick) {
+    this.duration = void 0;
+    this.elapsed = 0;
+    this.easingFn = void 0;
+    this.timer = null;
+    this.onTickCallback = void 0;
+    this.duration = duration;
+    this.easingFn = easingFn;
+    this.onTickCallback = onTick;
+    this.resume();
+  }
+  get running() {
+    return this.timer !== null;
+  }
+  timerCallback(elapsed) {
+    this.elapsed = Math.min(elapsed, this.duration);
+    const t = this.duration === 0 ? 1 : this.elapsed / this.duration;
+    const easedT = this.easingFn(t);
+
+    // Call the tick callback with the current value
+    this.onTickCallback(easedT);
+    if (this.elapsed >= this.duration) {
+      this.stop();
+    }
+  }
+
+  /**
+   * Resume the transition
+   */
+  resume() {
+    if (this.running || this.elapsed >= this.duration) {
+      return this;
+    }
+
+    /* If we're resuming the transition, then subtract elapsed to continue the easing. */
+    const time = now() - this.elapsed;
+    this.timer = timer(elapsed => this.timerCallback(elapsed), 0, time);
+    timerFlush();
+    return this;
+  }
+
+  /**
+   * Stops the transition.
+   */
+  stop() {
+    if (!this.running) {
+      return this;
+    }
+    if (this.timer) {
+      this.timer.stop();
+      this.timer = null;
+    }
+    return this;
+  }
+
+  /**
+   * Immediately finishes the transition and calls the tick callback with the final value.
+   */
+  finish() {
+    this.stop();
+    timeout(() => this.timerCallback(this.duration));
+    timerFlush();
+    return this;
+  }
+}

package/modern/internals/animation/animation.d.ts

@@ -0,0 +1,4 @@
+import BezierEasing from 'bezier-easing';
+export declare const ANIMATION_DURATION_MS = 300;
+export declare const ANIMATION_TIMING_FUNCTION = "cubic-bezier(0.66, 0, 0.34, 1)";
+export declare const ANIMATION_TIMING_FUNCTION_JS: BezierEasing.EasingFunction;

package/modern/internals/animation/animation.js

@@ -0,0 +1,4 @@
+import BezierEasing from 'bezier-easing';
+export const ANIMATION_DURATION_MS = 300;
+export const ANIMATION_TIMING_FUNCTION = 'cubic-bezier(0.66, 0, 0.34, 1)';
+export const ANIMATION_TIMING_FUNCTION_JS = BezierEasing(0.66, 0, 0.34, 1);