[DataGrid][ShadowDOM] Add GridMenu to GridSlotsComponent to override Popper.container -> Portal.container

[hafley66]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

const shadowDomChildDiv = someDiv;
const gridProps: DataGridProps = {
    componentsProps: {
        // Corresponds to UL under the popper that powers triple dot menu
        columnMenu: {},
        // These are Portal'ed components
        columnsPanel: { container: shadowDomChildDiv },
        filterPanel: { container: shadowDomChildDiv },
        panel: { container: shadowDomChildDiv },
        preferencesPanel: { container: shadowDomChildDiv },
        // I am asking for this to be added, corresponding to GridMenu in the material-ui-x codebase
        menu: { container: shadowDomChildDiv },
    }
}

I am opening another card to allow for defaulting the props to portal in mui/material, but this stands as a request to add GridMenu to GridSlotsComponent.

It should be possible to render elements using Portal inside of a shadow dom without losing styles. You can override DataGridProps.componentsProps+@mui/material.theme to default the Portal.container for many elements, except for portal itself, and except for the GridMenu, used in various places in DataGrid.

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.

Some are not in the GridComponentSlots mechanism, so it is not possible to override props or component to change the Portal.container.

Examples 🌈

Related Issue and context: #3319

https://codesandbox.io/s/https-github-com-mui-org-material-ui-x-issues-3319-frydd

Please click on triple dot. See how its styles are not applied since emotion is injecting into shadow dom root, and the portal container is always outside shadow dom (we also cannot pass disablePortal, but overriding container is better solution in general).

Then see how Filter and the columns selectors are styled correctly, that is because their props are customized by the props of data grid itself.

Motivation 🔦

I currently host newer frontends in our larger monolithic frontend application. There are very old css/html resets being applied that I simply cannot afford to remove due to the nature of the problem. Micro frontend techniques have been a boon in this regard, and I needed shadow dom to avoid hostile styling overrides that are unpredictable.

Having this feature would allow mounting the missing portal element into the shadow dom by being able to overrides its props or component. The data is last frontier for me in this regard, as I have figured out how to get everything else working within shadow dom.

Order ID 💳 (optional)

No response

[hafley66]

This is one way to achieve Portal.container overrides, however this issue raises another approach that would eliminate need for adding new code to this repo to achieve same effect: mui/material-ui#30116

[hafley66]

cc @junhuhdev
This approach may not have 100% ability to cover rest of shadow dom support, I do not know what else I have yet to use in DataGridPro that also needs Portal.container overrides, but keeping here as alternate approach

[jhswedeveloper]

Hmm any progress on this one? Or an estimate of how much time it would take?

[hafley66]

Keep eyes on #3490

[jhswedeveloper]

Thanks @hafley66 I see that #3490 is merged, does that mean this is fixed? have you managed to test?

[hafley66]

@junhuhdev haven't tested yet, my company does not want to use column menu so i've removed it, and had to manually change the filter panel, but i can try it out possibly later today

[jhswedeveloper]

@hafley66 I see ive been trying to test myself, but i always find it so hard to find which slot im suppose to override.

Is this correct ?

MuiDataGrid: {
  componentProps: {
       basePopper: {
            container: container
       }
  }
}

perfect this seems to work.

[hafley66]

Yep @junhuhdev, we can finally close this card

@DanailH @m4theushw thank you for these new changes!