@mui/x-charts 8.0.0-alpha.8 → 8.0.0-alpha.9

package/LineChart/AreaPlot.js

@@ -10,6 +10,7 @@ import { area as d3Area } from '@mui/x-charts-vendor/d3-shape';
 import { AreaElement, areaElementClasses } from "./AreaElement.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import getCurveFactory from "../internals/getCurve.js";
+import { isBandScale } from "../internals/isBandScale.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useLineSeries } from "../hooks/useSeries.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
@@ -59,9 +60,12 @@ const useAggregatedData = () => {
           stackedData,
           data,
           connectNulls,
-          baseline
+          baseline,
+          curve,
+          strictStepCurve
         } = series[seriesId];
-        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
+        const xScale = xAxis[xAxisId].scale;
+        const xPosition = getValueToPositionMapper(xScale);
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
         const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
@@ -73,7 +77,42 @@ const useAggregatedData = () => {
             throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
           }
         }
-        const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && isBandScale(xScale);
+        const formattedData = xData?.flatMap((x, index) => {
+          const nullData = data[index] == null;
+          if (shouldExpand) {
+            const rep = [{
+              x,
+              y: stackedData[index],
+              nullData,
+              isExtension: false
+            }];
+            if (!nullData && (index === 0 || data[index - 1] == null)) {
+              rep.unshift({
+                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+              rep.push({
+                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            return rep;
+          }
+          return {
+            x,
+            y: stackedData[index],
+            nullData
+          };
+        }) ?? [];
+        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
+        const areaPath = d3Area().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y0(d => {
           if (typeof baseline === 'number') {
             return yScale(baseline);
           }
@@ -89,13 +128,7 @@ const useAggregatedData = () => {
           }
           return value;
         }).y1(d => d.y && yScale(d.y[1]));
-        const curve = getCurveFactory(series[seriesId].curve);
-        const formattedData = xData?.map((x, index) => ({
-          x,
-          y: stackedData[index]
-        })) ?? [];
-        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-        const d = areaPath.curve(curve)(d3Data) || '';
+        const d = areaPath.curve(getCurveFactory(curve))(d3Data) || '';
         return _extends({}, series[seriesId], {
           gradientId,
           d,

package/LineChart/CircleMarkElement.d.ts

@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { MarkElementOwnerState } from './markElementClasses';
 export type CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
-    /**
-     * The shape of the marker.
-     */
-    shape: 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
     /**
      * If `true`, animations are skipped.
      * @default false

package/LineChart/CircleMarkElement.js

@@ -2,11 +2,10 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "shape"];
+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 { warnOnce } from '@mui/x-internals/warning';
 import { animated, useSpring } from '@react-spring/web';
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../context/index.js";
@@ -36,13 +35,9 @@ function CircleMarkElement(props) {
       color,
       dataIndex,
       onClick,
-      skipAnimation,
-      shape
+      skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  if (shape !== 'circle') {
-    warnOnce([`MUI X: The mark element of your line chart have shape "${shape}" which is not supported when using \`experimentalRendering=true\`.`, 'Only "circle" are supported with `experimentalRendering`.'].join('\n'), 'error');
-  }
   const theme = useTheme();
   const getInteractionItemProps = useInteractionItemProps();
   const {

package/LineChart/LineChart.d.ts

@@ -69,10 +69,6 @@ export interface LineChartProps extends Omit<ChartContainerProps, 'series' | 'pl
      * @default false
      */
     skipAnimation?: boolean;
-    /**
-     * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
-     */
-    experimentalMarkRendering?: boolean;
 }
 /**
  * Demos:

package/LineChart/LineChart.js

@@ -18,7 +18,7 @@ import { ChartsOnAxisClickHandler } from "../ChartsOnAxisClickHandler/index.js";
 import { ChartsOverlay } from "../ChartsOverlay/index.js";
 import { useLineChartProps } from "./useLineChartProps.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
-import { ChartDataProvider } from "../context/index.js";
+import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -117,10 +117,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
-  /**
-   * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
-   */
-  experimentalMarkRendering: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */

package/LineChart/LineHighlightElement.d.ts

@@ -14,7 +14,11 @@ interface LineHighlightElementOwnerState {
 }
 export declare function getHighlightElementUtilityClass(slot: string): string;
 export declare const lineHighlightElementClasses: LineHighlightElementClasses;
-export type LineHighlightElementProps = LineHighlightElementOwnerState & Omit<React.SVGProps<SVGCircleElement>, 'ref' | 'id'>;
+export type LineHighlightElementProps = (LineHighlightElementOwnerState & ({
+    shape: 'circle';
+} & Omit<React.SVGProps<SVGCircleElement>, 'ref' | 'id'>)) | (LineHighlightElementOwnerState & {
+    shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+} & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'>);
 /**
  * Demos:
  *

package/LineChart/LineHighlightElement.js

@@ -2,13 +2,15 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color"];
+const _excluded = ["x", "y", "id", "classes", "color", "shape"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { getSymbol } from "../internals/getSymbol.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getHighlightElementUtilityClass(slot) {
   return generateUtilityClass('MuiHighlightElement', slot);
@@ -24,7 +26,18 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getHighlightElementUtilityClass, classes);
 };
-const HighlightElement = styled('circle', {
+const HighlightPathElement = styled('path', {
+  name: 'MuiHighlightElement',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
+  transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
+  fill: ownerState.color
+}));
+const HighlightCircleElement = styled('circle', {
   name: 'MuiHighlightElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -51,7 +64,8 @@ function LineHighlightElement(props) {
       y,
       id,
       classes: innerClasses,
-      color
+      color,
+      shape
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = {
@@ -62,14 +76,19 @@ function LineHighlightElement(props) {
     y
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(HighlightElement, _extends({
-    pointerEvents: "none",
-    ownerState: ownerState,
-    className: classes.root,
+  const Element = shape === 'circle' ? HighlightCircleElement : HighlightPathElement;
+  const additionalProps = shape === 'circle' ? {
     cx: 0,
     cy: 0,
     r: other.r === undefined ? 5 : other.r
-  }, other));
+  } : {
+    d: d3Symbol(d3SymbolsFill[getSymbol(shape)])()
+  };
+  return /*#__PURE__*/_jsx(Element, _extends({
+    pointerEvents: "none",
+    ownerState: ownerState,
+    className: classes.root
+  }, additionalProps, other));
 }
 process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -77,6 +96,7 @@ process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired
 } : void 0;
 export { LineHighlightElement };

package/LineChart/LineHighlightPlot.js

@@ -70,7 +70,8 @@ function LineHighlightPlot(props) {
           yAxisId = defaultYAxisId,
           stackedData,
           data,
-          disableHighlight
+          disableHighlight,
+          shape = 'circle'
         } = series[seriesId];
         if (disableHighlight || data[highlightedIndex] == null) {
           return null;
@@ -95,7 +96,8 @@ function LineHighlightPlot(props) {
           id: seriesId,
           color: colorGetter(highlightedIndex),
           x: x,
-          y: y
+          y: y,
+          shape: shape
         }, slotProps?.lineHighlight), `${seriesId}`);
       });
     })

