[data grid] add new slots: `columnMenuPopper`, `columnMenuPaper`, `preferencePanelPopper`, `preferencePanelPaper`

[vovarudomanenko]

[data grid] add new slots: `columnMenuPopper`, `columnMenuPaper`, `preferencePanelPopper`, `preferencePanelPaper`

[michelengelen]

thanks for the suggestion @vovarudomanenko ... I think we could improve on this a bit with a very simple conditional logic on the slots side (as we do with many others as well).

What I mean is that we could use a default Popper (e.g. basePopper) and, if present, use a custom one. Something like this:

diff --git a/packages/x-data-grid/src/components/menu/GridMenu.tsx b/packages/x-data-grid/src/components/menu/GridMenu.tsx
index cc00c12da..e3a33f2ee 100644
--- a/packages/x-data-grid/src/components/menu/GridMenu.tsx
+++ b/packages/x-data-grid/src/components/menu/GridMenu.tsx
@@ -108,9 +108,12 @@ function GridMenu(props: GridMenuProps) {
     onClose(event);
   };

+  const popperComponent = rootProps.slots?.menuPopper || rootProps.slots.basePopper;
+  const popperComponentSlots = rootProps.slotProps?.menuPopper || rootProps.slotProps.basePopper;
+
   return (
     <GridMenuRoot
-      as={rootProps.slots.basePopper}
+      as={popperComponent}
       className={clsx(className, classes.root)}
       ownerState={rootProps}
       open={open}
@@ -118,7 +121,7 @@ function GridMenu(props: GridMenuProps) {
       transition
       placement={position}
       {...other}
-      {...rootProps.slotProps?.basePopper}
+      {...popperComponentSlots}
     >
       {({ TransitionProps, placement }) => (
         <ClickAwayListener onClickAway={handleClickAway} mouseEvent="onMouseDown">

@mui/xgrid WDYT?

[layerok]

similar issue #8549

[layerok]

@michelengelen I like your idea that we should keep the basePopper slot and be able to replace it with menuPopper slot. This way we won't break backward compatibility.

[romgrk]

The popper slot will require a rework to enable the material-less datagrid. I would avoid touching those slots until we have figured out how to make it work properly as that slot in particular is already a bit problematic. In particular, some of the functionality of the popper would need to be abstracted a bit behind a cleaner interface (e.g. handling the ClickAwayListener) like we implement the current Joy UI bindings.

If you have a workaround, I don't think we can provide anything better at the moment. We plan to rework the slots this quarter though.

[layerok]

@romgrk Maybe I understood something wrong, but you described a different problem.

Even if you abstract the popper functionality behind a cleaner interface, the problem I encountered will not go away on its own. The basePropper slot will still be used by two different panels (the column menu panel and the preference panel). This makes styling more difficult than it needs to be. If you plan to fix this when you redo the slots, that's okay, I just want to make sure you understand the problem.

[romgrk]

I understand the problem but I don't want to add slots now because we need to clarify our slot API first.