[DataGrid] Implement useControlState hook, and add control state on selectionModel

docs/pages/api-docs/data-grid/data-grid.md

@@ -81,7 +81,6 @@ import { DataGrid } from '@material-ui/data-grid';
 | <span class="prop-name">onRowOut</span> | <span class="prop-type">(param: GridRowParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse out comes from a row container element. |
 | <span class="prop-name">onRowEnter</span> | <span class="prop-type">(param: GridRowParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse enter comes from a row container element. |
 | <span class="prop-name">onRowLeave</span> | <span class="prop-type">(param: GridRowParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse leave event comes from a row container element. |
-| <span class="prop-name">onRowSelected</span> | <span class="prop-type">(param: GridRowSelectedParams) => void</span> |   | Callback fired when one row is selected. |
 | <span class="prop-name">onSelectionModelChange</span> | <span class="prop-type">(param: GridSelectionModelChangeParams) => void</span> |   | Callback fired when the selection state of one or multiple rows changes. |
 | <span class="prop-name">onSortModelChange</span> | <span class="prop-type">(param: GridSortModelParams) => void</span> |   | Callback fired when the sort model changes before a column is sorted. |
 | <span class="prop-name">page</span> | <span class="prop-type">number</span> | 1   |  Set the current page. |

docs/pages/api-docs/data-grid/grid-api.md

@@ -19,6 +19,7 @@ import { GridApi } from '@material-ui/x-grid';
 | <span class="prop-name">commitCellChange</span>                                                   | <span class="prop-type">(params: GridEditCellPropsParams) =&gt; void</span>                                                                                                              | Commits a cell change. Used to update the value when editing a cell.                                                                                           |
 | <span class="prop-name">components</span>                                                         | <span class="prop-type">GridApiRefComponentsProperty</span>                                                                                                                              | The set of overridable components used in the grid.                                                                                                            |
 | <span class="prop-name optional">componentsProps<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">GridSlotsComponentsProps</span>                                                                                                                                  | Overrideable components props dynamically passed to the component at rendering.                                                                                |
+| <span class="prop-name">controlStateRef</span>                                                    | <span class="prop-type">RefObject&lt;Record&lt;string, ControlStateItem&lt;any, any&gt;&gt;&gt;</span>                                                                                   |                                                                                                                                                                |
 | <span class="prop-name">deleteFilter</span>                                                       | <span class="prop-type">(item: GridFilterItem) =&gt; void</span>                                                                                                                         | Deletes a GridFilterItem.                                                                                                                                      |
 | <span class="prop-name">exportDataAsCsv</span>                                                    | <span class="prop-type">(options?: GridExportCsvOptions) =&gt; void</span>                                                                                                               | Downloads and exports a CSV of the grid's data.                                                                                                                |
 | <span class="prop-name">forceUpdate</span>                                                        | <span class="prop-type">Dispatch&lt;any&gt;</span>                                                                                                                                       | Forces the grid to rerender. It's often used after a state update.                                                                                             |
@@ -60,6 +61,7 @@ import { GridApi } from '@material-ui/x-grid';
 | <span class="prop-name">isCellEditable</span>                                                     | <span class="prop-type">(params: GridCellParams) =&gt; boolean</span>                                                                                                                    | Controls if a cell is editable.                                                                                                                                |
 | <span class="prop-name">isColumnVisibleInWindow</span>                                            | <span class="prop-type">(colIndex: number) =&gt; boolean</span>                                                                                                                          | Checks if a column at the index given by `colIndex` is currently visible in the viewport.                                                                      |
 | <span class="prop-name">publishEvent</span>                                                       | <span class="prop-type">(name: string, ...args: any[]) =&gt; void</span>                                                                                                                 | Emits an event.                                                                                                                                                |
+| <span class="prop-name">registerControlState</span>                                               | <span class="prop-type">(controlState: ControlStateItem&lt;TModel, TState&gt;) =&gt; void</span>                                                                                         |                                                                                                                                                                |
 | <span class="prop-name">resize</span>                                                             | <span class="prop-type">() =&gt; void</span>                                                                                                                                             | Triggers a resize of the component and recalculation of width and height.                                                                                      |
 | <span class="prop-name">scroll</span>                                                             | <span class="prop-type">(params: Partial&lt;GridScrollParams&gt;) =&gt; void</span>                                                                                                      | Triggers the viewport to scroll to the given positions (in pixels).                                                                                            |
 | <span class="prop-name">scrollToIndexes</span>                                                    | <span class="prop-type">(params: Optional&lt;GridCellIndexCoordinates, rowIndex&gt;) =&gt; boolean</span>                                                                                | Triggers the viewport to scroll to the cell at indexes given by `params`.<br />Returns `true` if the grid had to scroll to reach the target.                   |

docs/pages/api-docs/data-grid/x-grid.md

@@ -85,7 +85,6 @@ import { XGrid } from '@material-ui/x-grid';
 | <span class="prop-name">onRowOut</span> | <span class="prop-type">(param: GridRowParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse out comes from a row container element. |
 | <span class="prop-name">onRowEnter</span> | <span class="prop-type">(param: GridRowParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse enter comes from a row container element. |
 | <span class="prop-name">onRowLeave</span> | <span class="prop-type">(param: GridRowParams, event: React.MouseEvent) => void</span> |   | Callback fired when a mouse leave event comes from a row container element. |
-| <span class="prop-name">onRowSelected</span> | <span class="prop-type">(param: GridRowSelectedParams) => void</span> |   | Callback fired when one row is selected. |
 | <span class="prop-name">onRowsScrollEnd</span> | <span class="prop-type">(param: GridRowScrollEndParams) => void</span> |   | Callback fired when scrolling to the bottom of the grid viewport. |
 | <span class="prop-name">onSelectionModelChange</span> | <span class="prop-type">(param: GridSelectionModelChangeParams) => void</span> |   | Callback fired when the selection state of one or multiple rows changes. |
 | <span class="prop-name">onSortModelChange</span> | <span class="prop-type">(param: GridSortModelParams) => void</span> |   | Callback fired when the sort model changes before a column is sorted. |

docs/src/pages/components/data-grid/selection/ControlledSelectionGrid.js

@@ -15,8 +15,8 @@ export default function ControlledSelectionGrid() {
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         checkboxSelection
-        onSelectionModelChange={(newSelection) => {
-          setSelectionModel(newSelection.selectionModel);
+        onSelectionModelChange={(newSelectionModel) => {
+          setSelectionModel(newSelectionModel);
         }}
         selectionModel={selectionModel}
         {...data}

docs/src/pages/components/data-grid/selection/ControlledSelectionGrid.tsx

@@ -15,8 +15,8 @@ export default function ControlledSelectionGrid() {
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         checkboxSelection
-        onSelectionModelChange={(newSelection) => {
-          setSelectionModel(newSelection.selectionModel);
+        onSelectionModelChange={(newSelectionModel) => {
+          setSelectionModel(newSelectionModel);
         }}
         selectionModel={selectionModel}
         {...data}

packages/grid/_modules_/grid/constants/eventsConstants.ts

@@ -235,12 +235,6 @@ export const GRID_ROW_LEAVE = 'rowLeave';
  */
 export const GRID_ROW_EDIT_MODEL_CHANGE = 'editRowModelChange';
 
-/**
- * Fired when a row is selected or unselected. Called with a [[GridRowSelectedParams]] object.
- * @event
- */
-export const GRID_ROW_SELECTED = 'rowSelected';
-
 /**
  * Fired when a column header loses focus. Called with a [[GridColumnHeaderParams]] object.
  * @ignore - do not document.

packages/grid/_modules_/grid/hooks/features/core/gridState.ts

@@ -33,28 +33,28 @@ import {
 } from '../virtualization/renderingState';
 
 export interface GridState {
-  rows: InternalGridRowsState;
-  editRows: GridEditRowsModel;
-  pagination: GridPaginationState;
-  options: GridOptions;
-  isScrolling: boolean;
   columns: GridInternalColumns;
+  columnMenu: GridColumnMenuState;
   columnReorder: GridColumnReorderState;
   columnResize: GridColumnResizeState;
-  columnMenu: GridColumnMenuState;
-  rendering: InternalRenderingState;
   containerSizes: GridContainerProps | null;
-  viewportSizes: GridViewportSizeState;
+  density: GridGridDensity;
+  editRows: GridEditRowsModel;
+  error?: any;
+  filter: GridFilterModelState;
+  focus: GridFocusState;
+  isScrolling: boolean;
+  options: GridOptions;
+  pagination: GridPaginationState;
+  preferencePanel: GridPreferencePanelState;
+  rows: InternalGridRowsState;
+  rendering: InternalRenderingState;
   scrollBar: GridScrollBarState;
+  selection: GridSelectionState;
   sorting: GridSortingState;
-  focus: GridFocusState;
   tabIndex: GridTabIndexState;
-  selection: GridSelectionState;
-  filter: GridFilterModelState;
+  viewportSizes: GridViewportSizeState;
   visibleRows: VisibleGridRowsState;
-  preferencePanel: GridPreferencePanelState;
-  density: GridGridDensity;
-  error?: any;
 }
 
 export const getInitialGridState: () => GridState = () => ({

packages/grid/_modules_/grid/hooks/features/core/useControlState.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { GridApiRef } from '../../../models/api/gridApiRef';
+import { GridControlStateApi } from '../../../models/api/gridControlStateApi';
+import { ControlStateItem } from '../../../models/controlStateItem';
+import { useGridApiMethod } from '../../root/useGridApiMethod';
+
+export function useControlState(apiRef: GridApiRef) {
+  const controlStateMapRef = React.useRef<Record<string, ControlStateItem<any, any>>>({});
+  apiRef.current.controlStateRef = controlStateMapRef;
+
+  const registerControlState = React.useCallback((controlStateItem: ControlStateItem<any, any>) => {
+    const { stateId, stateSelector, ...others } = controlStateItem;
+
+    controlStateMapRef.current[stateId] = {
+      ...others,
+      stateId,
+      stateSelector: !stateSelector ? (state) => state[stateId] : stateSelector,
+    };
+  }, []);
+
+  const controlStateApi: GridControlStateApi = { registerControlState };
+  useGridApiMethod(apiRef, controlStateApi, 'controlStateApi');
+}

packages/grid/_modules_/grid/hooks/features/core/useGridState.ts

@@ -2,30 +2,94 @@ import * as React from 'react';
 import { GRID_STATE_CHANGE } from '../../../constants/eventsConstants';
 import { GridApiRef } from '../../../models/api/gridApiRef';
 import { GridStateChangeParams } from '../../../models/params/gridStateChangeParams';
+import { isDeepEqual } from '../../../utils/utils';
 import { GridState } from './gridState';
 import { useGridApi } from './useGridApi';
 
 export const useGridState = (
   apiRef: GridApiRef,
 ): [GridState, (stateUpdaterFn: (oldState: GridState) => GridState) => boolean, () => void] => {
   useGridApi(apiRef);
+
   const forceUpdate = React.useCallback(
     () => apiRef.current.forceUpdate(() => apiRef.current.state),
     [apiRef],
   );
+
   const setGridState = React.useCallback(
     (stateUpdaterFn: (oldState: GridState) => GridState) => {
       const newState = stateUpdaterFn(apiRef.current.state);
       const hasChanged = apiRef.current.state !== newState;
+      let shouldUpdate = true;
+      const updatedStateIds: string[] = [];
+      const controlStateMap = apiRef.current.controlStateRef.current!;
+
+      if (hasChanged && apiRef.current.controlStateRef) {
+        Object.keys(controlStateMap).forEach((stateId) => {
+          const controlState = controlStateMap[stateId];
+          const oldState = controlState.stateSelector(apiRef.current.state);
+          const newSubState = controlState.stateSelector(newState);
+          const hasSubStateChanged = !isDeepEqual(oldState, newSubState);
+
+          if (updatedStateIds.length >= 1 && hasSubStateChanged) {
+            // Each hook modify its own state and it should not leak
+            // Events are here to forward to other hooks and apply changes.
+            // You are trying to update several states in a no isolated way.
+            throw new Error(
+              `You're not allowed to update several sub-state in one transaction. You already updated ${updatedStateIds[0]}, therefore, you're not allowed to update ${controlState.stateId} in the same transaction.`,
+            );
+          }
+
+          if (hasSubStateChanged) {
+            if (controlState.propOnChange) {
+              const newModel = controlState.mapStateToModel
+                ? controlState.mapStateToModel(newSubState)
+                : newSubState;
 
+              if (
+                (!controlState.mapStateToModel && controlState.propModel !== newModel) ||
+                (controlState.mapStateToModel && !isDeepEqual(controlState.propModel, newModel))
+              ) {
+                controlState.propOnChange(newModel);
+                shouldUpdate = controlState.propModel === undefined;
+              }
+            } else if (controlState.propModel !== undefined) {
+              const oldModel = controlState.mapStateToModel
+                ? controlState.mapStateToModel(oldState)
+                : oldState;
+              shouldUpdate = controlState.mapStateToModel
+                ? !isDeepEqual(oldModel, controlState.propModel)
+                : oldModel !== controlState.propModel;
+            }
+            if (shouldUpdate) {
+              updatedStateIds.push(controlState.stateId);
+            }
+          }
+        });
+      }
+      if (!shouldUpdate) {
+        return false;
+      }
       // We always assign it as we mutate rows for perf reason.
       apiRef.current.state = newState;
-      // TODO deepFreeze(newState);
 
       if (hasChanged && apiRef.current.publishEvent) {
         const params: GridStateChangeParams = { api: apiRef.current, state: newState };
         apiRef.current.publishEvent(GRID_STATE_CHANGE, params);
+
+        updatedStateIds.forEach((stateId) => {
+          if (controlStateMap[stateId].onChangeCallback) {
+            const model =
+              controlStateMap[stateId].mapStateToModel != null
+                ? controlStateMap[stateId].mapStateToModel!(
+                    controlStateMap[stateId].stateSelector(newState),
+                  )
+                : controlStateMap[stateId].stateSelector(newState);
+            controlStateMap[stateId].onChangeCallback!(model);
+          }
+        });
       }
+
       return hasChanged;
     },
     [apiRef],