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

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') {

package/node/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -9,9 +9,9 @@ exports.default = ChartsYHighlight;
 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 yScale = (0, _useScale.useYScale)();
   const store = (0, _useStore.useStore)();
-  const axisY = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionYAxis);
+  const axisY = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionYAxis);
   const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
   const isBandScaleY = type === 'band' && axisY !== null && (0, _isBandScale.isBandScale)(yScale);
   if (process.env.NODE_ENV !== 'production') {

package/node/ChartsLegend/chartsLegendClasses.js

@@ -1,12 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getLegendUtilityClass = getLegendUtilityClass;
 exports.legendClasses = void 0;
-var _utils = require("@mui/utils");
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getLegendUtilityClass(slot) {
-  return (0, _utils.unstable_generateUtilityClass)('MuiChartsLegend', slot);
+  return (0, _generateUtilityClass.default)('MuiChartsLegend', slot);
 }
-const legendClasses = exports.legendClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsLegend', ['root', 'series', 'itemBackground', 'mark', 'label', 'column', 'row']);
+const legendClasses = exports.legendClasses = (0, _generateUtilityClasses.default)('MuiChartsLegend', ['root', 'series', 'itemBackground', 'mark', 'label', 'column', 'row']);

package/node/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useSeries = require("../hooks/useSeries");
 var _hooks = require("../hooks");
 var _CartesianProvider = require("../context/CartesianProvider");
-var _useStore = require("../internals/useStore");
+var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsOnAxisClickHandler(props) {
   const {

package/node/ChartsSurface/ChartsSurface.js

@@ -16,18 +16,43 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useAxisEvents = require("../hooks/useAxisEvents");
 var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
 var _hooks = require("../hooks");
-var _SvgRefProvider = require("../context/SvgRefProvider");
 var _SizeProvider = require("../context/SizeProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "disableAxisListener", "className", "title", "desc"];
 const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
-})(() => ({
+})(({
+  ownerState
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
+  display: 'flex',
+  position: 'relative',
+  flexGrow: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
   // This prevents default touch actions when using the svg on mobile devices.
   // For example, prevent page scroll & zoom.
   touchAction: 'none'
 }));
+
+/**
+ * It provides the drawing area for the chart elements.
+ * It is the root `<svg>` of all the chart elements.
+ *
+ * It also provides the `title` and `desc` elements for the chart.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
+ */
 const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
   const {
     width,
@@ -38,10 +63,13 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
     bottom
   } = (0, _hooks.useDrawingArea)();
   const {
-    hasIntrinsicSize
+    hasIntrinsicSize,
+    svgRef: containerRef,
+    inHeight,
+    inWidth
   } = (0, _SizeProvider.useSize)();
-  const surfaceRef = (0, _SvgRefProvider.useSurfaceRef)();
-  const handleRef = (0, _useForkRef.default)(surfaceRef, ref);
+  const svgRef = (0, _hooks.useSvgRef)();
+  const handleRef = (0, _useForkRef.default)(containerRef, svgRef, ref);
   const themeProps = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiChartsSurface'
@@ -64,6 +92,10 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
   };
   (0, _useAxisEvents.useAxisEvents)(disableAxisListener);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsSurfaceStyles, (0, _extends2.default)({
+    ownerState: {
+      width: inWidth,
+      height: inHeight
+    },
     viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
     className: className
   }, other, {

package/node/ChartsTooltip/ChartsTooltip.js

@@ -10,6 +10,7 @@ exports.ChartsTooltip = ChartsTooltip;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _ChartsItemTooltipContent = require("./ChartsItemTooltipContent");
 var _ChartsAxisTooltipContent = require("./ChartsAxisTooltipContent");
 var _ChartsTooltipContainer = require("./ChartsTooltipContainer");
@@ -50,26 +51,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: _propTypes.default.oneOfType([(props, propName) => {
-    if (props[propName] == null) {
-      return new Error(`Prop '${propName}' is required but wasn't specified`);
-    }
-    if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-      return new Error(`Expected prop '${propName}' to be of type Element`);
-    }
-    return null;
-  }, _propTypes.default.func, _propTypes.default.shape({
-    contextElement: (props, propName) => {
-      if (props[propName] == null) {
-        return null;
-      }
-      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error(`Expected prop '${propName}' to be of type Element`);
-      }
-      return null;
-    },
-    getBoundingClientRect: _propTypes.default.func.isRequired
-  })]),
+  anchorEl: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_HTMLElementType.default, _propTypes.default.object, _propTypes.default.func]),
   /**
    * Override or extend the styles applied to the component.
    */

package/node/ChartsTooltip/ChartsTooltipContainer.js

