Merge branch 'next' into blog-fixes-and-updates

mui · May 23, 2024 · 4a1839f · 4a1839f
2 parents cb9e1c0 + 71afb41
commit 4a1839f
Show file tree

Hide file tree

Showing 75 changed files with 538 additions and 736 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -75,6 +75,7 @@ commands:
             node scripts/useReactVersion.mjs
             # log a patch for maintainers who want to check out this change
             git --no-pager diff HEAD
+
       - when:
           condition: << parameters.browsers >>
           steps:
@@ -93,6 +94,13 @@ commands:
                 name: Restore playwright cache
                 keys:
                   - v6-playwright-{{ arch }}-{{ checksum "/tmp/playwright_info.json" }}
+      - when:
+          condition:
+            not: << parameters.browsers >>
+          steps:
+            # See https://stackoverflow.com/a/73411601
+            - run: corepack enable --install-directory ~/bin
+
       - run:
           name: View install environment
           command: |

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -299,7 +299,7 @@ module.exports = {
     },
     // Next.js entry points pages
     {
-      files: ['docs/pages/**/*.js'],
+      files: ['docs/pages/**/*{.tsx,.js}'],
       rules: {
         'react/prop-types': 'off',
       },
@@ -473,5 +473,36 @@ module.exports = {
         'import/prefer-default-export': 'off',
       },
     },
+    {
+      /**
+       * Examples are for demonstration purposes and should not be considered a part of the library.
+       * They don't contain ESLint setup, so we don't want them to contain ESLint directives
+       * We do, however, want to keep the rules in place to ensure the examples are following
+       * a reasonably similar code style as the library.
+       */
+      files: ['examples/**/*'],
+      rules: {
+        'no-console': 'off',
+        'no-underscore-dangle': 'off',
+        'import/no-unresolved': 'off',
+        'import/namespace': 'off',
+        'import/extensions': 'off',
+        'import/named': 'off',
+        'import/no-duplicates': 'off',
+        'import/no-named-as-default': 'off',
+        'import/default': 'off',
+        'import/no-named-as-default-member': 'off',
+        'import/order': 'off',
+        // Reset the default until https://github.com/jsx-eslint/eslint-plugin-react/issues/3672 is fixed.
+        'react/jsx-no-target-blank': ['error', { allowReferrer: false }],
+      },
+    },
+    {
+      // TODO, move rule to be global, propagate: https://github.com/mui/material-ui/issues/42169
+      files: ['examples/pigment-css-remix-ts/**/*'],
+      rules: {
+        'react/react-in-jsx-scope': 'off',
+      },
+    },
   ],
 };
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -30,7 +30,7 @@ jobs:
           # fetch all tags which are required for `pnpm release:changelog`
           fetch-depth: 0
       - name: Set up pnpm
-        uses: pnpm/action-setup@d882d12c64e032187b2edb46d3a0d003b7a43598 # v2.4.0
+        uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
       - name: Use Node.js 18.x
         uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:

diff --git a/.github/workflows/maintenance.yml b/.github/workflows/maintenance.yml
@@ -29,7 +29,7 @@ jobs:
     steps:
       - run: echo "${{ github.actor }}"
       - name: check if prs are dirty
