[DataGrid] Add a subset of used @mui/material components to GridSlotsComponent

[DanailH]

Part of #3066

I've made a subsite of all @mui/material components we use in the grid be available as a slot component. I've checked all the @mui/material we use and these once seemed to make the most sense for a first iteration. I'm adding the rest below. We can discuss and see if any of the others also need to be added in this first iteration (or if I need to revert any of the ones I added).

---

List of remaining @mui/material components currently used in the grid:

• CircularProgress
• TablePagination
• MenuList
• MenuItem
• Paper
• Grow
• Popper
• IconButton
• ListItemIcon
• InputBase
• InputLabel
• FormControlLabel
• Box
• Badge
• Tooltip
• NoSsr
• ClickAwayListener
• Grow
• MuiDivider

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[flaviendelangle]

Could we add a Form input section here ?
To show how to use it to switch to another variant for instance.

[DanailH]

Could we add a Form input section here ? To show how to use it to switch to another variant for instance.

Sure, but I didn't add all the form elements we use from the core. I skipped InputBase, InputLabel, FormControlLabel. If we are adding a Form input section in the docs maybe its better to also add slots for those components before that?

[flaviendelangle]

Yes, if you prefer we can first release this feature in a discrete way and then document it fully when ready.

[m4theushw]

Should Popper also be added? Adding it seems to solve part of the problem raised in #3381.

It is possible to override Portal props for Column Header tooltips by customizing the theme's default props for Tooltip, but since there is no ability to customize default props for Popper/Portal to propogate the shadow dom container, all of the styled(Popper) components will appear outside and have no styling applied.

[DanailH]

Should Popper also be added? Adding it seems to solve part of the problem raised in #3381.

It is possible to override Portal props for Column Header tooltips by customizing the theme's default props for Tooltip, but since there is no ability to customize default props for Popper/Portal to propogate the shadow dom container, all of the styled(Popper) components will appear outside and have no styling applied.

I added componentsProps for Popper since we never use it directly. We use it as a base for GridMenu. In addition, I added the Tooltip to slot components.

[m4theushw]

It's missing to spread rootProps.componentsProps?.basePopper in the GridPanel.

https://github.com/mui-org/material-ui-x/blob/7bac90d6dbaef58457fda74efa224d7d97dd8f4e/packages/grid/_modules_/grid/components/panel/GridPanel.tsx#L30

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[m4theushw]

The as prop is missing as well as rootProps.componentsProps.panel.

[DanailH]

I can't add them in the GridPanel directly because the useGridRootProps can be used in components outside of DataGrid. That's why I had to pass it down from the parent. The same applies to the other comment #3490 (comment)

Error: Uncaught Error: MUI: useGridRootProps should only be used inside the DataGrid/DataGridPro component.

[m4theushw]

We had a discussion about that in #2522.

Currently the GridPanel already depends on another context: GridApiContext. We could also use useGridRootProps but that would be a breaking change. So I'm OK to not do that for now.

[DanailH]

Ok so if we are postponing this and if this is the only thing left can we proceed with merging this PR?

[m4theushw]

If the as prop is applied inside GridPanel, then it doesn't need to be applied here again.