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

package/modern/context/ChartDataProvider/ChartDataProvider.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DrawingAreaProvider } from "../DrawingAreaProvider/index.js";
 import { SeriesProvider } from "../SeriesProvider/index.js";
-import { InteractionProvider } from "../InteractionProvider.js";
 import { CartesianProvider } from "../CartesianProvider/index.js";
 import { PluginProvider } from "../PluginProvider/index.js";
 import { useChartDataProviderProps } from "./useChartDataProviderProps.js";
@@ -13,8 +12,35 @@ import { AnimationProvider } from "../AnimationProvider/index.js";
 import { ZAxisContextProvider } from "../ZAxisContextProvider.js";
 import { HighlightedProvider } from "../HighlightedProvider/index.js";
 import { SizeProvider } from "../SizeProvider/index.js";
-import { SvgRefProvider } from "../SvgRefProvider/index.js";
+import { ChartProvider } from "../ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Orchestrates the data providers for the chart components and hooks.
+ *
+ * Use this component if you have custom HTML components that need to access the chart data.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartDataProvider API](https://mui.com/x/api/charts/chart-data-provider/)
+ *
+ * @example
+ * ```jsx
+ * <ChartDataProvider
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *   <ChartsSurface>
+ *      <BarPlot />
+ *      <ChartsXAxis position="bottom" axisId="x-axis" />
+ *   </ChartsSurface>
+ *   {'Custom Legend Component'}
+ * </ChartDataProvider>
+ * ```
+ */
 function ChartDataProvider(props) {
   const {
     children,
@@ -27,27 +53,25 @@ function ChartDataProvider(props) {
     animationProviderProps,
     sizeProviderProps
   } = useChartDataProviderProps(props);
-  return /*#__PURE__*/_jsx(SizeProvider, _extends({}, sizeProviderProps, {
-    children: /*#__PURE__*/_jsx(DrawingAreaProvider, _extends({}, drawingAreaProviderProps, {
-      children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
-        children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
-          children: /*#__PURE__*/_jsx(CartesianProvider, _extends({}, cartesianProviderProps, {
-            children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
-              children: /*#__PURE__*/_jsx(InteractionProvider, {
+  return /*#__PURE__*/_jsx(ChartProvider, {
+    children: /*#__PURE__*/_jsx(SizeProvider, _extends({}, sizeProviderProps, {
+      children: /*#__PURE__*/_jsx(DrawingAreaProvider, _extends({}, drawingAreaProviderProps, {
+        children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
+          children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
+            children: /*#__PURE__*/_jsx(CartesianProvider, _extends({}, cartesianProviderProps, {
+              children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
                 children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
                   children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
-                    children: /*#__PURE__*/_jsx(SvgRefProvider, {
-                      children: children
-                    })
+                    children: children
                   }))
                 }))
-              })
+              }))
             }))
           }))
         }))
       }))
     }))
-  }));
+  });
 }
 process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -144,7 +168,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     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]),
@@ -155,7 +178,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    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']),
@@ -198,7 +220,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     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]),
@@ -209,7 +230,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     slots: PropTypes.object,
     stroke: PropTypes.string,
     sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    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']),

package/modern/context/ChartProvider/ChartContext.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+export const ChartContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+  ChartContext.displayName = 'ChartContext';
+}

package/modern/context/ChartProvider/ChartProvider.js

