@mui/x-charts 7.5.1 → 7.6.1

package/ScatterChart/ScatterChart.js

@@ -56,7 +56,9 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     children,
     slots,
     slotProps,
-    loading
+    loading,
+    highlightedItem,
+    onHighlightChange
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveChartContainer.ResponsiveChartContainer, {
     ref: ref,
@@ -70,6 +72,8 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     xAxis: xAxis,
     yAxis: yAxis,
     sx: sx,
+    highlightedItem: highlightedItem,
+    onHighlightChange: onHighlightChange,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ZAxisContextProvider.ZAxisContextProvider, {
       zAxis: zAxis,
       children: [!disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, {
@@ -159,6 +163,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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`.
@@ -196,6 +207,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
   /**
    * Callback fired when clicking on a scatter item.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.

package/SparkLineChart/SparkLineChart.js

@@ -156,6 +156,13 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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 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.
@@ -173,6 +180,12 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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,
   /**
    * Type of plot used.
    * @default 'line'

package/context/HighlightedProvider/HighlightedContext.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { SeriesId } from '../../models/seriesType/common';
+/**
+ * The data of the highlighted item.
+ * To highlight an item, you need to provide the series id and the item id.
+ * If targeting the whole series, you can omit the item id.
+ * To clear the highlight, set the value to an empty object.
+ *
+ * @example
+ * // Highlight the item with the series id 'london' and the item id 0.
+ * { seriesId: 'london', dataIndex: 0 }
+ *
+ * // Highlight the whole series with the series id 'london'.
+ * { seriesId: 'london' }
+ *
+ * // Clear the highlight.
+ * {}
+ */
+export type HighlightItemData = {
+    /**
+     * The series id of the highlighted item.
+     */
+    seriesId?: SeriesId;
+    /**
+     * The index of the item in series data.
+     */
+    dataIndex?: number;
+};
+export type HighlightOptions = 'none' | 'item' | 'series';
+export type FadeOptions = 'none' | 'series' | 'global';
+export type HighlightScope = {
+    /**
+     * @deprecated Use `highlight` instead.
+     */
+    highlighted?: HighlightOptions;
+    /**
+     * The scope of highlighted elements.
+     * - 'none': no highlight.
+     * - 'item': only highlight the item.
+     * - 'series': highlight all elements of the same series.
+     * @default 'none'
+     */
+    highlight?: HighlightOptions;
+    /**
+     * @deprecated Use `fade` instead.
+     */
+    faded?: FadeOptions;
+    /**
+     * The scope of faded elements.
+     * - 'none': no fading.
+     * - 'series': only fade element of the same series.
+     * - 'global': fade all elements that are not highlighted.
+     * @default 'none'
+     */
+    fade?: FadeOptions;
+};
+export type HighlightedState = {
+    highlightScope?: Partial<HighlightScope>;
+    highlightedItem: HighlightItemData | null;
+    setHighlighted: (item: HighlightItemData) => void;
+    clearHighlighted: () => void;
+    isHighlighted: (input: HighlightItemData) => boolean;
+    isFaded: (input: HighlightItemData) => boolean;
+};
+export declare const HighlightedContext: React.Context<HighlightedState>;

package/context/HighlightedProvider/HighlightedContext.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HighlightedContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+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; }
+/**
+ * The data of the highlighted item.
+ * To highlight an item, you need to provide the series id and the item id.
+ * If targeting the whole series, you can omit the item id.
+ * To clear the highlight, set the value to an empty object.
+ *
+ * @example
+ * // Highlight the item with the series id 'london' and the item id 0.
+ * { seriesId: 'london', dataIndex: 0 }
+ *
+ * // Highlight the whole series with the series id 'london'.
+ * { seriesId: 'london' }
+ *
+ * // Clear the highlight.
+ * {}
+ */
+
+const HighlightedContext = exports.HighlightedContext = /*#__PURE__*/React.createContext({
+  highlightedItem: null,
+  setHighlighted: () => {},
+  clearHighlighted: () => {},
+  isHighlighted: () => false,
+  isFaded: () => false
+});
+if (process.env.NODE_ENV !== 'production') {
+  HighlightedContext.displayName = 'HighlightedContext';
+}

package/context/HighlightedProvider/HighlightedProvider.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { HighlightItemData } from './HighlightedContext';
+export type HighlightedProviderProps = {
+    children: React.ReactNode;
+    /**
+     * The item currently highlighted. Turns highlighting into a controlled prop.
+     */
+    highlightedItem?: HighlightItemData | null;
+    /**
+     * The callback fired when the highlighted item changes.
+     *
+     * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+     */
+    onHighlightChange?: (highlightedItem: HighlightItemData | null) => void;
+};
+declare function HighlightedProvider({ children, highlightedItem: highlightedItemProps, onHighlightChange, }: HighlightedProviderProps): React.JSX.Element;
+declare namespace HighlightedProvider {
+    var propTypes: any;
+}
+export { HighlightedProvider };

package/context/HighlightedProvider/HighlightedProvider.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HighlightedProvider = HighlightedProvider;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
+var _HighlightedContext = require("./HighlightedContext");
+var _createIsFaded = require("./createIsFaded");
+var _createIsHighlighted = require("./createIsHighlighted");
+var _useSeries = require("../../hooks/useSeries");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["highlighted", "faded"];
+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; }
+const mergeDeprecatedOptions = options => {
+  const _ref = options ?? {},
+    {
+      highlighted,
+      faded
+    } = _ref,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  return (0, _extends2.default)({
+    highlight: highlighted,
+    fade: faded
+  }, rest);
+};
+function HighlightedProvider({
+  children,
+  highlightedItem: highlightedItemProps,
+  onHighlightChange
+}) {
+  const [highlightedItem, setHighlightedItem] = (0, _useControlled.default)({
+    controlled: highlightedItemProps,
+    default: null,
+    name: 'HighlightedProvider',
+    state: 'highlightedItem'
+  });
+  const series = (0, _useSeries.useSeries)();
+  const seriesById = React.useMemo(() => {
+    const map = new Map();
+    Object.keys(series).forEach(seriesType => {
+      const seriesData = series[seriesType];
+      Object.keys(seriesData?.series ?? {}).forEach(seriesId => {
+        const seriesItem = seriesData?.series[seriesId];
+        map.set(seriesId, mergeDeprecatedOptions(seriesItem?.highlightScope));
+      });
+    });
+    return map;
+  }, [series]);
+  const highlightScope = highlightedItem && highlightedItem.seriesId ? seriesById.get(highlightedItem.seriesId) ?? undefined : undefined;
+  const providerValue = React.useMemo(() => {
+    return {
+      highlightScope,
+      highlightedItem,
+      setHighlighted: itemData => {
+        setHighlightedItem(itemData);
+        onHighlightChange?.(itemData);
+      },
+      clearHighlighted: () => {
+        setHighlightedItem(null);
+        onHighlightChange?.(null);
+      },
+      isHighlighted: (0, _createIsHighlighted.createIsHighlighted)(highlightScope, highlightedItem),
+      isFaded: (0, _createIsFaded.createIsFaded)(highlightScope, highlightedItem)
+    };
+  }, [highlightedItem, highlightScope, setHighlightedItem, onHighlightChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightedContext.HighlightedContext.Provider, {
+    value: providerValue,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? HighlightedProvider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: _propTypes.default.node,
+  /**
+   * 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 callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: _propTypes.default.func
+} : void 0;

package/context/HighlightedProvider/createIsFaded.d.ts

@@ -0,0 +1,2 @@
+import { HighlightItemData, HighlightScope } from './HighlightedContext';
+export declare const createIsFaded: (highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null) => (input: HighlightItemData) => boolean;

package/context/HighlightedProvider/createIsFaded.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createIsFaded = void 0;
+const createIsFaded = (highlightScope, highlightedItem) => input => {
+  if (!highlightScope) {
+    return false;
+  }
+  if (highlightScope.fade === 'series') {
+    return input.seriesId === highlightedItem?.seriesId && input.dataIndex !== highlightedItem?.dataIndex;
+  }
+  if (highlightScope.fade === 'global') {
+    return input.seriesId !== highlightedItem?.seriesId || input.dataIndex !== highlightedItem?.dataIndex;
+  }
+  return false;
+};
+exports.createIsFaded = createIsFaded;

package/context/HighlightedProvider/createIsHighlighted.d.ts

@@ -0,0 +1,2 @@
+import { HighlightItemData, HighlightScope } from './HighlightedContext';
+export declare const createIsHighlighted: (highlightScope: HighlightScope | null | undefined, highlightedItem: HighlightItemData | null) => (input: HighlightItemData) => boolean;

package/context/HighlightedProvider/createIsHighlighted.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createIsHighlighted = void 0;
+const createIsHighlighted = (highlightScope, highlightedItem) => input => {
+  if (!highlightScope) {
+    return false;
+  }
+  if (highlightScope.highlight === 'series') {
+    return input.seriesId === highlightedItem?.seriesId;
+  }
+  if (highlightScope.highlight === 'item') {
+    return input.dataIndex === highlightedItem?.dataIndex && input.seriesId === highlightedItem?.seriesId;
+  }
+  return false;
+};
+exports.createIsHighlighted = createIsHighlighted;

package/context/HighlightedProvider/index.d.ts

@@ -0,0 +1,4 @@
+export * from './HighlightedProvider';
+export * from './HighlightedContext';
+export * from './useHighlighted';
+export * from './useItemHighlighted';

package/context/HighlightedProvider/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _HighlightedProvider = require("./HighlightedProvider");
+Object.keys(_HighlightedProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _HighlightedProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HighlightedProvider[key];
+    }
+  });
+});
+var _HighlightedContext = require("./HighlightedContext");
+Object.keys(_HighlightedContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _HighlightedContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HighlightedContext[key];
+    }
+  });
+});
+var _useHighlighted = require("./useHighlighted");
+Object.keys(_useHighlighted).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useHighlighted[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useHighlighted[key];
+    }
+  });
+});
+var _useItemHighlighted = require("./useItemHighlighted");
+Object.keys(_useItemHighlighted).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useItemHighlighted[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useItemHighlighted[key];
+    }
+  });
+});

package/context/HighlightedProvider/useHighlighted.d.ts

@@ -0,0 +1,9 @@
+import { HighlightedState } from './HighlightedContext';
+/**
+ * A hook to get the highlighted state of the chart.
+ *
+ * Please consider using the `useItemHighlighted` hook if you need to check the state of a specific item.
+ *
+ * @returns {HighlightedState} the state of the chart
+ */
+export declare function useHighlighted(): HighlightedState;

package/context/HighlightedProvider/useHighlighted.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHighlighted = useHighlighted;
+var React = _interopRequireWildcard(require("react"));
+var _HighlightedContext = require("./HighlightedContext");
+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; }
+/**
+ * A hook to get the highlighted state of the chart.
+ *
+ * Please consider using the `useItemHighlighted` hook if you need to check the state of a specific item.
+ *
+ * @returns {HighlightedState} the state of the chart
+ */
+function useHighlighted() {
+  const highlighted = React.useContext(_HighlightedContext.HighlightedContext);
+  if (highlighted === undefined) {
+    throw new Error(['MUI X: Could not find the highlighted ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  return highlighted;
+}

package/context/HighlightedProvider/useItemHighlighted.d.ts

@@ -0,0 +1,21 @@
+import { HighlightItemData } from './HighlightedContext';
+export type ItemHighlightedState = {
+    /**
+     * Whether the item is highlighted.
+     */
+    isHighlighted: boolean;
+    /**
+     * Whether the item is faded.
+     */
+    isFaded: boolean;
+};
+/**
+ * A hook to check the highlighted state of the item.
+ * This function already calculates that an item is not faded if it is highlighted.
+ *
+ * If you need fine control over the state, use the `useHighlighted` hook instead.
+ *
+ * @param {HighlightItemData} item is the item to check
+ * @returns {ItemHighlightedState} the state of the item
+ */
+export declare function useItemHighlighted(item: HighlightItemData | null): ItemHighlightedState;

package/context/HighlightedProvider/useItemHighlighted.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useItemHighlighted = useItemHighlighted;
+var React = _interopRequireWildcard(require("react"));
+var _HighlightedContext = require("./HighlightedContext");
+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; }
+/**
+ * A hook to check the highlighted state of the item.
+ * This function already calculates that an item is not faded if it is highlighted.
+ *
+ * If you need fine control over the state, use the `useHighlighted` hook instead.
+ *
+ * @param {HighlightItemData} item is the item to check
+ * @returns {ItemHighlightedState} the state of the item
+ */
+function useItemHighlighted(item) {
+  const highlighted = React.useContext(_HighlightedContext.HighlightedContext);
+  if (highlighted === undefined) {
+    throw new Error(['MUI X: Could not find the highlighted ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  if (!item) {
+    return {
+      isHighlighted: false,
+      isFaded: false
+    };
+  }
+  const isHighlighted = highlighted.isHighlighted(item);
+  const isFaded = !isHighlighted && highlighted.isFaded(item);
+  return {
+    isHighlighted,
+    isFaded
+  };
+}

package/context/index.d.ts

@@ -1,3 +1,3 @@
-export type { HighlightOptions, FadeOptions, HighlightScope } from './HighlightProvider';
+export * from './HighlightedProvider';
 export { ZAxisContextProvider } from './ZAxisContextProvider';
 export type { ZAxisContextProviderProps } from './ZAxisContextProvider';

package/context/index.js

@@ -3,10 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  ZAxisContextProvider: true
+};
 Object.defineProperty(exports, "ZAxisContextProvider", {
   enumerable: true,
   get: function () {
     return _ZAxisContextProvider.ZAxisContextProvider;
   }
 });
+var _HighlightedProvider = require("./HighlightedProvider");
+Object.keys(_HighlightedProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _HighlightedProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HighlightedProvider[key];
+    }
+  });
+});
 var _ZAxisContextProvider = require("./ZAxisContextProvider");

package/esm/BarChart/BarChart.js

@@ -53,7 +53,9 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     slots,
     slotProps,
     loading,
-    barLabel
+    barLabel,
+    highlightedItem,
+    onHighlightChange
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -89,6 +91,8 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(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, {
@@ -188,6 +192,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.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
   /**
    * The direction of the bar elements.
    * @default 'vertical'
@@ -237,6 +248,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.func,
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
   /**
    * Callback fired when a bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/esm/BarChart/BarElement.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style", "onClick"];
+const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -10,8 +10,8 @@ import { styled } from '@mui/material/styles';
 import { color as d3Color } from 'd3-color';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { animated } from '@react-spring/web';
-import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { InteractionContext } from '../context/InteractionProvider';
+import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { useItemHighlighted } from '../context';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getBarElementUtilityClass(slot) {
   return generateUtilityClass('MuiBarElement', slot);
@@ -45,27 +45,20 @@ function BarElement(props) {
       dataIndex,
       classes: innerClasses,
       color,
-      highlightScope,
       slots,
       slotProps,
       style,
       onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const getInteractionItemProps = useInteractionItemProps(highlightScope);
+  const getInteractionItemProps = useInteractionItemProps();
   const {
-    item
-  } = React.useContext(InteractionContext);
-  const isHighlighted = getIsHighlighted(item, {
-    type: 'bar',
-    seriesId: id,
-    dataIndex
-  }, highlightScope);
-  const isFaded = !isHighlighted && getIsFaded(item, {
-    type: 'bar',
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted({
     seriesId: id,
     dataIndex
-  }, highlightScope);
+  });
   const ownerState = {
     id,
     dataIndex,
@@ -101,10 +94,6 @@ process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   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 props used for each component slot.