Merge branch 'master' into improve-color-map-filter

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({

README.md

@@ -5,12 +5,6 @@
 
 <h1 align="center">Material UI</h1>
 
-**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.
-
 <div align="center">
 
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui/material-ui/blob/HEAD/LICENSE)
@@ -27,30 +21,37 @@
 
 </div>
 
-## 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/).
 
 <details>
   <summary>Older versions</summary>
 
-- **[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/))
 
 </details>
 
-**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
 

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",

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",

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;

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

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 (
     <Autocomplete
       sx={{ width: 300 }}
       open={open}
-      onOpen={() => {
-        setOpen(true);
-      }}
-      onClose={() => {
-        setOpen(false);
-      }}
+      onOpen={handleOpen}
+      onClose={handleClose}
       isOptionEqualToValue={(option, value) => option.title === value.title}
       getOptionLabel={(option) => option.title}
       options={options}

docs/data/material/components/autocomplete/Asynchronous.tsx

@@ -19,44 +19,30 @@ function sleep(duration: number): Promise<void> {
 export default function Asynchronous() {
   const [open, setOpen] = React.useState(false);
   const [options, setOptions] = React.useState<readonly Film[]>([]);
-  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 (
     <Autocomplete
       sx={{ width: 300 }}
       open={open}
-      onOpen={() => {
-        setOpen(true);
-      }}
-      onClose={() => {
-        setOpen(false);
-      }}
+      onOpen={handleOpen}
+      onClose={handleClose}
       isOptionEqualToValue={(option, value) => option.title === value.title}
       getOptionLabel={(option) => option.title}
       options={options}

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 <ThemeProvider>{/* ...you app */}</ThemeProvider>;
+  return <ThemeProvider theme={theme}>{/* ...your app */}</ThemeProvider>;
 }
 ```
 

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.

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 (
+     <html lang="en">
++      <body className={roboto.variable}>
+          {children}
+       </body>
+     </html>
+   );
+ }
+```
+
+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
 <codeblock>
 
 ```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
 <codeblock>
 
 ```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',

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