Merge branch 'master' into renovate/react-error-boundary-5.x

mui · Jan 16, 2025 · 9fec7f5 · 9fec7f5
2 parents d25c601 + bc483df
commit 9fec7f5
Show file tree

Hide file tree

Showing 52 changed files with 1,067 additions and 695 deletions.
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@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/init@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1
         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@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/analyze@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1
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@1b1b1fcde06a9b3d089f3464c96417961dde1168 # v3.0.2
+        uses: eps1lon/actions-label-merge-conflict@1df065ebe6e3310545d4f4c4e862e43bdca146f0 # v3.0.3
         with:
           dirtyLabel: 'PR: out-of-date'
           removeOnDirtyLabel: 'PR: ready to ship'

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@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/upload-sarif@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1
         with:
           sarif_file: results.sarif
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,54 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.0
+
+<!-- generated comparing v6.3.1..master -->
+
+_Jan 13, 2025_
+
+A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
+
+- Added [`loading` prop](https://mui.com/material-ui/react-button/#loading-2) to the `Button` and `IconButton` components (#44637) @siriwatknp
+
+### `@mui/[email protected]`
+
+- [Alert] complete `slots` and `slotProps` (#44971) @siriwatknp
+- [Autocomplete] Sync runtime and TS types for key in grouped options (#44862) @aarongarciah
+- [Button] Add `loading` prop (#44637) @siriwatknp
+- [CardHeader] Deprecate `*TypographyProps` and complete `slots`, `slotProps` (#44729) @siriwatknp
+- [CircularProgress] Improve indeterminate animation to be symmetric and smooth (#44934) @yashdev16
+- [LinearProgress] Deprecate composed classes (#44933) @headironc
+- [Link] Fix error for using custom palette with underline (#44927) @siriwatknp
+- [Select] Do not set `aria-controls` when closed (#44919) @siddhantantil39
+- [Select] Add missing root class (#44928) @sai6855
+- [Slider] Set onChangeCommitted to receive the last argument passed to onChange (#44795) @good-jinu
+- Add `mergeSlotProps` for extending components (#44809) @siriwatknp
+- Update `mergeSlotProps` to merge `style` (#44959) @siriwatknp
+- Fix slots typing for Tooltip and StepLabel (#44985) @siriwatknp
+- Remove unnecessary blank lines (#44980) @sai6855
+
+### Docs
+
+- [docs] Fix Dashboard sidenav sroll (#44876) @oliviertassinari
+- [docs] Fix broken anchor link to w3.org (c51af8e) @oliviertassinari
+- [docs] Add details on complementary Menu components (#44957) @samuelsycamore
+- [docs] Remove misleading messaging on MD3 support (#44953) @mnajdova
+- [docs] Fix code copy button obscuring on small screen sizes (#44861) @ZeeshanTamboli
+- [docs] Remove more instances of Adobe XD (#44956) @samuelsycamore
+- [docs] Remove Adobe XD chips, links, and mentions (#44909) @samuelsycamore
+- [docs] Fix incorrect rendering in Typography docs (#44937) @iaziz11
+
+### Core
+
+- [core] Remove redundant screenshots (#44877) @oliviertassinari
+- [core] Remove Suspense and clock mocking from regressions and e2e tests (#44935) @DiegoAndai
+- [code-infra] Allow react@18 on `@mui/internal-test-utils` (#45023) @LukasTy
+- [code-infra] Stabilize flaky pigment progressbar tests (#44969) @Janpot
+- [example] Update the CDN example to adapt React 19. (#44979) @IceOfSummer
+- [figma] Clarify that Material UI Sync plugin is experimental (#44975) @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @DiegoAndai, @good-jinu, @headironc, @iaziz11, @IceOfSummer, @Janpot, @LukasTy, @mnajdova, @oliviertassinari, @sai6855, @samuelsycamore, @siddhantantil39, @siriwatknp, @yashdev16, @ZeeshanTamboli
+
 ## 6.3.1
 
 <!-- generated comparing v6.3.0..master -->

diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
@@ -28,7 +28,7 @@
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.2",
     "eslint": "^8.57.1",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.3"
   },
   "nx": {
     "targets": {

diff --git a/docs/data/about/teamMembers.json b/docs/data/about/teamMembers.json
@@ -274,14 +274,6 @@
     "about": "A general knowledge gatherer. Gamer and programmer in the off hours.",
     "github": "JCQuintas"
   },
-  {
-    "name": "Arthur Balduini",
-    "title": "React Engineer - X",
-    "location": "Paris, France",
-    "locationCountry": "fr",
-    "about": "Cooking 🍳, plant caring 🪴 and literature 📖.",
-    "github": "arthurbalduini"
-  },
   {
     "name": "Kenan Yusuf",
     "title": "Design Engineer - X",

diff --git a/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -1499,6 +1499,28 @@ The Modal's `componentsProps` prop was deprecated in favor of `slotProps`:
  >
 ```
 
+### BackdropProps
+
+The Modal's `BackdropProps` prop was deprecated in favor of `slotProps.backdrop`:
+
+```diff
+ <Modal
+-  BackdropProps={{ timeout: 500 }}
++  slotProps={{ backdrop: { timeout: 500 } }}
+ >
+```
+
+### BackdropComponent
+
+The Modal's `BackdropComponent` prop was deprecated in favor of `slots.backdrop`:
+
+```diff
+ <Modal
+-  BackdropComponent={Backdrop}
++  slots={{ backdrop: Backdrop }}
+ >
+```
+
 ## OutlinedInput
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#outlined-input-props) below to migrate the code as described in the following sections:

diff --git a/docs/package.json b/docs/package.json
@@ -43,18 +43,18 @@
     "@mui/system": "workspace:^",
     "@mui/types": "workspace:^",
     "@mui/utils": "workspace:^",
-    "@mui/x-charts": "7.23.2",
-    "@mui/x-data-grid": "7.23.5",
-    "@mui/x-data-grid-generator": "7.23.5",
-    "@mui/x-data-grid-premium": "7.23.5",
-    "@mui/x-data-grid-pro": "7.23.5",
-    "@mui/x-date-pickers": "7.23.3",
-    "@mui/x-date-pickers-pro": "7.23.3",
-    "@mui/x-license": "7.23.5",
-    "@mui/x-tree-view": "7.23.2",
+    "@mui/x-charts": "7.23.6",
+    "@mui/x-data-grid": "7.23.6",
+    "@mui/x-data-grid-generator": "7.23.6",
+    "@mui/x-data-grid-premium": "7.23.6",
+    "@mui/x-data-grid-pro": "7.23.6",
+    "@mui/x-date-pickers": "7.23.6",
+    "@mui/x-date-pickers-pro": "7.23.6",
+    "@mui/x-license": "7.23.6",
+    "@mui/x-tree-view": "7.23.6",
     "@popperjs/core": "^2.11.8",
     "@react-spring/web": "^9.7.5",
-    "@toolpad/core": "^0.11.0",
+    "@toolpad/core": "^0.12.0",
     "autoprefixer": "^10.4.20",
     "autosuggest-highlight": "^3.3.4",
     "babel-plugin-module-resolver": "^5.0.2",
@@ -80,9 +80,9 @@
     "jss-rtl": "^0.3.0",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
-    "markdown-to-jsx": "^7.7.2",
+    "markdown-to-jsx": "^7.7.3",
     "material-ui-popup-state": "^5.3.3",
-    "next": "^15.1.3",
+    "next": "^15.1.4",
     "notistack": "3.0.1",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.49",
@@ -135,7 +135,7 @@
     "chai": "^4.5.0",
     "cross-fetch": "^4.1.0",
     "gm": "^1.25.0",
-    "marked": "^15.0.5",
+    "marked": "^15.0.6",
     "playwright": "^1.48.2",
     "prettier": "^3.4.2",
     "tailwindcss": "^3.4.17",

diff --git a/docs/pages/material-ui/api/dialog.json b/docs/pages/material-ui/api/dialog.json
@@ -41,46 +41,91 @@
       }
     },
     "PaperComponent": { "type": { "name": "elementType" }, "default": "Paper" },
-    "PaperProps": { "type": { "name": "object" }, "default": "{}" },
+    "PaperProps": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.paper</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "scroll": {
       "type": { "name": "enum", "description": "'body'<br>&#124;&nbsp;'paper'" },
       "default": "'paper'"
     },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ backdrop?: func<br>&#124;&nbsp;object, container?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ backdrop?: elementType, container?: elementType, paper?: elementType, root?: elementType, transition?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
         "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
       },
       "additionalInfo": { "sx": true }
     },
-    "TransitionComponent": { "type": { "name": "elementType" }, "default": "Fade" },
+    "TransitionComponent": {
+      "type": { "name": "elementType" },
+      "default": "Fade",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slots.transition</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "transitionDuration": {
       "type": {
         "name": "union",
         "description": "number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }"
       },
       "default": "{\n  enter: theme.transitions.duration.enteringScreen,\n  exit: theme.transitions.duration.leavingScreen,\n}"
     },
-    "TransitionProps": { "type": { "name": "object" } }
+    "TransitionProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.transition</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    }
   },
   "name": "Dialog",
   "imports": [
     "import Dialog from '@mui/material/Dialog';",
     "import { Dialog } from '@mui/material';"
   ],
-  "classes": [
+  "slots": [
     {
-      "key": "container",
-      "className": "MuiDialog-container",
-      "description": "Styles applied to the container element.",
-      "isGlobal": false
+      "name": "transition",
+      "description": "The component that renders the transition.\n[Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
+      "default": "Collapse",
+      "class": null
     },
     {
-      "key": "paper",
-      "className": "MuiDialog-paper",
-      "description": "Styles applied to the Paper component.",
-      "isGlobal": false
+      "name": "paper",
+      "description": "The component that renders the paper.",
+      "default": "Paper",
+      "class": "MuiDialog-paper"
+    },
+    {
+      "name": "container",
+      "description": "The component that renders the container.",
+      "class": "MuiDialog-container"
     },
+    {
+      "name": "backdrop",
+      "description": "The component that renders the backdrop.",
+      "class": null
+    },
+    {
+      "name": "root",
+      "description": "The component that renders the root.",
+      "class": "MuiDialog-root"
+    }
+  ],
+  "classes": [
     {
       "key": "paperFullScreen",
       "className": "MuiDialog-paperFullScreen",
@@ -141,12 +186,6 @@
       "description": "Styles applied to the Paper component if `maxWidth=\"xs\"`.",
       "isGlobal": false
     },
-    {
-      "key": "root",
-      "className": "MuiDialog-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
-    },
     {
       "key": "scrollBody",
       "className": "MuiDialog-scrollBody",

diff --git a/docs/src/components/about/Team.tsx b/docs/src/components/about/Team.tsx
@@ -235,6 +235,16 @@ const contributors = [
     locationCountry: 'ie',
     src: 'https://avatars.githubusercontent.com/u/12678455',
   },
+  {
+    name: 'Zeeshan Tamboli',
+    github: 'ZeeshanTamboli',
+    location: 'Pune, India',
+    locationCountry: 'in',
+    title: 'Material UI, MUI X',
+    src: 'https://avatars.githubusercontent.com/u/20900032',
+    twitter: 'ZeeshanTamboli',
+    linkedin: 'in/zeeshantamboli',
+  },
 ];
 
 const emeriti = [

diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled, alpha, lighten } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import ExpandIcon from '@mui/icons-material/ExpandMore';
-import CollapseIcon from '@mui/icons-material/ChevronRight';
+import ChevronDownIcon from '@mui/icons-material/ExpandMoreRounded';
+import ChevronRightIcon from '@mui/icons-material/ChevronRightRounded';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem as MuiTreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
 import { blue, blueDark } from '@mui/docs/branding';
@@ -202,8 +202,8 @@ export default function ThemeViewer({
     <SimpleTreeView
       key={key}
       slots={{
-        expandIcon: ExpandIcon,
-        collapseIcon: CollapseIcon,
+        expandIcon: ChevronRightIcon,
+        collapseIcon: ChevronDownIcon,
         endIcon: CustomEndIcon,
       }}
       defaultExpandedItems={defaultExpanded}

diff --git a/docs/translations/api-docs/dialog/dialog.json b/docs/translations/api-docs/dialog/dialog.json
@@ -35,6 +35,8 @@
       "description": "Props applied to the <a href=\"https://mui.com/material-ui/api/paper/\"><code>Paper</code></a> element."
     },
     "scroll": { "description": "Determine the container for scrolling the dialog." },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -49,14 +51,6 @@
     }
   },
   "classDescriptions": {
-    "container": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the container element"
-    },
-    "paper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Paper component"
-    },
     "paperFullScreen": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Paper component",
@@ -107,7 +101,6 @@
       "nodeName": "the Paper component",
       "conditions": "<code>maxWidth=\"xs\"</code>"
     },
-    "root": { "description": "Styles applied to the root element." },
     "scrollBody": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the container element",
@@ -118,5 +111,12 @@
       "nodeName": "the container element",
       "conditions": "<code>scroll=\"paper\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "backdrop": "The component that renders the backdrop.",
+    "container": "The component that renders the container.",
+    "paper": "The component that renders the paper.",
+    "root": "The component that renders the root.",
+    "transition": "The component that renders the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }