Merge branch 'next' into migration-to-v6-writing-tweaks

.github/ISSUE_TEMPLATE/1.bug.yml

@@ -59,3 +59,9 @@ body:
           Output from `npx @mui/envinfo` goes here.
         ```
         </details>
+  - type: markdown
+    attributes:
+      value: |
+        ## :heart: Love Material UI?
+
+        Consider donating $10 to sustain our open-source work: [https://opencollective.com/mui-org](https://opencollective.com/mui-org).

.github/ISSUE_TEMPLATE/2.feature.yml

@@ -32,3 +32,9 @@ body:
     attributes:
       label: Motivation
       description: What are you trying to accomplish? Providing context helps us come up with a solution that is more useful in the real world.
+  - type: markdown
+    attributes:
+      value: |
+        ## :heart: Love Material UI?
+
+        Consider donating $10 to sustain our open-source work: [https://opencollective.com/mui-org](https://opencollective.com/mui-org).

.github/ISSUE_TEMPLATE/4.docs-feedback.yml

@@ -42,3 +42,9 @@ body:
     attributes:
       label: Context
       description: What are you trying to accomplish? Providing context helps us come up with a solution that is more useful in the real world.
+  - type: markdown
+    attributes:
+      value: |
+        ## :heart: Love Material UI?
+
+        Consider donating $10 to sustain our open-source work: [https://opencollective.com/mui-org](https://opencollective.com/mui-org).

.github/workflows/cherry-pick-next-to-master.yml

@@ -18,7 +18,7 @@ jobs:
     if: ${{ contains(github.event.pull_request.labels.*.name, 'needs cherry-pick') && github.event.pull_request.merged == true }}
     steps:
       - name: Checkout
-        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           fetch-depth: 0
       - name: Cherry pick and create the new PR

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
         os: [macos-latest, windows-latest, ubuntu-latest]
     steps:
       - run: echo "${{ github.actor }}"
-      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           # fetch all tags which are required for `pnpm release:changelog`
           fetch-depth: 0

.github/workflows/codeql.yml

@@ -16,10 +16,10 @@ jobs:
       security-events: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@2e230e8fe0ad3a14a340ad0815ddb96d599d2aff # v3.25.8
+        uses: github/codeql-action/init@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10
         with:
           languages: typescript
           config-file: ./.github/codeql/codeql-config.yml
@@ -30,4 +30,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@2e230e8fe0ad3a14a340ad0815ddb96d599d2aff # v3.25.8
+        uses: github/codeql-action/analyze@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10

.github/workflows/scorecards.yml

@@ -22,7 +22,7 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           persist-credentials: false
 
@@ -43,6 +43,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@2e230e8fe0ad3a14a340ad0815ddb96d599d2aff # v3.25.8
+        uses: github/codeql-action/upload-sarif@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10
         with:
           sarif_file: results.sarif

.github/workflows/vale-action.yml

@@ -12,7 +12,7 @@ jobs:
       contents: read
       pull-requests: write
     steps:
-      - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - 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:

CHANGELOG.md

@@ -1,5 +1,150 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.12
+
+<!-- generated comparing v6.0.0-alpha.11..next -->
+
+_Jun 24, 2024_
+
+A big thanks to the 17 contributors who made this release possible.
+
+### `@mui/[email protected]`
+
+- Add `InitColorSchemeScript` for Next.js App Router (#42247) @siriwatknp
+- [Autocomplete] Fix renderOption props type (#42689) @DiegoAndai
+- [Autocomplete] Fix React 18.3 key spread warnings in Autocomplete demos (#42691) @aarongarciah
+- Support Pigment CSS for `CssBaseline`, `ScopedCssBaseline` and `Popper` (#42640) @siriwatknp
+- Add `DefaultPropsProvider` for Pigment CSS integration (#42638) @siriwatknp
+- [Stepper] Generate class for nonLinear prop (#42620) @alexismo
+- [Tab] Fix failing test (#42686) @aarongarciah
+- [Tab] Deprecate iconWrapper class for icon class (#42647) @sai6855
+- [TableSortLabel] Deprecate composed classes (#42281) @sai6855
+- [usePagination] Update pagination `siblingsEnd` calculation logic (#42667) @Mini-ghost
+
+### `@mui/[email protected]`
+
+- Support dynamic props styled transformation (#42683) @siriwatknp
+
+### `@mui/[email protected]`
+
+- Fix issues reported by react compiler in `mui-system` package (#42637) @sai6855
+- [useMediaQuery] Remove deprecated types (#42560) @aarongarciah
+
+### `@mui/[email protected]`
+
+- Fix issues reported by the React Compiler (#42671) @anuujj
+- [Autocomplete] Fix React spread key warning (#42741) @aarongarciah
+
+### `@mui/[email protected]`
+
+- [LoadingButton] Apply wrapping element to prevent React crash on Google page translation (#35198) @BartJanvanAssen
+
+### Docs
+
+- Fix git diff format in migration to v6 (#42711) @oliviertassinari
+- Use new email for sponsoring @oliviertassinari
+- Fix 301 links (#42697) @alexfauquette
+- Normalize the capitalization of Design Kit @oliviertassinari
+- Recommend setting HTML attribute instead of DOM property for RTL (#42599) @aarongarciah
+- [material-ui][Select] Fix the `SelectAutoWidth` demo menu item value (#42648) @Danielkhakbaz
+
+### Core
+
+- [code-infra] Try disabling animations when taking screenshots (#42537) @Janpot
+- [code-infra] Fix benchmark package (#42553) @Janpot
+- [core] Replace enzyme in describeConformance (#42447) @DiegoAndai
+- [docs-infra] Fix layout shift demo toolbar (#42743) @oliviertassinari
+- [docs-infra] Fix visual look of in-house ad (#42735) @oliviertassinari
+- [docs-infra] Add stray design polish (#42646) @danilo-leal
+- [docs-infra] Fix wrong migration (#42675) @siriwatknp
+- [docs-infra] Fine tune markdown elements design (#42643) @danilo-leal
+- [docs-infra] Revamp the product switcher design (#42603) @danilo-leal
+- [docs-infra] Allow Link component to receive the `role` attribute (#42629) @danilo-leal
+- [infra] Add support donation button (#42499) @oliviertassinari
+- [infra] Raise `tsconfig`/`tsc` target to `es2022` (#42645) @LukasTy
+- [test] Fix tests on CI (#42670) @michaldudak
+- [test] Fix issues reported by react-compiler in test packages (#42626) @sai6855
+- [website] Add Armin to the team members (#42679) @arminmeh
+- [website] Open Staff Engineer role for Pigment CSS (#42531) @mnajdova
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @alexismo, @anuujj, @arminmeh, @BartJanvanAssen, @Danielkhakbaz, @danilo-leal, @DiegoAndai, @Janpot, @LukasTy, @michaldudak, @Mini-ghost, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp
+
+## v6.0.0-alpha.11
+
+<!-- generated comparing v6.0.0-alpha.10..next -->
+
+_Jun 11, 2024_
+
+A big thanks to the 18 contributors who made this release possible.
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 38 -->[Autocomplete] Shouldn't resize when hovering (#42452) @ZeeshanTamboli
+- &#8203;<!-- 37 -->[Chip] Fix focus issue related with the Escape event (#41578) @shrilsharma
+- &#8203;<!-- 12 -->[Grid] Fix support for CSS variables (#42574) @oliviertassinari
+- &#8203;<!-- 11 -->[InputBase] Use `globalCss` for Pigment integration (#42431) @siriwatknp
+- &#8203;<!-- 10 -->Change React.ReactElement type from `any` to `unknown` (#42473) @sai6855
+- &#8203;<!-- 09 -->Integrate `extendSxProp` adapter (#42543) @siriwatknp
+- &#8203;<!-- 08 -->[Tab] Fix applying `iconWrapper` styles from theme and update its description (#42549) @sai6855
+- &#8203;<!-- 08 -->[pigment-css] Add `stringifyTheme` for Pigment CSS integration (#42476) @siriwatknp
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 11 -->[Grid] Remove `disableEqualOverflow` by using `gap` (#42526) @DiegoAndai
+- &#8203;<!-- 07 -->[useMediaQuery] Drop Safari < 14 support (#42464) @aarongarciah
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 04 -->Allow passing `NaN` as `defaultValue` to `useControlled` (#41559) @iammminzzy
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 39 -->Improve styled and sx prop transformation (#42598) @siriwatknp
+- &#8203;<!-- 36 -->Support more cases for sx-prop transformation (#42527) @siriwatknp
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 09 -->Fix issues reported by react compiler in `mui-private-theming` components (#42619) @sai6855
+
+### Docs
+
+- &#8203;<!-- 31 -->Add `theme.applyStyles` and migrate docs (#42498) @siriwatknp
+- &#8203;<!-- 29 -->Fix dashboard template console error (#42594) @oliviertassinari
+- &#8203;<!-- 28 -->Migrate system props to `sx` prop (#42475) @siriwatknp
+- &#8203;<!-- 27 -->[material-ui]Fix duplicated sentence (#42521) @alexfauquette
+- &#8203;<!-- 22 -->[Grid] Fix docs spacing (#42573) @oliviertassinari
+- &#8203;<!-- 21 -->[joy-ui] Add Next.js App Router instructions on how to prevent flickering (#42514) @devnyxie
+- &#8203;<!-- 20 -->[joy-ui] Fix HTML tag without preformatting (#42525) @jacobmoshipco
+- &#8203;<!-- 19 -->[material-ui] Add docs for complementary stepper components (#41900) @anle9650
+- &#8203;<!-- 18 -->[material-ui] Fix typo on Sign-in/Sign-up templates (#42605) @zanivan
+- &#8203;<!-- 17 -->[material-ui] Add container queries docs (#42434) @siriwatknp
+- &#8203;<!-- 16 -->[material-ui] Fix ESLint error in Stepper demo (#42559) @aarongarciah
+- &#8203;<!-- 15 -->[material-ui] Shorten useMediaQuery subheading (#42561) @aarongarciah
+- &#8203;<!-- 14 -->[material-ui] Add a Refine example project (#42461) @necatiozmen
+
+### Core
+
+- &#8203;<!-- 39 -->[website] Move the `React Engineer - X` role to future roles (#42532) @DanailH
+- &#8203;<!-- 35 -->[core] Allow `for..of` loops (#42600) @michaldudak
+- &#8203;<!-- 34 -->[core] Add comment about Object.js @oliviertassinari
+- &#8203;<!-- 33 -->[core] Disable eslint-plugin-react-compiler for Base (#42563) @aarongarciah
+- &#8203;<!-- 33 -->[core] Group Pigment CSS dependencies (#42174) @siriwatknp
+- &#8203;<!-- 32 -->[core] Configure eslint-plugin-react-compiler (#42555) @aarongarciah
+- &#8203;<!-- 31 -->[core] Skip charts animation for visual regression test (#42530) @alexfauquette
+- &#8203;<!-- 26 -->[docs-infra] Simplify click header (#42593) @oliviertassinari
+- &#8203;<!-- 25 -->[docs-infra] Add configurable jsdoc host variable (#42472) @tonygravell
+- &#8203;<!-- 25 -->[docs-infra] Add the Base UI logo with copy functionality (#42446) @danilo-leal
+- &#8203;<!-- 24 -->[docs-infra] Prevent link anchor when selecting text (#41994) @alexfauquette
+- &#8203;<!-- 23 -->[docs-infra] Add the Base UI logo with copy functionality (#42446) @danilo-leal
+- &#8203;<!-- 13 -->[examples] Remove Pigment CSS examples (#42471) @sai6855
+- &#8203;<!-- 06 -->[test] Restore pnpm tc command (#42572) @oliviertassinari
+- &#8203;<!-- 05 -->[test] Restore testing internal packages (#42519) @michaldudak
+- &#8203;<!-- 03 -->[website] Close Developer Advocate / Content Engineer role @oliviertassinari
+- &#8203;<!-- 02 -->[website] Remove blank line @oliviertassinari
+- &#8203;<!-- 01 -->[website] Fix mobile layout shift @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @anle9650, @DanailH, @danilo-leal, @devnyxie, @DiegoAndai, @iammminzzy, @jacobmoshipco, @michaldudak, @necatiozmen, @oliviertassinari, @sai6855, @shrilsharma, @siriwatknp, @tonygravell, @zanivan, @ZeeshanTamboli
+
 ## v6.0.0-alpha.10
 
 <!-- generated comparing v6.0.0-alpha.9..next -->

apps/local-ui-lib/package.json

@@ -3,6 +3,6 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@pigment-css/react": "^0.0.12"
+    "@pigment-css/react": "^0.0.13"
   }
 }

apps/pigment-css-next-app/next.config.js

@@ -1,7 +1,7 @@
 /* eslint-env node */
 // eslint-ignore-next-line import/no-unresolved
 const { withPigment } = require('@pigment-css/nextjs-plugin');
-const { extendTheme } = require('@mui/material/styles');
+const { extendTheme, stringifyTheme } = require('@mui/material/styles');
 
 /**
  * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions
@@ -95,6 +95,7 @@ const theme = extendTheme({
 theme.getColorSchemeSelector = (colorScheme) => {
   return `@media (prefers-color-scheme: ${colorScheme})`;
 };
+theme.toRuntimeSource = stringifyTheme;
 
 function innerNoop() {
   return null;

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

@@ -9,7 +9,7 @@
     "clean": "rimraf .next"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.12",
+    "@pigment-css/react": "^0.0.13",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/lab": "workspace:^",
@@ -24,7 +24,7 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "^0.0.12",
+    "@pigment-css/nextjs-plugin": "^0.0.14",
     "@types/node": "^20.5.7",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",

apps/pigment-css-next-app/src/app/layout.tsx

@@ -1,9 +1,7 @@
 import type { Metadata } from 'next';
-import { css } from '@pigment-css/react';
 import { Inter } from 'next/font/google';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
 import { ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
 import '@pigment-css/react/styles.css';
 import theme from './theme';
 
@@ -19,20 +17,9 @@ export const metadata: Metadata = {
 export default function RootLayout(props: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body
-        className={`${inter.className} ${css`
-          background-color: ${({ theme: t }) => t.vars.palette.background.default};
-          color: ${({ theme: t }) => t.vars.palette.text.primary};
-          background-image: url('@/assets/mui.svg');
-          background-repeat: no-repeat;
-          background-position: 1rem 1rem;
-        `}`}
-      >
+      <body className={`${inter.className}`}>
         <AppRouterCacheProvider>
-          <ThemeProvider theme={theme}>
-            <CssBaseline />
-            {props.children}
-          </ThemeProvider>
+          <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
         </AppRouterCacheProvider>
       </body>
     </html>

apps/pigment-css-next-app/src/app/material-ui/react-css-baseline/page.tsx

@@ -0,0 +1,24 @@
+'use client';
+import * as React from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
+import ScopedCssBaseline from '@mui/material/ScopedCssBaseline';
+
+export default function CssBaselinePage() {
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <section>
+        <h2> CSS Baseline</h2>
+        <div className="demo-container">
+          <p>Hello world</p>
+        </div>
+      </section>
+      <section>
+        <h2> Positioned Popper</h2>
+        <div className="demo-container">
+          <ScopedCssBaseline>Hello world</ScopedCssBaseline>
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}

apps/pigment-css-next-app/src/app/material-ui/react-paper/page.tsx

@@ -0,0 +1,37 @@
+'use client';
+import * as React from 'react';
+import Elevation from '../../../../../../docs/data/material/components/paper/Elevation';
+import SimplePaper from '../../../../../../docs/data/material/components/paper/SimplePaper';
+import SquareCorners from '../../../../../../docs/data/material/components/paper/SquareCorners';
+import Variants from '../../../../../../docs/data/material/components/paper/Variants';
+
+export default function Paper() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Elevation</h2>
+        <div className="demo-container">
+          <Elevation />
+        </div>
+      </section>
+      <section>
+        <h2> Simple Paper</h2>
+        <div className="demo-container">
+          <SimplePaper />
+        </div>
+      </section>
+      <section>
+        <h2> Square Corners</h2>
+        <div className="demo-container">
+          <SquareCorners />
+        </div>
+      </section>
+      <section>
+        <h2> Variants</h2>
+        <div className="demo-container">
+          <Variants />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}