[RFC] Extract Material UI from internal DataGrid APIs

[siriwatknp]

Goal

A continuation of #6811 to separate internal DataGrid APIs from Material UI without breaking changes. Those internal APIs will be used to integrate with Joy UI.

Not related to this issue but in the future, using Joy UI with DataGrid will be like this:

yarn add @mui/x-data-grid @mui/joy @emotion/react @emotion/styled

import { DataGrid } from '@mui/x-data-grid/DataGridJoy';

<DataGrid />;

Working branch?

next

Tasks

We will focus on the DataGrid MIT license (@mui-x/data-grid) first.

1. Start using @mui/system and @mui/base

• [x] use styled from @mui/system https://github.com/mui/mui-x/pull/8032
• [ ] use Box from @mui/system
• [ ] ~use ClickAwayListener from @mui/base~ duplicate the component with Joy UI
• [ ] ~use TrapFocus from @mui/base~ TrapFocus changed to FocusTrap which can break existing DataGrid projects.
• [ ] ~use PopperUnstyled from @mui/base~ duplicate the component with Joy UI

2. Convert components to slots in defaultGridSlotsComponents.ts to use rootProps.components.* instead.

• [ ] Material UI IconButton (in GridActionsCell)
• [ ] Material UI MenuList (in GridActionsCell)
• [ ] Material UI InputBase (in GridEditDataCell)
• [ ] Material UI MenuItem (in GridEditSingleSelectCell)
• [ ] Material UI Badge (in GridColumnHeaderFilterIconButton)
• [ ] Material UI FormControl (in GridFilterForm)
• [ ] Material UI FormControlLabel (in GridColumnsPanel)
• [ ] Material UI CircularProgress (in GridLoadingOverlay)

3. Extract components to internal

These components are using Material UI component types. We need to generalize them to not include types from @mui/material and mask the types from the reexport of each design system.

• [ ] GridMenu
• [ ] GridActionsCellItem
• [ ] GridBooleanCell
• [ ] EditInputCell
• [ ] GridSkeletonCell
• [ ] GridFilterInputBoolean
• [ ] GridFilterInputMultipleValue
• [ ] GridColumnHeaders

Timeline

Start now - End of March

Next step (in a separate issue)

Start adding Joy UI components (April)

cc @cherniavskii

[siriwatknp]

@cherniavskii Does the list above look good to you?

[cherniavskii]

Hey @siriwatknp

1. Rename folder DataGrid to DataGridMaterial

I would rather keep the folder and only extract Material-related components (primarily slots) to a separate folder. I started doing that some time ago in https://github.com/mui/mui-x/pull/7095

Move GridRootStyles to DataGridMaterial/components/MaterialGridRootStyles

Most styles in there are not specific to Material UI, so I would only extract some of them.

use styled from @mui/system

I've done this in https://github.com/mui/mui-x/pull/7095, but according to Flavien there are some differences in theme - see https://github.com/mui/mui-x/pull/7095#discussion_r1042128468.

I agree with the rest of the list. Part of that is already done in https://github.com/mui/mui-x/pull/7095. It's a bit outdated though