@@ -0,0 +1,19 @@
+'use client';
+
+import * as React from 'react';
+import { useCharts } from "../../internals/store/useCharts.js";
+import { ChartContext } from "./ChartContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ChartProvider(props) {
+  const {
+    children
+  } = props;
+  const {
+    contextValue
+  } = useCharts([], {});
+  return /*#__PURE__*/_jsx(ChartContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+export { ChartProvider };

package/modern/context/ChartProvider/ChartProvider.types.js

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

package/modern/context/ChartProvider/index.js

@@ -0,0 +1,3 @@
+export * from "./ChartProvider.js";
+export * from "./ChartProvider.types.js";
+export * from "./useChartContext.js";

package/modern/context/ChartProvider/useChartContext.js

@@ -0,0 +1,11 @@
+'use client';
+
+import * as React from 'react';
+import { ChartContext } from "./ChartContext.js";
+export const useChartContext = () => {
+  const context = React.useContext(ChartContext);
+  if (context == null) {
+    throw new Error(['MUI X: Could not find the Chart context.', 'It looks like you rendered your component outside of a ChartDataProvider.', 'This can also happen if you are bundling multiple versions of the library.'].join('\n'));
+  }
+  return context;
+};

package/modern/context/DrawingAreaProvider/DrawingAreaContext.js

@@ -8,7 +8,6 @@ export const DrawingAreaContext = /*#__PURE__*/React.createContext({
   right: 0,
   height: 300,
   width: 400,
-  chartId: '',
   isPointInside: () => false
 });
 if (process.env.NODE_ENV !== 'production') {

package/modern/context/SizeProvider/SizeContext.js

@@ -3,7 +3,9 @@ export const SizeContext = /*#__PURE__*/React.createContext({
   isInitialized: false,
   data: {
     hasIntrinsicSize: false,
-    containerRef: null,
+    svgRef: {
+      current: null
+    },
     height: 0,
     width: 0
   }

package/modern/context/SizeProvider/useChartContainerDimensions.js

@@ -20,6 +20,10 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
   const computeSize = React.useCallback(() => {
     const mainEl = rootRef?.current;
     if (!mainEl) {
+      if (process.env.NODE_ENV !== 'production') {
+        // This is mostly for internal use.
+        throw new Error([`MUI X: ChartContainer does not have a valid reference to the <svg /> element.`, 'This may be caused by a ref forwarding issue.', 'Make sure that the ref from SizedProvider is forwarded correctly.'].join('\n'));
+      }
       return {};
     }
     const win = ownerWindow(mainEl);
@@ -94,7 +98,7 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
   const finalWidth = inWidth ?? width;
   const finalHeight = inHeight ?? height;
   return {
-    containerRef: rootRef,
+    svgRef: rootRef,
     width: finalWidth,
     height: finalHeight,
     hasIntrinsicSize: finalWidth > 0 && finalHeight > 0,

package/modern/hooks/useAxisEvents.js

@@ -7,7 +7,7 @@ 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";
+import { useStore } from "../internals/store/useStore.js";
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }

package/modern/hooks/useChartId.js

@@ -1,10 +1,9 @@
 'use client';
 
-import * as React from 'react';
-import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartId } from "../internals/plugins/corePlugins/useChartId/useChartId.selectors.js";
 export function useChartId() {
-  const {
-    chartId
-  } = React.useContext(DrawingAreaContext);
-  return React.useMemo(() => chartId, [chartId]);
+  const store = useStore();
+  return useSelector(store, selectorChartId);
 }

package/modern/hooks/useInteractionItemProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useHighlighted } from "../context/index.js";
-import { useStore } from "../internals/useStore.js";
+import { useStore } from "../internals/store/useStore.js";
 export const useInteractionItemProps = skip => {
   const store = useStore();
   const {
@@ -30,7 +30,9 @@ export const useInteractionItemProps = skip => {
       });
     };
     const onPointerLeave = event => {
-      event.currentTarget.releasePointerCapture(event.pointerId);
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
       store.update(prev => {
         const prevItem = prev.interaction.item;
         if (prevItem === null || Object.keys(data).some(key => data[key] !== prevItem[key])) {

package/modern/hooks/useSvgRef.js

@@ -1,14 +1,10 @@
 'use client';
 
-import * as React from 'react';
-import { SvgRefContext } from "../context/SvgRefProvider/index.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 export function useSvgRef() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(SvgRefContext);
-  if (!isInitialized) {
+  const context = useChartContext();
+  if (!context) {
     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.svgRef;
+  return context.svgRef;
 }

package/modern/index.js

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

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

@@ -1,14 +1,11 @@
 import * as React from 'react';
 import { useCartesianContext } from "../../../context/CartesianProvider/index.js";
-import { DrawingAreaContext } from "../../../context/DrawingAreaProvider/index.js";
-import { useDrawingArea } from "../../../hooks/index.js";
+import { useChartId, useDrawingArea } from "../../../hooks/index.js";
 import ChartsPiecewiseGradient from "./ChartsPiecewiseGradient.js";
 import ChartsContinuousGradient from "./ChartsContinuousGradient.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function useChartGradient() {
-  const {
-    chartId
-  } = React.useContext(DrawingAreaContext);
+  const chartId = useChartId();
   return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
 export function ChartsAxesGradients() {

package/modern/internals/index.js

@@ -1,6 +1,5 @@
 // Components
 export * from "./components/ChartsAxesGradients/index.js";
-export * from "../ChartContainer/ResizableContainer.js";
 
 // hooks
 export { useSeries } from "../hooks/useSeries.js";
@@ -26,7 +25,6 @@ export * from "./computeAxisValue.js";
 
 export * from "../context/CartesianProvider/index.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";
@@ -34,7 +32,7 @@ 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";
+export * from "../context/ChartProvider/index.js";
 
 // series configuration
 export * from "../models/seriesType/config.js";

package/modern/internals/plugins/allPlugins.js

@@ -0,0 +1,3 @@
+// This file should be removed after creating all plugins  in favor of a file per chart type.
+import { useChartInteraction } from "./featurePlugins/useChartInteraction/index.js";
+export const ALL_PLUGINS = [useChartInteraction];

package/modern/internals/plugins/corePlugins/corePlugins.js

@@ -0,0 +1,7 @@
+import { useChartId } from "./useChartId/index.js";
+
+/**
+ * Internal plugins that create the tools used by the other plugins.
+ * These plugins are used by the Charts components.
+ */
+export const CHART_CORE_PLUGINS = [useChartId];

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

@@ -0,0 +1 @@
+export { CHART_CORE_PLUGINS } from "./corePlugins.js";

package/modern/internals/plugins/corePlugins/useChartId/index.js

@@ -0,0 +1 @@
+export { useChartId } from "./useChartId.js";

package/modern/internals/plugins/corePlugins/useChartId/useChartId.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { createChartDefaultId } from "./useChartId.utils.js";
+export const useChartId = ({
+  params,
+  store
+}) => {
+  React.useEffect(() => {
+    store.update(prevState => {
+      if (params.id === prevState.id.providedChartId && prevState.id.chartId !== undefined) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        id: _extends({}, prevState.id, {
+          chartId: params.id ?? createChartDefaultId()
+        })
+      });
+    });
+  }, [store, params.id]);
+  return {};
+};
+useChartId.params = {
+  id: true
+};
+useChartId.getInitialState = ({
+  id
+}) => ({
+  id: {
+    chartId: createChartDefaultId(),
+    providedChartId: id
+  }
+});

package/modern/internals/plugins/corePlugins/useChartId/useChartId.selectors.js

@@ -0,0 +1,9 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectorChartIdState = state => state.id;
+
+/**
+ * Get the id attribute of the chart.
+ * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
+ * @returns {string} The id attribute of the chart.
+ */
+export const selectorChartId = createSelector(selectorChartIdState, idState => idState.chartId);

package/modern/internals/plugins/corePlugins/useChartId/useChartId.types.js

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

package/modern/internals/plugins/corePlugins/useChartId/useChartId.utils.js

@@ -0,0 +1,5 @@
+let globalChartDefaultId = 0;
+export const createChartDefaultId = () => {
+  globalChartDefaultId += 1;
+  return `mui-chart-${globalChartDefaultId}`;
+};

package/modern/internals/plugins/featurePlugins/useChartInteraction/index.js

@@ -0,0 +1,2 @@
+export { useChartInteraction } from "./useChartInteraction.js";
+export * from "./useChartInteraction.selectors.js";

package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useEventCallback from '@mui/utils/useEventCallback';
+export const useChartInteraction = ({
+  store
+}) => {
+  const cleanInteraction = useEventCallback(() => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        axis: {
+          x: null,
+          y: null
+        },
+        item: null
+      })
+    }));
+  });
+  const setItemInteraction = useEventCallback(newItem => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        item: newItem
+      })
+    }));
+  });
+  const setAxisInteraction = useEventCallback(({
+    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 enableVoronoid = useEventCallback(() => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        isVoronoiEnabled: true
+      })
+    }));
+  });
+  const disableVoronoid = useEventCallback(() => {
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        isVoronoiEnabled: false
+      })
+    }));
+  });
+  return {
+    params: {},
+    instance: {
+      cleanInteraction,
+      setItemInteraction,
+      setAxisInteraction,
+      enableVoronoid,
+      disableVoronoid
+    }
+  };
+};
+useChartInteraction.getInitialState = () => ({
+  interaction: {
+    item: null,
+    axis: {
+      x: null,
+      y: null
+    },
+    isVoronoiEnabled: false
+  }
+});
+useChartInteraction.params = {};

