@mui/x-charts 7.6.2 → 7.7.1

package/modern/ScatterChart/useScatterChartProps.js

@@ -0,0 +1,108 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+/**
+ * A helper function that extracts ScatterChartProps from the input props
+ * and returns an object with props for the children components of ScatterChart.
+ *
+ * @param props The input props for ScatterChart
+ * @returns An object with props for the children components of ScatterChart
+ */
+export const useScatterChartProps = props => {
+  const {
+    xAxis,
+    yAxis,
+    zAxis,
+    series,
+    tooltip,
+    axisHighlight,
+    voronoiMaxRadius,
+    disableVoronoi,
+    legend,
+    width,
+    height,
+    margin,
+    colors,
+    sx,
+    grid,
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    onItemClick,
+    children,
+    slots,
+    slotProps,
+    loading,
+    highlightedItem,
+    onHighlightChange
+  } = props;
+  const chartContainerProps = {
+    series: series.map(s => _extends({
+      type: 'scatter'
+    }, s)),
+    width,
+    height,
+    margin,
+    colors,
+    xAxis,
+    yAxis,
+    sx,
+    highlightedItem,
+    onHighlightChange
+  };
+  const zAxisProps = {
+    zAxis
+  };
+  const voronoiHandlerProps = {
+    voronoiMaxRadius,
+    onItemClick: onItemClick
+  };
+  const chartsAxisProps = {
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    slots,
+    slotProps
+  };
+  const gridProps = {
+    vertical: grid?.vertical,
+    horizontal: grid?.horizontal
+  };
+  const scatterPlotProps = {
+    onItemClick: disableVoronoi ? onItemClick : undefined,
+    slots,
+    slotProps
+  };
+  const overlayProps = {
+    loading,
+    slots,
+    slotProps
+  };
+  const legendProps = _extends({}, legend, {
+    slots,
+    slotProps
+  });
+  const axisHighlightProps = _extends({
+    y: 'none',
+    x: 'none'
+  }, axisHighlight);
+  const tooltipProps = _extends({
+    trigger: 'item'
+  }, tooltip, {
+    slots,
+    slotProps
+  });
+  return {
+    chartContainerProps,
+    zAxisProps,
+    voronoiHandlerProps,
+    chartsAxisProps,
+    gridProps,
+    scatterPlotProps,
+    overlayProps,
+    legendProps,
+    axisHighlightProps,
+    tooltipProps,
+    children
+  };
+};

package/modern/SparkLineChart/SparkLineChart.js

@@ -27,6 +27,7 @@ const SPARKLINE_DEFAULT_MARGIN = {
 const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
   const {
     xAxis,
+    yAxis,
     width,
     height,
     margin = SPARKLINE_DEFAULT_MARGIN,
@@ -73,6 +74,9 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       }, (_, index) => index),
       hideTooltip: xAxis === undefined
     }, xAxis)],
+    yAxis: [_extends({
+      id: DEFAULT_X_AXIS_KEY
+    }, yAxis)],
     colors: colors,
     sx: sx,
     disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
