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

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -5,16 +5,17 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["trigger", "classes", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import HTMLElementType from '@mui/utils/HTMLElementType';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { styled, useThemeProps } from '@mui/material/styles';
 import Popper from '@mui/material/Popper';
 import NoSsr from '@mui/material/NoSsr';
 import { useSvgRef } from "../hooks/useSvgRef.js";
 import { usePointerType } from "./utils.js";
-import { useSelector } from "../internals/useSelector.js";
-import { useStore } from "../internals/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
 import { useXAxis } from "../hooks/index.js";
-import { selectorChartsInteractionItemIsDefined, selectorChartsInteractionXAxisIsDefined, selectorChartsInteractionYAxisIsDefined } from "../context/InteractionSelectors.js";
+import { selectorChartsInteractionItemIsDefined, selectorChartsInteractionXAxisIsDefined, selectorChartsInteractionYAxisIsDefined } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ChartsTooltipRoot = styled(Popper, {
   name: 'MuiChartsTooltip',
@@ -124,26 +125,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.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.func, PropTypes.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.func.isRequired
-  })]),
+  anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]),
   /**
    * Popper render function or node.
    */

package/ChartsTooltip/ChartsTooltipTable.js

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles';
-import { shouldForwardProp } from '@mui/system';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { chartsTooltipClasses } from "./chartsTooltipClasses.js";
 
 /**

package/ChartsTooltip/useAxisTooltip.js

@@ -5,13 +5,13 @@ import { useSeries } from "../hooks/useSeries.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { ZAxisContext } from "../context/ZAxisContextProvider.js";
 import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
-import { useStore } from "../internals/useStore.js";
-import { useSelector } from "../internals/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
 import { getLabel } from "../internals/getLabel.js";
 import { isCartesianSeriesType } from "../internals/isCartesian.js";
 import { utcFormatter } from "./utils.js";
 import { useXAxis, useYAxis } from "../hooks/useAxis.js";
-import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis } from "../context/InteractionSelectors.js";
+import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 export function useAxisTooltip() {
   const defaultXAxis = useXAxis();
   const defaultYAxis = useYAxis();

package/ChartsTooltip/useItemTooltip.d.ts

@@ -1,7 +1,6 @@
-import { ChartSeriesType, ChartsSeriesConfig } from '../models/seriesType/config';
-import { ItemInteractionData } from '../internals/plugins/models';
+import { ChartItemIdentifier, ChartSeriesType, ChartsSeriesConfig } from '../models/seriesType/config';
 export interface UseItemTooltipReturnValue<T extends ChartSeriesType> {
-    identifier: ItemInteractionData<T>;
+    identifier: ChartItemIdentifier<T>;
     color: string;
     label: string | undefined;
     value: ChartsSeriesConfig[T]['valueType'];

package/ChartsTooltip/useItemTooltip.js

@@ -7,9 +7,9 @@ import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { ZAxisContext } from "../context/ZAxisContextProvider.js";
 import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
 import { getLabel } from "../internals/getLabel.js";
-import { selectorChartsInteractionItem } from "../context/InteractionSelectors.js";
-import { useSelector } from "../internals/useSelector.js";
-import { useStore } from "../internals/useStore.js";
+import { selectorChartsInteractionItem } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
 export function useItemTooltip() {
   const store = useStore();
   const item = useSelector(store, selectorChartsInteractionItem);

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -7,7 +7,7 @@ import { Delaunay } from '@mui/x-charts-vendor/d3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { useStore } from "../internals/useStore.js";
+import { useStore } from "../internals/store/useStore.js";
 import { getSVGPoint } from "../internals/getSVGPoint.js";
 import { useDrawingArea, useSvgRef } from "../hooks/index.js";
 import { useHighlighted } from "../context/index.js";
@@ -101,10 +101,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 = getSVGPoint(element, event);

package/ChartsXAxis/ChartsXAxis.js

@@ -137,8 +137,6 @@ function ChartsXAxis(inProps) {
     tickLabelStyle,
     label,
     labelStyle,
-    tickFontSize,
-    labelFontSize,
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
@@ -171,9 +169,9 @@ function ChartsXAxis(inProps) {
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: _extends({
+        fontSize: 12,
         textAnchor: 'middle',
-        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
-        fontSize: tickFontSize ?? 12
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
       }, tickLabelStyle)
     },
     className: classes.tickLabel,
@@ -202,7 +200,7 @@ function ChartsXAxis(inProps) {
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: _extends({
-        fontSize: labelFontSize ?? 14,
+        fontSize: 14,
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
       }, labelStyle)
@@ -299,12 +297,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * The label of the axis.
    */
   label: PropTypes.string,
-  /**
-   * The font size of the axis label.
-   * @default 14
-   * @deprecated Consider using `labelStyle.fontSize` instead.
-   */
-  labelFontSize: PropTypes.number,
   /**
    * The style applied to the axis label.
    */
@@ -329,12 +321,6 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    */
   stroke: PropTypes.string,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The font size of the axis ticks text.
-   * @default 12
-   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
-   */
-  tickFontSize: PropTypes.number,
   /**
    * Defines which ticks are displayed.
    * Its value can be:

package/ChartsYAxis/ChartsYAxis.js

@@ -42,8 +42,6 @@ const defaultProps = {
   position: 'left',
   disableLine: false,
   disableTicks: false,
-  tickFontSize: 12,
-  labelFontSize: 14,
   tickSize: 6
 };
 
@@ -76,9 +74,7 @@ function ChartsYAxis(inProps) {
     position,
     disableLine,
     disableTicks,
-    tickFontSize,
     label,
-    labelFontSize,
     labelStyle,
     tickLabelStyle,
     tickSize: tickSizeProp,
@@ -113,6 +109,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
@@ -140,7 +137,7 @@ function ChartsYAxis(inProps) {
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: _extends({
-        fontSize: labelFontSize,
+        fontSize: 14,
         angle: positionSign * 90,
         textAnchor: 'middle',
         dominantBaseline: 'auto'
@@ -243,12 +240,6 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * The label of the axis.
    */
   label: PropTypes.string,
-  /**
-   * The font size of the axis label.
-   * @default 14
-   * @deprecated Consider using `labelStyle.fontSize` instead.
-   */
-  labelFontSize: PropTypes.number,
   /**
    * The style applied to the axis label.
    */
@@ -273,12 +264,6 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    */
   stroke: PropTypes.string,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The font size of the axis ticks text.
-   * @default 12
-   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
-   */
-  tickFontSize: PropTypes.number,
   /**
    * Defines which ticks are displayed.
    * Its value can be:

package/Gauge/Gauge.d.ts

@@ -6,5 +6,5 @@ export interface GaugeProps extends GaugeContainerProps, Pick<GaugeValueTextProp
     classes?: Partial<GaugeClasses>;
     children?: React.ReactNode;
 }
-declare const Gauge: React.ForwardRefExoticComponent<GaugeProps & React.RefAttributes<SVGSVGElement>>;
+declare const Gauge: React.ForwardRefExoticComponent<Omit<GaugeProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export { Gauge };

package/Gauge/GaugeContainer.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ChartsSurfaceProps } from '../ChartsSurface';
 import { DrawingAreaProviderProps } from '../context/DrawingAreaProvider';
 import { GaugeProviderProps } from './GaugeProvider';
-export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'width' | 'height' | 'children'>, Pick<DrawingAreaProviderProps, 'margin'>, Omit<GaugeProviderProps, 'children'> {
+export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'width' | 'height' | 'children'>, Pick<DrawingAreaProviderProps, 'margin'>, Omit<GaugeProviderProps, 'children'>, React.SVGProps<SVGSVGElement> {
     /**
      * The width of the chart in px. If not defined, it takes the width of the parent element.
      */
@@ -13,5 +13,5 @@ export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'width' |
     height?: number;
     children?: React.ReactNode;
 }
-declare const GaugeContainer: React.ForwardRefExoticComponent<GaugeContainerProps & React.RefAttributes<SVGSVGElement>>;
+declare const GaugeContainer: React.ForwardRefExoticComponent<Omit<GaugeContainerProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export { GaugeContainer };

package/Gauge/GaugeContainer.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -9,49 +9,16 @@ import { styled } from '@mui/material/styles';
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { DrawingAreaProvider } from "../context/DrawingAreaProvider/index.js";
 import { GaugeProvider } from "./GaugeProvider.js";
