Merge remote-tracking branch 'upstream/master' into renovate/react-18.x

.github/workflows/vale-action.yml

@@ -16,6 +16,10 @@ jobs:
       - uses: errata-ai/vale-action@38bf078c328061f59879b347ca344a718a736018 # v2.1.0
         continue-on-error: true # GitHub Action flag needed until https://github.com/errata-ai/vale-action/issues/89 is fixed
         with:
+          # Errors should be more visible
           fail_on_error: true
+          # The other reports don't work, not really https://github.com/reviewdog/reviewdog#reporters
           reporter: github-pr-check
+          # Required, set by GitHub actions automatically:
+          # https://docs.github.com/en/actions/security-guides/automatic-token-authentication#about-the-github_token-secret
           token: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -42,3 +42,4 @@ docs/public/static/blog/feed/*
 .github/styles/
 .nx/cache
 .nx/workspace-data
+screenshots

CHANGELOG.md

@@ -1,5 +1,68 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.1.1
+
+<!-- generated comparing v6.1.0..master -->
+
+_Sep 19, 2024_
+
+A big thanks to the 18 contributors who made this release possible.
+
+### `@mui/[email protected]`
+
+- [Grid] Bring back `GridProps` and `GridTypeMap` (#43717) @DiegoAndai
+- [Paper] Fix wrong background-image on Paper when elevation is 0 (#43723) @ZeeshanTamboli
+- [Skeleton] Fix wave animation for styled-components (#43740) @siriwatknp
+- [Modal] Fix event handlers overriding behavior (#43757) @sai6855
+
+### `@mui/[email protected]`
+
+- Pass the stylesheet directly to `GlobalStyles` (#43739) @siriwatknp
+
+### `@mui/[email protected]`
+
+- Fix "useId" & "useSyncExternalStore" imports to not be statically analyzable (#43360) @yash49
+
+### Docs
+
+- [material-ui][Breadcrumbs] Document CondensedWithMenu option for Breadcrumbs (#42973) @Sergio16T
+- [material-ui][CircularProgress] Add Circular size demo (#43734) @sai6855
+- [material-ui][slider] Fix slider in color customization playground twitches when sliding (#43671) @Nashyn
+- [material-ui][slider] Polish Music player demo (#43748) @oliviertassinari
+- [material-ui] Document Typography color prop breaking change (#43735) @aarongarciah
+- [material-ui] Add docs for complementary Table components (#43756) @Juneezee
+- [material-ui] Improve minimizing bundle docs (#43781) @ZeeshanTamboli
+- [pigment-css] Call out Pigment being in alpha (#43725) @aarongarciah
+- [pigment-css] Fix typo globalCSS -> globalCss (#43754) @hiro0218
+- [test] Improve demos for better regression screenshots (#43742) @aarongarciah
+- Fix minor typo (#42899) @xconverge
+- Revert icon search virtualization (#43569) @Janpot
+- Fix MUI Treasury Layout broken links (#43752) @oliviertassinari
+- Fix 301 link to design asset @oliviertassinari
+- Update release schedule table after v6 stable (#43726) @sahil-ag
+- Fix bundle size link regression @oliviertassinari
+
+### Core
+
+- [code-infra] Allow overriding all `options` of `useFakeTimers` function (#43729) @LukasTy
+- [core] Fix 301 link to Next.js and git diff @oliviertassinari
+- [core] Fix package.json repository rule @oliviertassinari
+- [core] Remove redundant window @oliviertassinari
+- [core] Fix some issues reported by eslint-plugin-react-compiler (#43117) @binsmyth
+- [core] Replace more `indexOf` with `includes` (#43694) @Juneezee
+- [core] Remove /.yarn (#43712) @oliviertassinari
+- [docs-infra] Enable synthetic default imports in TypeScript config (#43747) @morozow
+- [docs-infra] Fix Vale config for TypeScript references (#43751) @oliviertassinari
+- [docs-infra] Fix toolbar arrow order (#43627) @oliviertassinari
+- [docs-infra] Fix missing dependencies in multi-tab demos (#43713) @cherniavskii
+- [docs-infra] Fix API search link regression (#43662) @oliviertassinari
+- [test] Update font-awesome CSS file in regression tests fixture (#43745) @Janpot
+- [test] Remove position:relative from regression container (#43743) @aarongarciah
+- [test] Remove top-level inline-block from the regression tests (#43656) @Janpot
+- [website] Match pricing page with linked page h1 @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @binsmyth, @cherniavskii, @DiegoAndai, @Janpot, @Juneezee, @LukasTy, @mnajdova, @morozow, @Nashyn, @oliviertassinari, @sahil-ag, @sai6855, @Sergio16T, @siriwatknp, @xconverge, @yash49, @ZeeshanTamboli
+
 ## v6.1.0
 
 <!-- generated comparing v6.0.2..master -->

CHANGELOG.old.md

@@ -823,7 +823,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements
 - [blog] Add post about upcoming plans for Base UI (#40882) @danilo-leal
 - [core] Simplify CodeSandbox reproduction @oliviertassinari
 - [core] Missing redirection @oliviertassinari
-- [core] Export functions from `copyFiles` script to reuse in MUI X repo (#40970) @cherniavskii
+- [core] Export functions from `copyFiles` script to reuse in MUI X repo (#40970) @cherniavskii
 - [core] Avoid variable shorthands @oliviertassinari
 - [docs-infra] Fix search icon issue (#40957) @oliviertassinari
 - [docs-infra] Ignore classes tagged with `@ignore` (#41009) @cherniavskii
@@ -1013,7 +1013,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements
 - &#8203;<!-- 54 -->[website] Move `React Engineer - X` into the future roles section (#40867) @DanailH
 - &#8203;<!-- 52 -->[material-ui][test][Alert] Add action, icon, and iconMapping tests (#40682) @DiegoAndai
 - &#8203;<!-- 45 -->[blog] Lint duplicate h1 on the page (#40835) @oliviertassinari
-- &#8203;<!-- 44 -->[blog] MUI X v7 beta announcement blogpost (#40784) @joserodolfofreitas
+- &#8203;<!-- 44 -->[blog] MUI X v7 beta announcement blogpost (#40784) @joserodolfofreitas
 - &#8203;<!-- 43 -->[code-infra] Remove custom TS installation script (#40636) @michaldudak
 - &#8203;<!-- 42 -->[code-infra] Correct API Docs Builder dependencies (#40775) @michaldudak
 - &#8203;<!-- 41 -->[code-infra] Migrate to prettier async APIs (#40668) @Janpot

README.md

@@ -79,6 +79,7 @@ via [Open Collective](https://opencollective.com/mui-org) or via [Patreon](http
   <a href="https://www.dialmycalls.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/288.png" alt="dialmycalls.com" title="DialMyCalls: Send text messages, calls, and emails." loading="lazy" /></a>
   <a href="https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/goread_io/eb6337d/logo/288.png" alt="goread.io" title="Goread.io: Instagram followers, likes, views, and comments." loading="lazy" /></a>
   <a href="https://copycopter.ai/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/copycopterai/e167216/logo/288.png" alt="copycopter.ai" title="CopyCopter: Turn prompts into videos at ultra speed." loading="lazy" /></a>
+  <a href="https://route4me.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/route4me/71fb6fa/avatar/288.png" alt="Route4Me" title="Route4Me: Trusted last mile route planning and route optimization." loading="lazy" /></a>
 </p>
 
 <p>

apps/pigment-css-next-app/package.json

@@ -23,11 +23,11 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "0.0.22",
+    "@pigment-css/nextjs-plugin": "0.0.23",
     "@types/node": "^20.16.5",
     "@types/react": "^18.3.6",
     "@types/react-dom": "^18.3.0",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "typescript": "^5.5.4"
   },
   "nx": {

apps/pigment-css-vite-app/package.json

@@ -9,32 +9,34 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@mui/material-pigment-css": "workspace:^",
-    "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/icons-material": "workspace:^",
     "@mui/lab": "workspace:^",
     "@mui/material": "workspace:^",
+    "@mui/material-pigment-css": "workspace:^",
     "@mui/system": "workspace:^",
+    "@mui/utils": "workspace:^",
     "clsx": "^2.1.1",
     "playwright": "^1.47.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
-    "react-router-dom": "^6.26.2"
+    "react-router-dom": "^6.26.2",
+    "webfontloader": "^1.6.28"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@pigment-css/vite-plugin": "0.0.22",
+    "@pigment-css/vite-plugin": "0.0.23",
     "@types/react": "^18.3.6",
     "@types/react-dom": "^18.3.0",
+    "@types/webfontloader": "^1.6.38",
     "@vitejs/plugin-react": "^4.3.1",
     "postcss": "^8.4.47",
     "postcss-combine-media-query": "^1.0.1",
-    "vite": "5.4.5",
-    "vite-plugin-pages": "^0.32.3",
-    "vite-plugin-node-polyfills": "0.22.0"
+    "vite": "5.4.7",
+    "vite-plugin-node-polyfills": "0.22.0",
+    "vite-plugin-pages": "^0.32.3"
   },
   "nx": {
     "targets": {

apps/pigment-css-vite-app/src/pages/fixtures/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useLocation, matchRoutes, Link } from 'react-router-dom';
+import webfontloader from 'webfontloader';
 import routes from '~react-pages';
 import IndexLayout from '../../Layout';
 
@@ -24,9 +25,31 @@ export default function Layout() {
     (item) => !!item.path && !item.path.includes('react-pagination'),
   );
 
+  const [fontState, setFontState] = React.useState('pending');
+  React.useEffect(() => {
+    webfontloader.load({
+      google: {
+        families: ['Roboto:300,400,500,700', 'Inter:300,400,500,600,700,800,900', 'Material+Icons'],
+      },
+      custom: {
+        families: ['Font Awesome 5 Free:n9'],
+        urls: ['https://use.fontawesome.com/releases/v5.14.0/css/all.css'],
+      },
+      timeout: 20000,
+      active: () => {
+        setFontState('active');
+      },
+      inactive: () => {
+        setFontState('inactive');
+      },
+    });
+  }, []);
+
+  const fixturePrepared = fontState === 'active';
+
   return (
     <IndexLayout>
-      {demo && (
+      {demo && fixturePrepared && (
         <div id="root-demo">
           {fixturesRoutes.find((item) => item.path === demo)?.element}
           {demosRoutes.find((item) => item.path === demo)?.element}

apps/pigment-css-vite-app/src/pages/index.tsx

@@ -4,7 +4,7 @@ export default function App() {
   return (
     <div>
       <p>
-        See Material UI components in <Link to="/material-ui">action</Link>!
+        See Material UI components in <Link to="/fixtures">action</Link>!
       </p>
     </div>
   );

docs/data/base/components/modal/NestedModal.tsx

@@ -124,7 +124,7 @@ const StyledBackdrop = styled(Backdrop)`
 `;
 
 const style = {
-  position: 'absolute' as 'absolute',
+  position: 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',

docs/data/base/components/modal/SpringModal.tsx

@@ -115,7 +115,7 @@ const grey = {
 };
 
 const style = {
-  position: 'absolute' as 'absolute',
+  position: 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',

docs/data/base/components/modal/TransitionsModal.tsx

@@ -86,7 +86,7 @@ const StyledBackdrop = styled(Backdrop)`
 `;
 
 const style = {
-  position: 'absolute' as 'absolute',
+  position: 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',

docs/data/base/components/modal/UseModal.tsx

@@ -198,7 +198,7 @@ const grey = {
 };
 
 const style = {
-  position: 'absolute' as 'absolute',
+  position: 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',

docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.js

@@ -6,7 +6,7 @@ export default function UnstyledTextareaIntroduction() {
   return (
     <React.Fragment>
       <TextareaAutosize
-        className="CustomTextareaIntrocudtion"
+        className="CustomTextareaIntroduction"
         aria-label="empty textarea"
         placeholder="Empty"
       />
@@ -52,7 +52,7 @@ function Styles() {
   return (
     <style>
       {`
-      .CustomTextareaIntrocudtion {
+      .CustomTextareaIntroduction {
         box-sizing: border-box;
         width: 320px;
         font-family: 'IBM Plex Sans', sans-serif;
@@ -67,18 +67,18 @@ function Styles() {
         box-shadow: 0px 2px 24px ${isDarkMode ? cyan[900] : cyan[100]};
       }
 
-     .CustomTextareaIntrocudtion:hover {
+     .CustomTextareaIntroduction:hover {
         border-color: ${cyan[400]};
       }
 
-     .CustomTextareaIntrocudtion:focus {
+     .CustomTextareaIntroduction:focus {
         border-color: ${cyan[400]};
         box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
         outline: none;
       }
 
       // firefox
-      .CustomTextareaIntrocudtion:focus-visible {
+      .CustomTextareaIntroduction:focus-visible {
         outline: 0;
       }
     `}

docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx

@@ -6,7 +6,7 @@ export default function UnstyledTextareaIntroduction() {
   return (
     <React.Fragment>
       <TextareaAutosize
-        className="CustomTextareaIntrocudtion"
+        className="CustomTextareaIntroduction"
         aria-label="empty textarea"
         placeholder="Empty"
       />
@@ -52,7 +52,7 @@ function Styles() {
   return (
     <style>
       {`
-      .CustomTextareaIntrocudtion {
+      .CustomTextareaIntroduction {
         box-sizing: border-box;
         width: 320px;
         font-family: 'IBM Plex Sans', sans-serif;
@@ -67,18 +67,18 @@ function Styles() {
         box-shadow: 0px 2px 24px ${isDarkMode ? cyan[900] : cyan[100]};
       }
 
-     .CustomTextareaIntrocudtion:hover {
+     .CustomTextareaIntroduction:hover {
         border-color: ${cyan[400]};
       }
 
-     .CustomTextareaIntrocudtion:focus {
+     .CustomTextareaIntroduction:focus {
         border-color: ${cyan[400]};
         box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
         outline: none;
       }
 
       // firefox
-      .CustomTextareaIntrocudtion:focus-visible {
+      .CustomTextareaIntroduction:focus-visible {
         outline: 0;
       }
     `}

docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/css/index.tsx.preview

@@ -1,6 +1,6 @@
 <React.Fragment>
   <TextareaAutosize
-    className="CustomTextareaIntrocudtion"
+    className="CustomTextareaIntroduction"
     aria-label="empty textarea"
     placeholder="Empty"
   />

docs/data/joy/components/accordion/accordion.md

@@ -10,6 +10,8 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
 
 <p class="description">Accordions let users show and hide sections of related content on a page.</p>
 
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
 ## Introduction
 
 Joy UI provides four accordion-related components: