[DataGrid] Make instanceId required for state selectors (#11395)

docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md

@@ -78,9 +78,18 @@ Below are described the steps you need to make to migrate from v6 to v7.
 - The deprecated props `components` and `componentsProps` have been removed. Use `slots` and `slotProps` instead. See [components section](/x/react-data-grid/components/) for more details.
 - The `slots.preferencesPanel` slot and the `slotProps.preferencesPanel` prop were removed. Use `slots.panel` and `slotProps.panel` instead.
 
-<!-- ### State access
+### State access
 
-- -->
+- Some selectors now require passing `instanceId` as a second argument:
+  ```diff
+  - gridColumnFieldsSelector(apiRef.current.state);
+  + gridColumnFieldsSelector(apiRef.current.state, apiRef.current.instanceId);
+  ```
+  However, it's preferable to pass the `apiRef` as the first argument instead:
+  ```js
+  gridColumnFieldsSelector(apiRef);
+  ```
+  See [Direct state access](/x/react-data-grid/state/#direct-selector-access) for more info.
 
 <!-- ### Events
 

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

@@ -10,10 +10,7 @@ export interface GridControlStateItem<
   stateId: string;
   propModel?: GridEventLookup[E]['params'];
   stateSelector:
-    | OutputSelector<
-        { state: State; instanceId: string },
-        GridControlledStateEventLookup[E]['params']
-      >
+    | OutputSelector<State, GridControlledStateEventLookup[E]['params']>
     | ((state: State) => GridControlledStateEventLookup[E]['params']);
   propOnChange?: (
     model: GridControlledStateEventLookup[E]['params'],

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

@@ -33,7 +33,7 @@ createSelector(
 createSelector(
   (state: GridStateCommunity) => state.columns.orderedFields,
   (fields) => fields,
-)({} as GridStateCommunity);
+)({} as GridStateCommunity, { id: 1 });
 
 createSelector(
   // @ts-expect-error Wrong state key

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

@@ -9,6 +9,7 @@ describe('createSelector', () => {
     it('should warn if the instance ID is missing', () => {
       const selector = createSelectorMemoized([], () => []);
       const state = {} as GridStateCommunity;
+      // @ts-expect-error Need to test the warning
       expect(() => selector(state)).toWarnDev(
         'MUI: A selector was called without passing the instance ID, which may impact the performance of the grid.',
       );
@@ -32,13 +33,13 @@ describe('createSelector', () => {
       );
       const state1 = {} as GridStateCommunity;
       const state2 = {} as GridStateCommunity;
-      const value1 = selector(state1);
+      const value1 = selector(state1, { id: 1 });
 
       // The default cache has maxSize=1, which forces a recomputation if another state is passed.
       // Since the combiner function returns a new array, the references won't be the same.
-      selector(state2);
+      selector(state2, { id: 1 });
 
-      const value2 = selector(state1);
+      const value2 = selector(state1, { id: 1 });
       expect(value1).not.to.equal(value2);
     });
   });

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

@@ -11,8 +11,7 @@ interface CacheContainer {
 
 export interface OutputSelector<State, Result> {
   (apiRef: React.MutableRefObject<{ state: State; instanceId: GridCoreApi['instanceId'] }>): Result;
-  // TODO v6: make instanceId require
-  (state: State, instanceId?: GridCoreApi['instanceId']): Result;
+  (state: State, instanceId: GridCoreApi['instanceId']): Result;
   acceptsApiRef: boolean;
 }