@mui/x-charts 7.13.0 → 7.15.0

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks } from '../hooks/useTicks';
 import { useDrawingArea } from '../hooks/useDrawingArea';
@@ -84,7 +85,7 @@ function ChartsYAxis(inProps) {
     sx
   } = defaultizedProps;
   const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
     theme
   }));
@@ -92,7 +93,8 @@ function ChartsYAxis(inProps) {
     left,
     top,
     width,
-    height
+    height,
+    isPointInside
   } = useDrawingArea();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = useTicks({
@@ -112,7 +114,7 @@ function ChartsYAxis(inProps) {
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? ChartsText;
   const Label = slots?.axisLabel ?? ChartsText;
-  const revertAnchor = !isRTL && position === 'right' || isRTL && position !== 'right';
+  const revertAnchor = !isRtl && position === 'right' || isRtl && position !== 'right';
   const axisTickLabelProps = useSlotProps({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
@@ -172,7 +174,12 @@ function ChartsYAxis(inProps) {
       const xTickLabel = positionSign * (tickSize + 2);
       const yTickLabel = labelOffset;
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
-      const showLabel = offset >= top - 1 && offset <= height + top + 1;
+      const showLabel = isPointInside({
+        x: -1,
+        y: offset
+      }, {
+        direction: 'y'
+      });
       if (!showLabel) {
         return null;
       }

package/modern/LineChart/LineChart.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { AreaPlot } from './AreaPlot';
 import { LinePlot } from './LinePlot';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
@@ -26,7 +27,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
  */
-const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
+const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiLineChart'
+  });
   const {
     chartContainerProps,
     axisClickHandlerProps,

package/modern/LineChart/MarkElement.js

@@ -76,8 +76,10 @@ function MarkElement(props) {
     axis
   } = React.useContext(InteractionContext);
   const position = useSpring({
-    x,
-    y,
+    to: {
+      x,
+      y
+    },
     immediate: skipAnimation
   });
   const ownerState = {

package/modern/LineChart/extremums.js

@@ -6,9 +6,18 @@ export const getExtremumX = params => {
   const maxX = Math.max(...(axis.data ?? []));
   return [minX, maxX];
 };
-function getSeriesExtremums(getValues, stackedData) {
-  return stackedData.reduce((seriesAcc, stackedValue) => {
+function getSeriesExtremums(getValues, stackedData, filter) {
+  return stackedData.reduce((seriesAcc, stackedValue, index) => {
     const [base, value] = getValues(stackedValue);
+    if (filter && (!filter({
+      y: base,
+      x: null
+    }, index) || !filter({
+      y: value,
+      x: null
+    }, index))) {
+      return seriesAcc;
+    }
     return [Math.min(base, value, seriesAcc[0]), Math.max(base, value, seriesAcc[1])];
   }, [Infinity, -Infinity]);
 }
@@ -16,7 +25,8 @@ export const getExtremumY = params => {
   const {
     series,
     axis,
-    isDefaultAxis
+    isDefaultAxis,
+    getFilters
   } = params;
   return Object.keys(series).filter(seriesId => {
     const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
@@ -27,10 +37,16 @@ export const getExtremumY = params => {
       stackedData
     } = series[seriesId];
     const isArea = area !== undefined;
+    const filter = getFilters?.({
+      currentAxisId: axis.id,
+      isDefaultAxis,
+      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
+      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+    });
 
     // Since this series is not used to display an area, we do not consider the base (the d[0]).
     const getValues = isArea && axis.scaleType !== 'log' && typeof series[seriesId].baseline !== 'string' ? d => d : d => [d[1], d[1]];
-    const seriesExtremums = getSeriesExtremums(getValues, stackedData);
+    const seriesExtremums = getSeriesExtremums(getValues, stackedData, filter);
     const [seriesMin, seriesMax] = seriesExtremums;
     return [Math.min(seriesMin, acc[0]), Math.max(seriesMax, acc[1])];
   }, [Infinity, -Infinity]);

package/modern/PieChart/PieChart.js

@@ -3,6 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "tooltip", "axisHighlight", "skipAnimation", "legend", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useRtl } from '@mui/system/RtlProvider';
+import { useThemeProps } from '@mui/material/styles';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis/ChartsAxis';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
@@ -10,7 +12,6 @@ import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { PiePlot } from './PiePlot';
-import { useIsRTL } from '../internals/useIsRTL';
 import { ChartsOverlay } from '../ChartsOverlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
@@ -36,7 +37,11 @@ const defaultRTLMargin = {
  *
  * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
  */
-const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(props, ref) {
+const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPieChart'
+  });
   const {
       xAxis,
       yAxis,
@@ -69,13 +74,13 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(props, ref) {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const isRTL = useIsRTL();
-  const margin = _extends({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
+  const isRtl = useRtl();
+  const margin = _extends({}, isRtl ? defaultRTLMargin : defaultMargin, marginProps);
   const legend = _extends({
     direction: 'column',
     position: {
       vertical: 'middle',
-      horizontal: isRTL ? 'left' : 'right'
+      horizontal: isRtl ? 'left' : 'right'
     }
   }, legendProps);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({}, other, {

package/modern/ScatterChart/ScatterChart.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { ScatterPlot } from './ScatterPlot';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis';
@@ -23,7 +24,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
  */
-const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, ref) {
+const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiScatterChart'
+  });
   const {
     chartContainerProps,
     zAxisProps,

package/modern/ScatterChart/extremums.js

@@ -5,16 +5,24 @@ export const getExtremumX = params => {
   const {
     series,
     axis,
-    isDefaultAxis
+    isDefaultAxis,
+    getFilters
   } = params;
   return Object.keys(series).filter(seriesId => {
     const axisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey;
     return axisId === axis.id || axisId === undefined && isDefaultAxis;
   }).reduce((acc, seriesId) => {
-    const seriesMinMax = series[seriesId].data.reduce((accSeries, {
-      x
-    }) => {
-      return mergeMinMax(accSeries, [x, x]);
+    const filter = getFilters?.({
+      currentAxisId: axis.id,
+      isDefaultAxis,
+      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
+      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+    });
+    const seriesMinMax = series[seriesId].data.reduce((accSeries, d, dataIndex) => {
+      if (filter && !filter(d, dataIndex)) {
+        return accSeries;
+      }
+      return mergeMinMax(accSeries, [d.x, d.x]);
     }, [Infinity, -Infinity]);
     return mergeMinMax(acc, seriesMinMax);
   }, [Infinity, -Infinity]);
@@ -23,16 +31,24 @@ export const getExtremumY = params => {
   const {
     series,
     axis,
-    isDefaultAxis
+    isDefaultAxis,
+    getFilters
   } = params;
   return Object.keys(series).filter(seriesId => {
     const axisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
     return axisId === axis.id || axisId === undefined && isDefaultAxis;
   }).reduce((acc, seriesId) => {
-    const seriesMinMax = series[seriesId].data.reduce((accSeries, {
-      y
-    }) => {
-      return mergeMinMax(accSeries, [y, y]);
+    const filter = getFilters?.({
+      currentAxisId: axis.id,
+      isDefaultAxis,
+      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
+      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+    });
+    const seriesMinMax = series[seriesId].data.reduce((accSeries, d, dataIndex) => {
+      if (filter && !filter(d, dataIndex)) {
+        return accSeries;
+      }
+      return mergeMinMax(accSeries, [d.y, d.y]);
     }, [Infinity, -Infinity]);
     return mergeMinMax(acc, seriesMinMax);
   }, [Infinity, -Infinity]);

package/modern/context/CartesianProvider/CartesianProvider.js

@@ -10,7 +10,6 @@ function CartesianProvider(props) {
   const {
     xAxis,
     yAxis,
-    dataset,
     children
   } = props;
   const formattedSeries = useSeries();
@@ -22,17 +21,15 @@ function CartesianProvider(props) {
     formattedSeries,
     axis: xAxis,
     extremumGetters: xExtremumGetters,
-    dataset,
     axisDirection: 'x'
-  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, dataset]);
+  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters]);
   const yValues = React.useMemo(() => computeValue({
     drawingArea,
     formattedSeries,
     axis: yAxis,
     extremumGetters: yExtremumGetters,
-    dataset,
     axisDirection: 'y'
-  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, dataset]);
+  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters]);
   const value = React.useMemo(() => ({
     isInitialized: true,
     data: {

package/modern/context/CartesianProvider/computeValue.js

@@ -4,22 +4,12 @@ import { isBandScaleConfig, isPointScaleConfig } from '../../models/axis';
 import { getColorScale, getOrdinalColorScale } from '../../internals/colorScale';
 import { getTickNumber } from '../../hooks/useTicks';
 import { getScale } from '../../internals/getScale';
+import { zoomScaleRange } from './zoom';
 import { getAxisExtremum } from './getAxisExtremum';
-import { normalizeAxis } from './normalizeAxis';
 const getRange = (drawingArea, axisDirection, isReverse) => {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return isReverse ? range.reverse() : range;
 };
-const zoomedScaleRange = (scaleRange, zoomRange) => {
-  const rangeGap = scaleRange[1] - scaleRange[0];
-  const zoomGap = zoomRange[1] - zoomRange[0];
-
-  // If current zoom show the scale between p1 and p2 percents
-  // The range should be extended by adding [0, p1] and [p2, 100] segments
-  const min = scaleRange[0] - zoomRange[0] * rangeGap / zoomGap;
-  const max = scaleRange[1] + (100 - zoomRange[1]) * rangeGap / zoomGap;
-  return [min, max];
-};
 const isDateData = data => data?.[0] instanceof Date;
 function createDateFormatter(axis, range) {
   const timeScale = scaleTime(axis.data, range);
@@ -32,32 +22,37 @@ const DEFAULT_BAR_GAP_RATIO = 0.1;
 export function computeValue({
   drawingArea,
   formattedSeries,
-  axis: inAxis,
+  axis: allAxis,
   extremumGetters,
-  dataset,
   axisDirection,
-  zoomData
+  zoomData,
+  zoomOptions,
+  getFilters
 }) {
-  const allAxis = normalizeAxis(inAxis, dataset, axisDirection);
   const completeAxis = {};
-  allAxis.forEach((axis, axisIndex) => {
+  allAxis.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
     const isDefaultAxis = axisIndex === 0;
-    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, isDefaultAxis, formattedSeries);
+    const zoomOption = zoomOptions?.[axis.id];
     const zoom = zoomData?.find(({
       axisId
     }) => axisId === axis.id);
     const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
     const range = getRange(drawingArea, axisDirection, axis.reverse);
+    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, isDefaultAxis, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
+    );
+    const data = axis.data ?? [];
     if (isBandScaleConfig(axis)) {
       const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
       const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
       const scaleRange = axisDirection === 'x' ? range : [range[1], range[0]];
-      const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
+      const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({
         categoryGapRatio,
         barGapRatio
       }, axis, {
+        data,
         scale: scaleBand(axis.data, zoomedRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
         tickNumber: axis.data.length,
         colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
@@ -71,8 +66,9 @@ export function computeValue({
     }
     if (isPointScaleConfig(axis)) {
       const scaleRange = axisDirection === 'x' ? range : [...range].reverse();
-      const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
+      const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({}, axis, {
+        data,
         scale: scalePoint(axis.data, zoomedRange),
         tickNumber: axis.data.length,
         colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
@@ -89,19 +85,20 @@ export function computeValue({
       return;
     }
     const scaleType = axis.scaleType ?? 'linear';
-    const extremums = [axis.min ?? minData, axis.max ?? maxData];
+    const axisExtremums = [axis.min ?? minData, axis.max ?? maxData];
     const rawTickNumber = getTickNumber(_extends({}, axis, {
       range,
-      domain: extremums
+      domain: axisExtremums
     }));
     const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
-    const zoomedRange = zoomedScaleRange(range, zoomRange);
+    const zoomedRange = zoomScaleRange(range, zoomRange);
 
     // TODO: move nice to prop? Disable when there is zoom?
-    const scale = getScale(scaleType, extremums, zoomedRange).nice(rawTickNumber);
+    const scale = getScale(scaleType, axisExtremums, zoomedRange).nice(rawTickNumber);
     const [minDomain, maxDomain] = scale.domain();
     const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
     completeAxis[axis.id] = _extends({}, axis, {
+      data,
       scaleType: scaleType,
       scale: scale.domain(domain),
       tickNumber,

package/modern/context/CartesianProvider/getAxisExtremum.js

@@ -1,14 +1,20 @@
-const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, formattedSeries) => {
+const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis, formattedSeries, getFilters) => {
   const getter = getters[chartType];
   const series = formattedSeries[chartType]?.series ?? {};
   const [minChartTypeData, maxChartTypeData] = getter?.({
     series,
     axis,
-    isDefaultAxis
+    isDefaultAxis,
+    getFilters
   }) ?? [Infinity, -Infinity];
-  return [Math.min(minChartTypeData, acc[0]), Math.max(maxChartTypeData, acc[1])];
+  const [minData, maxData] = acc;
+  return [Math.min(minChartTypeData, minData), Math.max(maxChartTypeData, maxData)];
 };
-export const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries) => {
+export const getAxisExtremum = (axis, getters, isDefaultAxis, formattedSeries, getFilters) => {
   const charTypes = Object.keys(getters);
-  return charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries), [Infinity, -Infinity]);
+  const extremums = charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis, formattedSeries, getFilters), [Infinity, -Infinity]);
+  if (Number.isNaN(extremums[0]) || Number.isNaN(extremums[1])) {
+    return [Infinity, -Infinity];
+  }
+  return extremums;
 };

package/modern/context/CartesianProvider/index.js

@@ -2,6 +2,7 @@ import { computeValue } from './computeValue';
 export * from './CartesianProvider';
 export * from './CartesianContext';
 export * from './useCartesianContext';
+export * from './Cartesian.types';
 const cartesianProviderUtils = {
   computeValue
 };

package/modern/context/CartesianProvider/zoom.js

@@ -0,0 +1,19 @@
+/**
+ * Applies the zoom into the scale range.
+ * It changes the screen coordinates that the scale covers.
+ * Not the data that is displayed.
+ *
+ * @param scaleRange the original range in real screen coordinates.
+ * @param zoomRange the zoom range in percentage.
+ * @returns zoomed range in real screen coordinates.
+ */
+export const zoomScaleRange = (scaleRange, zoomRange) => {
+  const rangeGap = scaleRange[1] - scaleRange[0];
+  const zoomGap = zoomRange[1] - zoomRange[0];
+
+  // If current zoom show the scale between p1 and p2 percents
+  // The range should be extended by adding [0, p1] and [p2, 100] segments
+  const min = scaleRange[0] - zoomRange[0] * rangeGap / zoomGap;
+  const max = scaleRange[1] + (100 - zoomRange[1]) * rangeGap / zoomGap;
+  return [min, max];
+};

package/modern/context/DrawingProvider.js

@@ -42,12 +42,20 @@ export function DrawingProvider(props) {
   const isPointInside = React.useCallback(({
     x,
     y
-  }, targetElement) => {
+  }, options) => {
     // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
-    if (targetElement && targetElement.closest('[data-drawing-container]')) {
+    if (options?.targetElement && options?.targetElement.closest('[data-drawing-container]')) {
       return true;
     }
-    return x >= drawingArea.left && x <= drawingArea.left + drawingArea.width && y >= drawingArea.top && y <= drawingArea.top + drawingArea.height;
+    const isInsideX = x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width;
+    const isInsideY = y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height;
+    if (options?.direction === 'x') {
+      return isInsideX;
+    }
+    if (options?.direction === 'y') {
+      return isInsideY;
+    }
+    return isInsideX && isInsideY;
   }, [drawingArea]);
   const value = React.useMemo(() => _extends({
     chartId: chartId ?? ''

package/modern/hooks/useAxisEvents.js

@@ -44,7 +44,8 @@ export const useAxisEvents = disableAxisListener => {
         const value = scale.invert(mouseValue);
         if (axisData === undefined) {
           return {
-            value
+            value,
+            index: -1
           };
         }
         const valueAsNumber = getAsANumber(value);
@@ -98,7 +99,9 @@ export const useAxisEvents = disableAxisListener => {
       const svgPoint = getSVGPoint(element, target);
       mousePosition.current.x = svgPoint.x;
       mousePosition.current.y = svgPoint.y;
-      if (!drawingArea.isPointInside(svgPoint, event.target)) {
+      if (!drawingArea.isPointInside(svgPoint, {
+        targetElement: event.target
+      })) {
         if (mousePosition.current.isInChart) {
           dispatch({
             type: 'exitChart'

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.13.0
+ * @mui/x-charts v7.15.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/domUtils.js

@@ -20,7 +20,7 @@ const SPAN_STYLE = {
   whiteSpace: 'pre'
 };
 const STYLE_LIST = ['minWidth', 'maxWidth', 'width', 'minHeight', 'maxHeight', 'height', 'top', 'left', 'fontSize', 'padding', 'margin', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom'];
-const MEASUREMENT_SPAN_ID = 'mui_measurement_span';
+export const MEASUREMENT_SPAN_ID = 'mui_measurement_span';
 
 /**
  *
@@ -57,7 +57,7 @@ function camelToMiddleLine(text) {
  * @returns CSS styling string
  */
 export const getStyleString = style => Object.keys(style).sort().reduce((result, s) => `${result}${camelToMiddleLine(s)}:${autoCompleteStyle(s, style[s])};`, '');
-
+let domCleanTimeout;
 /**
  *
  * @param text The string to estimate
@@ -105,6 +105,13 @@ export const getStringSize = (text, style = {}) => {
     } else {
       stringCache.cacheCount += 1;
     }
+    if (domCleanTimeout) {
+      clearTimeout(domCleanTimeout);
+    }
+    domCleanTimeout = setTimeout(() => {
+      // Limit node cleaning to once per render cycle
+      measurementSpan.textContent = '';
+    }, 0);
     return result;
   } catch (e) {
     return {
@@ -112,4 +119,10 @@ export const getStringSize = (text, style = {}) => {
       height: 0
     };
   }
-};
+};
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function unstable_cleanupDOM() {
+  // const measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+  // measurementSpan?.remove();
+}

package/modern/internals/index.js

@@ -20,6 +20,8 @@ export * from './configInit';
 export * from './getLabel';
 export * from './getSVGPoint';
 export * from './isDefined';
+export { unstable_cleanupDOM } from './domUtils';
+export * from './getScale';
 
 // contexts
 
@@ -29,6 +31,8 @@ export * from '../context/InteractionProvider';
 export * from '../context/SeriesProvider';
 export * from '../context/ZAxisContextProvider';
 export * from '../context/PluginProvider';
+export { getAxisExtremum } from '../context/CartesianProvider/getAxisExtremum';
+
 // series configuration
 export * from '../models/seriesType/config';
 export * from '../models/seriesType/common';

package/modern/internals/useAnimatedPath.js

@@ -1,21 +1,25 @@
 import * as React from 'react';
 import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
-import { useSpring, to } from '@react-spring/web';
+import { useSpring } from '@react-spring/web';
 function usePrevious(value) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    ref.current = value;
-  }, [value]);
+  const ref = React.useRef({
+    currentPath: value,
+    previousPath: undefined
+  });
+  if (ref.current.currentPath !== value) {
+    ref.current = {
+      currentPath: value,
+      previousPath: ref.current.currentPath
+    };
+  }
   return ref.current;
 }
-
-// Taken from Nivo
 export const useAnimatedPath = (path, skipAnimation) => {
-  const previousPath = usePrevious(path);
-  const interpolator = React.useMemo(() => previousPath ? interpolateString(previousPath, path) : () => path, [previousPath, path]);
-  const {
+  const memoryRef = usePrevious(path);
+  const interpolator = React.useMemo(() => memoryRef.previousPath ? interpolateString(memoryRef.previousPath, memoryRef.currentPath) : () => memoryRef.currentPath, [memoryRef.currentPath, memoryRef.previousPath]);
+  const [{
     value
-  } = useSpring({
+  }] = useSpring({
     from: {
       value: 0
     },
@@ -24,6 +28,6 @@ export const useAnimatedPath = (path, skipAnimation) => {
     },
     reset: true,
     immediate: skipAnimation
-  });
-  return to([value], interpolator);
+  }, [memoryRef.currentPath]);
+  return value.to(interpolator);
 };

package/modern/models/axis.js

@@ -1,3 +1,8 @@
+/**
+ * Use this type instead of `AxisScaleConfig` when the values
+ * shouldn't be provided by the user.
+ */
+
 export function isBandScaleConfig(scaleConfig) {
   return scaleConfig.scaleType === 'band';
 }

package/modern/tests/firePointerEvent.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { fireEvent } from '@mui/internal-test-utils';
+export function firePointerEvent(target, type, options) {
+  const originalGetBoundingClientRect = target.getBoundingClientRect;
+  target.getBoundingClientRect = () => ({
+    x: 0,
+    y: 0,
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    toJSON() {
+      return {
+        x: 0,
+        y: 0,
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+        width: 0
+      };
+    }
+  });
+  const event = new window.PointerEvent(type, _extends({
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+    isPrimary: true
+  }, options));
+  fireEvent(target, event);
+  target.getBoundingClientRect = originalGetBoundingClientRect;
+}