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

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.2
  *
  * @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']),

package/node/ChartContainer/ChartContainer.js

@@ -11,22 +11,42 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ChartDataProvider = require("../context/ChartDataProvider");
-var _ResizableContainer = require("./ResizableContainer");
 var _useChartContainerProps = require("./useChartContainerProps");
 var _ChartsSurface = require("../ChartsSurface");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * It sets up the data providers as well as the `<svg>` for the chart.
+ *
+ * This is a combination of both the `ChartDataProvider` and `ChartsSurface` components.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartContainer API](https://mui.com/x/api/charts/chart-container/)
+ *
+ * @example
+ * ```jsx
+ * <ChartContainer
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *    <BarPlot />
+ *    <ChartsXAxis position="bottom" axisId="x-axis" />
+ * </ChartContainer>
+ * ```
+ */
 const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
     chartDataProviderProps,
     children,
-    resizableContainerProps,
     chartsSurfaceProps
   } = (0, _useChartContainerProps.useChartContainerProps)(props, ref);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResizableContainer.ResizableContainer, (0, _extends2.default)({}, resizableContainerProps, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-        children: children
-      }))
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      children: children
     }))
   }));
 });
@@ -135,7 +155,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.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]),
@@ -146,7 +165,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.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']),
@@ -189,7 +207,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.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]),
@@ -200,7 +217,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.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']),

package/node/ChartContainer/useChartContainerProps.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useChartContainerProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation"];
 const useChartContainerProps = (props, ref) => {
@@ -30,14 +31,13 @@ const useChartContainerProps = (props, ref) => {
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const resizableContainerProps = other;
-  const chartsSurfaceProps = {
+  const chartsSurfaceProps = (0, _extends2.default)({
     title,
     desc,
     sx,
     disableAxisListener,
     ref
-  };
+  }, other);
   const chartDataProviderProps = {
     margin,
     series,
@@ -55,7 +55,6 @@ const useChartContainerProps = (props, ref) => {
   };
   return {
     chartDataProviderProps,
-    resizableContainerProps,
     chartsSurfaceProps,
     children
   };

package/node/ChartsAxis/axisClasses.js

@@ -1,12 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.axisClasses = void 0;
 exports.getAxisUtilityClass = getAxisUtilityClass;
-var _utils = require("@mui/utils");
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getAxisUtilityClass(slot) {
-  return (0, _utils.unstable_generateUtilityClass)('MuiChartsAxis', slot);
+  return (0, _generateUtilityClass.default)('MuiChartsAxis', slot);
 }
-const axisClasses = exports.axisClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);
+const axisClasses = exports.axisClasses = (0, _generateUtilityClasses.default)('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);

package/node/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -9,9 +9,9 @@ exports.default = ChartsXHighlight;
 var React = _interopRequireWildcard(require("react"));
 var _useScale = require("../hooks/useScale");
 var _isBandScale = require("../internals/isBandScale");
-var _useSelector = require("../internals/useSelector");
-var _useStore = require("../internals/useStore");
-var _InteractionSelectors = require("../context/InteractionSelectors");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _hooks = require("../hooks");
 var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,7 +28,7 @@ var _jsxRuntime = require("react/jsx-runtime");
   } = (0, _hooks.useDrawingArea)();
   const xScale = (0, _useScale.useXScale)();
   const store = (0, _useStore.useStore)();
-  const axisX = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionXAxis);
+  const axisX = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
   const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
   const isBandScaleX = type === 'band' && axisX !== null && (0, _isBandScale.isBandScale)(xScale);
   if (process.env.NODE_ENV !== 'production') {