@mui/x-charts 7.5.0 → 7.6.0

package/modern/LineChart/AnimatedArea.js

@@ -83,7 +83,7 @@ function AnimatedArea(props) {
 process.env.NODE_ENV !== "production" ? AnimatedArea.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   d: PropTypes.string.isRequired,
   ownerState: PropTypes.shape({

package/modern/LineChart/AnimatedLine.js

@@ -86,7 +86,7 @@ function AnimatedLine(props) {
 process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   d: PropTypes.string.isRequired,
   ownerState: PropTypes.shape({

package/modern/LineChart/AreaElement.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "gradientId", "highlightScope", "slots", "slotProps", "onClick"];
+const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { InteractionContext } from '../context/InteractionProvider';
+import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { AnimatedArea } from './AnimatedArea';
+import { useItemHighlighted } from '../context';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getAreaElementUtilityClass(slot) {
   return generateUtilityClass('MuiAreaElement', slot);
@@ -43,24 +43,18 @@ function AreaElement(props) {
       classes: innerClasses,
       color,
       gradientId,
-      highlightScope,
       slots,
       slotProps,
       onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const getInteractionItemProps = useInteractionItemProps(highlightScope);
+  const getInteractionItemProps = useInteractionItemProps();
   const {
-    item
-  } = React.useContext(InteractionContext);
-  const isHighlighted = getIsHighlighted(item, {
-    type: 'line',
-    seriesId: id
-  }, highlightScope);
-  const isFaded = !isHighlighted && getIsFaded(item, {
-    type: 'line',
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted({
     seriesId: id
-  }, highlightScope);
+  });
   const ownerState = {
     id,
     classes: innerClasses,
@@ -89,16 +83,12 @@ function AreaElement(props) {
 process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   color: PropTypes.string.isRequired,
   d: PropTypes.string.isRequired,
   gradientId: PropTypes.string,
-  highlightScope: PropTypes.shape({
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * If `true`, animations are skipped.

package/modern/LineChart/AreaPlot.js

@@ -97,7 +97,6 @@ function AreaPlot(props) {
       d,
       seriesId,
       color,
-      highlightScope,
       area,
       gradientUsed
     }) => !!area && /*#__PURE__*/_jsx(AreaElement, {
@@ -105,7 +104,6 @@ function AreaPlot(props) {
       d: d,
       color: color,
       gradientId: gradientUsed && getGradientId(...gradientUsed),
-      highlightScope: highlightScope,
       slots: slots,
       slotProps: slotProps,
       onClick: onItemClick && (event => onItemClick(event, {
@@ -119,7 +117,7 @@ function AreaPlot(props) {
 process.env.NODE_ENV !== "production" ? AreaPlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Callback fired when a line area item is clicked.

package/modern/LineChart/LineChart.js

@@ -57,7 +57,9 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     slots,
     slotProps,
     skipAnimation,
-    loading
+    loading,
+    highlightedItem,
+    onHighlightChange
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -82,6 +84,8 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     dataset: dataset,
     sx: sx,
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    highlightedItem: highlightedItem,
+    onHighlightChange: onHighlightChange,
     children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
     }), grid && /*#__PURE__*/_jsx(ChartsGrid, {
@@ -133,7 +137,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
@@ -183,6 +187,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -231,6 +242,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @param {null | AxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
   /**
    * Callback fired when a line element is clicked.
    */

package/modern/LineChart/LineElement.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "gradientId", "highlightScope", "slots", "slotProps", "onClick"];
+const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { InteractionContext } from '../context/InteractionProvider';
-import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { AnimatedLine } from './AnimatedLine';
+import { useItemHighlighted } from '../context';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getLineElementUtilityClass(slot) {
   return generateUtilityClass('MuiLineElement', slot);
@@ -43,24 +43,18 @@ function LineElement(props) {
       classes: innerClasses,
       color,
       gradientId,
-      highlightScope,
       slots,
       slotProps,
       onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const getInteractionItemProps = useInteractionItemProps(highlightScope);
+  const getInteractionItemProps = useInteractionItemProps();
   const {
-    item
-  } = React.useContext(InteractionContext);
-  const isHighlighted = getIsHighlighted(item, {
-    type: 'line',
-    seriesId: id
-  }, highlightScope);
-  const isFaded = !isHighlighted && getIsFaded(item, {
-    type: 'line',
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted({
     seriesId: id
-  }, highlightScope);
+  });
   const ownerState = {
     id,
     classes: innerClasses,
@@ -89,16 +83,12 @@ function LineElement(props) {
 process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   color: PropTypes.string.isRequired,
   d: PropTypes.string.isRequired,
   gradientId: PropTypes.string,
-  highlightScope: PropTypes.shape({
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * If `true`, animations are skipped.

package/modern/LineChart/LineHighlightElement.js

@@ -72,7 +72,7 @@ function LineHighlightElement(props) {
 process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired

package/modern/LineChart/LineHighlightPlot.js

@@ -90,7 +90,7 @@ function LineHighlightPlot(props) {
 process.env.NODE_ENV !== "production" ? LineHighlightPlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The props used for each component slot.

package/modern/LineChart/LinePlot.js

@@ -94,7 +94,6 @@ function LinePlot(props) {
       d,
       seriesId,
       color,
-      highlightScope,
       gradientUsed
     }) => {
       return /*#__PURE__*/_jsx(LineElement, {
@@ -102,7 +101,6 @@ function LinePlot(props) {
         d: d,
         color: color,
         gradientId: gradientUsed && getGradientId(...gradientUsed),
-        highlightScope: highlightScope,
         skipAnimation: skipAnimation,
         slots: slots,
         slotProps: slotProps,
@@ -117,7 +115,7 @@ function LinePlot(props) {
 process.env.NODE_ENV !== "production" ? LinePlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Callback fired when a line item is clicked.

package/modern/LineChart/MarkElement.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "highlightScope", "onClick", "skipAnimation"];
+const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -11,7 +11,8 @@ import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from 'd3-shape';
 import { animated, to, useSpring } from '@react-spring/web';
 import { getSymbol } from '../internals/utils';
 import { InteractionContext } from '../context/InteractionProvider';
-import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { useItemHighlighted } from '../context';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getMarkElementUtilityClass(slot) {
   return generateUtilityClass('MuiMarkElement', slot);
@@ -41,21 +42,6 @@ const MarkElementPath = styled(animated.path, {
   stroke: ownerState.color,
   strokeWidth: 2
 }));
-MarkElementPath.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  as: PropTypes.elementType,
-  ownerState: PropTypes.shape({
-    classes: PropTypes.object,
-    color: PropTypes.string.isRequired,
-    id: PropTypes.string.isRequired,
-    isFaded: PropTypes.bool.isRequired,
-    isHighlighted: PropTypes.bool.isRequired
-  }).isRequired,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-};
 /**
  * Demos:
  *
@@ -75,24 +61,20 @@ function MarkElement(props) {
       color,
       shape,
       dataIndex,
-      highlightScope,
       onClick,
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const getInteractionItemProps = useInteractionItemProps(highlightScope);
+  const getInteractionItemProps = useInteractionItemProps();
+  const {
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted({
+    seriesId: id
+  });
   const {
-    item,
     axis
   } = React.useContext(InteractionContext);
-  const isHighlighted = axis.x?.index === dataIndex || getIsHighlighted(item, {
-    type: 'line',
-    seriesId: id
-  }, highlightScope);
-  const isFaded = !isHighlighted && getIsFaded(item, {
-    type: 'line',
-    seriesId: id
-  }, highlightScope);
   const position = useSpring({
     x,
     y,
@@ -101,7 +83,7 @@ function MarkElement(props) {
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted,
+    isHighlighted: axis.x?.index === dataIndex || isHighlighted,
     isFaded,
     color
   };
@@ -125,17 +107,13 @@ function MarkElement(props) {
 process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   /**
    * The index to the element in the series' data array.
    */
   dataIndex: PropTypes.number.isRequired,
-  highlightScope: PropTypes.shape({
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The shape of the marker.

package/modern/LineChart/MarkPlot.js

@@ -139,7 +139,6 @@ function MarkPlot(props) {
               x: x,
               y: y // Don't know why TS doesn't get from the filter that y can't be null
               ,
-              highlightScope: series[seriesId].highlightScope,
               skipAnimation: skipAnimation,
               onClick: onItemClick && (event => onItemClick(event, {
                 type: 'line',
@@ -156,7 +155,7 @@ function MarkPlot(props) {
 process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Callback fired when a line mark item is clicked.

package/modern/PieChart/PieArc.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "highlightScope", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle"];
+const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle", "highlightScope"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { arc as d3Arc } from 'd3-shape';
@@ -45,7 +45,6 @@ function PieArc(props) {
       cornerRadius,
       dataIndex,
       endAngle,
-      highlightScope,
       id,
       innerRadius,
       isFaded,
@@ -65,7 +64,7 @@ function PieArc(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const getInteractionItemProps = useInteractionItemProps(highlightScope);
+  const getInteractionItemProps = useInteractionItemProps();
   return /*#__PURE__*/_jsx(PieArcRoot, _extends({
     d: to([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], (sA, eA, pA, iR, oR, cR) => d3Arc().cornerRadius(cR)({
       padAngle: pA,
@@ -87,12 +86,17 @@ function PieArc(props) {
 process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   dataIndex: PropTypes.number.isRequired,
+  /**
+   * @deprecated Use the `isFaded` or `isHighlighted` props instead.
+   */
   highlightScope: PropTypes.shape({
+    fade: PropTypes.oneOf(['global', 'none', 'series']),
     faded: PropTypes.oneOf(['global', 'none', 'series']),
+    highlight: PropTypes.oneOf(['item', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
   }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,

package/modern/PieChart/PieArcLabel.js

@@ -95,7 +95,7 @@ function PieArcLabel(props) {
 process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   color: PropTypes.string.isRequired,

package/modern/PieChart/PieArcLabelPlot.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "highlightScope", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
+const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -43,7 +43,6 @@ function PieArcLabelPlot(props) {
         additionalRadius: -5
       },
       highlighted,
-      highlightScope,
       id,
       innerRadius,
       outerRadius,
@@ -60,7 +59,6 @@ function PieArcLabelPlot(props) {
     cornerRadius,
     paddingAngle,
     id,
-    highlightScope,
     highlighted,
     faded,
     data
@@ -105,7 +103,7 @@ function PieArcLabelPlot(props) {
 process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The label displayed into the arc.
@@ -162,10 +160,6 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     outerRadius: PropTypes.number,
     paddingAngle: PropTypes.number
   }),
-  highlightScope: PropTypes.shape({
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The radius between circle center and the beginning of the arc.

package/modern/PieChart/PieArcPlot.js

@@ -1,6 +1,6 @@
 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", "highlightScope", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "arcLabelRadius", "outerRadius", "cornerRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -8,6 +8,7 @@ import { useTransition } from '@react-spring/web';
 import { PieArc } from './PieArc';
 import { defaultTransitionConfig } from './dataTransform/transition';
 import { useTransformData } from './dataTransform/useTransformData';
+import { useHighlighted } from '../context';
 import { jsx as _jsx } from "react/jsx-runtime";
 function PieArcPlot(props) {
   const {
@@ -18,7 +19,6 @@ function PieArcPlot(props) {
       cornerRadius = 0,
       paddingAngle = 0,
       id,
-      highlightScope,
       highlighted,
       faded = {
         additionalRadius: -5
@@ -34,7 +34,6 @@ function PieArcPlot(props) {
     cornerRadius,
     paddingAngle,
     id,
-    highlightScope,
     highlighted,
     faded,
     data
@@ -42,6 +41,9 @@ function PieArcPlot(props) {
   const transition = useTransition(transformedData, _extends({}, defaultTransitionConfig, {
     immediate: skipAnimation
   }));
+  const {
+    highlightScope
+  } = useHighlighted();
   if (data.length === 0) {
     return null;
   }
@@ -85,7 +87,7 @@ function PieArcPlot(props) {
 process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The radius between circle center and the arc label in px.
@@ -133,10 +135,6 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     outerRadius: PropTypes.number,
     paddingAngle: PropTypes.number
   }),
-  highlightScope: PropTypes.shape({
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  }),
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The radius between circle center and the beginning of the arc.

package/modern/PieChart/PieChart.js

@@ -61,7 +61,9 @@ function PieChart(props) {
     slots,
     slotProps,
     onItemClick,
-    loading
+    loading,
+    highlightedItem,
+    onHighlightChange
   } = props;
   const isRTL = useIsRTL();
   const margin = _extends({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
@@ -88,6 +90,8 @@ function PieChart(props) {
     colors: colors,
     sx: sx,
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
+    highlightedItem: highlightedItem,
+    onHighlightChange: onHighlightChange,
     children: [/*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
@@ -116,7 +120,7 @@ function PieChart(props) {
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
@@ -155,6 +159,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -194,6 +205,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
   /**
    * Callback fired when a pie arc is clicked.
    */

package/modern/PieChart/PiePlot.js

@@ -49,8 +49,7 @@ function PiePlot(props) {
         cx: cxParam,
         cy: cyParam,
         highlighted,
-        faded,
-        highlightScope
+        faded
       } = series[seriesId];
       const {
         cx,
@@ -75,7 +74,6 @@ function PiePlot(props) {
           id: seriesId,
           data: data,
           skipAnimation: skipAnimation,
-          highlightScope: highlightScope,
           highlighted: highlighted,
           faded: faded,
           onItemClick: onItemClick,
@@ -94,8 +92,7 @@ function PiePlot(props) {
         arcLabelMinAngle,
         data,
         cx: cxParam,
-        cy: cyParam,
-        highlightScope
+        cy: cyParam
       } = series[seriesId];
       const {
         cx,
@@ -124,7 +121,6 @@ function PiePlot(props) {
           skipAnimation: skipAnimation,
           arcLabel: arcLabel,
           arcLabelMinAngle: arcLabelMinAngle,
-          highlightScope: highlightScope,
           slots: slots,
           slotProps: slotProps
         })
@@ -135,7 +131,7 @@ function PiePlot(props) {
 process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * Callback fired when a pie item is clicked.