[DataGrid] Refactor: create base Popper #16362
Conversation
romgrk
added
the
component: data grid
|
Deploy preview: https://deploy-preview-16362--material-ui-x.netlify.app/ |
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
removed
the
PR: out-of-date
| @@ -43,31 +42,24 @@ const useUtilityClasses = (ownerState: OwnerState) => { | |||
| return composeClasses(slots, getDataGridUtilityClass, classes); | |||
| }; | |||
|
|
|||
| const GridMenuRoot = styled(Popper, { | |||
| const GridMenuRoot = styled(NotRendered<GridSlotProps['basePopper']>, { | |||
There was a problem hiding this comment.
I find this diff strange. What if we were to import https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Popper/BasePopper.tsx and style this one instead.
But even then, I'm unclear about the need. Maybe what confuses me is in the order in which we do this. Shouldn't we first move GridMenuRoot out of the unstyled version? Once we do, we can stick to import and wrap Popper. The fewer React component wrappers, the fastest the grid is.
Unless maybe the whole GridMenu component is a styled API, so maybe move the whole thing out of the unstyled data grid? If I'm using Shadcn UI, would I want to replace it, or add sub slots? I think it's how we determine if it's for the unstyled API or Material UI API.
There was a problem hiding this comment.
What we need to do here is wrap rootProps.slots.basePopper, but it's not available at initialization. I'm using this NotRendered component just to make the typechecking work. At runtime, as={slots.basePopper} needs to be used.
As for the styled/unstyled changes, I'm still evaluating how to do them. Ideally, we'll have a styling solution that doesn't require tangling styles to components at initialization time.
Part of the design-system agnostic work.
The base
Poppercomponent has a different API than material-ui because material-ui's API is hard to adapt for other design-systems, while the other way around is easy.