@mui/x-charts 9.0.0-alpha.2 → 9.0.0-alpha.4

package/PieChart/PieArc.d.ts

@@ -1,39 +1,5 @@
 import * as React from 'react';
-import { type SeriesId } from "../models/index.js";
-export interface PieArcClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /**
-   * Styles applied to the root element when highlighted.
-   * @deprecated Use `[data-highlighted]` selector instead.
-   */
-  highlighted: string;
-  /**
-   * Styles applied to the root element when faded.
-   * @deprecated Use `[data-faded]` selector instead.
-   */
-  faded: string;
-  /**
-   * Styles applied to the root element for a specified series.
-   * Needs to be suffixed with the series ID: `.${pieArcClasses.series}-${seriesId}`.
-   */
-  series: string;
-  /** Styles applied to the focus indicator element. */
-  focusIndicator: string;
-}
-export type PieArcClassKey = keyof PieArcClasses;
-interface PieArcOwnerState {
-  seriesId: SeriesId;
-  dataIndex: number;
-  color: string;
-  isFaded: boolean;
-  isHighlighted: boolean;
-  isFocused: boolean;
-  stroke?: string;
-  classes?: Partial<PieArcClasses>;
-}
-export declare function getPieArcUtilityClass(slot: string): string;
-export declare const pieArcClasses: PieArcClasses;
+import { type PieArcOwnerState } from "./pieClasses.js";
 export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref'> & PieArcOwnerState & {
   cornerRadius: number;
   endAngle: number;

package/PieChart/PieArc.js

@@ -7,43 +7,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PieArc = void 0;
-exports.getPieArcUtilityClass = getPieArcUtilityClass;
-exports.pieArcClasses = void 0;
 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 _clsx = _interopRequireDefault(require("clsx"));
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
-var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _hooks = require("../hooks");
 var _animation = require("../internals/animation/animation");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
+var _pieClasses = require("./pieClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "classes", "color", "dataIndex", "seriesId", "isFaded", "isHighlighted", "isFocused", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "stroke", "skipInteraction"];
-function getPieArcUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiPieArc', slot);
-}
-const pieArcClasses = exports.pieArcClasses = (0, _generateUtilityClasses.default)('MuiPieArc', ['root', 'highlighted', 'faded', 'series', 'focusIndicator']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId,
-    isFaded,
-    isHighlighted,
-    dataIndex
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${seriesId}`, `data-index-${dataIndex}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return (0, _composeClasses.default)(slots, getPieArcUtilityClass, classes);
-};
 const PieArcRoot = (0, _styles.styled)('path', {
   name: 'MuiPieArc',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.arc // FIXME: Inconsistent naming with slot
+  slot: 'Root'
 })({
   transitionProperty: 'opacity, fill, filter',
   transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
@@ -82,7 +60,7 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
     isHighlighted,
     isFocused
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = (0, _pieClasses.useUtilityClasses)(ownerState);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
     type: 'pie',
     seriesId,
@@ -102,7 +80,7 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
-    className: (0, _clsx.default)(classes.root, className),
+    className: (0, _clsx.default)(classes.arc, className),
     fill: color,
     opacity: isFaded ? 0.3 : 1,
     filter: isHighlighted ? 'brightness(120%)' : 'none',
@@ -110,7 +88,8 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
     strokeWidth: 1,
     strokeLinejoin: "round",
     "data-highlighted": isHighlighted || undefined,
-    "data-faded": isFaded || undefined
+    "data-faded": isFaded || undefined,
+    "data-index": dataIndex
   }, other, interactionProps, animatedProps));
 });
 if (process.env.NODE_ENV !== "production") PieArc.displayName = "PieArc";

package/PieChart/PieArc.mjs

