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

[dtassone]

Breaking changes

• [DataGrid] Implement useControlState hook, and add control state on selectionModel ([DataGrid] Implement useControlState hook, and add control state on selectionModel #1823) @dtassone

  Normalize the controlled prop signature:

   <DataGrid
  -  onSelectionModelChange={(params: GridSelectionModelChangeParams) => setSelectionModel(params.model)}
  +  onSelectionModelChange={(model: GridSelectionModel) => setSelectionModel(model)}
   />

  Replace onRowSelected with the existing API:

   <DataGrid
  -  onRowSelected={(params: GridRowSelectedParams) =>  }
  +  onSelectionModelChange={(model: GridSelectionModel) => }
   />

---

https://deploy-preview-1823--material-ui-x.netlify.app/storybook/?path=/story/x-grid-tests-filter--control-selection

This PR allows integrating the concept of control state, within the grid state management by registering the controlled prop, the on-change handler and the state selector which allows retrieving where the prop model is stored in state.

Below is how you can register the prop selectionModel and its onSelectionModelChange as a controlled state prop.

// You need to register a ControlStateItem to bind a model prop and onChange with its controlled state

export interface ControlStateItem<TModel> {
  stateId: string;
  propModel?: any;
  stateSelector: (state: GridState) => TModel;
  propOnChange?: (model: TModel) => void;
  onChangeCallback?: (model: TModel) => void;
}

  React.useEffect(() => {
    apiRef.current.registerControlState<GridSelectionModel>({
      stateId: 'selectionModel',
      propModel: props.selectionModel,
      propOnChange: props.onSelectionModelChange,
      stateSelector: gridSelectionStateSelector,
      onChangeCallback: (model: GridSelectionModel) => {
        apiRef.current.publishEvent(GRID_SELECTION_CHANGE, model);
      },
    });
  }, [apiRef, props.onSelectionModelChange, props.selectionModel]);

At this stage, the architecture seems to be working, and performing well.

• implement control selection
• add tests and stories
• remove legacy code
• Remove onRowSelected & GridRowSelectedParams

Breaking Change

- props.onRowSelected

Use onSelectionChange.

Next

• RegisterControlState for filter
• RegisterControlState for SortModel
• RegisterControlState for pagination substates so one for page, one for pagesize
• RegisterControlState for editRowsModel, not sure how it is going to work yet, is mapStateToModel enough 🤔
• Cleanup, Remove redundant publishevent code, cleanup hook control mode, Fix publish event params (inconsistency btw callback and hook body)

[oliviertassinari]

Changing a controlled prop should directly trigger a render. Instead, it seems to be passive (wait for somebody to re-render to update). If this is true (I could have missed something in the review), then I think that we need to change the approach. found it, we have kept the effect based on the prop.

[m4theushw]

We have to manually call setGridState to update the state when the prop changes. Should we update the hook to also handle this update: prop -> state? I think we're gonna need a mapModelToState for that to sanitize the values that go to the state (e.g. to unselect invisible rows).

https://github.com/mui-org/material-ui-x/blob/a2a1f8eca0f8b188a1ed40abbcc616dc3a837d76/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts#L217-L222

[dtassone]

create single issue for the next todos

[oliviertassinari]

@dtassone Could you update the PR to document the breaking changes? We are going to need it for the next release's changelog and for developers landing here. BTW, it has been your turn for the next release for the last 16 days. Are you up for making one Monday? :)

[Bixtrix]

@dtassone @oliviertassinari It would have been nice to write that the multiple selection (selectionModel as array input) now requires XGrid component in the release notes

Edit: Included in build v4.0.0-alpha.34

[Tai-Iro]

Why is the error for multiple selections a thing? It's not mentioned anywhere in the docs or release notes, and it doesn't even stop multiple selections from working.
This change: https://github.com/mui-org/material-ui-x/pull/1823/files#diff-36939e58755c91e3693a4f18aa7796b137ba1e32f65357a940fb358286048088R247

[oliviertassinari]

@Bixtrix multiple selection now requires XGrid component in the release notes
@Tai-Iro Why is the error for multiple selections a thing?

Note that multiple row selections has always been documented under the Pro plan in https://material-ui.com/components/data-grid/selection/#multiple-row-selection.

If it was possible to make work in DataGrid before with the selectionModel prop, it was a mistake from our side, sorry for the surprise. It was never intended nor documented.

Speaking of surprises, this might be also be one, not sure #1821;

[Tai-Iro]

@Bixtrix multiple selection now requires XGrid component in the release notes
@Tai-Iro Why is the error for multiple selections a thing?

Note that multiple row selections has always been documented under the Pro plan in https://material-ui.com/components/data-grid/selection/#multiple-row-selection.

If it was possible to make work in DataGrid before with the selectionModel prop, it was a mistake from our side, sorry for the surprise. It was never intended nor documented.

It was directly documented as being an option in the Controlled Selection example here: https://material-ui.com/components/data-grid/selection/#controlled-selection
And every example that uses checkboxes allows selecting multiple items, of which there are several. I already mentioned it in an issue before you replied: #2193

[m4theushw]

Yeah, with checkboxSelection it should allow multiple selection even with DataGrid. We missed an additional check here:

https://github.com/mui-org/material-ui-x/blob/3d1e5d8157bb12c2f27ef1223bc169890d5404db/packages/grid/data-grid/src/DataGrid.tsx#L254

Previously, there was no warning and the validation was done inside the hook.