Merge branch 'next' into mui-utils-ie-11-removal

mui · Jun 27, 2024 · a7d5e68 · a7d5e68
2 parents 914161b + d204f41
commit a7d5e68
Show file tree

Hide file tree

Showing 350 changed files with 5,996 additions and 3,679 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -436,7 +436,10 @@ module.exports = {
             ],
           },
         ],
-        'import/no-cycle': ['error', { ignoreExternal: true }],
+        // TODO: Consider setting back to `ignoreExternal: true` when the expected behavior is fixed:
+        // https://github.com/import-js/eslint-plugin-import/issues/2348#issuecomment-1587320057
+        // Reevaluate when https://github.com/import-js/eslint-plugin-import/pull/2998 is released.
+        'import/no-cycle': ['error', { ignoreExternal: false }],
       },
     },
     {

diff --git a/.github/ISSUE_TEMPLATE/1.bug.yml b/.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).
diff --git a/.github/ISSUE_TEMPLATE/2.feature.yml b/.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).
diff --git a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml b/.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).
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,113 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.13
+
+<!-- generated comparing v6.0.0-alpha.12..next -->
+
+_Jun 27, 2024_
+
+A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Added layout components for Pigment CSS integration (#42693) @siriwatknp
+
+### `@mui/[email protected]`
+
+- [Autocomplete] Fix more React 18.3 key spread warnings in demos (#42639) @wbt
+- [Container][Grid][Stack][Hidden] Export Pigment CSS layout components (#42693) @siriwatknp
+- [Text Field] when click password visibility button, text caret position change to very front. (#42595) @appleSimple
+- [Modal] migrate useSlotProps to useSLot (#42150) @sai6855
+
+### `@mui/[email protected]`
+
+- [withStyles] Expect React defaultProps warning in test (#42752) @aarongarciah
+
+### Docs
+
+- Fix link in CONTRIBUTING.md (#42755) @Janpot
+- Add documentation on migrating JSS's alternative, array-based syntax to syntax supported by Emotion (#42053) @cjl750
+- Fix type error in virtualized table demo (#42757) @aarongarciah
+- Add first batch of v6 migration (#42242) @siriwatknp
+- Fix quotes on font-family dedeclaration in the Landing Page template theme (#42748) @joetats
+
+### Core
+
+- [code-infra] Refactor eslint `import/no-cycle` rule (#42705) @LukasTy
+- [core] Target direct version for prerelease (#42768) @siriwatknp
+- [test] Remove enzyme (#42706) @aarongarciah
+- [test] Remove createMount test util (#42703) @aarongarciah
+- [website] Add Ale to team (#42764) @alelthomas
+
+All contributors of this release in alphabetical order: @aarongarciah, @alelthomas, @appleSimple, @cjl750, @Janpot, @joetats, @LukasTy, @sai6855, @siriwatknp, @wbt
+
+## 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 -->

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -162,7 +162,7 @@ The following statements must be true:
 - The code is linted. If the code was changed, run `pnpm eslint`.
 - The code is type-safe. If TypeScript sources or declarations were changed, run `pnpm typescript` to confirm that the check passes.
 - The API docs are up to date. If API was changed, run `pnpm proptypes && pnpm docs:api`.
-- The demos are up to date. If demos were changed, run `pnpm docs:typescript:formatted`. See [about writing demos](#3-write-the-content-of-the-demo).
+- The demos are up to date. If demos were changed, run `pnpm docs:typescript:formatted`. See [about writing demos](#2-write-the-demo-code).
 - The pull request title follows the pattern `[product-name][Component] Imperative commit message`. (See: [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/) for a great explanation).
 
 Don't worry if you miss a step—the Continuous Integration will run a thorough set of tests on your commits, and the maintainers of the project can assist you if you run into problems.

diff --git a/apps/local-ui-lib/package.json b/apps/local-ui-lib/package.json
@@ -3,6 +3,6 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@pigment-css/react": "^0.0.13"
+    "@pigment-css/react": "^0.0.16"
   }
 }
diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
@@ -9,7 +9,7 @@
     "clean": "rimraf .next"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.13",
+    "@pigment-css/react": "^0.0.16",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/lab": "workspace:^",
@@ -24,7 +24,7 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "^0.0.14",
+    "@pigment-css/nextjs-plugin": "^0.0.16",
     "@types/node": "^20.5.7",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",

diff --git a/apps/pigment-css-next-app/src/app/layout.tsx b/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>

diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-container/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-container/page.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/PigmentContainer';
+
+export default function ContainerPage() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Fixed Container</h2>
+        <div className="demo-container">
+          <Container fixed>
+            <Box sx={{ bgcolor: '#cfe8fc', height: '30vh' }} />
+          </Container>
+        </div>
+      </section>
+      <section>
+        <h2> Simple Container</h2>
+        <div className="demo-container">
+          <Container maxWidth="sm">
+            <Box sx={{ bgcolor: '#cfe8fc', height: '30vh' }} />
+          </Container>
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-css-baseline/page.tsx b/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>
+  );
+}
diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Grid from '@mui/material/PigmentGrid';
+import { styled } from '@pigment-css/react';
+
+const Item = styled(Paper)(({ theme }) => ({
+  backgroundColor: '#fff',
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+  ...theme.applyStyles('dark', {
+    backgroundColor: '#1A2027',
+  }),
+}));
+
+export default function GridPage() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Basic Grid</h2>
+        <div className="demo-container">
+          <Box sx={{ flexGrow: 1 }}>
+            <Grid container spacing={2}>
+              <Grid size={{ xs: 8 }}>
+                <Item>xs=8</Item>
+              </Grid>
+              <Grid size={{ xs: 4 }}>
+                <Item>xs=4</Item>
+              </Grid>
+              <Grid size={{ xs: 4 }}>
+                <Item>xs=4</Item>
+              </Grid>
+              <Grid size={{ xs: 8 }}>
+                <Item>xs=8</Item>
+              </Grid>
+            </Grid>
+          </Box>
+        </div>
+      </section>
+      <section>
+        <h2> Columns Grid</h2>
+        <div className="demo-container">
+          <Box sx={{ flexGrow: 1 }}>
+            <Grid container spacing={2} columns={16}>
+              <Grid size={{ xs: 8 }}>
+                <Item>xs=8</Item>
+              </Grid>
+              <Grid size={{ xs: 8 }}>
+                <Item>xs=8</Item>
+              </Grid>
+            </Grid>
+          </Box>
+        </div>
+      </section>
+      <section>
+        <h2> Responsive Grid</h2>
+        <div className="demo-container">
+          <Box sx={{ flexGrow: 1 }}>
+            <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
+              {Array.from(Array(6)).map((_, index) => (
+                <Grid size={{ xs: 2, sm: 4, md: 4, lg: 3 }} key={index}>
+                  <Item>xs=2</Item>
+                </Grid>
+              ))}
+            </Grid>
+          </Box>
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}