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

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

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:

package/node/Gauge/GaugeContainer.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GaugeContainer = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 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 _styles = require("@mui/material/styles");
@@ -16,49 +16,16 @@ var _ChartsSurface = require("../ChartsSurface");
 var _DrawingAreaProvider = require("../context/DrawingAreaProvider");
 var _GaugeProvider = require("./GaugeProvider");
 var _SizeProvider = require("../context/SizeProvider");
-var _SvgRefProvider = require("../context/SvgRefProvider");
+var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
-const ResizableContainerRoot = (0, _styles.styled)('div', {
-  name: 'MuiGauge',
-  slot: 'Container'
-})(({
-  ownerState,
+const GStyled = (0, _styles.styled)('g')(({
   theme
 }) => ({
-  width: ownerState.width ?? '100%',
-  height: ownerState.height ?? '100%',
-  display: 'flex',
-  position: 'relative',
-  flexGrow: 1,
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'hidden',
-  '&>svg': {
-    width: '100%',
-    height: '100%'
-  },
   '& text': {
     fill: (theme.vars || theme).palette.text.primary
   }
 }));
-function ResizableContainer(props) {
-  const {
-    inHeight,
-    inWidth,
-    hasIntrinsicSize,
-    containerRef
-  } = (0, _SizeProvider.useSize)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainerRoot, (0, _extends2.default)({}, props, {
-    ownerState: {
-      width: inWidth,
-      height: inHeight
-    },
-    ref: containerRef,
-    children: hasIntrinsicSize && props.children
-  }));
-}
 const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(props, ref) {
   const {
       width: inWidth,
@@ -79,10 +46,10 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
       children
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SizeProvider.SizeProvider, {
-    width: inWidth,
-    height: inHeight,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgRefProvider.SvgRefProvider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SizeProvider.SizeProvider, {
+      width: inWidth,
+      height: inHeight,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingAreaProvider.DrawingAreaProvider, {
         margin: (0, _extends2.default)({
           left: 10,
@@ -101,18 +68,18 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
           cornerRadius: cornerRadius,
           cx: cx,
           cy: cy,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, (0, _extends2.default)({
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({
+            title: title,
+            desc: desc,
+            disableAxisListener: true,
             role: "meter",
             "aria-valuenow": value === null ? undefined : value,
             "aria-valuemin": valueMin,
             "aria-valuemax": valueMax
           }, other, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, {
-              title: title,
-              desc: desc,
-              disableAxisListener: true,
+            ref: ref,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GStyled, {
               "aria-hidden": "true",
-              ref: ref,
               children: children
             })
           }))

package/node/LineChart/CircleMarkElement.js

@@ -17,9 +17,9 @@ var _web = require("@react-spring/web");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _context = require("../context");
 var _markElementClasses = require("./markElementClasses");
-var _useSelector = require("../internals/useSelector");
-var _InteractionSelectors = require("../context/InteractionSelectors");
-var _useStore = require("../internals/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "shape"];
 /**
@@ -59,7 +59,7 @@ function CircleMarkElement(props) {
     seriesId: id
   });
   const store = (0, _useStore.useStore)();
-  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionXAxis);
+  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
   const position = (0, _web.useSpring)({
     to: {
       x,

package/node/LineChart/LineChart.js

@@ -254,7 +254,6 @@ process.env.NODE_ENV !== "production" ? LineChart.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]),
@@ -265,7 +264,6 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -308,7 +306,6 @@ process.env.NODE_ENV !== "production" ? LineChart.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]),
@@ -319,7 +316,6 @@ process.env.NODE_ENV !== "production" ? LineChart.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/LineChart/LineHighlightPlot.js

@@ -11,8 +11,8 @@ 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 _useStore = require("../internals/useStore");
-var _useSelector = require("../internals/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _LineHighlightElement = require("./LineHighlightElement");
 var _useScale = require("../hooks/useScale");
@@ -20,7 +20,7 @@ var _constants = require("../constants");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _useSeries = require("../hooks/useSeries");
 var _useDrawingArea = require("../hooks/useDrawingArea");
-var _InteractionSelectors = require("../context/InteractionSelectors");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 /**
@@ -43,7 +43,7 @@ function LineHighlightPlot(props) {
   const axisData = (0, _CartesianProvider.useCartesianContext)();
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const store = (0, _useStore.useStore)();
-  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionXAxis);
+  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
   const highlightedIndex = xAxisIdentifier?.index;
   if (highlightedIndex === undefined) {
     return null;

package/node/LineChart/MarkElement.js

@@ -18,9 +18,9 @@ var _getSymbol = require("../internals/getSymbol");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _context = require("../context");
 var _markElementClasses = require("./markElementClasses");
-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");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
 const MarkElementPath = (0, _styles.styled)(_web.animated.path, {
@@ -66,7 +66,7 @@ function MarkElement(props) {
     seriesId: id
   });
   const store = (0, _useStore.useStore)();
-  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionXAxis);
+  const xAxisIdentifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
   const position = (0, _web.useSpring)({
     to: {
       x,