package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js

@@ -0,0 +1,10 @@
+import { createSelector } from "../../utils/selectors.js";
+const selectInteraction = state => state.interaction;
+export const selectorChartsInteractionItem = createSelector(selectInteraction, interaction => interaction.item);
+export const selectorChartsInteractionAxis = createSelector(selectInteraction, interaction => interaction.axis);
+export const selectorChartsInteractionXAxis = createSelector(selectInteraction, interaction => interaction.axis.x);
+export const selectorChartsInteractionYAxis = createSelector(selectInteraction, interaction => interaction.axis.y);
+export const selectorChartsInteractionItemIsDefined = createSelector(selectorChartsInteractionItem, item => item !== null);
+export const selectorChartsInteractionXAxisIsDefined = createSelector(selectorChartsInteractionXAxis, x => x !== null);
+export const selectorChartsInteractionYAxisIsDefined = createSelector(selectorChartsInteractionYAxis, y => y !== null);
+export const selectorChartsInteractionIsVoronoiEnabled = createSelector(selectInteraction, interaction => interaction.isVoronoiEnabled);

package/modern/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.js

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

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

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

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

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

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

@@ -1 +1,3 @@
-export {};
+export * from "./helpers.js";
+export * from "./plugin.js";
+export * from "./chart.js";

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

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

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

@@ -1,5 +1,3 @@
-// For now this is fixed. Will need to support generic if we add plugins
-
 export class ChartStore {
   constructor(value) {
     this.value = void 0;

package/modern/internals/store/useCharts.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { ChartStore } from "../plugins/utils/ChartStore.js";
+import { CHART_CORE_PLUGINS } from "../plugins/corePlugins/index.js";
+export function useChartApiInitialization(inputApiRef) {
+  const fallbackPublicApiRef = React.useRef({});
+  if (inputApiRef) {
+    if (inputApiRef.current == null) {
+      // eslint-disable-next-line react-compiler/react-compiler
+      inputApiRef.current = {};
+    }
+    return inputApiRef.current;
+  }
+  return fallbackPublicApiRef.current;
+}
+let globalId = 0;
+export function useCharts(inPlugins, props) {
+  const plugins = React.useMemo(() => [...CHART_CORE_PLUGINS, ...inPlugins], [inPlugins]);
+  const pluginParams = {}; // To generate when plugins use params.
+  const instanceRef = React.useRef({});
+  const instance = instanceRef.current;
+  const publicAPI = useChartApiInitialization(props.apiRef);
+  const innerSvgRef = React.useRef(null);
+  const storeRef = React.useRef(null);
+  if (storeRef.current == null) {
+    // eslint-disable-next-line react-compiler/react-compiler
+    globalId += 1;
+    const initialState = {
+      // TODO remove when the interaction moves to plugin
+      interaction: {
+        item: null,
+        axis: {
+          x: null,
+          y: null
+        }
+      },
+      cacheKey: {
+        id: globalId
+      }
+    };
+    plugins.forEach(plugin => {
+      if (plugin.getInitialState) {
+        Object.assign(initialState, plugin.getInitialState({}));
+      }
+    });
+    storeRef.current = new ChartStore(initialState);
+  }
+  const runPlugin = plugin => {
+    const pluginResponse = plugin({
+      instance,
+      params: pluginParams,
+      plugins: plugins,
+      store: storeRef.current,
+      svgRef: innerSvgRef
+    });
+    if (pluginResponse.publicAPI) {
+      Object.assign(publicAPI, pluginResponse.publicAPI);
+    }
+    if (pluginResponse.instance) {
+      Object.assign(instance, pluginResponse.instance);
+    }
+  };
+  plugins.forEach(runPlugin);
+  const contextValue = React.useMemo(() => ({
+    store: storeRef.current,
+    publicAPI,
+    instance,
+    svgRef: innerSvgRef
+  }), [instance, publicAPI]);
+  return {
+    contextValue
+  };
+}

package/modern/internals/store/useCharts.types.js

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

package/{internals → modern/internals/store}/useStore.js

@@ -1,17 +1,17 @@
-import * as React from 'react';
-import { ChartsContext } from "../context/InteractionProvider.js";
+import { useChartContext } from "../../context/ChartProvider/index.js";
+// This hook should be removed because user and us should not interact with the store directly, but with public/private APIs
 export function useStore(skipError) {
-  const charts = React.useContext(ChartsContext);
+  const context = useChartContext();
   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;
+    return context?.store;
   }
-  if (!charts) {
+  if (!context) {
     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;
+  return context.store;
 }

package/node/BarChart/BarChart.js

@@ -250,7 +250,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -261,7 +260,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -304,7 +302,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -315,7 +312,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),