Merge branch 'master' into master

Signed-off-by: Kanav <[email protected]>
mui · Jan 9, 2025 · 0631429 · 0631429
2 parents 17a8b07 + 088bfa8
commit 0631429
Show file tree

Hide file tree

Showing 106 changed files with 2,401 additions and 863 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -897,6 +897,57 @@ workflows:
   #         react-version: ^17.0.0
   #         name: test_e2e-react@17
 
+  # This workflow can be triggered manually on the PR
+  react-18:
+    when:
+      equal: [react-18, << pipeline.parameters.workflow >>]
+    jobs:
+      - test_unit:
+          <<: *default-context
+          react-version: ^18.0.0
+          name: test_unit-react@18
+      - test_browser:
+          <<: *default-context
+          react-version: ^18.0.0
+          name: test_browser-react@18
+      - test_regressions:
+          <<: *default-context
+          react-version: ^18.0.0
+          name: test_regressions-react@18
+      - test_e2e:
+          <<: *default-context
+          react-version: ^18.0.0
+          name: test_e2e-react@18
+
+  # This workflow is identical to react-18, but scheduled
+  react-18-cron:
+    triggers:
+      - schedule:
+          cron: '0 0 * * *'
+          filters:
+            branches:
+              only:
+                - master
+                - next
+                - v5.x
+    jobs:
+      - test_unit:
+          <<: *default-context
+          react-version: ^18.0.0
+          name: test_unit-react@18
+      - test_browser:
+          <<: *default-context
+          react-version: ^18.0.0
+          name: test_browser-react@18
+      - test_regressions:
+          <<: *default-context
+          react-version: ^18.0.0
+          name: test_regressions-react@18
+      - test_e2e:
+          <<: *default-context
+          react-version: ^18.0.0
+          name: test_e2e-react@18
+
   # This workflow can be triggered manually on the PR
   react-next:
     when:

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@df409f7d9260372bd5f19e5b04e83cb3c43714ae # v3.27.9
+        uses: github/codeql-action/init@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
         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@df409f7d9260372bd5f19e5b04e83cb3c43714ae # v3.27.9
