use generics

alexfauquette · alexfauquette · commit 8eaa2779279d · 2025-06-16T15:37:19.000+02:00
diff --git a/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx b/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx
@@ -33,7 +33,7 @@ interface ChartZoomSliderProps {
 export function ChartAxisZoomSlider({ axisDirection, axisId }: ChartZoomSliderProps) {
   const store = useStore();
   const drawingArea = useDrawingArea();
-  const zoomData = useSelector(store, selectorChartAxisZoomData, axisId);
+  const zoomData = useSelector(store, selectorChartAxisZoomData, [axisId]);
   const [showTooltip, setShowTooltip] = React.useState(false);
   const { xAxis } = useXAxes();
   const { yAxis } = useYAxes();
diff --git a/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.tsx b/packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.tsx
@@ -62,7 +62,7 @@ export function ChartAxisZoomSliderActiveTrack({
 }: ChartAxisZoomSliderActiveTrackProps) {
   const { instance, svgRef } = useChartContext<[UseChartProZoomSignature]>();
   const store = useStore<[UseChartProZoomSignature]>();
-  const axis = useSelector(store, selectorChartAxis, axisId);
+  const axis = useSelector(store, selectorChartAxis, [axisId]);
   const drawingArea = useDrawingArea();
   const activePreviewRectRef = React.useRef<SVGRectElement>(null);
   const [startThumbEl, setStartThumbEl] = React.useState<SVGRectElement | null>(null);
diff --git a/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarPro.tsx b/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarPro.tsx
@@ -1,6 +1,11 @@
 import { Toolbar, ChartsToolbarProps, ToolbarButton } from '@mui/x-charts/Toolbar';
 import * as React from 'react';
-import { useChartContext, useSelector, useChartsSlots } from '@mui/x-charts/internals';
+import {
+  useChartContext,
+  useSelector,
+  useChartsSlots,
+  UseChartCartesianAxisSignature,
+} from '@mui/x-charts/internals';
 import { useChartsLocalization } from '@mui/x-charts/hooks';
 import { selectorChartZoomIsEnabled } from '../internals/plugins/useChartProZoom';
 import { ChartsToolbarZoomInTrigger } from './ChartsToolbarZoomInTrigger';
@@ -14,7 +19,7 @@ export interface ChartsToolbarProProps extends ChartsToolbarProps {}
  */
 export function ChartsToolbarPro(props: ChartsToolbarProProps) {
   const { slots, slotProps } = useChartsSlots<ChartsSlotsPro>();
-  const { store } = useChartContext();
+  const { store } = useChartContext<[UseChartCartesianAxisSignature]>();
   const { localeText } = useChartsLocalization();
   const isZoomEnabled = useSelector(store, selectorChartZoomIsEnabled);
 
diff --git a/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarZoomInTrigger.tsx b/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarZoomInTrigger.tsx
@@ -7,6 +7,7 @@ import {
   ChartsSlotProps,
   useSelector,
   useChartsSlots,
+  UseChartCartesianAxisSignature,
 } from '@mui/x-charts/internals';
 import { RenderProp, useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import {
@@ -30,7 +31,8 @@ const ChartsToolbarZoomInTrigger = React.forwardRef<
   React.PropsWithChildren<ChartsToolbarZoomInTriggerProps>
 >(function ChartsToolbarZoomInTrigger({ render, ...other }, ref) {
   const { slots, slotProps } = useChartsSlots();
-  const { instance, store } = useChartContext<[UseChartProZoomSignature]>();
+  const { instance, store } =
+    useChartContext<[UseChartCartesianAxisSignature, UseChartProZoomSignature]>();
   const disabled = useSelector(store, selectorChartCanZoomIn);
 
   const element = useComponentRenderer(slots.baseButton, render, {
diff --git a/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarZoomOutTrigger.tsx b/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarZoomOutTrigger.tsx
@@ -7,6 +7,7 @@ import {
   ChartsSlotProps,
   useSelector,
   useChartsSlots,
+  UseChartCartesianAxisSignature,
 } from '@mui/x-charts/internals';
 import { RenderProp, useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import {
@@ -30,7 +31,8 @@ const ChartsToolbarZoomOutTrigger = React.forwardRef<
   React.PropsWithChildren<ChartsToolbarZoomOutTriggerProps>
 >(function ChartsToolbarZoomOutTrigger({ render, ...other }, ref) {
   const { slots, slotProps } = useChartsSlots();
-  const { instance, store } = useChartContext<[UseChartProZoomSignature]>();
+  const { instance, store } =
+    useChartContext<[UseChartCartesianAxisSignature, UseChartProZoomSignature]>();
   const disabled = useSelector(store, selectorChartCanZoomOut);
 
   const element = useComponentRenderer(slots.baseButton, render, {
diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.selectors.ts b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.selectors.ts
@@ -11,12 +11,12 @@ export const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature>
   state.zoom;
 
 export const selectorChartZoomIsInteracting = createSelector(
-  selectorChartZoomState,
+  [selectorChartZoomState],
   (zoom) => zoom.isInteracting,
 );
 
 export const selectorChartZoomIsEnabled = createSelector(
-  selectorChartZoomOptionsLookup,
+  [selectorChartZoomOptionsLookup],
   (optionsLookup) => Object.keys(optionsLookup).length > 0,
 );
 
diff --git a/packages/x-charts/src/LineChart/MarkPlot.tsx b/packages/x-charts/src/LineChart/MarkPlot.tsx
@@ -15,6 +15,7 @@ import { MarkElement, MarkElementProps } from './MarkElement';
 import { useChartContext } from '../context/ChartProvider';
 import { useItemHighlightedGetter, useXAxes, useYAxes } from '../hooks';
 import { useInternalIsZoomInteracting } from '../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting';
+import { UseChartCartesianAxisSignature } from '../internals/plugins/featurePlugins/useChartCartesianAxis';
 import { useSelector } from '../internals/store/useSelector';
 
 export interface MarkPlotSlots {
@@ -69,7 +70,7 @@ function MarkPlot(props: MarkPlotProps) {
   const { yAxis, yAxisIds } = useYAxes();
 
   const chartId = useChartId();
-  const { instance, store } = useChartContext();
+  const { instance, store } = useChartContext<[UseChartCartesianAxisSignature]>();
   const { isFaded, isHighlighted } = useItemHighlightedGetter();
   const xAxisInteractionIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
 
diff --git a/packages/x-charts/src/hooks/useAxis.ts b/packages/x-charts/src/hooks/useAxis.ts
@@ -1,4 +1,5 @@
 'use client';
+import { UseChartCartesianAxisSignature } from '../internals/plugins/featurePlugins/useChartCartesianAxis';
 import {
   selectorChartXAxis,
   selectorChartYAxis,
@@ -29,7 +30,7 @@ import {
  * @returns `{ xAxis, xAxisIds }` - The x-axes and their IDs.
  */
 export function useXAxes() {
-  const store = useStore();
+  const store = useStore<[UseChartCartesianAxisSignature]>();
   const { axis: xAxis, axisIds: xAxisIds } = useSelector(store, selectorChartXAxis);
 
   return { xAxis, xAxisIds };
@@ -46,7 +47,7 @@ export function useXAxes() {
  * @returns `{ yAxis, yAxisIds }` - The y-axes and their IDs.
  */
 export function useYAxes() {
-  const store = useStore();
+  const store = useStore<[UseChartCartesianAxisSignature]>();
   const { axis: yAxis, axisIds: yAxisIds } = useSelector(store, selectorChartYAxis);
 
   return { yAxis, yAxisIds };
@@ -58,7 +59,7 @@ export function useYAxes() {
  * @returns The X axis.
  */
 export function useXAxis(axisId?: AxisId) {
-  const store = useStore();
+  const store = useStore<[UseChartCartesianAxisSignature]>();
   const { axis: xAxis, axisIds: xAxisIds } = useSelector(store, selectorChartXAxis);
 
   const id = axisId ?? xAxisIds[0];
@@ -72,7 +73,7 @@ export function useXAxis(axisId?: AxisId) {
  * @returns The Y axis.
  */
 export function useYAxis(axisId?: AxisId) {
-  const store = useStore();
+  const store = useStore<[UseChartCartesianAxisSignature]>();
   const { axis: yAxis, axisIds: yAxisIds } = useSelector(store, selectorChartYAxis);
 
   const id = axisId ?? yAxisIds[0];
diff --git a/packages/x-charts/src/hooks/useItemHighlighted.ts b/packages/x-charts/src/hooks/useItemHighlighted.ts
@@ -36,8 +36,8 @@ type UseItemHighlightedParams = HighlightItemData | null;
 export function useItemHighlighted(item: UseItemHighlightedParams): UseItemHighlightedReturnType {
   const store = useStore<[UseChartHighlightSignature]>();
 
-  const isHighlighted = useSelector(store, selectorChartsIsHighlighted, item);
-  const isFaded = useSelector(store, selectorChartsIsFaded, item);
+  const isHighlighted = useSelector(store, selectorChartsIsHighlighted, [item]);
+  const isFaded = useSelector(store, selectorChartsIsFaded, [item]);
 
   return { isHighlighted, isFaded: !isHighlighted && isFaded };
 }
diff --git a/packages/x-charts/src/internals/createSeriesSelectorOfType.ts b/packages/x-charts/src/internals/createSeriesSelectorOfType.ts
@@ -48,13 +48,13 @@ export function createSeriesSelectorsOfType<T extends keyof ChartsSeriesConfig>(
   return (ids?: SeriesId | SeriesId[]) => {
     const store = useStore();
 
-    return useSelector(store, selectorSeriesWithIds, ids, fastArrayCompare);
+    return useSelector(store, selectorSeriesWithIds, [ids], fastArrayCompare);
   };
 }
 
 export function createAllSeriesSelectorOfType<T extends keyof ChartsSeriesConfig>(seriesType: T) {
   const selectorSeries = createSelector(
-    selectorChartSeriesProcessed,
+    [selectorChartSeriesProcessed],
     (processedSeries) => processedSeries[seriesType],
   );
 
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.ts
@@ -5,6 +5,6 @@ const selectorChartAnimationState: ChartRootSelector<UseChartAnimationSignature>
   state.animation;
 
 export const selectorChartSkipAnimation = createSelector(
-  selectorChartAnimationState,
+  [selectorChartAnimationState],
   (state) => state.skip || state.skipAnimationRequests > 0,
 );
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.ts
@@ -30,16 +30,18 @@ const selectorChartLeftMargin = (state: ChartState<[UseChartDimensionsSignature]
   state.dimensions.margin.left;
 
 export const selectorChartDrawingArea = createSelector(
-  selectorChartWidth,
-  selectorChartHeight,
-  selectorChartTopMargin,
-  selectorChartRightMargin,
-  selectorChartBottomMargin,
-  selectorChartLeftMargin,
-  selectorChartTopAxisSize,
-  selectorChartRightAxisSize,
-  selectorChartBottomAxisSize,
-  selectorChartLeftAxisSize,
+  [
+    selectorChartWidth,
+    selectorChartHeight,
+    selectorChartTopMargin,
+    selectorChartRightMargin,
+    selectorChartBottomMargin,
+    selectorChartLeftMargin,
+    selectorChartTopAxisSize,
+    selectorChartRightAxisSize,
+    selectorChartBottomAxisSize,
+    selectorChartLeftAxisSize,
+  ],
   (
     width,
     height,
@@ -62,16 +64,15 @@ export const selectorChartDrawingArea = createSelector(
 );
 
 export const selectorChartPropsSize = createSelector(
-  selectorChartDimensionsState,
+  [selectorChartDimensionsState],
   (dimensionsState) => ({
     width: dimensionsState.propsWidth,
     height: dimensionsState.propsHeight,
   }),
 );
 
 export const selectorChartContainerSize = createSelector(
-  selectorChartWidth,
-  selectorChartHeight,
+  [selectorChartWidth, selectorChartHeight],
   (width, height) => ({
     width,
     height,
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.selectors.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.selectors.ts
@@ -8,4 +8,4 @@ const selectorChartIdState: ChartRootSelector<UseChartIdSignature> = (state) =>
  * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
  * @returns {string} The id attribute of the chart.
  */
-export const selectorChartId = createSelector(selectorChartIdState, (idState) => idState.chartId);
+export const selectorChartId = createSelector([selectorChartIdState], (idState) => idState.chartId);
diff --git a/packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.ts b/packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.ts
@@ -5,11 +5,11 @@ export const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature
   state.series;
 
 export const selectorChartSeriesProcessed = createSelector(
-  selectorChartSeriesState,
+  [selectorChartSeriesState],
   (seriesState) => seriesState.processedSeries,
 );
 
 export const selectorChartSeriesConfig = createSelector(
-  selectorChartSeriesState,
+  [selectorChartSeriesState],
   (seriesState) => seriesState.seriesConfig,
 );
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisLayout.selectors.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisLayout.selectors.ts
@@ -6,13 +6,17 @@ export const selectorChartCartesianAxisState = (
   state: ChartState<[], [UseChartCartesianAxisSignature]>,
 ) => state.cartesianAxis;
 
-export type SelectorChartRawXAxisType = <State extends ChartState<[], [UseChartCartesianAxisSignature]>>(
+export type SelectorChartRawXAxisType = <
+  State extends ChartState<[], [UseChartCartesianAxisSignature]>,
+>(
   state: State,
 ) => DefaultedXAxis[] | undefined;
 
 export const selectorChartRawXAxis: SelectorChartRawXAxisType = (state) => state.cartesianAxis?.x;
 
-export type SelectorChartRawYAxisType = <State extends ChartState<[], [UseChartCartesianAxisSignature]>>(
+export type SelectorChartRawYAxisType = <
+  State extends ChartState<[], [UseChartCartesianAxisSignature]>,
+>(
   state: State,
 ) => DefaultedYAxis[] | undefined;
 
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.ts
@@ -3,13 +3,9 @@ import {
   selectorChartSeriesConfig,
   selectorChartSeriesProcessed,
 } from '../../corePlugins/useChartSeries';
-import { ChartsSelector, createSelector } from '../../utils/selectors';
-import { computeAxisValue, ComputeResult } from './computeAxisValue';
-import {
-  DefaultizedZoomOptions,
-  ExtremumFilter,
-  UseChartCartesianAxisSignature,
-} from './useChartCartesianAxis.types';
+import { createSelector } from '../../utils/selectors';
+import { computeAxisValue } from './computeAxisValue';
+import { ExtremumFilter, UseChartCartesianAxisSignature } from './useChartCartesianAxis.types';
 import { ChartState } from '../../models/chart';
 import { createAxisFilterMapper, createGetAxisFilters } from './createAxisFilterMapper';
 import { ZoomAxisFilters, ZoomData } from './zoom.types';
@@ -45,23 +41,22 @@ const selectorChartZoomState = (state: ChartState<[], [UseChartCartesianAxisSign
  */
 
 export const selectorChartZoomIsInteracting = createSelector(
-  selectorChartZoomState,
+  [selectorChartZoomState],
   (zoom) => zoom?.isInteracting,
 );
 
 export const selectorChartZoomMap = createSelector(
-  selectorChartZoomState,
+  [selectorChartZoomState],
   (zoom) => zoom?.zoomData && createZoomMap(zoom?.zoomData),
 );
 
-export const selectorChartZoomOptionsLookup: ChartsSelector<
-  ChartState<any>,
-  any,
-  Record<AxisId, DefaultizedZoomOptions>
-> = createSelector([selectorChartRawXAxis, selectorChartRawYAxis], (xAxis, yAxis) => ({
-  ...createZoomLookup('x')(xAxis),
-  ...createZoomLookup('y')(yAxis),
-}));
+export const selectorChartZoomOptionsLookup = createSelector(
+  [selectorChartRawXAxis, selectorChartRawYAxis],
+  (xAxis, yAxis) => ({
+    ...createZoomLookup('x')(xAxis),
+    ...createZoomLookup('y')(yAxis),
+  }),
+);
 
 export const selectorChartAxisZoomOptionsLookup = createSelector(
   [selectorChartZoomOptionsLookup, (_, axisId: AxisId) => axisId],
@@ -112,11 +107,7 @@ const getZoomAxisFilters = (
  * The only interesting selectors that merge axis data and zoom if provided.
  */
 
-export const selectorChartXAxis: ChartsSelector<
-  ChartState<any>,
-  any,
-  ComputeResult<ChartsXAxisProps>
-> = createSelector(
+export const selectorChartXAxis = createSelector(
   [
     selectorChartRawXAxis,
     selectorChartRawYAxis,
@@ -162,11 +153,7 @@ export const selectorChartXAxis: ChartsSelector<
   },
 );
 
-export const selectorChartYAxis: ChartsSelector<
-  ChartState<any>,
-  any,
-  ComputeResult<ChartsYAxisProps>
-> = createSelector(
+export const selectorChartYAxis = createSelector(
   [
     selectorChartRawXAxis,
     selectorChartRawYAxis,
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.ts
@@ -12,7 +12,7 @@ const selectHighlight: ChartRootSelector<UseChartHighlightSignature> = (state) =
 const selectSeries: ChartRootSelector<UseChartSeriesSignature> = (state) => state.series;
 
 export const selectorChartsHighlightScopePerSeriesId = createSelector(
-  selectSeries,
+  [selectSeries],
   (series): Map<SeriesId, Partial<HighlightScope> | undefined> => {
     const map = new Map<SeriesId, Partial<HighlightScope> | undefined>();
 
@@ -28,7 +28,7 @@ export const selectorChartsHighlightScopePerSeriesId = createSelector(
 );
 
 export const selectorChartsHighlightedItem = createSelector(
-  selectHighlight,
+  [selectHighlight],
   (highlight) => highlight.item,
 );
 
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.ts
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.selectors.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.selectors.ts
diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.selectors.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.selectors.ts
diff --git a/packages/x-charts/src/internals/plugins/utils/selectors.ts b/packages/x-charts/src/internals/plugins/utils/selectors.ts
diff --git a/packages/x-charts/src/internals/store/useSelector.ts b/packages/x-charts/src/internals/store/useSelector.ts

Original file line number	Diff line number	Diff line change
`@@ -36,8 +36,8 @@ type UseItemHighlightedParams = HighlightItemData \| null;`
`36`	`36`	`export function useItemHighlighted(item: UseItemHighlightedParams): UseItemHighlightedReturnType {`
`37`	`37`	`const store = useStore<[UseChartHighlightSignature]>();`
`38`	`38`
`39`		`- const isHighlighted = useSelector(store, selectorChartsIsHighlighted, item);`
`40`		`- const isFaded = useSelector(store, selectorChartsIsFaded, item);`
	`39`	`+ const isHighlighted = useSelector(store, selectorChartsIsHighlighted, [item]);`
	`40`	`+ const isFaded = useSelector(store, selectorChartsIsFaded, [item]);`
`41`	`41`
`42`	`42`	`return { isHighlighted, isFaded: !isHighlighted && isFaded };`
`43`	`43`	`}`