@mui/x-charts 7.22.3 → 8.0.0-alpha.1

package/modern/hooks/useAxisEvents.js

@@ -1,12 +1,13 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { InteractionContext } from "../context/InteractionProvider.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { getSVGPoint } from "../internals/getSVGPoint.js";
 import { useSvgRef } from "./useSvgRef.js";
 import { useDrawingArea } from "./useDrawingArea.js";
+import { useStore } from "../internals/useStore.js";
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }
@@ -19,9 +20,7 @@ export const useAxisEvents = disableAxisListener => {
     xAxisIds,
     yAxisIds
   } = useCartesianContext();
-  const {
-    dispatch
-  } = React.useContext(InteractionContext);
+  const store = useStore(disableAxisListener);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
 
@@ -33,7 +32,7 @@ export const useAxisEvents = disableAxisListener => {
   });
   React.useEffect(() => {
     const element = svgRef.current;
-    if (element === null || disableAxisListener) {
+    if (element === null || disableAxisListener || !store) {
       return () => {};
     }
     function getNewAxisState(axisConfig, mouseValue) {
@@ -92,9 +91,15 @@ export const useAxisEvents = disableAxisListener => {
         x: -1,
         y: -1
       };
-      dispatch({
-        type: 'exitChart'
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: {
+          item: null,
+          axis: {
+            x: null,
+            y: null
+          }
+        }
+      }));
     };
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
@@ -105,9 +110,15 @@ export const useAxisEvents = disableAxisListener => {
         targetElement: event.target
       })) {
         if (mousePosition.current.isInChart) {
-          dispatch({
-            type: 'exitChart'
-          });
+          store.update(prev => _extends({}, prev, {
+            interaction: {
+              item: null,
+              axis: {
+                x: null,
+                y: null
+              }
+            }
+          }));
           mousePosition.current.isInChart = false;
         }
         return;
@@ -115,13 +126,15 @@ export const useAxisEvents = disableAxisListener => {
       mousePosition.current.isInChart = true;
       const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
       const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
-      dispatch({
-        type: 'updateAxis',
-        data: {
-          x: newStateX,
-          y: newStateY
-        }
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          axis: _extends({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
+            x: newStateX
+          } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
+            y: newStateY
+          } : {})
+        })
+      }));
     };
     const handleDown = event => {
       const target = event.currentTarget;
@@ -144,5 +157,5 @@ export const useAxisEvents = disableAxisListener => {
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
-  }, [svgRef, dispatch, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
+  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
 };

package/modern/hooks/useChartId.js

@@ -1,10 +1,10 @@
 'use client';
 
 import * as React from 'react';
-import { DrawingContext } from "../context/DrawingProvider.js";
+import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
 export function useChartId() {
   const {
     chartId
-  } = React.useContext(DrawingContext);
+  } = React.useContext(DrawingAreaContext);
   return React.useMemo(() => chartId, [chartId]);
 }

