@mui/x-charts 7.5.0 → 7.6.0

package/ChartContainer/ChartContainer.d.ts

@@ -3,10 +3,11 @@ import { DrawingProviderProps } from '../context/DrawingProvider';
 import { SeriesContextProviderProps } from '../context/SeriesContextProvider';
 import { ChartsSurfaceProps } from '../ChartsSurface';
 import { CartesianContextProviderProps } from '../context/CartesianContextProvider';
-export type ChartContainerProps = Omit<ChartsSurfaceProps & SeriesContextProviderProps & Omit<DrawingProviderProps, 'svgRef'> & CartesianContextProviderProps, 'children'> & {
+import { HighlightedProviderProps } from '../context';
+export type ChartContainerProps = Omit<ChartsSurfaceProps & SeriesContextProviderProps & Omit<DrawingProviderProps, 'svgRef'> & CartesianContextProviderProps & HighlightedProviderProps, 'children'> & {
     children?: React.ReactNode;
 };
-declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & SeriesContextProviderProps & Omit<DrawingProviderProps, "svgRef"> & CartesianContextProviderProps, "children"> & {
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & SeriesContextProviderProps & Omit<DrawingProviderProps, "svgRef"> & CartesianContextProviderProps & HighlightedProviderProps, "children"> & {
     children?: React.ReactNode;
 } & React.RefAttributes<unknown>>;
 export { ChartContainer };

package/ChartContainer/ChartContainer.js

@@ -14,8 +14,8 @@ var _InteractionProvider = require("../context/InteractionProvider");
 var _useReducedMotion = require("../hooks/useReducedMotion");
 var _ChartsSurface = require("../ChartsSurface");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
-var _HighlightProvider = require("../context/HighlightProvider");
 var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
+var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -33,6 +33,8 @@ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(fu
     title,
     desc,
     disableAxisListener,
+    highlightedItem,
+    onHighlightChange,
     children
   } = props;
   const svgRef = React.useRef(null);
@@ -53,7 +55,9 @@ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(fu
         yAxis: yAxis,
         dataset: dataset,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InteractionProvider.InteractionProvider, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightProvider.HighlightProvider, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.HighlightedProvider, {
+            highlightedItem: highlightedItem,
+            onHighlightChange: onHighlightChange,
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, {
               width: width,
               height: height,
@@ -73,7 +77,7 @@ const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(fu
 process.env.NODE_ENV !== "production" ? ChartContainer.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"  |
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
   className: _propTypes.default.string,
@@ -97,6 +101,13 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * The height of the chart in px.
    */
   height: _propTypes.default.number.isRequired,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  }),
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
@@ -109,6 +120,12 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   }),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: _propTypes.default.func,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.

package/ChartsAxis/ChartsAxis.js

@@ -100,7 +100,7 @@ function ChartsAxis(props) {
 process.env.NODE_ENV !== "production" ? ChartsAxis.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"  |
   // ----------------------------------------------------------------------
   /**
    * Indicate which axis to display the bottom of the charts.

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -108,7 +108,7 @@ function ChartsAxisHighlight(props) {
 process.env.NODE_ENV !== "production" ? ChartsAxisHighlight.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"  |
   // ----------------------------------------------------------------------
   x: _propTypes.default.oneOf(['band', 'line', 'none']),
   y: _propTypes.default.oneOf(['band', 'line', 'none'])

package/ChartsClipPath/ChartsClipPath.js

@@ -47,7 +47,7 @@ function ChartsClipPath(props) {
 process.env.NODE_ENV !== "production" ? ChartsClipPath.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"  |
   // ----------------------------------------------------------------------
   id: _propTypes.default.string.isRequired,
   offset: _propTypes.default.shape({

package/ChartsGrid/ChartsGrid.js

@@ -122,7 +122,7 @@ function ChartsGrid(props) {
 process.env.NODE_ENV !== "production" ? ChartsGrid.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"  |
   // ----------------------------------------------------------------------
   /**
    * Override or extend the styles applied to the component.

package/ChartsLegend/ChartsLegend.js

@@ -78,7 +78,7 @@ function ChartsLegend(inProps) {
 process.env.NODE_ENV !== "production" ? ChartsLegend.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"  |
   // ----------------------------------------------------------------------
   /**
    * Override or extend the styles applied to the component.

package/ChartsLegend/DefaultChartsLegend.js

@@ -214,7 +214,7 @@ function DefaultChartsLegend(props) {
 process.env.NODE_ENV !== "production" ? DefaultChartsLegend.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"  |
   // ----------------------------------------------------------------------
   /**
    * Override or extend the styles applied to the component.

package/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -71,7 +71,7 @@ function ChartsOnAxisClickHandler(props) {
 process.env.NODE_ENV !== "production" ? ChartsOnAxisClickHandler.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 function called for onClick events.

package/ChartsReferenceLine/ChartsReferenceLine.js

@@ -32,7 +32,7 @@ function ChartsReferenceLine(props) {
 process.env.NODE_ENV !== "production" ? ChartsReferenceLine.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 id of the axis used for the reference value.

package/ChartsSurface.js

@@ -53,7 +53,7 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
 process.env.NODE_ENV !== "production" ? ChartsSurface.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"  |
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
   className: _propTypes.default.string,

package/ChartsText/ChartsText.js

@@ -79,7 +79,7 @@ function ChartsText(props) {
 process.env.NODE_ENV !== "production" ? ChartsText.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"  |
   // ----------------------------------------------------------------------
   /**
    * Height of a text line (in `em`).

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -89,7 +89,7 @@ function ChartsAxisTooltipContent(props) {
 process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.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"  |
   // ----------------------------------------------------------------------
   axisData: _propTypes.default.shape({
     x: _propTypes.default.shape({

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -69,7 +69,7 @@ function ChartsItemTooltipContent(props) {
 process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.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.default.object.isRequired,
   content: _propTypes.default.elementType,

package/ChartsTooltip/ChartsTooltip.js

@@ -119,7 +119,7 @@ function ChartsTooltip(props) {
 process.env.NODE_ENV !== "production" ? ChartsTooltip.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"  |
   // ----------------------------------------------------------------------
   /**
    * Component to override the tooltip content when trigger is set to 'axis'.

package/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -89,7 +89,7 @@ function DefaultChartsAxisTooltipContent(props) {
 process.env.NODE_ENV !== "production" ? DefaultChartsAxisTooltipContent.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 properties of the triggered axis.

package/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -70,7 +70,7 @@ function DefaultChartsItemTooltipContent(props) {
 process.env.NODE_ENV !== "production" ? DefaultChartsItemTooltipContent.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"  |
   // ----------------------------------------------------------------------
   /**
    * Override or extend the styles applied to the component.

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -15,6 +15,7 @@ var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _useScale = require("../hooks/useScale");
 var _utils = require("../internals/utils");
 var _hooks = require("../hooks");
+var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -45,6 +46,10 @@ function ChartsVoronoiHandler(props) {
   } = React.useContext(_SeriesContextProvider.SeriesContext).scatter ?? {};
   const voronoiRef = React.useRef({});
   const delauneyRef = React.useRef(undefined);
+  const {
+    setHighlighted,
+    clearHighlighted
+  } = (0, _context.useHighlighted)();
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   (0, _useEnhancedEffect.default)(() => {
@@ -138,6 +143,7 @@ function ChartsVoronoiHandler(props) {
       dispatch({
         type: 'exitChart'
       });
+      clearHighlighted();
     };
     const handleMouseMove = event => {
       const closestPoint = getClosestPoint(event);
@@ -145,6 +151,7 @@ function ChartsVoronoiHandler(props) {
         dispatch({
           type: 'exitChart'
         });
+        clearHighlighted();
         return;
       }
       if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
@@ -154,6 +161,7 @@ function ChartsVoronoiHandler(props) {
             type: 'scatter'
           }
         });
+        clearHighlighted();
         return;
       }
       const {
@@ -168,6 +176,10 @@ function ChartsVoronoiHandler(props) {
           dataIndex
         }
       });
+      setHighlighted({
+        seriesId,
+        dataIndex
+      });
     };
     const handleMouseClick = event => {
       if (!onItemClick) {
@@ -196,7 +208,7 @@ function ChartsVoronoiHandler(props) {
       element.removeEventListener('mousemove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius, onItemClick]);
+  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {});
@@ -204,7 +216,7 @@ function ChartsVoronoiHandler(props) {
 process.env.NODE_ENV !== "production" ? ChartsVoronoiHandler.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 clicking on a scatter item.

package/ChartsXAxis/ChartsXAxis.js

@@ -257,7 +257,7 @@ function ChartsXAxis(inProps) {
 process.env.NODE_ENV !== "production" ? ChartsXAxis.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 id of the axis to render.

package/ChartsYAxis/ChartsYAxis.js

@@ -193,7 +193,7 @@ function ChartsYAxis(inProps) {
 process.env.NODE_ENV !== "production" ? ChartsYAxis.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 id of the axis to render.

package/Gauge/Gauge.js

@@ -53,7 +53,7 @@ function Gauge(props) {
 process.env.NODE_ENV !== "production" ? Gauge.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"  |
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
   classes: _propTypes.default.object,

package/Gauge/GaugeContainer.js

@@ -115,7 +115,7 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
 process.env.NODE_ENV !== "production" ? GaugeContainer.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"  |
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
   className: _propTypes.default.string,

package/Gauge/GaugeValueText.js

@@ -57,7 +57,7 @@ function GaugeValueText(props) {
 process.env.NODE_ENV !== "production" ? GaugeValueText.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"  |
   // ----------------------------------------------------------------------
   /**
    * Height of a text line (in `em`).

package/LineChart/AnimatedArea.js

@@ -93,7 +93,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.default.string.isRequired,
   ownerState: _propTypes.default.shape({

package/LineChart/AnimatedLine.js

@@ -96,7 +96,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.default.string.isRequired,
   ownerState: _propTypes.default.shape({

package/LineChart/AreaElement.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { HighlightScope } from '../context/HighlightProvider';
 import { AnimatedAreaProps } from './AnimatedArea';
 import { SeriesId } from '../models/seriesType/common';
 export interface AreaElementClasses {
@@ -33,7 +32,6 @@ export interface AreaElementSlotProps {
 }
 export interface AreaElementProps extends Omit<AreaElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedAreaProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
     d: string;
-    highlightScope?: Partial<HighlightScope>;
     /**
      * The props used for each component slot.
      * @default {}

package/LineChart/AreaElement.js

@@ -16,10 +16,10 @@ var _utils = require("@mui/base/utils");
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _InteractionProvider = require("../context/InteractionProvider");
 var _AnimatedArea = require("./AnimatedArea");
+var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "gradientId", "highlightScope", "slots", "slotProps", "onClick"];
+const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getAreaElementUtilityClass(slot) {
@@ -54,24 +54,18 @@ function AreaElement(props) {
       classes: innerClasses,
       color,
       gradientId,
-      highlightScope,
       slots,
       slotProps,
       onClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)();
   const {
-    item
-  } = React.useContext(_InteractionProvider.InteractionContext);
-  const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, {
-    type: 'line',
-    seriesId: id
-  }, highlightScope);
-  const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
-    type: 'line',
+    isFaded,
+    isHighlighted
+  } = (0, _context.useItemHighlighted)({
     seriesId: id
-  }, highlightScope);
+  });
   const ownerState = {
     id,
     classes: innerClasses,
@@ -100,16 +94,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.default.object,
   color: _propTypes.default.string.isRequired,
   d: _propTypes.default.string.isRequired,
   gradientId: _propTypes.default.string,
-  highlightScope: _propTypes.default.shape({
-    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-  }),
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * If `true`, animations are skipped.

package/LineChart/AreaPlot.js

@@ -106,7 +106,6 @@ function AreaPlot(props) {
       d,
       seriesId,
       color,
-      highlightScope,
       area,
       gradientUsed
     }) => !!area && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaElement.AreaElement, {
@@ -114,7 +113,6 @@ function AreaPlot(props) {
       d: d,
       color: color,
       gradientId: gradientUsed && getGradientId(...gradientUsed),
-      highlightScope: highlightScope,
       slots: slots,
       slotProps: slotProps,
       onClick: onItemClick && (event => onItemClick(event, {
@@ -128,7 +126,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/LineChart/LineChart.js

@@ -66,7 +66,9 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     slots,
     slotProps,
     skipAnimation,
-    loading
+    loading,
+    highlightedItem,
+    onHighlightChange
   } = props;
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
@@ -91,6 +93,8 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     dataset: dataset,
     sx: sx,
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    highlightedItem: highlightedItem,
+    onHighlightChange: onHighlightChange,
     children: [onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
     }), grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, {
@@ -142,7 +146,7 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
 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.
@@ -192,6 +196,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.default.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  }),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -240,6 +251,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.default.func,
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: _propTypes.default.func,
   /**
    * Callback fired when a line element is clicked.
    */

package/LineChart/LineElement.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { HighlightScope } from '../context/HighlightProvider';
 import { AnimatedLineProps } from './AnimatedLine';
 import { SeriesId } from '../models/seriesType/common';
 export interface LineElementClasses {
@@ -33,7 +32,6 @@ export interface LineElementSlotProps {
 }
 export interface LineElementProps extends Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedLineProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
     d: string;
-    highlightScope?: Partial<HighlightScope>;
     /**
      * The props used for each component slot.
      * @default {}

package/LineChart/LineElement.js

@@ -15,11 +15,11 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _utils = require("@mui/base/utils");
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
-var _InteractionProvider = require("../context/InteractionProvider");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _AnimatedLine = require("./AnimatedLine");
+var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "gradientId", "highlightScope", "slots", "slotProps", "onClick"];
+const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getLineElementUtilityClass(slot) {
@@ -54,24 +54,18 @@ function LineElement(props) {
       classes: innerClasses,
       color,
       gradientId,
-      highlightScope,
       slots,
       slotProps,
       onClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)();
   const {
-    item
-  } = React.useContext(_InteractionProvider.InteractionContext);
-  const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, {
-    type: 'line',
-    seriesId: id
-  }, highlightScope);
-  const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
-    type: 'line',
+    isFaded,
+    isHighlighted
+  } = (0, _context.useItemHighlighted)({
     seriesId: id
-  }, highlightScope);
+  });
   const ownerState = {
     id,
     classes: innerClasses,
@@ -100,16 +94,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.default.object,
   color: _propTypes.default.string.isRequired,
   d: _propTypes.default.string.isRequired,
   gradientId: _propTypes.default.string,
-  highlightScope: _propTypes.default.shape({
-    faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-    highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-  }),
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * If `true`, animations are skipped.

package/LineChart/LineHighlightElement.js

@@ -83,7 +83,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.default.object,
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired