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

package/PieChart/PieArcLabel.js

@@ -13,18 +13,37 @@ 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 _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"];
+const _excluded = ["seriesId", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation", "hidden", "className"];
+/**
+ * @deprecated Use `PieClasses` from `./pieClasses` instead.
+ */
+/**
+ * @deprecated Use `PieClassKey` from `./pieClasses` instead.
+ */
+/**
+ * @deprecated Use `getPieUtilityClass` from `./pieClasses` instead.
+ */
 function getPieArcLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArcLabel', slot);
 }
+
+/**
+ * @deprecated Use `pieClasses` from `./pieClasses` instead.
+ */
 const pieArcLabelClasses = exports.pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded', 'animate', 'series']);
+
+/**
+ * @deprecated Use `useUtilityClasses` from `./pieClasses` instead.
+ */
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -54,7 +73,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 +96,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,7 +108,8 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
     isHighlighted,
     skipAnimation
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = (0, _pieClasses.useUtilityClasses)(ownerState);
+  const deprecatedClasses = useUtilityClasses(ownerState);
   const animatedProps = (0, _useAnimatePieArcLabel.useAnimatePieArcLabel)({
     cornerRadius,
     startAngle,
@@ -100,7 +121,7 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
     ref
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcLabelRoot, (0, _extends2.default)({
-    className: classes.root,
+    className: (0, _clsx.default)(classes.arcLabel, deprecatedClasses.root, className),
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined
   }, other, animatedProps, {

package/PieChart/PieArcLabel.mjs

@@ -2,20 +2,41 @@
 
 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", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation", "hidden", "className"];
 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 } 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 as usePieUtilityClasses } from "./pieClasses.mjs";
+
+/**
+ * @deprecated Use `PieClasses` from `./pieClasses` instead.
+ */
+
+/**
+ * @deprecated Use `PieClassKey` from `./pieClasses` instead.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `getPieUtilityClass` from `./pieClasses` instead.
+ */
 export function getPieArcLabelUtilityClass(slot) {
   return generateUtilityClass('MuiPieArcLabel', slot);
 }
+
+/**
+ * @deprecated Use `pieClasses` from `./pieClasses` instead.
+ */
 export const pieArcLabelClasses = generateUtilityClasses('MuiPieArcLabel', ['root', 'highlighted', 'faded', 'animate', 'series']);
+
+/**
+ * @deprecated Use `useUtilityClasses` from `./pieClasses` instead.
+ */
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -45,7 +66,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 +89,8 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
       isHighlighted,
       isFaded,
       skipAnimation,
-      hidden
+      hidden,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = {
@@ -79,7 +101,8 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
     isHighlighted,
     skipAnimation
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = usePieUtilityClasses(ownerState);
+  const deprecatedClasses = useUtilityClasses(ownerState);
   const animatedProps = useAnimatePieArcLabel({
     cornerRadius,
     startAngle,
@@ -91,7 +114,7 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
     ref
   });
   return /*#__PURE__*/_jsx(PieArcLabelRoot, _extends({
-    className: classes.root,
+    className: clsx(classes.arcLabel, deprecatedClasses.root, className),
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined
   }, other, animatedProps, {

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,7 +78,7 @@ 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,

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,7 +71,7 @@ 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,

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.js

@@ -129,7 +129,10 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
   desc: _propTypes.default.string,
-  enableKeyboardNavigation: _propTypes.default.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -253,7 +256,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: _propTypes.default.func,
   /**

package/PieChart/PieChart.mjs

@@ -122,7 +122,10 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
-  enableKeyboardNavigation: PropTypes.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -246,7 +249,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: PropTypes.func,
   /**

package/PieChart/PiePlot.d.mts

@@ -3,6 +3,7 @@ import { type PieArcLabelPlotSlots, type PieArcLabelPlotSlotProps } from "./PieA
 export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {}
 export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {}
 export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onItemClick'> {
+  className?: string;
   /**
    * Overridable component slots.
    * @default {}

package/PieChart/PiePlot.d.ts

@@ -3,6 +3,7 @@ import { type PieArcLabelPlotSlots, type PieArcLabelPlotSlotProps } from "./PieA
 export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {}
 export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {}
 export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onItemClick'> {
+  className?: string;
   /**
    * Overridable component slots.
    * @default {}

package/PieChart/PiePlot.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PiePlot = PiePlot;
+var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _PieArcPlot = require("./PieArcPlot");
 var _PieArcLabelPlot = require("./PieArcLabelPlot");
@@ -28,7 +29,8 @@ function PiePlot(props) {
     skipAnimation: inSkipAnimation,
     slots,
     slotProps,
-    onItemClick
+    onItemClick,
+    className
   } = props;
   const seriesData = (0, _usePieSeries.usePieSeriesContext)();
   const seriesLayout = (0, _usePieSeries.usePieSeriesLayout)();
@@ -42,6 +44,7 @@ function PiePlot(props) {
     seriesOrder
   } = seriesData;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    className: (0, _clsx.default)(classes.root, className),
     children: [seriesOrder.map(seriesId => {
       const {
         cornerRadius,

package/PieChart/PiePlot.mjs

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { PieArcPlot } from "./PieArcPlot.mjs";
 import { PieArcLabelPlot } from "./PieArcLabelPlot.mjs";
@@ -22,7 +23,8 @@ function PiePlot(props) {
     skipAnimation: inSkipAnimation,
     slots,
     slotProps,
-    onItemClick
+    onItemClick,
+    className
   } = props;
   const seriesData = usePieSeriesContext();
   const seriesLayout = usePieSeriesLayout();
@@ -36,6 +38,7 @@ function PiePlot(props) {
     seriesOrder
   } = seriesData;
   return /*#__PURE__*/_jsxs("g", {
+    className: clsx(classes.root, className),
     children: [seriesOrder.map(seriesId => {
       const {
         cornerRadius,

package/PieChart/dataTransform/useTransformData.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTransformData = useTransformData;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
+var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
 var _useIsItemFocusedGetter = require("../../hooks/useIsItemFocusedGetter");
 var _getModifiedArcProperties = require("./getModifiedArcProperties");
 function useTransformData(series) {
@@ -19,10 +19,7 @@ function useTransformData(series) {
     faded,
     highlighted
   } = series;
-  const {
-    isFaded: isItemFaded,
-    isHighlighted: isItemHighlighted
-  } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
+  const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
   const isItemFocused = (0, _useIsItemFocusedGetter.useIsItemFocusedGetter)();
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
     const identifier = {
@@ -30,8 +27,9 @@ function useTransformData(series) {
       seriesId,
       dataIndex: itemIndex
     };
-    const isHighlighted = isItemHighlighted(identifier);
-    const isFaded = !isHighlighted && isItemFaded(identifier);
+    const highlightState = getHighlightState(identifier);
+    const isHighlighted = highlightState === 'highlighted';
+    const isFaded = highlightState === 'faded';
     const isFocused = isItemFocused(identifier);
 
     // TODO v9: Replace the second argument with the result of useSeriesLayout
@@ -52,6 +50,6 @@ function useTransformData(series) {
       isHighlighted,
       isFocused
     }, arcSizes);
-  }), [data, seriesId, isItemHighlighted, isItemFaded, isItemFocused, series, faded, highlighted]);
+  }), [data, seriesId, getHighlightState, isItemFocused, series, faded, highlighted]);
   return dataWithHighlight;
 }

package/PieChart/dataTransform/useTransformData.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.mjs";
+import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
 import { useIsItemFocusedGetter } from "../../hooks/useIsItemFocusedGetter.mjs";
 import { getModifiedArcProperties } from "./getModifiedArcProperties.mjs";
 export function useTransformData(series) {
@@ -12,10 +12,7 @@ export function useTransformData(series) {
     faded,
     highlighted
   } = series;
-  const {
-    isFaded: isItemFaded,
-    isHighlighted: isItemHighlighted
-  } = useItemHighlightedGetter();
+  const getHighlightState = useItemHighlightStateGetter();
   const isItemFocused = useIsItemFocusedGetter();
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
     const identifier = {
@@ -23,8 +20,9 @@ export function useTransformData(series) {
       seriesId,
       dataIndex: itemIndex
     };
-    const isHighlighted = isItemHighlighted(identifier);
-    const isFaded = !isHighlighted && isItemFaded(identifier);
+    const highlightState = getHighlightState(identifier);
+    const isHighlighted = highlightState === 'highlighted';
+    const isFaded = highlightState === 'faded';
     const isFocused = isItemFocused(identifier);
 
     // TODO v9: Replace the second argument with the result of useSeriesLayout
@@ -45,6 +43,6 @@ export function useTransformData(series) {
       isHighlighted,
       isFocused
     }, arcSizes);
-  }), [data, seriesId, isItemHighlighted, isItemFaded, isItemFocused, series, faded, highlighted]);
+  }), [data, seriesId, getHighlightState, isItemFocused, series, faded, highlighted]);
   return dataWithHighlight;
 }

package/PieChart/pieClasses.d.mts

@@ -1,3 +1,4 @@
+import { type SeriesId } from "../models/seriesType/common.mjs";
 export interface PieClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -5,8 +6,28 @@ export interface PieClasses {
   series: string;
   /** Styles applied to the `g` element that contains all pie arc labels of a series. */
   seriesLabels: string;
+  /** Styles applied to an individual pie arc element. */
+  arc: string;
+  /** Styles applied to an individual pie arc label element. */
+  arcLabel: string;
+  /** Styles applied when animation is not skipped. */
+  animate: string;
+  /** Styles applied to the focused pie arc element. */
+  focusIndicator: string;
 }
 export type PieClassKey = keyof PieClasses;
+export interface PieArcOwnerState {
+  seriesId: SeriesId;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<PieClasses>;
+}
 export declare function getPieUtilityClass(slot: string): string;
 export declare const pieClasses: PieClasses;
-export declare const useUtilityClasses: (classes?: Partial<PieClasses>) => Record<"root" | "series" | "seriesLabels", string>;
+export declare const useUtilityClasses: (options?: {
+  classes?: Partial<PieClasses>;
+  skipAnimation?: boolean;
+}) => Record<"root" | "series" | "seriesLabels" | "arcLabel" | "arc" | "focusIndicator", string>;