@@ -11,16 +11,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _styles = require("@mui/material/styles");
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 var _NoSsr = _interopRequireDefault(require("@mui/material/NoSsr"));
 var _useSvgRef = require("../hooks/useSvgRef");
 var _utils = require("./utils");
-var _useSelector = require("../internals/useSelector");
-var _useStore = require("../internals/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
 var _hooks = require("../hooks");
-var _InteractionSelectors = require("../context/InteractionSelectors");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["trigger", "classes", "children"];
 const ChartsTooltipRoot = (0, _styles.styled)(_Popper.default, {
@@ -66,7 +67,7 @@ function ChartsTooltipContainer(inProps) {
   const store = (0, _useStore.useStore)();
   const isOpen = (0, _useSelector.useSelector)(store,
   // eslint-disable-next-line no-nested-ternary
-  trigger === 'axis' ? xAxisHasData ? _InteractionSelectors.selectorChartsInteractionXAxisIsDefined : _InteractionSelectors.selectorChartsInteractionYAxisIsDefined : _InteractionSelectors.selectorChartsInteractionItemIsDefined);
+  trigger === 'axis' ? xAxisHasData ? _useChartInteraction.selectorChartsInteractionXAxisIsDefined : _useChartInteraction.selectorChartsInteractionYAxisIsDefined : _useChartInteraction.selectorChartsInteractionItemIsDefined);
   const popperOpen = pointerType !== null && isOpen; // tooltipHasData;
 
   React.useEffect(() => {
@@ -131,26 +132,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {
    * It's used to set the position of the popper.
    * The return value will passed as the reference object of the Popper instance.
    */
-  anchorEl: _propTypes.default.oneOfType([(props, propName) => {
-    if (props[propName] == null) {
-      return new Error(`Prop '${propName}' is required but wasn't specified`);
-    }
-    if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-      return new Error(`Expected prop '${propName}' to be of type Element`);
-    }
-    return null;
-  }, _propTypes.default.func, _propTypes.default.shape({
-    contextElement: (props, propName) => {
-      if (props[propName] == null) {
-        return null;
-      }
-      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
-        return new Error(`Expected prop '${propName}' to be of type Element`);
-      }
-      return null;
-    },
-    getBoundingClientRect: _propTypes.default.func.isRequired
-  })]),
+  anchorEl: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_HTMLElementType.default, _propTypes.default.object, _propTypes.default.func]),
   /**
    * Popper render function or node.
    */

package/node/ChartsTooltip/ChartsTooltipTable.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ChartsTooltipTable = exports.ChartsTooltipRow = exports.ChartsTooltipPaper = exports.ChartsTooltipMark = exports.ChartsTooltipCell = void 0;
 var _styles = require("@mui/material/styles");
-var _system = require("@mui/system");
+var _createStyled = require("@mui/system/createStyled");
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 /**
  * @ignore - internal component.
@@ -92,7 +92,7 @@ const ChartsTooltipMark = exports.ChartsTooltipMark = (0, _styles.styled)('div',
   name: 'MuiChartsTooltip',
   slot: 'Mark',
   overridesResolver: (props, styles) => styles.mark,
-  shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'color'
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'color'
 })(({
   theme,
   color
@@ -101,7 +101,7 @@ const ChartsTooltipMark = exports.ChartsTooltipMark = (0, _styles.styled)('div',
   height: theme.spacing(1),
   borderRadius: '50%',
   boxShadow: theme.shadows[1],
-  backgroundColor: color,
+  background: color,
   borderColor: (theme.vars || theme).palette.background.paper,
   border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
   boxSizing: 'content-box'

package/node/ChartsTooltip/useAxisTooltip.js

@@ -11,19 +11,19 @@ var _useSeries = require("../hooks/useSeries");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
-var _useStore = require("../internals/useStore");
-var _useSelector = require("../internals/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
 var _getLabel = require("../internals/getLabel");
 var _isCartesian = require("../internals/isCartesian");
 var _utils = require("./utils");
 var _useAxis = require("../hooks/useAxis");
-var _InteractionSelectors = require("../context/InteractionSelectors");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 function useAxisTooltip() {
   const defaultXAxis = (0, _useAxis.useXAxis)();
   const defaultYAxis = (0, _useAxis.useYAxis)();
   const xAxisHasData = defaultXAxis.data !== undefined && defaultXAxis.data.length !== 0;
   const store = (0, _useStore.useStore)();
-  const axisData = (0, _useSelector.useSelector)(store, xAxisHasData ? _InteractionSelectors.selectorChartsInteractionXAxis : _InteractionSelectors.selectorChartsInteractionYAxis);
+  const axisData = (0, _useSelector.useSelector)(store, xAxisHasData ? _useChartInteraction.selectorChartsInteractionXAxis : _useChartInteraction.selectorChartsInteractionYAxis);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis,

package/node/ChartsTooltip/useItemTooltip.js

@@ -14,12 +14,12 @@ var _CartesianProvider = require("../context/CartesianProvider");
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
 var _getLabel = require("../internals/getLabel");
-var _InteractionSelectors = require("../context/InteractionSelectors");
-var _useSelector = require("../internals/useSelector");
-var _useStore = require("../internals/useStore");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
 function useItemTooltip() {
   const store = (0, _useStore.useStore)();
-  const item = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionItem);
+  const item = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionItem);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis,

package/node/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -14,7 +14,7 @@ var _d3Delaunay = require("@mui/x-charts-vendor/d3-delaunay");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _CartesianProvider = require("../context/CartesianProvider");
 var _useScale = require("../hooks/useScale");
-var _useStore = require("../internals/useStore");
+var _useStore = require("../internals/store/useStore");
 var _getSVGPoint = require("../internals/getSVGPoint");
 var _hooks = require("../hooks");
 var _context = require("../context");
@@ -108,10 +108,10 @@ function ChartsVoronoiHandler(props) {
     lastFind.current = undefined;
   }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea]);
   React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null) {
+    if (svgRef.current === null) {
       return undefined;
     }
+    const element = svgRef.current;
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);

package/node/ChartsXAxis/ChartsXAxis.js

@@ -144,8 +144,6 @@ function ChartsXAxis(inProps) {
     tickLabelStyle,
     label,
     labelStyle,
-    tickFontSize,
-    labelFontSize,
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
@@ -178,9 +176,9 @@ function ChartsXAxis(inProps) {
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: (0, _extends2.default)({
+        fontSize: 12,
         textAnchor: 'middle',
-        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
-        fontSize: tickFontSize ?? 12
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
       }, tickLabelStyle)
     },
     className: classes.tickLabel,
@@ -209,7 +207,7 @@ function ChartsXAxis(inProps) {
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: (0, _extends2.default)({
-        fontSize: labelFontSize ?? 14,
+        fontSize: 14,
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
       }, labelStyle)
@@ -306,12 +304,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * The label of the axis.
    */
   label: _propTypes.default.string,
-  /**
-   * The font size of the axis label.
-   * @default 14
-   * @deprecated Consider using `labelStyle.fontSize` instead.
-   */
-  labelFontSize: _propTypes.default.number,
   /**
    * The style applied to the axis label.
    */
@@ -336,12 +328,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    */
   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]),
