[charts] Use directly selector from @mui/x-internals (#20365)

Author: alexfauquette

packages/x-charts-pro/src/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.ts

@@ -1,6 +1,5 @@
-import { createSelectorMemoized } from '@mui/x-internals/store';
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
 import {
-  createSelector,
   selectorChartSeriesConfig,
   selectorChartSeriesProcessed,
   selectorChartDrawingArea,
@@ -14,7 +13,7 @@ import { UseChartFunnelAxisSignature } from './useChartFunnelAxis.types';
 export const selectorFunnel = (state: ChartState<[], [UseChartFunnelAxisSignature]>) =>
   state.funnel;
 
-export const selectorFunnelGap = createSelector([selectorFunnel], (funnel) => funnel?.gap ?? 0);
+export const selectorFunnelGap = createSelector(selectorFunnel, (funnel) => funnel?.gap ?? 0);
 
 export const selectorChartXAxis = createSelectorMemoized(
   selectorChartRawXAxis,

packages/x-charts-pro/src/SankeyChart/plugins/useSankeyHighlight.selectors.ts

@@ -1,8 +1,5 @@
-import {
-  createSelector,
-  type ChartRootSelector,
-  type UseChartSeriesSignature,
-} from '@mui/x-charts/internals';
+import { createSelector } from '@mui/x-internals/store';
+import { type ChartRootSelector, type UseChartSeriesSignature } from '@mui/x-charts/internals';
 import type { UseSankeyHighlightSignature } from './useSankeyHighlight.types';
 import type { SankeyLayoutLink, SankeyNodeId } from '../sankey.types';
 import type {
@@ -17,7 +14,7 @@ const selectorSankeyHighlight = (state: UseSankeyHighlightSignature['state']) =>
 const selectSeries: ChartRootSelector<UseChartSeriesSignature> = (state) => state.series;
 
 const selectorSankeySeries = createSelector(
-  [selectSeries],
+  selectSeries,
   (series) =>
     series.processedSeries.sankey?.series[series.processedSeries.sankey?.seriesOrder[0]] || null,
 );
@@ -31,7 +28,7 @@ const DEFAULT_FADE: SankeyNodeFade & SankeyLinkFade = 'none';
  * Defaults to 'nodes' if not specified.
  */
 export const selectorNodeHighlightConfig = createSelector(
-  [selectorSankeySeries],
+  selectorSankeySeries,
   (series): SankeyNodeHighlight => series?.nodeOptions?.highlight ?? DEFAULT_NODE_HIGHLIGHT,
 );
 
@@ -40,7 +37,7 @@ export const selectorNodeHighlightConfig = createSelector(
  * Defaults to 'none' if not specified.
  */
 export const selectorNodeFadeConfig = createSelector(
-  [selectorSankeySeries],
+  selectorSankeySeries,
   (series): SankeyNodeFade => series?.nodeOptions?.fade ?? DEFAULT_FADE,
 );
 
@@ -49,7 +46,7 @@ export const selectorNodeFadeConfig = createSelector(
  * Defaults to 'links' if not specified.
  */
 export const selectorLinkHighlightConfig = createSelector(
-  [selectorSankeySeries],
+  selectorSankeySeries,
   (series): SankeyLinkHighlight => series?.linkOptions?.highlight ?? DEFAULT_LINK_HIGHLIGHT,
 );
 
@@ -58,7 +55,7 @@ export const selectorLinkHighlightConfig = createSelector(
  * Defaults to 'none' if not specified.
  */
 export const selectorLinkFadeConfig = createSelector(
-  [selectorSankeySeries],
+  selectorSankeySeries,
   (series): SankeyLinkFade => series?.linkOptions?.fade ?? DEFAULT_FADE,
 );
 
@@ -68,7 +65,7 @@ export const selectorLinkFadeConfig = createSelector(
  * @returns {SankeyItemIdentifier | null} The highlighted item identifier or null.
  */
 export const selectorSankeyHighlightedItem = createSelector(
-  [selectorSankeyHighlight],
+  selectorSankeyHighlight,
   (highlight) => highlight.item,
 );
 
@@ -79,7 +76,9 @@ export const selectorSankeyHighlightedItem = createSelector(
  * - It's connected to a highlighted link (based on linkOptions.highlight)
  */
 export const selectorIsNodeHighlighted = createSelector(
-  [selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig],
+  selectorSankeyHighlightedItem,
+  selectorNodeHighlightConfig,
+  selectorLinkHighlightConfig,
   (highlightedItem, nodeHighlight, linkHighlight, nodeId: SankeyNodeId): boolean => {
     if (!highlightedItem) {
       return false;
@@ -119,7 +118,9 @@ export const selectorIsNodeHighlighted = createSelector(
  * - It's connected to a highlighted node (based on nodeOptions.highlight)
  */
 export const selectorIsLinkHighlighted = createSelector(
-  [selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig],
+  selectorSankeyHighlightedItem,
+  selectorNodeHighlightConfig,
+  selectorLinkHighlightConfig,
   (highlightedItem, nodeHighlight, linkHighlight, link: SankeyLayoutLink): boolean => {
     if (!highlightedItem) {
       return false;
@@ -164,7 +165,9 @@ export const selectorIsLinkHighlighted = createSelector(
  * - The fade mode is 'global' for the highlighted element type
  */
 export const selectorIsSankeyItemFaded = createSelector(
-  [selectorSankeyHighlightedItem, selectorNodeFadeConfig, selectorLinkFadeConfig],
+  selectorSankeyHighlightedItem,
+  selectorNodeFadeConfig,
+  selectorLinkFadeConfig,
   (highlightedItem, nodeFade, linkFade, isHighlighted: boolean): boolean => {
     if (!highlightedItem || isHighlighted) {
       return false;

packages/x-charts-pro/src/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.ts

@@ -1,21 +1,23 @@
-import { createSelector, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { createSelector } from '@mui/x-internals/store';
+import { selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { selectorChartZoomState } from './useChartProZoom.selectors';
 import type { ZoomInteractionName, PanInteractionName } from './ZoomInteractionConfig.types';
 
 export const selectorZoomInteractionConfig = createSelector(
-  [selectorChartZoomState],
+  selectorChartZoomState,
   (zoomState, interactionName: ZoomInteractionName) =>
     zoomState.zoomInteractionConfig.zoom[interactionName] ?? null,
 );
 
 export const selectorPanInteractionConfig = createSelector(
-  [selectorChartZoomState],
+  selectorChartZoomState,
   (zoomState, interactionName: PanInteractionName) =>
     zoomState.zoomInteractionConfig.pan[interactionName] ?? null,
 );
 
 export const selectorIsZoomBrushEnabled = createSelector(
-  [selectorChartZoomOptionsLookup, (state) => selectorZoomInteractionConfig(state, 'brush')],
+  selectorChartZoomOptionsLookup,
+  (state) => selectorZoomInteractionConfig(state, 'brush'),
   (zoomOptions, zoomInteractionConfig) =>
     (Object.keys(zoomOptions).length > 0 && zoomInteractionConfig) || false,
 );

packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.selectors.ts

@@ -1,7 +1,7 @@
+import { createSelector } from '@mui/x-internals/store';
 import {
   AxisId,
   ChartRootSelector,
-  createSelector,
   selectorChartZoomMap,
   selectorChartZoomOptionsLookup,
 } from '@mui/x-charts/internals';
@@ -12,22 +12,23 @@ 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,
 );
 
 export const selectorChartAxisZoomData = createSelector(
-  [selectorChartZoomMap],
+  selectorChartZoomMap,
   (zoomMap, axisId: AxisId) => zoomMap?.get(axisId),
 );
 
 export const selectorChartCanZoomOut = createSelector(
-  [selectorChartZoomState, selectorChartZoomOptionsLookup],
+  selectorChartZoomState,
+  selectorChartZoomOptionsLookup,
   (zoomState, zoomOptions) => {
     return zoomState.zoomData.every((zoomData) => {
       const span = zoomData.end - zoomData.start;
@@ -41,7 +42,8 @@ export const selectorChartCanZoomOut = createSelector(
 );
 
 export const selectorChartCanZoomIn = createSelector(
-  [selectorChartZoomState, selectorChartZoomOptionsLookup],
+  selectorChartZoomState,
+  selectorChartZoomOptionsLookup,
   (zoomState, zoomOptions) => {
     return zoomState.zoomData.every((zoomData) => {
       const span = zoomData.end - zoomData.start;

packages/x-charts/src/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.ts

@@ -1,10 +1,11 @@
-import { ChartRootSelector, createSelector } from '../../utils/selectors';
+import { createSelector } from '@mui/x-internals/store';
+import { ChartRootSelector } from '../../utils/selectors';
 import type { UseChartAnimationSignature } from './useChartAnimation.types';
 
 const selectorChartAnimationState: ChartRootSelector<UseChartAnimationSignature> = (state) =>
   state.animation;
 
 export const selectorChartSkipAnimation = createSelector(
-  [selectorChartAnimationState],
+  selectorChartAnimationState,
   (state) => state.skip || state.skipAnimationRequests > 0,
 );

packages/x-charts/src/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.ts

@@ -1,5 +1,5 @@
-import { createSelectorMemoized } from '@mui/x-internals/store';
-import { ChartRootSelector, createSelector } from '../../utils/selectors';
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { ChartRootSelector } from '../../utils/selectors';
 import type { UseChartDimensionsSignature } from './useChartDimensions.types';
 import { selectorChartAxisSizes } from '../../featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors';
 import { ChartState } from '../../models/chart';
@@ -32,21 +32,21 @@ export const selectorChartDrawingArea = createSelectorMemoized(
 );
 
 export const selectorChartSvgWidth = createSelector(
-  [selectorChartDimensionsState],
+  selectorChartDimensionsState,
   (dimensionsState) => dimensionsState.width,
 );
 
 export const selectorChartSvgHeight = createSelector(
-  [selectorChartDimensionsState],
+  selectorChartDimensionsState,
   (dimensionsState) => dimensionsState.height,
 );
 
 export const selectorChartPropsWidth = createSelector(
-  [selectorChartDimensionsState],
+  selectorChartDimensionsState,
   (dimensionsState) => dimensionsState.propsWidth,
 );
 
 export const selectorChartPropsHeight = createSelector(
-  [selectorChartDimensionsState],
+  selectorChartDimensionsState,
   (dimensionsState) => dimensionsState.propsHeight,
 );

packages/x-charts/src/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.selectors.ts

@@ -1,11 +1,12 @@
-import { ChartRootSelector, createSelector } from '../../utils/selectors';
+import { createSelector } from '@mui/x-internals/store';
+import { ChartRootSelector } from '../../utils/selectors';
 import type { UseChartExperimentalFeaturesSignature } from './useChartExperimentalFeature.types';
 
 export const selectorChartExperimentalFeaturesState: ChartRootSelector<
   UseChartExperimentalFeaturesSignature
 > = (state) => state.experimentalFeatures;
 
 export const selectorPreferStrictDomainInLineCharts = createSelector(
-  [selectorChartExperimentalFeaturesState],
+  selectorChartExperimentalFeaturesState,
   (features) => Boolean(features?.preferStrictDomainInLineCharts),
 );

packages/x-charts/src/internals/plugins/corePlugins/useChartId/useChartId.selectors.ts

@@ -1,4 +1,5 @@
-import { createSelector, ChartRootSelector } from '../../utils/selectors';
+import { createSelector } from '@mui/x-internals/store';
+import { ChartRootSelector } from '../../utils/selectors';
 import { UseChartIdSignature } from './useChartId.types';
 
 const selectorChartIdState: ChartRootSelector<UseChartIdSignature> = (state) => state.id;
@@ -8,4 +9,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);

packages/x-charts/src/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.ts

@@ -1,16 +1,17 @@
-import { ChartRootSelector, createSelector } from '../../utils/selectors';
+import { createSelector } from '@mui/x-internals/store';
+import { ChartRootSelector } from '../../utils/selectors';
 import { UseChartSeriesSignature } from './useChartSeries.types';
 
 export const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature> = (state) =>
   state.series;
 
 export const selectorChartSeriesProcessed = createSelector(
-  [selectorChartSeriesState],
+  selectorChartSeriesState,
   (seriesState) => seriesState.processedSeries,
 );
 
 export const selectorChartSeriesConfig = createSelector(
-  [selectorChartSeriesState],
+  selectorChartSeriesState,
   (seriesState) => seriesState.seriesConfig,
 );
 
@@ -20,6 +21,6 @@ export const selectorChartSeriesConfig = createSelector(
  * @returns {DatasetType | undefined} The dataset.
  */
 export const selectorChartDataset = createSelector(
-  [selectorChartSeriesState],
+  selectorChartSeriesState,
   (seriesState) => seriesState.dataset,
 );