@@ -6,35 +6,15 @@ const _excluded = ["className", "classes", "color", "dataIndex", "seriesId", "is
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled, useTheme } from '@mui/material/styles';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { useAnimatePieArc } from "../hooks/index.mjs";
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.mjs";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.mjs";
+import { useUtilityClasses as usePieUtilityClasses } from "./pieClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getPieArcUtilityClass(slot) {
-  return generateUtilityClass('MuiPieArc', slot);
-}
-export const pieArcClasses = generateUtilityClasses('MuiPieArc', ['root', 'highlighted', 'faded', 'series', 'focusIndicator']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId,
-    isFaded,
-    isHighlighted,
-    dataIndex
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${seriesId}`, `data-index-${dataIndex}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return composeClasses(slots, getPieArcUtilityClass, classes);
-};
 const PieArcRoot = styled('path', {
   name: 'MuiPieArc',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.arc // FIXME: Inconsistent naming with slot
+  slot: 'Root'
 })({
   transitionProperty: 'opacity, fill, filter',
   transitionDuration: `${ANIMATION_DURATION_MS}ms`,
@@ -73,7 +53,7 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
     isHighlighted,
     isFocused
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = usePieUtilityClasses(ownerState);
   const interactionProps = useInteractionItemProps({
     type: 'pie',
     seriesId,
@@ -93,7 +73,7 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
-    className: clsx(classes.root, className),
+    className: clsx(classes.arc, className),
     fill: color,
     opacity: isFaded ? 0.3 : 1,
     filter: isHighlighted ? 'brightness(120%)' : 'none',
@@ -101,7 +81,8 @@ const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
     strokeWidth: 1,
     strokeLinejoin: "round",
     "data-highlighted": isHighlighted || undefined,
-    "data-faded": isFaded || undefined
+    "data-faded": isFaded || undefined,
+    "data-index": dataIndex
   }, other, interactionProps, animatedProps));
 });
 if (process.env.NODE_ENV !== "production") PieArc.displayName = "PieArc";

package/PieChart/PieArcLabel.d.mts

@@ -1,42 +1,17 @@
 import * as React from 'react';
 import { type SeriesId } from "../models/index.mjs";
-export interface PieArcLabelClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /**
-   * Styles applied to the root element when highlighted.
-   * @deprecated Use `[data-highlighted]` selector instead.
-   */
-  highlighted: string;
-  /**
-   * Styles applied to the root element when faded.
-   * @deprecated Use `[data-faded]` selector instead.
-   */
-  faded: string;
-  /** Styles applied to the root element when animation is not skipped. */
-  animate: string;
-  /**
-   * Styles applied to the root element for a specified series.
-   * Needs to be suffixed with the series ID: `.${pieArcLabelClasses.series}-${seriesId}`.
-   */
-  series: string;
-}
-export type PieArcLabelClassKey = keyof PieArcLabelClasses;
+import { type PieClasses } from "./pieClasses.mjs";
 interface PieArcLabelOwnerState {
   seriesId: SeriesId;
   color: string;
   isFaded: boolean;
   isHighlighted: boolean;
   skipAnimation: boolean;
-  classes?: Partial<PieArcLabelClasses>;
+  classes?: Partial<PieClasses>;
 }
-export declare function getPieArcLabelUtilityClass(slot: string): string;
-export declare const pieArcLabelClasses: PieArcLabelClasses;
 export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, 'ref' | 'color'> & {
   startAngle: number;
   endAngle: number;
-  innerRadius: number;
-  outerRadius: number;
   arcLabelRadius: number;
   cornerRadius: number;
   paddingAngle: number;
@@ -44,11 +19,9 @@ export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.SVGProps<SVGTe
   formattedArcLabel?: string | null;
   hidden?: boolean;
 };
-declare const PieArcLabel: React.ForwardRefExoticComponent<PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, "ref" | "color"> & {
+declare const PieArcLabel: React.ForwardRefExoticComponent<PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, "color" | "ref"> & {
   startAngle: number;
   endAngle: number;
-  innerRadius: number;
-  outerRadius: number;
   arcLabelRadius: number;
   cornerRadius: number;
   paddingAngle: number;

package/PieChart/PieArcLabel.d.ts

@@ -1,42 +1,17 @@
 import * as React from 'react';
 import { type SeriesId } from "../models/index.js";
-export interface PieArcLabelClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /**
-   * Styles applied to the root element when highlighted.
-   * @deprecated Use `[data-highlighted]` selector instead.
-   */
-  highlighted: string;
-  /**
-   * Styles applied to the root element when faded.
-   * @deprecated Use `[data-faded]` selector instead.
-   */
-  faded: string;
-  /** Styles applied to the root element when animation is not skipped. */
-  animate: string;
-  /**
-   * Styles applied to the root element for a specified series.
-   * Needs to be suffixed with the series ID: `.${pieArcLabelClasses.series}-${seriesId}`.
-   */
-  series: string;
-}
-export type PieArcLabelClassKey = keyof PieArcLabelClasses;
+import { type PieClasses } from "./pieClasses.js";
 interface PieArcLabelOwnerState {
   seriesId: SeriesId;
   color: string;
   isFaded: boolean;
   isHighlighted: boolean;
   skipAnimation: boolean;
-  classes?: Partial<PieArcLabelClasses>;
+  classes?: Partial<PieClasses>;
 }
-export declare function getPieArcLabelUtilityClass(slot: string): string;
-export declare const pieArcLabelClasses: PieArcLabelClasses;
 export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, 'ref' | 'color'> & {
   startAngle: number;
   endAngle: number;
-  innerRadius: number;
-  outerRadius: number;
   arcLabelRadius: number;
   cornerRadius: number;
   paddingAngle: number;
@@ -44,11 +19,9 @@ export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.SVGProps<SVGTe
   formattedArcLabel?: string | null;
   hidden?: boolean;
 };
-declare const PieArcLabel: React.ForwardRefExoticComponent<PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, "ref" | "color"> & {
+declare const PieArcLabel: React.ForwardRefExoticComponent<PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, "color" | "ref"> & {
   startAngle: number;
   endAngle: number;
-  innerRadius: number;
-  outerRadius: number;
   arcLabelRadius: number;
   cornerRadius: number;
   paddingAngle: number;

package/PieChart/PieArcLabel.js

@@ -7,37 +7,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PieArcLabel = void 0;
-exports.getPieArcLabelUtilityClass = getPieArcLabelUtilityClass;
-exports.pieArcLabelClasses = void 0;
 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 _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
-var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _animation = require("../internals/animation/animation");
 var _useAnimatePieArcLabel = require("../hooks/animation/useAnimatePieArcLabel");
+var _pieClasses = require("./pieClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesId", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation", "hidden"];
-function getPieArcLabelUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiPieArcLabel', slot);
-}
-const pieArcLabelClasses = exports.pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded', 'animate', 'series']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId,
-    isFaded,
-    isHighlighted,
-    skipAnimation
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded', !skipAnimation && 'animate']
-  };
-  return (0, _composeClasses.default)(slots, getPieArcLabelUtilityClass, classes);
-};
+const _excluded = ["seriesId", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation", "hidden", "className"];
 const PieArcLabelRoot = (0, _styles.styled)('text', {
   name: 'MuiPieArcLabel',
   slot: 'Root'
@@ -54,7 +34,7 @@ const PieArcLabelRoot = (0, _styles.styled)('text', {
   transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
   transitionProperty: 'opacity',
   transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION,
-  [`&.${pieArcLabelClasses.animate}`]: {
+  [`&.${_pieClasses.pieClasses.animate}`]: {
     animationDuration: `${_animation.ANIMATION_DURATION_MS}ms`
   },
   '@keyframes animate-opacity': {
@@ -77,7 +57,8 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
       isHighlighted,
       isFaded,
       skipAnimation,
-      hidden
+      hidden,
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = {
@@ -88,19 +69,18 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
     isHighlighted,
     skipAnimation
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = (0, _pieClasses.useUtilityClasses)(ownerState);
   const animatedProps = (0, _useAnimatePieArcLabel.useAnimatePieArcLabel)({
     cornerRadius,
     startAngle,
     endAngle,
-    innerRadius: arcLabelRadius,
-    outerRadius: arcLabelRadius,
+    arcLabelRadius,
     paddingAngle,
     skipAnimation,
     ref
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcLabelRoot, (0, _extends2.default)({
-    className: classes.root,
+    className: (0, _clsx.default)(classes.arcLabel, className),
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined
   }, other, animatedProps, {
@@ -121,10 +101,8 @@ process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   endAngle: _propTypes.default.number.isRequired,
   formattedArcLabel: _propTypes.default.string,
   hidden: _propTypes.default.bool,
-  innerRadius: _propTypes.default.number.isRequired,
   isFaded: _propTypes.default.bool.isRequired,
   isHighlighted: _propTypes.default.bool.isRequired,
-  outerRadius: _propTypes.default.number.isRequired,
   paddingAngle: _propTypes.default.number.isRequired,
   seriesId: _propTypes.default.string.isRequired,
   skipAnimation: _propTypes.default.bool.isRequired,

package/PieChart/PieArcLabel.mjs

@@ -2,33 +2,15 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation", "hidden"];
+const _excluded = ["seriesId", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation", "hidden", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.mjs";
 import { useAnimatePieArcLabel } from "../hooks/animation/useAnimatePieArcLabel.mjs";
+import { pieClasses, useUtilityClasses } from "./pieClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getPieArcLabelUtilityClass(slot) {
-  return generateUtilityClass('MuiPieArcLabel', slot);
-}
-export const pieArcLabelClasses = generateUtilityClasses('MuiPieArcLabel', ['root', 'highlighted', 'faded', 'animate', 'series']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId,
-    isFaded,
-    isHighlighted,
-    skipAnimation
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded', !skipAnimation && 'animate']
-  };
-  return composeClasses(slots, getPieArcLabelUtilityClass, classes);
-};
 const PieArcLabelRoot = styled('text', {
   name: 'MuiPieArcLabel',
   slot: 'Root'
@@ -45,7 +27,7 @@ const PieArcLabelRoot = styled('text', {
   transitionDuration: `${ANIMATION_DURATION_MS}ms`,
   transitionProperty: 'opacity',
   transitionTimingFunction: ANIMATION_TIMING_FUNCTION,
-  [`&.${pieArcLabelClasses.animate}`]: {
+  [`&.${pieClasses.animate}`]: {
     animationDuration: `${ANIMATION_DURATION_MS}ms`
   },
   '@keyframes animate-opacity': {
@@ -68,7 +50,8 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
       isHighlighted,
       isFaded,
       skipAnimation,
-      hidden
+      hidden,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = {
@@ -84,14 +67,13 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
     cornerRadius,
     startAngle,
     endAngle,
-    innerRadius: arcLabelRadius,
-    outerRadius: arcLabelRadius,
+    arcLabelRadius,
     paddingAngle,
     skipAnimation,
     ref
   });
   return /*#__PURE__*/_jsx(PieArcLabelRoot, _extends({
-    className: classes.root,
+    className: clsx(classes.arcLabel, className),
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined
   }, other, animatedProps, {
@@ -112,10 +94,8 @@ process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   endAngle: PropTypes.number.isRequired,
   formattedArcLabel: PropTypes.string,
   hidden: PropTypes.bool,
-  innerRadius: PropTypes.number.isRequired,
   isFaded: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired,
-  outerRadius: PropTypes.number.isRequired,
   paddingAngle: PropTypes.number.isRequired,
   seriesId: PropTypes.string.isRequired,
   skipAnimation: PropTypes.bool.isRequired,

package/PieChart/PieArcLabelPlot.js

@@ -11,6 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _PieArcLabel = require("./PieArcLabel");
 var _getLabel = require("../internals/getLabel");
@@ -38,6 +39,10 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
       }));
   }
 }
+const PieArcLabelPlotRoot = (0, _styles.styled)('g', {
+  name: 'MuiPieArcLabelPlot',
+  slot: 'Root'
+})();
 function PieArcLabelPlot(props) {
   const {
       arcLabel,
@@ -73,13 +78,11 @@ function PieArcLabelPlot(props) {
     return null;
   }
   const ArcLabel = slots?.pieArcLabel ?? _PieArcLabel.PieArcLabel;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcLabelPlotRoot, (0, _extends2.default)({}, other, {
     children: transformedData.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(ArcLabel, (0, _extends2.default)({
       startAngle: item.startAngle,
       endAngle: item.endAngle,
       paddingAngle: item.paddingAngle,
-      innerRadius: item.innerRadius,
-      outerRadius: item.outerRadius,
       arcLabelRadius: item.arcLabelRadius,
       cornerRadius: item.cornerRadius,
       hidden: item.hidden,

package/PieChart/PieArcLabelPlot.mjs

@@ -5,6 +5,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "seriesId", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import { useTransformData } from "./dataTransform/useTransformData.mjs";
 import { PieArcLabel } from "./PieArcLabel.mjs";
 import { getLabel } from "../internals/getLabel.mjs";
@@ -31,6 +32,10 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
       }));
   }
 }
+const PieArcLabelPlotRoot = styled('g', {
+  name: 'MuiPieArcLabelPlot',
+  slot: 'Root'
+})();
 function PieArcLabelPlot(props) {
   const {
       arcLabel,
@@ -66,13 +71,11 @@ function PieArcLabelPlot(props) {
     return null;
   }
   const ArcLabel = slots?.pieArcLabel ?? PieArcLabel;
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+  return /*#__PURE__*/_jsx(PieArcLabelPlotRoot, _extends({}, other, {
     children: transformedData.map(item => /*#__PURE__*/_jsx(ArcLabel, _extends({
       startAngle: item.startAngle,
       endAngle: item.endAngle,
       paddingAngle: item.paddingAngle,
-      innerRadius: item.innerRadius,
-      outerRadius: item.outerRadius,
       arcLabelRadius: item.arcLabelRadius,
       cornerRadius: item.cornerRadius,
       hidden: item.hidden,

package/PieChart/PieArcPlot.js

@@ -11,10 +11,15 @@ 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");
 var _PieArc = require("./PieArc");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "seriesId", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
+const PieArcPlotRoot = (0, _styles.styled)('g', {
+  name: 'MuiPieArcPlot',
+  slot: 'Root'
+})();
 function PieArcPlot(props) {
   const {
       slots,
@@ -47,7 +52,7 @@ function PieArcPlot(props) {
     return null;
   }
   const Arc = slots?.pieArc ?? _PieArc.PieArc;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcPlotRoot, (0, _extends2.default)({}, other, {
     children: transformedData.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
       startAngle: item.startAngle,
       endAngle: item.endAngle,

package/PieChart/PieArcPlot.mjs

@@ -5,9 +5,14 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "seriesId", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import { PieArc } from "./PieArc.mjs";
 import { useTransformData } from "./dataTransform/useTransformData.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
+const PieArcPlotRoot = styled('g', {
+  name: 'MuiPieArcPlot',
+  slot: 'Root'
+})();
 function PieArcPlot(props) {
   const {
       slots,
@@ -40,7 +45,7 @@ function PieArcPlot(props) {
     return null;
   }
   const Arc = slots?.pieArc ?? PieArc;
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+  return /*#__PURE__*/_jsx(PieArcPlotRoot, _extends({}, other, {
     children: transformedData.map((item, index) => /*#__PURE__*/_jsx(Arc, _extends({
       startAngle: item.startAngle,
       endAngle: item.endAngle,

package/PieChart/PieChart.d.mts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.mjs";
 import { type ChartsSlotProps, type ChartsSlots } from "../internals/material/index.mjs";
-import { type ChartContainerProps } from "../ChartContainer/index.mjs";
+import { type ChartsContainerProps } from "../ChartsContainer/index.mjs";
 import { type PieSeriesType } from "../models/seriesType/index.mjs";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.mjs";
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.mjs";
@@ -13,7 +13,7 @@ import { type PieChartPluginSignatures } from "./PieChart.plugins.mjs";
 export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots<'item' | 'none'>, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps<'item' | 'none'>, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type PieSeries = MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>;
-export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartPluginSignatures>, 'series' | 'slots' | 'slotProps' | 'experimentalFeatures'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+export interface PieChartProps extends Omit<ChartsContainerProps<'pie', PieChartPluginSignatures>, 'series' | 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
   /**
    * The series to display in the pie chart.
    * An array of [[PieSeries]] objects.

package/PieChart/PieChart.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.js";
 import { type ChartsSlotProps, type ChartsSlots } from "../internals/material/index.js";
-import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type ChartsContainerProps } from "../ChartsContainer/index.js";
 import { type PieSeriesType } from "../models/seriesType/index.js";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.js";
@@ -13,7 +13,7 @@ import { type PieChartPluginSignatures } from "./PieChart.plugins.js";
 export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots<'item' | 'none'>, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps<'item' | 'none'>, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type PieSeries = MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>;
-export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartPluginSignatures>, 'series' | 'slots' | 'slotProps' | 'experimentalFeatures'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+export interface PieChartProps extends Omit<ChartsContainerProps<'pie', PieChartPluginSignatures>, 'series' | 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
   /**
    * The series to display in the pie chart.
    * An array of [[PieSeries]] objects.