diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md
index 0a950a9ecc9716..b1d43653b44cd9 100644
--- a/CHANGELOG.old.md
+++ b/CHANGELOG.old.md
@@ -4127,8 +4127,8 @@ A big thanks to the 17 contributors who made this release possible. Here are som
```diff
import {
- unstable_createCssVarsProvider as createCssVarsProvider,
- + unstable_createCssVarsTheme as createCssVarsTheme,
+ unstable_createCssVarsProvider as createCssVarsProvider,
+ + unstable_createCssVarsTheme as createCssVarsTheme,
} from '@mui/system';
const { CssVarsProvider } = createCssVarsProvider({
diff --git a/README.md b/README.md
index 3c122d4cebe02e..41bbdd7cc4dd8e 100644
--- a/README.md
+++ b/README.md
@@ -5,12 +5,6 @@
Material UI
-**Material UI** contains foundational React UI component libraries for shipping new features faster:
-
-- [Material UI](https://mui.com/material-ui/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system.
-
-- [Joy UI](https://mui.com/joy-ui/getting-started/) is a library of beautifully designed React UI components built to spark joy.
-
-## Documentation
+[Material UI](https://mui.com/material-ui/) is a comprehensive library of React components that features our independent implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system.
+It's trusted by some of the world's greatest product teams because it's been rigorously battle-tested through more than a decade of development by thousands of open-source contributors.
-### Material UI
+Material UI's core functionality is extended by [MUI X](https://github.com/mui/mui-x), a suite of complex components for advanced use cases.
-Visit [https://mui.com/material-ui/](https://mui.com/material-ui/) to view the full documentation.
+## Documentation
+
+Get started in the [Material UI documentation](https://mui.com/material-ui/getting-started/).
Older versions
-- **[v4.x](https://v4.mui.com/)** ([Migration from v4 to v5](https://mui.com/material-ui/migration/migration-v4/))
-- **[v3.x](https://v3.mui.com/)** ([Migration from v3 to v4](https://mui.com/material-ui/migration/migration-v3/))
-- **[v0.x](https://v0.mui.com/)** ([Migration to v1](https://mui.com/material-ui/migration/migration-v0x/))
+- **[v5.x](https://v5.mui.com/)** ([Upgrading from v5 to v6](https://mui.com/material-ui/migration/upgrade-to-v6/))
+- **[v4.x](https://v4.mui.com/)** ([Upgrading from v4 to v5](https://mui.com/material-ui/migration/migration-v4/))
+- **[v3.x](https://v3.mui.com/)** ([Upgrading from v3 to v4](https://mui.com/material-ui/migration/migration-v3/))
+- **[v0.x](https://v0.mui.com/)** ([Upgrading to v1](https://mui.com/material-ui/migration/migration-v0x/))
-**Note:** `@next` only points to pre-releases.
+**Note:** `@next` points to pre-releases.
Use `@latest` for the latest stable release.
-### Joy UI
+## Joy UI
+
+This repository also contains Joy UI, an experimental component library that implements our own in-house Joy Design.
+Joy UI is in beta and _development is currently on hold_.
+When starting a new project from scratch, we recommend Material UI over Joy UI because we can guarantee ongoing support.
-Visit [https://mui.com/joy-ui/getting-started/](https://mui.com/joy-ui/getting-started/) to view the full documentation.
+You're welcome to open new issues and PRs to help improve Joy UI, but please keep in mind that the maintainers are primarily focused on other projects and may not be able to respond in a timely manner.
-**Note**: Joy UI is still in beta.
-We are adding new components regularly and you're welcome to contribute!
+View the [Joy UI documentation](https://mui.com/joy-ui/getting-started/).
## Sponsors
@@ -108,7 +109,7 @@ You can find complete templates and themes in the [MUI Store](https://mui.com/s
Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.
Contributing is about more than just issues and pull requests!
-There are many other ways to [support Material UI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.
+There are many other ways to [support Material UI](https://mui.com/material-ui/getting-started/faq/#mui-is-an-awesome-organization-how-can-i-support-it) beyond contributing to the code base.
## Changelog
@@ -120,12 +121,11 @@ Future plans and high-priority features and enhancements can be found in the [ro
## License
-This project is licensed under the terms of the
-[MIT license](/LICENSE).
+This project is licensed under the terms of the [MIT license](/LICENSE).
## Security
-For details of supported versions and contact details for reporting security issues, please refer to the [security policy](https://github.com/mui/material-ui/security/policy).
+For details on supported versions and contact information for reporting security issues, please refer to the [security policy](https://github.com/mui/material-ui/security/policy).
## Sponsoring services
diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
index fa06f82bb33dcf..335cc4ec96acca 100644
--- a/apps/pigment-css-next-app/package.json
+++ b/apps/pigment-css-next-app/package.json
@@ -24,7 +24,7 @@
},
"devDependencies": {
"@pigment-css/nextjs-plugin": "0.0.21",
- "@types/node": "^20.14.8",
+ "@types/node": "^20.16.5",
"@types/react": "^18.3.4",
"@types/react-dom": "^18.3.0",
"eslint": "^8.57.0",
diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
index f90feb1ffc8f3c..4f7e7e2aecd289 100644
--- a/apps/pigment-css-vite-app/package.json
+++ b/apps/pigment-css-vite-app/package.json
@@ -30,7 +30,7 @@
"@types/react": "^18.3.4",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
- "postcss": "^8.4.44",
+ "postcss": "^8.4.45",
"postcss-combine-media-query": "^1.0.1",
"vite": "5.4.2",
"vite-plugin-pages": "^0.32.3",
diff --git a/docs/data/docs/pages.ts b/docs/data/docs/pages.ts
index d806fea5580249..55b233c9a1b4ce 100644
--- a/docs/data/docs/pages.ts
+++ b/docs/data/docs/pages.ts
@@ -2,7 +2,7 @@ import type { MuiPage } from 'docs/src/MuiPage';
import standardNavIcons from 'docs/src/modules/components/AppNavIcons';
const pages: readonly MuiPage[] = [
- { pathname: '/versions' },
+ { pathname: 'https://mui.com/versions/' },
{
pathname: 'https://mui.com/store/',
title: 'Templates',
@@ -13,7 +13,7 @@ const pages: readonly MuiPage[] = [
'data-ga-event-label': 'sidenav',
},
},
- { pathname: '/blog', title: 'Blog', icon: standardNavIcons.BookIcon },
+ { pathname: 'https://mui.com/blog/', title: 'Blog', icon: standardNavIcons.BookIcon },
];
export default pages;
diff --git a/docs/data/joy/getting-started/overview/overview.md b/docs/data/joy/getting-started/overview/overview.md
index 63c8ae851e43c1..59e1d0a92102b3 100644
--- a/docs/data/joy/getting-started/overview/overview.md
+++ b/docs/data/joy/getting-started/overview/overview.md
@@ -11,10 +11,10 @@ title: Overview
Joy UI is an open-source React component library that follows a lightly opinionated design direction, for a clean and modern UI that gives you plenty of room to customize the look and feel.
:::warning
-Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI.
+Joy UI is in beta and _development is currently on hold_.
Read [this blog post](/blog/2023-material-ui-v6-and-beyond/) to learn more.
-However, you're welcome to look for the [`package: joy-ui`](https://github.com/mui/material-ui/labels/package%3A%20joy-ui) label on open issues and pull requests in the `mui/material-ui` GitHub repository to see what other community members are working on, and submit your own.
+You're welcome to open new issues and PRs to help improve Joy UI, but please keep in mind that the maintainers are primarily focused on other projects and may not be able to respond in a timely manner.
:::
## Why use Joy UI
diff --git a/docs/data/material/components/autocomplete/Asynchronous.js b/docs/data/material/components/autocomplete/Asynchronous.js
index 969f62e5cd28ae..4dd9444fad5045 100644
--- a/docs/data/material/components/autocomplete/Asynchronous.js
+++ b/docs/data/material/components/autocomplete/Asynchronous.js
@@ -14,44 +14,30 @@ function sleep(duration) {
export default function Asynchronous() {
const [open, setOpen] = React.useState(false);
const [options, setOptions] = React.useState([]);
- const loading = open && options.length === 0;
-
- React.useEffect(() => {
- let active = true;
-
- if (!loading) {
- return undefined;
- }
+ const [loading, setLoading] = React.useState(false);
+ const handleOpen = () => {
+ setOpen(true);
(async () => {
+ setLoading(true);
await sleep(1e3); // For demo purposes.
+ setLoading(false);
- if (active) {
- setOptions([...topFilms]);
- }
+ setOptions([...topFilms]);
})();
+ };
- return () => {
- active = false;
- };
- }, [loading]);
-
- React.useEffect(() => {
- if (!open) {
- setOptions([]);
- }
- }, [open]);
+ const handleClose = () => {
+ setOpen(false);
+ setOptions([]);
+ };
return (
{
- setOpen(true);
- }}
- onClose={() => {
- setOpen(false);
- }}
+ onOpen={handleOpen}
+ onClose={handleClose}
isOptionEqualToValue={(option, value) => option.title === value.title}
getOptionLabel={(option) => option.title}
options={options}
diff --git a/docs/data/material/components/autocomplete/Asynchronous.tsx b/docs/data/material/components/autocomplete/Asynchronous.tsx
index 82c009c528ba2d..09caaed1583547 100644
--- a/docs/data/material/components/autocomplete/Asynchronous.tsx
+++ b/docs/data/material/components/autocomplete/Asynchronous.tsx
@@ -19,44 +19,30 @@ function sleep(duration: number): Promise {
export default function Asynchronous() {
const [open, setOpen] = React.useState(false);
const [options, setOptions] = React.useState([]);
- const loading = open && options.length === 0;
-
- React.useEffect(() => {
- let active = true;
-
- if (!loading) {
- return undefined;
- }
+ const [loading, setLoading] = React.useState(false);
+ const handleOpen = () => {
+ setOpen(true);
(async () => {
+ setLoading(true);
await sleep(1e3); // For demo purposes.
+ setLoading(false);
- if (active) {
- setOptions([...topFilms]);
- }
+ setOptions([...topFilms]);
})();
+ };
- return () => {
- active = false;
- };
- }, [loading]);
-
- React.useEffect(() => {
- if (!open) {
- setOptions([]);
- }
- }, [open]);
+ const handleClose = () => {
+ setOpen(false);
+ setOptions([]);
+ };
return (
{
- setOpen(true);
- }}
- onClose={() => {
- setOpen(false);
- }}
+ onOpen={handleOpen}
+ onClose={handleClose}
isOptionEqualToValue={(option, value) => option.title === value.title}
getOptionLabel={(option) => option.title}
options={options}
diff --git a/docs/data/material/customization/css-theme-variables/usage.md b/docs/data/material/customization/css-theme-variables/usage.md
index 7aee4e3532f90a..02b399401b6d1b 100644
--- a/docs/data/material/customization/css-theme-variables/usage.md
+++ b/docs/data/material/customization/css-theme-variables/usage.md
@@ -17,7 +17,7 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
const theme = createTheme({ cssVariables: true });
function App() {
- return {/* ...you app */};
+ return {/* ...your app */};
}
```
diff --git a/docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md b/docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md
index 1d4321641f5655..975268000fb1c7 100644
--- a/docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md
+++ b/docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md
@@ -100,3 +100,14 @@ If you need to replace a single component that's been updated, there are a coupl
## Feedback and bug reports
If you've got any feedback, we'd love to [hear from you](https://github.com/mui/mui-design-kits/discussions/84).
+
+## Integrations
+
+### Quest
+
+[Quest](https://www.quest.ai/) provides a native integration with this design kit.
+
+When you design your components with the kit, you can use [Quest plugin](https://www.figma.com/community/plugin/862039267149408972/figma-to-react-from-quest) to convert your Figma designs into Material UI code.
+The code generated should be clean and production-ready.
+
+Visit the [Quest documentation](https://docs.quest.ai/quest-docs) for more details.
diff --git a/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
index 236d2c81c1f576..fb2ca30d14c3fe 100644
--- a/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
+++ b/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
@@ -212,6 +212,45 @@ yarn dev
Open the browser and navigate to the localhost URL, you should see the app running with Pigment CSS.
+### Next.js font optimization
+
+If you are using `next/font` to optimize font loading, pass a CSS variable name to the `variable` property of the font configuration and use it in the body className:
+
+```diff title="app/layout.tsx"
+ import { Roboto } from 'next/font/google';
+
+ const roboto = Roboto({
+ weight: ['300', '400', '500', '700'],
+ subsets: ['latin'],
+ display: 'swap',
++ variable: '--my-font-family',
+ });
+
+export default function RootLayout(props) {
+ const { children } = props;
+ return (
+
++
+ {children}
+
+
+ );
+ }
+```
+
+Finally, update the `typography.fontFamily` value with the variable created in the previous step:
+
+```diff title="next.config.mjs"
+ const pigmentConfig = {
+ transformLibraries: ['@mui/material'],
+ theme: createTheme({
++ typography: {
++ fontFamily: 'var(--my-font-family)',
++ },
+ }),
+ };
+```
+
### Typescript
If you are using TypeScript, you need to extend the Pigment CSS theme types with Material UI `Theme`.
@@ -274,7 +313,7 @@ We recommend reading the rest of the guide below to learn about the new styling
Since Pigment CSS is a build-time extraction tool, it does not support owner state through callbacks. Here is an example that will throw an error at build time:
```js
-const theme = extendTheme({
+const theme = createTheme({
components: {
MuiCard: {
styleOverrides: {
@@ -307,7 +346,7 @@ If you have a dynamic color based on the theme palette, you can use the `variant
```js before
-const theme = extendTheme({
+const theme = createTheme({
components: {
MuiCard: {
styleOverrides: {
@@ -321,7 +360,7 @@ const theme = extendTheme({
```
```js after
-const theme = extendTheme({
+const theme = createTheme({
components: {
MuiCard: {
styleOverrides: {
@@ -352,9 +391,9 @@ Use `DefaultPropsProvider` in your main application file and move all the compon
```diff next.config|vite.config
- import { extendTheme } from '@mui/material';
+ import { createTheme } from '@mui/material';
- const customTheme = extendTheme({
+ const customTheme = createTheme({
// ...other tokens.
components: {
MuiButtonBase: {
@@ -639,7 +678,7 @@ Update the config file with the following code to enable right-to-left support:
```diff
const pigmentConfig = {
- theme: extendTheme(),
+ theme: createTheme(),
+ css: {
+ // Specify your default CSS authoring direction
+ defaultDirection: 'ltr',
diff --git a/docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md b/docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md
index c67d1cb54029ad..6905605fb83fd1 100644
--- a/docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md
+++ b/docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md
@@ -189,7 +189,7 @@ Now, the Button's `backgroundColor`, `borderColor` and text `color` values will
For framework- or language-specific setup instructions, see [CSS theme variables—Usage—Server-side rendering](/material-ui/customization/css-theme-variables/usage/).
For framework or language specific setup, see [this](/material-ui/customization/css-theme-variables/usage/)
-See the complete usage of `createCssVarsProvider` in [Material UI](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/CssVarsProvider.tsx) and [Joy UI](https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/styles/CssVarsProvider.tsx).
+See the complete usage of `createCssVarsProvider` in [Material UI](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/ThemeProviderWithVars.tsx) and [Joy UI](https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/styles/CssVarsProvider.tsx).
## API
diff --git a/docs/package.json b/docs/package.json
index 29284e15b7dc41..b292ae11485e61 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -84,7 +84,7 @@
"next": "^14.2.8",
"notistack": "3.0.1",
"nprogress": "^0.2.0",
- "postcss": "^8.4.44",
+ "postcss": "^8.4.45",
"postcss-import": "^16.1.0",
"prop-types": "^15.8.1",
"react": "^18.3.1",
@@ -92,16 +92,16 @@
"react-draggable": "^4.4.6",
"react-final-form": "^6.5.9",
"react-imask": "^7.6.1",
- "react-intersection-observer": "^9.13.0",
+ "react-intersection-observer": "^9.13.1",
"react-is": "^18.3.1",
- "react-number-format": "^5.4.1",
+ "react-number-format": "^5.4.2",
"react-router-dom": "^6.26.1",
"react-runner": "^1.0.5",
"react-simple-code-editor": "^0.14.1",
"react-spring": "^9.7.4",
"react-swipeable-views": "^0.14.0",
"react-transition-group": "^4.4.5",
- "react-virtuoso": "^4.10.1",
+ "react-virtuoso": "^4.10.3",
"react-window": "^1.8.10",
"rimraf": "^5.0.10",
"styled-components": "^6.1.12",
@@ -122,7 +122,7 @@
"@types/css-mediaquery": "^0.1.4",
"@types/gtag.js": "^0.0.20",
"@types/json2mq": "^0.2.2",
- "@types/node": "^20.14.8",
+ "@types/node": "^20.16.5",
"@types/prop-types": "^15.7.12",
"@types/react": "^18.3.4",
"@types/react-dom": "^18.3.0",
diff --git a/docs/pages/blog/mui-x-v6.md b/docs/pages/blog/mui-x-v6.md
index 8ad0b5df52e3ac..76ba0f0df281f5 100644
--- a/docs/pages/blog/mui-x-v6.md
+++ b/docs/pages/blog/mui-x-v6.md
@@ -7,7 +7,7 @@ manualCard: true
tags: ['MUI X', 'Product']
---
-
+
[MUI X v6.0.0](https://github.com/mui/mui-x/releases/tag/v6.0.0) is finally here with many improvements, new features, customization abilities, and a more robust foundation to accommodate the changes we want to deliver next.
diff --git a/docs/pages/blog/mui-x-v7.md b/docs/pages/blog/mui-x-v7.md
index e4152395158817..601caa7bc9f674 100644
--- a/docs/pages/blog/mui-x-v7.md
+++ b/docs/pages/blog/mui-x-v7.md
@@ -1,5 +1,5 @@
---
-title: Introducing MUI X v7.0.0
+title: Introducing MUI X v7
description: Check out all the newest additions to the next major of the advanced components.
date: 2024-03-22T08:00:00.000Z
authors: ['josefreitas']
@@ -13,7 +13,7 @@ manualCard: true
-After a few months in pre-release, we're thrilled to announce the stable release of [MUI X v7](https://github.com/mui/mui-x/releases/tag/v7.0.0), packed with new components, exciting features, improved usability, and developer experience.
+After a few months in pre-release, we're thrilled to announce the stable release of [MUI X v7.0.0](https://github.com/mui/mui-x/releases/tag/v7.0.0), packed with new components, exciting features, improved usability, and developer experience.
## Table of contents
diff --git a/docs/public/_redirects b/docs/public/_redirects
index 9e247268edd496..626cf9bfb95a97 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -7,9 +7,6 @@
/size-snapshot https://s3.eu-central-1.amazonaws.com/mui-org-ci/artifacts/master/latest/size-snapshot.json 200
-# To add when we finish work on v6
-# https://next.mui.com/* https://mui.com/:splat 301!
-
# For links that we can't edit later on, for example hosted in the code published on npm
/r/styles-instance-warning /material-ui/getting-started/faq/#i-have-several-instances-of-styles-on-the-page 302
/r/caveat-with-refs-guide /material-ui/guides/composition/#caveat-with-refs 302
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 2c2dcd6303968a..3cb6aa1ad1d01b 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -459,7 +459,6 @@ export default function AppSearch(props) {
'hierarchy.lvl3',
'hierarchy.lvl4',
'hierarchy.lvl5',
- 'hierarchy.lvl6',
'content',
'type',
'url',
diff --git a/docs/translations/api-docs/no-ssr/no-ssr.json b/docs/translations/api-docs/no-ssr/no-ssr.json
index ff903d12a20b33..1d73722e5d9b32 100644
--- a/docs/translations/api-docs/no-ssr/no-ssr.json
+++ b/docs/translations/api-docs/no-ssr/no-ssr.json
@@ -1,5 +1,5 @@
{
- "componentDescription": "NoSsr purposely removes components from the subject of Server Side Rendering (SSR).\n\nThis component can be useful in a variety of situations:\n\n* Escape hatch for broken dependencies not supporting SSR.\n* Improve the time-to-first paint on the client by only rendering above the fold.\n* Reduce the rendering time on the server.\n* Under too heavy server load, you can turn on service degradation.",
+ "componentDescription": "NoSsr purposely removes components from the subject of Server Side Rendering (SSR).\n\nThis component can be useful in a variety of situations:\n\n* Escape hatch for broken dependencies not supporting SSR.\n* Improve the time-to-first paint on the client by only rendering above the fold.\n* Reduce the rendering time on the server.\n* Under too heavy server load, you can turn on service degradation.",
"propDescriptions": {
"children": { "description": "You can wrap a node." },
"defer": {
diff --git a/examples/material-ui-via-cdn/README.md b/examples/material-ui-via-cdn/README.md
index 4e3b10b3830c7b..fc8062310ea7ec 100644
--- a/examples/material-ui-via-cdn/README.md
+++ b/examples/material-ui-via-cdn/README.md
@@ -23,7 +23,7 @@ The client has to download the entire library, regardless of which components ar
-[The live preview.](https://rawcdn.githack.com/mui/material-ui/master/examples/material-ui-via-cdn/index.html)
+[The live preview.](https://raw.githack.com/mui/material-ui/master/examples/material-ui-via-cdn/index.html)
## What's next?
diff --git a/package.json b/package.json
index 2067831176f183..782df003a824e2 100644
--- a/package.json
+++ b/package.json
@@ -98,9 +98,9 @@
"nx_test_unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'packages-internal/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'"
},
"dependencies": {
- "@googleapis/sheets": "^9.3.0",
+ "@googleapis/sheets": "^9.3.1",
"@netlify/functions": "^2.8.1",
- "@slack/bolt": "^3.21.1",
+ "@slack/bolt": "^3.21.2",
"execa": "^9.3.1",
"google-auth-library": "^9.13.0"
},
@@ -123,7 +123,7 @@
"@mui/joy": "workspace:*",
"@mui/material": "workspace:^",
"@mui/utils": "workspace:^",
- "@next/eslint-plugin-next": "^14.2.7",
+ "@next/eslint-plugin-next": "^14.2.8",
"@octokit/rest": "^21.0.2",
"@pigment-css/react": "0.0.21",
"@playwright/test": "1.46.1",
@@ -131,7 +131,7 @@
"@types/fs-extra": "^11.0.4",
"@types/lodash": "^4.17.7",
"@types/mocha": "^10.0.7",
- "@types/node": "^20.14.8",
+ "@types/node": "^20.16.5",
"@types/react": "^18.3.4",
"@types/yargs": "^17.0.33",
"@typescript-eslint/eslint-plugin": "^7.18.0",
@@ -154,14 +154,14 @@
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^18.0.0",
"eslint-config-prettier": "^9.1.0",
- "eslint-import-resolver-webpack": "^0.13.8",
+ "eslint-import-resolver-webpack": "^0.13.9",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-filenames": "^1.3.2",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-material-ui": "workspace:^",
"eslint-plugin-mocha": "^10.5.0",
- "eslint-plugin-react": "^7.35.0",
+ "eslint-plugin-react": "^7.35.2",
"eslint-plugin-react-compiler": "0.0.0-experimental-3f2f4f0-20240826",
"eslint-plugin-react-hooks": "^4.6.2",
"fast-glob": "^3.3.2",
@@ -215,7 +215,7 @@
"@definitelytyped/header-parser": "^0.2.12",
"@definitelytyped/typescript-versions": "^0.1.4",
"@definitelytyped/utils": "^0.1.7",
- "@types/node": "^20.14.8",
+ "@types/node": "^20.16.5",
"@types/react": "^18.3.4",
"@types/react-dom": "18.3.0",
"cross-fetch": "^4.0.0",
diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json
index 6c0ed6fce58718..3ec0c71b80f399 100644
--- a/packages-internal/scripts/package.json
+++ b/packages-internal/scripts/package.json
@@ -42,7 +42,7 @@
"@types/chai": "^4.3.19",
"@types/doctrine": "^0.0.9",
"@types/lodash": "^4.17.7",
- "@types/node": "^20.14.8",
+ "@types/node": "^20.16.5",
"@types/react": "^18.3.4",
"@types/uuid": "^9.0.8",
"chai": "^4.5.0",
diff --git a/packages/api-docs-builder-core/package.json b/packages/api-docs-builder-core/package.json
index 38f4f62dc3d075..4d874d0a6d1b5f 100644
--- a/packages/api-docs-builder-core/package.json
+++ b/packages/api-docs-builder-core/package.json
@@ -17,7 +17,7 @@
"devDependencies": {
"@types/chai": "^4.3.19",
"@types/mocha": "^10.0.7",
- "@types/node": "^20.14.8",
+ "@types/node": "^20.16.5",
"@types/sinon": "^17.0.3",
"chai": "^4.5.0",
"sinon": "^18.0.0",
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
index dfba590e8ffd70..f8f3bb247b2c81 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -5,7 +5,7 @@ import * as babel from '@babel/core';
import traverse from '@babel/traverse';
import * as _ from 'lodash';
import kebabCase from 'lodash/kebabCase';
-import remark from 'remark';
+import { remark } from 'remark';
import { visit as remarkVisit } from 'unist-util-visit';
import type { Link } from 'mdast';
import { defaultHandlers, parse as docgenParse } from 'react-docgen';
@@ -59,7 +59,7 @@ export async function computeApiDescription(
})
.process(api.description);
- return file.contents.toString().trim();
+ return file.toString().trim();
}
/**
diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json
index e6f548d55036ff..e2af5dc580b2bb 100644
--- a/packages/api-docs-builder/package.json
+++ b/packages/api-docs-builder/package.json
@@ -21,7 +21,7 @@
"prettier": "^3.3.3",
"react-docgen": "^5.4.3",
"recast": "^0.23.9",
- "remark": "^13.0.0",
+ "remark": "^15.0.1",
"typescript": "^5.5.4",
"unist-util-visit": "^5.0.0"
},
@@ -32,7 +32,7 @@
"@types/doctrine": "^0.0.9",
"@types/mdast": "4.0.4",
"@types/mocha": "^10.0.7",
- "@types/node": "^20.14.8",
+ "@types/node": "^20.16.5",
"@types/react-docgen": "workspace:*",
"@types/sinon": "^17.0.3",
"chai": "^4.5.0",
diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json
index c5716147bc9353..5cbd9dc1cbbc70 100644
--- a/packages/mui-codemod/package.json
+++ b/packages/mui-codemod/package.json
@@ -35,7 +35,7 @@
"@babel/traverse": "^7.25.3",
"jscodeshift": "^0.16.1",
"jscodeshift-add-imports": "^1.0.11",
- "postcss": "^8.4.44",
+ "postcss": "^8.4.45",
"postcss-cli": "^11.0.0",
"yargs": "^17.7.2"
},
diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json
index 74e8bfd7973350..3ea157b3a2ed9d 100644
--- a/packages/mui-docs/package.json
+++ b/packages/mui-docs/package.json
@@ -45,7 +45,7 @@
"@mui/icons-material": "workspace:*",
"@mui/material": "workspace:*",
"@types/gtag.js": "^0.0.20",
- "@types/node": "^20.14.8",
+ "@types/node": "^20.16.5",
"@types/prop-types": "^15.7.12",
"@types/react": "^18.3.4",
"next": "^14.2.8",
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts
index 6992ed7e08cc73..5a3fbc86bcc4f8 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts
@@ -18,6 +18,9 @@ import useAutocomplete, {
import { AutocompleteClasses } from './autocompleteClasses';
import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+export interface AutocompletePaperSlotPropsOverrides {}
+export interface AutocompletePopperSlotPropsOverrides {}
+
export {
AutocompleteChangeDetails,
AutocompleteChangeReason,
@@ -94,12 +97,12 @@ export interface AutocompleteSlots {
* The component used to render the body of the popup.
* @default Paper
*/
- paper: React.JSXElementConstructor;
+ paper: React.JSXElementConstructor;
/**
* The component used to position the popup.
* @default Popper
*/
- popper: React.JSXElementConstructor;
+ popper: React.JSXElementConstructor;
}
export type AutocompleteSlotsAndSlotProps<
@@ -134,15 +137,14 @@ export type AutocompleteSlotsAndSlotProps<
{},
AutocompleteOwnerState
>;
-
paper: SlotProps<
React.ElementType>,
- {},
+ AutocompletePaperSlotPropsOverrides,
AutocompleteOwnerState
>;
popper: SlotProps<
React.ElementType>,
- {},
+ AutocompletePopperSlotPropsOverrides,
AutocompleteOwnerState
>;
popupIndicator: SlotProps<
diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js
index 0bea089324fe5d..53a04076dc6adc 100644
--- a/packages/mui-material/src/Dialog/Dialog.js
+++ b/packages/mui-material/src/Dialog/Dialog.js
@@ -118,6 +118,7 @@ const DialogPaper = styled(Paper, {
memoTheme(({ theme }) => ({
margin: 32,
position: 'relative',
+ overflowY: 'auto',
'@media print': {
overflowY: 'visible',
boxShadow: 'none',
diff --git a/packages/mui-material/src/Dialog/Dialog.test.js b/packages/mui-material/src/Dialog/Dialog.test.js
index a0eb5c3d8ee823..dd954f5b4f0b27 100644
--- a/packages/mui-material/src/Dialog/Dialog.test.js
+++ b/packages/mui-material/src/Dialog/Dialog.test.js
@@ -318,6 +318,35 @@ describe('', () => {
);
expect(getByTestId('paper')).not.to.have.class(classes.paperFullScreen);
});
+
+ it('scrolls if overflown on the Y axis', function test() {
+ if (/jsdom/.test(window.navigator.userAgent)) {
+ this.skip();
+ }
+
+ const ITEM_HEIGHT = 100;
+ const ITEM_COUNT = 10;
+
+ const { getByTestId } = render(
+ ,
+ );
+ const paperElement = getByTestId('paper');
+ expect(paperElement.scrollTop).to.equal(0);
+ expect(paperElement.clientHeight).to.equal(ITEM_HEIGHT);
+ expect(paperElement.scrollHeight).to.equal(ITEM_HEIGHT * ITEM_COUNT);
+ fireEvent.scroll(paperElement, { target: { scrollTop: ITEM_HEIGHT } });
+ expect(paperElement.scrollTop).to.equal(ITEM_HEIGHT);
+ });
});
describe('prop: PaperProps.className', () => {
diff --git a/packages/mui-material/src/FormControl/FormControl.d.ts b/packages/mui-material/src/FormControl/FormControl.d.ts
index 062d78db66d4fe..3bf94a5d6dd196 100644
--- a/packages/mui-material/src/FormControl/FormControl.d.ts
+++ b/packages/mui-material/src/FormControl/FormControl.d.ts
@@ -93,10 +93,10 @@ export interface FormControlTypeMap<
* consistent across the children of the `FormControl`.
* This context is used by the following components:
*
- * * FormLabel
- * * FormHelperText
- * * Input
- * * InputLabel
+ * * FormLabel
+ * * FormHelperText
+ * * Input
+ * * InputLabel
*
* You can find one composition example below and more going to [the demos](https://mui.com/material-ui/react-text-field/#components).
*
diff --git a/packages/mui-material/src/Modal/Modal.d.ts b/packages/mui-material/src/Modal/Modal.d.ts
index d58fa849e9cd76..b8c2b731f04326 100644
--- a/packages/mui-material/src/Modal/Modal.d.ts
+++ b/packages/mui-material/src/Modal/Modal.d.ts
@@ -211,10 +211,10 @@ export declare const ModalRoot: React.FC;
/**
* Modal is a lower-level construct that is leveraged by the following components:
*
- * * [Dialog](https://mui.com/material-ui/api/dialog/)
- * * [Drawer](https://mui.com/material-ui/api/drawer/)
- * * [Menu](https://mui.com/material-ui/api/menu/)
- * * [Popover](https://mui.com/material-ui/api/popover/)
+ * * [Dialog](https://mui.com/material-ui/api/dialog/)
+ * * [Drawer](https://mui.com/material-ui/api/drawer/)
+ * * [Menu](https://mui.com/material-ui/api/menu/)
+ * * [Popover](https://mui.com/material-ui/api/popover/)
*
* If you are creating a modal dialog, you probably want to use the [Dialog](https://mui.com/material-ui/api/dialog/) component
* rather than directly using Modal.
diff --git a/packages/mui-material/src/NoSsr/NoSsr.tsx b/packages/mui-material/src/NoSsr/NoSsr.tsx
index 0d8bc8c9c6b6c7..c7e2dfbc191a6e 100644
--- a/packages/mui-material/src/NoSsr/NoSsr.tsx
+++ b/packages/mui-material/src/NoSsr/NoSsr.tsx
@@ -9,10 +9,10 @@ import { NoSsrProps } from './NoSsr.types';
*
* This component can be useful in a variety of situations:
*
- * * Escape hatch for broken dependencies not supporting SSR.
- * * Improve the time-to-first paint on the client by only rendering above the fold.
- * * Reduce the rendering time on the server.
- * * Under too heavy server load, you can turn on service degradation.
+ * * Escape hatch for broken dependencies not supporting SSR.
+ * * Improve the time-to-first paint on the client by only rendering above the fold.
+ * * Reduce the rendering time on the server.
+ * * Under too heavy server load, you can turn on service degradation.
*
* Demos:
*
diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
index f358ed416ac006..c125296639fc8a 100644
--- a/packages/mui-material/src/Radio/Radio.js
+++ b/packages/mui-material/src/Radio/Radio.js
@@ -9,6 +9,7 @@ import SwitchBase from '../internal/SwitchBase';
import RadioButtonIcon from './RadioButtonIcon';
import capitalize from '../utils/capitalize';
import createChainedFunction from '../utils/createChainedFunction';
+import useFormControl from '../FormControl/useFormControl';
import useRadioGroup from '../RadioGroup/useRadioGroup';
import radioClasses, { getRadioUtilityClass } from './radioClasses';
import rootShouldForwardProp from '../styles/rootShouldForwardProp';
@@ -52,7 +53,7 @@ const RadioRoot = styled(SwitchBase, {
},
variants: [
{
- props: { color: 'default', disableRipple: false },
+ props: { color: 'default', disabled: false, disableRipple: false },
style: {
'&:hover': {
backgroundColor: theme.vars
@@ -64,7 +65,7 @@ const RadioRoot = styled(SwitchBase, {
...Object.entries(theme.palette)
.filter(createSimplePaletteValueFilter())
.map(([color]) => ({
- props: { color, disableRipple: false },
+ props: { color, disabled: false, disableRipple: false },
style: {
'&:hover': {
backgroundColor: theme.vars
@@ -76,7 +77,7 @@ const RadioRoot = styled(SwitchBase, {
...Object.entries(theme.palette)
.filter(createSimplePaletteValueFilter())
.map(([color]) => ({
- props: { color },
+ props: { color, disabled: false },
style: {
[`&.${radioClasses.checked}`]: {
color: (theme.vars || theme).palette[color].main,
@@ -122,11 +123,26 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
onChange: onChangeProp,
size = 'medium',
className,
+ disabled: disabledProp,
disableRipple = false,
...other
} = props;
+
+ const muiFormControl = useFormControl();
+
+ let disabled = disabledProp;
+
+ if (muiFormControl) {
+ if (typeof disabled === 'undefined') {
+ disabled = muiFormControl.disabled;
+ }
+ }
+
+ disabled ??= false;
+
const ownerState = {
...props,
+ disabled,
disableRipple,
color,
size,
@@ -155,6 +171,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
checkedIcon={React.cloneElement(checkedIcon, {
fontSize: defaultCheckedIcon.props.fontSize ?? size,
})}
+ disabled={disabled}
ownerState={ownerState}
classes={classes}
name={name}
diff --git a/packages/mui-material/src/TextField/TextField.d.ts b/packages/mui-material/src/TextField/TextField.d.ts
index 44a3d2b33eece8..8afd09bcf4b2e5 100644
--- a/packages/mui-material/src/TextField/TextField.d.ts
+++ b/packages/mui-material/src/TextField/TextField.d.ts
@@ -299,12 +299,12 @@ export type TextFieldOwnerState = BaseTextFieldProps;
* It's important to understand that the text field is a simple abstraction
* on top of the following components:
*
- * * [FormControl](https://mui.com/material-ui/api/form-control/)
- * * [InputLabel](https://mui.com/material-ui/api/input-label/)
- * * [FilledInput](https://mui.com/material-ui/api/filled-input/)
- * * [OutlinedInput](https://mui.com/material-ui/api/outlined-input/)
- * * [Input](https://mui.com/material-ui/api/input/)
- * * [FormHelperText](https://mui.com/material-ui/api/form-helper-text/)
+ * * [FormControl](https://mui.com/material-ui/api/form-control/)
+ * * [InputLabel](https://mui.com/material-ui/api/input-label/)
+ * * [FilledInput](https://mui.com/material-ui/api/filled-input/)
+ * * [OutlinedInput](https://mui.com/material-ui/api/outlined-input/)
+ * * [Input](https://mui.com/material-ui/api/input/)
+ * * [FormHelperText](https://mui.com/material-ui/api/form-helper-text/)
*
* If you wish to alter the props applied to the `input` element, you can do so as follows:
*
@@ -319,8 +319,8 @@ export type TextFieldOwnerState = BaseTextFieldProps;
* For advanced cases, please look at the source of TextField by clicking on the
* "Edit this page" button above. Consider either:
*
- * * using the upper case props for passing values directly to the components
- * * using the underlying components directly as shown in the demos
+ * * using the upper case props for passing values directly to the components
+ * * using the underlying components directly as shown in the demos
*
* Demos:
*
diff --git a/packages/mui-material/src/styles/ThemeProviderWithVars.tsx b/packages/mui-material/src/styles/ThemeProviderWithVars.tsx
index 1a29b504f0afbf..cf5c64f2334983 100644
--- a/packages/mui-material/src/styles/ThemeProviderWithVars.tsx
+++ b/packages/mui-material/src/styles/ThemeProviderWithVars.tsx
@@ -41,17 +41,19 @@ let warnedOnce = false;
// TODO: remove in v7
// eslint-disable-next-line @typescript-eslint/naming-convention
function Experimental_CssVarsProvider(props: any) {
- if (!warnedOnce) {
- console.warn(
- [
- 'MUI: The Experimental_CssVarsProvider component has been ported into ThemeProvider.',
- '',
- "You should use `import { ThemeProvider } from '@mui/material/styles'` instead.",
- 'For more details, check out https://mui.com/material-ui/customization/css-theme-variables/usage/',
- ].join('\n'),
- );
+ if (process.env.NODE_ENV !== 'production') {
+ if (!warnedOnce) {
+ console.warn(
+ [
+ 'MUI: The Experimental_CssVarsProvider component has been ported into ThemeProvider.',
+ '',
+ "You should use `import { ThemeProvider } from '@mui/material/styles'` instead.",
+ 'For more details, check out https://mui.com/material-ui/customization/css-theme-variables/usage/',
+ ].join('\n'),
+ );
- warnedOnce = true;
+ warnedOnce = true;
+ }
}
return ;
diff --git a/packages/mui-material/test/typescript/moduleAugmentation/autocompleteCustomSlotProps.spec.tsx b/packages/mui-material/test/typescript/moduleAugmentation/autocompleteCustomSlotProps.spec.tsx
new file mode 100644
index 00000000000000..60f35df2c18866
--- /dev/null
+++ b/packages/mui-material/test/typescript/moduleAugmentation/autocompleteCustomSlotProps.spec.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import Button from '@mui/material/Button';
+import Paper, { PaperProps } from '@mui/material/Paper';
+import Popper, { PopperProps } from '@mui/material/Popper';
+import TextField from '@mui/material/TextField';
+
+declare module '@mui/material/Autocomplete' {
+ interface AutocompletePaperSlotPropsOverrides {
+ value: Option[];
+ }
+ interface AutocompletePopperSlotPropsOverrides {
+ value: Option[];
+ }
+}
+
+function CustomPaper({ children, value, ...paperProps }: PaperProps & { value: Option[] }) {
+ return (
+ event.preventDefault()}>
+ {children}
+
+
+ );
+}
+
+function CustomPopper({ children, value, ...popperProps }: PopperProps & { value: Option[] }) {
+ return (
+
+ {children as React.ReactNode}
+
+
+ );
+}
+
+interface Option {
+ title: string;
+ year: number;
+}
+
+function App() {
+ const [value, setValue] = React.useState