@@ -233,7 +237,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   width: PropTypes.number,
   /**
    * The xAxis configuration.
-   * Notice it is a single configuration object, not an array of configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   xAxis: PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -282,6 +286,58 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
+  }),
+  /**
+   * The yAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  yAxis: PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    position: PropTypes.oneOf(['left', 'right']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func
   })
 } : void 0;
 export { SparkLineChart };

package/modern/context/CartesianProvider/CartesianContext.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export const CartesianContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    xAxis: {},
+    yAxis: {},
+    xAxisIds: [],
+    yAxisIds: []
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  CartesianContext.displayName = 'CartesianContext';
+}

package/modern/context/CartesianProvider/CartesianProvider.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useDrawingArea } from '../../hooks/useDrawingArea';
+import { useSeries } from '../../hooks/useSeries';
+import { CartesianContext } from './CartesianContext';
+import { normalizeAxis } from './normalizeAxis';
+import { computeValue } from './computeValue';
+import { jsx as _jsx } from "react/jsx-runtime";
+function CartesianContextProvider(props) {
+  const {
+    xAxis: inXAxis,
+    yAxis: inYAxis,
+    dataset,
+    xExtremumGetters,
+    yExtremumGetters,
+    children
+  } = props;
+  const formattedSeries = useSeries();
+  const drawingArea = useDrawingArea();
+  const xAxis = React.useMemo(() => normalizeAxis(inXAxis, dataset, 'x'), [inXAxis, dataset]);
+  const yAxis = React.useMemo(() => normalizeAxis(inYAxis, dataset, 'y'), [inYAxis, dataset]);
+  const xValues = React.useMemo(() => computeValue(drawingArea, formattedSeries, xAxis, xExtremumGetters, 'x'), [drawingArea, formattedSeries, xAxis, xExtremumGetters]);
+  const yValues = React.useMemo(() => computeValue(drawingArea, formattedSeries, yAxis, yExtremumGetters, 'y'), [drawingArea, formattedSeries, yAxis, yExtremumGetters]);
+  const value = React.useMemo(() => ({
+    isInitialized: true,
+    data: {
+      xAxis: xValues.axis,
+      yAxis: yValues.axis,
+      xAxisIds: xValues.axisIds,
+      yAxisIds: yValues.axisIds
+    }
+  }), [xValues, yValues]);
+  return /*#__PURE__*/_jsx(CartesianContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+export { CartesianContextProvider };

package/modern/context/CartesianProvider/computeValue.js

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { scaleBand, scalePoint } from 'd3-scale';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../../constants';
+import { isBandScaleConfig, isPointScaleConfig } from '../../models/axis';
+import { getColorScale, getOrdinalColorScale } from '../../internals/colorScale';
+import { getTickNumber } from '../../hooks/useTicks';
+import { getScale } from '../../internals/getScale';
+import { getAxisExtremum } from './getAxisExtremum';
+const getRange = (drawingArea, axisName, isReverse) => {
+  const range = axisName === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
+  return isReverse ? range.reverse() : range;
+};
+const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
+const DEFAULT_BAR_GAP_RATIO = 0.1;
+export function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName) {
+  const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
+  const allAxis = [...(inAxis?.map((axis, index) => _extends({
+    id: `defaultized-${axisName}-axis-${index}`
+  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
+    id
+  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
+    id: DEFAULT_AXIS_KEY,
+    scaleType: 'linear'
+  }] : [])];
+  const completeAxis = {};
+  allAxis.forEach((axis, axisIndex) => {
+    const isDefaultAxis = axisIndex === 0;
+    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, isDefaultAxis, formattedSeries);
+    const range = getRange(drawingArea, axisName, axis.reverse);
+    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 = axisName === 'x' ? range : [range[1], range[0]];
+      completeAxis[axis.id] = _extends({
+        categoryGapRatio,
+        barGapRatio
+      }, axis, {
+        scale: scaleBand(axis.data, scaleRange).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
+        tickNumber: axis.data.length,
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+          values: axis.data
+        }, axis.colorMap)) : getColorScale(axis.colorMap))
+      });
+    }
+    if (isPointScaleConfig(axis)) {
+      const scaleRange = axisName === 'x' ? range : [...range].reverse();
+      completeAxis[axis.id] = _extends({}, axis, {
+        scale: scalePoint(axis.data, scaleRange),
+        tickNumber: axis.data.length,
+        colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
+          values: axis.data
+        }, axis.colorMap)) : getColorScale(axis.colorMap))
+      });
+    }
+    if (axis.scaleType === 'band' || axis.scaleType === 'point') {
+      // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
+      return;
+    }
+    const scaleType = axis.scaleType ?? 'linear';
+    const extremums = [axis.min ?? minData, axis.max ?? maxData];
+    const tickNumber = getTickNumber(_extends({}, axis, {
+      range,
+      domain: extremums
+    }));
+    const scale = getScale(scaleType, extremums, range).nice(tickNumber);
+    const [minDomain, maxDomain] = scale.domain();
+    const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
+    completeAxis[axis.id] = _extends({}, axis, {
+      scaleType: scaleType,
+      scale: scale.domain(domain),
+      tickNumber,
+      colorScale: axis.colorMap && getColorScale(axis.colorMap)
+    });
+  });
+  return {
+    axis: completeAxis,
+    axisIds: allAxis.map(({
+      id
+    }) => id)
+  };
+}

package/modern/context/CartesianProvider/getAxisExtremum.js

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

package/modern/context/CartesianProvider/index.js

@@ -0,0 +1,10 @@
+import { computeValue } from './computeValue';
+import { normalizeAxis } from './normalizeAxis';
+export * from './CartesianProvider';
+export * from './CartesianContext';
+export * from './useCartesianContext';
+const cartesianProviderUtils = {
+  computeValue,
+  normalizeAxis
+};
+export { cartesianProviderUtils };

package/modern/context/CartesianProvider/normalizeAxis.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export const normalizeAxis = (axis, dataset, axisName) => {
+  return axis?.map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw Error(`MUI X Charts: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+    }
+    return _extends({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  });
+};

package/modern/context/CartesianProvider/useCartesianContext.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { CartesianContext } from './CartesianContext';
+export const useCartesianContext = () => {
+  const {
+    data
+  } = React.useContext(CartesianContext);
+  return data;
+};

package/modern/context/ColorProvider.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ColorContext = /*#__PURE__*/React.createContext({});
+if (process.env.NODE_ENV !== 'production') {
+  ColorContext.displayName = 'ColorContext';
+}
+export function ColorProvider(props) {
+  const {
+    colorProcessors,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(ColorContext.Provider, {
+    value: colorProcessors,
+    children: children
+  });
+}

package/modern/hooks/index.js

@@ -1,5 +1,6 @@
 export * from './useDrawingArea';
 export * from './useChartId';
 export * from './useScale';
+export * from './useColorScale';
 export * from './useSvgRef';
 export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from './useSeries';

package/modern/hooks/useAxisEvents.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { isBandScale } from '../internals/isBandScale';
 import { getSVGPoint } from '../internals/utils';
 import { useSvgRef } from './useSvgRef';
@@ -21,7 +21,7 @@ export const useAxisEvents = disableAxisListener => {
     yAxis,
     xAxisIds,
     yAxisIds
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   const {
     dispatch
   } = React.useContext(InteractionContext);

package/modern/hooks/useColor.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ColorContext } from '../context/ColorProvider';
+export function useColorProcessor(seriesType) {
+  const colorProcessors = React.useContext(ColorContext);
+  if (!seriesType) {
+    return colorProcessors;
+  }
+  return colorProcessors[seriesType];
+}

package/modern/hooks/useColorScale.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useCartesianContext } from '../context/CartesianProvider';
+import { ZAxisContext } from '../context/ZAxisContextProvider';
+export function useXColorScale(identifier) {
+  const {
+    xAxis,
+    xAxisIds
+  } = useCartesianContext();
+  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
+  return xAxis[id].colorScale;
+}
+export function useYColorScale(identifier) {
+  const {
+    yAxis,
+    yAxisIds
+  } = useCartesianContext();
+  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
+  return yAxis[id].colorScale;
+}
+export function useZColorScale(identifier) {
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(ZAxisContext);
+  const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
+  return zAxis[id]?.colorScale;
+}

package/modern/hooks/useReducedMotion.js

@@ -11,6 +11,13 @@ export const useReducedMotion = () => {
   // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13
 
   useIsomorphicLayoutEffect(() => {
+    if (!window.matchMedia) {
+      // skip animation in environments where `window.matchMedia` would not be available (i.e. test/jsdom)
+      Globals.assign({
+        skipAnimation: true
+      });
+      return () => {};
+    }
     const mql = window.matchMedia('(prefers-reduced-motion)');
     const handleMediaChange = e => {
       Globals.assign({

package/modern/hooks/useScale.js

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { CartesianContext } from '../context/CartesianContextProvider';
+import { useCartesianContext } from '../context/CartesianProvider';
 import { isBandScale } from '../internals/isBandScale';
 /**
  * For a given scale return a function that map value to their position.
@@ -17,7 +16,7 @@ export function useXScale(identifier) {
   const {
     xAxis,
     xAxisIds
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id].scale;
 }
@@ -25,7 +24,7 @@ export function useYScale(identifier) {
   const {
     yAxis,
     yAxisIds
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id].scale;
 }

package/modern/index.js

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

package/modern/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CartesianContext } from '../../../context/CartesianContextProvider';
+import { useCartesianContext } from '../../../context/CartesianProvider';
 import { DrawingContext } from '../../../context/DrawingProvider';
 import { useDrawingArea } from '../../../hooks';
 import ChartsPiecewiseGradient from './ChartsPiecewiseGradient';
@@ -28,7 +28,7 @@ export function ChartsAxesGradients() {
     xAxis,
     yAxisIds,
     yAxis
-  } = React.useContext(CartesianContext);
+  } = useCartesianContext();
   return /*#__PURE__*/_jsxs("defs", {
     children: [yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined).map(axisId => {
       const gradientId = getGradientId(axisId, 'y');

package/modern/internals/index.js

@@ -1 +1,31 @@
-export * from './configInit';
+// Components
+export * from './components/ChartsAxesGradients';
+export * from '../ResponsiveChartContainer/useChartContainerDimensions';
+export * from '../ResponsiveChartContainer/ResizableContainer';
+
+// hooks
+export { useReducedMotion } from '../hooks/useReducedMotion';
+export { useSeries } from '../hooks/useSeries';
+export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
+export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
+export { useLineChartProps } from '../LineChart/useLineChartProps';
+export { useBarChartProps } from '../BarChart/useBarChartProps';
+
+// utils
+export * from './defaultizeValueFormatter';
+export * from './configInit';
+
+// contexts
+
+export * from '../context/CartesianProvider';
+export * from '../context/DrawingProvider';
+export * from '../context/ColorProvider';
+export * from '../context/InteractionProvider';
+export * from '../context/SeriesContextProvider';
+export * from '../context/ZAxisContextProvider';
+// series configuration
+export * from '../models/seriesType/config';
+export * from '../models/seriesType/common';
+export * from '../models/helpers';
+export * from '../models/z-axis';
+export * from '../models/axis';

package/modern/internals/warning.js

@@ -0,0 +1,13 @@
+export function buildWarning(message, gravity = 'warning') {
+  let alreadyWarned = false;
+  return (...args) => {
+    if (!alreadyWarned) {
+      alreadyWarned = true;
+      if (gravity === 'error') {
+        console.error(message(...args));
+      } else {
+        console.warn(message(...args));
+      }
+    }
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.6.2",
+  "version": "7.7.1",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -29,10 +29,10 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
+    "@babel/runtime": "^7.24.7",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.15.15",
-    "@mui/utils": "^5.15.14",
+    "@mui/system": "^5.15.20",
+    "@mui/utils": "^5.15.20",
     "@react-spring/rafz": "^9.7.3",
     "@react-spring/web": "^9.7.3",
     "clsx": "^2.1.1",