-  /**
-   * The font size of the axis ticks text.
-   * @default 12
-   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
-   */
-  tickFontSize: _propTypes.default.number,
   /**
    * Defines which ticks are displayed.
    * Its value can be:

package/node/ChartsYAxis/ChartsYAxis.js

@@ -49,8 +49,6 @@ const defaultProps = {
   position: 'left',
   disableLine: false,
   disableTicks: false,
-  tickFontSize: 12,
-  labelFontSize: 14,
   tickSize: 6
 };
 
@@ -83,9 +81,7 @@ function ChartsYAxis(inProps) {
     position,
     disableLine,
     disableTicks,
-    tickFontSize,
     label,
-    labelFontSize,
     labelStyle,
     tickLabelStyle,
     tickSize: tickSizeProp,
@@ -120,6 +116,7 @@ function ChartsYAxis(inProps) {
     tickInterval
   });
   const positionSign = position === 'right' ? 1 : -1;
+  const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : 12;
   const labelRefPoint = {
     x: positionSign * (tickFontSize + tickSize + 10),
     y: top + height / 2
@@ -147,7 +144,7 @@ function ChartsYAxis(inProps) {
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: (0, _extends2.default)({
-        fontSize: labelFontSize,
+        fontSize: 14,
         angle: positionSign * 90,
         textAnchor: 'middle',
         dominantBaseline: 'auto'
@@ -250,12 +247,6 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * The label of the axis.
    */
   label: _propTypes.default.string,
-  /**
-   * The font size of the axis label.
-   * @default 14
-   * @deprecated Consider using `labelStyle.fontSize` instead.
-   */
-  labelFontSize: _propTypes.default.number,
   /**
    * The style applied to the axis label.
    */
@@ -280,12 +271,6 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    */
   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]),
-  /**
-   * The font size of the axis ticks text.
-   * @default 12
-   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
-   */
-  tickFontSize: _propTypes.default.number,
   /**
    * Defines which ticks are displayed.
    * Its value can be: