test

.github/workflows/codspeed.yml

@@ -49,5 +49,5 @@ jobs:
       - name: Run benchmarks
         uses: CodSpeedHQ/action@513a19673a831f139e8717bf45ead67e47f00044
         with:
-          run: pnpm --filter @mui-x-internal/performance-charts test:performance
+          run: pnpm --trace-warnings --filter @mui-x-internal/performance-charts test:performance
           token: ${{ secrets.CODSPEED_TOKEN }}

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

@@ -157,6 +157,32 @@ And you can chose another shape by adding a `shape` property to your line series
 The codemod only removes the `experimentalMarkRendering` prop.
 If you relied on the fact that marks were `path` elements, you need to update your logic.
 
+## 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, it is recommended to use the `useItemHighlighted` hook instead:
+
+```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-pro.json

@@ -9,7 +9,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

@@ -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/line-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/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-pro/chart-data-provider-pro.json

@@ -9,7 +9,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

@@ -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/line-chart/line-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/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

@@ -201,11 +201,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

@@ -87,11 +87,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/ChartDataProviderPro/ChartDataProviderPro.tsx

@@ -7,8 +7,8 @@ import {
   AnimationProvider,
   ChartSeriesType,
   ChartAnyPluginSignature,
+  ChartProviderProps,
 } from '@mui/x-charts/internals';
-import { HighlightedProvider } from '@mui/x-charts/context';
 import { ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider';
 import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
 import { AllPluginSignatures } from '../internals/plugins/allPlugins';
@@ -21,7 +21,8 @@ const packageIdentifier = 'x-charts-pro';
 export type ChartDataProviderProProps<
   TSeries extends ChartSeriesType = ChartSeriesType,
   TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>,
-> = ChartDataProviderProps<TSeries, TSignatures>;
+> = ChartDataProviderProps<TSeries, TSignatures> &
+  Omit<ChartProviderProps<TSeries, TSignatures>['pluginParams'], 'children'>;
 
 /**
  * Orchestrates the data providers for the chart components and hooks.
@@ -53,19 +54,17 @@ export type ChartDataProviderProProps<
 function ChartDataProviderPro<TSeries extends ChartSeriesType = ChartSeriesType>(
   props: ChartDataProviderProProps<TSeries>,
 ) {
-  const { children, highlightedProviderProps, animationProviderProps, chartProviderProps } =
+  const { children, animationProviderProps, chartProviderProps } =
     useChartDataProviderProProps(props);
 
   useLicenseVerifier(packageIdentifier, releaseInfo);
 
   return (
     <ChartProvider {...chartProviderProps}>
-      <HighlightedProvider {...highlightedProviderProps}>
-        <AnimationProvider {...animationProviderProps}>
-          {children}
-          <Watermark packageName={packageIdentifier} releaseInfo={releaseInfo} />
-        </AnimationProvider>
-      </HighlightedProvider>
+      <AnimationProvider {...animationProviderProps}>
+        {children}
+        <Watermark packageName={packageIdentifier} releaseInfo={releaseInfo} />
+      </AnimationProvider>
     </ChartProvider>
   );
 }
@@ -95,11 +94,12 @@ ChartDataProviderPro.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.