+        uses: github/codeql-action/analyze@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml
@@ -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@df409f7d9260372bd5f19e5b04e83cb3c43714ae # v3.27.9
+        uses: github/codeql-action/upload-sarif@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
         with:
           sarif_file: results.sarif
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,41 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.3.1
+
+<!-- generated comparing v6.3.0..master -->
+
+_Jan 3, 2025_
+
+A big thanks to the 8 contributors who made this release possible.
+
+### `@mui/[email protected]`
+
+- [Autocomplete] Revert: Fix options list rendering in freeSolo mode (#44858) @ZeeshanTamboli
+- [Tooltip] Warn instead of error when trigger is disabled (#44846) @yash49
+- [TableSortLabel] Add slots and slotProps (#44728) @sai6855
+- [Select] Deprecate composed classes (#44925) @sai6855
+
+### Docs
+
+- [material-ui][Accordion] Update `Anatomy` section in Accordion docs (#44849) @ZeeshanTamboli
+- [material-ui][CardActionArea] Added demo in docs of cards for adding props to CardActionArea (#44789) @siddhantantil39
+- [material-ui][Grid2] Add interactive demo for Grid v2 (#44820) @yash49
+- [material-ui][Select] Update docs to reflect the omission of placeholder prop (#44856) @adityaparab
+- [joy-ui] Fix Color mode button on Theme builder (#44864) @komkanit
+- Fix 301 redirections @oliviertassinari
+
+### Core
+
+- [examples] Update Next.js examples Next.js and React versions (#44852) @DiegoAndai
+- [code-infra] Prevent wrong nested imports in Base UI (#44426) @oliviertassinari
+- [docs-infra] Add vale coverage for App Router and Page Router (060c55c) @oliviertassinari
+- Sync with other repos (1b9300f) @oliviertassinari
+- Fix docs:build to work in docs folder too (6b923a4) @oliviertassinari
+- Setup React 18 CI tests (#44868) @DiegoAndai
+- Update test to use public API (#44875) @oliviertassinari
+
+All contributors of this release in alphabetical order: @adityaparab, @DiegoAndai, @komkanit, @oliviertassinari, @sai6855, @siddhantantil39, @yash49, @ZeeshanTamboli
+
 ## 6.3.0
 
 <!-- generated comparing v6.2.1..master -->

diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@pigment-css/nextjs-plugin": "0.0.29",
-    "@types/node": "^20.17.10",
+    "@types/node": "^20.17.12",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "eslint": "^8.57.1",

diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-progress.tsx
@@ -1,4 +1,7 @@
 import * as React from 'react';
+import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgress';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
 import MaterialUILayout from '../../Layout';
 import CircularColor from '../../../../../docs/data/material/components/progress/CircularColor.tsx';
 import CircularDeterminate from '../../../../../docs/data/material/components/progress/CircularDeterminate.tsx';
@@ -9,9 +12,23 @@ import CircularWithValueLabel from '../../../../../docs/data/material/components
 import CustomizedProgressBars from '../../../../../docs/data/material/components/progress/CustomizedProgressBars.tsx';
 import DelayingAppearance from '../../../../../docs/data/material/components/progress/DelayingAppearance.tsx';
 import LinearColor from '../../../../../docs/data/material/components/progress/LinearColor.tsx';
-import LinearDeterminate from '../../../../../docs/data/material/components/progress/LinearDeterminate.tsx';
 import LinearIndeterminate from '../../../../../docs/data/material/components/progress/LinearIndeterminate.tsx';
-import LinearWithValueLabel from '../../../../../docs/data/material/components/progress/LinearWithValueLabel.tsx';
+
+function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography
+          variant="body2"
+          sx={{ color: 'text.secondary' }}
+        >{`${Math.round(props.value)}%`}</Typography>
+      </Box>
+    </Box>
+  );
+}
 
 export default function Progress() {
   return (
@@ -65,6 +82,14 @@ export default function Progress() {
           <DelayingAppearance />
         </div>
       </section>
+      <section>
+        <h2> Linear Buffer</h2>
+        <div className="demo-container">
+          <Box sx={{ width: '100%' }}>
+            <LinearProgress variant="buffer" value={10} valueBuffer={30} />
+          </Box>
+        </div>
+      </section>
       <section>
         <h2> Linear Color</h2>
         <div className="demo-container">
@@ -74,7 +99,9 @@ export default function Progress() {
       <section>
         <h2> Linear Determinate</h2>
         <div className="demo-container">
-          <LinearDeterminate />
+          <Box sx={{ width: '100%' }}>
+            <LinearProgress variant="determinate" value={10} />
+          </Box>
         </div>
       </section>
       <section>
@@ -86,7 +113,9 @@ export default function Progress() {
       <section>
         <h2> Linear With Value Label</h2>
         <div className="demo-container">
-          <LinearWithValueLabel />
+          <Box sx={{ width: '100%' }}>
+            <LinearProgressWithLabel value={10} />
+          </Box>
         </div>
       </section>
     </MaterialUILayout>

diff --git a/benchmark/package.json b/benchmark/package.json
@@ -31,12 +31,12 @@
     "react-dom": "^19.0.0",
     "react-is": "^19.0.0",
     "react-jss": "^10.10.0",
-    "react-redux": "^9.1.2",
+    "react-redux": "^9.2.0",
     "redux": "^5.0.1",
     "serve-handler": "^6.1.6",
-    "styled-components": "^6.1.13",
+    "styled-components": "^6.1.14",
     "styled-system": "^5.1.5",
     "theme-ui": "^0.17.1",
-    "webpack": "^5.96.1"
+    "webpack": "^5.97.1"
   }
 }
diff --git a/docs/data/material/components/menus/menus.md b/docs/data/material/components/menus/menus.md
@@ -17,13 +17,19 @@ A menu displays a list of choices on a temporary surface. It appears when the us
 
 {{"component": "@mui/docs/ComponentLinkHeader"}}
 
+## Introduction
+
+Menus are implemented using a collection of related components:
+
+- Menu: The container/surface of the menu.
+- Menu Item: An option for users to select from the menu.
+- Menu List (optional): Alternative composable container for Menu Items—see [Composition with Menu List](#composition-with-menu-list) for details.
+
 ## Basic menu
 
 A basic menu opens over the anchor element by default (this option can be [changed](#menu-positioning) via props). When close to a screen edge, a basic menu vertically realigns to make sure that all menu items are completely visible.
 
-Choosing an option should immediately ideally commit the option and close the menu.
-
-**Disambiguation**: In contrast to simple menus, simple dialogs can present additional detail related to the options available for a list item or provide navigational or orthogonal actions related to the primary task. Although they can display the same content, simple menus are preferred over simple dialogs because simple menus are less disruptive to the user's current context.
+You should configure the component so that selecting an option immediately confirms it and closes the menu, as shown in the demo below.
 
 {{"demo": "BasicMenu.js"}}
 
@@ -54,13 +60,13 @@ For instance, you can display the menu on top of the anchor:
 
 {{"demo": "PositionedMenu.js"}}
 
-## MenuList composition
+## Composition with Menu List
 
-The `Menu` component uses the `Popover` component internally.
-However, you might want to use a different positioning strategy, or not blocking the scroll.
-For answering those needs, we expose a `MenuList` component that you can compose, with `Popper` in this example.
+The Menu component uses the Popover component internally.
+But you might want to use a different positioning strategy, or prefer not to block scrolling, for example.
 
-The primary responsibility of the `MenuList` component is to handle the focus.
+The Menu List component lets you compose your own menu for these kinds of use cases—its primary purpose is to handle focus.
+See the demo below for an example of composition that uses Menu List and replaces the Menu's default Popover with a Popper component instead:
 
 {{"demo": "MenuListComposition.js", "bg": true}}
 

diff --git a/docs/data/material/components/popper/popper.md b/docs/data/material/components/popper/popper.md
@@ -20,7 +20,7 @@ Some important features of the Popper component:
 - The scroll isn't blocked like with the [Popover](/material-ui/react-popover/) component.
   The placement of the popper updates with the available area in the viewport.
 - Clicking away does not hide the Popper component.
-  If you need this behavior, you can use the [Base UI Click-Away Listener](/base-ui/react-click-away-listener/) - see the example in the [menu documentation section](/material-ui/react-menu/#menulist-composition).
+  If you need this behavior, you can use the [Base UI Click-Away Listener](/base-ui/react-click-away-listener/) - see the example in the [menu documentation section](/material-ui/react-menu/#composition-with-menu-list).
 - The `anchorEl` is passed as the reference object to create a new `Popper.js` instance.
 
 {{"component": "@mui/docs/ComponentLinkHeader", "design": false}}

diff --git a/docs/data/material/components/typography/typography.md b/docs/data/material/components/typography/typography.md
@@ -49,7 +49,7 @@ Fontsource can be configured to load specific subsets, weights, and styles. Mate
 
 ### Google Web Fonts
 
-To install Roboto through the Google Web Fonts CDN, add the following code inside your project's <head /> tag:
+To install Roboto through the Google Web Fonts CDN, add the following code inside your project's `<head />` tag:
 
 ```html
 <link rel="preconnect" href="https://fonts.googleapis.com" />

diff --git a/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md b/docs/data/material/design-resources/material-ui-sync/material-ui-sync.md
@@ -1,18 +1,19 @@
-# Material UI Sync plugin
+# Material UI Sync plugin 🧪
 
 <p class="description">Sync is a Figma plugin that generates Material UI themes directly from design to code.</p>
 
+:::warning
+This plugin is experimental.
+:::
+
 ## Introduction
 
 [Material UI Sync](https://www.figma.com/community/plugin/1336346114713490235/material-ui-sync) is a Figma plugin that lets you generate a theme from the [Material UI for Figma Design Kit](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x).
 
-:::warning
-Sync works in combination with the [Material UI for Figma Design Kit v5.16.0](https://github.com/mui/mui-design-kits/releases) and later.
-Other kits, such as the Joy UI Design Kit, are not supported yet.
-:::
-
 <img src="/static/material-ui/design-resources/sync.png" style="width: 814px;" alt="Customizing the Material UI Switch component in Figma with the Sync plugin running." width="1628" height="400" />
 
+Sync works in combination with the [Material UI for Figma Design Kit v5.16.0](https://github.com/mui/mui-design-kits/releases) and later.
+
 ## Running the plugin
 
 If you don't have the [complete and latest version](/store/items/figma-react/) of the Material UI for Figma Design Kit installed, you can test the plugin by using the [Community version](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x) instead.

diff --git a/docs/data/material/getting-started/design-resources/design-resources.md b/docs/data/material/getting-started/design-resources/design-resources.md
@@ -4,7 +4,7 @@
 
 ## Design Kits
 
-Material UI component designs are available for Figma, Sketch, and Adobe XD, providing accurate representations using shared terminology for all states, variants, and permutations of each component.
+Material UI component designs are available for Figma and Sketch, providing accurate representations using shared terminology for all states, variants, and permutations of each component.
 
 The design kits are composed of over 1,500 unique elements built to speed up the development process and ease communication for teams of designers and developers using the library.
 

diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md
@@ -14,8 +14,7 @@ It includes a comprehensive collection of prebuilt components that are ready for
 
 :::info
 Material UI v6 supports Material Design 2.
-Adoption of Material Design 3 is tentatively planned for a future Material UI version.
-You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/29345) for future updates.
+You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/29345) for future design-related updates.
 :::
 
 ## Advantages of Material UI

diff --git a/docs/data/material/guides/composition/composition.md b/docs/data/material/guides/composition/composition.md
@@ -22,6 +22,53 @@ WrappedIcon.muiName = Icon.muiName;
 
 {{"demo": "Composition.js"}}
 
+### Forwarding slot props
+
+Use the `mergeSlotProps` utility function to merge custom props with the slot props.
+If the arguments are functions then they'll be resolved before merging, and the result from the first argument will override the second.
+
+```jsx
+import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
+import { mergeSlotProps } from '@mui/material/utils';
+
+export const CustomTooltip = (props: TooltipProps) => {
+  const { children, title, sx: sxProps } = props;
+
+  return (
+    <Tooltip
+      {...props}
+      title={<Box sx={{ p: 4 }}>{title}</Box>}
+      slotProps={{
+        ...props.slotProps,
+        popper: mergeSlotProps(props.slotProps?.popper, {
+          className: 'custom-tooltip-popper',
+          disablePortal: true,
+          placement: 'top',
+        }),
+      }}
+    >
+      {children}
+    </Tooltip>
+  );
+};
+```
+
+:::info
+`className` values are concatenated rather than overriding one another.
+In the snippet above, the `custom-tooltip-popper` class is applied to the Tooltip's popper slot.
+If you added another `className` via the `slotProps` prop on the Custom Tooltip—as shown below—then both would be present on the rendered popper slot:
+
+```js
+<CustomTooltip slotProps={{ popper: { className: 'foo' } }} />
+```
+
+The popper slot in the original example would now have both classes applied to it, in addition to any others that may be present: `"[…] custom-tooltip-popper foo"`.
+:::
+
+:::info
+`style` object are shallow merged rather than replacing one another. The style keys from the first argument have higher priority.
+:::
+
 ## Component prop
 
 Material UI allows you to change the root element that will be rendered via a prop called `component`.