-import { SizeProvider, useSize } from "../context/SizeProvider/index.js";
-import { SvgRefProvider } from "../context/SvgRefProvider/index.js";
+import { SizeProvider } from "../context/SizeProvider/index.js";
+import { ChartProvider } from "../context/ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const ResizableContainerRoot = styled('div', {
-  name: 'MuiGauge',
-  slot: 'Container'
-})(({
-  ownerState,
+const GStyled = 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
-  } = useSize();
-  return /*#__PURE__*/_jsx(ResizableContainerRoot, _extends({}, props, {
-    ownerState: {
-      width: inWidth,
-      height: inHeight
-    },
-    ref: containerRef,
-    children: hasIntrinsicSize && props.children
-  }));
-}
 const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(props, ref) {
   const {
       width: inWidth,
@@ -72,10 +39,10 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
       children
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx(SizeProvider, {
-    width: inWidth,
-    height: inHeight,
-    children: /*#__PURE__*/_jsx(SvgRefProvider, {
+  return /*#__PURE__*/_jsx(ChartProvider, {
+    children: /*#__PURE__*/_jsx(SizeProvider, {
+      width: inWidth,
+      height: inHeight,
       children: /*#__PURE__*/_jsx(DrawingAreaProvider, {
         margin: _extends({
           left: 10,
@@ -94,18 +61,18 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
           cornerRadius: cornerRadius,
           cx: cx,
           cy: cy,
-          children: /*#__PURE__*/_jsx(ResizableContainer, _extends({
+          children: /*#__PURE__*/_jsx(ChartsSurface, _extends({
+            title: title,
+            desc: desc,
+            disableAxisListener: true,
             role: "meter",
             "aria-valuenow": value === null ? undefined : value,
             "aria-valuemin": valueMin,
             "aria-valuemax": valueMax
           }, other, {
-            children: /*#__PURE__*/_jsx(ChartsSurface, {
-              title: title,
-              desc: desc,
-              disableAxisListener: true,
+            ref: ref,
+            children: /*#__PURE__*/_jsx(GStyled, {
               "aria-hidden": "true",
-              ref: ref,
               children: children
             })
           }))

package/LineChart/CircleMarkElement.js

@@ -11,9 +11,9 @@ import { animated, useSpring } from '@react-spring/web';
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../context/index.js";
 import { useUtilityClasses } from "./markElementClasses.js";
-import { useSelector } from "../internals/useSelector.js";
-import { selectorChartsInteractionXAxis } from "../context/InteractionSelectors.js";
-import { useStore } from "../internals/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * The line mark element that only render circle for performance improvement.

package/LineChart/LineChart.js

@@ -247,7 +247,6 @@ process.env.NODE_ENV !== "production" ? LineChart.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]),
@@ -258,7 +257,6 @@ process.env.NODE_ENV !== "production" ? LineChart.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']),
@@ -301,7 +299,6 @@ process.env.NODE_ENV !== "production" ? LineChart.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]),
@@ -312,7 +309,6 @@ process.env.NODE_ENV !== "production" ? LineChart.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/LineChart/LineHighlightPlot.js

@@ -5,8 +5,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useStore } from "../internals/useStore.js";
-import { useSelector } from "../internals/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { LineHighlightElement } from "./LineHighlightElement.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
@@ -14,7 +14,7 @@ import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import getColor from "./getColor.js";
 import { useLineSeries } from "../hooks/useSeries.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
-import { selectorChartsInteractionXAxis } from "../context/InteractionSelectors.js";
+import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:

package/LineChart/MarkElement.js

@@ -12,9 +12,9 @@ import { getSymbol } from "../internals/getSymbol.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../context/index.js";
 import { useUtilityClasses } from "./markElementClasses.js";
-import { selectorChartsInteractionXAxis } from "../context/InteractionSelectors.js";
-import { useSelector } from "../internals/useSelector.js";
-import { useStore } from "../internals/useStore.js";
+import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MarkElementPath = styled(animated.path, {
   name: 'MuiMarkElement',

package/PieChart/PieChart.js

@@ -221,7 +221,6 @@ process.env.NODE_ENV !== "production" ? PieChart.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]),
@@ -232,7 +231,6 @@ process.env.NODE_ENV !== "production" ? PieChart.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']),
@@ -275,7 +273,6 @@ process.env.NODE_ENV !== "production" ? PieChart.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]),
@@ -286,7 +283,6 @@ process.env.NODE_ENV !== "production" ? PieChart.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/ScatterChart/Scatter.js

@@ -5,11 +5,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
-import { useStore } from "../internals/useStore.js";
-import { useSelector } from "../internals/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
 import { useHighlighted } from "../context/index.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
-import { selectorChartsInteractionIsVoronoiEnabled } from "../context/InteractionSelectors.js";
+import { selectorChartsInteractionIsVoronoiEnabled } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:

package/ScatterChart/ScatterChart.js

@@ -231,7 +231,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -242,7 +241,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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']),
@@ -285,7 +283,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
@@ -296,7 +293,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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/SparkLineChart/SparkLineChart.js

@@ -260,7 +260,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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]),
@@ -271,7 +270,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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']),
@@ -313,7 +311,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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]),
@@ -324,7 +321,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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/context/CartesianProvider/defaultizeAxis.d.ts

@@ -12,29 +12,27 @@ export declare const defaultizeAxis: (inAxis: MakeOptional<AxisConfig<ScaleName,
     valueFormatter?: ((value: any, context: import("../../internals").AxisValueFormatterContext) => string) | undefined;
     dataKey?: string | undefined;
     sx?: import("@mui/system").SxProps | undefined;
-    classes?: Partial<import("../..").ChartsAxisClasses> | undefined;
     tickMaxStep?: number | undefined;
     tickMinStep?: number | undefined;
     tickNumber?: number | undefined;
     disableLine?: boolean | undefined;
     disableTicks?: boolean | undefined;
-    tickFontSize?: number | undefined;
-    tickLabelStyle?: import("../..").ChartsTextProps["style"];
-    labelStyle?: import("../..").ChartsTextProps["style"];
-    tickLabelInterval?: ("auto" | ((value: any, index: number) => boolean)) | undefined;
-    labelFontSize?: number | undefined;
+    tickLabelStyle?: import("../..").ChartsTextStyle | undefined;
+    labelStyle?: import("../..").ChartsTextStyle | undefined;
+    tickLabelInterval?: "auto" | ((value: any, index: number) => boolean) | undefined;
     tickSize?: number | undefined;
+    classes?: Partial<import("../..").ChartsAxisClasses> | undefined;
     slots?: Partial<import("../../internals").ChartsAxisSlots> | undefined;
     slotProps?: Partial<import("../../internals").ChartsAxisSlotProps> | undefined;
-    tickInterval?: ("auto" | ((value: any, index: number) => boolean) | any[]) | undefined;
-    tickPlacement?: ("start" | "end" | "middle" | "extremities") | undefined;
-    tickLabelPlacement?: ("middle" | "tick") | undefined;
+    tickInterval?: "auto" | ((value: any, index: number) => boolean) | any[] | undefined;
+    tickPlacement?: "start" | "end" | "middle" | "extremities" | undefined;
+    tickLabelPlacement?: "middle" | "tick" | undefined;
     scaleType?: "linear" | "time" | "log" | "band" | "point" | "pow" | "sqrt" | "utc" | undefined;
     colorMap?: import("../../models/colorMapping").ContinuousColorConfig<number | Date> | import("../../models/colorMapping").PiecewiseColorConfig<number | Date> | import("../../models/colorMapping").OrdinalColorConfig<string | number | Date> | undefined;
     hideTooltip?: boolean | undefined;
-    domainLimit?: ("nice" | "strict" | ((min: number, max: number) => {
+    domainLimit?: "nice" | "strict" | ((min: number, max: number) => {
         min: number;
         max: number;
-    })) | undefined;
+    }) | undefined;
     id: import("../../internals").AxisId;
 }[];

package/context/ChartDataProvider/ChartDataProvider.d.ts

@@ -24,6 +24,33 @@ export type ChartDataProviderProps = Omit<SizeProviderProps & Omit<SeriesProvide
     yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[];
     children?: React.ReactNode;
 };
+/**
+ * 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>
+ * ```
+ */
 declare function ChartDataProvider(props: ChartDataProviderProps): React.JSX.Element;
 declare namespace ChartDataProvider {
     var propTypes: any;