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

package/esm/context/ChartProvider/ChartProvider.d.ts

@@ -4,5 +4,5 @@ import { ChartAnyPluginSignature } from "../../internals/plugins/models/index.js
 import { ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
 import { ChartSeriesType } from "../../models/seriesType/config.js";
 export declare const defaultSeriesConfig: ChartSeriesConfig<'bar' | 'scatter' | 'line' | 'pie'>;
-declare function ChartProvider<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(props: ChartProviderProps<TSeriesType, TSignatures>): React.JSX.Element;
+declare function ChartProvider<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(props: React.PropsWithChildren<ChartProviderProps<TSeriesType, TSignatures>>): React.JSX.Element;
 export { ChartProvider };

package/esm/context/ChartProvider/ChartProvider.types.d.ts

@@ -31,9 +31,8 @@ export interface ChartProviderProps<TSeries extends ChartSeriesType = ChartSerie
   plugins?: ConvertSignaturesIntoPlugins<TSignatures>;
   pluginParams?: ChartPluginParams<TSignatures>;
   /**
-   * The configuration helpers used to compute attributes according to the serries type.
+   * The configuration helpers used to compute attributes according to the series type.
    * @ignore Unstable props for internal usage.
    */
   seriesConfig?: ChartSeriesConfig<TSeries>;
-  children: React.ReactNode;
 }

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

@@ -1,3 +1,4 @@
+export * from "./useAnimate.js";
 export * from "./useAnimateArea.js";
 export * from "./useAnimateBar.js";
 export * from "./useAnimateBarLabel.js";

package/esm/hooks/animation/index.js

@@ -1,3 +1,4 @@
+export * from "./useAnimate.js";
 export * from "./useAnimateArea.js";
 export * from "./useAnimateBar.js";
 export * from "./useAnimateBarLabel.js";

package/esm/hooks/animation/useAnimate.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+export interface UseAnimateParams<Props extends {}, Elem extends Element, T extends {} = Props> {
+  /**
+   * Function that returns the interpolation function for animating props.
+   *
+   * @param {object} lastProps Props to animate from, i.e., props when the animation was last stopped. If this is the first
+   * animation, this value be `initialProps`.
+   * @param {object} newProps Props to animate to.
+   *
+   * @returns {function} Interpolation function that takes a time value between 0 and 1 and returns the interpolated
+   * props at time t. This function is called on every frame of the animation.
+   */
+  createInterpolator: (lastProps: Props, newProps: Props) => (t: number) => Props;
+  /**
+   * Transforms the interpolated props to be passed to `applyProps`, which usually means transforming them to element
+   * attributes, e.g., transforming an array of points into a `d` attribute for a path.
+   *
+   * @param {object} props The interpolated props.
+   *
+   * @returns {object} The transformed props.
+   */
+  transformProps: (props: Props) => T;
+  /**
+   * Applies the transformed props to the element. Usually this will be a call to `element.setAttribute("x", x)` or
+   * to `element.style.width = width` so that updating the element does not go through the React lifecycle (i.e., not
+   * causing a re-render), with the objective of improving performance.
+   *
+   * This function is called on every frame of the animation.
+   * @param {Element} element The element to apply the props to.
+   * @param {object} props The transformed props to apply to the element.
+   */
+  applyProps: (element: Elem, props: T) => void;
+  /**
+   * If `true`, the animation will be skipped and the final props will be applied immediately.
+   */
+  skip?: boolean;
+  /**
+   * Initial props to animate from. If not provided, defaults to the props passed as the first argument of `useAnimate`.
+   */
+  initialProps?: Props;
+  /**
+   * Optional ref to merge with the ref returned from this hook.
+   */
+  ref?: React.Ref<Elem>;
+}
+export type UseAnimateReturn<Elem extends Element, T extends {}> = Omit<T, 'ref'> & {
+  /**
+   * Ref to be passed to the element to animate.
+   */
+  ref: React.Ref<Elem>;
+};
+/**
+ * Hook to customize the animation of an element.
+ * Animates a ref from `initialProps` to `props`.
+ *
+ * @param {object} props The props to animate to.
+ *
+ * @returns an object containing a ref that should be passed to the element to animate and the transformed props.
+ * If `skip` is true, the transformed props are the `props` to animate to; if it is false, the transformed props are the
+ * `initialProps`.
+ *
+ * The animated props are only accessible in `applyProps`. The props returned from this hook are not animated.
+ *
+ * When an animation starts, an interpolator is created using `createInterpolator`.
+ * On every animation frame:
+ * 1. The interpolator is called to get the interpolated props;
+ * 2. `transformProps` is called to transform the interpolated props;
+ * 3. `applyProps` is called to apply the transformed props to the element.
+ *
+ * If `props` change while an animation is progress, the animation will continue towards the new `props`.
+ *
+ * The animation can be skipped by setting `skip` to true. If a transition is in progress, it will immediately end
+ * and `applyProps` be called with the final value. If there isn't a transition in progress, a new one won't be
+ * started and `applyProps` will not be called.
+ * */
+export declare function useAnimate<Props extends {}, Elem extends Element, T extends {} = Props>(props: Props, {
+  createInterpolator,
+  transformProps,
+  applyProps,
+  skip,
+  initialProps,
+  ref
+}: UseAnimateParams<Props, Elem, T>): UseAnimateReturn<Elem, T>;

package/esm/hooks/animation/useAnimate.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useForkRef from '@mui/utils/useForkRef';
+import { useAnimateInternal } from "../../internals/animation/useAnimateInternal.js";
+/**
+ * Hook to customize the animation of an element.
+ * Animates a ref from `initialProps` to `props`.
+ *
+ * @param {object} props The props to animate to.
+ *
+ * @returns an object containing a ref that should be passed to the element to animate and the transformed props.
+ * If `skip` is true, the transformed props are the `props` to animate to; if it is false, the transformed props are the
+ * `initialProps`.
+ *
+ * The animated props are only accessible in `applyProps`. The props returned from this hook are not animated.
+ *
+ * When an animation starts, an interpolator is created using `createInterpolator`.
+ * On every animation frame:
+ * 1. The interpolator is called to get the interpolated props;
+ * 2. `transformProps` is called to transform the interpolated props;
+ * 3. `applyProps` is called to apply the transformed props to the element.
+ *
+ * If `props` change while an animation is progress, the animation will continue towards the new `props`.
+ *
+ * The animation can be skipped by setting `skip` to true. If a transition is in progress, it will immediately end
+ * and `applyProps` be called with the final value. If there isn't a transition in progress, a new one won't be
+ * started and `applyProps` will not be called.
+ * */
+export function useAnimate(props, {
+  createInterpolator,
+  transformProps,
+  applyProps,
+  skip,
+  initialProps = props,
+  ref
+}) {
+  const transform = transformProps ?? (p => p);
+  const animateRef = useAnimateInternal(props, {
+    initialProps,
+    createInterpolator,
+    applyProps: (element, animatedProps) => applyProps(element, transform(animatedProps)),
+    skip
+  });
+  const usedProps = skip ? props : initialProps;
+  return _extends({}, transformProps(usedProps), {
+    ref: useForkRef(animateRef, ref)
+  });
+}

package/esm/hooks/animation/useAnimateArea.js

@@ -1,12 +1,11 @@
 import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
-import useForkRef from '@mui/utils/useForkRef';
-import { useAnimate } from "../../internals/animation/useAnimate.js";
+import { useAnimate } from "./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({
+  return useAnimate({
     d: props.d
   }, {
     createInterpolator: (lastProps, newProps) => {
@@ -18,10 +17,8 @@ export function useAnimateArea(props) {
     applyProps: (element, {
       d
     }) => element.setAttribute('d', d),
-    skip: props.skipAnimation
+    transformProps: p => p,
+    skip: props.skipAnimation,
+    ref: props.ref
   });
-  return {
-    ref: useForkRef(ref, props.ref),
-    d: props.d
-  };
 }

package/esm/hooks/animation/useAnimateBar.js

@@ -1,5 +1,5 @@
 import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
-import { useAnimate } from "../../internals/animation/useAnimate.js";
+import { useAnimate } from "./useAnimate.js";
 function barPropsInterpolator(from, to) {
   const interpolateX = interpolateNumber(from.x, to.x);
   const interpolateY = interpolateNumber(from.y, to.y);
@@ -29,7 +29,7 @@ export function useAnimateBar(props) {
     width: props.layout === 'vertical' ? props.width : 0,
     height: props.layout === 'vertical' ? 0 : props.height
   };
-  const ref = useAnimate({
+  return useAnimate({
     x: props.x,
     y: props.y,
     width: props.width,
@@ -42,15 +42,9 @@ export function useAnimateBar(props) {
       element.setAttribute('width', animatedProps.width.toString());
       element.setAttribute('height', animatedProps.height.toString());
     },
+    transformProps: p => p,
     initialProps,
-    skip: props.skipAnimation
+    skip: props.skipAnimation,
+    ref: props.ref
   });
-  const usedProps = props.skipAnimation ? props : initialProps;
-  return {
-    ref,
-    x: usedProps.x,
-    y: usedProps.y,
-    width: usedProps.width,
-    height: usedProps.height
-  };
 }

package/esm/hooks/animation/useAnimateBarLabel.js

@@ -1,5 +1,5 @@
 import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
-import { useAnimate } from "../../internals/animation/useAnimate.js";
+import { useAnimate } from "./useAnimate.js";
 function barLabelPropsInterpolator(from, to) {
   const interpolateX = interpolateNumber(from.x, to.x);
   const interpolateY = interpolateNumber(from.y, to.y);
@@ -37,8 +37,9 @@ export function useAnimateBarLabel(props) {
     width: props.width,
     height: props.height
   };
-  const ref = useAnimate(currentProps, {
+  return useAnimate(currentProps, {
     createInterpolator: barLabelPropsInterpolator,
+    transformProps: p => p,
     applyProps(element, animatedProps) {
       element.setAttribute('x', animatedProps.x.toString());
       element.setAttribute('y', animatedProps.y.toString());
@@ -46,14 +47,7 @@ export function useAnimateBarLabel(props) {
       element.setAttribute('height', animatedProps.height.toString());
     },
     initialProps,
-    skip: props.skipAnimation
+    skip: props.skipAnimation,
+    ref: props.ref
   });
-  const usedProps = props.skipAnimation ? currentProps : initialProps;
-  return {
-    ref,
-    x: usedProps.x,
-    y: usedProps.y,
-    width: usedProps.width,
-    height: usedProps.height
-  };
 }

package/esm/hooks/animation/useAnimateGaugeValueArc.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+interface UseAnimateGaugeValueArcParams {
+  ref?: React.Ref<SVGPathElement>;
+  startAngle: number;
+  endAngle: number;
+  cornerRadius: number;
+  innerRadius: number;
+  outerRadius: number;
+  skipAnimation: boolean;
+}
+type UseAnimateGaugeValueArcReturnValue = {
+  ref: React.Ref<SVGPathElement>;
+  d: string;
+};
+/** Animates a arc of a gauge chart by increasing the `endAngle` from the start angle to the end angle.
+ * 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 useAnimateGaugeValueArc(props: UseAnimateGaugeValueArcParams): UseAnimateGaugeValueArcReturnValue;
+export {};

package/esm/hooks/animation/useAnimateGaugeValueArc.js

@@ -0,0 +1,54 @@
+import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
+import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { useAnimate } from "./useAnimate.js";
+function gaugeValueArcPropsInterpolator(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 interpolateCornerRadius = interpolateNumber(from.cornerRadius, to.cornerRadius);
+  return t => {
+    return {
+      startAngle: interpolateStartAngle(t),
+      endAngle: interpolateEndAngle(t),
+      innerRadius: interpolateInnerRadius(t),
+      outerRadius: interpolateOuterRadius(t),
+      cornerRadius: interpolateCornerRadius(t)
+    };
+  };
+}
+
+/** Animates a arc of a gauge chart by increasing the `endAngle` from the start angle to the end angle.
+ * 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 useAnimateGaugeValueArc(props) {
+  return useAnimate({
+    startAngle: props.startAngle,
+    endAngle: props.endAngle,
+    innerRadius: props.innerRadius,
+    outerRadius: props.outerRadius,
+    cornerRadius: props.cornerRadius
+  }, {
+    createInterpolator: gaugeValueArcPropsInterpolator,
+    transformProps: p => ({
+      d: d3Arc().cornerRadius(p.cornerRadius)({
+        innerRadius: p.innerRadius,
+        outerRadius: p.outerRadius,
+        startAngle: p.startAngle,
+        endAngle: p.endAngle
+      })
+    }),
+    applyProps(element, p) {
+      element.setAttribute('d', p.d);
+    },
+    initialProps: {
+      startAngle: props.startAngle,
+      endAngle: props.startAngle,
+      innerRadius: props.innerRadius,
+      outerRadius: props.outerRadius,
+      cornerRadius: props.cornerRadius
+    },
+    skip: props.skipAnimation,
+    ref: props.ref
+  });
+}

package/esm/hooks/animation/useAnimateLine.js

@@ -1,11 +1,10 @@
 import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
-import useForkRef from '@mui/utils/useForkRef';
-import { useAnimate } from "../../internals/animation/useAnimate.js";
+import { useAnimate } from "./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({
+  return useAnimate({
     d: props.d
   }, {
     createInterpolator: (lastProps, newProps) => {
@@ -17,10 +16,8 @@ export function useAnimateLine(props) {
     applyProps: (element, {
       d
     }) => element.setAttribute('d', d),
-    skip: props.skipAnimation
+    skip: props.skipAnimation,
+    transformProps: p => p,
+    ref: props.ref
   });
-  return {
-    ref: useForkRef(ref, props.ref),
-    d: props.d
-  };
 }

package/esm/hooks/animation/useAnimatePieArc.js

@@ -1,7 +1,6 @@
 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";
+import { useAnimate } from "./useAnimate.js";
 function pieArcPropsInterpolator(from, to) {
   const interpolateStartAngle = interpolateNumber(from.startAngle, to.startAngle);
   const interpolateEndAngle = interpolateNumber(from.endAngle, to.endAngle);
@@ -33,7 +32,7 @@ export function useAnimatePieArc(props) {
     paddingAngle: props.paddingAngle,
     cornerRadius: props.cornerRadius
   };
-  const ref = useAnimate({
+  return useAnimate({
     startAngle: props.startAngle,
     endAngle: props.endAngle,
     innerRadius: props.innerRadius,
@@ -42,29 +41,22 @@ export function useAnimatePieArc(props) {
     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');
+    transformProps: p => ({
+      d: d3Arc().cornerRadius(p.cornerRadius)({
+        padAngle: p.paddingAngle,
+        innerRadius: p.innerRadius,
+        outerRadius: p.outerRadius,
+        startAngle: p.startAngle,
+        endAngle: p.endAngle
+      }),
+      visibility: p.startAngle === p.endAngle ? 'hidden' : 'visible'
+    }),
+    applyProps(element, p) {
+      element.setAttribute('d', p.d);
+      element.setAttribute('visibility', p.visibility);
     },
     initialProps,
-    skip: props.skipAnimation
+    skip: props.skipAnimation,
+    ref: props.ref
   });
-  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/esm/hooks/animation/useAnimatePieArcLabel.js

@@ -1,7 +1,6 @@
 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";
+import { useAnimate } from "./useAnimate.js";
 function pieArcLabelPropsInterpolator(from, to) {
   const interpolateStartAngle = interpolateNumber(from.startAngle, to.startAngle);
   const interpolateEndAngle = interpolateNumber(from.endAngle, to.endAngle);
@@ -33,7 +32,7 @@ export function useAnimatePieArcLabel(props) {
     paddingAngle: props.paddingAngle,
     cornerRadius: props.cornerRadius
   };
-  const ref = useAnimate({
+  return useAnimate({
     startAngle: props.startAngle,
     endAngle: props.endAngle,
     innerRadius: props.innerRadius,
@@ -42,7 +41,7 @@ export function useAnimatePieArcLabel(props) {
     cornerRadius: props.cornerRadius
   }, {
     createInterpolator: pieArcLabelPropsInterpolator,
-    applyProps(element, animatedProps) {
+    transformProps: animatedProps => {
       const [x, y] = d3Arc().cornerRadius(animatedProps.cornerRadius).centroid({
         padAngle: animatedProps.paddingAngle,
         startAngle: animatedProps.startAngle,
@@ -50,23 +49,20 @@ export function useAnimatePieArcLabel(props) {
         innerRadius: animatedProps.innerRadius,
         outerRadius: animatedProps.outerRadius
       });
+      return {
+        x,
+        y
+      };
+    },
+    applyProps(element, {
+      x,
+      y
+    }) {
       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
+    skip: props.skipAnimation,
+    ref: props.ref
   });
-  return {
-    ref: useForkRef(ref, props.ref),
-    x,
-    y
-  };
 }

package/esm/hooks/useAxisSystem.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @internals
+ *
+ * Get the coordinate system implemented.
+ * The hook assumes polar and cartesian are never implemented at the same time.
+ * @returns The coordinate system
+ */
+export declare function useAxisSystem(): 'none' | 'polar' | 'cartesian';

package/esm/hooks/useAxisSystem.js

@@ -0,0 +1,26 @@
+'use client';
+
+import { selectorChartRawXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { selectorChartRawRotationAxis } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+
+/**
+ * @internals
+ *
+ * Get the coordinate system implemented.
+ * The hook assumes polar and cartesian are never implemented at the same time.
+ * @returns The coordinate system
+ */
+export function useAxisSystem() {
+  const store = useStore();
+  const rawRotationAxis = useSelector(store, selectorChartRawRotationAxis);
+  const rawXAxis = useSelector(store, selectorChartRawXAxis);
+  if (rawRotationAxis !== undefined) {
+    return 'polar';
+  }
+  if (rawXAxis !== undefined) {
+    return 'cartesian';
+  }
+  return 'none';
+}

package/esm/hooks/useIsHydrated.js

@@ -6,7 +6,7 @@ import * as React from 'react';
  *
  * Basically a implementation of Option 2 of this gist: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85#option-2-lazily-show-component-with-uselayouteffect. */
 export function useIsHydrated() {
-  const [isHydrated, setIsHydrated] = React.useState(false);
+  const [isHydrated, setIsHydrated] = React.useState(typeof window !== 'undefined' || process.env.NODE_ENV === 'test');
   React.useEffect(() => {
     setIsHydrated(true);
   }, []);

package/{context/AnimationProvider → esm/hooks}/useSkipAnimation.d.ts

@@ -1,6 +1,6 @@
 /**
  * A hook to get if chart animations should be skipped.
  *
- * @returns {boolean|undefined} whether to skip animations
+ * @returns {boolean} whether to skip animations
  */
-export declare function useSkipAnimation(skipAnimation?: boolean): boolean | undefined;
+export declare function useSkipAnimation(skipAnimation?: boolean): boolean;

package/esm/hooks/useSkipAnimation.js

@@ -0,0 +1,16 @@
+'use client';
+
+import { selectorChartSkipAnimation } from "../internals/plugins/corePlugins/useChartAnimation/index.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+
+/**
+ * A hook to get if chart animations should be skipped.
+ *
+ * @returns {boolean} whether to skip animations
+ */
+export function useSkipAnimation(skipAnimation) {
+  const store = useStore();
+  const storeSkipAnimation = useSelector(store, selectorChartSkipAnimation);
+  return skipAnimation || storeSkipAnimation;
+}

package/esm/index.js

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

package/{modern/internals/animation/useAnimate.d.ts → esm/internals/animation/useAnimateInternal.d.ts}

@@ -1,4 +1,6 @@
 /** Animates a ref. The animation can be skipped by setting {@link skip} to true.
+ *
+ * If possible, prefer {@link useAnimate}.
  *
  * - If {@link skip} is false, a transition will be started.
  * - If {@link skip} is true and no transition is in progress, no transition will be started and {@link applyProps} will
@@ -6,7 +8,7 @@
  * - If {@link skip} becomes true and a transition is in progress, the transition will immediately end and
  *   {@link applyProps} be called with the final value.
  * */
-export declare function useAnimate<Props extends {}, Elem extends Element>(props: Props, {
+export declare function useAnimateInternal<Props extends {}, Elem extends Element>(props: Props, {
   createInterpolator,
   applyProps,
   skip,

package/{modern/internals/animation/useAnimate.js → esm/internals/animation/useAnimateInternal.js}

@@ -7,6 +7,8 @@ import { Transition } from "./Transition.js";
 import { shallowEqual } from "../shallowEqual.js";
 
 /** Animates a ref. The animation can be skipped by setting {@link skip} to true.
+ *
+ * If possible, prefer {@link useAnimate}.
  *
  * - If {@link skip} is false, a transition will be started.
  * - If {@link skip} is true and no transition is in progress, no transition will be started and {@link applyProps} will
@@ -14,7 +16,7 @@ import { shallowEqual } from "../shallowEqual.js";
  * - If {@link skip} becomes true and a transition is in progress, the transition will immediately end and
  *   {@link applyProps} be called with the final value.
  * */
-export function useAnimate(props, {
+export function useAnimateInternal(props, {
   createInterpolator,
   applyProps,
   skip,

package/esm/internals/domUtils.js

@@ -106,13 +106,18 @@ export const getStringSize = (text, style = {}) => {
     } else {
       stringCache.cacheCount += 1;
     }
-    if (domCleanTimeout) {
-      clearTimeout(domCleanTimeout);
-    }
-    domCleanTimeout = setTimeout(() => {
-      // Limit node cleaning to once per render cycle
+    if (process.env.NODE_ENV === 'test') {
+      // In test environment, we clean the measurement span immediately
       measurementSpan.textContent = '';
-    }, 0);
+    } else {
+      if (domCleanTimeout) {
+        clearTimeout(domCleanTimeout);
+      }
+      domCleanTimeout = setTimeout(() => {
+        // Limit node cleaning to once per render cycle
+        measurementSpan.textContent = '';
+      }, 0);
+    }
     return result;
   } catch {
     return {

package/esm/internals/index.d.ts

@@ -38,8 +38,6 @@ export * from "./getCurve.js";
 export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.js";
 export * from "./defaultizeMargin.js";
-export * from "../context/AnimationProvider/index.js";
-export type * from '../context/context.types';
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
 export * from "../context/ChartProvider/index.js";
 export * from "../models/seriesType/config.js";

package/esm/internals/index.js

@@ -50,8 +50,6 @@ export * from "./consumeThemeProps.js";
 export * from "./defaultizeMargin.js";
 
 // contexts
-
-export * from "../context/AnimationProvider/index.js";
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
 export * from "../context/ChartProvider/index.js";