From 9fab55d99525cd09229b9415b1c5bf0a617a6671 Mon Sep 17 00:00:00 2001 From: Victor Zanivan Date: Wed, 27 Nov 2024 10:09:10 -0300 Subject: [PATCH 01/14] [docs] Add Black Friday message to the notifications (#44566) --- docs/notifications.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/notifications.json b/docs/notifications.json index 01ee0a5b7ea6da..dda8c22916f9a9 100644 --- a/docs/notifications.json +++ b/docs/notifications.json @@ -13,5 +13,10 @@ "id": 83, "title": "Material UI v6 is out now", "text": "This major release includes CSS variables support, experimental opt-in CSS extraction, and many more improvements. Check out the announcement blog post." + }, + { + "id": 84, + "title": "Black Friday is here!", + "text": "Don't miss out on the best deals of the year—Mega Bundles with up to 90% off. Available for a limited time. Check the offers!" } ] From c23fe4a928c58145567c825b6738f4ff5dde4665 Mon Sep 17 00:00:00 2001 From: Victor Zanivan Date: Wed, 27 Nov 2024 10:09:26 -0300 Subject: [PATCH 02/14] [docs] Add Black Friday banner to docs (#44565) --- docs/src/components/banner/AppFrameBanner.tsx | 12 ++++++++++-- docs/src/featureToggle.js | 2 +- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/docs/src/components/banner/AppFrameBanner.tsx b/docs/src/components/banner/AppFrameBanner.tsx index e8e90d92895765..90baa060d7f2b2 100644 --- a/docs/src/components/banner/AppFrameBanner.tsx +++ b/docs/src/components/banner/AppFrameBanner.tsx @@ -14,7 +14,11 @@ export default function AppFrameBanner() { // eslint-disable-next-line react-hooks/rules-of-hooks -- FEATURE_TOGGLE never changes const pageContext = React.useContext(PageContext); const productName = convertProductIdToName(pageContext) || 'MUI'; - const message = `Influence ${productName}'s 2024 roadmap! Participate in the latest Developer Survey`; + const surveyMessage = `Influence ${productName}'s 2024 roadmap! Participate in the latest Developer Survey`; + const blackFridayMessage = `Black Friday is here! Don't miss out on the best offers of the year.`; + + const showSurveyMessage = false; + const message = showSurveyMessage ? surveyMessage : blackFridayMessage; if (process.env.NODE_ENV !== 'production') { if (message.length > 100) { @@ -26,7 +30,11 @@ export default function AppFrameBanner() { return ( Date: Wed, 27 Nov 2024 20:13:50 +0700 Subject: [PATCH 03/14] v6.1.9 (#44551) --- CHANGELOG.md | 48 +++++++++++++++++++ package.json | 2 +- packages-internal/docs-utils/package.json | 2 +- packages-internal/scripts/package.json | 2 +- packages-internal/test-utils/package.json | 2 +- packages/markdown/package.json | 2 +- packages/mui-base/package.json | 2 +- packages/mui-codemod/package.json | 2 +- .../mui-core-downloads-tracker/package.json | 2 +- packages/mui-docs/package.json | 2 +- packages/mui-envinfo/package.json | 2 +- packages/mui-icons-material/package.json | 2 +- packages/mui-lab/package.json | 2 +- packages/mui-material-nextjs/package.json | 2 +- .../mui-material-pigment-css/package.json | 2 +- packages/mui-material/package.json | 2 +- packages/mui-private-theming/package.json | 2 +- packages/mui-styled-engine-sc/package.json | 2 +- packages/mui-styled-engine/package.json | 2 +- packages/mui-styles/package.json | 2 +- packages/mui-system/package.json | 2 +- packages/mui-utils/package.json | 2 +- pnpm-lock.yaml | 26 ++-------- 23 files changed, 73 insertions(+), 43 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index efd4e605d28d27..328ebcc7f12e4e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,53 @@ # [Versions](https://mui.com/versions/) +## 6.1.9 + + + +_Nov 27, 2024_ + +A big thanks to the 8 contributors who made this release possible. + +### `@mui/material@6.1.9` + +- [Select] Omit `placeholder` from props (#44502) @Juneezee +- [Grid2] Add container class to `Grid2Classes` (#44562) @sai6855 + +### `@mui/system@6.1.9` + +- Add ThemeProvider `noSsr` to prevent double rendering (#44451) @siriwatknp + +### `@mui/codemod@6.1.9` + +- [codemod] Fix handling of computed `paragraph` props (#44195) @joshkel + +### `@mui/material-pigment-css@6.1.9` + +- Make @pigment-css/react as peer dependency (#44498) @brijeshb42 + +### Docs + +- [material-ui] Add missing required dependencies in dashboard template README (#44476) @mesqueeb +- [material-ui] Add missing Roboto import to Next.js integration docs (#44462) @StaceyD22 +- [material-ui][Dialog] Fix padding in SimpleDialog demo (#44467) @oliviertassinari +- Fix template page issues (#44466) @oliviertassinari +- [examples] Add dark mode example for Material UI + Pigment CSS (#44480) @mnajdova + +### Core + +- Remove TODO line in the changelog (#44484) @mnajdova +- Polish image display (418e888) @oliviertassinari +- [core-infra] Add no-relative-packages (#44489) @oliviertassinari +- [docs-infra] Support CSS variables API info (#44559) @mnajdova +- [docs-infra] Fix display when ad-block triggers (#44567) @oliviertassinari +- [docs-infra] Improve locator finding using visible option (#44541) @siriwatknp +- [docs-infra] Correctly flatten the pages tree (#44514) @oliviertassinari +- [docs-infra] Fix Sponsor design regression (#44515) @oliviertassinari +- [test] Remove React.ReactElement from describeConformance.tsx (#44318) @sai6855 +- [test] Do not enforce the presence of `ownerState.className` in `describeConformance` (#44479) @flaviendelangle + +All contributors of this release in alphabetical order: @brijeshb42, @flaviendelangle, @joshkel, @Juneezee, @mesqueeb, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @StaceyD22 + ## v6.1.8 diff --git a/package.json b/package.json index 3620d3e86924d6..501bc81f3ba739 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mui/monorepo", - "version": "6.1.8", + "version": "6.1.9", "private": true, "scripts": { "preinstall": "npx only-allow pnpm", diff --git a/packages-internal/docs-utils/package.json b/packages-internal/docs-utils/package.json index 011478722a9fa7..afe2157543788e 100644 --- a/packages-internal/docs-utils/package.json +++ b/packages-internal/docs-utils/package.json @@ -1,6 +1,6 @@ { "name": "@mui/internal-docs-utils", - "version": "1.0.15", + "version": "1.0.16", "author": "MUI Team", "description": "Utilities for MUI docs. This is an internal package not meant for general use.", "main": "./build/index.js", diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json index e8afbee6237bde..23663b10ae302c 100644 --- a/packages-internal/scripts/package.json +++ b/packages-internal/scripts/package.json @@ -1,6 +1,6 @@ { "name": "@mui/internal-scripts", - "version": "1.0.27", + "version": "1.0.28", "author": "MUI Team", "description": "Utilities supporting MUI libraries build and docs generation. This is an internal package not meant for general use.", "main": "build/index.js", diff --git a/packages-internal/test-utils/package.json b/packages-internal/test-utils/package.json index 8e627a770b98ba..b0d1253aa5791b 100644 --- a/packages-internal/test-utils/package.json +++ b/packages-internal/test-utils/package.json @@ -1,6 +1,6 @@ { "name": "@mui/internal-test-utils", - "version": "1.0.21", + "version": "1.0.22", "author": "MUI Team", "description": "Utilities for MUI tests. This is an internal package not meant for general use.", "main": "./build/index.js", diff --git a/packages/markdown/package.json b/packages/markdown/package.json index 055a86d4e543ce..e8b5c599cd8bf6 100644 --- a/packages/markdown/package.json +++ b/packages/markdown/package.json @@ -1,6 +1,6 @@ { "name": "@mui/internal-markdown", - "version": "1.0.20", + "version": "1.0.21", "author": "MUI Team", "description": "MUI markdown parser. This is an internal package not meant for general use.", "main": "./index.js", diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 6c4dc35bb84ea1..8cf03b4055ac09 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -1,6 +1,6 @@ { "name": "@mui/base", - "version": "5.0.0-beta.62", + "version": "5.0.0-beta.63", "private": false, "author": "MUI Team", "description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.", diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json index 78c163e2a86e70..ac2870093ccb27 100644 --- a/packages/mui-codemod/package.json +++ b/packages/mui-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@mui/codemod", - "version": "6.1.8", + "version": "6.1.9", "bin": "./codemod.js", "private": false, "author": "MUI Team", diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json index 749791a31cdba0..293889c1b41248 100644 --- a/packages/mui-core-downloads-tracker/package.json +++ b/packages/mui-core-downloads-tracker/package.json @@ -1,6 +1,6 @@ { "name": "@mui/core-downloads-tracker", - "version": "6.1.8", + "version": "6.1.9", "private": false, "author": "MUI Team", "description": "Internal package to track number of downloads of our design system libraries", diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json index ed326d49422011..4fac5a94c011d2 100644 --- a/packages/mui-docs/package.json +++ b/packages/mui-docs/package.json @@ -1,6 +1,6 @@ { "name": "@mui/docs", - "version": "6.1.8", + "version": "6.1.9", "private": false, "author": "MUI Team", "description": "MUI Docs - Documentation building blocks.", diff --git a/packages/mui-envinfo/package.json b/packages/mui-envinfo/package.json index 11f59f166e0d78..379d7e21327aed 100644 --- a/packages/mui-envinfo/package.json +++ b/packages/mui-envinfo/package.json @@ -1,6 +1,6 @@ { "name": "@mui/envinfo", - "version": "2.0.29", + "version": "2.0.30", "private": false, "author": "MUI Team", "description": "Logs infos about the environment relevant to @mui/*", diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json index 697afb451fee5b..51abd61d6d85db 100644 --- a/packages/mui-icons-material/package.json +++ b/packages/mui-icons-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/icons-material", - "version": "6.1.8", + "version": "6.1.9", "private": false, "author": "MUI Team", "description": "Material Design icons distributed as SVG React components.", diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index e3d81d2165dd3d..7093948ce97b3f 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -1,6 +1,6 @@ { "name": "@mui/lab", - "version": "6.0.0-beta.16", + "version": "6.0.0-beta.17", "private": false, "author": "MUI Team", "description": "Laboratory for new MUI modules.", diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json index 491e8ff57a407e..991087f1fc5706 100644 --- a/packages/mui-material-nextjs/package.json +++ b/packages/mui-material-nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material-nextjs", - "version": "6.1.8", + "version": "6.1.9", "private": false, "author": "MUI Team", "description": "Collection of utilities for integration between Material UI and Next.js.", diff --git a/packages/mui-material-pigment-css/package.json b/packages/mui-material-pigment-css/package.json index 7d2fd6cd52485b..02f0a546b65c57 100644 --- a/packages/mui-material-pigment-css/package.json +++ b/packages/mui-material-pigment-css/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material-pigment-css", - "version": "6.1.8", + "version": "6.1.9", "author": "MUI Team", "description": "A wrapper over Pigment CSS that provides the same styled and theming APIs as Material UI.", "main": "./src/index.ts", diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 079cf21a0b1611..093a1ec57a0331 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material", - "version": "6.1.8", + "version": "6.1.9", "private": false, "author": "MUI Team", "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.", diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json index 441b722ecb1428..4430a900e37a24 100644 --- a/packages/mui-private-theming/package.json +++ b/packages/mui-private-theming/package.json @@ -1,6 +1,6 @@ { "name": "@mui/private-theming", - "version": "6.1.8", + "version": "6.1.9", "private": false, "author": "MUI Team", "description": "Private - The React theme context to be shared between `@mui/styles` and `@mui/material`.", diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json index 8876d448de50ae..e38255cd226c96 100644 --- a/packages/mui-styled-engine-sc/package.json +++ b/packages/mui-styled-engine-sc/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine-sc", - "version": "6.1.8", + "version": "6.1.9", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for styled-components.", diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json index 6359c9d8f456b6..2e4c0b5c78ac9a 100644 --- a/packages/mui-styled-engine/package.json +++ b/packages/mui-styled-engine/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine", - "version": "6.1.8", + "version": "6.1.9", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for emotion.", diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json index d7b96f80ba43ac..bb56a1cae5210f 100644 --- a/packages/mui-styles/package.json +++ b/packages/mui-styles/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styles", - "version": "6.1.8", + "version": "6.1.9", "private": false, "author": "MUI Team", "description": "MUI Styles - The legacy JSS-based styling solution of Material UI.", diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index 78ea48b612d18d..d9987558eb33d2 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -1,6 +1,6 @@ { "name": "@mui/system", - "version": "6.1.8", + "version": "6.1.9", "private": false, "author": "MUI Team", "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.", diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index 22cdbcf5dc0ad2..65c4dd2cce9027 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -1,6 +1,6 @@ { "name": "@mui/utils", - "version": "6.1.8", + "version": "6.1.9", "private": false, "author": "MUI Team", "description": "Utility functions for React components.", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6c4f657c25b335..e862e2518233db 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -663,7 +663,7 @@ importers: version: 9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@toolpad/core': specifier: ^0.10.0 - version: 0.10.0(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material-pigment-css@6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.18(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.11(@types/node@20.17.7)(terser@5.29.2)) + version: 0.10.0(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.18(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.11(@types/node@20.17.7)(terser@5.29.2)) autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.4.49) @@ -4012,10 +4012,6 @@ packages: '@types/react': optional: true - '@mui/material-pigment-css@6.1.8': - resolution: {integrity: sha512-lbgFlImFQqP8caX+pzH04V4/vXpe1JIJpPssPWisQbZg3f3wg0CvYUdaRha4aiqrYhaAVqCXQbTHVF7jXP8nBQ==} - engines: {node: '>=14.0.0'} - '@mui/material@5.15.4': resolution: {integrity: sha512-T/LGRAC+M0c+D3+y67eHwIN5bSje0TxbcJCWR0esNvU11T0QwrX3jedXItPNBwMupF2F5VWCDHBVLlFnN3+ABA==} engines: {node: '>=12.0.0'} @@ -15035,7 +15031,7 @@ snapshots: '@emotion/styled': 11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) '@types/react': 18.3.12 - '@mui/lab@6.0.0-beta.16(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material-pigment-css@6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/lab@6.0.0-beta.16(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 '@mui/base': 5.0.0-beta.62(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -15050,22 +15046,8 @@ snapshots: optionalDependencies: '@emotion/react': 11.13.5(@types/react@18.3.12)(react@18.3.1) '@emotion/styled': 11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) - '@mui/material-pigment-css': 6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) '@types/react': 18.3.12 - '@mui/material-pigment-css@6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)': - dependencies: - '@babel/runtime': 7.26.0 - '@mui/system': 6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) - '@pigment-css/react': 0.0.27(@types/react@18.3.12)(react@18.3.1) - transitivePeerDependencies: - - '@emotion/react' - - '@emotion/styled' - - '@types/react' - - react - - supports-color - optional: true - '@mui/material@5.15.4(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 @@ -16739,11 +16721,11 @@ snapshots: '@theme-ui/css': 0.17.1(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1)) react: 18.3.1 - '@toolpad/core@0.10.0(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material-pigment-css@6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.18(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.11(@types/node@20.17.7)(terser@5.29.2))': + '@toolpad/core@0.10.0(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.18(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.11(@types/node@20.17.7)(terser@5.29.2))': dependencies: '@babel/runtime': 7.26.0 '@mui/icons-material': link:packages/mui-icons-material/build - '@mui/lab': 6.0.0-beta.16(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material-pigment-css@6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/lab': 6.0.0-beta.16(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': link:packages/mui-material/build '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) '@toolpad/utils': 0.10.0(react@18.3.1) From 1ecb13d3ee10da974f06376403aba03129eaf3d8 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Wed, 27 Nov 2024 17:48:56 -0300 Subject: [PATCH 04/14] [examples] Use Next.js 14 on examples (#44486) --- .../README.md | 5 + .../package.json | 8 +- .../material-ui-nextjs-pages-router/README.md | 5 + .../package.json | 8 +- examples/material-ui-nextjs-ts/README.md | 5 + examples/material-ui-nextjs-ts/package.json | 8 +- examples/material-ui-nextjs/README.md | 5 + examples/material-ui-nextjs/package.json | 8 +- pnpm-lock.yaml | 132 +++++++++++++----- 9 files changed, 135 insertions(+), 49 deletions(-) diff --git a/examples/material-ui-nextjs-pages-router-ts/README.md b/examples/material-ui-nextjs-pages-router-ts/README.md index 25e32aa803cfd2..37b40bcf662263 100644 --- a/examples/material-ui-nextjs-pages-router-ts/README.md +++ b/examples/material-ui-nextjs-pages-router-ts/README.md @@ -41,6 +41,11 @@ If you prefer, you can [use styled-components instead](https://mui.com/material- The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with Material UI. More information [in the documentation](https://mui.com/material-ui/integrations/routing/#next-js-pages-router). +## Upgrading to Next.js 15 + +This example uses Next.js 14. +To upgrade to version 15, please follow the [official upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) in the Next.js docs. + ## What's next? diff --git a/examples/material-ui-nextjs-pages-router-ts/package.json b/examples/material-ui-nextjs-pages-router-ts/package.json index a8e8c86ca0508b..11d9ab9a44fddf 100644 --- a/examples/material-ui-nextjs-pages-router-ts/package.json +++ b/examples/material-ui-nextjs-pages-router-ts/package.json @@ -18,15 +18,15 @@ "@mui/material": "latest", "@mui/material-nextjs": "latest", "clsx": "latest", - "next": "latest", - "react": "latest", - "react-dom": "latest" + "next": "^14.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "devDependencies": { "@types/node": "latest", "@types/react": "latest", "eslint": "latest", - "eslint-config-next": "latest", + "eslint-config-next": "^14.0.0", "typescript": "latest" } } diff --git a/examples/material-ui-nextjs-pages-router/README.md b/examples/material-ui-nextjs-pages-router/README.md index 50453acf21f548..80e1b7d32a2ed9 100644 --- a/examples/material-ui-nextjs-pages-router/README.md +++ b/examples/material-ui-nextjs-pages-router/README.md @@ -41,6 +41,11 @@ If you prefer, you can [use styled-components instead](https://mui.com/material- The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with Material UI. More information [in the documentation](https://mui.com/material-ui/integrations/routing/#next-js-pages-router). +## Upgrading to Next.js 15 + +This example uses Next.js 14. +To upgrade to version 15, please follow the [official upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) in the Next.js docs. + ## What's next? diff --git a/examples/material-ui-nextjs-pages-router/package.json b/examples/material-ui-nextjs-pages-router/package.json index 55b0d43a77d553..11a24ea893d60c 100644 --- a/examples/material-ui-nextjs-pages-router/package.json +++ b/examples/material-ui-nextjs-pages-router/package.json @@ -18,13 +18,13 @@ "@mui/material": "latest", "@mui/material-nextjs": "latest", "clsx": "latest", - "next": "latest", + "next": "^14.0.0", "prop-types": "latest", - "react": "latest", - "react-dom": "latest" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "devDependencies": { "eslint": "latest", - "eslint-config-next": "latest" + "eslint-config-next": "^14.0.0" } } diff --git a/examples/material-ui-nextjs-ts/README.md b/examples/material-ui-nextjs-ts/README.md index df5d86c065a2a4..13f386515d7cb7 100644 --- a/examples/material-ui-nextjs-ts/README.md +++ b/examples/material-ui-nextjs-ts/README.md @@ -30,6 +30,11 @@ or: [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts) +## Upgrading to Next.js 15 + +This example uses Next.js 14. +To upgrade to version 15, please follow the [official upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) in the Next.js docs. + ## Learn more To learn more about this example: diff --git a/examples/material-ui-nextjs-ts/package.json b/examples/material-ui-nextjs-ts/package.json index 429d960765034e..55181969226f21 100644 --- a/examples/material-ui-nextjs-ts/package.json +++ b/examples/material-ui-nextjs-ts/package.json @@ -16,16 +16,16 @@ "@mui/icons-material": "latest", "@mui/material": "latest", "@mui/material-nextjs": "latest", - "next": "latest", - "react": "latest", - "react-dom": "latest" + "next": "^14.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "devDependencies": { "@types/node": "latest", "@types/react": "latest", "@types/react-dom": "latest", "eslint": "latest", - "eslint-config-next": "latest", + "eslint-config-next": "^14.0.0", "typescript": "latest" } } diff --git a/examples/material-ui-nextjs/README.md b/examples/material-ui-nextjs/README.md index 98ea0fabe4fc94..0d7600e101a3f6 100644 --- a/examples/material-ui-nextjs/README.md +++ b/examples/material-ui-nextjs/README.md @@ -30,6 +30,11 @@ or: [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs) +## Upgrading to Next.js 15 + +This example uses Next.js 14. +To upgrade to version 15, please follow the [official upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) in the Next.js docs. + ## Learn more To learn more about this example: diff --git a/examples/material-ui-nextjs/package.json b/examples/material-ui-nextjs/package.json index af1228ce229f01..5e931b115a9c6a 100644 --- a/examples/material-ui-nextjs/package.json +++ b/examples/material-ui-nextjs/package.json @@ -16,9 +16,9 @@ "@mui/material": "latest", "@mui/material-nextjs": "latest", "eslint": "latest", - "eslint-config-next": "latest", - "next": "latest", - "react": "latest", - "react-dom": "latest" + "eslint-config-next": "^14.0.0", + "next": "^14.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e862e2518233db..9a59298eee5d1e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -663,7 +663,7 @@ importers: version: 9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@toolpad/core': specifier: ^0.10.0 - version: 0.10.0(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.18(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.11(@types/node@20.17.7)(terser@5.29.2)) + version: 0.10.0(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material-pigment-css@6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@pigment-css/react@0.0.27(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.18(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.11(@types/node@20.17.7)(terser@5.29.2)) autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.4.49) @@ -1413,13 +1413,13 @@ importers: version: 7.26.0 '@mui/base': specifier: '*' - version: 5.0.0-beta.62(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 5.0.0-beta.63(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/internal-markdown': specifier: workspace:^ version: link:../markdown '@mui/system': specifier: ^5.0.0 || ^6.0.0 - version: 6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) + version: 6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) chai: specifier: ^4.4.1 version: 4.5.0 @@ -3971,6 +3971,17 @@ packages: '@types/react': optional: true + '@mui/base@5.0.0-beta.63': + resolution: {integrity: sha512-W6aIqKP9X8VUX0KhSnYWo2+5C7MnKV1IhYVd517L/apvfkVq5KaTdlnxSBVwnaWt46whayVgQ/9KXwUVCXp6+w==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@types/react': ^18.3.12 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@mui/core-downloads-tracker@5.15.14': resolution: {integrity: sha512-on75VMd0XqZfaQW+9pGjSNiqW+ghc5E2ZSLRBXwcXl/C4YzjfyjrLPhrEpKnR9Uym9KXBvxrhoHfPcczYHweyA==} @@ -4012,6 +4023,12 @@ packages: '@types/react': optional: true + '@mui/material-pigment-css@6.1.9': + resolution: {integrity: sha512-/Il4h5jbfXYlCxP6vuLQoCdy+MoHNJXoUIzv2zaGgR2GZW6fhlHpvV1uY0+DfDSoL07UKRnKnpQCklIkzII+qw==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@pigment-css/react': 0.0.27 + '@mui/material@5.15.4': resolution: {integrity: sha512-T/LGRAC+M0c+D3+y67eHwIN5bSje0TxbcJCWR0esNvU11T0QwrX3jedXItPNBwMupF2F5VWCDHBVLlFnN3+ABA==} engines: {node: '>=12.0.0'} @@ -4039,8 +4056,8 @@ packages: '@types/react': optional: true - '@mui/private-theming@6.1.8': - resolution: {integrity: sha512-TuKl7msynCNCVvhX3c0ef1sF0Qb3VHcPs8XOGB/8bdOGBr/ynmIG1yTMjZeiFQXk8yN9fzK/FDEKMFxILNn3wg==} + '@mui/private-theming@6.1.9': + resolution: {integrity: sha512-7aum/O1RquBYhfwL/7egDyl9GqJgPM6hoJDFFBbhF6Sgv9yI9v4w3ArKUkuVvR0CtVj4NXRVMKEioh1bjUzvuA==} engines: {node: '>=14.0.0'} peerDependencies: '@types/react': ^18.3.12 @@ -4062,8 +4079,8 @@ packages: '@emotion/styled': optional: true - '@mui/styled-engine@6.1.8': - resolution: {integrity: sha512-ZvEoT0U2nPLSLI+B4by4cVjaZnPT2f20f4JUPkyHdwLv65ZzuoHiTlwyhqX1Ch63p8bcJzKTHQVGisEoMK6PGA==} + '@mui/styled-engine@6.1.9': + resolution: {integrity: sha512-xynSLlJRxHLzSfQaiDjkaTx8LiFb9ByVa7aOdwFnTxGWFMY1F+mkXwAUY4jDDE+MAxkWxlzzQE0wOohnsxhdQg==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.4.1 @@ -4091,8 +4108,8 @@ packages: '@types/react': optional: true - '@mui/system@6.1.8': - resolution: {integrity: sha512-i1kLfQoWxzFpXTBQIuPoA3xKnAnP3en4I2T8xIolovSolGQX5k8vGjw1JaydQS40td++cFsgCdEU458HDNTGUA==} + '@mui/system@6.1.9': + resolution: {integrity: sha512-8x+RucnNp21gfFYsklCaZf0COXbv3+v0lrVuXONxvPEkESi2rwLlOi8UPJfcz6LxZOAX3v3oQ7qw18vnpgueRg==} engines: {node: '>=14.0.0'} peerDependencies: '@emotion/react': ^11.5.0 @@ -4135,6 +4152,16 @@ packages: '@types/react': optional: true + '@mui/utils@6.1.9': + resolution: {integrity: sha512-N7uzBp7p2or+xanXn3aH2OTINC6F/Ru/U8h6amhRZEev8bJhKN86rIDIoxZZ902tj+09LXtH83iLxFMjMHyqNA==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@types/react': ^18.3.12 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@mui/x-charts-vendor@7.20.0': resolution: {integrity: sha512-pzlh7z/7KKs5o0Kk0oPcB+sY0+Dg7Q7RzqQowDQjpy5Slz6qqGsgOB5YUzn0L+2yRmvASc4Pe0914Ao3tMBogg==} @@ -15003,7 +15030,21 @@ snapshots: '@babel/runtime': 7.26.0 '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.19(@types/react@18.3.12) - '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) + '@popperjs/core': 2.11.8 + clsx: 2.1.1 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.12 + + '@mui/base@5.0.0-beta.63(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.0 + '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/types': 7.2.19(@types/react@18.3.12) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) '@popperjs/core': 2.11.8 clsx: 2.1.1 prop-types: 15.8.1 @@ -15031,14 +15072,14 @@ snapshots: '@emotion/styled': 11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) '@types/react': 18.3.12 - '@mui/lab@6.0.0-beta.16(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/lab@6.0.0-beta.16(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material-pigment-css@6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@pigment-css/react@0.0.27(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 '@mui/base': 5.0.0-beta.62(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': link:packages/mui-material/build - '@mui/system': 6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) + '@mui/system': 6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) '@mui/types': 7.2.19(@types/react@18.3.12) - '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) clsx: 2.1.1 prop-types: 15.8.1 react: 18.3.1 @@ -15046,8 +15087,21 @@ snapshots: optionalDependencies: '@emotion/react': 11.13.5(@types/react@18.3.12)(react@18.3.1) '@emotion/styled': 11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) + '@mui/material-pigment-css': 6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@pigment-css/react@0.0.27(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) '@types/react': 18.3.12 + '@mui/material-pigment-css@6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@pigment-css/react@0.0.27(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.0 + '@mui/system': 6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) + '@pigment-css/react': 0.0.27(@types/react@18.3.12)(react@18.3.1) + transitivePeerDependencies: + - '@emotion/react' + - '@emotion/styled' + - '@types/react' + - react + optional: true + '@mui/material@5.15.4(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 @@ -15078,10 +15132,10 @@ snapshots: optionalDependencies: '@types/react': 18.3.12 - '@mui/private-theming@6.1.8(@types/react@18.3.12)(react@18.3.1)': + '@mui/private-theming@6.1.9(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 - '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) prop-types: 15.8.1 react: 18.3.1 optionalDependencies: @@ -15098,7 +15152,7 @@ snapshots: '@emotion/react': 11.13.5(@types/react@18.3.12)(react@18.3.1) '@emotion/styled': 11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) - '@mui/styled-engine@6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)': + '@mui/styled-engine@6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 '@emotion/cache': 11.13.5 @@ -15127,13 +15181,13 @@ snapshots: '@emotion/styled': 11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) '@types/react': 18.3.12 - '@mui/system@6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)': + '@mui/system@6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 - '@mui/private-theming': 6.1.8(@types/react@18.3.12)(react@18.3.1) - '@mui/styled-engine': 6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1) + '@mui/private-theming': 6.1.9(@types/react@18.3.12)(react@18.3.1) + '@mui/styled-engine': 6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.19(@types/react@18.3.12) - '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) clsx: 2.1.1 csstype: 3.1.3 prop-types: 15.8.1 @@ -15171,6 +15225,18 @@ snapshots: optionalDependencies: '@types/react': 18.3.12 + '@mui/utils@6.1.9(@types/react@18.3.12)(react@18.3.1)': + dependencies: + '@babel/runtime': 7.26.0 + '@mui/types': 7.2.19(@types/react@18.3.12) + '@types/prop-types': 15.7.13 + clsx: 2.1.1 + prop-types: 15.8.1 + react: 18.3.1 + react-is: 18.3.1 + optionalDependencies: + '@types/react': 18.3.12 + '@mui/x-charts-vendor@7.20.0': dependencies: '@babel/runtime': 7.26.0 @@ -15194,7 +15260,7 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) '@mui/x-charts-vendor': 7.20.0 '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1) '@react-spring/rafz': 9.7.5 @@ -15232,7 +15298,7 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) '@mui/x-data-grid': 7.22.3(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/x-data-grid-pro': 7.22.3(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1) @@ -15255,7 +15321,7 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) '@mui/x-data-grid': 7.22.3(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1) '@mui/x-license': 7.21.0(@types/react@18.3.12)(react@18.3.1) @@ -15276,7 +15342,7 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1) clsx: 2.1.1 prop-types: 15.8.1 @@ -15294,7 +15360,7 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) '@mui/x-date-pickers': 7.22.3(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@mui/system@packages+mui-system+build)(@types/react@18.3.12)(date-fns@2.30.0)(dayjs@1.11.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1) '@mui/x-license': 7.21.0(@types/react@18.3.12)(react@18.3.1) @@ -15316,7 +15382,7 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1) '@types/react-transition-group': 4.4.11 clsx: 2.1.1 @@ -15335,7 +15401,7 @@ snapshots: '@mui/x-internals@7.21.0(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 - '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) react: 18.3.1 transitivePeerDependencies: - '@types/react' @@ -15343,7 +15409,7 @@ snapshots: '@mui/x-license@7.21.0(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.26.0 - '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) react: 18.3.1 transitivePeerDependencies: - '@types/react' @@ -15353,7 +15419,7 @@ snapshots: '@babel/runtime': 7.26.0 '@mui/material': link:packages/mui-material/build '@mui/system': link:packages/mui-system/build - '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) '@mui/x-internals': 7.21.0(@types/react@18.3.12)(react@18.3.1) '@types/react-transition-group': 4.4.11 clsx: 2.1.1 @@ -15965,8 +16031,8 @@ snapshots: '@emotion/react': 11.13.5(@types/react@18.3.12)(react@18.3.1) '@emotion/serialize': 1.3.3 '@emotion/styled': 11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) - '@mui/system': 6.1.8(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) - '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) + '@mui/system': 6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1) + '@mui/utils': 6.1.9(@types/react@18.3.12)(react@18.3.1) '@wyw-in-js/processor-utils': 0.5.5 '@wyw-in-js/shared': 0.5.5 '@wyw-in-js/transform': 0.5.5 @@ -16721,11 +16787,11 @@ snapshots: '@theme-ui/css': 0.17.1(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1)) react: 18.3.1 - '@toolpad/core@0.10.0(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.18(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.11(@types/node@20.17.7)(terser@5.29.2))': + '@toolpad/core@0.10.0(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material-pigment-css@6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@pigment-css/react@0.0.27(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(next@14.2.18(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(vite@5.4.11(@types/node@20.17.7)(terser@5.29.2))': dependencies: '@babel/runtime': 7.26.0 '@mui/icons-material': link:packages/mui-icons-material/build - '@mui/lab': 6.0.0-beta.16(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mui/lab': 6.0.0-beta.16(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material-pigment-css@6.1.9(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@11.13.5(@emotion/react@11.13.5(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@pigment-css/react@0.0.27(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1))(@mui/material@packages+mui-material+build)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': link:packages/mui-material/build '@mui/utils': 6.1.8(@types/react@18.3.12)(react@18.3.1) '@toolpad/utils': 0.10.0(react@18.3.1) From e720f3b2905b9b3679238ffb5853770c65e86816 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Thu, 28 Nov 2024 13:56:05 +0700 Subject: [PATCH 05/14] [FilledInput] Use `slotProps` instead of `componentsProps` (#44552) --- packages/mui-material/src/FilledInput/FilledInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js index 7e0d90740b1309..fcb381ce103ef4 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.js +++ b/packages/mui-material/src/FilledInput/FilledInput.js @@ -316,7 +316,7 @@ const FilledInput = React.forwardRef(function FilledInput(inProps, ref) { return ( Date: Thu, 28 Nov 2024 10:38:50 -0300 Subject: [PATCH 06/14] [material-ui][Tabs] Fix `ScrollbarSize` ref being overriden (#44593) --- packages/mui-material/src/Tabs/ScrollbarSize.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Tabs/ScrollbarSize.js b/packages/mui-material/src/Tabs/ScrollbarSize.js index da7ec73c0c741b..4f5676cc428d13 100644 --- a/packages/mui-material/src/Tabs/ScrollbarSize.js +++ b/packages/mui-material/src/Tabs/ScrollbarSize.js @@ -49,7 +49,7 @@ export default function ScrollbarSize(props) { onChange(scrollbarHeight.current); }, [onChange]); - return
; + return
; } ScrollbarSize.propTypes = { From b89845a86c649c0dace0c629502fad727f312684 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Thu, 28 Nov 2024 21:53:06 +0700 Subject: [PATCH 07/14] [material-ui][Avatar] Fix `slotProps.img` not spread to hook (#44536) --- packages/mui-material/src/Avatar/Avatar.js | 18 ++++++++++++------ .../mui-material/src/Avatar/Avatar.test.js | 14 ++++++++++++++ 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js index 50157ee01ef149..fbf36c82d5fa3a 100644 --- a/packages/mui-material/src/Avatar/Avatar.js +++ b/packages/mui-material/src/Avatar/Avatar.js @@ -163,17 +163,23 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) { let children = null; - // Use a hook instead of onError on the img element to support server-side rendering. - const loaded = useLoaded({ ...imgProps, src, srcSet }); - const hasImg = src || srcSet; - const hasImgNotFailing = hasImg && loaded !== 'error'; - const ownerState = { ...props, - colorDefault: !hasImgNotFailing, component, variant, }; + + // Use a hook instead of onError on the img element to support server-side rendering. + const loaded = useLoaded({ + ...imgProps, + ...(typeof slotProps.img === 'function' ? slotProps.img(ownerState) : slotProps.img), + src, + srcSet, + }); + const hasImg = src || srcSet; + const hasImgNotFailing = hasImg && loaded !== 'error'; + + ownerState.colorDefault = !hasImgNotFailing; // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184 delete ownerState.ownerState; diff --git a/packages/mui-material/src/Avatar/Avatar.test.js b/packages/mui-material/src/Avatar/Avatar.test.js index 5f3fb5796106ee..7feddbbd36731a 100644 --- a/packages/mui-material/src/Avatar/Avatar.test.js +++ b/packages/mui-material/src/Avatar/Avatar.test.js @@ -62,6 +62,20 @@ describe('', () => { fireEvent.error(img); expect(onError.callCount).to.equal(1); }); + + it('should pass slots.img to `useLoaded` hook', () => { + const originalImage = global.Image; + const image = {}; + global.Image = function Image() { + return image; + }; + + render(); + + expect(image.crossOrigin).to.equal('anonymous'); + + global.Image = originalImage; + }); }); describe('image avatar with unrendered children', () => { From 13c219ce72c0549556a54c5223a1c28c5564b473 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 28 Nov 2024 20:51:40 +0500 Subject: [PATCH 08/14] [core] Update eslint config (#44586) --- .eslintrc.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.eslintrc.js b/.eslintrc.js index 670e229c62378b..c716674a2f2128 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -120,6 +120,10 @@ module.exports = /** @type {Config} */ ({ variables: true, }, ], + '@typescript-eslint/no-unused-vars': [ + 'error', + { vars: 'all', args: 'after-used', ignoreRestSiblings: true, argsIgnorePattern: '^_' }, + ], 'no-use-before-define': 'off', // disabled type-aware linting due to performance considerations From e1479de4525f671fc8131b720ffafb9a4bede40d Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Fri, 29 Nov 2024 00:09:42 +0530 Subject: [PATCH 09/14] [material-ui] Remove few more React.ReactElement types (#44290) --- docs/src/modules/components/JoyThemeBuilder.tsx | 14 +++++++++++--- packages/mui-material/src/Modal/useModal.ts | 6 ++++-- packages/mui-material/src/Modal/useModal.types.ts | 9 ++++++++- .../src/Slider/SliderValueLabel.types.ts | 2 +- .../src/Unstable_TrapFocus/FocusTrap.tsx | 2 +- .../src/Unstable_TrapFocus/FocusTrap.types.ts | 5 ++++- packages/mui-styles/test/styles.spec.tsx | 2 +- 7 files changed, 30 insertions(+), 10 deletions(-) diff --git a/docs/src/modules/components/JoyThemeBuilder.tsx b/docs/src/modules/components/JoyThemeBuilder.tsx index 6f0feae3ffa79e..67753753411c4b 100644 --- a/docs/src/modules/components/JoyThemeBuilder.tsx +++ b/docs/src/modules/components/JoyThemeBuilder.tsx @@ -1268,7 +1268,15 @@ function getAvailableTokens(colorSchemes: any, colorMode: 'light' | 'dark') { return tokens; } -function TemplatesDialog({ children, data }: { children: React.ReactElement; data: any }) { +function TemplatesDialog({ + children, + data, +}: { + children: React.ReactElement<{ + onClick?: React.MouseEventHandler; + }>; + data: any; +}) { const [open, setOpen] = React.useState(false); const { map: templateMap } = sourceJoyTemplates(); const renderItem = (name: string, item: TemplateData) => { @@ -1339,9 +1347,9 @@ function TemplatesDialog({ children, data }: { children: React.ReactElement return ( {React.cloneElement(children, { - onClick: () => { + onClick: (event: React.MouseEvent) => { setOpen(true); - children.props.onClick?.(); + children.props.onClick?.(event); }, })} setOpen(false)}> diff --git a/packages/mui-material/src/Modal/useModal.ts b/packages/mui-material/src/Modal/useModal.ts index 4cb2b992beae60..6a14ec7b7eb9c7 100644 --- a/packages/mui-material/src/Modal/useModal.ts +++ b/packages/mui-material/src/Modal/useModal.ts @@ -24,6 +24,8 @@ function getHasTransition(children: UseModalParameters['children']) { return children ? children.props.hasOwnProperty('in') : false; } +const noop = () => {}; + // A modal manager used to track and manage the state of open Modals. // Modals don't open on the server so this won't conflict with concurrent requests. const manager = new ModalManager(); @@ -227,8 +229,8 @@ function useModal(parameters: UseModalParameters): UseModalReturnValue { }; return { - onEnter: createChainedFunction(handleEnter, children?.props.onEnter), - onExited: createChainedFunction(handleExited, children?.props.onExited), + onEnter: createChainedFunction(handleEnter, children?.props.onEnter ?? noop), + onExited: createChainedFunction(handleExited, children?.props.onExited ?? noop), }; }; diff --git a/packages/mui-material/src/Modal/useModal.types.ts b/packages/mui-material/src/Modal/useModal.types.ts index a67b240a9c5708..9b384f7688f70f 100644 --- a/packages/mui-material/src/Modal/useModal.types.ts +++ b/packages/mui-material/src/Modal/useModal.types.ts @@ -22,7 +22,14 @@ export type UseModalParameters = { /** * A single child content element. */ - children: React.ReactElement | undefined | null; + children: + | React.ReactElement<{ + in?: boolean; + onEnter?: (this: unknown) => void; + onExited?: (this: unknown) => void; + }> + | undefined + | null; /** * When set to true the Modal waits until a nested Transition is completed before closing. * @default false diff --git a/packages/mui-material/src/Slider/SliderValueLabel.types.ts b/packages/mui-material/src/Slider/SliderValueLabel.types.ts index 8fac93f872dcb8..378930f97e345e 100644 --- a/packages/mui-material/src/Slider/SliderValueLabel.types.ts +++ b/packages/mui-material/src/Slider/SliderValueLabel.types.ts @@ -1,5 +1,5 @@ export interface SliderValueLabelProps { - children?: React.ReactElement; + children?: React.ReactElement<{ className?: string; children?: React.ReactNode }>; className?: string; style?: React.CSSProperties; /** diff --git a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx index 0f6085f5b9f1d9..398a7b37421019 100644 --- a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx +++ b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx @@ -324,7 +324,7 @@ function FocusTrap(props: FocusTrapProps): React.JSX.Element { }; }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open, getTabbable]); - const onFocus = (event: FocusEvent) => { + const onFocus = (event: React.FocusEvent) => { if (nodeToRestore.current === null) { nodeToRestore.current = event.relatedTarget; } diff --git a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.types.ts b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.types.ts index 462100ec696479..399ddd84ea210a 100644 --- a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.types.ts +++ b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.types.ts @@ -24,7 +24,10 @@ export interface FocusTrapProps { /** * A single child content element. */ - children: React.ReactElement; + children: React.ReactElement<{ + onFocus?: React.FocusEventHandler; + ref?: React.RefCallback | null; + }>; /** * If `true`, the focus trap will not automatically shift focus to itself when it opens, and * replace it to the last focused element when it closes. diff --git a/packages/mui-styles/test/styles.spec.tsx b/packages/mui-styles/test/styles.spec.tsx index 8ed6a1d215f263..34ab5cac0f3711 100644 --- a/packages/mui-styles/test/styles.spec.tsx +++ b/packages/mui-styles/test/styles.spec.tsx @@ -215,7 +215,7 @@ withStyles((theme) => }); interface ListItemContentProps extends WithStyles { - children?: React.ReactElement; + children?: React.ReactElement; inset?: boolean; row?: boolean; } From 28ac35cf0f09c4f023a59191c3282affa4698cbf Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 28 Nov 2024 21:00:32 +0100 Subject: [PATCH 10/14] [core-infra] Remove useless fragments (#44516) --- .../templates/shared-theme/AppTheme.js | 3 +- .../templates/shared-theme/AppTheme.tsx | 7 +--- docs/pages/joy-ui/api/stack.json | 8 ++-- docs/pages/material-ui/api/container.json | 7 ++-- docs/pages/material-ui/api/grid-2.json | 14 ++++--- docs/pages/material-ui/api/stack.json | 8 ++-- docs/pages/system/api/container.json | 7 ++-- docs/pages/system/api/grid.json | 14 ++++--- docs/pages/system/api/stack.json | 8 ++-- .../ApiBuilders/ComponentApiBuilder.ts | 41 ++++++++++--------- .../utils/defaultPropsHandler.ts | 5 +++ .../utils/getPropsFromComponentNode.ts | 1 + .../ClickAwayListener/ClickAwayListener.tsx | 2 +- packages/mui-base/src/NoSsr/NoSsr.tsx | 4 +- packages/mui-base/src/Portal/Portal.tsx | 8 +--- .../ClickAwayListener/ClickAwayListener.tsx | 2 +- packages/mui-material/src/Hidden/HiddenJs.js | 3 +- packages/mui-material/src/NoSsr/NoSsr.tsx | 4 +- packages/mui-material/src/Portal/Portal.tsx | 8 +--- 19 files changed, 83 insertions(+), 71 deletions(-) diff --git a/docs/data/material/getting-started/templates/shared-theme/AppTheme.js b/docs/data/material/getting-started/templates/shared-theme/AppTheme.js index b1d55ca4408a14..6fde1fc9fd9be3 100644 --- a/docs/data/material/getting-started/templates/shared-theme/AppTheme.js +++ b/docs/data/material/getting-started/templates/shared-theme/AppTheme.js @@ -9,7 +9,8 @@ import { navigationCustomizations } from './customizations/navigation'; import { surfacesCustomizations } from './customizations/surfaces'; import { colorSchemes, typography, shadows, shape } from './themePrimitives'; -function AppTheme({ children, disableCustomTheme, themeComponents }) { +function AppTheme(props) { + const { children, disableCustomTheme, themeComponents } = props; const theme = React.useMemo(() => { return disableCustomTheme ? {} diff --git a/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx b/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx index 1fe35d6faeef48..a4a512c30aef59 100644 --- a/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx +++ b/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx @@ -17,11 +17,8 @@ interface AppThemeProps { themeComponents?: ThemeOptions['components']; } -export default function AppTheme({ - children, - disableCustomTheme, - themeComponents, -}: AppThemeProps) { +export default function AppTheme(props: AppThemeProps) { + const { children, disableCustomTheme, themeComponents } = props; const theme = React.useMemo(() => { return disableCustomTheme ? {} diff --git a/docs/pages/joy-ui/api/stack.json b/docs/pages/joy-ui/api/stack.json index 008afff7737bbc..8826d1eebc8a85 100644 --- a/docs/pages/joy-ui/api/stack.json +++ b/docs/pages/joy-ui/api/stack.json @@ -6,14 +6,16 @@ "type": { "name": "union", "description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object" - } + }, + "default": "'column'" }, "divider": { "type": { "name": "node" } }, "spacing": { "type": { "name": "union", "description": "Array<number
| string>
| number
| object
| string" - } + }, + "default": "0" }, "sx": { "type": { @@ -22,7 +24,7 @@ }, "additionalInfo": { "sx": true } }, - "useFlexGap": { "type": { "name": "bool" } } + "useFlexGap": { "type": { "name": "bool" }, "default": "false" } }, "name": "Stack", "imports": ["import Stack from '@mui/joy/Stack';", "import { Stack } from '@mui/joy';"], diff --git a/docs/pages/material-ui/api/container.json b/docs/pages/material-ui/api/container.json index 29b78f807d6157..0f60f58e920597 100644 --- a/docs/pages/material-ui/api/container.json +++ b/docs/pages/material-ui/api/container.json @@ -2,13 +2,14 @@ "props": { "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "component": { "type": { "name": "elementType" } }, - "disableGutters": { "type": { "name": "bool" } }, - "fixed": { "type": { "name": "bool" } }, + "disableGutters": { "type": { "name": "bool" }, "default": "false" }, + "fixed": { "type": { "name": "bool" }, "default": "false" }, "maxWidth": { "type": { "name": "union", "description": "'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| false
| string" - } + }, + "default": "'lg'" }, "sx": { "type": { diff --git a/docs/pages/material-ui/api/grid-2.json b/docs/pages/material-ui/api/grid-2.json index c4b4b854151cfd..7f74fa6b051eef 100644 --- a/docs/pages/material-ui/api/grid-2.json +++ b/docs/pages/material-ui/api/grid-2.json @@ -5,7 +5,8 @@ "type": { "name": "union", "description": "Array<number>
| number
| object" - } + }, + "default": "12" }, "columnSpacing": { "type": { @@ -13,12 +14,13 @@ "description": "Array<number
| string>
| number
| object
| string" } }, - "container": { "type": { "name": "bool" } }, + "container": { "type": { "name": "bool" }, "default": "false" }, "direction": { "type": { "name": "union", "description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object" - } + }, + "default": "'row'" }, "offset": { "type": { @@ -42,13 +44,15 @@ "type": { "name": "union", "description": "Array<number
| string>
| number
| object
| string" - } + }, + "default": "0" }, "wrap": { "type": { "name": "enum", "description": "'nowrap'
| 'wrap-reverse'
| 'wrap'" - } + }, + "default": "'wrap'" } }, "name": "Grid2", diff --git a/docs/pages/material-ui/api/stack.json b/docs/pages/material-ui/api/stack.json index ae424d7b57eea6..65e1dc1c8a28d2 100644 --- a/docs/pages/material-ui/api/stack.json +++ b/docs/pages/material-ui/api/stack.json @@ -6,14 +6,16 @@ "type": { "name": "union", "description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object" - } + }, + "default": "'column'" }, "divider": { "type": { "name": "node" } }, "spacing": { "type": { "name": "union", "description": "Array<number
| string>
| number
| object
| string" - } + }, + "default": "0" }, "sx": { "type": { @@ -22,7 +24,7 @@ }, "additionalInfo": { "sx": true } }, - "useFlexGap": { "type": { "name": "bool" } } + "useFlexGap": { "type": { "name": "bool" }, "default": "false" } }, "name": "Stack", "imports": ["import Stack from '@mui/material/Stack';", "import { Stack } from '@mui/material';"], diff --git a/docs/pages/system/api/container.json b/docs/pages/system/api/container.json index 3f094034d61076..ae5bd4660c2576 100644 --- a/docs/pages/system/api/container.json +++ b/docs/pages/system/api/container.json @@ -2,13 +2,14 @@ "props": { "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "component": { "type": { "name": "elementType" } }, - "disableGutters": { "type": { "name": "bool" } }, - "fixed": { "type": { "name": "bool" } }, + "disableGutters": { "type": { "name": "bool" }, "default": "false" }, + "fixed": { "type": { "name": "bool" }, "default": "false" }, "maxWidth": { "type": { "name": "union", "description": "'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| false
| string" - } + }, + "default": "'lg'" }, "sx": { "type": { diff --git a/docs/pages/system/api/grid.json b/docs/pages/system/api/grid.json index 3a3c9d23850287..4cd038309b7d7b 100644 --- a/docs/pages/system/api/grid.json +++ b/docs/pages/system/api/grid.json @@ -5,7 +5,8 @@ "type": { "name": "union", "description": "Array<number>
| number
| object" - } + }, + "default": "12" }, "columnSpacing": { "type": { @@ -13,12 +14,13 @@ "description": "Array<number
| string>
| number
| object
| string" } }, - "container": { "type": { "name": "bool" } }, + "container": { "type": { "name": "bool" }, "default": "false" }, "direction": { "type": { "name": "union", "description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object" - } + }, + "default": "'row'" }, "offset": { "type": { @@ -42,13 +44,15 @@ "type": { "name": "union", "description": "Array<number
| string>
| number
| object
| string" - } + }, + "default": "0" }, "wrap": { "type": { "name": "enum", "description": "'nowrap'
| 'wrap-reverse'
| 'wrap'" - } + }, + "default": "'wrap'" } }, "name": "Grid", diff --git a/docs/pages/system/api/stack.json b/docs/pages/system/api/stack.json index a5d69b0c81f265..2c838e2175b73d 100644 --- a/docs/pages/system/api/stack.json +++ b/docs/pages/system/api/stack.json @@ -6,14 +6,16 @@ "type": { "name": "union", "description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object" - } + }, + "default": "'column'" }, "divider": { "type": { "name": "node" } }, "spacing": { "type": { "name": "union", "description": "Array<number
| string>
| number
| object
| string" - } + }, + "default": "0" }, "sx": { "type": { @@ -22,7 +24,7 @@ }, "additionalInfo": { "sx": true } }, - "useFlexGap": { "type": { "name": "bool" } } + "useFlexGap": { "type": { "name": "bool" }, "default": "false" } }, "name": "Stack", "imports": ["import Stack from '@mui/system/Stack';", "import { Stack } from '@mui/system';"], diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts index 577dfae4a22407..02a81285bb3ddb 100644 --- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts +++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts @@ -697,13 +697,26 @@ export default async function generateComponentApi( const filename = componentInfo.filename; let reactApi: ComponentReactApi; - if (componentInfo.isSystemComponent || componentInfo.name === 'Grid2') { - try { + try { + reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), { + filename, + }); + } catch (error) { + // fallback to default logic if there is no `create*` definition. + if ((error as Error).message === 'No suitable component definition found.') { reactApi = docgenParse( src, (ast) => { let node; + // TODO migrate to react-docgen v6, using Babel AST now astTypes.visit(ast, { + visitFunctionDeclaration: (functionPath) => { + // @ts-ignore + if (functionPath.node.params[0].name === 'props') { + node = functionPath; + } + return false; + }, visitVariableDeclaration: (variablePath) => { const definitions: any[] = []; if (variablePath.node.declarations) { @@ -711,7 +724,6 @@ export default async function generateComponentApi( .get('declarations') .each((declarator: any) => definitions.push(declarator.get('init'))); } - definitions.forEach((definition) => { // definition.value.expression is defined when the source is in TypeScript. const expression = definition.value?.expression @@ -719,36 +731,25 @@ export default async function generateComponentApi( : definition; if (expression.value?.callee) { const definitionName = expression.value.callee.name; - if (definitionName === `create${componentInfo.name}`) { node = expression; } } }); - return false; }, }); return node; }, - defaultHandlers, - { filename }, - ); - } catch (error) { - // fallback to default logic if there is no `create*` definition. - if ((error as Error).message === 'No suitable component definition found.') { - reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), { + defaultHandlers.concat(muiDefaultPropsHandler), + { filename, - }); - } else { - throw error; - } + }, + ); + } else { + throw error; } - } else { - reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), { - filename, - }); } if (!reactApi.props) { diff --git a/packages/api-docs-builder/utils/defaultPropsHandler.ts b/packages/api-docs-builder/utils/defaultPropsHandler.ts index 9b49c019f1af88..6836e85cb677ec 100644 --- a/packages/api-docs-builder/utils/defaultPropsHandler.ts +++ b/packages/api-docs-builder/utils/defaultPropsHandler.ts @@ -131,6 +131,11 @@ function getExplicitPropsDeclaration( ): NodePath | undefined { const functionNode = getRenderBody(componentDefinition, importer); + // No function body available to inspect. + if (!functionNode.value) { + return undefined; + } + let propsPath: NodePath | undefined; // visitVariableDeclarator, can't use visit body.node since it looses scope information functionNode diff --git a/packages/api-docs-builder/utils/getPropsFromComponentNode.ts b/packages/api-docs-builder/utils/getPropsFromComponentNode.ts index d6af8aa4274a41..f3e1c63e3d4eb6 100644 --- a/packages/api-docs-builder/utils/getPropsFromComponentNode.ts +++ b/packages/api-docs-builder/utils/getPropsFromComponentNode.ts @@ -51,6 +51,7 @@ function isStyledFunction(node: ts.VariableDeclaration): boolean { ); } +// TODO update to reflect https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135 function getJSXLikeReturnValueFromFunction(type: ts.Type, project: TypeScriptProject) { return type .getCallSignatures() diff --git a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx index e84ca9b1382b42..5f8f4da604c046 100644 --- a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx +++ b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx @@ -209,7 +209,7 @@ function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element { return undefined; }, [handleClickAway, mouseEvent]); - return {React.cloneElement(children, childrenProps)}; + return React.cloneElement(children, childrenProps); } ClickAwayListener.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-base/src/NoSsr/NoSsr.tsx b/packages/mui-base/src/NoSsr/NoSsr.tsx index c637df94e70b61..8468d401c64a86 100644 --- a/packages/mui-base/src/NoSsr/NoSsr.tsx +++ b/packages/mui-base/src/NoSsr/NoSsr.tsx @@ -38,8 +38,8 @@ function NoSsr(props: NoSsrProps): React.JSX.Element { } }, [defer]); - // We need the Fragment here to force react-docgen to recognise NoSsr as a component. - return {mountedState ? children : fallback}; + // TODO casting won't be needed at one point https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135 + return (mountedState ? children : fallback) as React.JSX.Element; } NoSsr.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-base/src/Portal/Portal.tsx b/packages/mui-base/src/Portal/Portal.tsx index 830b229d8eb175..af607b51532adc 100644 --- a/packages/mui-base/src/Portal/Portal.tsx +++ b/packages/mui-base/src/Portal/Portal.tsx @@ -64,14 +64,10 @@ const Portal = React.forwardRef(function Portal( }; return React.cloneElement(children, newProps); } - return {children}; + return children; } - return ( - - {mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode} - - ); + return mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode; }) as React.ForwardRefExoticComponent>; Portal.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx index 6a695e84f78352..5987a8f04dc1c8 100644 --- a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx +++ b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx @@ -210,7 +210,7 @@ function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element { return undefined; }, [handleClickAway, mouseEvent]); - return {React.cloneElement(children, childrenProps)}; + return React.cloneElement(children, childrenProps); } ClickAwayListener.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-material/src/Hidden/HiddenJs.js b/packages/mui-material/src/Hidden/HiddenJs.js index b591452cef6299..a9ab0d0a965ee2 100644 --- a/packages/mui-material/src/Hidden/HiddenJs.js +++ b/packages/mui-material/src/Hidden/HiddenJs.js @@ -1,5 +1,4 @@ 'use client'; -import * as React from 'react'; import PropTypes from 'prop-types'; import exactProp from '@mui/utils/exactProp'; import withWidth, { isWidthDown, isWidthUp } from './withWidth'; @@ -50,7 +49,7 @@ function HiddenJs(props) { return null; } - return {children}; + return children; } HiddenJs.propTypes = { diff --git a/packages/mui-material/src/NoSsr/NoSsr.tsx b/packages/mui-material/src/NoSsr/NoSsr.tsx index c7e2dfbc191a6e..0b18a597a751ae 100644 --- a/packages/mui-material/src/NoSsr/NoSsr.tsx +++ b/packages/mui-material/src/NoSsr/NoSsr.tsx @@ -38,8 +38,8 @@ function NoSsr(props: NoSsrProps): React.JSX.Element { } }, [defer]); - // We need the Fragment here to force react-docgen to recognise NoSsr as a component. - return {mountedState ? children : fallback}; + // TODO casting won't be needed at one point https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135 + return (mountedState ? children : fallback) as React.JSX.Element; } NoSsr.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-material/src/Portal/Portal.tsx b/packages/mui-material/src/Portal/Portal.tsx index 8bd141d8a5f858..a028eb856836e0 100644 --- a/packages/mui-material/src/Portal/Portal.tsx +++ b/packages/mui-material/src/Portal/Portal.tsx @@ -64,14 +64,10 @@ const Portal = React.forwardRef(function Portal( }; return React.cloneElement(children, newProps); } - return {children}; + return children; } - return ( - - {mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode} - - ); + return mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode; }) as React.ForwardRefExoticComponent>; Portal.propTypes /* remove-proptypes */ = { From 7c0b7e8362fa2befb2efa191c864b57e525cc83a Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Fri, 29 Nov 2024 10:03:03 +0700 Subject: [PATCH 11/14] [material-ui] Skip `tonalOffset` from setting color channel (#44585) --- .../mui-material/src/styles/createTheme.test.js | 16 ++++++++++++++++ .../src/styles/createThemeWithVars.js | 4 ++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/styles/createTheme.test.js b/packages/mui-material/src/styles/createTheme.test.js index 26df7f1fdf6398..e4351045dffa8f 100644 --- a/packages/mui-material/src/styles/createTheme.test.js +++ b/packages/mui-material/src/styles/createTheme.test.js @@ -221,6 +221,22 @@ describe('createTheme', () => { expect(theme.colorSchemes.dark).to.not.equal(undefined); }); + it('should be able to customize tonal offset', () => { + const theme = createTheme({ + cssVariables: true, + palette: { + primary: { + main: green[500], + }, + tonalOffset: { + light: 0.1, + dark: 0.9, + }, + }, + }); + expect(theme.palette.primary.main).to.equal('#4caf50'); + }); + describe('spacing', () => { it('should provide the default spacing', () => { const theme = createTheme({ cssVariables: true }); diff --git a/packages/mui-material/src/styles/createThemeWithVars.js b/packages/mui-material/src/styles/createThemeWithVars.js index 9e1fd9f76707e9..fde30948676edf 100644 --- a/packages/mui-material/src/styles/createThemeWithVars.js +++ b/packages/mui-material/src/styles/createThemeWithVars.js @@ -40,7 +40,7 @@ function setColor(obj, key, defaultValue) { } function toRgb(color) { - if (!color || !color.startsWith('hsl')) { + if (typeof color !== 'string' || !color.startsWith('hsl')) { return color; } return hslToRgb(color); @@ -421,7 +421,7 @@ export default function createThemeWithVars(options = {}, ...args) { // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`. - if (colors && typeof colors === 'object') { + if (color !== 'tonalOffset' && colors && typeof colors === 'object') { // Silent the error for custom palettes. if (colors.main) { setColor(palette[color], 'mainChannel', safeColorChannel(toRgb(colors.main))); From d0a59894122d209958beda64e17f5987fef141b2 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Fri, 29 Nov 2024 13:45:11 +0700 Subject: [PATCH 12/14] [ThemeProvider] Optimize `theme` changes when enabling CSS theme variables (#44588) --- .../src/styles/ThemeProviderWithVars.test.js | 31 +++++++ .../src/cssVars/createCssVarsProvider.js | 92 ++++++++++--------- 2 files changed, 80 insertions(+), 43 deletions(-) diff --git a/packages/mui-material/src/styles/ThemeProviderWithVars.test.js b/packages/mui-material/src/styles/ThemeProviderWithVars.test.js index 57cc558313c691..e06a6d304d63dd 100644 --- a/packages/mui-material/src/styles/ThemeProviderWithVars.test.js +++ b/packages/mui-material/src/styles/ThemeProviderWithVars.test.js @@ -408,4 +408,35 @@ describe('[Material UI] ThemeProviderWithVars', () => { fireEvent.click(screen.getByText('Dark')); }).not.toErrorDev(); }); + + it('theme should remain the same when ThemeProvider rerenders', () => { + const theme = createTheme({ cssVariables: true }); + + function Inner() { + const upperTheme = useTheme(); + const themeRef = React.useRef(upperTheme); + const [changed, setChanged] = React.useState(false); + React.useEffect(() => { + if (themeRef.current !== upperTheme) { + setChanged(true); + } + }, [upperTheme]); + return changed ?
: null; + } + function App() { + const [, setState] = React.useState({}); + const rerender = () => setState({}); + return ( + + + + + ); + } + render(); + + fireEvent.click(screen.getByRole('button')); + + expect(screen.queryByTestId('theme-changed')).to.equal(null); + }); }); diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index e7a2a21febb207..64ed9f9fc4037d 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -48,6 +48,9 @@ export default function createCssVarsProvider(options) { const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext; + const defaultColorSchemes = {}; + const defaultComponents = {}; + function CssVarsProvider(props) { const { children, @@ -75,12 +78,12 @@ export default function createCssVarsProvider(options) { return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme; }, [themeProp]); const scopedTheme = initialTheme[themeId]; + const restThemeProp = scopedTheme || initialTheme; const { - colorSchemes = {}, - components = {}, + colorSchemes = defaultColorSchemes, + components = defaultComponents, cssVarPrefix, - ...restThemeProp - } = scopedTheme || initialTheme; + } = restThemeProp; const joinedColorSchemes = Object.keys(colorSchemes) .filter((k) => !!colorSchemes[k]) .join(','); @@ -126,42 +129,46 @@ export default function createCssVarsProvider(options) { colorScheme = ctx.colorScheme; } - // `colorScheme` is undefined on the server and hydration phase - const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme; + const memoTheme = React.useMemo(() => { + // `colorScheme` is undefined on the server and hydration phase + const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme; - // 2. get the `vars` object that refers to the CSS custom properties - const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars; + // 2. get the `vars` object that refers to the CSS custom properties + const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars; - // 3. Start composing the theme object - const theme = { - ...restThemeProp, - components, - colorSchemes, - cssVarPrefix, - vars: themeVars, - }; - if (typeof theme.generateSpacing === 'function') { - theme.spacing = theme.generateSpacing(); - } + // 3. Start composing the theme object + const theme = { + ...restThemeProp, + components, + colorSchemes, + cssVarPrefix, + vars: themeVars, + }; + if (typeof theme.generateSpacing === 'function') { + theme.spacing = theme.generateSpacing(); + } - // 4. Resolve the color scheme and merge it to the theme - if (calculatedColorScheme) { - const scheme = colorSchemes[calculatedColorScheme]; - if (scheme && typeof scheme === 'object') { - // 4.1 Merge the selected color scheme to the theme - Object.keys(scheme).forEach((schemeKey) => { - if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') { - // shallow merge the 1st level structure of the theme. - theme[schemeKey] = { - ...theme[schemeKey], - ...scheme[schemeKey], - }; - } else { - theme[schemeKey] = scheme[schemeKey]; - } - }); + // 4. Resolve the color scheme and merge it to the theme + if (calculatedColorScheme) { + const scheme = colorSchemes[calculatedColorScheme]; + if (scheme && typeof scheme === 'object') { + // 4.1 Merge the selected color scheme to the theme + Object.keys(scheme).forEach((schemeKey) => { + if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') { + // shallow merge the 1st level structure of the theme. + theme[schemeKey] = { + ...theme[schemeKey], + ...scheme[schemeKey], + }; + } else { + theme[schemeKey] = scheme[schemeKey]; + } + }); + } } - } + + return resolveTheme ? resolveTheme(theme) : theme; + }, [restThemeProp, colorScheme, components, colorSchemes, cssVarPrefix]); // 5. Declaring effects // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet. @@ -248,7 +255,7 @@ export default function createCssVarsProvider(options) { process.env.NODE_ENV === 'production' ? setMode : (newMode) => { - if (theme.colorSchemeSelector === 'media') { + if (memoTheme.colorSchemeSelector === 'media') { console.error( [ 'MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', @@ -270,7 +277,7 @@ export default function createCssVarsProvider(options) { setColorScheme, setMode, systemMode, - theme.colorSchemeSelector, + memoTheme.colorSchemeSelector, ], ); @@ -285,13 +292,12 @@ export default function createCssVarsProvider(options) { const element = ( - + {children} - {shouldGenerateStyleSheet && } + {shouldGenerateStyleSheet && ( + + )} ); From 452d971330cd5e7f85c24b23e91ef7567bb3c25d Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Sat, 30 Nov 2024 12:40:16 +0530 Subject: [PATCH 13/14] [Grid2] Add container styles from styleOverrides (#44598) --- packages/mui-material/src/Grid2/Grid2.test.js | 31 ++++++++++++++++++- packages/mui-material/src/Grid2/Grid2.tsx | 5 ++- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/Grid2/Grid2.test.js b/packages/mui-material/src/Grid2/Grid2.test.js index 87c952bca83cd7..533a3f0502d9e4 100644 --- a/packages/mui-material/src/Grid2/Grid2.test.js +++ b/packages/mui-material/src/Grid2/Grid2.test.js @@ -1,6 +1,8 @@ import * as React from 'react'; -import { createRenderer } from '@mui/internal-test-utils'; +import { createRenderer, screen } from '@mui/internal-test-utils'; import Grid2, { grid2Classes as classes } from '@mui/material/Grid2'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; +import { expect } from 'chai'; import describeConformance from '../../test/describeConformance'; // The main tests are in mui-system Grid folder @@ -20,4 +22,31 @@ describe('', () => { testVariantProps: { container: true, spacing: 5 }, skip: ['componentsProp', 'classesRoot'], })); + + it('should render with the container class', () => { + render(); + expect(screen.getByTestId('grid')).to.have.class(classes.container); + }); + + it('should have container styles passed from theme', () => { + const theme = createTheme({ + components: { + MuiGrid2: { + styleOverrides: { + container: { + padding: '11px', + }, + }, + }, + }, + }); + render( + + + hello + + , + ); + expect(screen.getByTestId('grid')).to.have.style('padding', '11px'); + }); }); diff --git a/packages/mui-material/src/Grid2/Grid2.tsx b/packages/mui-material/src/Grid2/Grid2.tsx index 1d2841bafa74c1..99c4148d33f2ef 100644 --- a/packages/mui-material/src/Grid2/Grid2.tsx +++ b/packages/mui-material/src/Grid2/Grid2.tsx @@ -127,7 +127,10 @@ const Grid2 = createGrid2({ createStyledComponent: styled('div', { name: 'MuiGrid2', slot: 'Root', - overridesResolver: (props, styles) => styles.root, + overridesResolver: (props, styles) => { + const { ownerState } = props; + return [styles.root, ownerState.container && styles.container]; + }, }), componentName: 'MuiGrid2', useThemeProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiGrid2' }), From e1b3bfa687e75d62db6f9a545f1f865f0a7e9273 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 1 Dec 2024 00:15:43 +0100 Subject: [PATCH 14/14] [docs-infra] Fix TOC RTL padding regression (#44535) --- .../modules/components/AppTableOfContents.js | 27 ++++++++----------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js index 5ee730cd054da9..8cfa63458e9d55 100644 --- a/docs/src/modules/components/AppTableOfContents.js +++ b/docs/src/modules/components/AppTableOfContents.js @@ -45,8 +45,7 @@ const NavList = styled(Typography)({ }); const NavItem = styled(Link, { - shouldForwardProp: (prop) => - prop !== 'active' && prop !== 'secondary' && prop !== 'secondarySubItem', + shouldForwardProp: (prop) => prop !== 'active' && prop !== 'level', })(({ theme }) => { const activeStyles = { borderLeftColor: (theme.vars || theme).palette.primary[200], @@ -67,9 +66,8 @@ const NavItem = styled(Link, { return [ { - '--_padding-left': '12px', boxSizing: 'border-box', - padding: theme.spacing('6px', 0, '6px', 'var(--_padding-left)'), + padding: '6px 0 6px 12px', borderLeft: `1px solid transparent`, display: 'block', fontSize: theme.typography.pxToRem(13), @@ -93,15 +91,15 @@ const NavItem = styled(Link, { }, }, { - props: ({ secondary }) => secondary, + props: ({ level }) => level === 2, style: { - '--_padding-left': theme.spacing(3), + padding: `6px 0 6px ${theme.spacing(3)}`, }, }, { - props: ({ secondarySubItem }) => secondarySubItem, + props: ({ level }) => level === 3, style: { - '--_padding-left': theme.spacing(4.5), + padding: `6px 0 6px ${theme.spacing(4.5)}`, }, }, ], @@ -250,15 +248,14 @@ export default function AppTableOfContents(props) { [], ); - const itemLink = (item, secondary, secondarySubItem) => ( + const itemLink = (item, level) => ( @@ -324,18 +321,16 @@ export default function AppTableOfContents(props) { {toc.map((item) => (
  • - {itemLink(item)} + {itemLink(item, 1)} {item.children.length > 0 ? ( {item.children.map((subitem) => (
  • - {itemLink(subitem, true)} + {itemLink(subitem, 2)} {subitem.children?.length > 0 ? ( {subitem.children.map((nestedSubItem) => ( -
  • - {itemLink(nestedSubItem, false, true)} -
    • +
  • {itemLink(nestedSubItem, 3)}
    • ))}     ) : null}