package/PieChart/pieClasses.d.ts

@@ -1,3 +1,4 @@
+import { type SeriesId } from "../models/seriesType/common.js";
 export interface PieClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -5,8 +6,28 @@ export interface PieClasses {
   series: string;
   /** Styles applied to the `g` element that contains all pie arc labels of a series. */
   seriesLabels: string;
+  /** Styles applied to an individual pie arc element. */
+  arc: string;
+  /** Styles applied to an individual pie arc label element. */
+  arcLabel: string;
+  /** Styles applied when animation is not skipped. */
+  animate: string;
+  /** Styles applied to the focused pie arc element. */
+  focusIndicator: string;
 }
 export type PieClassKey = keyof PieClasses;
+export interface PieArcOwnerState {
+  seriesId: SeriesId;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<PieClasses>;
+}
 export declare function getPieUtilityClass(slot: string): string;
 export declare const pieClasses: PieClasses;
-export declare const useUtilityClasses: (classes?: Partial<PieClasses>) => Record<"root" | "series" | "seriesLabels", string>;
+export declare const useUtilityClasses: (options?: {
+  classes?: Partial<PieClasses>;
+  skipAnimation?: boolean;
+}) => Record<"root" | "series" | "seriesLabels" | "arcLabel" | "arc" | "focusIndicator", string>;

