diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index ec72fd1039c4d5..e360d73477e088 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -21,6 +21,7 @@ "packages/mui-system", "packages/mui-types", "packages/mui-utils", + "packages-internal/babel-plugin-resolve-imports", "packages-internal/docs-utils", "packages-internal/scripts", "packages-internal/test-utils" @@ -36,6 +37,7 @@ "@mui/internal-docs-utils": "packages-internal/docs-utils", "@mui/internal-markdown": "packages/markdown", "@mui/internal-scripts": "packages-internal/scripts", + "@mui/internal-babel-plugin-resolve-imports": "packages-internal/babel-plugin-resolve-imports", "@mui/lab": "packages/mui-lab/build", "@mui/material-nextjs": "packages/mui-material-nextjs/build", "@mui/material": "packages/mui-material/build", diff --git a/CHANGELOG.md b/CHANGELOG.md index e523564c72b86d..38710c8508df2c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,78 @@ # [Versions](https://mui.com/versions/) +## 6.0.0-rc.0 + + + +_Aug 22, 2024_ + +A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨: + +- ⚡ Rendering performance improvements + +### `@mui/material@6.0.0-rc.0` + +#### Breaking changes + +- [Box] Remove `component` from `BoxOwnProps` (#43384) @DiegoAndai + + The `component` prop has been removed from the `BoxOwnProps` as it is already included in the `Box` type. + This might affect your code if you are using the `styled` function with the `Box` component. + If this is the case, use a `div` element instead of `Box`: + + ```diff + -const StyledBox = styled(Box)` + +const StyledDiv = styled('div')` + color: white; + `; + ``` + + This yields the same end result. + If this doesn't work for you, you can also cast the `styled` returned value to `typeof Box`: + + ```diff + const StyledBox = styled(Box)` + color: white; + -`; + +` as typeof Box; + ``` + +#### Changes + +- [ListItem] Remove unnecessary TypeScript test (#43359) @sai6855 +- Skip generating CSS variables for a custom spacing function (#43389) @siriwatknp +- Revert visual regressions from #42283 (#43364) @ZeeshanTamboli + +### `@mui/codemod@6.0.0-rc.0` + +- Add Grid2 to removeSystemProps codemod (#43302) @DiegoAndai + +### Docs + +- [blog] Add video to the Pigment CSS blog post (#42500) @oliviertassinari +- Fix broken link to milestones (#43379) @oliviertassinari +- Update CSS theme variables related content (#43130) @siriwatknp +- Fix link to createTheme source (#43332) @oliviertassinari +- Add cache to avoid unnecessary jsx dynamic import and theme getting (#43139) @Vxee +- Fix broken link to Next.js docs @oliviertassinari +- [material-ui] Revamp `Composition` guide (#43266) @ZeeshanTamboli +- [material-ui][Menu] Replace `PaperProps` with `slotProps.paper` in demos (#43354) @sai6855 + +### Core + +- [code-infra] Change docs:start script to serve the exports folder (#43375) @Janpot +- [core] Fix typescript-next CI workflow (#43394) @aarongarciah +- [core] Run `@mui/system` TypeScript module augmentation tests in CI (#43386) @ZeeshanTamboli +- [core] Enable manage-package-manager-versions pnpm flag (#43366) @aarongarciah +- [core] Replace `indexOf` with `includes` (#42883) @k-rajat19 +- [docs-infra] Add GitHub source link to components (#43228) @Jay-Karia +- [docs-infra] Fix copy shortcut (#43361) @oliviertassinari +- [perf] Remove theme/styling allocations (#43372) @romgrk +- [perf] Improve `composeClasses` (#43363) @romgrk +- [perf] Remove system allocations (#43306) @romgrk + +All contributors of this release in alphabetical order: @aarongarciah, @DiegoAndai, @Janpot, @Jay-Karia, @k-rajat19, @oliviertassinari, @rluzists1, @romgrk, @sai6855, @siriwatknp, @Vxee, @ZeeshanTamboli + ## 6.0.0-beta.6 diff --git a/babel.config.js b/babel.config.js index 5940d3b7bb9542..54f27f79d69dd4 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,17 +1,28 @@ +// @ts-check const path = require('path'); +/** + * @typedef {import('@babel/core')} babel + */ + const errorCodesPath = path.resolve(__dirname, './docs/public/static/error-codes.json'); const missingError = process.env.MUI_EXTRACT_ERROR_CODES === 'true' ? 'write' : 'annotate'; +/** + * @param {string} relativeToBabelConf + * @returns {string} + */ function resolveAliasPath(relativeToBabelConf) { const resolvedPath = path.relative(process.cwd(), path.resolve(__dirname, relativeToBabelConf)); return `./${resolvedPath.replace('\\', '/')}`; } +/** @type {babel.PluginItem[]} */ const productionPlugins = [ ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }], ]; +/** @type {babel.ConfigFunction} */ module.exports = function getBabelConfig(api) { const useESModules = api.env(['regressions', 'modern', 'stable']); @@ -56,6 +67,16 @@ module.exports = function getBabelConfig(api) { '@babel/preset-typescript', ]; + const usesAliases = + // in this config: + api.env(['coverage', 'development', 'test', 'benchmark']) || + process.env.NODE_ENV === 'test' || + // in webpack config: + api.env(['regressions']); + + const outFileExtension = '.js'; + + /** @type {babel.PluginItem[]} */ const plugins = [ [ 'babel-plugin-macros', @@ -94,6 +115,18 @@ module.exports = function getBabelConfig(api) { ], }, ], + ...(useESModules + ? [ + [ + '@mui/internal-babel-plugin-resolve-imports', + { + // Don't replace the extension when we're using aliases. + // Essentially only replace in production builds. + outExtension: usesAliases ? null : outFileExtension, + }, + ], + ] + : []), ]; if (process.env.NODE_ENV === 'production') { @@ -121,6 +154,10 @@ module.exports = function getBabelConfig(api) { exclude: /\.test\.(js|ts|tsx)$/, plugins: ['@babel/plugin-transform-react-constant-elements'], }, + { + test: /(\.test\.[^.]+$|\.test\/)/, + plugins: [['@mui/internal-babel-plugin-resolve-imports', false]], + }, ], env: { coverage: { diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js index 3080d885ee7221..3ac0e5712394db 100644 --- a/docs/data/material/getting-started/templates/blog/Blog.js +++ b/docs/data/material/getting-started/templates/blog/Blog.js @@ -1,65 +1,15 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; import CssBaseline from '@mui/material/CssBaseline'; -import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import { createTheme, ThemeProvider } from '@mui/material/styles'; - -import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; - import AppAppBar from './components/AppAppBar'; import MainContent from './components/MainContent'; import Latest from './components/Latest'; import Footer from './components/Footer'; +import NavBar from './NavBar'; import getBlogTheme from './theme/getBlogTheme'; -function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { - return ( - - - - - Custom theme - - - Material Design 2 - - - - ); -} - -ToggleCustomTheme.propTypes = { - showCustomTheme: PropTypes.shape({ - valueOf: PropTypes.func.isRequired, - }).isRequired, - toggleCustomTheme: PropTypes.func.isRequired, -}; - export default function Blog() { const [mode, setMode] = React.useState('light'); const [showCustomTheme, setShowCustomTheme] = React.useState(true); @@ -85,6 +35,7 @@ export default function Blog() { setMode(newMode); localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage }; + const toggleCustomTheme = () => { setShowCustomTheme((prev) => !prev); }; @@ -92,20 +43,23 @@ export default function Blog() { return ( - + {/* you can delete this NavBar component since it's just no navigate to other pages */} + +