[charts] Move item highligh feature to plugin system

docs/data/charts/highlighting/ControlledHighlight.js

@@ -32,6 +32,7 @@ export default function ControlledHighlight() {
 
   const handleHighLightedItem = (event) => {
     setHighLightedItem((prev) => ({
+      seriesId: 'A',
       ...prev,
       dataIndex: Number(event.target.value),
     }));

docs/data/charts/highlighting/ControlledHighlight.tsx

@@ -33,6 +33,7 @@ export default function ControlledHighlight() {
 
   const handleHighLightedItem = (event: any) => {
     setHighLightedItem((prev) => ({
+      seriesId: 'A',
       ...prev,
       dataIndex: Number(event.target.value),
     }));

docs/data/migration/migration-charts-v7/migration-charts-v7.md

@@ -148,6 +148,32 @@
 The `resolveSizeBeforeRender` prop has been removed from all components.
 If you were using this prop, you can safely remove it.
 
+## Replacing `useHighlighted` by `useItemHighlighted` and `useItemHighlightedGetter`
+
+The `useHighlighted` hook that gave access to the internal highlight state has been removed.
+
+To know if your item is highlighted, we recommend using `useItemHighlighted` hook:
+
+```jsx
+const { isFaded, isHighlighted } = useItemHighlighted({
+  seriesId,
+  dataIndex,
+});
+```
+
+If you're in a case where you have multiple series id to test (for example in the tooltip), you can use the lower level hook `useItemHighlightedGetter`.
+This hook being lower level only test is the item match with the highlight or fade scope.
+So an item could at the same time have `isFaded` and `isHighlighted` returning `true`.
+
+```jsx
+const { isFaded, isHighlighted } = useItemHighlightedGetter();
+
+const itemIsHighlighted = isHighlighted({ seriesId, dataIndex });
+
+// First make sure the item is not highlighted.
+const itemIsFaded = !itemIsHighlighted && isFaded({ seriesId, dataIndex });
+```
+
 ## Rename `labelFontSize` and `tickFontSize` props ✅
 
 The `labelFontSize` and `tickFontSize` props have been removed in favor of the style objects `labelStyle` and `tickStyle` respectively.

docs/pages/x/api/charts/bar-chart-pro.json

@@ -34,7 +34,7 @@
     "highlightedItem": {
       "type": {
         "name": "shape",
-        "description": "{ dataIndex?: number, seriesId?: number<br>&#124;&nbsp;string }"
+        "description": "{ dataIndex?: number, seriesId: number<br>&#124;&nbsp;string }"
       }
     },
     "id": { "type": { "name": "string" } },

docs/pages/x/api/charts/bar-chart.json

@@ -34,7 +34,7 @@
     "highlightedItem": {
       "type": {
         "name": "shape",
-        "description": "{ dataIndex?: number, seriesId?: number<br>&#124;&nbsp;string }"
+        "description": "{ dataIndex?: number, seriesId: number<br>&#124;&nbsp;string }"
       }
     },
     "id": { "type": { "name": "string" } },

docs/pages/x/api/charts/chart-container-pro.json

@@ -10,7 +10,7 @@
     "highlightedItem": {
       "type": {
         "name": "shape",
-        "description": "{ dataIndex?: number, seriesId?: number<br>&#124;&nbsp;string }"
+        "description": "{ dataIndex?: number, seriesId: number<br>&#124;&nbsp;string }"
       }
     },
     "id": { "type": { "name": "string" } },

docs/pages/x/api/charts/chart-container.json

@@ -10,7 +10,7 @@
     "highlightedItem": {
       "type": {
         "name": "shape",
-        "description": "{ dataIndex?: number, seriesId?: number<br>&#124;&nbsp;string }"
+        "description": "{ dataIndex?: number, seriesId: number<br>&#124;&nbsp;string }"
       }
     },
     "id": { "type": { "name": "string" } },

docs/pages/x/api/charts/chart-data-provider.json

@@ -2,10 +2,8 @@
   "props": {
     "colors": { "type": { "name": "any" }, "default": "blueberryTwilightPalette" },
     "height": { "type": { "name": "any" } },
-    "highlightedItem": { "type": { "name": "any" } },
     "id": { "type": { "name": "any" } },
     "margin": { "type": { "name": "any" } },
-    "onHighlightChange": { "type": { "name": "any" } },
     "series": { "type": { "name": "any" } },
     "skipAnimation": { "type": { "name": "any" } },
     "width": { "type": { "name": "any" } }

docs/pages/x/api/charts/heatmap.json

@@ -32,7 +32,7 @@
     "highlightedItem": {
       "type": {
         "name": "shape",
-        "description": "{ dataIndex?: number, seriesId?: number<br>&#124;&nbsp;string }"
+        "description": "{ dataIndex?: number, seriesId: number<br>&#124;&nbsp;string }"
       }
     },
     "id": { "type": { "name": "string" } },

docs/pages/x/api/charts/line-chart-pro.json

@@ -35,7 +35,7 @@
     "highlightedItem": {
       "type": {
         "name": "shape",
-        "description": "{ dataIndex?: number, seriesId?: number<br>&#124;&nbsp;string }"
+        "description": "{ dataIndex?: number, seriesId: number<br>&#124;&nbsp;string }"
       }
     },
     "id": { "type": { "name": "string" } },

docs/pages/x/api/charts/line-chart.json

@@ -35,7 +35,7 @@
     "highlightedItem": {
       "type": {
         "name": "shape",
-        "description": "{ dataIndex?: number, seriesId?: number<br>&#124;&nbsp;string }"
+        "description": "{ dataIndex?: number, seriesId: number<br>&#124;&nbsp;string }"
       }
     },
     "id": { "type": { "name": "string" } },

docs/pages/x/api/charts/pie-chart.json

@@ -15,7 +15,7 @@
     "highlightedItem": {
       "type": {
         "name": "shape",
-        "description": "{ dataIndex?: number, seriesId?: number<br>&#124;&nbsp;string }"
+        "description": "{ dataIndex?: number, seriesId: number<br>&#124;&nbsp;string }"
       }
     },
     "id": { "type": { "name": "string" } },

docs/pages/x/api/charts/scatter-chart-pro.json

@@ -34,7 +34,7 @@
     "highlightedItem": {
       "type": {
         "name": "shape",
-        "description": "{ dataIndex?: number, seriesId?: number<br>&#124;&nbsp;string }"
+        "description": "{ dataIndex?: number, seriesId: number<br>&#124;&nbsp;string }"
       }
     },
     "id": { "type": { "name": "string" } },

docs/pages/x/api/charts/scatter-chart.json

@@ -34,7 +34,7 @@
     "highlightedItem": {
       "type": {
         "name": "shape",
-        "description": "{ dataIndex?: number, seriesId?: number<br>&#124;&nbsp;string }"
+        "description": "{ dataIndex?: number, seriesId: number<br>&#124;&nbsp;string }"
       }
     },
     "id": { "type": { "name": "string" } },

docs/pages/x/api/charts/spark-line-chart.json

@@ -15,7 +15,7 @@
     "highlightedItem": {
       "type": {
         "name": "shape",
-        "description": "{ dataIndex?: number, seriesId?: number<br>&#124;&nbsp;string }"
+        "description": "{ dataIndex?: number, seriesId: number<br>&#124;&nbsp;string }"
       }
     },
     "id": { "type": { "name": "string" } },

docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json

@@ -25,7 +25,7 @@
     },
     "hideLegend": { "description": "If <code>true</code>, the legend is not rendered." },
     "highlightedItem": {
-      "description": "The item currently highlighted. Turns highlighting into a controlled prop."
+      "description": "The highlighted item. Used when the highlight is controlled."
     },
     "id": {
       "description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide this prop. It falls back to a randomly generated id."

docs/translations/api-docs/charts/bar-chart/bar-chart.json

@@ -25,7 +25,7 @@
     },
     "hideLegend": { "description": "If <code>true</code>, the legend is not rendered." },
     "highlightedItem": {
-      "description": "The item currently highlighted. Turns highlighting into a controlled prop."
+      "description": "The highlighted item. Used when the highlight is controlled."
     },
     "id": {
       "description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide this prop. It falls back to a randomly generated id."

docs/translations/api-docs/charts/chart-container-pro/chart-container-pro.json

@@ -12,7 +12,7 @@
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
     "highlightedItem": {
-      "description": "The item currently highlighted. Turns highlighting into a controlled prop."
+      "description": "The highlighted item. Used when the highlight is controlled."
     },
     "id": {
       "description": "This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id."

docs/translations/api-docs/charts/chart-container/chart-container.json

@@ -12,7 +12,7 @@
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
     "highlightedItem": {
-      "description": "The item currently highlighted. Turns highlighting into a controlled prop."
+      "description": "The highlighted item. Used when the highlight is controlled."
     },
     "id": {
       "description": "This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id."

docs/translations/api-docs/charts/chart-data-provider/chart-data-provider.json

@@ -5,16 +5,12 @@
     "height": {
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
-    "highlightedItem": {
-      "description": "The item currently highlighted. Turns highlighting into a controlled prop."
-    },
     "id": {
       "description": "This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id."
     },
     "margin": {
       "description": "The margin between the SVG and the drawing area. It&#39;s used for leaving some space for extra information such as the x- and y-axis or legend. Accepts an object with the optional properties: <code>top</code>, <code>bottom</code>, <code>left</code>, and <code>right</code>."
     },
-    "onHighlightChange": { "description": "The callback fired when the highlighted item changes." },
     "series": {
       "description": "The array of series to display. Each type of series has its own specificity. Please refer to the appropriate docs page to learn more about it."
     },

docs/translations/api-docs/charts/heatmap/heatmap.json

@@ -15,7 +15,7 @@
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
     "highlightedItem": {
-      "description": "The item currently highlighted. Turns highlighting into a controlled prop."
+      "description": "The highlighted item. Used when the highlight is controlled."
     },
     "id": {
       "description": "This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id."

docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json

@@ -27,7 +27,7 @@
     },
     "hideLegend": { "description": "If <code>true</code>, the legend is not rendered." },
     "highlightedItem": {
-      "description": "The item currently highlighted. Turns highlighting into a controlled prop."
+      "description": "The highlighted item. Used when the highlight is controlled."
     },
     "id": {
       "description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide this prop. It falls back to a randomly generated id."

docs/translations/api-docs/charts/line-chart/line-chart.json

@@ -27,7 +27,7 @@
     },
     "hideLegend": { "description": "If <code>true</code>, the legend is not rendered." },
     "highlightedItem": {
-      "description": "The item currently highlighted. Turns highlighting into a controlled prop."
+      "description": "The highlighted item. Used when the highlight is controlled."
     },
     "id": {
       "description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide this prop. It falls back to a randomly generated id."

docs/translations/api-docs/charts/pie-chart/pie-chart.json

@@ -13,7 +13,7 @@
     },
     "hideLegend": { "description": "If <code>true</code>, the legend is not rendered." },
     "highlightedItem": {
-      "description": "The item currently highlighted. Turns highlighting into a controlled prop."
+      "description": "The highlighted item. Used when the highlight is controlled."
     },
     "id": {
       "description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide this prop. It falls back to a randomly generated id."

docs/translations/api-docs/charts/scatter-chart-pro/scatter-chart-pro.json

@@ -24,7 +24,7 @@
     },
     "hideLegend": { "description": "If <code>true</code>, the legend is not rendered." },
     "highlightedItem": {
-      "description": "The item currently highlighted. Turns highlighting into a controlled prop."
+      "description": "The highlighted item. Used when the highlight is controlled."
     },
     "id": {
       "description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide this prop. It falls back to a randomly generated id."

docs/translations/api-docs/charts/scatter-chart/scatter-chart.json

@@ -24,7 +24,7 @@
     },
     "hideLegend": { "description": "If <code>true</code>, the legend is not rendered." },
     "highlightedItem": {
-      "description": "The item currently highlighted. Turns highlighting into a controlled prop."
+      "description": "The highlighted item. Used when the highlight is controlled."
     },
     "id": {
       "description": "This prop is used to help implement the accessibility logic. If you don&#39;t provide this prop. It falls back to a randomly generated id."

docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json

@@ -16,7 +16,7 @@
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
     "highlightedItem": {
-      "description": "The item currently highlighted. Turns highlighting into a controlled prop."
+      "description": "The highlighted item. Used when the highlight is controlled."
     },
     "id": {
       "description": "This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id."

packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx

@@ -206,11 +206,12 @@ BarChartPro.propTypes = {
    */
   hideLegend: PropTypes.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   }),
   /**
    * This prop is used to help implement the accessibility logic.

packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx

@@ -94,11 +94,12 @@ ChartContainerPro.propTypes = {
    */
   height: PropTypes.number,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   }),
   /**
    * This prop is used to help implement the accessibility logic.

packages/x-charts-pro/src/Heatmap/Heatmap.tsx

@@ -244,11 +244,12 @@ Heatmap.propTypes = {
    */
   height: PropTypes.number,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   }),
   /**
    * This prop is used to help implement the accessibility logic.

packages/x-charts-pro/src/Heatmap/HeatmapItem.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { useItemHighlighted } from '@mui/x-charts/context';
+import { useItemHighlighted } from '@mui/x-charts/hooks';
 import { useInteractionItemProps, SeriesId } from '@mui/x-charts/internals';
 import { HeatmapClasses, getHeatmapUtilityClass } from './heatmapClasses';
 

packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx

@@ -276,11 +276,12 @@ LineChartPro.propTypes = {
    */
   hideLegend: PropTypes.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   }),
   /**
    * This prop is used to help implement the accessibility logic.

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx

@@ -146,11 +146,12 @@ ScatterChartPro.propTypes = {
    */
   hideLegend: PropTypes.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   }),
   /**
    * This prop is used to help implement the accessibility logic.

packages/x-charts-pro/src/internals/plugins/allPlugins.ts

@@ -9,13 +9,16 @@ import {
   UseChartInteractionSignature,
   useChartZAxis,
   UseChartZAxisSignature,
+  useChartHighlight,
+  UseChartHighlightSignature,
 } from '@mui/x-charts/internals';
 import { useChartProZoom, UseChartProZoomSignature } from './useChartProZoom';
 
 export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [
   UseChartZAxisSignature,
   UseChartCartesianAxisSignature<TSeries>,
   UseChartInteractionSignature,
+  UseChartHighlightSignature,
   UseChartProZoomSignature,
 ];
 
@@ -26,5 +29,6 @@ export const ALL_PLUGINS = [
   useChartZAxis,
   useChartCartesianAxis,
   useChartInteraction,
+  useChartHighlight,
   useChartProZoom,
 ];

packages/x-charts/src/BarChart/BarChart.tsx

@@ -216,11 +216,12 @@ BarChart.propTypes = {
    */
   hideLegend: PropTypes.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   }),
   /**
    * This prop is used to help implement the accessibility logic.