package/PieChart/pieClasses.js

@@ -12,12 +12,19 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getPieUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieChart', slot);
 }
-const pieClasses = exports.pieClasses = (0, _generateUtilityClasses.default)('MuiPieChart', ['root', 'series', 'seriesLabels']);
-const useUtilityClasses = classes => {
+const pieClasses = exports.pieClasses = (0, _generateUtilityClasses.default)('MuiPieChart', ['root', 'series', 'seriesLabels', 'arc', 'arcLabel', 'animate', 'focusIndicator']);
+const useUtilityClasses = options => {
+  const {
+    classes,
+    skipAnimation
+  } = options ?? {};
   const slots = {
     root: ['root'],
     series: ['series'],
-    seriesLabels: ['seriesLabels']
+    seriesLabels: ['seriesLabels'],
+    arc: ['arc'],
+    arcLabel: ['arcLabel', !skipAnimation && 'animate'],
+    focusIndicator: ['focusIndicator']
   };
   return (0, _composeClasses.default)(slots, getPieUtilityClass, classes);
 };

package/PieChart/pieClasses.mjs

@@ -4,12 +4,19 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getPieUtilityClass(slot) {
   return generateUtilityClass('MuiPieChart', slot);
 }
-export const pieClasses = generateUtilityClasses('MuiPieChart', ['root', 'series', 'seriesLabels']);
-export const useUtilityClasses = classes => {
+export const pieClasses = generateUtilityClasses('MuiPieChart', ['root', 'series', 'seriesLabels', 'arc', 'arcLabel', 'animate', 'focusIndicator']);
+export const useUtilityClasses = options => {
+  const {
+    classes,
+    skipAnimation
+  } = options ?? {};
   const slots = {
     root: ['root'],
     series: ['series'],
-    seriesLabels: ['seriesLabels']
+    seriesLabels: ['seriesLabels'],
+    arc: ['arc'],
+    arcLabel: ['arcLabel', !skipAnimation && 'animate'],
+    focusIndicator: ['focusIndicator']
   };
   return composeClasses(slots, getPieUtilityClass, classes);
 };

package/RadarChart/RadarChart.js

@@ -83,12 +83,15 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    * @default false
    */
   disableAxisListener: _propTypes.default.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: _propTypes.default.bool,
   /**
    * The number of divisions in the radar grid.
    * @default 5
    */
   divisions: _propTypes.default.number,
-  enableKeyboardNavigation: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -232,7 +235,7 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: _propTypes.default.func,
   /**

package/RadarChart/RadarChart.mjs

@@ -76,12 +76,15 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: PropTypes.bool,
   /**
    * The number of divisions in the radar grid.
    * @default 5
    */
   divisions: PropTypes.number,
-  enableKeyboardNavigation: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -225,7 +228,7 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: PropTypes.func,
   /**

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.d.mts

@@ -1,11 +1,11 @@
 import { type RadarSeriesAreaProps } from "./RadarSeriesPlot.types.mjs";
 import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.mjs";
-import type { HighlightItemIdentifierWithType, SeriesId } from "../../models/seriesType/index.mjs";
+import type { SeriesId, HighlightItemIdentifierWithType } from "../../models/seriesType/index.mjs";
+import type { HighlightState } from "../../hooks/useItemHighlightState.mjs";
 interface GetPathPropsParams {
   seriesId: SeriesId;
   classes: RadarSeriesPlotClasses;
-  isFaded: (item: HighlightItemIdentifierWithType<'radar'> | null) => boolean;
-  isHighlighted: (item: HighlightItemIdentifierWithType<'radar'> | null) => boolean;
+  getHighlightState: (item: HighlightItemIdentifierWithType<'radar'> | null) => HighlightState;
   points: {
     x: number;
     y: number;