[charts] Remove default generic of item identifiers

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

@@ -343,3 +343,15 @@ If you're using these classes manually in your styles, update them accordingly:
 -`.MuiBar-root`
 +`.MuiBarChart-root`
 ```
+
+## Typescript
+
+### Remove default generic of `SeriesItemIdentifier`
+
+In v9 the argument of `SeriesItemIdentifier` is now required.
+
+It accept an union of series types.
+For example:
+
+- `SeriesItemIdentifier<'bar'>` for a BarChart.
+- `SeriesItemIdentifier<'bar' | 'line'>` if you compose bar and line series.

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

@@ -21,7 +21,7 @@
     "hiddenItems": {
       "type": {
         "name": "arrayOf",
-        "description": "Array<{ dataIndex?: any, seriesId?: object, type: object }>"
+        "description": "Array<{ dataIndex?: number, seriesId?: string, type: object }>"
       }
     },
     "highlightedAxis": {
@@ -37,7 +37,7 @@
     "initialHiddenItems": {
       "type": {
         "name": "arrayOf",
-        "description": "Array<{ dataIndex?: any, seriesId?: object, type: object }>"
+        "description": "Array<{ dataIndex?: number, seriesId?: string, type: object }>"
       }
     },
     "localeText": { "type": { "name": "object" } },

packages/x-charts-premium/src/ChartContainerPremium/useChartContainerPremiumProps.ts

@@ -5,10 +5,10 @@ import {
   type ChartSeriesType,
   type UseChartContainerPropsReturnValue,
 } from '@mui/x-charts/internals';
-import { type ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider';
 import { useChartContainerProProps } from '@mui/x-charts-pro/internals';
 import { DEFAULT_PLUGINS, type AllPluginSignatures } from '../internals/plugins/allPlugins';
 import type { ChartContainerPremiumProps } from './ChartContainerPremium';
+import type { ChartDataProviderPremiumProps } from '../ChartDataProviderPremium';
 
 export type UseChartContainerPremiumPropsReturnValue<
   TSeries extends ChartSeriesType,
@@ -17,7 +17,7 @@ export type UseChartContainerPremiumPropsReturnValue<
   UseChartContainerPropsReturnValue<TSeries, TSignatures>,
   'chartsSurfaceProps' | 'children'
 > & {
-  chartDataProviderPremiumProps: ChartDataProviderProps<TSeries, TSignatures>;
+  chartDataProviderPremiumProps: ChartDataProviderPremiumProps<TSeries, TSignatures>;
 };
 
 export function useChartContainerPremiumProps<
@@ -43,7 +43,7 @@ export function useChartContainerPremiumProps<
   const chartDataProviderPremiumProps = {
     ...chartDataProviderProProps,
     plugins: plugins ?? DEFAULT_PLUGINS,
-  } as unknown as ChartDataProviderProps<TSeries, TSignatures>;
+  } as unknown as ChartDataProviderPremiumProps<TSeries, TSignatures>;
 
   return {
     chartDataProviderPremiumProps,

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

@@ -30,7 +30,7 @@ import {
 export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [
   UseChartZAxisSignature,
   UseChartBrushSignature,
-  UseChartTooltipSignature,
+  UseChartTooltipSignature<TSeries>,
   UseChartInteractionSignature,
   UseChartCartesianAxisSignature<TSeries>,
   UseChartPolarAxisSignature<TSeries>,

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

@@ -142,8 +142,8 @@ ChartContainer.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(
     PropTypes.shape({
-      dataIndex: PropTypes.any,
-      seriesId: PropTypes.object,
+      dataIndex: PropTypes.number,
+      seriesId: PropTypes.string,
       type: PropTypes.object.isRequired,
     }),
   ),
@@ -193,8 +193,8 @@ ChartContainer.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(
     PropTypes.shape({
-      dataIndex: PropTypes.any,
-      seriesId: PropTypes.object,
+      dataIndex: PropTypes.number,
+      seriesId: PropTypes.string,
       type: PropTypes.object.isRequired,
     }),
   ),

packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { useSeries } from '../hooks/useSeries';
 import { type ChartSeriesDefaultized, type ChartSeriesType } from '../models/seriesType/config';
+import { type SeriesItemIdentifier } from '../models/seriesType';
 import { selectorChartsTooltipItem } from '../internals/plugins/featurePlugins/useChartTooltip';
 import { useStore } from '../internals/store/useStore';
 import { useRotationAxes, useXAxes, useYAxes } from '../hooks/useAxis';
@@ -23,7 +24,7 @@ export function useInternalItemTooltip<T extends ChartSeriesType>():
   | (T extends 'radar' ? ItemTooltipWithMultipleValues<T> : ItemTooltip<T>)
   | null {
   const store = useStore();
-  const identifier = store.use(selectorChartsTooltipItem);
+  const identifier = store.use(selectorChartsTooltipItem) as SeriesItemIdentifier<T>;
   const seriesConfig = store.use(selectorChartSeriesConfig);
 
   const series = useSeries();

packages/x-charts/src/hooks/useInteractionItemProps.ts

@@ -19,8 +19,8 @@ function onPointerDown(event: React.PointerEvent) {
   }
 }
 
-export const useInteractionItemProps = (
-  data: SeriesItemIdentifierWithData,
+export const useInteractionItemProps = <SeriesType extends ChartSeriesType>(
+  data: SeriesItemIdentifierWithData<SeriesType>,
   skip?: boolean,
 ): {
   onPointerEnter?: () => void;

packages/x-charts/src/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.ts

@@ -10,14 +10,17 @@ import {
 import { serializeIdentifier as serializeIdentifierFn } from './utils/serializeIdentifier';
 import { cleanIdentifier as cleanIdentifierFn } from './utils/cleanIdentifier';
 import type { ChartSeriesConfig } from './types';
+import type { SeriesItemIdentifier } from '../../../../models/seriesType';
+import type { ChartSeriesType } from '../../../../models/seriesType/config';
 
 export const useChartSeriesConfig: ChartPlugin<UseChartSeriesConfigSignature> = ({ store }) => {
   const serializeIdentifier: SerializeIdentifierFunction = useEventCallback((identifier) =>
     serializeIdentifierFn(store.state.seriesConfig.config, identifier),
   );
 
-  const cleanIdentifier: CleanIdentifierFunction = useEventCallback((identifier) =>
-    cleanIdentifierFn(store.state.seriesConfig.config, identifier),
+  const cleanIdentifier: CleanIdentifierFunction = useEventCallback(
+    <T extends { type: ChartSeriesType }>(identifier: T): SeriesItemIdentifier<T['type']> =>
+      cleanIdentifierFn<T['type'], T>(store.state.seriesConfig.config, identifier),
   );
 
   return {

packages/x-charts/src/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.ts

@@ -4,6 +4,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { useSvgRef } from '../../../../hooks';
 import { type UseChartTooltipSignature } from '../../featurePlugins/useChartTooltip';
 import { type SeriesItemIdentifier } from '../../../../models/seriesType';
+import { type ChartSeriesType } from '../../../../models/seriesType/config';
 import { type UseChartInteractionSignature } from '../useChartInteraction';
 import { type UseChartHighlightSignature } from '../useChartHighlight';
 import { type UseChartCartesianAxisSignature } from '../useChartCartesianAxis';
@@ -15,11 +16,11 @@ import { type ChartState } from '../../models';
 /**
  * Hook to get pointer interaction props for chart items.
  */
-export function useRegisterPointerInteractions(
+export function useRegisterPointerInteractions<SeriesType extends ChartSeriesType>(
   getItemAtPosition: (
     state: ChartState<[UseChartCartesianAxisSignature, UseChartHighlightSignature]>,
     point: { x: number; y: number },
-  ) => SeriesItemIdentifier | undefined,
+  ) => SeriesItemIdentifier<SeriesType> | undefined,
   onItemEnter?: () => void,
   onItemLeave?: () => void,
 ) {
@@ -30,7 +31,7 @@ export function useRegisterPointerInteractions(
   const svgRef = useSvgRef();
   const store = useStore<[UseChartCartesianAxisSignature, UseChartHighlightSignature]>();
   const interactionActive = React.useRef(false);
-  const lastItemRef = React.useRef<SeriesItemIdentifier | undefined>(undefined);
+  const lastItemRef = React.useRef<SeriesItemIdentifier<SeriesType> | undefined>(undefined);
 
   const onItemEnterRef = useEventCallback(() => onItemEnter?.());
   const onItemLeaveRef = useEventCallback(() => onItemLeave?.());

packages/x-charts/src/internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.ts

@@ -51,7 +51,7 @@ export const useChartTooltip: ChartPlugin<UseChartTooltipSignature<any>> = <
   });
 
   const setTooltipItem = useEventCallback(function setTooltipItem(
-    newItem: SeriesItemIdentifier<ChartSeriesType>,
+    newItem: SeriesItemIdentifier<SeriesType>,
   ) {
     if (!fastObjectShallowCompare(store.state.tooltip.item, newItem)) {
       params.onTooltipItemChange?.(newItem);

packages/x-charts/src/models/seriesType/index.ts

@@ -11,11 +11,13 @@ type DefaultizedSeriesType<T extends ChartSeriesType = ChartSeriesType> =
 
 // item identifier
 
-export type SeriesItemIdentifier<T extends ChartSeriesType = ChartSeriesType> =
-  ChartsSeriesConfig[T]['itemIdentifier'];
+export type SeriesItemIdentifier<T extends ChartSeriesType> = T extends ChartSeriesType
+  ? ChartsSeriesConfig[T]['itemIdentifier']
+  : never;
 
-export type SeriesItemIdentifierWithData<T extends ChartSeriesType = ChartSeriesType> =
-  ChartsSeriesConfig[T]['itemIdentifierWithData'];
+export type SeriesItemIdentifierWithData<T extends ChartSeriesType> = T extends ChartSeriesType
+  ? ChartsSeriesConfig[T]['itemIdentifierWithData']
+  : never;
 
 export type FocusedItemIdentifier<T extends ChartSeriesType = ChartSeriesType> = T extends
   | 'line'