Update

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

@@ -7,7 +7,6 @@ import {
   GridDataSourceGroupNode,
   useGridSelector,
 } from '@mui/x-data-grid';
-import { useGridSelectorV8 } from '@mui/x-data-grid/internals';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
@@ -54,8 +53,8 @@ function GridTreeDataGroupingCellIcon(props: GridTreeDataGroupingCellIconProps)
   const classes = useUtilityClasses(rootProps);
   const { rowNode, id, field, descendantCount } = props;
 
-  const isDataLoading = useGridSelectorV8(apiRef, gridDataSourceLoadingIdSelector, id);
-  const error = useGridSelectorV8(apiRef, gridDataSourceErrorSelector, id);
+  const isDataLoading = useGridSelector(apiRef, gridDataSourceLoadingIdSelector, id);
+  const error = useGridSelector(apiRef, gridDataSourceErrorSelector, id);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     if (!rowNode.childrenExpanded) {

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

@@ -5,7 +5,7 @@ import {
   gridPaginationModelSelector,
   GridRowId,
 } from '@mui/x-data-grid';
-import { createSelector, createSelectorV8 } from '@mui/x-data-grid/internals';
+import { createSelector } from '@mui/x-data-grid/internals';
 import { GridStatePro } from '../../../models/gridStatePro';
 
 const computeStartEnd = (paginationModel: GridPaginationModel) => {
@@ -36,7 +36,7 @@ export const gridDataSourceLoadingSelector = createSelector(
   (dataSource) => dataSource.loading,
 );
 
-export const gridDataSourceLoadingIdSelector = createSelectorV8(
+export const gridDataSourceLoadingIdSelector = createSelector(
   gridDataSourceStateSelector,
   (dataSource, id: GridRowId) => dataSource.loading[id] ?? false,
 );
@@ -46,7 +46,7 @@ export const gridDataSourceErrorsSelector = createSelector(
   (dataSource) => dataSource.errors,
 );
 
-export const gridDataSourceErrorSelector = createSelectorV8(
+export const gridDataSourceErrorSelector = createSelector(
   gridDataSourceStateSelector,
   (dataSource, id: GridRowId) => dataSource.errors[id],
 );

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

@@ -9,7 +9,7 @@ export const useGridStateInitialization = <PrivateApi extends GridPrivateApiComm
   apiRef: React.MutableRefObject<PrivateApi>,
 ) => {
   const controlStateMapRef = React.useRef<
-    Record<string, GridControlStateItem<PrivateApi['state'], any>>
+    Record<string, GridControlStateItem<PrivateApi['state'], any, any>>
   >({});
   const [, rawForceUpdate] = React.useState<PrivateApi['state']>();
 

packages/x-data-grid/src/hooks/utils/useGridSelector.ts

@@ -2,34 +2,22 @@ import * as React from 'react';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { warnOnce } from '@mui/x-internals/warning';
 import type { GridApiCommon } from '../../models/api/gridApiCommon';
-import type { OutputSelector, OutputSelectorV8 } from '../../utils/createSelector';
+import type { OutputSelector } from '../../utils/createSelector';
 import { useLazyRef } from './useLazyRef';
 import { useOnMount } from './useOnMount';
 import type { GridCoreApi } from '../../models/api/gridCoreApi';
 
-function isOutputSelector<Api extends GridApiCommon, T>(
+function isOutputSelector<Api extends GridApiCommon, Args, T>(
   selector: any,
-): selector is OutputSelector<Api['state'], T> {
+): selector is OutputSelector<Api['state'], Args, T> {
   return selector.acceptsApiRef;
 }
 
 type Selector<Api extends GridApiCommon, Args, T> =
   | ((state: Api['state']) => T)
-  | OutputSelectorV8<Api['state'], Args, T>;
+  | OutputSelector<Api['state'], Args, T>;
 
-// TODO v8: Remove this function
-function applySelector<Api extends GridApiCommon, T>(
-  apiRef: React.MutableRefObject<Api>,
-  selector: ((state: Api['state']) => T) | OutputSelector<Api['state'], T>,
-) {
-  if (isOutputSelector<Api, T>(selector)) {
-    return selector(apiRef);
-  }
-  return selector(apiRef.current.state);
-}
-
-// TODO v8: Rename this function to `applySelector`
-function applySelectorV8<Api extends GridApiCommon, Args, T>(
+function applySelector<Api extends GridApiCommon, Args, T>(
   apiRef: React.MutableRefObject<Api>,
   selector: Selector<Api, Args, T>,
   args: Args,
@@ -63,55 +51,7 @@ export const argsEqual = (prev: any, curr: any) => {
 
 const createRefs = () => ({ state: null, equals: null, selector: null, args: null }) as any;
 
-// TODO v8: Remove this function
-export const useGridSelector = <Api extends GridApiCommon, T>(
-  apiRef: React.MutableRefObject<Api>,
-  selector: ((state: Api['state']) => T) | OutputSelector<Api['state'], T>,
-  equals: (a: T, b: T) => boolean = defaultCompare,
-) => {
-  if (process.env.NODE_ENV !== 'production') {
-    if (!apiRef.current.state) {
-      warnOnce([
-        'MUI X: `useGridSelector` has been called before the initialization of the state.',
-        'This hook can only be used inside the context of the grid.',
-      ]);
-    }
-  }
-
-  const refs = useLazyRef<
-    {
-      state: T;
-      equals: typeof equals;
-      selector: typeof selector;
-    },
-    never
-  >(createRefs);
-  const didInit = refs.current.selector !== null;
-
-  const [state, setState] = React.useState<T>(
-    // We don't use an initialization function to avoid allocations
-    (didInit ? null : applySelector(apiRef, selector)) as T,
-  );
-
-  refs.current.state = state;
-  refs.current.equals = equals;
-  refs.current.selector = selector;
-
-  useOnMount(() => {
-    return apiRef.current.store.subscribe(() => {
-      const newState = applySelector(apiRef, refs.current.selector);
-      if (!refs.current.equals(refs.current.state, newState)) {
-        refs.current.state = newState;
-        setState(newState);
-      }
-    });
-  });
-
-  return state;
-};
-
-// TODO v8: Rename this function to `useGridSelector`
-export const useGridSelectorV8 = <Api extends GridApiCommon, Args, T>(
+export const useGridSelector = <Api extends GridApiCommon, Args, T>(
   apiRef: React.MutableRefObject<Api>,
   selector: Selector<Api, Args, T>,
   args: Args = undefined as Args,
@@ -139,7 +79,7 @@ export const useGridSelectorV8 = <Api extends GridApiCommon, Args, T>(
 
   const [state, setState] = React.useState<T>(
     // We don't use an initialization function to avoid allocations
-    (didInit ? null : applySelectorV8(apiRef, selector, args, apiRef.current.instanceId)) as T,
+    (didInit ? null : applySelector(apiRef, selector, args, apiRef.current.instanceId)) as T,
   );
 
   refs.current.state = state;
@@ -149,7 +89,7 @@ export const useGridSelectorV8 = <Api extends GridApiCommon, Args, T>(
   refs.current.args = args;
 
   if (didInit && !argsEqual(prevArgs, args)) {
-    const newState = applySelectorV8(
+    const newState = applySelector(
       apiRef,
       refs.current.selector,
       refs.current.args,
@@ -163,7 +103,7 @@ export const useGridSelectorV8 = <Api extends GridApiCommon, Args, T>(
 
   useOnMount(() => {
     return apiRef.current.store.subscribe(() => {
-      const newState = applySelectorV8(
+      const newState = applySelector(
         apiRef,
         refs.current.selector,
         refs.current.args,

packages/x-data-grid/src/internals/index.ts

@@ -148,13 +148,7 @@ export type * from '../models/props/DataGridProps';
 export type * from '../models/gridDataSource';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
-export {
-  createSelector,
-  createSelectorV8,
-  createSelectorMemoized,
-  createSelectorMemoizedV8,
-} from '../utils/createSelector';
-export { useGridSelectorV8 } from '../hooks/utils/useGridSelector';
+export { createSelector, createSelectorMemoized } from '../utils/createSelector';
 export { gridRowGroupsToFetchSelector } from '../hooks/features/rows/gridRowsSelector';
 export {
   findParentElementFromClassName,

packages/x-data-grid/src/models/api/gridStateApi.ts

@@ -42,7 +42,7 @@ export interface GridStatePrivateApi<State extends GridStateCommunity> {
    * Updates a control state that binds the model, the onChange prop, and the grid state together.
    * @param {GridControlStateItem>} controlState The [[GridControlStateItem]] to be registered.
    */
-  registerControlState: <E extends keyof GridControlledStateEventLookup>(
-    controlState: GridControlStateItem<State, E>,
+  registerControlState: <E extends keyof GridControlledStateEventLookup, Args>(
+    controlState: GridControlStateItem<State, Args, E>,
   ) => void;
 }

packages/x-data-grid/src/models/controlStateItem.ts

@@ -5,12 +5,13 @@ import { GridStateCommunity } from './gridStateCommunity';
 
 export interface GridControlStateItem<
   State extends GridStateCommunity,
+  Args,
   E extends keyof GridControlledStateEventLookup,
 > {
   stateId: string;
   propModel?: GridEventLookup[E]['params'];
   stateSelector:
-    | OutputSelector<State, GridControlledStateEventLookup[E]['params']>
+    | OutputSelector<State, Args, GridControlledStateEventLookup[E]['params']>
     | ((state: State) => GridControlledStateEventLookup[E]['params']);
   propOnChange?: (
     model: GridControlledStateEventLookup[E]['params'],

packages/x-data-grid/src/utils/createSelector.test.ts

@@ -19,6 +19,7 @@ describe('createSelector', () => {
     it('should fallback to the default behavior when no cache key is provided', () => {
       const selector = createSelectorMemoized([], () => []) as OutputSelector<
         GridStateCommunity,
+        any,
         any
       >;
       const state = {} as GridStateCommunity;
@@ -48,6 +49,7 @@ describe('createSelector', () => {
     it('should return different selectors for different cache keys', () => {
       const selector = createSelectorMemoized([], () => []) as OutputSelector<
         GridStateCommunity,
+        any,
         any
       >;
       const apiRef1 = {
@@ -62,6 +64,7 @@ describe('createSelector', () => {
     it('should not clear the cache of one selector when another key is passed', () => {
       const selector = createSelectorMemoized([], () => []) as OutputSelector<
         GridStateCommunity,
+        any,
         any
       >;
       const apiRef1 = {