package/modern/hooks/useDrawingArea.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { DrawingContext } from "../context/DrawingProvider.js";
+import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
 export function useDrawingArea() {
   const {
     left,
@@ -11,7 +11,7 @@ export function useDrawingArea() {
     bottom,
     right,
     isPointInside
-  } = React.useContext(DrawingContext);
+  } = React.useContext(DrawingAreaContext);
   return React.useMemo(() => ({
     left,
     top,

package/modern/hooks/useInteractionItemProps.js

@@ -1,12 +1,10 @@
 'use client';
 
-import * as React from 'react';
-import { InteractionContext } from "../context/InteractionProvider.js";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { useHighlighted } from "../context/index.js";
+import { useStore } from "../internals/useStore.js";
 export const useInteractionItemProps = skip => {
-  const {
-    dispatch: dispatchInteraction
-  } = React.useContext(InteractionContext);
+  const store = useStore();
   const {
     setHighlighted,
     clearHighlighted
@@ -21,10 +19,11 @@ export const useInteractionItemProps = skip => {
       }
     };
     const onPointerEnter = () => {
-      dispatchInteraction({
-        type: 'enterItem',
-        data
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          item: data
+        })
+      }));
       setHighlighted({
         seriesId: data.seriesId,
         dataIndex: data.dataIndex
@@ -32,9 +31,17 @@ export const useInteractionItemProps = skip => {
     };
     const onPointerLeave = event => {
       event.currentTarget.releasePointerCapture(event.pointerId);
-      dispatchInteraction({
-        type: 'leaveItem',
-        data
+      store.update(prev => {
+        const prevItem = prev.interaction.item;
+        if (prevItem === null || Object.keys(data).some(key => data[key] !== prevItem[key])) {
+          // The item is already something else, no need to clean it.
+          return prev;
+        }
+        return _extends({}, prev, {
+          interaction: _extends({}, prev.interaction, {
+            item: null
+          })
+        });
       });
       clearHighlighted();
     };

package/modern/hooks/useSvgRef.js

@@ -1,14 +1,14 @@
 'use client';
 
 import * as React from 'react';
-import { SvgContext } from "../context/DrawingProvider.js";
+import { SvgRefContext } from "../context/SvgRefProvider/index.js";
 export function useSvgRef() {
   const {
     isInitialized,
     data
-  } = React.useContext(SvgContext);
+  } = React.useContext(SvgRefContext);
   if (!isInitialized) {
     throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return data;
+  return data.svgRef;
 }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.22.3
+ * @mui/x-charts v8.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -28,6 +28,5 @@ export * from "./PieChart/index.js";
 export * from "./ScatterChart/index.js";
 export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
-export * from "./ChartContainer/index.js";
 export * from "./ChartsSurface/index.js";
-export * from "./ResponsiveChartContainer/index.js";
+export * from "./ChartContainer/index.js";

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useCartesianContext } from "../../../context/CartesianProvider/index.js";
-import { DrawingContext } from "../../../context/DrawingProvider.js";
+import { DrawingAreaContext } from "../../../context/DrawingAreaProvider/index.js";
 import { useDrawingArea } from "../../../hooks/index.js";
 import ChartsPiecewiseGradient from "./ChartsPiecewiseGradient.js";
 import ChartsContinuousGradient from "./ChartsContinuousGradient.js";
@@ -8,7 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function useChartGradient() {
   const {
     chartId
-  } = React.useContext(DrawingContext);
+  } = React.useContext(DrawingAreaContext);
   return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
 export function ChartsAxesGradients() {
@@ -29,8 +29,13 @@ export function ChartsAxesGradients() {
     yAxisIds,
     yAxis
   } = useCartesianContext();
+  const filteredYAxisIds = yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined);
+  const filteredXAxisIds = xAxisIds.filter(axisId => xAxis[axisId].colorMap !== undefined);
+  if (filteredYAxisIds.length === 0 && filteredXAxisIds.length === 0) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs("defs", {
-    children: [yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined).map(axisId => {
+    children: [filteredYAxisIds.map(axisId => {
       const gradientId = getGradientId(axisId, 'y');
       const {
         colorMap,
@@ -60,7 +65,7 @@ export function ChartsAxesGradients() {
         }, gradientId);
       }
       return null;
-    }), xAxisIds.filter(axisId => xAxis[axisId].colorMap !== undefined).map(axisId => {
+    }), filteredXAxisIds.map(axisId => {
       const gradientId = getGradientId(axisId, 'x');
       const {
         colorMap,

package/modern/internals/getSymbol.js

@@ -1,5 +1,21 @@
-// Returns the index of a defined shape
 export function getSymbol(shape) {
-  const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
-  return symbolNames.indexOf(shape) || 0;
+  // prettier-ignore
+  switch (shape) {
+    case 'circle':
+      return 0;
+    case 'cross':
+      return 1;
+    case 'diamond':
+      return 2;
+    case 'square':
+      return 3;
+    case 'star':
+      return 4;
+    case 'triangle':
+      return 5;
+    case 'wye':
+      return 6;
+    default:
+      return 0;
+  }
 }

package/modern/internals/index.js

@@ -1,7 +1,6 @@
 // Components
 export * from "./components/ChartsAxesGradients/index.js";
-export * from "../ResponsiveChartContainer/useChartContainerDimensions.js";
-export * from "../ResponsiveChartContainer/ResizableContainer.js";
+export * from "../ChartContainer/ResizableContainer.js";
 
 // hooks
 export { useSeries } from "../hooks/useSeries.js";
@@ -10,8 +9,8 @@ export { useDrawingArea } from "../hooks/useDrawingArea.js";
 export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
 export { useBarChartProps } from "../BarChart/useBarChartProps.js";
-export { useResponsiveChartContainerProps } from "../ResponsiveChartContainer/useResponsiveChartContainerProps.js";
-export { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
+export * from "../ChartContainer/useChartContainerProps.js";
+export * from "../context/ChartDataProvider/useChartDataProviderProps.js";
 
 // utils
 export * from "./defaultizeValueFormatter.js";
@@ -26,17 +25,19 @@ export * from "./computeAxisValue.js";
 // contexts
 
 export * from "../context/CartesianProvider/index.js";
-export * from "../context/DrawingProvider.js";
+export * from "../context/DrawingAreaProvider/index.js";
 export * from "../context/InteractionProvider.js";
 export * from "../context/SeriesProvider/index.js";
 export * from "../context/ZAxisContextProvider.js";
 export * from "../context/PluginProvider/index.js";
 export * from "../context/AnimationProvider/index.js";
 export { getAxisExtremum } from "../context/CartesianProvider/getAxisExtremum.js";
+export * from "../context/ChartDataProvider/index.js";
+export * from "../context/SizeProvider/index.js";
+export * from "../context/SvgRefProvider/index.js";
 
 // series configuration
 export * from "../models/seriesType/config.js";
 export * from "../models/seriesType/common.js";
-export * from "../models/helpers.js";
 export * from "../models/z-axis.js";
 export * from "../models/axis.js";

package/modern/internals/plugins/models/index.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/utils/ChartStore.js

@@ -0,0 +1,26 @@
+// For now this is fixed. Will need to support generic if we add plugins
+
+export class ChartStore {
+  constructor(value) {
+    this.value = void 0;
+    this.listeners = void 0;
+    this.subscribe = fn => {
+      this.listeners.add(fn);
+      return () => {
+        this.listeners.delete(fn);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.value;
+    };
+    this.update = updater => {
+      const newState = updater(this.value);
+      if (newState !== this.value) {
+        this.value = newState;
+        this.listeners.forEach(l => l(newState));
+      }
+    };
+    this.value = value;
+    this.listeners = new Set();
+  }
+}

package/modern/internals/plugins/utils/ChartsStore.js

@@ -0,0 +1,26 @@
+// For now this is fixed. Will need to support generic if we add plugins
+
+export class ChartsStore {
+  constructor(value) {
+    this.value = void 0;
+    this.listeners = void 0;
+    this.subscribe = fn => {
+      this.listeners.add(fn);
+      return () => {
+        this.listeners.delete(fn);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.value;
+    };
+    this.update = updater => {
+      const newState = updater(this.value);
+      if (newState !== this.value) {
+        this.value = newState;
+        this.listeners.forEach(l => l(newState));
+      }
+    };
+    this.value = value;
+    this.listeners = new Set();
+  }
+}

package/modern/internals/plugins/utils/selectors.js

@@ -0,0 +1,37 @@
+import { lruMemoize, createSelectorCreator } from 'reselect';
+const reselectCreateSelector = createSelectorCreator({
+  memoize: lruMemoize,
+  memoizeOptions: {
+    maxSize: 1,
+    equalityCheck: Object.is
+  }
+});
+const cache = new WeakMap();
+/**
+ * Method wrapping reselect's createSelector to provide caching for chart instances.
+ *
+ */
+export const createSelector = (...createSelectorArgs) => {
+  const selector = (state, selectorArgs) => {
+    const cacheKey = state.cacheKey;
+
+    // If there is no cache for the current chart instance, create one.
+    let cacheForCurrentChartInstance = cache.get(cacheKey);
+    if (!cacheForCurrentChartInstance) {
+      cacheForCurrentChartInstance = new Map();
+      cache.set(cacheKey, cacheForCurrentChartInstance);
+    }
+
+    // If there is a cached selector, execute it.
+    const cachedSelector = cacheForCurrentChartInstance.get(createSelectorArgs);
+    if (cachedSelector) {
+      return cachedSelector(state, selectorArgs);
+    }
+
+    // Otherwise, create a new selector and cache it and execute it.
+    const fn = reselectCreateSelector(...createSelectorArgs);
+    cacheForCurrentChartInstance.set(createSelectorArgs, fn);
+    return fn(state, selectorArgs);
+  };
+  return selector;
+};

package/modern/internals/useCharts.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { ChartStore } from "./plugins/utils/ChartStore.js";
+let globalId = 0;
+export function useCharts() {
+  const storeRef = React.useRef(null);
+  if (storeRef.current == null) {
+    // eslint-disable-next-line react-compiler/react-compiler
+    globalId += 1;
+    const initialState = {
+      interaction: {
+        item: null,
+        axis: {
+          x: null,
+          y: null
+        }
+      },
+      cacheKey: {
+        id: globalId
+      }
+    };
+    storeRef.current = new ChartStore(initialState);
+  }
+  const contextValue = React.useMemo(() => ({
+    store: storeRef.current
+  }), []);
+  return {
+    contextValue
+  };
+}

package/modern/internals/useSelector.js

@@ -0,0 +1,6 @@
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
+const defaultCompare = Object.is;
+export const useSelector = (store, selector, args = undefined, equals = defaultCompare) => {
+  const selectorWithArgs = state => selector(state, args);
+  return useSyncExternalStoreWithSelector(store.subscribe, store.getSnapshot, store.getSnapshot, selectorWithArgs, equals);
+};

package/modern/internals/useStore.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ChartsContext } from "../context/InteractionProvider.js";
+export function useStore(skipError) {
+  const charts = React.useContext(ChartsContext);
+  if (skipError) {
+    // TODO: Remove once store is used by all charts.
+    // This line is only for `useAxisEvents` which is in the surface of the Gauge.
+    // But the Gauge don't have store yet because it does not need the interaction provider.
+    // Will be fixed when every thing move to the store since every component will have access to it.
+    // @ts-ignore
+    return charts?.store;
+  }
+  if (!charts) {
+    throw new Error(['MUI X: Could not find the charts context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  return charts.store;
+}

package/modern/internals/useStringInterpolator.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-compiler/react-compiler */
 import * as React from 'react';
 import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
 function usePrevious(value) {

package/node/BarChart/AnimatedBarElement.js

@@ -0,0 +1,28 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnimatedBarElement = AnimatedBarElement;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _web = require("@react-spring/web");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ownerState"];
+/**
+ * @ignore - internal component.
+ */
+function AnimatedBarElement(props) {
+  const {
+      ownerState
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, (0, _extends2.default)({}, other, {
+    filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: ownerState.isFaded ? 0.3 : 1
+  }));
+}

package/node/BarChart/BarChart.js

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _BarPlot = require("./BarPlot");
-var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
+var _ChartContainer = require("../ChartContainer");
 var _ChartsAxis = require("../ChartsAxis");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
@@ -50,15 +50,15 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     chartsAxisProps,
     axisHighlightProps,
     legendProps,
-    tooltipProps,
     children
   } = (0, _useBarChartProps.useBarChartProps)(props);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, (0, _extends2.default)({
+  const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainer.ChartContainer, (0, _extends2.default)({
     ref: ref
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
@@ -70,7 +70,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
    * Depends on `layout` prop.
-   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
    */
   axisHighlight: _propTypes.default.shape({
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
@@ -123,6 +123,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend: _propTypes.default.bool,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -141,32 +145,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
-  /**
-   * @deprecated Consider using `slotProps.legend` instead.
-   */
-  legend: _propTypes.default.shape({
-    classes: _propTypes.default.object,
-    direction: _propTypes.default.oneOf(['column', 'row']),
-    hidden: _propTypes.default.bool,
-    itemGap: _propTypes.default.number,
-    itemMarkHeight: _propTypes.default.number,
-    itemMarkWidth: _propTypes.default.number,
-    labelStyle: _propTypes.default.object,
-    markGap: _propTypes.default.number,
-    onItemClick: _propTypes.default.func,
-    padding: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
-      bottom: _propTypes.default.number,
-      left: _propTypes.default.number,
-      right: _propTypes.default.number,
-      top: _propTypes.default.number
-    })]),
-    position: _propTypes.default.shape({
-      horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
-      vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
-    }),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object
-  }),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -203,16 +181,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: _propTypes.default.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: _propTypes.default.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -241,30 +209,12 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   title: _propTypes.default.string,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   */
-  tooltip: _propTypes.default.shape({
-    axisContent: _propTypes.default.elementType,
-    classes: _propTypes.default.object,
-    itemContent: _propTypes.default.elementType,
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
-  }),
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
-  viewBox: _propTypes.default.shape({
-    height: _propTypes.default.number,
-    width: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */