[DataGrid] All selectors accept only apiRef as first argument

packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx

@@ -11,8 +11,7 @@ import {
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { DataGridPremiumProcessedProps } from '../models/dataGridPremiumProps';
-import { GridPrivateApiPremium } from '../models/gridApiPremium';
-import { GridStatePremium } from '../models/gridStatePremium';
+import { GridApiPremium, GridPrivateApiPremium } from '../models/gridApiPremium';
 
 type OwnerState = DataGridPremiumProcessedProps;
 
@@ -43,8 +42,10 @@ function GridGroupingCriteriaCellIcon(props: GridGroupingCriteriaCellIconProps)
   const classes = useUtilityClasses(rootProps);
   const { rowNode, id, field, descendantCount } = props;
 
-  const loadingSelector = (state: GridStatePremium) => state.dataSource.loading[id] ?? false;
-  const errorSelector = (state: GridStatePremium) => state.dataSource.errors[id];
+  const loadingSelector = (apiRefObject: React.RefObject<GridApiPremium>) =>
+    apiRefObject.current.state.dataSource.loading[id] ?? false;
+  const errorSelector = (apiRefObject: React.RefObject<GridApiPremium>) =>
+    apiRefObject.current.state.dataSource.errors[id];
   const isDataLoading = useGridSelector(apiRef, loadingSelector);
   const error = useGridSelector(apiRef, errorSelector);
 
@@ -97,7 +98,8 @@ export function GridDataSourceGroupingCriteriaCell(props: GridGroupingCriteriaCe
 
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
-  const rowSelector = (state: GridStatePremium) => state.rows.dataRowIdToModelLookup[id];
+  const rowSelector = (apiRefObject: React.RefObject<GridApiPremium>) =>
+    apiRefObject.current.state.rows.dataRowIdToModelLookup[id];
   const row = useGridSelector(apiRef, rowSelector);
   const classes = useUtilityClasses(rootProps);
 

packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationSelectors.ts

@@ -1,7 +1,8 @@
 import { createSelector } from '@mui/x-data-grid-pro/internals';
-import { GridStatePremium } from '../../../models/gridStatePremium';
+import { GridApiPremium } from '../../../models/gridApiPremium';
 
-export const gridAggregationStateSelector = (state: GridStatePremium) => state.aggregation;
+export const gridAggregationStateSelector = (apiRef: React.RefObject<GridApiPremium>) =>
+  apiRef.current.state.aggregation;
 
 /**
  * Get the aggregation model, containing the aggregation function of each column.

packages/x-data-grid-premium/src/hooks/features/cellSelection/gridCellSelectionSelector.ts

@@ -1,3 +1,4 @@
-import { GridStatePremium } from '../../../models/gridStatePremium';
+import { GridApiPremium } from '../../../models/gridApiPremium';
 
-export const gridCellSelectionStateSelector = (state: GridStatePremium) => state.cellSelection;
+export const gridCellSelectionStateSelector = (apiRef: React.RefObject<GridApiPremium>) =>
+  apiRef.current.state.cellSelection;

packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts

@@ -100,14 +100,14 @@ export const useGridCellSelection = (
       if (!props.cellSelection) {
         return false;
       }
-      const cellSelectionModel = gridCellSelectionStateSelector(apiRef.current.state);
+      const cellSelectionModel = gridCellSelectionStateSelector(apiRef);
       return cellSelectionModel[id] ? !!cellSelectionModel[id][field] : false;
     },
     [apiRef, props.cellSelection],
   );
 
   const getCellSelectionModel = React.useCallback(() => {
-    return gridCellSelectionStateSelector(apiRef.current.state);
+    return gridCellSelectionStateSelector(apiRef);
   }, [apiRef]);
 
   const setCellSelectionModel = React.useCallback<GridCellSelectionApi['setCellSelectionModel']>(

packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingSelector.ts

@@ -1,8 +1,9 @@
 import { gridColumnLookupSelector } from '@mui/x-data-grid-pro';
 import { createSelector, createSelectorMemoized } from '@mui/x-data-grid/internals';
-import { GridStatePremium } from '../../../models/gridStatePremium';
+import { GridApiPremium } from '../../../models/gridApiPremium';
 
-const gridRowGroupingStateSelector = (state: GridStatePremium) => state.rowGrouping;
+const gridRowGroupingStateSelector = (apiRef: React.RefObject<GridApiPremium>) =>
+  apiRef.current.state.rowGrouping;
 
 export const gridRowGroupingModelSelector = createSelector(
   gridRowGroupingStateSelector,

packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx

@@ -10,8 +10,7 @@ import {
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { DataGridProProcessedProps } from '../models/dataGridProProps';
-import { GridPrivateApiPro } from '../models/gridApiPro';
-import { GridStatePro } from '../models/gridStatePro';
+import { GridApiPro, GridPrivateApiPro } from '../models/gridApiPro';
 import {
   gridDataSourceErrorSelector,
   gridDataSourceLoadingIdSelector,
@@ -52,8 +51,8 @@ function GridTreeDataGroupingCellIcon(props: GridTreeDataGroupingCellIconProps)
   const classes = useUtilityClasses(rootProps);
   const { rowNode, id, field, descendantCount } = props;
 
-  const isDataLoading = useGridSelector(apiRef, gridDataSourceLoadingIdSelector, id);
-  const error = useGridSelector(apiRef, gridDataSourceErrorSelector, id);
+  const isDataLoading = useGridSelector(apiRef, gridDataSourceLoadingIdSelector);
+  const error = useGridSelector(apiRef, gridDataSourceErrorSelector);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     if (!rowNode.childrenExpanded) {
@@ -103,7 +102,8 @@ export function GridDataSourceTreeDataGroupingCell(props: GridTreeDataGroupingCe
 
   const rootProps = useGridRootProps();
   const apiRef = useGridPrivateApiContext();
-  const rowSelector = (state: GridStatePro) => state.rows.dataRowIdToModelLookup[id];
+  const rowSelector = (apiRefObject: React.RefObject<GridApiPro>) =>
+    apiRefObject.current.state.rows.dataRowIdToModelLookup[id];
   const row = useGridSelector(apiRef, rowSelector);
   const classes = useUtilityClasses(rootProps);
 

packages/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx

@@ -144,7 +144,7 @@ export const useGridColumnPinning = (
 
   const stateExportPreProcessing = React.useCallback<GridPipeProcessor<'exportState'>>(
     (prevState, context) => {
-      const pinnedColumnsToExport = gridPinnedColumnsSelector(apiRef.current.state);
+      const pinnedColumnsToExport = gridPinnedColumnsSelector(apiRef);
 
       const shouldExportPinnedColumns =
         // Always export if the `exportOnlyDirtyModels` property is not activated
@@ -227,7 +227,7 @@ export const useGridColumnPinning = (
   );
 
   const getPinnedColumns = React.useCallback<GridColumnPinningApi['getPinnedColumns']>(() => {
-    return gridPinnedColumnsSelector(apiRef.current.state);
+    return gridPinnedColumnsSelector(apiRef);
   }, [apiRef]);
 
   const setPinnedColumns = React.useCallback<GridColumnPinningApi['setPinnedColumns']>(

packages/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinningPreProcessors.ts

@@ -18,7 +18,7 @@ export const useGridColumnPinningPreProcessors = (
 
   let pinnedColumns: GridPinnedColumnFields | null;
   if (apiRef.current.state.columns) {
-    pinnedColumns = gridPinnedColumnsSelector(apiRef.current.state);
+    pinnedColumns = gridPinnedColumnsSelector(apiRef);
   } else {
     pinnedColumns = null;
   }

packages/x-data-grid-pro/src/hooks/features/columnReorder/columnReorderSelector.ts

@@ -1,7 +1,8 @@
 import { createSelector } from '@mui/x-data-grid/internals';
-import { GridStatePro } from '../../../models/gridStatePro';
+import { GridApiPro } from '../../../models/gridApiPro';
 
-export const gridColumnReorderSelector = (state: GridStatePro) => state.columnReorder;
+export const gridColumnReorderSelector = (apiRef: React.RefObject<GridApiPro>) =>
+  apiRef.current.state.columnReorder;
 
 export const gridColumnReorderDragColSelector = createSelector(
   gridColumnReorderSelector,

packages/x-data-grid-pro/src/hooks/features/dataSource/gridDataSourceSelector.ts

@@ -6,7 +6,7 @@ import {
   GridRowId,
 } from '@mui/x-data-grid';
 import { createSelector } from '@mui/x-data-grid/internals';
-import { GridStatePro } from '../../../models/gridStatePro';
+import { GridApiPro } from '../../../models/gridApiPro';
 
 const computeStartEnd = (paginationModel: GridPaginationModel) => {
   const start = paginationModel.page * paginationModel.pageSize;
@@ -29,7 +29,8 @@ export const gridGetRowsParamsSelector = createSelector(
   },
 );
 
-export const gridDataSourceStateSelector = (state: GridStatePro) => state.dataSource;
+export const gridDataSourceStateSelector = (apiRef: React.RefObject<GridApiPro>) =>
+  apiRef.current.state.dataSource;
 
 export const gridDataSourceLoadingSelector = createSelector(
   gridDataSourceStateSelector,

packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelSelector.ts

@@ -1,13 +1,15 @@
 import { createSelectorMemoized } from '@mui/x-data-grid/internals';
-import { GridStatePro } from '../../../models/gridStatePro';
+import { GridApiPro } from '../../../models/gridApiPro';
 
-const gridDetailPanelStateSelector = (state: GridStatePro) => state.detailPanel;
+const gridDetailPanelStateSelector = (apiRef: React.RefObject<GridApiPro>) =>
+  apiRef.current.state.detailPanel;
 
-export const gridDetailPanelExpandedRowIdsSelector = (state: GridStatePro) =>
-  state.detailPanel.expandedRowIds;
+export const gridDetailPanelExpandedRowIdsSelector = (apiRef: React.RefObject<GridApiPro>) =>
+  apiRef.current.state.detailPanel.expandedRowIds;
 
-export const gridDetailPanelExpandedRowsContentCacheSelector = (state: GridStatePro) =>
-  state.detailPanel.contentCache;
+export const gridDetailPanelExpandedRowsContentCacheSelector = (
+  apiRef: React.RefObject<GridApiPro>,
+) => apiRef.current.state.detailPanel.contentCache;
 
 export const gridDetailPanelRawHeightCacheSelector = createSelectorMemoized(
   gridDetailPanelStateSelector,

packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx

@@ -25,7 +25,7 @@ export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF: GridColDef = {
   valueGetter: (value, row, column, apiRef) => {
     const rowId = apiRef.current.getRowId(row);
     const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(
-      (apiRef.current as GridApiPro).state,
+      apiRef as React.RefObject<GridApiPro>,
     );
     return expandedRowIds.has(rowId);
   },

packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts

@@ -163,7 +163,7 @@ export const useGridDetailPanel = (
   );
 
   const getExpandedDetailPanels = React.useCallback<GridDetailPanelApi['getExpandedDetailPanels']>(
-    () => gridDetailPanelExpandedRowIdsSelector(apiRef.current.state),
+    () => gridDetailPanelExpandedRowIdsSelector(apiRef),
     [apiRef],
   );
 
@@ -225,7 +225,7 @@ export const useGridDetailPanel = (
 
   React.useEffect(() => {
     if (props.detailPanelExpandedRowIds) {
-      const currentModel = gridDetailPanelExpandedRowIdsSelector(apiRef.current.state);
+      const currentModel = gridDetailPanelExpandedRowIdsSelector(apiRef);
       if (currentModel !== props.detailPanelExpandedRowIds) {
         apiRef.current.setExpandedDetailPanels(props.detailPanelExpandedRowIds);
       }

packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelPreProcessors.ts

@@ -49,7 +49,7 @@ export const useGridDetailPanelPreProcessors = (
         return classes;
       }
 
-      const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(privateApiRef.current.state);
+      const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(privateApiRef);
       if (!expandedRowIds.has(id)) {
         return classes;
       }

packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx

@@ -83,7 +83,7 @@ export const useGridRowReorder = (
   const handleDragStart = React.useCallback<GridEventListener<'rowDragStart'>>(
     (params, event) => {
       // Call the gridEditRowsStateSelector directly to avoid infnite loop
-      const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
+      const editRowsState = gridEditRowsStateSelector(apiRef);
       if (isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
         return;
       }
@@ -158,7 +158,7 @@ export const useGridRowReorder = (
   const handleDragEnd = React.useCallback<GridEventListener<'rowDragEnd'>>(
     (params, event): void => {
       // Call the gridEditRowsStateSelector directly to avoid infnite loop
-      const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
+      const editRowsState = gridEditRowsStateSelector(apiRef);
       if (dragRowId === '' || isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
         return;
       }

packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx

@@ -46,7 +46,7 @@ function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonPro
       event.preventDefault();
       event.stopPropagation();
 
-      const { open, openedPanelValue } = gridPreferencePanelStateSelector(apiRef.current.state);
+      const { open, openedPanelValue } = gridPreferencePanelStateSelector(apiRef);
 
       if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
         apiRef.current.hideFilterPanel();

packages/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx

@@ -43,7 +43,7 @@ const GridVirtualScrollerRenderZone = forwardRef<
   const classes = useUtilityClasses(rootProps);
   const offsetTop = useGridSelector(apiRef, () => {
     const renderContext = gridRenderContextSelector(apiRef);
-    const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
+    const rowsMeta = gridRowsMetaSelector(apiRef);
     return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
   });
 

packages/x-data-grid/src/hooks/core/gridCoreSelector.ts

@@ -1,7 +1,8 @@
-import { GridStateCommunity } from '../../models/gridStateCommunity';
+import { GridApiCommunity } from '../../models/api/gridApiCommunity';
 
 /**
  * Get the theme state
  * @category Core
  */
-export const gridIsRtlSelector = (state: GridStateCommunity) => state.isRtl;
+export const gridIsRtlSelector = (apiRef: React.RefObject<GridApiCommunity>) =>
+  apiRef.current.state.isRtl;

packages/x-data-grid/src/hooks/core/useGridIsRtl.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+import { GridStateCommunity } from '../../models/gridStateCommunity';
 
 export const useGridIsRtl = (apiRef: React.RefObject<GridPrivateApiCommon>): void => {
   const isRtl = useRtl();
@@ -14,7 +15,7 @@ export const useGridIsRtl = (apiRef: React.RefObject<GridPrivateApiCommon>): voi
     if (isFirstEffect.current) {
       isFirstEffect.current = false;
     } else {
-      apiRef.current.setState((state) => ({ ...state, isRtl }));
+      apiRef.current.setState((state: GridStateCommunity) => ({ ...state, isRtl }));
     }
   }, [apiRef, isRtl]);
 };

