Merge branch 'next' into fix-autocomplete-to-remove-react18.3-key-spr…

…ead-warning Signed-off-by: Diego Andai <diego@mui.com>
mui · May 8, 2024 · ceeb9fd · ceeb9fd
2 parents 604fead + d8a5f53
commit ceeb9fd
Show file tree

Hide file tree

Showing 248 changed files with 5,044 additions and 2,325 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -38,6 +38,8 @@ jobs:
           cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies
       - run: pnpm install
       - run: pnpm build:ci
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
       - run: pnpm release:changelog
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,53 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.6
+
+<!-- generated comparing v6.0.0-alpha.5..next -->
+
+_May 8, 2024_
+
+A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+### `@mui/material@6.0.0-alpha.6`
+
+- [Chip] Add colorDefault class to chipClasses (#42067) @sai6855
+- Migrate components to support CSS extraction (#42001) @siriwatknp
+- [SpeedDial] Deprecate TransitionComponent (#40698) @harry-whorlow
+
+### `@mui/codemod@6.0.0-alpha.6`
+
+- Add `theme-v6` migration (#42056) @siriwatknp
+
+### `@mui/icons-material@6.0.0-alpha.6`
+
+- Add the Emergency icon (#42080) @danilo-leal
+
+### Docs
+
+- [autocomplete] Fix duplicate autocomplete id (#42086) @oliviertassinari
+- Fix SEO redirection issues @oliviertassinari
+- [material-ui] Fix broken link (#42142) @aarongarciah
+- [material-ui][docs] Fix link on the Sync page (#42088) @danilo-leal
+
+### Core
+
+- [blog] Shorten title to fit @oliviertassinari
+- [blog] Update Sync post OG image (#42114) @danilo-leal
+- [blog] A few tweaks in introducing-sync-plugin (#42092) @oliviertassinari
+- [code-infra] Add canary release scripts (#41949) @michaldudak
+- [code-infra] Move ComponentLinkHeader to @mui/docs (#42061) @Janpot
+- [code-infra] Bump node image used by CI in docker (#42079) @LukasTy
+- [core] Restrict import path with ESLint (#41970) @oliviertassinari
+- [docs-infra] Add design and formatting improvements (#42063) @danilo-leal
+- [docs-infra] Fix HTML structure violations (#42085) @oliviertassinari
+- [website] Componentize a few Careers page sections (#42102) @danilo-leal
+- [website] Refine the InfoCard design (#42116) @danilo-leal
+- [website] Fix home page slider's track position (#42141) @aarongarciah
+- [website] Closing the survey @oliviertassinari
+- [website] Remove Survey banner from website and Core docs (#42104) @joserodolfofreitas
+
+All contributors of this release in alphabetical order: @aarongarciah, @danilo-leal, @harry-whorlow, @Janpot, @joserodolfofreitas, @LukasTy, @michaldudak, @oliviertassinari, @sai6855, @siriwatknp
+
 ## v6.0.0-alpha.5
 
 <!-- generated comparing v6.0.0-alpha.4..next -->

diff --git a/apps/pigment-css-next-app/next.config.js b/apps/pigment-css-next-app/next.config.js
@@ -96,6 +96,13 @@ theme.getColorSchemeSelector = (colorScheme) => {
   return `@media (prefers-color-scheme: ${colorScheme})`;
 };
 
+function innerNoop() {
+  return null;
+}
+function outerNoop() {
+  return innerNoop;
+}
+
 /**
  * @type {PigmentOptions}
  */
@@ -104,6 +111,26 @@ const pigmentOptions = {
   transformLibraries: ['local-ui-lib'],
   sourceMap: true,
   displayName: true,
+  overrideContext: (context) => {
+    if (!context.$RefreshSig$) {
+      context.$RefreshSig$ = outerNoop;
+    }
+    return {
+      ...context,
+      require: (id) => {
+        if (id === '@mui/styled-engine' || id === '@mui/styled-engine-sc') {
+          return {
+            __esModule: true,
+            default: () => () => () => null,
+            internal_processStyles: () => {},
+            keyframes: () => '',
+            css: () => '',
+          };
+        }
+        return context.require(id);
+      },
+    };
+  },
 };
 
 /** @type {import('next').NextConfig} */

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.9",
+    "@pigment-css/react": "^0.0.10",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/lab": "workspace:^",
@@ -24,7 +24,7 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "^0.0.9",
+    "@pigment-css/nextjs-plugin": "^0.0.10",
     "@types/node": "^20.5.7",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",

diff --git a/docs/data/joy/components/autocomplete/CountrySelect.js b/docs/data/joy/components/autocomplete/CountrySelect.js
@@ -8,7 +8,6 @@ import Typography from '@mui/joy/Typography';
 export default function CountrySelect() {
   return (
     <Autocomplete
-      id="country-select-demo"
       placeholder="Choose a country"
       slotProps={{
         input: {

diff --git a/docs/data/joy/components/autocomplete/CountrySelect.tsx b/docs/data/joy/components/autocomplete/CountrySelect.tsx
@@ -8,7 +8,6 @@ import Typography from '@mui/joy/Typography';
 export default function CountrySelect() {
   return (
     <Autocomplete
-      id="country-select-demo"
       placeholder="Choose a country"
       slotProps={{
         input: {

diff --git a/docs/data/joy/components/autocomplete/CustomTags.js b/docs/data/joy/components/autocomplete/CustomTags.js
@@ -6,7 +6,6 @@ import Close from '@mui/icons-material/Close';
 export default function CustomTags() {
   return (
     <Autocomplete
-      id="tags-default"
       multiple
       placeholder="Favorites"
       options={top100Films}

diff --git a/docs/data/joy/components/autocomplete/CustomTags.tsx b/docs/data/joy/components/autocomplete/CustomTags.tsx
@@ -6,7 +6,6 @@ import Close from '@mui/icons-material/Close';
 export default function CustomTags() {
   return (
     <Autocomplete
-      id="tags-default"
       multiple
       placeholder="Favorites"
       options={top100Films}

diff --git a/docs/data/material/components/autocomplete/Asynchronous.js b/docs/data/material/components/autocomplete/Asynchronous.js
@@ -44,7 +44,6 @@ export default function Asynchronous() {
 
   return (
     <Autocomplete
-      id="asynchronous-demo"
       sx={{ width: 300 }}
       open={open}
       onOpen={() => {

diff --git a/docs/data/material/components/autocomplete/Asynchronous.tsx b/docs/data/material/components/autocomplete/Asynchronous.tsx
@@ -49,7 +49,6 @@ export default function Asynchronous() {
 
   return (
     <Autocomplete
-      id="asynchronous-demo"
       sx={{ width: 300 }}
       open={open}
       onOpen={() => {

diff --git a/docs/data/material/components/autocomplete/ComboBox.js b/docs/data/material/components/autocomplete/ComboBox.js
@@ -7,7 +7,6 @@ export default function ComboBox() {
   return (
     <Autocomplete
       disablePortal
-      id="combo-box-demo"
       options={top100Films}
       sx={{ width: 300 }}
       renderInput={(params) => <TextField {...params} label="Movie" />}

diff --git a/docs/data/material/components/autocomplete/ComboBox.tsx b/docs/data/material/components/autocomplete/ComboBox.tsx
@@ -7,7 +7,6 @@ export default function ComboBox() {
   return (
     <Autocomplete
       disablePortal
-      id="combo-box-demo"
       options={top100Films}
       sx={{ width: 300 }}
       renderInput={(params) => <TextField {...params} label="Movie" />}

diff --git a/docs/data/material/components/autocomplete/ComboBox.tsx.preview b/docs/data/material/components/autocomplete/ComboBox.tsx.preview
@@ -1,6 +1,5 @@
 <Autocomplete
   disablePortal
-  id="combo-box-demo"
   options={top100Films}
   sx={{ width: 300 }}
   renderInput={(params) => <TextField {...params} label="Movie" />}

diff --git a/docs/data/material/components/autocomplete/DisabledOptions.js b/docs/data/material/components/autocomplete/DisabledOptions.js
@@ -5,7 +5,6 @@ import Autocomplete from '@mui/material/Autocomplete';
 export default function DisabledOptions() {
   return (
     <Autocomplete
-      id="disabled-options-demo"
       options={timeSlots}
       getOptionDisabled={(option) =>
         option === timeSlots[0] || option === timeSlots[2]

diff --git a/docs/data/material/components/autocomplete/DisabledOptions.tsx b/docs/data/material/components/autocomplete/DisabledOptions.tsx
@@ -5,7 +5,6 @@ import Autocomplete from '@mui/material/Autocomplete';
 export default function DisabledOptions() {
   return (
     <Autocomplete
-      id="disabled-options-demo"
       options={timeSlots}
       getOptionDisabled={(option) =>
         option === timeSlots[0] || option === timeSlots[2]

diff --git a/docs/data/material/components/autocomplete/DisabledOptions.tsx.preview b/docs/data/material/components/autocomplete/DisabledOptions.tsx.preview
@@ -1,5 +1,4 @@
 <Autocomplete
-  id="disabled-options-demo"
   options={timeSlots}
   getOptionDisabled={(option) =>
     option === timeSlots[0] || option === timeSlots[2]

diff --git a/docs/data/material/components/autocomplete/Filter.js b/docs/data/material/components/autocomplete/Filter.js
@@ -10,7 +10,6 @@ const filterOptions = createFilterOptions({
 export default function Filter() {
   return (
     <Autocomplete
-      id="filter-demo"
       options={top100Films}
       getOptionLabel={(option) => option.title}
       filterOptions={filterOptions}

diff --git a/docs/data/material/components/autocomplete/Filter.tsx b/docs/data/material/components/autocomplete/Filter.tsx
@@ -10,7 +10,6 @@ const filterOptions = createFilterOptions({
 export default function Filter() {
   return (
     <Autocomplete
-      id="filter-demo"
       options={top100Films}
       getOptionLabel={(option) => option.title}
       filterOptions={filterOptions}

diff --git a/docs/data/material/components/autocomplete/Filter.tsx.preview b/docs/data/material/components/autocomplete/Filter.tsx.preview
@@ -1,5 +1,4 @@
 <Autocomplete
-  id="filter-demo"
   options={top100Films}
   getOptionLabel={(option) => option.title}
   filterOptions={filterOptions}

diff --git a/docs/data/material/components/autocomplete/GitHubLabel.js b/docs/data/material/components/autocomplete/GitHubLabel.js
@@ -192,7 +192,6 @@ export default function GitHubLabel() {
                 setPendingValue(newValue);
               }}
               disableCloseOnSelect
-              PopperComponent={PopperComponent}
               renderTags={() => null}
               noOptionsText="No labels"
               renderOption={(props, option, { selected }) => (
@@ -255,6 +254,9 @@ export default function GitHubLabel() {
                   placeholder="Filter labels"
                 />
               )}
+              slots={{
+                popper: PopperComponent,
+              }}
             />
           </div>
         </ClickAwayListener>

diff --git a/docs/data/material/components/autocomplete/GitHubLabel.tsx b/docs/data/material/components/autocomplete/GitHubLabel.tsx
@@ -198,7 +198,6 @@ export default function GitHubLabel() {
                 setPendingValue(newValue);
               }}
               disableCloseOnSelect
-              PopperComponent={PopperComponent}
               renderTags={() => null}
               noOptionsText="No labels"
               renderOption={(props, option, { selected }) => (
@@ -261,6 +260,9 @@ export default function GitHubLabel() {
                   placeholder="Filter labels"
                 />
               )}
+              slots={{
+                popper: PopperComponent,
+              }}
             />
           </div>
         </ClickAwayListener>

diff --git a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js
@@ -65,7 +65,6 @@ function MovieSelect() {
 function CountrySelect() {
   return (
     <Autocomplete
-      id="country-customized-option-demo"
       options={countries}
       disableCloseOnSelect
       getOptionLabel={(option) =>

diff --git a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx
@@ -65,7 +65,6 @@ function MovieSelect() {
 function CountrySelect() {
   return (
     <Autocomplete
-      id="country-customized-option-demo"
       options={countries}
       disableCloseOnSelect
       getOptionLabel={(option: CountryType) =>

diff --git a/docs/data/material/components/autocomplete/GoogleMaps.js b/docs/data/material/components/autocomplete/GoogleMaps.js
@@ -91,7 +91,6 @@ export default function GoogleMaps() {
 
   return (
     <Autocomplete
-      id="google-map-demo"
       sx={{ width: 300 }}
       getOptionLabel={(option) =>
         typeof option === 'string' ? option : option.description

diff --git a/docs/data/material/components/autocomplete/GoogleMaps.tsx b/docs/data/material/components/autocomplete/GoogleMaps.tsx
@@ -115,7 +115,6 @@ export default function GoogleMaps() {
 
   return (
     <Autocomplete
-      id="google-map-demo"
       sx={{ width: 300 }}
       getOptionLabel={(option) =>
         typeof option === 'string' ? option : option.description

diff --git a/docs/data/material/components/autocomplete/Grouped.js b/docs/data/material/components/autocomplete/Grouped.js
@@ -13,7 +13,6 @@ export default function Grouped() {
 
   return (
     <Autocomplete
-      id="grouped-demo"
       options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
       groupBy={(option) => option.firstLetter}
       getOptionLabel={(option) => option.title}

diff --git a/docs/data/material/components/autocomplete/Grouped.tsx b/docs/data/material/components/autocomplete/Grouped.tsx
@@ -13,7 +13,6 @@ export default function Grouped() {
 
   return (
     <Autocomplete
-      id="grouped-demo"
       options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
       groupBy={(option) => option.firstLetter}
       getOptionLabel={(option) => option.title}

diff --git a/docs/data/material/components/autocomplete/Grouped.tsx.preview b/docs/data/material/components/autocomplete/Grouped.tsx.preview
@@ -1,5 +1,4 @@
 <Autocomplete
-  id="grouped-demo"
   options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
   groupBy={(option) => option.firstLetter}
   getOptionLabel={(option) => option.title}

diff --git a/docs/data/material/components/autocomplete/Highlights.js b/docs/data/material/components/autocomplete/Highlights.js
@@ -7,7 +7,6 @@ import match from 'autosuggest-highlight/match';
 export default function Highlights() {
   return (
     <Autocomplete
-      id="highlights-demo"
       sx={{ width: 300 }}
       options={top100Films}
       getOptionLabel={(option) => option.title}

diff --git a/docs/data/material/components/autocomplete/Highlights.tsx b/docs/data/material/components/autocomplete/Highlights.tsx
@@ -7,7 +7,6 @@ import match from 'autosuggest-highlight/match';
 export default function Highlights() {
   return (
     <Autocomplete
-      id="highlights-demo"
       sx={{ width: 300 }}
       options={top100Films}
       getOptionLabel={(option) => option.title}

diff --git a/docs/data/material/components/autocomplete/RenderGroup.js b/docs/data/material/components/autocomplete/RenderGroup.js
@@ -29,7 +29,6 @@ export default function RenderGroup() {
 
   return (
     <Autocomplete
-      id="grouped-demo"
       options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
       groupBy={(option) => option.firstLetter}
       getOptionLabel={(option) => option.title}

diff --git a/docs/data/material/components/autocomplete/RenderGroup.tsx b/docs/data/material/components/autocomplete/RenderGroup.tsx
@@ -29,7 +29,6 @@ export default function RenderGroup() {
 
   return (
     <Autocomplete
-      id="grouped-demo"
       options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
       groupBy={(option) => option.firstLetter}
       getOptionLabel={(option) => option.title}

diff --git a/docs/data/material/components/autocomplete/RenderGroup.tsx.preview b/docs/data/material/components/autocomplete/RenderGroup.tsx.preview
@@ -1,5 +1,4 @@
 <Autocomplete
-  id="grouped-demo"
   options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
   groupBy={(option) => option.firstLetter}
   getOptionLabel={(option) => option.title}

diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js
@@ -138,16 +138,17 @@ const OPTIONS = Array.from(new Array(10000))
 export default function Virtualize() {
   return (
     <Autocomplete
-      id="virtualize-demo"
       sx={{ width: 300 }}
       disableListWrap
-      PopperComponent={StyledPopper}
-      ListboxComponent={ListboxComponent}
       options={OPTIONS}
       groupBy={(option) => option[0].toUpperCase()}
       renderInput={(params) => <TextField {...params} label="10,000 options" />}
       renderOption={(props, option, state) => [props, option, state.index]}
       renderGroup={(params) => params}
+      slots={{
+        popper: StyledPopper,
+        listbox: ListboxComponent,
+      }}
     />
   );
 }