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

package/ChartsSurface/ChartsSurface.js

@@ -9,18 +9,43 @@ import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { useAxisEvents } from "../hooks/useAxisEvents.js";
 import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
-import { useDrawingArea } from "../hooks/index.js";
-import { useSurfaceRef } from "../context/SvgRefProvider/index.js";
+import { useDrawingArea, useSvgRef } from "../hooks/index.js";
 import { useSize } from "../context/SizeProvider/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartsSurfaceStyles = 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 = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
   const {
     width,
@@ -31,10 +56,13 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
     bottom
   } = useDrawingArea();
   const {
-    hasIntrinsicSize
+    hasIntrinsicSize,
+    svgRef: containerRef,
+    inHeight,
+    inWidth
   } = useSize();
-  const surfaceRef = useSurfaceRef();
-  const handleRef = useForkRef(surfaceRef, ref);
+  const svgRef = useSvgRef();
+  const handleRef = useForkRef(containerRef, svgRef, ref);
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiChartsSurface'
@@ -57,6 +85,10 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
   };
   useAxisEvents(disableAxisListener);
   return /*#__PURE__*/_jsxs(ChartsSurfaceStyles, _extends({
+    ownerState: {
+      width: inWidth,
+      height: inHeight
+    },
     viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
     className: className
   }, other, {

package/ChartsTooltip/ChartsTooltip.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import HTMLElementType from '@mui/utils/HTMLElementType';
 import { ChartsItemTooltipContent } from "./ChartsItemTooltipContent.js";
 import { ChartsAxisTooltipContent } from "./ChartsAxisTooltipContent.js";
 import { ChartsTooltipContainer } from "./ChartsTooltipContainer.js";
@@ -43,26 +44,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.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]),
   /**
    * Override or extend the styles applied to the component.
    */

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";
 
 /**
@@ -96,7 +96,7 @@ export const ChartsTooltipMark = 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/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/PieArc.js

@@ -22,10 +22,11 @@ const useUtilityClasses = ownerState => {
     classes,
     id,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    dataIndex
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${id}`, `data-index-${dataIndex}`, isHighlighted && 'highlighted', isFaded && 'faded']
   };
   return composeClasses(slots, getPieArcUtilityClass, classes);
 };
@@ -36,9 +37,9 @@ const PieArcRoot = styled(animated.path, {
 })(({
   theme
 }) => ({
+  // Got to move stroke to an element prop instead of style.
   stroke: (theme.vars || theme).palette.background.paper,
-  strokeWidth: 1,
-  strokeLinejoin: 'round'
+  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, filter 0.2s ease-in'
 }));
 function PieArc(props) {
   const {
@@ -79,7 +80,12 @@ function PieArc(props) {
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
-    className: classes.root
+    className: classes.root,
+    fill: ownerState.color,
+    opacity: ownerState.isFaded ? 0.3 : 1,
+    filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
+    strokeWidth: 1,
+    strokeLinejoin: "round"
   }, other, getInteractionItemProps({
     type: 'pie',
     seriesId: id,

package/PieChart/PieArcPlot.js

@@ -2,8 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "arcLabelRadius", "outerRadius", "cornerRadius"];
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
@@ -47,16 +46,14 @@ function PieArcPlot(props) {
   }
   const Arc = slots?.pieArc ?? PieArc;
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: transition((_ref, item, _, index) => {
-      let {
-          startAngle,
-          endAngle,
-          paddingAngle: pA,
-          innerRadius: iR,
-          outerRadius: oR,
-          cornerRadius: cR
-        } = _ref,
-        style = _objectWithoutPropertiesLoose(_ref, _excluded2);
+    children: transition(({
+      startAngle,
+      endAngle,
+      paddingAngle: pA,
+      innerRadius: iR,
+      outerRadius: oR,
+      cornerRadius: cR
+    }, item, _, index) => {
       return /*#__PURE__*/_jsx(Arc, _extends({
         startAngle: startAngle,
         endAngle: endAngle,
@@ -64,7 +61,6 @@ function PieArcPlot(props) {
         innerRadius: iR,
         outerRadius: oR,
         cornerRadius: cR,
-        style: style,
         id: id,
         color: item.color,
         dataIndex: index,