Merge branch 'refs/heads/master' into doc/tsc-documentatiion-fix

mui · Sep 13, 2024 · 3e47493 · 3e47493
2 parents e6a0443 + a487633
commit 3e47493
Show file tree

Hide file tree

Showing 282 changed files with 3,389 additions and 8,127 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -299,12 +299,6 @@ jobs:
           command: |
             pnpm docs:link-check
             git add -A && git diff --exit-code --staged
-      - run:
-          name: Update the templates shared themes
-          command: pnpm template:update-theme
-      - run:
-          name: '`pnpm template:update-theme` changes committed?'
-          command: git add -A && git diff --exit-code --staged
   test_types:
     <<: *default-job
     resource_class: 'medium+'

diff --git a/.eslintignore b/.eslintignore
@@ -1,5 +1,4 @@
 /.git
-/.yarn
 /coverage
 /docs/export
 /docs/pages/playground/

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,82 @@
 # [Versions](https://mui.com/versions/)
 
-## 6.0.2
+## v6.1.0
+
+<!-- generated comparing v6.0.2..master -->
+
+_Sep 10, 2024_
+
+A big thanks to the 21 contributors who made this release possible. Here are the highlights ✨:
+
+- **Minor version changes**: To solve longstanding ESM compatibility issues we added [package exports](https://nodejs.org/api/packages.html#exports) to `@mui/icons-material` (#43624). This change is backwards compatible with previously recommended setups. Bundlers that don't support the `exports` field won't be affected. If you discover any issues, please reach out by creating a GitHub issue.
+- This release also includes several fixes and documentation improvements to support the Material UI v6 upgrade.
+
+### `@mui/[email protected]`
+
+- Add exports field to package.json (#43624) @Janpot
+
+### `@mui/[email protected]`
+
+- [Autocomplete] Add custom props support via `slotProps` (#43613) @Michael-Hutchinson
+- [Dialog] Fix broken scrolling in full screen mode (#43626) @LuseBiswas
+- [Grid] Revert wrap deprecation (#42363) (#43459) @DiegoAndai
+- Improve color map filter on styles (#43579) @DiegoAndai
+- Return styles directly if the selector is `&` when using `applyStyles` (#43633) @siriwatknp
+- [types] Make slots partial in `CreateSlotsAndSlotProp`type (#42077) @lhilgert9
+- [Radio] Fix disabled state styling regression (#43592) @mnajdova
+- Fix wrong import to type (#43584) @mnajdova
+- Simplify version prerelease export (#43699) @DiegoAndai
+
+### `@mui/[email protected]`
+
+- Use a custom sheet to set prepend for `GlobalStyles` (#43632) @siriwatknp
+- Simplify version prerelease export (#43699) @DiegoAndai
+
+### Docs
+
+- [material-ui][Autocomplete] Refactor asynchronous loading demo (#43630) @sai6855
+- [material-ui][Autocomplete] Fix GitHubLabel demo input background color (#43599) @sai6855
+- [material-ui] Update Next.js font optimization guide (#43196) @siriwatknp
+- [material-ui] Fix getting started with CSS variables in theme example (#43658) @Designer023
+- [material-ui][system] Edit "How to use components selector API" section to add about direct import (#43377) @IAluI
+- [material-ui] Update @mui/material-nextjs import examples to v14 (#43698) @ohmsl
+- Fix typo in Divider doc (#43691) @lokendra-reco
+- Add Anima section to documentation (#43673) @GoOrit-Anima
+- Add Integrations section to design resources page (#43612) @zanivan
+- Fix versions URL @oliviertassinari
+- Keep showing next under the subdomain @oliviertassinari
+- Add Next.js font optimization section to Pigment CSS migration (#43631) @siriwatknp
+- Update the Material UI readme post-v6 (#43504) @samuelsycamore
+- Bring back v5 release changelogs (#43460) @oliviertassinari
+- Fix use of absolute URLs (#43567) @oliviertassinari
+- Remove explicit `date-fns` dependency (#40823) @renovate[bot]
+- [pigment-css] Add guide for Pigment CSS quickstart (#43395) @alelthomas
+- [system] Fix link to createCssVarsProvider (#43661) @oliviertassinari
+- Add scrollbar to color picker demo (#43672) @sai6855
+
+### Core
+
+- [blog] Uniformalize version between projects @oliviertassinari
+- [blog] Fix page layout shift @oliviertassinari
+- [code-infra] Build size snapshots from installed packages (#43452) @Janpot
+- [code-infra] Recreate lockfile (#43623) @Janpot
+- [code-infra] Make the API docs builder more configurable (#43574) @michaldudak
+- [code-infra] Update runners from node 18 to 20 for GHA (#43593) @JCQuintas
+- [code-infra] Update runners from node 18 to 20 (#43591) @JCQuintas
+- [docs-infra] Fix axe issue scroll-to-top without landmark (#43663) @oliviertassinari
+- [docs-infra] Reduce Algolia index size, no need for lvl6 @oliviertassinari
+- [docs-infra] Use embed as the default for opening CodeSandbox (#43618) @siriwatknp
+- [docs-infra] Fix broken anchor button when header has a link (#43598) @cherniavskii
+- [docs-infra] Open Sign-in and Dashboard template with CodeSandbox/StackBlitz (#43604) @siriwatknp
+- [examples] Fix CDN live preview demo (#43641) @oliviertassinari
+- Add Pigment CSS screenshot test (#43280) @mnajdova
+- [website] Polish gold sponsors @oliviertassinari
+- [website] Add CopyCopter as gold sponsor (#43595) @zanivan
+- [website] Add disabled button styles to branding theme (#43577) @zanivan
+
+All contributors of this release in alphabetical order: @alelthomas, @cherniavskii, @Designer023, @DiegoAndai, @GoOrit-Anima, @IAluI, @Janpot, @JCQuintas, @lhilgert9, @lokendra-reco, @LuseBiswas, @Michael-Hutchinson, @michaldudak, @mnajdova, @ohmsl, @oliviertassinari, @renovate[bot], @sai6855, @samuelsycamore, @siriwatknp, @zanivan
+
+## v6.0.2
 
 <!-- generated comparing v6.0.1..master -->
 

diff --git a/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx b/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx
@@ -847,7 +847,7 @@ const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(function Slider(pr
 
           let markActive;
           if (track === false) {
-            markActive = values.indexOf(mark.value) !== -1;
+            markActive = values.includes(mark.value);
           } else {
             markActive =
               (track === 'normal' &&

diff --git a/apps/pigment-css-vite-app/src/pages/fixtures/index.tsx b/apps/pigment-css-vite-app/src/pages/fixtures/index.tsx
@@ -21,7 +21,7 @@ export default function Layout() {
   );
 
   const demosRoutes = (materialUIRoute?.route.children ?? []).filter(
-    (item) => !!item.path && item.path.indexOf('react-pagination') < 0,
+    (item) => !!item.path && !item.path.includes('react-pagination'),
   );
 
   return (

diff --git a/babel.config.js b/babel.config.js
@@ -110,8 +110,7 @@ module.exports = function getBabelConfig(api) {
           'MUI_MAJOR_VERSION',
           'MUI_MINOR_VERSION',
           'MUI_PATCH_VERSION',
-          'MUI_PRERELEASE_LABEL',
-          'MUI_PRERELEASE_NUMBER',
+          'MUI_PRERELEASE',
         ],
       },
     ],

diff --git a/benchmark/package.json b/benchmark/package.json
@@ -11,7 +11,7 @@
     "server:system": "cd ../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node benchmark/server/scenarios/system.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\""
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.0",
+    "@babel/runtime": "^7.25.6",
     "@chakra-ui/system": "^2.6.2",
     "@emotion/react": "^11.13.3",
     "@emotion/server": "^11.11.0",
@@ -34,9 +34,9 @@
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",
     "serve-handler": "^6.1.5",
-    "styled-components": "^6.1.12",
+    "styled-components": "^6.1.13",
     "styled-system": "^5.1.5",
     "theme-ui": "^0.16.2",
-    "webpack": "^5.93.0"
+    "webpack": "^5.94.0"
   }
 }
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
@@ -72,7 +72,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
             <ClearIcon />
           </Button>
         )}
-
         <Button
           {...getPopupIndicatorProps()}
           className={clsx(

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
@@ -57,7 +57,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
             <ClearIcon />
           </StyledClearIndicator>
         )}
-
         <StyledPopupIndicator
           {...getPopupIndicatorProps()}
           className={popupOpen ? 'popupOpen' : undefined}

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js
@@ -69,7 +69,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
             <ClearIcon className="translate-y-[2px] scale-90" />
           </Button>
         )}
-
         <Button
           {...getPopupIndicatorProps()}
           className="self-center outline-0 shadow-none border-0 py-0 px-0.5 rounded-[4px] bg-transparent hover:bg-violet-100 dark:hover:bg-gray-700 hover:cursor-pointer"

diff --git a/docs/data/base/components/focus-trap/PortalFocusTrap.js b/docs/data/base/components/focus-trap/PortalFocusTrap.js
@@ -38,7 +38,6 @@ export default function PortalFocusTrap() {
           </Box>
         </FocusTrap>
       )}
-
       <div ref={setContainer} />
     </Box>
   );

diff --git a/docs/data/joy/components/autocomplete/FixedTags.js b/docs/data/joy/components/autocomplete/FixedTags.js
@@ -18,7 +18,7 @@ export default function FixedTags() {
         onChange={(event, newValue) => {
           setValue([
             ...fixedOptions,
-            ...newValue.filter((option) => fixedOptions.indexOf(option) === -1),
+            ...newValue.filter((option) => !fixedOptions.includes(option)),
           ]);
         }}
         options={top100Films}
@@ -30,7 +30,7 @@ export default function FixedTags() {
               color="neutral"
               sx={{ minWidth: 0 }}
               {...getTagProps({ index })}
-              disabled={fixedOptions.indexOf(option) !== -1}
+              disabled={fixedOptions.includes(option)}
             >
               {option.title}
             </Chip>

diff --git a/docs/data/joy/components/autocomplete/FixedTags.tsx b/docs/data/joy/components/autocomplete/FixedTags.tsx
@@ -18,7 +18,7 @@ export default function FixedTags() {
         onChange={(event, newValue) => {
           setValue([
             ...fixedOptions,
-            ...newValue.filter((option) => fixedOptions.indexOf(option) === -1),
+            ...newValue.filter((option) => !fixedOptions.includes(option)),
           ]);
         }}
         options={top100Films}
@@ -30,7 +30,7 @@ export default function FixedTags() {
               color="neutral"
               sx={{ minWidth: 0 }}
               {...getTagProps({ index })}
-              disabled={fixedOptions.indexOf(option) !== -1}
+              disabled={fixedOptions.includes(option)}
             >
               {option.title}
             </Chip>

diff --git a/docs/data/joy/components/autocomplete/FreeSoloCreateOption.js b/docs/data/joy/components/autocomplete/FreeSoloCreateOption.js
@@ -69,7 +69,6 @@ export default function FreeSoloCreateOption() {
                 <Add />
               </ListItemDecorator>
             )}
-
             {option.title}
           </AutocompleteOption>
         )}

diff --git a/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js b/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js
@@ -34,7 +34,6 @@ export default function ExampleChoiceChipCheckbox() {
                     sx={{ ml: -0.5, zIndex: 2, pointerEvents: 'none' }}
                   />
                 )}
-
                 <Checkbox
                   size="sm"
                   disabled={index === 0}

diff --git a/docs/data/joy/components/input/InputSubscription.js b/docs/data/joy/components/input/InputSubscription.js
@@ -63,7 +63,6 @@ export default function InputSubscription() {
             Oops! something went wrong, please try again later.
           </FormHelperText>
         )}
-
         {data.status === 'sent' && (
           <FormHelperText
             sx={(theme) => ({ color: theme.vars.palette.primary[400] })}

diff --git a/docs/data/joy/components/radio-button/ExampleAlignmentButtons.js b/docs/data/joy/components/radio-button/ExampleAlignmentButtons.js
@@ -17,6 +17,7 @@ export default function ExampleAlignmentButtons() {
       variant="outlined"
       value={alignment}
       onChange={(event) => setAlignment(event.target.value)}
+      sx={{ display: 'inline-flex' }}
     >
       {['left', 'center', 'right', 'justify'].map((item) => (
         <Box

diff --git a/docs/data/joy/components/radio-button/ExampleAlignmentButtons.tsx b/docs/data/joy/components/radio-button/ExampleAlignmentButtons.tsx
@@ -19,6 +19,7 @@ export default function ExampleAlignmentButtons() {
       onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
         setAlignment(event.target.value)
       }
+      sx={{ display: 'inline-flex' }}
     >
       {['left', 'center', 'right', 'justify'].map((item) => (
         <Box

diff --git a/docs/data/joy/components/table/TableSortAndSelection.js b/docs/data/joy/components/table/TableSortAndSelection.js
@@ -218,7 +218,6 @@ function EnhancedTableToolbar(props) {
           Nutrition
         </Typography>
       )}
-
       {numSelected > 0 ? (
         <Tooltip title="Delete">
           <IconButton size="sm" color="danger" variant="solid">
@@ -291,7 +290,6 @@ export default function TableSortAndSelection() {
       ? rows.length
       : Math.min(rows.length, (page + 1) * rowsPerPage);
   };
-  const isSelected = (name) => selected.indexOf(name) !== -1;
   // Avoid a layout jump when reaching the last page with empty rows.
   const emptyRows =
     page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
@@ -330,7 +328,7 @@ export default function TableSortAndSelection() {
             .sort(getComparator(order, orderBy))
             .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
             .map((row, index) => {
-              const isItemSelected = isSelected(row.name);
+              const isItemSelected = selected.includes(row.name);
               const labelId = `enhanced-table-checkbox-${index}`;
 
               return (

diff --git a/docs/data/joy/components/table/TableSortAndSelection.tsx b/docs/data/joy/components/table/TableSortAndSelection.tsx
@@ -331,7 +331,6 @@ export default function TableSortAndSelection() {
       ? rows.length
       : Math.min(rows.length, (page + 1) * rowsPerPage);
   };
-  const isSelected = (name: string) => selected.indexOf(name) !== -1;
   // Avoid a layout jump when reaching the last page with empty rows.
   const emptyRows =
     page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
@@ -370,7 +369,7 @@ export default function TableSortAndSelection() {
             .sort(getComparator(order, orderBy))
             .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
             .map((row, index) => {
-              const isItemSelected = isSelected(row.name);
+              const isItemSelected = selected.includes(row.name);
               const labelId = `enhanced-table-checkbox-${index}`;
 
               return (

diff --git a/docs/data/joy/components/toggle-button-group/ToggleGroupToolbar.js b/docs/data/joy/components/toggle-button-group/ToggleGroupToolbar.js
@@ -22,7 +22,7 @@ export default function ToggleGroupToolbar() {
   return (
     <Sheet
       variant="outlined"
-      sx={{ borderRadius: 'md', display: 'flex', gap: 2, p: 0.5 }}
+      sx={{ borderRadius: 'md', display: 'inline-flex', gap: 2, p: 0.5 }}
     >
       <ToggleButtonGroup
         variant="plain"

diff --git a/docs/data/joy/components/toggle-button-group/ToggleGroupToolbar.tsx b/docs/data/joy/components/toggle-button-group/ToggleGroupToolbar.tsx
@@ -22,7 +22,7 @@ export default function ToggleGroupToolbar() {
   return (
     <Sheet
       variant="outlined"
-      sx={{ borderRadius: 'md', display: 'flex', gap: 2, p: 0.5 }}
+      sx={{ borderRadius: 'md', display: 'inline-flex', gap: 2, p: 0.5 }}
     >
       <ToggleButtonGroup
         variant="plain"

diff --git a/docs/data/material/components/app-bar/BottomAppBar.js b/docs/data/material/components/app-bar/BottomAppBar.js
@@ -93,13 +93,11 @@ export default function BottomAppBar() {
                   Today
                 </ListSubheader>
               )}
-
               {id === 3 && (
                 <ListSubheader sx={{ bgcolor: 'background.paper' }}>
                   Yesterday
                 </ListSubheader>
               )}
-
               <ListItemButton>
                 <ListItemAvatar>
                   <Avatar alt="Profile Picture" src={person} />

diff --git a/docs/data/material/components/autocomplete/FixedTags.js b/docs/data/material/components/autocomplete/FixedTags.js
@@ -15,7 +15,7 @@ export default function FixedTags() {
       onChange={(event, newValue) => {
         setValue([
           ...fixedOptions,
-          ...newValue.filter((option) => fixedOptions.indexOf(option) === -1),
+          ...newValue.filter((option) => !fixedOptions.includes(option)),
         ]);
       }}
       options={top100Films}
@@ -28,7 +28,7 @@ export default function FixedTags() {
               key={key}
               label={option.title}
               {...tagProps}
-              disabled={fixedOptions.indexOf(option) !== -1}
+              disabled={fixedOptions.includes(option)}
             />
           );
         })

diff --git a/docs/data/material/components/autocomplete/FixedTags.tsx b/docs/data/material/components/autocomplete/FixedTags.tsx
@@ -15,7 +15,7 @@ export default function FixedTags() {
       onChange={(event, newValue) => {
         setValue([
           ...fixedOptions,
-          ...newValue.filter((option) => fixedOptions.indexOf(option) === -1),
+          ...newValue.filter((option) => !fixedOptions.includes(option)),
         ]);
       }}
       options={top100Films}
@@ -28,7 +28,7 @@ export default function FixedTags() {
               key={key}
               label={option.title}
               {...tagProps}
-              disabled={fixedOptions.indexOf(option) !== -1}
+              disabled={fixedOptions.includes(option)}
             />
           );
         })

diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md
@@ -175,6 +175,8 @@ The `useAutocomplete` hook is also reexported from @mui/material for convenience
 import useAutocomplete from '@mui/material/useAutocomplete';
 ```
 
+- 📦 [4.6 kB gzipped](https://bundlephobia.com/package/@mui/material).
+
 {{"demo": "UseAutocomplete.js", "defaultCodeOpen": false}}
 
 ### Customized hook
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,7 +38,6 @@ export default function PortalFocusTrap() { @@
               </Box>
             </FocusTrap>
           )}
           <div ref={setContainer} />
         </Box>
       );
@@ Expand Down @@