@mui/x-charts 7.5.1 → 7.6.1

package/BarChart/BarChart.js

@@ -62,7 +62,9 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     slots,
     slotProps,
     loading,
-    barLabel
+    barLabel,
+    highlightedItem,
+    onHighlightChange
   } = props;
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
@@ -98,6 +100,8 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     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, {
@@ -197,6 +201,13 @@ process.env.NODE_ENV !== "production" ? BarChart.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])
+  }),
   /**
    * The direction of the bar elements.
    * @default 'vertical'
@@ -246,6 +257,12 @@ process.env.NODE_ENV !== "production" ? BarChart.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 bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/BarChart/BarElement.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="@react-spring/shared" />
 import * as React from 'react';
 import { AnimatedProps } from '@react-spring/web';
-import { HighlightScope } from '../context/HighlightProvider';
 import { SeriesId } from '../models/seriesType/common';
 export interface BarElementClasses {
     /** Styles applied to the root element. */
@@ -1359,7 +1358,6 @@ interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'id' | 'color' |
     height?: string | number | undefined;
     width?: string | number | undefined;
 }> {
-    highlightScope?: Partial<HighlightScope>;
     ownerState: BarElementOwnerState;
 }
 export interface BarElementSlots {
@@ -1373,7 +1371,6 @@ export interface BarElementSlotProps {
     bar?: Partial<BarProps>;
 }
 export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGRectElement>, 'ref' | 'id'> & {
-    highlightScope?: Partial<HighlightScope>;
     /**
      * The props used for each component slot.
      * @default {}

package/BarChart/BarElement.js

@@ -19,9 +19,9 @@ var _d3Color = require("d3-color");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _web = require("@react-spring/web");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _InteractionProvider = require("../context/InteractionProvider");
+var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style", "onClick"];
+const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "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 getBarElementUtilityClass(slot) {
@@ -56,27 +56,20 @@ function BarElement(props) {
       dataIndex,
       classes: innerClasses,
       color,
-      highlightScope,
       slots,
       slotProps,
       style,
       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: 'bar',
-    seriesId: id,
-    dataIndex
-  }, highlightScope);
-  const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
-    type: 'bar',
+    isFaded,
+    isHighlighted
+  } = (0, _context.useItemHighlighted)({
     seriesId: id,
     dataIndex
-  }, highlightScope);
+  });
   const ownerState = {
     id,
     dataIndex,
@@ -112,10 +105,6 @@ process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
   // ----------------------------------------------------------------------
   classes: _propTypes.default.object,
   dataIndex: _propTypes.default.number.isRequired,
-  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,
   /**
    * The props used for each component slot.

package/BarChart/BarLabel/BarLabelItem.js

@@ -10,12 +10,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/base/utils");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _InteractionProvider = require("../../context/InteractionProvider");
-var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
 var _barLabelClasses = require("./barLabelClasses");
-var _HighlightProvider = require("../../context/HighlightProvider");
 var _getBarLabel = require("./getBarLabel");
 var _BarLabel = require("./BarLabel");
+var _context = require("../../context");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "classes", "color", "style", "dataIndex", "barLabel", "slots", "slotProps", "height", "width", "value"],
   _excluded2 = ["ownerState"];
@@ -40,21 +38,12 @@ function BarLabelItem(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
-    item
-  } = React.useContext(_InteractionProvider.InteractionContext);
-  const {
-    scope
-  } = React.useContext(_HighlightProvider.HighlighContext);
-  const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, {
-    type: 'bar',
-    seriesId,
-    dataIndex
-  }, scope);
-  const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
-    type: 'bar',
+    isFaded,
+    isHighlighted
+  } = (0, _context.useItemHighlighted)({
     seriesId,
     dataIndex
-  }, scope);
+  });
   const ownerState = {
     seriesId,
     classes: innerClasses,

package/BarChart/BarLabel/BarLabelPlot.js

@@ -92,10 +92,6 @@ process.env.NODE_ENV !== "production" ? BarLabelPlot.propTypes = {
     color: _propTypes.default.string.isRequired,
     dataIndex: _propTypes.default.number.isRequired,
     height: _propTypes.default.number.isRequired,
-    highlightScope: _propTypes.default.shape({
-      faded: _propTypes.default.oneOf(['global', 'none', 'series']),
-      highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
-    }),
     layout: _propTypes.default.oneOf(['horizontal', 'vertical']),
     maskId: _propTypes.default.string.isRequired,
     seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,

package/BarChart/BarPlot.js

@@ -13,12 +13,11 @@ var _web = require("@react-spring/web");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _BarElement = require("./BarElement");
-var _axis = require("../models/axis");
-var _constants = require("../constants");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _hooks = require("../hooks");
 var _BarClipPath = require("./BarClipPath");
 var _BarLabelPlot = require("./BarLabel/BarLabelPlot");
+var _checkScaleErrors = require("./checkScaleErrors");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 /**
@@ -80,30 +79,8 @@ const useAggregatedData = () => {
       const xAxisConfig = xAxis[xAxisKey];
       const yAxisConfig = yAxis[yAxisKey];
       const verticalLayout = series[seriesId].layout === 'vertical';
-      let baseScaleConfig;
-      if (verticalLayout) {
-        if (!(0, _axis.isBandScaleConfig)(xAxisConfig)) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should be of type "band" to display the bar series of id "${seriesId}".`);
-        }
-        if (xAxis[xAxisKey].data === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property.`);
-        }
-        baseScaleConfig = xAxisConfig;
-        if ((0, _axis.isBandScaleConfig)(yAxisConfig) || (0, _axis.isPointScaleConfig)(yAxisConfig)) {
-          throw new Error(`MUI X Charts: ${yAxisKey === _constants.DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should be a continuous type to display the bar series of id "${seriesId}".`);
-        }
-      } else {
-        if (!(0, _axis.isBandScaleConfig)(yAxisConfig)) {
-          throw new Error(`MUI X Charts: ${yAxisKey === _constants.DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should be of type "band" to display the bar series of id "${seriesId}".`);
-        }
-        if (yAxis[yAxisKey].data === undefined) {
-          throw new Error(`MUI X Charts: ${yAxisKey === _constants.DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} should have data property.`);
-        }
-        baseScaleConfig = yAxisConfig;
-        if ((0, _axis.isBandScaleConfig)(xAxisConfig) || (0, _axis.isPointScaleConfig)(xAxisConfig)) {
-          throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should be a continuous type to display the bar series of id "${seriesId}".`);
-        }
-      }
+      (0, _checkScaleErrors.checkScaleErrors)(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis);
+      const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
       const xScale = xAxisConfig.scale;
       const yScale = yAxisConfig.scale;
       const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
@@ -136,7 +113,6 @@ const useAggregatedData = () => {
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
           width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
           color: colorGetter(dataIndex),
-          highlightScope: series[seriesId].highlightScope,
           value: series[seriesId].data[dataIndex],
           maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
@@ -259,14 +235,12 @@ function BarPlot(props) {
       seriesId,
       dataIndex,
       color,
-      highlightScope,
       maskId
     }) => {
       const barElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
         id: seriesId,
         dataIndex: dataIndex,
-        color: color,
-        highlightScope: highlightScope
+        color: color
       }, other, {
         onClick: onItemClick && (event => {
           onItemClick(event, {

package/BarChart/checkScaleErrors.d.ts

@@ -0,0 +1,11 @@
+import { AxisDefaultized } from '../models/axis';
+import { SeriesId } from '../models/seriesType/common';
+export declare function checkScaleErrors(verticalLayout: boolean, seriesId: SeriesId, xAxisKey: string, xAxis: {
+    DEFAULT_X_AXIS_KEY: AxisDefaultized;
+} & {
+    [axisKey: string]: AxisDefaultized;
+}, yAxisKey: string, yAxis: {
+    DEFAULT_X_AXIS_KEY: AxisDefaultized;
+} & {
+    [axisKey: string]: AxisDefaultized;
+}): void;

package/BarChart/checkScaleErrors.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkScaleErrors = checkScaleErrors;
+var _constants = require("../constants");
+var _axis = require("../models/axis");
+const getAxisMessage = (axisDirection, axisKey) => {
+  const axisName = `${axisDirection}-axis`;
+  const axisKeyName = `${axisDirection}Axis`;
+  const axisDefaultKey = axisDirection === 'x' ? _constants.DEFAULT_X_AXIS_KEY : _constants.DEFAULT_Y_AXIS_KEY;
+  return axisKey === axisDefaultKey ? `The first \`${axisKeyName}\`` : `The ${axisName} with id "${axisKey}"`;
+};
+function checkScaleErrors(verticalLayout, seriesId, xAxisKey, xAxis, yAxisKey, yAxis) {
+  const xAxisConfig = xAxis[xAxisKey];
+  const yAxisConfig = yAxis[yAxisKey];
+  const discreteAxisConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+  const continuousAxisConfig = verticalLayout ? yAxisConfig : xAxisConfig;
+  const discreteAxisKey = verticalLayout ? xAxisKey : yAxisKey;
+  const continuousAxisKey = verticalLayout ? yAxisKey : xAxisKey;
+  const discreteAxisDirection = verticalLayout ? 'x' : 'y';
+  const continuousAxisDirection = verticalLayout ? 'y' : 'x';
+  if (!(0, _axis.isBandScaleConfig)(discreteAxisConfig)) {
+    throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisKey)} should be of type "band" to display the bar series of id "${seriesId}".`);
+  }
+  if (discreteAxisConfig.data === undefined) {
+    throw new Error(`MUI X Charts: ${getAxisMessage(discreteAxisDirection, discreteAxisKey)} should have data property.`);
+  }
+  if ((0, _axis.isBandScaleConfig)(continuousAxisConfig) || (0, _axis.isPointScaleConfig)(continuousAxisConfig)) {
+    throw new Error(`MUI X Charts: ${getAxisMessage(continuousAxisDirection, continuousAxisKey)} should be a continuous type to display the bar series of id "${seriesId}".`);
+  }
+}

package/BarChart/types.d.ts

@@ -1,4 +1,3 @@
-import type { HighlightScope } from '../context';
 import type { BarSeriesType } from '../models';
 import type { SeriesId } from '../models/seriesType/common';
 export type AnimationData = {
@@ -15,7 +14,6 @@ export interface CompletedBarData extends AnimationData {
     dataIndex: number;
     color: string;
     value: number | null;
-    highlightScope?: Partial<HighlightScope>;
     maskId: string;
 }
 export interface MaskData extends AnimationData {

package/CHANGELOG.md

@@ -3,6 +3,117 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.6.1
+
+_May 31, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+🐞 Address the `@mui/internal-test-utils` added as a direct dependency to `@mui/x-data-grid` by mistake.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.6.1`
+
+- [DataGrid] Fix column resize not working with special character (#13069) @oukunan
+- [DataGrid] Move `@mui/internal-test-utils` to dev dependency (#13318) @LukasTy
+
+#### `@mui/x-data-grid-pro@7.6.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.6.1`.
+
+#### `@mui/x-data-grid-premium@7.6.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.6.1`.
+
+## 7.6.0
+
+_May 30, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Allow to define and customize the indentation of nested items in the Tree View
+- ✨ Allow charts highlights to be controlled
+- 🌍 Improve Persian (fa-IR) locale on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.6.0`
+
+- [DataGrid] Avoid re-rendering all cells on column change (#12980) @romgrk
+- [DataGrid] Export `GridColumnHeadersProps` (#13229) @cherniavskii
+- [DataGrid] Fix header filters' issue with custom filters (#13255) @MBilalShafi
+- [DataGrid] Remove dead logic to support Safari < 13 (#13249) @oliviertassinari
+- [l10n] Improve Persian (fa-IR) locale (#12994) @amiryxe
+
+#### `@mui/x-data-grid-pro@7.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.6.0`.
+
+#### `@mui/x-data-grid-premium@7.6.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.6.0`, plus:
+
+- [DataGridPremium] Fix excel export causing column with wrong width (#13191) @romgrk
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.6.0`
+
+- [pickers] Fix `DateBuilderReturnType` when the date is `undefined` (#13244) @alexey-kozlenkov
+
+#### `@mui/x-date-pickers-pro@7.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.6.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.6.0`
+
+- [charts] Allow charts highlights to be controlled (#12828) @JCQuintas
+- [charts] Refactor axis band scaleType check (#13295) @JCQuintas
+- [charts] Refactor checkScaleErrors to improve readability and simplify axis message logic (#13305) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.6.0`
+
+- [TreeView] Add JSDoc to every instance method (#13219) @flaviendelangle
+- [TreeView] Allow to customize the indentation of nested items (#13225) @flaviendelangle
+- [TreeView] Allow to define indentation at the item level (#13126) @flaviendelangle
+
+### Docs
+
+- [docs] Add Bulk editing demo for the Community plan (#12800) @cherniavskii
+- [docs] Add conditional label formatting on tooltip page and link to label page (#13235) @JCQuintas
+- [docs] Add information about key combinations on a11y sections (#13234) @arthurbalduini
+- [docs] Cleanup of the Tree View demos (#13237) @flaviendelangle
+- [docs] Document how to customize a subsection of a line chart (#13210) @alexfauquette
+- [docs] Fix Pickers FAQ callout (#13238) @LukasTy
+- [docs] Fix Vale errors @oliviertassinari
+- [docs] Fix a small typo in property comment (#13245) @Janpot
+- [docs] Improve the Data Grid FAQ page (#13258) @MBilalShafi
+- [docs] Removes unused lines in TreeItem2 styling (#13264) @arthurbalduini
+- [docs] Small improvements on accessibility data grid doc (#13233) @arthurbalduini
+- [docs] Update Pickers demo configurations (#13303) @LukasTy
+
+### Core
+
+- [core] Add comment on why logic to sync column header (#13248) @oliviertassinari
+- [core] Fix `l10n` script execution with arguments (#13297) @LukasTy
+- [core] Prevent "Add reviewers" workflow from triggering since it doesn't work (#13236) @JCQuintas
+- [docs-infra] Fix `@mui/material` version used in sandboxes (#13260) @LukasTy
+- [test] Use `describeTreeView` for keyboard navigation tests on disabled items (#13184) @flaviendelangle
+- [test] Use `describeTreeView` for remaining items tests (#13262) @flaviendelangle
+- [test] Use test-utils from npm (#12880) @michaldudak
+- [typescript] Remove duplicate `DateRangePosition` type in favor of `RangePosition` (#13288) @LukasTy
+
 ## v7.5.1
 
 _May 23, 2024_
@@ -339,7 +450,7 @@ Same changes as in `@mui/x-date-pickers@7.3.1`.
 ### Core
 
 - [core] Fix `l10n` GH workflow (#12895) @LukasTy
-- [core] Match Base UI and Toolpad @oliviertassinari
+- [core] Match Base UI and Toolpad @oliviertassinari
 - [core] Remove redundant `setupFiles` entries in `package.json` (#12899) @LukasTy
 - [core] Use `describeTreeView` for focus tests (#12698) @flaviendelangle
 - [core] Use `describeTreeView` for type-ahead tests (#12811) @flaviendelangle

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,
@@ -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/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, {});

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,
@@ -106,10 +100,6 @@ process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
   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.