fix(deps): update material-ui monorepo to v7 (major)#2770
fix(deps): update material-ui monorepo to v7 (major)#2770renovate[bot] wants to merge 1 commit intomainfrom
Conversation
renovate
bot
force-pushed
the
renovate/major-material-ui-monorepo
branch
4 times, most recently
from
e7eb3fc to
e9ccef7
Compare
renovate
bot
force-pushed
the
renovate/major-material-ui-monorepo
branch
13 times, most recently
from
62aa05c to
90aa34f
Compare
renovate
bot
force-pushed
the
renovate/major-material-ui-monorepo
branch
13 times, most recently
from
e0644f0 to
802bdc1
Compare
renovate
bot
force-pushed
the
renovate/major-material-ui-monorepo
branch
13 times, most recently
from
00d526f to
6d0fd07
Compare
OpenAPI ChangesShow/hide No detectable change.Unexpected changes? Ensure your branch is up-to-date with |
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
| "@mui/material": "^6.4.5", | ||
| "@mui/material-nextjs": "^6.4.3", | ||
| "@mui/system": "^6.4.3", | ||
| "@mui/lab": "7.0.0", |
There was a problem hiding this comment.
Bug: TabList, TabContext, and TabPanel are re-exported from @mui/lab, but in MUI v7 they were moved to @mui/material. This will cause import errors.
Severity: CRITICAL
Suggested Fix
Update the export statements in frontends/ol-components/src/index.ts to import TabList, TabContext, TabPanel, and their corresponding Props types from @mui/material instead of @mui/lab.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: frontends/ol-components/package.json#L23
Potential issue: The upgrade to Material-UI v7 moves the `TabList`, `TabContext`, and
`TabPanel` components from the `@mui/lab` package to `@mui/material`. However,
`frontends/ol-components/src/index.ts` continues to re-export these components from
their old location in `@mui/lab`. Since they no longer exist at that path, any part of
the application that imports them from `ol-components`, such as `DashboardLayout.tsx`,
will fail with an import error at runtime, preventing the application from loading
correctly.
| @@ -20,10 +20,10 @@ | |||
| "@emotion/react": "^11.11.1", | |||
| "@emotion/styled": "^11.11.0", | |||
| "@mui/base": "5.0.0-beta.70", | |||
There was a problem hiding this comment.
Bug: The Dialog component uses the TransitionComponent prop, which was removed in Material-UI v7, and will cause runtime errors or break transition animations.
Severity: CRITICAL
Suggested Fix
In Dialog.tsx, replace the deprecated TransitionComponent={Transition} prop with the new slots API: slots={{ transition: Transition }}. Also, verify that the TransitionProps import from @mui/material/transitions is still valid in v7 and update its path if necessary.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: frontends/ol-components/package.json#L22
Potential issue: The application is being upgraded to Material-UI v7, which removes the
`TransitionComponent` prop from components like `Dialog`. The code in `Dialog.tsx` at
line 132 continues to use this deprecated prop: `TransitionComponent={Transition}`. When
a dialog is opened, this will either cause a runtime error because the prop is
unrecognized or the prop will be silently ignored, causing the transition animation to
fail. This will affect all dialogs in the application, including `FormDialog`,
`EmailSettingsDialog`, `UnenrollDialog`, and others that rely on this component.
| @@ -20,10 +20,10 @@ | |||
| "@emotion/react": "^11.11.1", | |||
| "@emotion/styled": "^11.11.0", | |||
| "@mui/base": "5.0.0-beta.70", | |||
There was a problem hiding this comment.
Bug: The code uses deep imports for @mui/base components, which is a deprecated pattern that is incompatible with the MUI v7 upgrade and may cause build failures.
Severity: MEDIUM
Suggested Fix
Update all deep imports from @mui/base to be top-level imports. For example, change import { FocusTrap } from "@mui/base/FocusTrap" to import { FocusTrap } from "@mui/base". Additionally, consider upgrading @mui/base to v7 to maintain version consistency across all MUI packages.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: frontends/ol-components/package.json#L22
Potential issue: The codebase is being upgraded to MUI v7, but the `@mui/base` package
remains at v5. The code uses deep imports, such as `import { FocusTrap } from
"@mui/base/FocusTrap"`, in files like `NavDrawer.tsx` and `Popover.tsx`. According to
the MUI v7 migration guide, deep imports are no longer supported and should be replaced
with top-level imports. This inconsistency between the import style and the upgraded MUI
ecosystem could lead to build failures or module resolution errors, as the build tooling
from v7 packages may enforce stricter import rules.
| "@mui/material-nextjs": "^6.4.3", | ||
| "@mui/system": "^6.4.3", | ||
| "@mui/lab": "7.0.0", | ||
| "@mui/material": "^7.0.0", |
There was a problem hiding this comment.
Bug: The upgrade to MUI v7 removes the item and breakpoint props (xs, md) from Grid v1. Components like GridColumn still use this deprecated API, which will break layouts.
Severity: CRITICAL
Suggested Fix
Migrate all instances of the v1 Grid component to the v2 API. Replace <Grid item xs={12}> with <Grid size={12}>. For components like GridColumn, update them to use the new size prop instead of spreading props like xs and md. The codebase already exports Grid2, which can be used for the migration.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: frontends/ol-components/package.json#L24
Potential issue: The upgrade to Material-UI (MUI) v7 removes support for the v1 Grid
API's `item` and breakpoint props (e.g., `xs`, `md`). Several components in the
codebase, including `GridColumn` and `ChoiceBoxField`, still rely on this deprecated
API. For example, `GridColumn` passes `{ xs: 12, md: 9 }` to `<Grid item ... />`. In MUI
v7, these props will be ignored, causing the grid system to fail and resulting in broken
layouts on pages that use these components, such as `ItemsListingComponent.tsx` and
`LearningPathListingPage.tsx`. The grid cells will not be sized correctly, leading to
significant visual and functional disruption.
| "@mui/system": "^6.4.3", | ||
| "@mui/lab": "7.0.0", | ||
| "@mui/material": "^7.0.0", | ||
| "@mui/material-nextjs": "^7.0.0", |
There was a problem hiding this comment.
Bug: Upgrading to MUI v7 changes @mui/material/Grid to Grid v2, which no longer supports the item prop. Existing components using <Grid item> will have broken layouts.
Severity: HIGH
Suggested Fix
Refactor all instances of <Grid item ...> to use the new Grid v2 syntax. For example, change <Grid item xs={12}> to <Grid size={12}> or <Grid size={{ xs: 12 }}>. This change needs to be applied to all components that use the Grid component with the item prop, including ChoiceBoxField.tsx, ItemsListingComponent.tsx, and GridLayout.tsx.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.
Location: frontends/ol-components/package.json#L25
Potential issue: The pull request upgrades `@mui/material` to v7. In this version,
`@mui/material/Grid` is an alias for the new Grid v2 component, which has a different
API. Specifically, Grid v2 does not support the `item` prop for defining grid items; it
uses a `size` prop instead. Multiple components in the codebase, such as
`ChoiceBoxField`, `ItemsListingComponent`, and `GridLayout`, continue to use the old
`<Grid item>` syntax. Since the `item` prop will be ignored by the new Grid v2
component, the layout of these components and the pages that use them will silently
break.
This PR contains the following updates:
6.0.0-dev.240424162023-9968b4889d→7.0.0^6.4.5→^7.0.0^6.4.3→^7.0.0^6.4.3→^7.0.0Release Notes
mui/material-ui (@mui/lab)
v7.0.0Mar 26, 2025
🎉 We're happy to announce the stable release of v7.
@mui/material@7.0.0onHighlightChangeis called (#45438) @ZeeshanTamboli@mui/system@7.0.0@mui/lab@7.0.0-beta.9Docs
Core
React.ComponentTypein proptypes generation (#45664) @Janpottranslations.jsonis present in all@mui/docspackage builds (#45626) @LukasTyreact-remove-propertiesbabel plugin (#45218) @JanpotponyfillGlobal(#45606) @JanpotAll contributors of this release in alphabetical order: @DiegoAndai, @IshfaqAhmedProg, @Janpot, @letianpailove, @LukasTy, @mnajdova, @mushfiqbh, @oliviertassinari, @siriwatknp, @ZeeshanTamboli
Configuration
📅 Schedule: Branch creation - "every weekend" in timezone US/Eastern, Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about these updates again.
This PR was generated by Mend Renovate. View the repository job log.