Skip to content

Commit 36e9479

Browse files
siriwatknpsiriwatknp
authored
Merge branch 'master' into fix/merge-slot-props-fn
2 parents 0718ba0 + 260ed53 commit 36e9479

File tree

88 files changed

+2021
-1138
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+2021
-1138
lines changed

‎CHANGELOG.md

+60
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,65 @@
11
# [Versions](https://mui.com/versions/)
22

3+
## 7.0.0-beta.4
4+
5+
<!-- generated comparing v7.0.0-beta.3..master -->
6+
7+
_Mar 13, 2025_
8+
9+
A big thanks to the 10 contributors who made this release possible.
10+
This release contains bug fixes 🐛 and improvements to the new package layout 🏗️.
11+
12+
### `@mui/material@7.0.0-beta.4`
13+
14+
- [Accordion] Add missing `root` slot (#45532) @sai6855
15+
- [AccordionSummary] Add slots and slotProps (#45559) @sai6855
16+
- [ListItemText] Add missing `root` slot (#45540) @sai6855
17+
- [SpeedDial] Add missing `root` slot (#45541) @sai6855
18+
- [Tooltip] Allow auto placement on tooltip (#45399) @Jtaks
19+
- [useScrollTrigger] Do nothing if target is null (#45441) @vipierozan99
20+
- [TextareaAutosize] Fix ResizeObserver causing infinite `selectionchange` loop (#45351) @mj12albert
21+
- Fix negative input for CSS variables spacing array (#45550) @siriwatknp
22+
- Add missing deprecations in deprecations-all file (#45505) @sai6855
23+
- Rename some `@mui/material/styles/createTypography` exports (#45558) @Janpot
24+
25+
### `@mui/icons-material@7.0.0-beta.4`
26+
27+
- Remove unused icon names from the download script (#45453) @yermartee
28+
29+
### `@mui/system@7.0.0-beta.4`
30+
31+
- Prevent nested non-vars theme inheritance (#45545) @siriwatknp
32+
- Disable theme recalculation as default behavior (#45405) @siriwatknp
33+
- Fix package layout inconsistencies (#45491) @DiegoAndai
34+
35+
### `@mui/styled-engine@7.0.0-beta.4`
36+
37+
- Add `enableCssLayer` prop to StyledEngineProvider (#45428) @siriwatknp
38+
39+
### `@mui/types@7.3.0`
40+
41+
- [code-infra] Fix type resolution for @mui/types (#45513) @Janpot
42+
43+
### `@mui/utils@7.0.0-beta.4`
44+
45+
- Fix package layout inconsistencies (#45491) @DiegoAndai
46+
- Use correct iri-reference homepage format (#45472) @dahiro
47+
48+
### Docs
49+
50+
- [Backdrop] Fix component name in migration guide (#45506) @sai6855
51+
- [TextField] Add HTML input section to TextField page (#45439) @siriwatknp
52+
53+
### Core
54+
55+
- [code-infra] Convert a few docs modules to ts (#45548) @Janpot
56+
- [code-infra] Remove more CJS modules from the docs (#45557) @Janpot
57+
- [code-infra] Remove nested imports from theme augmentation (#45514) @Janpot
58+
- [docs-infra] Add @ts-ignore to avoid type checking for MUI X (#45555) @siriwatknp
59+
- [blog] Fix author end-of-year updates (#45533) @oliviertassinari
60+
61+
All contributors of this release in alphabetical order: @dahiro, @DiegoAndai, @Janpot, @Jtaks, @mj12albert, @oliviertassinari, @sai6855, @siriwatknp, @vipierozan99, @yermartee
62+
363
## 7.0.0-beta.3
464

565
<!-- generated comparing v7.0.0-beta.2..master -->

‎docs/data/joy/components/input/InputReactImask.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface CustomProps {
99
name: string;
1010
}
1111

12-
const TextMaskAdapter = React.forwardRef<HTMLElement, CustomProps>(
12+
const TextMaskAdapter = React.forwardRef<HTMLInputElement, CustomProps>(
1313
function TextMaskAdapter(props, ref) {
1414
const { onChange, ...other } = props;
1515
return (

‎docs/data/joy/pagesApi.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = [
1+
export default [
22
{ pathname: '/joy-ui/api/accordion' },
33
{ pathname: '/joy-ui/api/accordion-details' },
44
{ pathname: '/joy-ui/api/accordion-group' },

‎docs/data/material/customization/css-theme-variables/configuration.md

+10
Original file line numberDiff line numberDiff line change
@@ -307,3 +307,13 @@ To disable CSS transitions when switching between modes, apply the `disableTrans
307307
```
308308

309309
{{"demo": "DisableTransitionOnChange.js"}}
310+
311+
## Force theme recalculation between modes
312+
313+
By default, the `ThemeProvider` does not re-render when switching between light and dark modes when `cssVariables: true` is set in the theme.
314+
315+
If you want to opt-out from this behavior, use the `forceThemeRerender` prop in the ThemeProvider:
316+
317+
```js
318+
<ThemeProvider forceThemeRerender />
319+
```

‎docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ declare module '@mui/material/Paper' {
55
highlighted: true;
66
}
77
}
8-
declare module '@mui/material/styles/createPalette' {
8+
declare module '@mui/material/styles' {
99
interface ColorRange {
1010
50: string;
1111
100: string;

‎docs/data/material/migration/upgrade-to-v7/upgrade-to-v7.md

+103-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ To use the modern bundle (which excludes legacy browser support for smaller bund
5555
}
5656
```
5757

58-
If you were using a Vite alias to force ESM imports for the icons package, you should remove it as it's no longer necessary:
58+
If you are using a Vite alias to force ESM imports for the icons package, you should remove it as it's no longer necessary:
5959

6060
```diff
6161
// vite.config.js
@@ -69,6 +69,23 @@ If you were using a Vite alias to force ESM imports for the icons package, you s
6969
},
7070
```
7171

72+
If you are augmenting the theme and using declarations for nested imports, you should replace them with `@mui/material/styles`. You may also have to rename an interface as some are exported from `@mui/material/styles` under a different name:
73+
74+
```diff
75+
-declare module '@mui/material/styles/createTypography' {
76+
+declare module '@mui/material/styles' {
77+
- interface TypographyOptions {
78+
+ interface TypographyVariantsOptions {
79+
// ...
80+
}
81+
82+
- interface Typography {
83+
+ interface TypographyVariants {
84+
// ...
85+
}
86+
}
87+
```
88+
7289
### Grid and Grid2 renamed
7390

7491
The deprecated `Grid` component has been renamed to `GridLegacy`.
@@ -160,6 +177,91 @@ npx @mui/codemod@next v7.0.0/input-label-size-normal-medium <path/to/folder>
160177

161178
The default `data-testid` prop has been removed from the icons in `@mui/icons-material` in production bundles. This change ensures that the `data-testid` prop is only defined where needed, reducing the potential for naming clashes and removing unnecessary properties in production.
162179

180+
### Theme behavior changes
181+
182+
When CSS theme variables is enabled with built-in light and dark color schemes, the theme no longer changes between modes.
183+
The snippet below demonstrates this behavior when users toggle the dark mode, the `mode` state from `useColorScheme` changes, but the theme object no longer changes:
184+
185+
```js
186+
import {
187+
ThemeProvider,
188+
createTheme,
189+
useTheme,
190+
useColorScheme,
191+
} from '@mui/material/styles';
192+
193+
const theme = createTheme({
194+
cssVariables: {
195+
colorSchemeSelector: 'class',
196+
},
197+
colorSchemes: {
198+
light: true,
199+
dark: true,
200+
},
201+
});
202+
console.log(theme.palette.mode); // 'light' is the default mode
203+
204+
function ColorModeToggle() {
205+
const { setMode, mode } = useColorScheme();
206+
const theme = useTheme();
207+
208+
React.useEffect(() => {
209+
console.log(mode); // logged 'light' at first render, and 'dark' after the button click
210+
}, [mode]);
211+
212+
React.useEffect(() => {
213+
console.log(theme.palette.mode); // logged 'light' at first render, no log after the button click
214+
}, [theme]);
215+
216+
return <button onClick={() => setMode('dark')}>Toggle dark mode</button>;
217+
}
218+
219+
function App() {
220+
return (
221+
<ThemeProvider theme={theme}>
222+
<ColorModeToggle />
223+
</ThemeProvider>
224+
);
225+
}
226+
```
227+
228+
This default behavior was made to improve performance by avoiding unnecessary re-renders when the mode changes.
229+
230+
It's recommended to use the `theme.vars.*` as values in your styles to refer to the CSS variables directly:
231+
232+
```js
233+
const Custom = styled('div')(({ theme }) => ({
234+
color: theme.vars.palette.text.primary,
235+
background: theme.vars.palette.primary.main,
236+
}));
237+
```
238+
239+
If you need to do runtime calculations, we recommend using CSS instead of JavaScript whenever possible.
240+
For example, adjusting the alpha channel of a color can be done using the [`color-mix` function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix):
241+
242+
```js
243+
const Custom = styled('div')(({ theme }) => ({
244+
color: `color-mix(in srgb, ${theme.vars.palette.text.primary}, transparent 50%)`,
245+
}));
246+
```
247+
248+
However, if CSS approach is not possible, you can access the value directly from the `theme.colorSchemes` object, then apply both light and dark styles:
249+
250+
```js
251+
const Custom = styled('div')(({ theme }) => ({
252+
color: alpha(theme.colorSchemes.light.palette.text.primary, 0.5),
253+
...theme.applyStyles('dark', {
254+
color: alpha(theme.colorSchemes.dark.palette.text.primary, 0.5),
255+
}),
256+
}));
257+
```
258+
259+
If any of the methods above do not suit your project, you can opt out from this behavior by passing the `forceThemeRerender` prop to the ThemeProvider component:
260+
261+
```js
262+
<ThemeProvider forceThemeRerender />
263+
```
264+
163265
### Deprecated APIs removed
164266

165267
APIs that were deprecated in v5 have been removed in v7.

‎docs/data/material/pagesApi.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = [
1+
export default [
22
{ pathname: '/material-ui/api/accordion' },
33
{ pathname: '/material-ui/api/accordion-actions' },
44
{ pathname: '/material-ui/api/accordion-details' },

‎docs/data/system/pagesApi.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = [
1+
export default [
22
{ pathname: '/system/api/box' },
33
{ pathname: '/system/api/container' },
44
{ pathname: '/system/api/grid' },

‎docs/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@
125125
"@types/gtag.js": "^0.0.20",
126126
"@types/json2mq": "^0.2.2",
127127
"@types/node": "^20.17.24",
128+
"@types/nprogress": "^0.2.3",
128129
"@types/prop-types": "^15.7.14",
129130
"@types/react": "^19.0.10",
130131
"@types/react-dom": "^19.0.4",

‎docs/pages/blog/material-ui-2024-updates.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Material UI 2024 end-of-year updates
33
description: Recapping our biggest accomplishments for Material UI this year; plus, a look at what's to come in 2025.
44
date: 2024-12-11T00:00:00.000Z
5-
authors: ['diegoandai']
5+
authors: ['diegoandai', 'alelthomas']
66
tags: ['Material UI', 'Product']
77
manualCard: true
88
---

‎docs/pages/material-ui/api/accordion-summary.json

+33-17
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,20 @@
44
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
55
"expandIcon": { "type": { "name": "node" } },
66
"focusVisibleClassName": { "type": { "name": "string" } },
7+
"slotProps": {
8+
"type": {
9+
"name": "shape",
10+
"description": "{ content?: func<br>&#124;&nbsp;object, expandIconWrapper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
11+
},
12+
"default": "{}"
13+
},
14+
"slots": {
15+
"type": {
16+
"name": "shape",
17+
"description": "{ content?: elementType, expandIconWrapper?: elementType, root?: elementType }"
18+
},
19+
"default": "{}"
20+
},
721
"sx": {
822
"type": {
923
"name": "union",
@@ -17,13 +31,27 @@
1731
"import AccordionSummary from '@mui/material/AccordionSummary';",
1832
"import { AccordionSummary } from '@mui/material';"
1933
],
20-
"classes": [
34+
"slots": [
2135
{
22-
"key": "content",
23-
"className": "MuiAccordionSummary-content",
24-
"description": "Styles applied to the children wrapper element.",
25-
"isGlobal": false
36+
"name": "root",
37+
"description": "The component that renders the root slot.",
38+
"default": "ButtonBase",
39+
"class": "MuiAccordionSummary-root"
40+
},
41+
{
42+
"name": "content",
43+
"description": "The component that renders the content slot.",
44+
"default": "div",
45+
"class": "MuiAccordionSummary-content"
2646
},
47+
{
48+
"name": "expandIconWrapper",
49+
"description": "The component that renders the expand icon wrapper slot.",
50+
"default": "div",
51+
"class": "MuiAccordionSummary-expandIconWrapper"
52+
}
53+
],
54+
"classes": [
2755
{
2856
"key": "contentGutters",
2957
"className": "MuiAccordionSummary-contentGutters",
@@ -43,12 +71,6 @@
4371
"description": "State class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`.",
4472
"isGlobal": true
4573
},
46-
{
47-
"key": "expandIconWrapper",
48-
"className": "MuiAccordionSummary-expandIconWrapper",
49-
"description": "Styles applied to the `expandIcon`'s wrapper element.",
50-
"isGlobal": false
51-
},
5274
{
5375
"key": "focusVisible",
5476
"className": "Mui-focusVisible",
@@ -60,12 +82,6 @@
6082
"className": "MuiAccordionSummary-gutters",
6183
"description": "Styles applied to the root element unless `disableGutters={true}`.",
6284
"isGlobal": false
63-
},
64-
{
65-
"key": "root",
66-
"className": "MuiAccordionSummary-root",
67-
"description": "Styles applied to the root element.",
68-
"isGlobal": false
6985
}
7086
],
7187
"spread": true,

‎docs/pages/material-ui/api/list-item-text.json

+8-8
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@
1919
"slotProps": {
2020
"type": {
2121
"name": "shape",
22-
"description": "{ primary?: func<br>&#124;&nbsp;object, secondary?: func<br>&#124;&nbsp;object }"
22+
"description": "{ primary?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, secondary?: func<br>&#124;&nbsp;object }"
2323
},
2424
"default": "{}"
2525
},
2626
"slots": {
2727
"type": {
2828
"name": "shape",
29-
"description": "{ primary?: elementType, secondary?: elementType }"
29+
"description": "{ primary?: elementType, root?: elementType, secondary?: elementType }"
3030
},
3131
"default": "{}"
3232
},
@@ -44,6 +44,12 @@
4444
"import { ListItemText } from '@mui/material';"
4545
],
4646
"slots": [
47+
{
48+
"name": "root",
49+
"description": "The component that renders the root slot.",
50+
"default": "'div'",
51+
"class": "MuiListItemText-root"
52+
},
4753
{
4854
"name": "primary",
4955
"description": "The component that renders the primary slot.",
@@ -75,12 +81,6 @@
7581
"className": "MuiListItemText-multiline",
7682
"description": "Styles applied to the Typography component if primary and secondary are set.",
7783
"isGlobal": false
78-
},
79-
{
80-
"key": "root",
81-
"className": "MuiListItemText-root",
82-
"description": "Styles applied to the root element.",
83-
"isGlobal": false
8484
}
8585
],
8686
"spread": true,

0 commit comments

Comments
 (0)