packages/x-data-grid/src/hooks/core/useGridStateInitialization.ts

@@ -14,7 +14,7 @@ export const useGridStateInitialization = <PrivateApi extends GridPrivateApiComm
   const [, rawForceUpdate] = React.useState<PrivateApi['state']>();
 
   const registerControlState = React.useCallback<
-    GridStatePrivateApi<PrivateApi['state']>['registerControlState']
+    GridStatePrivateApi<React.RefObject<PrivateApi>>['registerControlState']
   >((controlStateItem) => {
     controlStateMapRef.current[controlStateItem.stateId] = controlStateItem;
   }, []);
@@ -32,23 +32,18 @@ export const useGridStateInitialization = <PrivateApi extends GridPrivateApiComm
         return false;
       }
 
+      const apiRefWithNewState = apiRef;
+      apiRefWithNewState.current.state = newState;
+
       let ignoreSetState = false;
 
       // Apply the control state constraints
       const updatedControlStateIds: { stateId: string; hasPropChanged: boolean }[] = [];
       Object.keys(controlStateMapRef.current).forEach((stateId) => {
         const controlState = controlStateMapRef.current[stateId];
-        const oldSubState = controlState.stateSelector(
-          apiRef.current.state,
-          undefined,
-          apiRef.current.instanceId,
-        );
+        const oldSubState = controlState.stateSelector(apiRef);
+        const newSubState = controlState.stateSelector(apiRefWithNewState);
 
-        const newSubState = controlState.stateSelector(
-          newState,
-          undefined,
-          apiRef.current.instanceId,
-        );
         if (newSubState === oldSubState) {
           return;
         }
@@ -87,7 +82,7 @@ export const useGridStateInitialization = <PrivateApi extends GridPrivateApiComm
       if (updatedControlStateIds.length === 1) {
         const { stateId, hasPropChanged } = updatedControlStateIds[0];
         const controlState = controlStateMapRef.current[stateId];
-        const model = controlState.stateSelector(newState, undefined, apiRef.current.instanceId);
+        const model = controlState.stateSelector(apiRefWithNewState);
 
         if (controlState.propOnChange && hasPropChanged) {
           controlState.propOnChange(model, {
@@ -107,7 +102,7 @@ export const useGridStateInitialization = <PrivateApi extends GridPrivateApiComm
   );
 
   const updateControlState = React.useCallback<
-    GridStatePrivateApi<PrivateApi['state']>['updateControlState']
+    GridStatePrivateApi<React.RefObject<PrivateApi>>['updateControlState']
   >(
     (key, state, reason) => {
       return apiRef.current.setState((previousState: PrivateApi['state']) => {
@@ -124,7 +119,7 @@ export const useGridStateInitialization = <PrivateApi extends GridPrivateApiComm
     forceUpdate,
   };
 
-  const privateStateApi: GridStatePrivateApi<PrivateApi['state']> = {
+  const privateStateApi: GridStatePrivateApi<React.RefObject<PrivateApi>> = {
     updateControlState,
     registerControlState,
   };

packages/x-data-grid/src/hooks/features/columnGrouping/gridColumnGroupsSelector.ts

@@ -1,11 +1,12 @@
 import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
-import { GridStateCommunity } from '../../../models/gridStateCommunity';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 
 /**
  * @category ColumnGrouping
  * @ignore - do not document.
  */
-export const gridColumnGroupingSelector = (state: GridStateCommunity) => state.columnGrouping;
+export const gridColumnGroupingSelector = (apiRef: React.RefObject<GridApiCommunity>) =>
+  apiRef.current.state.columnGrouping;
 
 export const gridColumnGroupsUnwrappedModelSelector = createSelectorMemoized(
   gridColumnGroupingSelector,

packages/x-data-grid/src/hooks/features/columnMenu/columnMenuSelector.ts

@@ -1,3 +1,4 @@
-import { GridStateCommunity } from '../../../models/gridStateCommunity';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 
-export const gridColumnMenuSelector = (state: GridStateCommunity) => state.columnMenu;
+export const gridColumnMenuSelector = (apiRef: React.RefObject<GridApiCommunity>) =>
+  apiRef.current.state.columnMenu;