package/LineChart/LinePlot.js

@@ -10,6 +10,7 @@ import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
 import { LineElement, lineElementClasses } from "./LineElement.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import getCurveFactory from "../internals/getCurve.js";
+import { isBandScale } from "../internals/isBandScale.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useLineSeries } from "../hooks/useSeries.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
@@ -57,9 +58,12 @@ const useAggregatedData = () => {
           yAxisId = defaultYAxisId,
           stackedData,
           data,
-          connectNulls
+          connectNulls,
+          curve,
+          strictStepCurve
         } = series[seriesId];
-        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
+        const xScale = xAxis[xAxisId].scale;
+        const xPosition = getValueToPositionMapper(xScale);
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
         const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
@@ -71,13 +75,43 @@ const useAggregatedData = () => {
             throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
           }
         }
-        const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
-        const formattedData = xData?.map((x, index) => ({
-          x,
-          y: stackedData[index]
-        })) ?? [];
-        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-        const d = linePath.curve(getCurveFactory(series[seriesId].curve))(d3Data) || '';
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && isBandScale(xScale);
+        const formattedData = xData?.flatMap((x, index) => {
+          const nullData = data[index] == null;
+          if (shouldExpand) {
+            const rep = [{
+              x,
+              y: stackedData[index],
+              nullData,
+              isExtension: false
+            }];
+            if (!nullData && (index === 0 || data[index - 1] == null)) {
+              rep.unshift({
+                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+              rep.push({
+                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            return rep;
+          }
+          return {
+            x,
+            y: stackedData[index],
+            nullData
+          };
+        }) ?? [];
+        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
+        const linePath = d3Line().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => yScale(d.y[1]));
+        const d = linePath.curve(getCurveFactory(curve))(d3Data) || '';
         return _extends({}, series[seriesId], {
           gradientId,
           d,

package/LineChart/MarkPlot.d.ts

@@ -24,12 +24,6 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<
      * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
      */
     onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void;
-    /**
-     * If `true` the mark element will only be able to render circle.
-     * Giving fewer customization options, but saving around 40ms per 1.000 marks.
-     * @default false
-     */
-    experimentalRendering?: boolean;
 }
 /**
  * Demos:

package/LineChart/MarkPlot.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "experimentalRendering"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
@@ -32,8 +32,7 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation: inSkipAnimation,
-      onItemClick,
-      experimentalRendering
+      onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const skipAnimation = useSkipAnimation(inSkipAnimation);
@@ -50,7 +49,6 @@ function MarkPlot(props) {
   const {
     instance
   } = useChartContext();
-  const Mark = slots?.mark ?? (experimentalRendering ? CircleMarkElement : MarkElement);
   if (seriesData === undefined) {
     return null;
   }
@@ -70,7 +68,8 @@ function MarkPlot(props) {
           yAxisId = defaultYAxisId,
           stackedData,
           data,
-          showMark = true
+          showMark = true,
+          shape = 'circle'
         } = series[seriesId];
         if (showMark === false) {
           return null;
@@ -84,6 +83,7 @@ function MarkPlot(props) {
         const clipId = cleanId(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
 
         const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
+        const Mark = slots?.mark ?? (shape === 'circle' ? CircleMarkElement : MarkElement);
         return /*#__PURE__*/_jsx("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {
@@ -131,7 +131,7 @@ function MarkPlot(props) {
             return /*#__PURE__*/_jsx(Mark, _extends({
               id: seriesId,
               dataIndex: index,
-              shape: "circle",
+              shape: shape,
               color: colorGetter(index),
               x: x,
               y: y // Don't know why TS doesn't get from the filter that y can't be null
@@ -154,12 +154,6 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * If `true` the mark element will only be able to render circle.
-   * Giving fewer customization options, but saving around 40ms per 1.000 marks.
-   * @default false
-   */
-  experimentalRendering: PropTypes.bool,
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.

package/LineChart/plugin.js

@@ -1,9 +1,11 @@
 import { getExtremumX, getExtremumY } from "./extremums.js";
 import formatter from "./formatter.js";
 import getColor from "./getColor.js";
+import legendGetter from "./legend.js";
 export const plugin = {
   colorProcessor: getColor,
   seriesProcessor: formatter,
+  legendGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY
 };

package/LineChart/useLineChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "experimentalMarkRendering"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { calculateMargins } from "../internals/calculateMargins.js";
@@ -44,8 +44,7 @@ export const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className,
-      experimentalMarkRendering
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -106,8 +105,7 @@ export const useLineChartProps = props => {
     slots,
     slotProps,
     onItemClick: onMarkClick,
-    skipAnimation,
-    experimentalRendering: experimentalMarkRendering
+    skipAnimation
   };
   const overlayProps = {
     slots,

package/PieChart/PieChart.js

@@ -11,7 +11,7 @@ import { ChartsLegend } from "../ChartsLegend/index.js";
 import { PiePlot } from "./PiePlot.js";
 import { ChartsOverlay } from "../ChartsOverlay/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
-import { ChartDataProvider } from "../context/index.js";
+import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/PieChart/plugin.js

@@ -1,6 +1,8 @@
 import formatter from "./formatter.js";
 import getColor from "./getColor.js";
+import legendGetter from "./legend.js";
 export const plugin = {
   colorProcessor: getColor,
-  seriesProcessor: formatter
+  seriesProcessor: formatter,
+  legendGetter
 };

package/ScatterChart/ScatterChart.js

@@ -14,7 +14,7 @@ import { ChartsVoronoiHandler } from "../ChartsVoronoiHandler/ChartsVoronoiHandl
 import { ChartsGrid } from "../ChartsGrid/index.js";
 import { useScatterChartProps } from "./useScatterChartProps.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
-import { ChartDataProvider } from "../context/index.js";
+import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/ScatterChart/plugin.js

@@ -1,9 +1,11 @@
 import { getExtremumX, getExtremumY } from "./extremums.js";
 import formatter from "./formatter.js";
 import getColor from "./getColor.js";
+import legendGetter from "./legend.js";
 export const plugin = {
   seriesProcessor: formatter,
   colorProcessor: getColor,
+  legendGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY
 };

package/context/AnimationProvider/AnimationProvider.js

@@ -17,7 +17,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(isAnimationDisabledEnvironment || undefined);
+  const [skipAnimation, setSkipAnimation] = React.useState(process.env.NODE_ENV === 'test' ? isAnimationDisabledEnvironment || undefined : undefined);
   useIsomorphicLayoutEffect(() => {
     if (isAnimationDisabledEnvironment) {
       return undefined;

package/context/InteractionSelectors.d.ts

@@ -33,8 +33,8 @@ export declare const selectorChartsInteractionItem: ((state: import("../internal
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionAxis: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../internals").ChartStateCacheKey;
@@ -64,8 +64,8 @@ export declare const selectorChartsInteractionAxis: ((state: import("../internal
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionXAxis: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../internals").ChartStateCacheKey;
@@ -107,8 +107,8 @@ export declare const selectorChartsInteractionXAxis: ((state: import("../interna
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionYAxis: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../internals").ChartStateCacheKey;
@@ -150,8 +150,8 @@ export declare const selectorChartsInteractionYAxis: ((state: import("../interna
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionItemIsDefined: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../internals").ChartStateCacheKey;
@@ -195,16 +195,16 @@ export declare const selectorChartsInteractionItemIsDefined: ((state: import("..
         dependencyRecomputations: () => number;
         resetDependencyRecomputations: () => void;
     } & {
-        argsMemoize: typeof import("reselect").weakMapMemoize;
         memoize: typeof import("reselect").weakMapMemoize;
+        argsMemoize: typeof import("reselect").weakMapMemoize;
     }];
     recomputations: () => number;
     resetRecomputations: () => void;
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionXAxisIsDefined: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../internals").ChartStateCacheKey;
@@ -266,16 +266,16 @@ export declare const selectorChartsInteractionXAxisIsDefined: ((state: import(".
         dependencyRecomputations: () => number;
         resetDependencyRecomputations: () => void;
     } & {
-        argsMemoize: typeof import("reselect").weakMapMemoize;
         memoize: typeof import("reselect").weakMapMemoize;
+        argsMemoize: typeof import("reselect").weakMapMemoize;
     }];
     recomputations: () => number;
     resetRecomputations: () => void;
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionYAxisIsDefined: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../internals").ChartStateCacheKey;
@@ -337,16 +337,16 @@ export declare const selectorChartsInteractionYAxisIsDefined: ((state: import(".
         dependencyRecomputations: () => number;
         resetDependencyRecomputations: () => void;
     } & {
-        argsMemoize: typeof import("reselect").weakMapMemoize;
         memoize: typeof import("reselect").weakMapMemoize;
+        argsMemoize: typeof import("reselect").weakMapMemoize;
     }];
     recomputations: () => number;
     resetRecomputations: () => void;
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const selectorChartsInteractionIsVoronoiEnabled: ((state: import("../internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("../internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("../internals").ChartsSeriesConfig> & import("../internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types").UseChartInteractionState & Partial<{}> & {
     cacheKey: import("../internals").ChartStateCacheKey;
@@ -376,7 +376,7 @@ export declare const selectorChartsInteractionIsVoronoiEnabled: ((state: import(
     dependencyRecomputations: () => number;
     resetDependencyRecomputations: () => void;
 } & {
-    argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export {};

package/context/index.d.ts

@@ -1,3 +1 @@
 export * from './HighlightedProvider';
-export { ChartDataProvider } from './ChartDataProvider';
-export type { ChartDataProviderProps } from './ChartDataProvider';

package/context/index.js

@@ -1,2 +1 @@
-export * from "./HighlightedProvider/index.js";
-export { ChartDataProvider } from "./ChartDataProvider/index.js";
+export * from "./HighlightedProvider/index.js";