[core] Use MUI Core v7 libraries in packages and docs #16771

DiegoAndai · 2025-02-28T19:11:42Z

Update docs and packages to all use v7 of @mui/material and related packages.
Address a few conflicting cases, where types would no longer match starting with v6 (mainly: [core] Use MUI Core v7 libraries in packages and docs #16771 (comment))

Changelog

The peer dependency on @mui/material has been updated to accept only v7.
This has been done to increase the adoption rate of ESM.
Since only v7 of @mui/material has proper ESM support, we decided to help with its adoption and fix numerous issues using X packages in environments where transpiling is not an option.

TODO

Add a common migration page/section once we agree on the changes/direction

mui-bot · 2025-02-28T19:21:26Z

Deploy preview: https://deploy-preview-16771--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against 1dcbabe

github-actions · 2025-03-04T07:20:10Z

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

DiegoAndai · 2025-03-05T15:42:03Z

The deploy, codesandbox, and types failures should be fixed with mui/material-ui#45491

DiegoAndai · 2025-03-11T19:27:04Z

@Janpot @cherniavskii @LukasTy in the last commit, I fixed some TS issues that surfaced:

The InputBase's slots were incorrectly typed as having an htmlInput slot. The correct slot is input: https://mui.com/material-ui/api/input-base/#input-base-prop-slotProps. The confusion probably came from the TextField component, which has an input slot and ahtmlInput slot to differentiate the component and the element.
The Select component was incorrectly passed a placeholder prop, which doesn't exist, it's removed here: https://github.com/mui/material-ui/blob/HEAD/packages/mui-material/src/Select/Select.d.ts#L14
On RowContextMenu, we must explicitly type the event. It is correctly matched against MouseEventHandler<HTMLDivElement>, but it's not inferred.

I wonder why these weren't caught earlier 🤔 any ideas?

After fixing these, we have two types errors left, which are being handled in mui/material-ui#45548

I think we should split these fixes off into separate PRs, but wanted to check with you first.

LukasTy

Thank you for working on this! 🙏
The changes make sense to me. 👌

LukasTy · 2025-03-12T07:42:14Z

packages/x-data-grid/src/material/index.tsx

@@ -388,11 +388,11 @@ function transformInputProps(props: GridSlotProps['baseInput'] | undefined) {
    result.endAdornment = <InputAdornment position="end">{result.endAdornment}</InputAdornment>;
  }

-  if (slotProps?.htmlInput) {
+  if (slotProps?.input) {


This and the change in gridBaseSlots might be a slight breaking change, which should be flagged. 🤔

Where should I do that?
Also, should I start creating separate PRs for each of these fixes?

Maybe @mui/xgrid could assert it and handle it accordingly? 🤔
It looks like this might have been a mistake all along. 🙈

What slotProps should be used for the HTML input element? Did it change?

In the Input components, slotProps.input points to the input HTML element

In the TextField component, slotProps.htmlInput points to the input HTML element, and slotProps.input to the Input component

It hasn't changed

Ok. So the slotProps here aren't material slotProps, they're data-grid baseInput slotProps which have their own independent set of typings. I didn't notice that nuance in material props when I wrote the grid base slot typings, so I made htmlInput refer to the HTML input element for both baseInput and baseTextField.

The grid base slots are inspired by material API but don't match it in many places. It's possible that we keep using htmlInput in both cases, and I think it's going to be more intuitive for grid-bindings authors reading those typings, so I'd keep it as it is. Any thoughts on that?

Thanks for clarifying. 👍
Yeah, it makes sense to me, in such case, the changes made by Diego should be reverted. 👌

Ok, we have a problem if we revert this change.
Docs examples with Material components start failing prop checking, because they do not expect to receive slotProps.htmlInput on a InputBase slot. 🙈
So, this also potentially means a BC for users if we go with some sort of override. 🤔

Either we need to rename the slotProps to input as initially done by Diego or consider alternative typing approaches. 🤷
WDYT @romgrk? Does the current state make sense?
InputBase component never had a htmlInput slot, it was always input, so, if I understand it correctly, material migrating to slotProps triggered this error as now the typing is very close, but different, while before there were no slotProps. 🤔

material migrating to slotProps triggered this error as now the typing is very close, but different

In this case it's close but different, but in other cases it's completely different.

Docs examples with Material components start failing prop checking, because they do not expect to receive slotProps.htmlInput on a InputBase slot.

Why is an InputBase receiving those props though? The grid baseInput is not an InputBase, typecheck should not fail. Which examples are failing?

edit: I've found the issue, let me get some feedback from the rest of the team.

Janpot · 2025-03-12T08:16:12Z

The changes in screenshots seem innocent, but do we know what in this PR caused them?

LukasTy · 2025-03-12T08:22:15Z

The changes in screenshots seem innocent, but do we know what in this PR caused them?

Please try merging the latest master to see if that fixes it. 😉
We recently merged a playwright package bump with a similar number of differences. 🤔

LukasTy · 2025-03-12T15:40:24Z

The changes in screenshots seem innocent, but do we know what in this PR caused them?

Please try merging the latest master to see if that fixes it. 😉 We recently merged a playwright package bump with a similar number of differences. 🤔

Maybe it's the bump of @mui/material in the demos that is causing these argos diffs? 🤔

github-actions · 2025-03-12T15:42:31Z

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

Janpot · 2025-03-15T15:35:41Z

packages/x-charts-pro/package.json

@@ -53,8 +53,8 @@
  "peerDependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0-alpha",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0-alpha",
+    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0-beta",


would it make sense to already define the full v7 range so that we don't have to make changes to test with stable core once it gets release. We then just have to remove ^7.0.0-beta once X goes stable.

Suggested change

"@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0-beta",

"@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",

🤔 I believe we can do this both for dependencies and peer dependencies

Whoops, somehow I might have missed something. 🙈
Clearly, I agree with the proposal. 👌

And I'm just still wondering about the dev dependencies. I feel like we should think about how this will look in stable v7 world. i.e. every time we'd write

"@mui/material": "^7.3.8"

we'd want that to look like

"@mui/material": "^7.0.0"

At the time of X@v8 going stable. And thus today, in beta, we want that to look like

"@mui/material": "^7.0.0 || ^7.0.0-beta"

or

"@mui/material": "^7.0.0 || ^7.0.0-beta.4"

Does it matter that much if we plan to remove the beta dep after a stable release?
Technically, we could have probably left ^7.0.0-alpha.0 to be precise, if there are no specific fixes afterwards, that would prevent interoperability. 🤔

It's not as important as it's not user facing. We can update it as well when core@v7 becomes stable.

Janpot

Just a suggestion about widening the dependency range a bit more, otherwise looking good

github-actions · 2025-03-16T06:30:10Z

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

DiegoAndai self-assigned this Feb 28, 2025

DiegoAndai added the test label Feb 28, 2025

Use Material UI @next for testing

0f035a8

DiegoAndai force-pushed the material-ui-v7-beta-test branch from 527020b to 0f035a8 Compare February 28, 2025 19:17

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 4, 2025

DiegoAndai mentioned this pull request Mar 5, 2025

[core] Fix package layout inconsistencies mui/material-ui#45491

Merged

Ignore loading button warning in regression tests

764c1a2

Janpot and others added 3 commits March 7, 2025 11:06

Migrate grid

9e552d7

Use theme augmentation PR build

1104884

Merge branch 'master' into material-ui-v7-beta-test

79cadfc

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 11, 2025

DiegoAndai added 3 commits March 11, 2025 11:51

Use augmentation PR build to types packages also

49743c1

prettier

869039c

Point docs and monorepo to theme augmentation PR for testing

c4b7bb6

Janpot mentioned this pull request Mar 11, 2025

[code-infra] Convert a few docs modules to ts mui/material-ui#45548

Merged

Fix types issues

16cd21e

material

29042a8

LukasTy reviewed Mar 12, 2025

View reviewed changes

fixes

ba04f99

Merge branch 'master' into material-ui-v7-beta-test

a296def

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 12, 2025

Merge branch 'master' into material-ui-v7-beta-test

8ee03de

docs:api

fabb57a

LukasTy added core Infrastructure work going on behind the scenes enhancement This is not a bug, nor a new feature breaking change v8.x and removed test labels Mar 14, 2025

LukasTy assigned LukasTy and unassigned DiegoAndai Mar 14, 2025

LukasTy added 2 commits March 14, 2025 17:26

docs:link-check

6669da9

Remove broken link

3f651e6

LukasTy marked this pull request as ready for review March 14, 2025 15:34

Merge branch 'master' into material-ui-v7-beta-test

1683d50

LukasTy requested review from Janpot and a team March 14, 2025 15:40

Janpot reviewed Mar 15, 2025

View reviewed changes

Janpot approved these changes Mar 15, 2025

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 16, 2025

LukasTy added 2 commits March 17, 2025 13:11

Merge branch 'master' into material-ui-v7-beta-test

866bc45

Remove renovate MUI Core version limit

1fe2f7a

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 17, 2025

LukasTy and others added 3 commits March 17, 2025 13:59

Allow v7 stable in peer deps

ecf81fb

revert: grid base slots

4979658

Add entry about peer dep change in all package migration pages

1dcbabe

LukasTy merged commit 6a7113b into mui:master Mar 18, 2025
22 checks passed

flaviendelangle mentioned this pull request Mar 18, 2025

[core] Dedupe deps #17014

Closed

LukasTy mentioned this pull request Mar 18, 2025

Bump @mui/monorepo digest to 30265e0 #16662

Closed

1 task

LukasTy mentioned this pull request Mar 28, 2025

[core] Cleanup @mui dependency versions #17160

Merged

corytam mentioned this pull request Apr 1, 2025

[pickers] Dependency on ^6.0.0 when MUI-X is supposedly MUI v7 only #17218

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[core] Use MUI Core v7 libraries in packages and docs #16771

[core] Use MUI Core v7 libraries in packages and docs #16771

DiegoAndai commented Feb 28, 2025 •

edited by LukasTy

Loading

mui-bot commented Feb 28, 2025 •

edited

Loading

github-actions bot commented Mar 4, 2025

DiegoAndai commented Mar 5, 2025

DiegoAndai commented Mar 11, 2025 •

edited

Loading

LukasTy left a comment

LukasTy Mar 12, 2025

DiegoAndai Mar 12, 2025

LukasTy Mar 12, 2025

romgrk Mar 12, 2025

DiegoAndai Mar 12, 2025

romgrk Mar 12, 2025

LukasTy Mar 13, 2025

LukasTy Mar 14, 2025

romgrk Mar 14, 2025 •

edited

Loading

Janpot commented Mar 12, 2025

LukasTy commented Mar 12, 2025

LukasTy commented Mar 12, 2025

github-actions bot commented Mar 12, 2025

Janpot Mar 15, 2025 •

edited

Loading

LukasTy Mar 17, 2025

Janpot Mar 17, 2025 •

edited

Loading

LukasTy Mar 17, 2025

Janpot Mar 17, 2025

Janpot left a comment

github-actions bot commented Mar 16, 2025

	"@mui/material": "^5.15.14 \|\| ^6.0.0 \|\| ^7.0.0-beta",
	"@mui/material": "^5.15.14 \|\| ^6.0.0 \|\| ^7.0.0 \|\| ^7.0.0-beta",

[core] Use MUI Core v7 libraries in packages and docs #16771

[core] Use MUI Core v7 libraries in packages and docs #16771

Conversation

DiegoAndai commented Feb 28, 2025 • edited by LukasTy Loading

Changelog

TODO

mui-bot commented Feb 28, 2025 • edited Loading

github-actions bot commented Mar 4, 2025

DiegoAndai commented Mar 5, 2025

DiegoAndai commented Mar 11, 2025 • edited Loading

LukasTy left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romgrk Mar 14, 2025 • edited Loading

Choose a reason for hiding this comment

Janpot commented Mar 12, 2025

LukasTy commented Mar 12, 2025

LukasTy commented Mar 12, 2025

github-actions bot commented Mar 12, 2025

Janpot Mar 15, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Janpot Mar 17, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Janpot left a comment

Choose a reason for hiding this comment

github-actions bot commented Mar 16, 2025

DiegoAndai commented Feb 28, 2025 •

edited by LukasTy

Loading

mui-bot commented Feb 28, 2025 •

edited

Loading

DiegoAndai commented Mar 11, 2025 •

edited

Loading

romgrk Mar 14, 2025 •

edited

Loading

Janpot Mar 15, 2025 •

edited

Loading

Janpot Mar 17, 2025 •

edited

Loading