-        uses: eps1lon/actions-label-merge-conflict@fd1f295ee7443d13745804bc49fe158e240f6c6e # v2.1.0
+        uses: eps1lon/actions-label-merge-conflict@6d74047dcef155976a15e4a124dde2c7fe0c5522 # v3.0.1
         with:
           dirtyLabel: 'PR: out-of-date'
           removeOnDirtyLabel: 'PR: ready to ship'

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,40 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.8
+
+<!-- generated comparing v6.0.0-alpha.7..next -->
+
+_May 21, 2024_
+
+A big thanks to the 7 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@6.0.0-alpha.7`
+
+- &#8203;<!-- 04 -->[material-ui] Filter only valid theme palette for generating styles (#42147) @siriwatknp
+- &#8203;<!-- 03 -->[material-ui] Remove UMD bundle (#42172) @ZeeshanTamboli
+- &#8203;<!-- 02 -->[material-ui][TextField] Deprecate `*Props` props (#42062) @DiegoAndai
+
+### Docs
+
+- &#8203;<!-- 08 -->[docs] Remove Base UI from the README (#42307) @danilo-leal
+- &#8203;<!-- 07 -->[docs][material-ui] Fix typo in style interoperability with Tailwind CSS docs (#42279) @ZeeshanTamboli
+- &#8203;<!-- 06 -->[docs][material-ui] Add supported browsers section to migration guide (#42194) @DiegoAndai
+- &#8203;<!-- 05 -->[docs][material-ui][Pagination] Clarify pagination `page` prop API (#42220) @Mandar-Pandya
+
+### Core
+
+- &#8203;<!-- 12 -->[blog] Update blog post OG image (#42270) @danilo-leal
+- &#8203;<!-- 11 -->[blog] Update Pigment CSS post (#42266) @danilo-leal
+- &#8203;<!-- 10 -->[docs] Remove LocalMonero (#42224) @oliviertassinari
+- &#8203;<!-- 08 -->[docs-infra] Fix keyboard navigation on page tabs (#42152) @danilo-leal
+- &#8203;<!-- 10 -->[code-infra] Remove raw-loader (#42275) @Janpot
+- &#8203;<!-- 09 -->[core] Remove outdated Babel plugins (#42140) @ZeeshanTamboli
+- &#8203;<!-- 12 -->[core] Fix a few more key spread issues (#42168) @oliviertassinari
+- &#8203;<!-- 01 -->[website] Avoid duplicate simple vs. rich (#42100) @oliviertassinari
+
+All contributors of this release in alphabetical order: @danilo-leal, @DiegoAndai, @Janpot, @Mandar-Pandya, @oliviertassinari, @siriwatknp, @ZeeshanTamboli
+
 ## v6.0.0-alpha.7
 
 <!-- generated comparing v6.0.0-alpha.6..next -->
@@ -53,7 +88,7 @@ All contributors of this release in alphabetical order: @aarongarciah, @alexfauq
 
 _May 8, 2024_
 
-A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+A big thanks to the 10 contributors who made this release possible.
 
 ### `@mui/material@6.0.0-alpha.6`
 
@@ -101,7 +136,7 @@ All contributors of this release in alphabetical order: @aarongarciah, @danilo-l
 
 _May 1, 2024_
 
-A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+A big thanks to the 9 contributors who made this release possible.
 
 ### `@mui/material@6.0.0-alpha.5`
 

diff --git a/docs/data/about/teamMembers.json b/docs/data/about/teamMembers.json
@@ -279,6 +279,7 @@
     "location": "Gold Coast, Australia",
     "locationCountry": "au",
     "about": "Enjoy creating open source libraries and reading about AI 🤖",
+    "twitter": "atomiksdev",
     "github": "atomiks"
   },
   {
@@ -305,5 +306,14 @@
     "locationCountry": "fr",
     "about": "Cooking 🍳, plant caring 🪴 and literature 📖",
     "github": "arthurbalduini"
+  },
+  {
+    "name": "Kenan Yusuf",
+    "title": "Design Engineer - X",
+    "location": "London, UK",
+    "locationCountry": "gb",
+    "about": "Amateur cook, DIYer, and film photographer",
+    "github": "KenanYusuf",
+    "twitter": "KebabYusuf"
   }
 ]
diff --git a/docs/data/material/components/autocomplete/CustomizedHook.js b/docs/data/material/components/autocomplete/CustomizedHook.js
@@ -181,20 +181,24 @@ export default function CustomizedHook() {
       <div {...getRootProps()}>
         <Label {...getInputLabelProps()}>Customized hook</Label>
         <InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
-          {value.map((option, index) => (
-            <StyledTag label={option.title} {...getTagProps({ index })} />
-          ))}
+          {value.map((option, index) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return <StyledTag key={key} {...tagProps} label={option.title} />;
+          })}
           <input {...getInputProps()} />
         </InputWrapper>
       </div>
       {groupedOptions.length > 0 ? (
         <Listbox {...getListboxProps()}>
-          {groupedOptions.map((option, index) => (
-            <li {...getOptionProps({ option, index })}>
-              <span>{option.title}</span>
-              <CheckIcon fontSize="small" />
-            </li>
-          ))}
+          {groupedOptions.map((option, index) => {
+            const { key, ...optionProps } = getOptionProps({ option, index });
+            return (
+              <li key={key} {...optionProps}>
+                <span>{option.title}</span>
+                <CheckIcon fontSize="small" />
+              </li>
+            );
+          })}
         </Listbox>
       ) : null}
     </Root>

diff --git a/docs/data/material/components/autocomplete/CustomizedHook.tsx b/docs/data/material/components/autocomplete/CustomizedHook.tsx
@@ -179,20 +179,24 @@ export default function CustomizedHook() {
       <div {...getRootProps()}>
         <Label {...getInputLabelProps()}>Customized hook</Label>
         <InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
-          {value.map((option: FilmOptionType, index: number) => (
-            <StyledTag label={option.title} {...getTagProps({ index })} />
-          ))}
+          {value.map((option: FilmOptionType, index: number) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return <StyledTag key={key} {...tagProps} label={option.title} />;
+          })}
           <input {...getInputProps()} />
         </InputWrapper>
       </div>
       {groupedOptions.length > 0 ? (
         <Listbox {...getListboxProps()}>
-          {(groupedOptions as typeof top100Films).map((option, index) => (
-            <li {...getOptionProps({ option, index })}>
-              <span>{option.title}</span>
-              <CheckIcon fontSize="small" />
-            </li>
-          ))}
+          {(groupedOptions as typeof top100Films).map((option, index) => {
+            const { key, ...optionProps } = getOptionProps({ option, index });
+            return (
+              <li key={key} {...optionProps}>
+                <span>{option.title}</span>
+                <CheckIcon fontSize="small" />
+              </li>
+            );
+          })}
         </Listbox>
       ) : null}
     </Root>

diff --git a/docs/data/material/components/autocomplete/Tags.js b/docs/data/material/components/autocomplete/Tags.js
@@ -44,9 +44,12 @@ export default function Tags() {
         defaultValue={[top100Films[13].title]}
         freeSolo
         renderTags={(value, getTagProps) =>
-          value.map((option, index) => (
-            <Chip variant="outlined" label={option} {...getTagProps({ index })} />
-          ))
+          value.map((option, index) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip variant="outlined" label={option} key={key} {...tagProps} />
+            );
+          })
         }
         renderInput={(params) => (
           <TextField

diff --git a/docs/data/material/components/autocomplete/Tags.tsx b/docs/data/material/components/autocomplete/Tags.tsx
@@ -44,9 +44,12 @@ export default function Tags() {
         defaultValue={[top100Films[13].title]}
         freeSolo
         renderTags={(value: readonly string[], getTagProps) =>
-          value.map((option: string, index: number) => (
-            <Chip variant="outlined" label={option} {...getTagProps({ index })} />
-          ))
+          value.map((option: string, index: number) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip variant="outlined" label={option} key={key} {...tagProps} />
+            );
+          })
         }
         renderInput={(params) => (
           <TextField

diff --git a/docs/data/material/components/steppers/VerticalLinearStepper.js b/docs/data/material/components/steppers/VerticalLinearStepper.js
@@ -51,7 +51,7 @@ export default function VerticalLinearStepper() {
           <Step key={step.label}>
             <StepLabel
               optional={
-                index === 2 ? (
+                index === steps.length - 1 ? (
                   <Typography variant="caption">Last step</Typography>
                 ) : null
               }
@@ -61,22 +61,20 @@ export default function VerticalLinearStepper() {
             <StepContent>
               <Typography>{step.description}</Typography>
               <Box sx={{ mb: 2 }}>
-                <div>
-                  <Button
-                    variant="contained"
-                    onClick={handleNext}
-                    sx={{ mt: 1, mr: 1 }}
-                  >
-                    {index === steps.length - 1 ? 'Finish' : 'Continue'}
-                  </Button>
-                  <Button
-                    disabled={index === 0}
-                    onClick={handleBack}
-                    sx={{ mt: 1, mr: 1 }}
-                  >
-                    Back
-                  </Button>
-                </div>
+                <Button
+                  variant="contained"
+                  onClick={handleNext}
+                  sx={{ mt: 1, mr: 1 }}
+                >
+                  {index === steps.length - 1 ? 'Finish' : 'Continue'}
+                </Button>
+                <Button
+                  disabled={index === 0}
+                  onClick={handleBack}
+                  sx={{ mt: 1, mr: 1 }}
+                >
+                  Back
+                </Button>
               </Box>
             </StepContent>
           </Step>

diff --git a/docs/data/material/components/steppers/VerticalLinearStepper.tsx b/docs/data/material/components/steppers/VerticalLinearStepper.tsx
@@ -51,7 +51,7 @@ export default function VerticalLinearStepper() {
           <Step key={step.label}>
             <StepLabel
               optional={
-                index === 2 ? (
+                index === steps.length - 1 ? (
                   <Typography variant="caption">Last step</Typography>
                 ) : null
               }
@@ -61,22 +61,20 @@ export default function VerticalLinearStepper() {
             <StepContent>
               <Typography>{step.description}</Typography>
               <Box sx={{ mb: 2 }}>
-                <div>
-                  <Button
-                    variant="contained"
-                    onClick={handleNext}
-                    sx={{ mt: 1, mr: 1 }}
-                  >
-                    {index === steps.length - 1 ? 'Finish' : 'Continue'}
-                  </Button>
-                  <Button
-                    disabled={index === 0}
-                    onClick={handleBack}
-                    sx={{ mt: 1, mr: 1 }}
-                  >
-                    Back
-                  </Button>
-                </div>
+                <Button
+                  variant="contained"
+                  onClick={handleNext}
+                  sx={{ mt: 1, mr: 1 }}
+                >
+                  {index === steps.length - 1 ? 'Finish' : 'Continue'}
+                </Button>
+                <Button
+                  disabled={index === 0}
+                  onClick={handleBack}
+                  sx={{ mt: 1, mr: 1 }}
+                >
+                  Back
+                </Button>
               </Box>
             </StepContent>
           </Step>

diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.js b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import GlobalStyles from '@mui/material/GlobalStyles';
+
+export default function GlobalCssOverrideTheme() {
+  return (
+    <React.Fragment>
+      <GlobalStyles
+        styles={(theme) => ({
+          h1: { color: theme.palette.primary.main },
+        })}
+      />
+      <h1>Grey h1 element</h1>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import GlobalStyles from '@mui/material/GlobalStyles';
+
+export default function GlobalCssOverrideTheme() {
+  return (
+    <React.Fragment>
+      <GlobalStyles
+        styles={(theme) => ({
+          h1: { color: theme.palette.primary.main },
+        })}
+      />
+      <h1>Grey h1 element</h1>
+    </React.Fragment>
+  );
+}