diff --git a/.circleci/config.yml b/.circleci/config.yml index 74998eba11ed6e..c10fe610fb550f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -338,7 +338,7 @@ jobs: <<: *defaults resource_class: 'medium+' docker: - - image: mcr.microsoft.com/playwright:v1.41.2-focal + - image: mcr.microsoft.com/playwright:v1.42.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -368,7 +368,7 @@ jobs: test_e2e: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.41.2-focal + - image: mcr.microsoft.com/playwright:v1.42.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -385,9 +385,10 @@ jobs: name: Test umd release command: pnpm test:umd test_e2e_website: + # NOTE: This workflow runs after successful docs deploy. See /test/e2e-website/README.md#ci <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.41.2-focal + - image: mcr.microsoft.com/playwright:v1.42.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -402,7 +403,7 @@ jobs: test_profile: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.41.2-focal + - image: mcr.microsoft.com/playwright:v1.42.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -429,7 +430,7 @@ jobs: test_regressions: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.41.2-focal + - image: mcr.microsoft.com/playwright:v1.42.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -483,7 +484,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack4/ docker: - - image: mcr.microsoft.com/playwright:v1.41.2-focal + - image: mcr.microsoft.com/playwright:v1.42.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -507,7 +508,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack5/ docker: - - image: mcr.microsoft.com/playwright:v1.41.2-focal + - image: mcr.microsoft.com/playwright:v1.42.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -531,7 +532,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/create-react-app/ docker: - - image: mcr.microsoft.com/playwright:v1.41.2-focal + - image: mcr.microsoft.com/playwright:v1.42.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -555,7 +556,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/snowpack/ docker: - - image: mcr.microsoft.com/playwright:v1.41.2-focal + - image: mcr.microsoft.com/playwright:v1.42.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -579,7 +580,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/vite/ docker: - - image: mcr.microsoft.com/playwright:v1.41.2-focal + - image: mcr.microsoft.com/playwright:v1.42.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -603,7 +604,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/esbuild/ docker: - - image: mcr.microsoft.com/playwright:v1.41.2-focal + - image: mcr.microsoft.com/playwright:v1.42.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -631,7 +632,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/gatsby/ docker: - - image: mcr.microsoft.com/playwright:v1.41.2-focal + - image: mcr.microsoft.com/playwright:v1.42.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -732,7 +733,7 @@ jobs: test_benchmark: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.41.2-focal + - image: mcr.microsoft.com/playwright:v1.42.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index d19d051a72b16a..6b395d8ebe8487 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -9,6 +9,7 @@ "packages/mui-base", "packages/mui-codemod", "packages/mui-core-downloads-tracker", + "packages/mui-docs", "packages/mui-icons-material", "packages/mui-joy", "packages/mui-lab", @@ -22,16 +23,13 @@ "packages/mui-system", "packages/mui-types", "packages/mui-utils", - "packages-internal/scripts", - "packages/zero-runtime", - "packages/zero-unplugin", - "packages/zero-vite-plugin", - "packages/zero-next-plugin" + "packages-internal/scripts" ], "publishDirectory": { "@mui/base": "packages/mui-base/build", "@mui/codemod": "packages/mui-codemod/build", "@mui/core-downloads-tracker": "packages/mui-core-downloads-tracker/build", + "@mui/docs": "packages/mui-docs/build", "@mui/icons-material": "packages/mui-icons-material/build", "@mui/internal-babel-macros": "packages/mui-babel-macros", "@mui/internal-markdown": "packages/markdown", @@ -48,11 +46,7 @@ "@mui/system": "packages/mui-system/build", "@mui/types": "packages/mui-types/build", "@mui/utils": "packages/mui-utils/build", - "@mui-internal/docs-utils": "packages/docs-utils", - "@mui/zero-runtime": "packages/zero-runtime", - "@mui/zero-unplugin": "packages/zero-unplugin", - "@mui/zero-vite-plugin": "packages/zero-vite-plugin", - "@mui/zero-next-plugin": "packages/zero-next-plugin" + "@mui-internal/docs-utils": "packages/docs-utils" }, "sandboxes": [ "/examples/material-ui-cra-ts", diff --git a/.eslintignore b/.eslintignore index d6b5b184b02ed5..5043b4bb97f494 100644 --- a/.eslintignore +++ b/.eslintignore @@ -19,12 +19,12 @@ /packages/mui-icons-material/src/*.js /packages/mui-icons-material/templateSvgIcon.js /packages/mui-utils/macros/__fixtures__/ -/packages/zero-runtime/utils/ -/packages/zero-runtime/processors/ -/packages/zero-runtime/exports/ -/packages/zero-runtime/theme/ -/packages/zero-runtime/tests/fixtures/ -/packages/zero-next-plugin/loader.js +/packages/pigment-react/utils/ +/packages/pigment-react/processors/ +/packages/pigment-react/exports/ +/packages/pigment-react/theme/ +/packages/pigment-react/tests/**/fixtures +/packages/pigment-nextjs-plugin/loader.js # Ignore fixtures /packages-internal/scripts/typescript-to-proptypes/test/*/* /test/bundling/fixtures/**/*.fixture.js diff --git a/.github/ISSUE_TEMPLATE/1.bug.yml b/.github/ISSUE_TEMPLATE/1.bug.yml index e765d2527d1d06..44f994ac9fd282 100644 --- a/.github/ISSUE_TEMPLATE/1.bug.yml +++ b/.github/ISSUE_TEMPLATE/1.bug.yml @@ -9,7 +9,7 @@ body: attributes: label: Search keywords description: | - Your issue may have already been reported! First search for duplicates among the [existing issues](https://github.com/mui/material-ui/issues). + Your issue may have already been reported! First search for duplicates among the [existing issues](https://github.com/mui/material-ui/issues?q=is%3Aopen+is%3Aclosed). If your issue isn't a duplicate, great! Please list the keywords you used so people in the future can find this one more easily: validations: required: true diff --git a/.github/ISSUE_TEMPLATE/2.feature.yml b/.github/ISSUE_TEMPLATE/2.feature.yml index b225d797ae8cd8..080e31177c3b1c 100644 --- a/.github/ISSUE_TEMPLATE/2.feature.yml +++ b/.github/ISSUE_TEMPLATE/2.feature.yml @@ -9,7 +9,7 @@ body: attributes: label: Search keywords description: | - Your issue may have already been reported! First search for duplicates among the [existing issues](https://github.com/mui/material-ui/issues). + Your issue may have already been reported! First search for duplicates among the [existing issues](https://github.com/mui/material-ui/issues?q=is%3Aopen+is%3Aclosed). If your issue isn't a duplicate, great! Please list the keywords you used so people in the future can find this one more easily: validations: required: true diff --git a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml index 8c41c69d7c074a..70d90a31e8a690 100644 --- a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml +++ b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml @@ -10,7 +10,7 @@ body: attributes: label: Search keywords description: | - Your issue may have already been reported! First search for duplicates among the [existing issues](https://github.com/mui/material-ui/issues). + Your issue may have already been reported! First search for duplicates among the [existing issues](https://github.com/mui/material-ui/issues?q=is%3Aopen+is%3Aclosed). If your issue isn't a duplicate, great! Please list the keywords you used so people in the future can find this one more easily: validations: required: true diff --git a/.github/ISSUE_TEMPLATE/5.priority-support.yml b/.github/ISSUE_TEMPLATE/5.priority-support.yml index fb19f4eb3b26d2..530a16772a5c62 100644 --- a/.github/ISSUE_TEMPLATE/5.priority-support.yml +++ b/.github/ISSUE_TEMPLATE/5.priority-support.yml @@ -11,7 +11,7 @@ body: attributes: label: Search keywords description: | - Your issue may have already been reported! First search for duplicates among the [existing issues](https://github.com/mui/material-ui/issues). + Your issue may have already been reported! First search for duplicates among the [existing issues](https://github.com/mui/material-ui/issues?q=is%3Aopen+is%3Aclosed). If your issue isn't a duplicate, great! Please list the keywords you used so people in the future can find this one more easily: required: true - type: checkboxes diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index e8fdeaebc8f1c8..6e8cfcc755e3d1 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -19,7 +19,7 @@ jobs: uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@e8893c57a1f3a2b659b6b55564fdfdbbd2982911 # v3.24.0 + uses: github/codeql-action/init@8a470fddafa5cbb6266ee11b37ef4d8aae19c571 # v3.24.6 with: languages: typescript config-file: ./.github/codeql/codeql-config.yml @@ -30,4 +30,4 @@ jobs: # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs # queries: security-extended,security-and-quality - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@e8893c57a1f3a2b659b6b55564fdfdbbd2982911 # v3.24.0 + uses: github/codeql-action/analyze@8a470fddafa5cbb6266ee11b37ef4d8aae19c571 # v3.24.6 diff --git a/.github/workflows/mark-duplicate.yml b/.github/workflows/mark-duplicate.yml index 15e82efe76c2bf..bb3b4df5b23a6d 100644 --- a/.github/workflows/mark-duplicate.yml +++ b/.github/workflows/mark-duplicate.yml @@ -14,7 +14,7 @@ jobs: issues: write steps: - name: mark-duplicate - uses: actions-cool/issues-helper@5457ae8d7c1dc20597a753501d30183ed8043c8b # v3.5.2 + uses: actions-cool/issues-helper@a610082f8ac0cf03e357eb8dd0d5e2ba075e017e # v3.6.0 with: actions: 'mark-duplicate' token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/no-response.yml b/.github/workflows/no-response.yml index d564b53d3247bc..f268f0c23959de 100644 --- a/.github/workflows/no-response.yml +++ b/.github/workflows/no-response.yml @@ -20,7 +20,7 @@ jobs: contents: read issues: write steps: - - uses: MBilalShafi/no-response-add-label@629add01d7b6f8e120811f978c42703736098947 + - uses: MBilalShafi/no-response-add-label@8336c12292902f27b931154c34ba4670cb9899a2 with: token: ${{ secrets.GITHUB_TOKEN }} # Number of days of inactivity before an Issue is closed for lack of response diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index 2e5e972eb11b22..e00b33d3986606 100644 --- a/.github/workflows/scorecards.yml +++ b/.github/workflows/scorecards.yml @@ -43,6 +43,6 @@ jobs: # Upload the results to GitHub's code scanning dashboard. - name: Upload to code-scanning - uses: github/codeql-action/upload-sarif@e8893c57a1f3a2b659b6b55564fdfdbbd2982911 # v3.24.0 + uses: github/codeql-action/upload-sarif@8a470fddafa5cbb6266ee11b37ef4d8aae19c571 # v3.24.6 with: sarif_file: results.sarif diff --git a/CHANGELOG.md b/CHANGELOG.md index d3e7f2c243f52e..c392f200b594fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,87 @@ # [Versions](https://mui.com/versions/) +## v5.15.12 + + + +_Mar 5, 2024_ + +A big thanks to the 21 contributors who made this release possible. +This release was mostly about 🐛 bug fixes and 📚 documentation improvements. + +### `@pigment-css/react@0.0.1`, `@pigment-css/nextjs-plugin@0.0.1`, `@pigment-css/vite-plugin@0.0.1`, & `@pigment-css/unplugin@0.0.1` + +- This is the first public release of our new zero-runtime CSS-in-JS library, Pigment CSS. + +### `@mui/material@5.15.12` + +- ​Support props callback type in theme variants (#40946) @ZeeshanTamboli +- ​[Alert] Convert to support zero runtime (#41230) @siriwatknp +- ​[Alert] Deprecate composed classes (#40688) @DiegoAndai +- ​[Button] Deprecate classes for v6 (#40675) @sai6855 +- ​[Checkbox] `large` size added in type (#34909) @smox +- ​[Chip] Deprecate composed classes (#41235) @sai6855 +- ​[Chip] Correct `deleteIconColorPrimary` and `deleteIconColorSecondary` class descriptions (#41231) @sai6855 +- ​Remove unused dev dependency on @mui/lab (#41198) @brijeshb42 +- ​[Slider] Deprecate components and componentProps props for v6 (#40777) @lhilgert9 + +### `@mui/system@5.15.12` + +- ​[pigment-css][material-ui] Render badge demos (#41353) @siriwatknp +- ​[pigment-css] Update to latest wyw version (#41363) @brijeshb42 +- ​[pigment-css] Rename scope to @pigment-css (#41354) @brijeshb42 +- ​[pigment-css] Rename zero-runtime to pigmentcss (#41317) @brijeshb42 +- ​Fix createSpacing return type (#41318) @matystroia +- ​[zero] Add support for styled tagged-template literals (#41268) @brijeshb42 +- ​[zero] Set up Material UI migration demos (#41267) @siriwatknp +- ​[zero] Move extendTheme to already existing @mui/zero-runtime/utils (#41254) @brijeshb42 +- ​[zero] Remove `object` intersection from CSS Fallback (#41271) @siriwatknp +- ​[zero] Minor wording changes in README (#41253) @brijeshb42 +- ​[zero] Prepare zero-runtime packages for public release (#41226) @brijeshb42 + +### `@mui/joy@5.0.0-beta.30` + +- ​[joy-ui][Autocomplete] Fix text overflow in Chip (#40229) @PunitSoniME + +### Docs + +- ​[base-ui] Update the docs post repo separation (#41328) @danilo-leal +- ​Fix missing partner link @oliviertassinari +- ​Update links to GitHub projects (#41297) @danilo-leal +- ​Standardize WAI-ARIA referencest @oliviertassinari +- ​Fix image layout shift when loading @oliviertassinari +- ​[joy-ui] Add stray adjustments throughout the docs (#41211) @danilo-leal +- ​[material-ui] Remove duplicated text at FAQ page (#41326) @zanivan +- ​[material-ui] Fix color mode toggle of the landing page template (#41293) @zanivan +- ​[system] Tweak the Usage demos (#41242) @danilo-leal +- ​[zero] Add a Why section on the README (#41284) @danilo-leal + +### Core + +- ​Revert "[utils] Port `useLocalStorageState` hook from Toolpad (#41096)" @oliviertassinari +- ​[blog] Add post about how MUI uses Toolpad (#40172) @prakhargupta1 +- ​[blog] No bundled demos in blog posts @oliviertassinari +- ​[code-infra] Embed translations in the @mui/docs package (#41246) @Janpot +- ​[code-infra] Prepare the markdown package for publishing (#41240) @michaldudak +- ​[code-infra] Unpin the version of docs-utils in scripts (#41232) @michaldudak +- ​[core] Use runtime agnostic setTimeout type @oliviertassinari +- ​[core] Remove window. reference for common globals @oliviertassinari +- ​[core] Add a script to build all packages (#40631) @michaldudak +- ​[docs-infra] Fix missing non breaking spaces @oliviertassinari +- ​[docs-infra] Add design customizations to the disclosure element (#41285) @danilo-leal +- ​[docs-infra] Adjust headings dark mode color (#41292) @danilo-leal +- ​[docs-infra] Fix Stack Overflow breaking space @oliviertassinari +- ​[docs-infra] Fix product selector popup not closing on route change (#41166) @divyammadhok +- ​[docs-infra] Improve fix blank links ad @oliviertassinari +- ​[docs-infra] Support interfaces for X docs (#41069) @alexfauquette +- ​[infra] Adjust the links to search for issues (#41008) @michelengelen +- ​[website] Move the `React Engineer - xCharts` to `Next roles` section (#41368) @DanailH +- ​[website] Add James to About Us (#41362) @atomiks +- ​[website] Polish Button outline primary medium (#41298) @oliviertassinari +- ​[website] Remove Heatmap chart from community plan on pricing table (#41081) @alexfauquette + +All contributors of this release in alphabetical order: @alexfauquette, @atomiks, @brijeshb42, @DanailH, @danilo-leal, @DiegoAndai, @divyammadhok, @Janpot, @lhilgert9, @matystroia, @michaldudak, @michelengelen, @mj12albert, @oliviertassinari, @prakhargupta1, @PunitSoniME, @sai6855, @siriwatknp, @smox, @zanivan, @ZeeshanTamboli + ## v5.15.11 @@ -49,7 +131,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements ### Docs -- [base-ui] Fix focus state demo in Base UI autocomplete (#41104) @oliviertassinari +- [base-ui] Fix focus state demo in Base UI autocomplete (#41104) @oliviertassinari - [base-ui] Update the Accessibility page demos design (#40995) @danilo-leal - [joy-ui] Fix LinearProgressWithLabel example (#41194) @khgiddon - [joy-ui] Fix 404 image on the docs @oliviertassinari @@ -72,7 +154,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - [blog] Add new product tags and stray adjustments (#41193) @danilo-leal - [blog] Simplify `/base-ui-2024-plans/` page (#41171) @oliviertassinari -- [blog] Add link to Base UI API changes RFC (#41089) @michaldudak +- [blog] Add link to Base UI API changes RFC (#41089) @michaldudak - [blog] Remove the "News" tag (#41208) @danilo-leal - [changelog] Remove @mui/system@5.15.10 (#41093) @michaldudak - [code-infra] Move typescript-to-proptypes to internal-scripts package (#41079) @michaldudak @@ -88,7 +170,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - [core] Increase node memory limit on Netlify build (#41111) @michaldudak - [core][Tooltip] Remove incorrect code comment (#41179) @ZeeshanTamboli - [core] Fix missing context display names (#41168) @oliviertassinari -- [core][base-ui] Remove `@mui/base` dev dependency from Base UI workspace (#41216) @ZeeshanTamboli +- [core][base-ui] Remove `@mui/base` dev dependency from Base UI workspace (#41216) @ZeeshanTamboli - [zero][demo] Fix sample next app build (#41197) @brijeshb42 - [docs-infra] Simplify copy logic (#41167) @oliviertassinari - [docs-infra] New way of providing API layout config (#41106) @alexfauquette @@ -138,10 +220,10 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - [Button][material-ui] Fix 'File upload' demo a11y (#40943) @oliviertassinari - [TableRow][material-ui] Escape markup in `children` prop so docgen tools don't parse it as HTML (#40992) @millerized -- [material-ui] Remove outdated example projects link (it uses Joy UI now) (#40913) @oliviertassinari +- [material-ui] Remove outdated example projects link (it uses Joy UI now) (#40913) @oliviertassinari - [material-ui] Fix the "Intro to the MUI ecosystem" link placement (#40988) @danilo-leal - Fix 301 redirection to StackBlitz @oliviertassinari -- Fix h1 on Joy UI templates @oliviertassinari +- Fix h1 on Joy UI templates @oliviertassinari - Have MUI workspace own the CodeSandbox @oliviertassinari - Add notification for mui x v7 beta (#41001) @joserodolfofreitas - Fix 301 links @oliviertassinari @@ -588,7 +670,7 @@ A big thanks to the 22 contributors who made this release possible. Here are som - Fix strange italic style @oliviertassinari - Fix references to ESLint @oliviertassinari - Fix 301 redirections @oliviertassinari -- Right-to-left revision and addition to Joy UI (#39158) @danilo-leal +- Right-to-left revision and addition to Joy UI (#39158) @danilo-leal ### Core @@ -680,7 +762,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - ​[docs-infra] Add stray design adjustments (#40347) @danilo-leal - ​[website] Fix Base UI page's component section imports & styles (#40231) @danilo-leal - ​[website] Fix outdated Nhost image link @oliviertassinari -- ​[website] Shorten Joy UI description, 7 chars too long @oliviertassinari +- ​[website] Shorten Joy UI description, 7 chars too long @oliviertassinari - ​[website] Update some social preview images (#40282) @danilo-leal All contributors of this release in alphabetical order: @aacevski, @anle9650, @danilo-leal, @DiegoAndai, @Kamino0, @lhilgert9, @michaldudak, @oliviertassinari, @sai6855, @siriwatknp, @Super-Kenil @@ -949,7 +1031,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som - ​Fix nested CSS warning (#39932) @mnajdova - ​Make integration searchable (#39967) @oliviertassinari - ​Fix use of quote in markdown (#39953) @oliviertassinari -- ​Show design links on Joy UI (#39955) @oliviertassinari +- ​Show design links on Joy UI (#39955) @oliviertassinari - ​Restore Algolia results when searching for "Figma" (#39956) @oliviertassinari - ​Fix two tone icon dark mode color (#39868) @mnajdova @@ -980,7 +1062,7 @@ _Nov 14, 2023_ A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨: -- 💫 Introduced new [Stepper](https://mui.com/joy-ui/react-stepper/) component in Joy UI (#39688) @siriwatknp +- 💫 Introduced new [Stepper](https://mui.com/joy-ui/react-stepper/) component in Joy UI (#39688) @siriwatknp - other 🐛 bug fixes and 📚 documentation improvements ### `@mui/material@5.14.18` @@ -1020,7 +1102,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som ## Core - ​[blog] MUI X late v6 blog post (#39700) @joserodolfofreitas -- ​[CHANGELOG] Correct the Joy UI version in the changelog (#39788) @michaldudak +- ​[CHANGELOG] Correct the Joy UI version in the changelog (#39788) @michaldudak - ​[core] Remove legacy docs files (#39860) @oliviertassinari - ​[core] Fix GitHub title tag consistency @oliviertassinari - ​[core] Make the API docs builder configurable per project (#39772) @michaldudak @@ -1102,7 +1184,7 @@ _Oct 31, 2023_ A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨: -- ✨ New highly requested Joy UI component: [Snackbar](https://mui.com/joy-ui/react-snackbar) (#38801) @ZeeshanTamboli +- ✨ New highly requested Joy UI component: [Snackbar](https://mui.com/joy-ui/react-snackbar) (#38801) @ZeeshanTamboli ### `@mui/material@5.14.16` @@ -1193,7 +1275,7 @@ A big thanks to the 17 contributors who made this release possible. - ​Update peer dep of @mui/material (#39398) @brijeshb42 -### `@mui/zero-runtime@0.0.1-alpha.0` +### `@pigment-css/react@0.0.1-alpha.0` - ​Implement typings for public runtime API (#39215) @brijeshb42 @@ -1374,7 +1456,7 @@ _Oct 3, 2023_ A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨: -- 🎨 Introduced color inversion utilities to Joy UI (#38916) @siriwatknp +- 🎨 Introduced color inversion utilities to Joy UI (#38916) @siriwatknp - 🚀 Added Chip and related TextField components to Material You @DiegoAndai, @mj12albert - 🏗️ Improve the Select's component a11y by adding the combobox role and aria-controls attribute (#38785) @xulingzhihou. If your tests require selecting the trigger element by the "button" role, then you'll have to change it to use the "combobox" role instead @@ -1589,7 +1671,7 @@ _Sep 13, 2023_ A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨: -- 🎉 Added the [`Drawer` component](https://mui.com/joy-ui/react-drawer/) to Joy UI (#38169) @mnajdova +- 🎉 Added the [`Drawer` component](https://mui.com/joy-ui/react-drawer/) to Joy UI (#38169) @mnajdova - ✨ Material UI's [`ButtonGroup` component](https://mui.com/material-ui/react-button-group/) now styles button elements within it correctly (#38520) @ZeeshanTamboli ### `@mui/material@5.14.9` @@ -1743,7 +1825,7 @@ A big thanks to the 25 contributors who made this release possible. - ​[docs] Clean up not used Usage files (#38715) @danilo-leal - ​[docs] Improve theme builder exceptions (#38709) @jyash97 - ​[docs] Polish Slider demos (#38759) @oliviertassinari -- ​[docs] Fix Joy UI docs link regression (#38761) @oliviertassinari +- ​[docs] Fix Joy UI docs link regression (#38761) @oliviertassinari - ​[docs] Fix typo @oliviertassinari - ​[docs] Fix e.g. typo (#38748) @oliviertassinari - ​[docs] Fix Next.js pages router example redirect link (#38750) @sai6855 @@ -1794,7 +1876,7 @@ A big thanks to the 11 contributors who made this release possible. This release - [useButton][base-ui] Accept arbitrary props in getRootProps and forward them (#38475) @DiegoAndai -### `@mui/zero-runtime@0.0.1-alpha.1` +### `@pigment-css/react@0.0.1-alpha.1` - [system][zero][tag] Add support for sx prop (#38535) @brijeshb42 @@ -1830,7 +1912,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som - 🚀 Added the [Popup](https://mui.com/base-ui/react-popup/) component to Base UI (#37960) @michaldudak It's intended to replace the Popper component, which uses the deprecated Popper JS library. The Popup is built on top of Floating UI and has a similar API to the Popper. -- 🚀 Added the [Accordion](https://mui.com/joy-ui/react-accordion/) component to Joy UI (#38164) @siriwatknp +- 🚀 Added the [Accordion](https://mui.com/joy-ui/react-accordion/) component to Joy UI (#38164) @siriwatknp - 🚀 Added InputBase and ButtonBase components to `material-next` (#38319) @DiegoAndai @mj12albert - 🔋 First iteration on the zero-runtime styling engine compatible with Server Components (#38378) @brijeshb42 @@ -1848,7 +1930,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som ### `@mui/joy@5.0.0-beta.3` -- [Accordion] Add Joy UI Accordion components (#38164) @siriwatknp +- [Accordion] Add Joy UI Accordion components (#38164) @siriwatknp - [Select] Add `required` prop (#38167) @siriwatknp - Miscellaneous fixes (#38462) @siriwatknp @@ -1857,7 +1939,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som - [ButtonBase] Add ButtonBase component (#38319) @DiegoAndai - [Input] Add InputBase component (#38392) @mj12albert -### `@mui/zero-runtime@0.0.1-alpha.0` +### `@pigment-css/react@0.0.1-alpha.0` - Implementation of styled tag processor for linaria (#38378) @brijeshb42 @@ -1903,7 +1985,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som ### Examples - [examples] Start to remove Gatsby (#38567) @oliviertassinari -- [examples][joy-ui] Fix Joy UI example CLI (#38531) @oliviertassinari +- [examples][joy-ui] Fix Joy UI example CLI (#38531) @oliviertassinari - [examples][joy-ui] Improve example when using Next Font (#38540) @mwskwong ### Core @@ -1988,7 +2070,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som ### Examples -- ​[examples] Add Joy UI + Vite.js + TypeScript example app (#37406) @nithins1 +- ​[examples] Add Joy UI + Vite.js + TypeScript example app (#37406) @nithins1 ### Core @@ -2073,7 +2155,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som - ​[docs][base] Add Tailwind CSS + plain CSS demo on the Button page (#38240) @alisasanib - ​[docs][Menu][base] Remove `Unstyled` prefix from demos' function names (#38270) @sai6855 - ​[docs] Add themeable component guide (#37908) @siriwatknp -- ​[docs] Fix Joy UI demo background color (#38307) @oliviertassinari +- ​[docs] Fix Joy UI demo background color (#38307) @oliviertassinari - ​[docs] Update API docs for Number Input component (#38301) @ZeeshanTamboli - ​[docs][joy-ui] Revise the theme typography page (#38285) @danilo-leal - ​[docs][joy-ui] Add TS demo for Menu Bar (#38308) @sai6855 @@ -2114,8 +2196,8 @@ _Jul 31, 2023_ A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨: -- 🚀 [Joy UI](https://mui.com/joy-ui/getting-started/) is now in Beta -- ✨ Refine [Joy UI](https://mui.com/joy-ui/getting-started/)'s default theme @siriwatknp @zanivan +- 🚀 [Joy UI](https://mui.com/joy-ui/getting-started/) is now in Beta +- ✨ Refine [Joy UI](https://mui.com/joy-ui/getting-started/)'s default theme @siriwatknp @zanivan - 🎉 Added Dropdown higher-level menu component [Base UI](https://mui.com/base-ui/getting-started/) @michaldudak - 💫 Added Material You [Badge](https://mui.com/material-ui/react-badge/#material-you-version) to `material-next` (#37850) @DiegoAndai @@ -2155,7 +2237,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som ### Docs -- ​[docs] Update Joy UI's package README (#38262) @ZeeshanTamboli +- ​[docs] Update Joy UI's package README (#38262) @ZeeshanTamboli - ​[docs][base-ui] Add new batch of coming soon pages (#38025) @danilo-leal - ​[docs] fix links to standardized examples (#38193) @emmanuel-ferdman - ​[docs-infra] Small design polish to the Diamond Sponsor container (#38257) @danilo-leal @@ -2222,7 +2304,7 @@ A big thanks to the 23 contributors who made this release possible. - ​[docs] Add listbox placement demo for Select (#38130) @sai6855 - ​[docs][base] Add Tailwind CSS & plain CSS demo on the Tabs page (#37910) @mnajdova - ​[docs][base] Add Tailwind CSS & plain CSS demos on the Textarea page (#37943) @zanivan -- ​[docs] Fix Joy UI menu example (#38140) @harikrishnanp +- ​[docs] Fix Joy UI menu example (#38140) @harikrishnanp - ​[docs] Remove translations section from contributing guide (#38125) @nikohoffren - ​[docs] Fix Base UI Button Tailwind CSS padding @oliviertassinari - ​[docs] Mention in hompage hero that Core is free (#38075) @mbrookes @@ -2230,11 +2312,11 @@ A big thanks to the 23 contributors who made this release possible. - ​[docs] Add Tailwind CSS & plain CSS demo on the table pagination page (#37937) @mnajdova - ​[docs] Implement the new API display design (#37405) @alexfauquette - ​[docs] Update migration installation code blocks (#38028) @danilo-leal -- ​[docs][joy] Revise the Joy UI Link page (#37829) @danilo-leal +- ​[docs][joy] Revise the Joy UI Link page (#37829) @danilo-leal - ​[docs][joy] Add playground for Card component (#37820) @Studio384 - ​[docs][joy] Add adjustments to the color inversion page (#37143) @danilo-leal - ​[docs][material] Improve documentation about adding custom colors (#37743) @DiegoAndai -- ​[examples] Fix Joy UI Next.js App Router font loading (#38095) @IgnacioUtrilla +- ​[examples] Fix Joy UI Next.js App Router font loading (#38095) @IgnacioUtrilla - ​[examples] Fix material-next Font Usage with next/font (#38026) @onderonur ### Core @@ -2265,7 +2347,7 @@ _Jul 19, 2023_ A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨: -- 💫 Introducing some new components for Joy UI: +- 💫 Introducing some new components for Joy UI: - [Skeleton](https://mui.com/joy-ui/react-skeleton/) component (#37893) @siriwatknp - [ToggleButton](https://mui.com/joy-ui/react-toggle-button-group/) (#37716) @siriwatknp - 🎉 Base UI has its own [landing page](https://www.mui.com/base-ui)! @@ -2291,7 +2373,7 @@ A big thanks to the 24 contributors who made this release possible. Here are som - ​[Joy][Select] Fix type error caused by custom variant (#37996) @OmPr366 - ​[ToggleButton][Joy] Add `ToggleButton` component (#37716) @siriwatknp -- ​[Skeleton] Add Joy UI `Skeleton` component (#37893) @siriwatknp +- ​[Skeleton] Add Joy UI `Skeleton` component (#37893) @siriwatknp ### `@mui/utils@5.14.1` @@ -2356,10 +2438,10 @@ _Jul 11, 2023_ A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨: -- 💫 Material UI, Joy UI, and Base UI are compatible with [Next.js App Router](https://nextjs.org/docs/app) (#37656) @mj12albert +- 💫 Material UI, Joy UI, and Base UI are compatible with [Next.js App Router](https://nextjs.org/docs/app) (#37656) @mj12albert - 📚 Added new guides for integrating with Next.js 13 App Router (#37656) @mj12albert - Ⓜ️ [Material UI guide](https://mui.com/material-ui/guides/next-js-app-router/) - - 🅙 [Joy UI guide](https://mui.com/joy-ui/integrations/next-js-app-router/) + - 🅙 [Joy UI guide](https://mui.com/joy-ui/integrations/next-js-app-router/) - 🅱️ [Base UI guide](https://mui.com/base-ui/guides/next-js-app-router/) - 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements. @@ -2401,7 +2483,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - [docs-infra] Fix code parser (#37828) @alexfauquette - [docs-infra] Fix `marked` deprecation warning (#37769) @alexfauquette - [docs-infra] Allows to use codeblock in the docs (#37643) @alexfauquette -- [docs-infra][joy] Change Joy UI's playground variant selector (#37821) @danilo-leal +- [docs-infra][joy] Change Joy UI's playground variant selector (#37821) @danilo-leal ### Core @@ -2512,7 +2594,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som ### `@mui/material@5.13.6` - ​[Autocomplete] Fixed autocomplete's existing option selection (#37012) @bencevoros -- ​[Autocomplete] Add hint demos to Material UI and Joy UI docs (#37496) @sai6855 +- ​[Autocomplete] Add hint demos to Material UI and Joy UI docs (#37496) @sai6855 - ​[Masonry] Fix ResizeObserver loop limit exceeded error (#37208) @hbjORbj - ​[Tooltip][material] Improve warning when Tooltip receives string child (#37530) @DiegoAndai - ​[Modal] Add missing members to ModalOwnProps (#37568) @ivp-dev @@ -2561,7 +2643,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som - ​[docs] Improve release guide (#37547) @DiegoAndai - ​[docs] Review fixes to the Material UI's "Example projects" page (#37444) @danilo-leal - ​[docs][joy] Add a messages template (#37546) @sernstberger -- ​[docs][joy] Add pages for coming soon Joy UI components (#36920) @danilo-leal +- ​[docs][joy] Add pages for coming soon Joy UI components (#36920) @danilo-leal - ​[docs][joy] Add design and consistency tweaks to the Playground (#37580) @danilo-leal - ​[docs] Add and revise Base UI + Create React App examples (#36825) @samuelsycamore - ​[docs-infra] Fix demos border radius (#37658) @oliviertassinari @@ -2587,7 +2669,7 @@ _Jun 12, 2023_ A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨: -- 💫 Added `ButtonGroup` component in Joy UI (#37407) @siriwatknp. +- 💫 Added `ButtonGroup` component in Joy UI (#37407) @siriwatknp. - 🐛 bug fixes and 📚 documentation improvements. ### `@mui/material@5.13.5` @@ -2805,7 +2887,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som - [docs] Remove upload button (#36844) @Bastian - [docs] Update link to overriding component structure guide (#36870) @hbjORbj - [docs] Fix Material Design templates (#37187) @oliviertassinari -- [docs] Fix link to Joy UI GitHub issues @oliviertassinari +- [docs] Fix link to Joy UI GitHub issues @oliviertassinari - [docs] Show default value for `filterOptions` prop in Autocomplete's API docs (#37230) @ZeeshanTamboli - [docs] Add summary and improve `test_static` CI doc in CONTRIBUTING readme file (#36711) @kriskw1999 - [docs] Update theme customization TypeScript (#35551) @siriwatknp @@ -2834,7 +2916,7 @@ _May 10, 2023_ A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨: - 🚀 Base UI is now in beta - all planned breaking changes are now complete! -- 🗺 We have a new [project roadmap](https://github.com/orgs/mui/projects/18/views/1) on GitHub where you can learn about what's coming next. +- 🗺 We have new [project boards](https://github.com/mui/material-ui/projects?query=is%3Aopen) on GitHub where you can learn about what's coming next. - 🐛 Various bug fixes, 📚 documentation and 🧪 testing improvements ### `@mui/material@5.13.0` @@ -3053,7 +3135,7 @@ A big thanks to the 12 contributors who made this release possible. Here are som ### Docs - ​[docs] Fix console error introduced by #36408 (#36980) @alexfauquette -- ​[docs] Add stray Joy UI documentation improvements (#36921) @danilo-leal +- ​[docs] Add stray Joy UI documentation improvements (#36921) @danilo-leal - ​[docs] Add Joy profile dashboard template (#36931) @siriwatknp - ​[docs] Fix 404 links (#36969) @oliviertassinari - ​[docs] Clarify when bundle size optimization is needed (#36823) @oliviertassinari @@ -3136,7 +3218,7 @@ A big thanks to the 16 contributors who made this release possible. This release - ​[docs][base] Move styles to the bottom of demos code for `TablePagination` (#36593) @gitstart - ​[docs] Remove the incorrect info about useButton's ref parameter (#36883) @michaldudak - ​[docs] Sync between projects (#36785) @oliviertassinari -- ​[docs] Add guides to overriding component structure in Base UI and Joy UI docs (#34990) @samuelsycamore +- ​[docs] Add guides to overriding component structure in Base UI and Joy UI docs (#34990) @samuelsycamore - ​[docs] Content changed from 'row' to 'orientation=horizontal' (#36858) @navedqb - ​[docs][Joy] `component`, `slots`, `slotProps` must be visible in Prop table in API docs (#36666) @hbjORbj - ​[docs][Select] Fix duplicate ID in small size Select demo (#36792) @sai6855 @@ -3242,15 +3324,15 @@ A big thanks to the 17 contributors who made this release possible. Here are som - [docs] Introduce markdown permalink to source (#36729) @oliviertassinari - [docs] Tabs API add slots section (#36769) @mnajdova - [docs] Update feedbacks management on slack (#36705) @alexfauquette -- [docs] Fix Joy UI URL to tokens (#36742) @oliviertassinari +- [docs] Fix Joy UI URL to tokens (#36742) @oliviertassinari - [docs] Add toggle-button coming soon page (#36618) @siriwatknp -- [docs] Fix typo on the Joy UI theme builder (#36734) @danilo-leal +- [docs] Fix typo on the Joy UI theme builder (#36734) @danilo-leal - [docs] Fix small typo (#36727) @RBerthier -- [docs] Fix Joy UI template broken image loading @oliviertassinari +- [docs] Fix Joy UI template broken image loading @oliviertassinari - [docs] Hide the default API column if it's empty (#36715) @mnajdova - [docs] Update Material UI Related Projects page (#34203) @viclafouch -- [docs] Revise Joy UI "Circular Progress" page (#36126) @LadyBluenotes -- [docs] Revise Joy UI "Radio" page (#35893) @DevinCLane +- [docs] Revise Joy UI "Circular Progress" page (#36126) @LadyBluenotes +- [docs] Revise Joy UI "Radio" page (#35893) @DevinCLane - [docs] Support Google Analytics 4 (#36123) @alexfauquette - [docs][material] Keep consistency in description of classes (#36631) @hbjORbj - [docs] Remove redundant files and fix regression (#36775) @ZeeshanTamboli @@ -3270,7 +3352,7 @@ _Mar 28, 2023_ A big thanks to the 10 contributors who made this release possible. We have one big highlight this week ✨: -- @siriwatknp made a [Theme Builder](https://mui.com/joy-ui/customization/theme-builder) for Joy UI 🎨 (#35741) +- @siriwatknp made a [Theme Builder](https://mui.com/joy-ui/customization/theme-builder) for Joy UI 🎨 (#35741) ### `@mui/material@5.11.15` @@ -3415,7 +3497,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som - ​[docs] Add blog post notification for v6 release (#36446) @joserodolfofreitas - ​[docs] Update link to v5 docs (#36421) @m4theushw - ​[docs] Fix 404 in the API page links (#36419) @oliviertassinari -- ​[docs][joy] Error in the exemplary Codesandbox of using Material UI and Joy UI together (#36462) @hbjORbj +- ​[docs][joy] Error in the exemplary Codesandbox of using Material UI and Joy UI together (#36462) @hbjORbj - ​[examples] Refactor to have better types in the Next.js + TypeScript examples (#36355) @erikian - ​[website] Fix layout shift when loading /blog/mui-x-v6/ @oliviertassinari - ​[website] Update stats (#36477) @hrutik7 @@ -3431,7 +3513,7 @@ _Mar 6, 2023_ A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨: - @michaldudak added the multiselect functionality to SelectUnstyled (#36274) -- @mnajdova updated `extendTheme` so that it can generate CSS variables with default values. This means that the `CssVarsProvider` is no longer required for Joy UI when using the default theme (#35739) +- @mnajdova updated `extendTheme` so that it can generate CSS variables with default values. This means that the `CssVarsProvider` is no longer required for Joy UI when using the default theme (#35739) - other 🐛 bug fixes and 📚 documentation improvements. ### `@mui/material@5.11.12` @@ -3451,7 +3533,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som - ​[core] Generate vars in `extendTheme` (#35739) @mnajdova - The `shouldSkipGeneratingVar` prop was moved from the `createCssVarsProvider`'s option to the `theme`. If the default theme does not use `extendTheme` from Material UI or Joy UI, it needs to be wrapped inside `unstable_createCssVarsTheme` - a util exported from the MUI System. Below is an example of how the migration should look like: + The `shouldSkipGeneratingVar` prop was moved from the `createCssVarsProvider`'s option to the `theme`. If the default theme does not use `extendTheme` from Material UI or Joy UI, it needs to be wrapped inside `unstable_createCssVarsTheme` - a util exported from the MUI System. Below is an example of how the migration should look like: ```diff import { @@ -3523,7 +3605,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som - ​[Joy] Change CSS variables naming for components (#36282) @hbjORbj - Joy UI has new naming standards of the CSS variables for its components. Below is an example of how the migration should look like: + Joy UI has new naming standards of the CSS variables for its components. Below is an example of how the migration should look like: ```diff - @@ -3574,7 +3656,7 @@ _Feb 27, 2023_ A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨: -- 📚 added API documentation for the slots in Base UI and Joy UI by @hbjORbj, for e.g. [SliderUnstyled API](https://mui.com/base-ui/api/slider-unstyled/#slots) +- 📚 added API documentation for the slots in Base UI and Joy UI by @hbjORbj, for e.g. [SliderUnstyled API](https://mui.com/base-ui/api/slider-unstyled/#slots) - other 🐛 bug fixes and 📚 documentation improvements. ### `@mui/material@5.11.11` @@ -3754,8 +3836,8 @@ A big thanks to the 17 contributors who made this release possible. Here are som - [docs] Fix demos showing TypeScript instead of JavaScript (#35850) @mj12albert - [docs] Update release instructions (#36113) @mj12albert - [docs] Rename `v6-alpha` to `v6-next` in navigation (#36102) @LukasTy -- [docs] Revise Joy UI "Input" page (#35970) @LadyBluenotes -- [docs] Revise Joy UI "Typography" page (#35868) @LadyBluenotes +- [docs] Revise Joy UI "Input" page (#35970) @LadyBluenotes +- [docs] Revise Joy UI "Typography" page (#35868) @LadyBluenotes ### Examples @@ -3781,7 +3863,7 @@ _Feb 7, 2023_ A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨: -- @siriwatknp added a new [`Sign In` template](https://mui.com/joy-ui/getting-started/templates/sign-in-side/) to Joy UI (#36019) +- @siriwatknp added a new [`Sign In` template](https://mui.com/joy-ui/getting-started/templates/sign-in-side/) to Joy UI (#36019) - 📚 Documentation improvements and 🐛 bug fixes as usual ### `@mui/material@5.11.8` @@ -3835,7 +3917,7 @@ _Jan 31, 2023_ A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨: -- @siriwatknp added `Table` component to Joy UI (#35872) +- @siriwatknp added `Table` component to Joy UI (#35872) - many other 🐛 bug fixes and 📚 documentation improvements ### `@mui/material@5.11.7` @@ -3855,7 +3937,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​[Joy] Replace `Joy[Component]` classname with `Mui[Component]` classname for all slots of components (#35718) @hbjORbj - - Renames the classname prefix of all Joy UI components from `'Joy'` to `'Mui'`. + - Renames the classname prefix of all Joy UI components from `'Joy'` to `'Mui'`. ```diff + - - - + handleMenuItemClick('table')} + selected={displayOption === 'table'} + data-ga-event-category="layout" + data-ga-event-action={sectionType} + data-ga-event-label="table" + > + + Table + + handleMenuItemClick('expanded')} + selected={displayOption === 'expanded'} + data-ga-event-category="layout" + data-ga-event-action={sectionType} + data-ga-event-label="expanded" + > + + Expanded list + + handleMenuItemClick('collapsed')} + selected={displayOption === 'collapsed'} + data-ga-event-category="layout" + data-ga-event-action={sectionType} + data-ga-event-label="collapsed" + > + + Collapsed list + + + ); } diff --git a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx index d49d35f8cc7236..b2c98cf1674cf9 100644 --- a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx +++ b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx @@ -81,13 +81,13 @@ export default function ClassesTable(props: ClassesTableProps) { return ( - + .{className} {displayClassKeys && ( {!isGlobal && {key}} )} - + - + {propName} {isRequired ? '*' : ''} {isOptional ? '?' : ''} @@ -200,7 +200,7 @@ export default function PropertiesTable(props: PropertiesTableProps) { )} )} - + {description && } {seeMoreDescription && (

({ - padding: theme.spacing(1), - marginBottom: theme.spacing(1), - marginRight: theme.spacing(1), - fontWeight: 600, - minHeight: 32, + padding: theme.spacing(0.5), + border: '1px solid', + borderColor: 'transparent', + fontWeight: theme.typography.fontWeightSemiBold, + minHeight: 30, minWidth: 0, - borderRadius: '12px', + borderRadius: '8px', '&:hover': { background: (theme.vars || theme).palette.grey[50], + borderColor: (theme.vars || theme).palette.divider, + color: (theme.vars || theme).palette.text.primary, }, ...theme.applyDarkStyles({ '&:hover': { + borderColor: (theme.vars || theme).palette.divider, background: (theme.vars || theme).palette.primaryDark[700], }, '&.Mui-selected': { @@ -54,21 +57,16 @@ export default function ComponentPageTabs(props) { sx={{ position: 'sticky', top: 65, // to be positioned below the app bar - mt: 1, - pt: 1, - mx: { - xs: -2, - sm: 0, - }, - px: { - xs: 2, - sm: 0, - }, - backgroundColor: (theme) => - theme.palette.mode === 'dark' ? theme.palette.primaryDark[900] : 'rgba(255,255,255)', + mt: 2, + mx: -1, + backgroundColor: 'background.default', borderBottom: 1, borderColor: 'divider', zIndex: 1000, + [`& .${tabsClasses.flexContainer}`]: { + p: 1, + gap: 1, + }, [`& .${tabsClasses.indicator}`]: { transition: 'none', }, @@ -82,20 +80,11 @@ export default function ComponentPageTabs(props) { }, }} > - + {headers.components?.length > 0 && ( - +

- +

{Object.keys(parameters).length > 0 ? ( - + {message.title} required={true}" - }, - "root": { "description": "Class applied to the root element." } - } + } + }, + "slotDescriptions": { "root": "The component that renders the root." } } diff --git a/docs/translations/translations.json b/docs/translations/translations.json index a79583b7a2a6ba..8f2b913c50c525 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -38,6 +38,7 @@ "/base-ui/getting-started/usage": "Usage", "/base-ui/getting-started/customization": "Customization", "/base-ui/getting-started/accessibility": "Accessibility", + "/base-ui/getting-started/roadmap": "Roadmap", "/base-ui/getting-started/support": "Support", "/base-ui/react-": "Components", "/base-ui/all-components": "All components", diff --git a/examples/joy-ui-cra-ts/README.md b/examples/joy-ui-cra-ts/README.md index 55d8c02e5bd8cf..01765382b76618 100644 --- a/examples/joy-ui-cra-ts/README.md +++ b/examples/joy-ui-cra-ts/README.md @@ -1,4 +1,4 @@ -# Joy UI - Create React App example in TypeScript +# Joy UI - Create React App example in TypeScript `@mui/joy` is still in early development and is not recommended for use in production. diff --git a/examples/joy-ui-nextjs-ts/README.md b/examples/joy-ui-nextjs-ts/README.md index ffac971f742fa5..796dc1137db89c 100644 --- a/examples/joy-ui-nextjs-ts/README.md +++ b/examples/joy-ui-nextjs-ts/README.md @@ -1,4 +1,4 @@ -# Joy UI - Next.js App Router with TypeScript +# Joy UI - Next.js App Router with TypeScript This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app). @@ -35,7 +35,7 @@ or: To learn more about this example: - [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Customizing Joy UI](https://mui.com/joy-ui/customization/approaches/) - approaches to customizing Joy UI. +- [Customizing Joy UI](https://mui.com/joy-ui/customization/approaches/) - approaches to customizing Joy UI. ## What's next? diff --git a/examples/joy-ui-vite-ts/README.md b/examples/joy-ui-vite-ts/README.md index a06f4ef1961e16..d4132910765647 100644 --- a/examples/joy-ui-vite-ts/README.md +++ b/examples/joy-ui-vite-ts/README.md @@ -1,6 +1,6 @@ -# Joy UI - Vite.js in TypeScript example +# Joy UI - Vite.js in TypeScript example -[Joy UI](https://mui.com/joy-ui/getting-started/) is a library of beautifully designed React UI components built to spark joy in the development process. +[Joy UI](https://mui.com/joy-ui/getting-started/) is a library of beautifully designed React UI components built to spark joy in the development process. [Vite](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects, consisting of a dev server and a build command. diff --git a/examples/pigment-css-nextjs-ts/.gitignore b/examples/pigment-css-nextjs-ts/.gitignore new file mode 100644 index 00000000000000..28c8a5adb7c034 --- /dev/null +++ b/examples/pigment-css-nextjs-ts/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +# next-env.d.ts diff --git a/examples/pigment-css-nextjs-ts/README.md b/examples/pigment-css-nextjs-ts/README.md new file mode 100644 index 00000000000000..f4ef7dd52a8ece --- /dev/null +++ b/examples/pigment-css-nextjs-ts/README.md @@ -0,0 +1,38 @@ +# Pigment CSS - Next.js App Router with TypeScript example project + +This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app), with TypeScript and Pigment CSS, a zero-runtime CSS-in-JS library, installed. + +## How to use + +Download the example [or clone the repo](https://github.com/mui/material-ui): + + + +```bash +curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/pigment-css-nextjs-ts +cd pigment-css-nextjs-ts +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +or: + + + +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/pigment-css-nextjs-ts) + +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/pigment-css-nextjs-ts) + +## Learn more + +To learn more about this example: + +- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/master/packages/pigment-react/README.md) - learn more about Pigment CSS features and APIs. +- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and APIs. diff --git a/examples/pigment-css-nextjs-ts/next-env.d.ts b/examples/pigment-css-nextjs-ts/next-env.d.ts new file mode 100644 index 00000000000000..4f11a03dc6cc37 --- /dev/null +++ b/examples/pigment-css-nextjs-ts/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/pigment-css-nextjs-ts/next.config.js b/examples/pigment-css-nextjs-ts/next.config.js new file mode 100644 index 00000000000000..2196cab8c75dda --- /dev/null +++ b/examples/pigment-css-nextjs-ts/next.config.js @@ -0,0 +1,28 @@ +const { withPigment, extendTheme } = require('@pigment-css/nextjs-plugin'); + +// To learn more about theming, visit https://github.com/mui/material-ui/blob/master/packages/zero-runtime/README.md#theming +const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + background: '0 0% 100%', + foreground: '240 10% 3.9%', + primary: '240 5.9% 10%', + border: '240 5.9% 90%', + }, + }, + dark: { + palette: { + background: '240 10% 3.9%', + foreground: '0 0% 80%', + primary: '0 0% 98%', + border: '240 3.7% 15.9%', + }, + }, + }, +}); + +/** @type {import('next').NextConfig} */ +const nextConfig = {}; + +module.exports = withPigment(nextConfig, { theme }); diff --git a/examples/pigment-css-nextjs-ts/package.json b/examples/pigment-css-nextjs-ts/package.json new file mode 100644 index 00000000000000..b2579629a61906 --- /dev/null +++ b/examples/pigment-css-nextjs-ts/package.json @@ -0,0 +1,27 @@ +{ + "name": "pigment-css-nextjs-ts", + "version": "5.0.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint", + "post-update": "echo \"codesandbox preview only, need an update\" && pnpm update --latest" + }, + "dependencies": { + "@pigment-css/react": "latest", + "react": "latest", + "react-dom": "latest", + "next": "latest" + }, + "devDependencies": { + "@pigment-css/nextjs-plugin": "latest", + "@types/node": "latest", + "@types/react": "latest", + "@types/react-dom": "latest", + "eslint": "latest", + "eslint-config-next": "latest", + "typescript": "latest" + } +} diff --git a/examples/pigment-css-nextjs-ts/public/.gitkeep b/examples/pigment-css-nextjs-ts/public/.gitkeep new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/examples/pigment-css-nextjs-ts/src/app/favicon.ico b/examples/pigment-css-nextjs-ts/src/app/favicon.ico new file mode 100644 index 00000000000000..e19f48f591206d Binary files /dev/null and b/examples/pigment-css-nextjs-ts/src/app/favicon.ico differ diff --git a/examples/pigment-css-nextjs-ts/src/app/globals.css b/examples/pigment-css-nextjs-ts/src/app/globals.css new file mode 100644 index 00000000000000..3dd82369c1b57d --- /dev/null +++ b/examples/pigment-css-nextjs-ts/src/app/globals.css @@ -0,0 +1,10 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +a { + color: inherit; + text-decoration: none; +} diff --git a/examples/pigment-css-nextjs-ts/src/app/layout.tsx b/examples/pigment-css-nextjs-ts/src/app/layout.tsx new file mode 100644 index 00000000000000..fb3a3b8adb2db7 --- /dev/null +++ b/examples/pigment-css-nextjs-ts/src/app/layout.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; +import type { Metadata } from 'next'; +import '@pigment-css/react/styles.css'; +import { css } from '@pigment-css/react'; + +import './globals.css'; + +export const metadata: Metadata = { + title: 'Create Next App', + description: 'Generated by create next app', +}; + +export default function RootLayout(props: { children: React.ReactNode }) { + return ( + + ({ + color: 'hsl(var(--palette-foreground))', + backgroundColor: 'hsl(var(--palette-background))', + fontFamily: + "system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + ...theme.applyStyles('dark', { + colorScheme: 'dark', + }), + }))} + > + {props.children} + + + ); +} diff --git a/examples/pigment-css-nextjs-ts/src/app/page.tsx b/examples/pigment-css-nextjs-ts/src/app/page.tsx new file mode 100644 index 00000000000000..109b5cbdad5f10 --- /dev/null +++ b/examples/pigment-css-nextjs-ts/src/app/page.tsx @@ -0,0 +1,198 @@ +import * as React from 'react'; +import { styled, css, keyframes } from '@pigment-css/react'; + +const scale = keyframes({ + to: { scale: 'var(--s2)' }, +}); + +const Link = styled('a', { shouldForwardProp: (prop) => prop !== 'outlined' })<{ + outlined?: boolean; +}>(({ theme }) => ({ + fontSize: '1rem', + background: 'rgba(0 0 0 / 0.04)', + padding: '0.8rem 1rem', + letterSpacing: '1px', + borderRadius: '8px', + textAlign: 'center', + ...theme.applyStyles('dark', { + background: 'rgba(255 255 255 / 0.1)', + }), + variants: [ + { + props: { outlined: true }, + style: { + background: 'transparent', + color: `hsl(${theme.vars.palette.primary})`, + border: `1px solid hsl(${theme.vars.palette.border})`, + }, + }, + ], +})); + +const Bubble = styled('span')({ + height: 'var(--size, 100%)', + aspectRatio: '1', + background: 'radial-gradient(hsl(var(--h) 100% 70%) 25%, transparent 50%)', + position: 'absolute', + display: 'inline-block', + left: 'var(--x, 0)', + top: 'var(--y, 0)', + scale: '0', + translate: '-50% -50%', + mixBlendMode: 'multiply', + filter: 'blur(2px)', + animation: `${scale} var(--s, 2s) var(--d, 0s) infinite alternate`, +}); + +function randomBetween(min: number, max: number) { + return Math.floor(Math.random() * (max - min + 1) + min); +} +function generateBubbleVars() { + return ` + --x: ${randomBetween(10, 90)}%; + --y: ${randomBetween(15, 85)}%; + --h: ${randomBetween(0, 360)}; + --s2: ${randomBetween(2, 6)}; + --d: -${randomBetween(250, 400) / 1000}s; + --s: ${randomBetween(3, 6)}s; + `; +} + +export default function Home() { + return ( +

+

({ + fontFamily: 'system-ui, sans-serif', + fontSize: '4rem', + fontWeight: 500, + textAlign: 'center', + position: 'relative', + display: 'flex', + alignItems: 'center', + color: '#888', + marginBottom: '1rem', + ...theme.applyStyles('dark', { color: '#fff' }), + }))}`} + > + Pigment CSS + ({ + position: 'absolute', + inset: '0', + background: 'white', + mixBlendMode: 'color-burn', + overflow: 'hidden', + pointerEvents: 'none', + ...theme.applyStyles('dark', { + mixBlendMode: 'darken', + filter: 'brightness(2)', + }), + }))} + > + + + + + + + + + + + +

+
+ CSS-in-JS library with static extraction +
+ +
*': { flex: 'auto' }, + })} + > + + Documentation + + + Roadmap + +
+
+ ); +} diff --git a/examples/pigment-css-nextjs-ts/src/augment.d.ts b/examples/pigment-css-nextjs-ts/src/augment.d.ts new file mode 100644 index 00000000000000..d10b46e01d4da0 --- /dev/null +++ b/examples/pigment-css-nextjs-ts/src/augment.d.ts @@ -0,0 +1,19 @@ +import type {} from '@pigment-css/react/theme'; +import type { ExtendTheme } from '@pigment-css/react'; + +declare module '@pigment-css/react/theme' { + export interface ThemeArgs { + theme: ExtendTheme<{ + colorScheme: 'light' | 'dark'; + tokens: { + palette: { + background: string; + foreground: string; + primary: string; + primaryForeground: string; + border: string; + }; + }; + }>; + } +} diff --git a/examples/pigment-css-nextjs-ts/tsconfig.json b/examples/pigment-css-nextjs-ts/tsconfig.json new file mode 100644 index 00000000000000..6a9c1a2e7a02a6 --- /dev/null +++ b/examples/pigment-css-nextjs-ts/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} diff --git a/examples/pigment-css-vite-ts/.gitignore b/examples/pigment-css-vite-ts/.gitignore new file mode 100644 index 00000000000000..a547bf36d8d11a --- /dev/null +++ b/examples/pigment-css-vite-ts/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/pigment-css-vite-ts/README.md b/examples/pigment-css-vite-ts/README.md new file mode 100644 index 00000000000000..ee0b8e25c330a7 --- /dev/null +++ b/examples/pigment-css-vite-ts/README.md @@ -0,0 +1,34 @@ +# Pigment CSS - Vite with TypeScript example project + +## How to use + +Download the example [or clone the repo](https://github.com/mui/material-ui): + + + +```bash +curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/pigment-css-vite-ts +cd pigment-css-vite-ts +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +or: + + + +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/pigment-css-vite-ts) + +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/pigment-css-vite-ts) + +## Learn more + +To learn more about this example: + +- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/master/packages/pigment-react/README.md) - learn more about Pigment CSS features and APIs. +- [Vite documentation](https://vitejs.dev/guide/) - learn about Vite features and APIs. diff --git a/examples/pigment-css-vite-ts/index.html b/examples/pigment-css-vite-ts/index.html new file mode 100644 index 00000000000000..33cbc8ad392ca2 --- /dev/null +++ b/examples/pigment-css-vite-ts/index.html @@ -0,0 +1,13 @@ + + + + + + + Pigment CSS + Vite + TypeScript + + +
+ + + diff --git a/examples/pigment-css-vite-ts/package.json b/examples/pigment-css-vite-ts/package.json new file mode 100644 index 00000000000000..8b61ac52d46cb2 --- /dev/null +++ b/examples/pigment-css-vite-ts/package.json @@ -0,0 +1,24 @@ +{ + "name": "pigment-css-vite-ts", + "private": true, + "version": "5.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@pigment-css/react": "latest", + "react": "latest", + "react-dom": "latest" + }, + "devDependencies": { + "@pigment-css/vite-plugin": "latest", + "@types/react": "latest", + "@types/react-dom": "latest", + "@vitejs/plugin-react": "latest", + "typescript": "latest", + "vite": "latest" + } +} diff --git a/examples/pigment-css-vite-ts/public/vite.svg b/examples/pigment-css-vite-ts/public/vite.svg new file mode 100644 index 00000000000000..e7b8dfb1b2a60b --- /dev/null +++ b/examples/pigment-css-vite-ts/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/pigment-css-vite-ts/src/App.tsx b/examples/pigment-css-vite-ts/src/App.tsx new file mode 100644 index 00000000000000..cbc7ed15dc3740 --- /dev/null +++ b/examples/pigment-css-vite-ts/src/App.tsx @@ -0,0 +1,198 @@ +import * as React from 'react'; +import { styled, css, keyframes } from '@pigment-css/react'; + +const scale = keyframes({ + to: { scale: 'var(--s2)' }, +}); + +const Link = styled('a', { shouldForwardProp: (prop) => prop !== 'outlined' })<{ + outlined?: boolean; +}>(({ theme }) => ({ + fontSize: '1rem', + background: 'rgba(0 0 0 / 0.04)', + padding: '0.8rem 1rem', + letterSpacing: '1px', + borderRadius: '8px', + textAlign: 'center', + ...theme.applyStyles('dark', { + background: 'rgba(255 255 255 / 0.1)', + }), + variants: [ + { + props: { outlined: true }, + style: { + background: 'transparent', + color: `hsl(${theme.vars.palette.primary})`, + border: `1px solid hsl(${theme.vars.palette.border})`, + }, + }, + ], +})); + +const Bubble = styled('span')({ + height: 'var(--size, 100%)', + aspectRatio: '1', + background: 'radial-gradient(hsl(var(--h) 100% 70%) 25%, transparent 50%)', + position: 'absolute', + display: 'inline-block', + left: 'var(--x, 0)', + top: 'var(--y, 0)', + scale: '0', + translate: '-50% -50%', + mixBlendMode: 'multiply', + filter: 'blur(2px)', + animation: `${scale} var(--s, 2s) var(--d, 0s) infinite alternate`, +}); + +function randomBetween(min: number, max: number) { + return Math.floor(Math.random() * (max - min + 1) + min); +} + +function generateBubbleVars() { + return ` + --x: ${randomBetween(10, 90)}%; + --y: ${randomBetween(15, 85)}%; + --h: ${randomBetween(0, 360)}; + --s2: ${randomBetween(2, 6)}; + --d: -${randomBetween(250, 400) / 1000}s; + --s: ${randomBetween(3, 6)}s; + `; +} + +export default function Home() { + return ( +
+

({ + fontFamily: 'system-ui, sans-serif', + fontSize: '4rem', + fontWeight: 500, + textAlign: 'center', + position: 'relative', + display: 'flex', + alignItems: 'center', + color: '#888', + marginBottom: '1rem', + ...theme.applyStyles('dark', { color: '#fff' }), + }))}`} + > + Pigment CSS + ({ + position: 'absolute', + inset: '0', + background: 'white', + mixBlendMode: 'color-burn', + overflow: 'hidden', + pointerEvents: 'none', + ...theme.applyStyles('dark', { + mixBlendMode: 'darken', + filter: 'brightness(2)', + }), + }))} + > + + + + + + + + + + + +

+
+ CSS-in-JS library with static extraction +
+
+ + Documentation + + + Roadmap + +
+
+ ); +} diff --git a/examples/pigment-css-vite-ts/src/augment.d.ts b/examples/pigment-css-vite-ts/src/augment.d.ts new file mode 100644 index 00000000000000..d10b46e01d4da0 --- /dev/null +++ b/examples/pigment-css-vite-ts/src/augment.d.ts @@ -0,0 +1,19 @@ +import type {} from '@pigment-css/react/theme'; +import type { ExtendTheme } from '@pigment-css/react'; + +declare module '@pigment-css/react/theme' { + export interface ThemeArgs { + theme: ExtendTheme<{ + colorScheme: 'light' | 'dark'; + tokens: { + palette: { + background: string; + foreground: string; + primary: string; + primaryForeground: string; + border: string; + }; + }; + }>; + } +} diff --git a/apps/zero-runtime-next-app/src/app/globals.css b/examples/pigment-css-vite-ts/src/globals.css similarity index 76% rename from apps/zero-runtime-next-app/src/app/globals.css rename to examples/pigment-css-vite-ts/src/globals.css index f986282c43ac47..a1e5313f646dca 100644 --- a/apps/zero-runtime-next-app/src/app/globals.css +++ b/examples/pigment-css-vite-ts/src/globals.css @@ -4,12 +4,6 @@ margin: 0; } -html, -body { - max-width: 100vw; - overflow-x: hidden; -} - a { color: inherit; text-decoration: none; diff --git a/examples/pigment-css-vite-ts/src/main.tsx b/examples/pigment-css-vite-ts/src/main.tsx new file mode 100644 index 00000000000000..71b2cfa8aa8868 --- /dev/null +++ b/examples/pigment-css-vite-ts/src/main.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom/client'; +import '@pigment-css/react/styles.css'; +import './globals.css'; +import App from './App'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/pigment-css-vite-ts/src/vite-env.d.ts b/examples/pigment-css-vite-ts/src/vite-env.d.ts new file mode 100644 index 00000000000000..11f02fe2a0061d --- /dev/null +++ b/examples/pigment-css-vite-ts/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/pigment-css-vite-ts/tsconfig.json b/examples/pigment-css-vite-ts/tsconfig.json new file mode 100644 index 00000000000000..3d0a51a86e2024 --- /dev/null +++ b/examples/pigment-css-vite-ts/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/pigment-css-vite-ts/tsconfig.node.json b/examples/pigment-css-vite-ts/tsconfig.node.json new file mode 100644 index 00000000000000..9d31e2aed93c87 --- /dev/null +++ b/examples/pigment-css-vite-ts/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/pigment-css-vite-ts/vite.config.ts b/examples/pigment-css-vite-ts/vite.config.ts new file mode 100644 index 00000000000000..1a6ee2cd2f8942 --- /dev/null +++ b/examples/pigment-css-vite-ts/vite.config.ts @@ -0,0 +1,35 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import { pigment, extendTheme } from '@pigment-css/vite-plugin'; + +// To learn more about theming, visit https://github.com/mui/material-ui/blob/master/packages/zero-runtime/README.md#theming +const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + background: '0 0% 100%', + foreground: '240 10% 3.9%', + primary: '240 5.9% 10%', + border: '240 5.9% 90%', + }, + }, + dark: { + palette: { + background: '240 10% 3.9%', + foreground: '0 0% 80%', + primary: '0 0% 98%', + border: '240 3.7% 15.9%', + }, + }, + }, +}); + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + pigment({ + theme, + }), + react(), + ], +}); diff --git a/package.json b/package.json index 8dd8cc42e5d3ea..a8bf59a37a6a95 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mui/monorepo", - "version": "5.15.11", + "version": "5.15.12", "private": true, "scripts": { "preinstall": "npx only-allow pnpm", @@ -10,8 +10,8 @@ "build": "lerna run build --ignore docs", "build:public": "lerna run --no-private build", "build:ci": "lerna run build --ignore docs --concurrency 8 --skip-nx-cache", - "build:zero": "lerna run --scope \"@mui/zero-*\" build", - "clean:zero": "pnpm --filter \"@mui/zero-*\" clean", + "build:zero": "lerna run --scope \"@pigmentcss/*\" build", + "clean:zero": "pnpm --filter \"@pigmentcss/*\" clean", "build:codesandbox": "NODE_OPTIONS=\"--max_old_space_size=4096\" lerna run --concurrency 8 --scope \"@mui/*\" --scope \"@mui-internal/*\" --no-private build", "release:version": "lerna version --no-changelog --no-push --no-git-tag-version --no-private --force-publish=@mui/core-downloads-tracker", "release:build": "lerna run --concurrency 8 --no-private build --skip-nx-cache", @@ -54,9 +54,9 @@ "test": "node scripts/test.mjs", "tc": "node test/cli.js", "test:extended": "pnpm eslint && pnpm typescript && pnpm test:coverage", - "test:zero-runtime:ci": "pnpm nx run @mui/zero-runtime:test:ci", - "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' --exclude 'packages/zero-runtime/**/*.test.{js,ts,tsx}' && pnpm test:zero-runtime", - "test:coverage:ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' --exclude 'packages/zero-runtime/**/*.test.{js,ts,tsx}' && pnpm test:zero-runtime:ci", + "test:pigment-react:ci": "pnpm nx run @pigment-css/react:test:ci", + "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' --exclude 'packages/pigment-react/**/*.test.{js,ts,tsx}' && pnpm test:pigment-react", + "test:coverage:ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' --exclude 'packages/pigment-react/**/*.test.{js,ts,tsx}' && pnpm test:pigment-react:ci", "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=html mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", "test:e2e": "cross-env NODE_ENV=production pnpm test:e2e:build && concurrently --success first --kill-others \"pnpm test:e2e:run\" \"pnpm test:e2e:server\"", "test:e2e:build": "webpack --config test/e2e/webpack.config.js", @@ -76,19 +76,19 @@ "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", "test:argos": "node ./scripts/pushArgos.mjs", "typescript": "lerna run --no-bail --parallel typescript", - "typescript:ci": "lerna run --concurrency 5 --no-bail --no-sort typescript", + "typescript:ci": "lerna run --concurrency 3 --no-bail --no-sort typescript", "validate-declarations": "tsx scripts/validateTypescriptDeclarations.mts", "generate-codeowners": "node scripts/generateCodeowners.mjs", - "watch:zero": "nx run-many -t watch --projects=\"@mui/zero-*\" --parallel" + "watch:zero": "nx run-many -t watch --projects=\"@pigmentcss/*\" --parallel" }, "dependencies": { "@googleapis/sheets": "^5.0.5", "@slack/bolt": "^3.17.1", "execa": "^8.0.1", - "google-auth-library": "^9.5.0" + "google-auth-library": "^9.6.3" }, "devDependencies": { - "@argos-ci/core": "^1.5.3", + "@argos-ci/core": "^1.5.4", "@babel/cli": "^7.23.9", "@babel/core": "^7.23.9", "@babel/node": "^7.23.9", @@ -112,14 +112,15 @@ "@mui/joy": "workspace:*", "@mui/material": "workspace:^", "@mui/utils": "workspace:^", - "@next/eslint-plugin-next": "^14.1.0", + "@pigment-css/react": "workspace:^", + "@next/eslint-plugin-next": "^14.1.1", "@octokit/rest": "^20.0.2", - "@playwright/test": "1.41.2", + "@playwright/test": "1.42.1", "@types/enzyme": "^3.10.18", "@types/fs-extra": "^11.0.4", "@types/lodash": "^4.14.202", "@types/mocha": "^10.0.6", - "@types/node": "^18.19.15", + "@types/node": "^18.19.21", "@types/prettier": "^2.7.3", "@types/react": "^18.2.55", "@types/yargs": "^17.0.32", @@ -150,13 +151,13 @@ "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-material-ui": "workspace:^", - "eslint-plugin-mocha": "^10.2.0", + "eslint-plugin-mocha": "^10.3.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "fast-glob": "^3.3.2", "fs-extra": "^11.2.0", - "globby": "^14.0.0", - "karma": "^6.4.2", + "globby": "^14.0.1", + "karma": "^6.4.3", "karma-browserstack-launcher": "~1.6.0", "karma-chrome-launcher": "^3.2.0", "karma-coverage-istanbul-reporter": "^3.0.3", @@ -164,13 +165,13 @@ "karma-mocha": "^2.0.1", "karma-sourcemap-loader": "^0.4.0", "karma-webpack": "^5.0.0", - "lerna": "^8.0.2", + "lerna": "^8.1.2", "lodash": "^4.17.21", "markdownlint-cli2": "^0.12.1", - "mocha": "^10.2.0", + "mocha": "^10.3.0", "nx": "^17.2.8", "nyc": "^15.1.0", - "piscina": "^4.3.1", + "piscina": "^4.4.0", "postcss-styled-syntax": "^0.6.4", "prettier": "^3.2.5", "pretty-quick": "^4.0.0", @@ -185,12 +186,12 @@ "tsup": "^8.0.2", "tsx": "^4.7.1", "typescript": "^5.3.3", - "webpack": "^5.90.1", + "webpack": "^5.90.3", "webpack-bundle-analyzer": "^4.10.1", "webpack-cli": "^5.1.4", "yargs": "^17.7.2" }, - "packageManager": "pnpm@8.15.1", + "packageManager": "pnpm@8.15.4", "resolutions": { "@babel/core": "^7.23.9", "@babel/code-frame": "^7.23.5", @@ -206,10 +207,10 @@ "@babel/preset-typescript": "^7.23.3", "@babel/runtime": "^7.23.9", "@babel/types": "^7.23.9", - "@definitelytyped/header-parser": "^0.2.3", + "@definitelytyped/header-parser": "^0.2.6", "@definitelytyped/typescript-versions": "^0.1.0", - "@definitelytyped/utils": "^0.1.2", - "@types/node": "^18.19.15", + "@definitelytyped/utils": "^0.1.5", + "@types/node": "^18.19.21", "@types/react": "^18.2.55", "@types/react-dom": "18.2.19", "cross-fetch": "^4.0.0" diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json index 755c1b94c8305e..dfdea9913a2cfe 100644 --- a/packages-internal/scripts/package.json +++ b/packages-internal/scripts/package.json @@ -39,10 +39,10 @@ "devDependencies": { "@babel/register": "^7.23.7", "@types/babel__core": "^7.20.5", - "@types/chai": "^4.3.11", + "@types/chai": "^4.3.12", "@types/doctrine": "^0.0.9", "@types/lodash": "^4.14.202", - "@types/node": "^18.19.15", + "@types/node": "^18.19.21", "@types/prettier": "^2.7.3", "@types/react": "^18.2.55", "@types/uuid": "^9.0.8", diff --git a/packages/api-docs-builder-core/package.json b/packages/api-docs-builder-core/package.json index aa4dc20a1f6fc2..76d3feff4753e1 100644 --- a/packages/api-docs-builder-core/package.json +++ b/packages/api-docs-builder-core/package.json @@ -15,9 +15,9 @@ "lodash": "^4.17.21" }, "devDependencies": { - "@types/chai": "^4.3.11", + "@types/chai": "^4.3.12", "@types/mocha": "^10.0.6", - "@types/node": "^18.19.15", + "@types/node": "^18.19.21", "@types/sinon": "^10.0.20", "chai": "^4.4.1", "sinon": "^15.2.0", diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json index ab819321b1f584..6ed2ac331eccfe 100644 --- a/packages/api-docs-builder/package.json +++ b/packages/api-docs-builder/package.json @@ -20,7 +20,7 @@ "lodash": "^4.17.21", "prettier": "^3.2.5", "react-docgen": "^5.4.3", - "recast": "^0.23.4", + "recast": "^0.23.5", "remark": "^13.0.0", "typescript": "^5.3.3", "unist-util-visit": "^2.0.3" @@ -28,11 +28,11 @@ "devDependencies": { "@types/babel__core": "^7.20.5", "@types/babel__traverse": "^7.20.5", - "@types/chai": "^4.3.11", + "@types/chai": "^4.3.12", "@types/doctrine": "^0.0.9", "@types/mdast": "4.0.3", "@types/mocha": "^10.0.6", - "@types/node": "^18.19.15", + "@types/node": "^18.19.21", "@types/react-docgen": "workspace:*", "@types/sinon": "^10.0.20", "chai": "^4.4.1", diff --git a/packages/feedback/package.json b/packages/feedback/package.json index a7cdd46eea7500..9a409066be134a 100644 --- a/packages/feedback/package.json +++ b/packages/feedback/package.json @@ -25,6 +25,6 @@ "claudia": "^5.14.1" }, "optionalDependencies": { - "aws-sdk": "^2.1545.0" + "aws-sdk": "^2.1569.0" } } diff --git a/packages/markdown/package.json b/packages/markdown/package.json index 4b799f5e3f95b2..e7067fa50d9507 100644 --- a/packages/markdown/package.json +++ b/packages/markdown/package.json @@ -26,7 +26,7 @@ "prismjs": "^1.29.0" }, "devDependencies": { - "@types/chai": "^4.3.11", + "@types/chai": "^4.3.12", "chai": "^4.4.1" }, "publishConfig": { diff --git a/packages/markdown/prepareMarkdown.js b/packages/markdown/prepareMarkdown.js index 31e2a95a9e710b..c66fbfebfc21cc 100644 --- a/packages/markdown/prepareMarkdown.js +++ b/packages/markdown/prepareMarkdown.js @@ -104,7 +104,7 @@ function prepareMarkdown(config) { contents.push(` ## Unstyled -Use the [Base UI ${markdownH1}](${headers.unstyled}) for complete ownership of the component's design, with no Material UI or Joy UI styles to override. +Use the [Base UI ${markdownH1}](${headers.unstyled}) for complete ownership of the component's design, with no Material UI or Joy UI styles to override. This unstyled version of the component is the ideal choice for heavy customization with a smaller bundle size. `); } diff --git a/packages/mui-babel-macros/package.json b/packages/mui-babel-macros/package.json index 825d35f8b080b3..1f579c02d1e4e6 100644 --- a/packages/mui-babel-macros/package.json +++ b/packages/mui-babel-macros/package.json @@ -30,9 +30,9 @@ "devDependencies": { "@mui/internal-babel-macros": "workspace:*", "@types/babel-plugin-macros": "^3.1.3", - "@types/chai": "^4.3.11", + "@types/chai": "^4.3.12", "@types/mocha": "^10.0.6", - "@types/node": "^18.19.15", + "@types/node": "^18.19.21", "babel-plugin-tester": "^11.0.4", "chai": "^4.4.1" }, diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 7593292d12cd68..b7e86fdb4d5a82 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.37", + "version": "5.0.0-beta.38", "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.", @@ -50,12 +50,12 @@ "prop-types": "^15.8.1" }, "devDependencies": { - "@mui/internal-babel-macros": "workspace:^", "@mui-internal/test-utils": "workspace:^", + "@mui/internal-babel-macros": "workspace:^", "@mui/types": "workspace:^", "@testing-library/react": "^14.2.1", "@testing-library/user-event": "^14.5.2", - "@types/chai": "^4.3.11", + "@types/chai": "^4.3.12", "@types/prop-types": "^15.7.11", "@types/react": "18.2.55", "@types/react-dom": "18.2.19", diff --git a/packages/mui-base/src/FormControl/index.ts b/packages/mui-base/src/FormControl/index.ts index 8119bbdd4284bd..b722fbadccdc13 100644 --- a/packages/mui-base/src/FormControl/index.ts +++ b/packages/mui-base/src/FormControl/index.ts @@ -2,13 +2,7 @@ export { FormControl } from './FormControl'; export { FormControlContext } from './FormControlContext'; -export type { - FormControlProps, - FormControlRootSlotPropsOverrides, - FormControlState, - UseFormControlContextReturnValue, - FormControlOwnProps, -} from './FormControl.types'; +export * from './FormControl.types'; export * from './formControlClasses'; diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js index 0386731e59eeb8..264f0ee8f67ce2 100644 --- a/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js +++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.test.js @@ -118,6 +118,7 @@ describe('useAutocomplete', () => { let filterOptions; let getOptionLabel; let options; + beforeEach(() => { filterOptions = createFilterOptions({ matchFrom: 'any' }); getOptionLabel = (option) => option.name; diff --git a/packages/mui-base/src/useInput/useInput.test.tsx b/packages/mui-base/src/useInput/useInput.test.tsx index a2ff388030c95a..9ece7ed65a20ad 100644 --- a/packages/mui-base/src/useInput/useInput.test.tsx +++ b/packages/mui-base/src/useInput/useInput.test.tsx @@ -7,6 +7,7 @@ import { UseInputParameters } from './useInput.types'; describe('useInput', () => { const { render } = createRenderer(); + describe('params: inputRef', () => { it('should be able to attach input ref passed through params', () => { const inputRef = React.createRef(); diff --git a/packages/mui-base/src/useList/listReducer.test.ts b/packages/mui-base/src/useList/listReducer.test.ts index 873be0f0f7430e..1a60ac1f74c42f 100644 --- a/packages/mui-base/src/useList/listReducer.test.ts +++ b/packages/mui-base/src/useList/listReducer.test.ts @@ -948,6 +948,7 @@ describe('listReducer', () => { describe('using custom item comparer', () => { type ItemType = { v: string }; + it('keeps the highlighted value if it is present among the new items', () => { const state: ListState = { highlightedValue: { v: '1' }, diff --git a/packages/mui-base/src/useList/useList.test.tsx b/packages/mui-base/src/useList/useList.test.tsx index 7e8ffa6f1ce2fb..1c225a474917bb 100644 --- a/packages/mui-base/src/useList/useList.test.tsx +++ b/packages/mui-base/src/useList/useList.test.tsx @@ -6,6 +6,7 @@ import { useList } from './useList'; describe('useList', () => { const { render } = createRenderer(); + describe('preventing default behavior on keyDown', () => { ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown', 'Enter', ' '].forEach((key) => it(`prevents default behavior when ${key} is pressed in activeDescendant focus management mode`, () => { diff --git a/packages/mui-base/src/useMenu/useMenu.test.js b/packages/mui-base/src/useMenu/useMenu.test.js index d3973de7d06f3f..bca1913869d9a2 100644 --- a/packages/mui-base/src/useMenu/useMenu.test.js +++ b/packages/mui-base/src/useMenu/useMenu.test.js @@ -7,6 +7,7 @@ import { useMenu } from './useMenu'; describe('useMenu', () => { const { render } = createRenderer(); + describe('getListboxProps', () => { it('returns props for root slot', () => { function TestMenu() { diff --git a/packages/mui-base/src/useMenuButton/useMenuButton.test.tsx b/packages/mui-base/src/useMenuButton/useMenuButton.test.tsx index 9bf81af45f0a93..b58885e739495c 100644 --- a/packages/mui-base/src/useMenuButton/useMenuButton.test.tsx +++ b/packages/mui-base/src/useMenuButton/useMenuButton.test.tsx @@ -16,6 +16,7 @@ const testContext: DropdownContextValue = { describe('useMenuButton', () => { const { render } = createRenderer(); + describe('getRootProps', () => { it('returns props for root slot', () => { function TestMenuButton() { diff --git a/packages/mui-base/src/useMenuItem/useMenuItem.test.tsx b/packages/mui-base/src/useMenuItem/useMenuItem.test.tsx index a599bfb52ae110..81b8e9435b303e 100644 --- a/packages/mui-base/src/useMenuItem/useMenuItem.test.tsx +++ b/packages/mui-base/src/useMenuItem/useMenuItem.test.tsx @@ -7,6 +7,7 @@ import { useMenuItem } from './useMenuItem'; describe('useMenuItem', () => { const { render } = createRenderer(); + describe('getRootProps', () => { it('returns props for root slot', () => { function TestMenuItem() { diff --git a/packages/mui-base/src/useSlider/useSlider.test.js b/packages/mui-base/src/useSlider/useSlider.test.js index b717f0e934b57e..c7b964335e184e 100644 --- a/packages/mui-base/src/useSlider/useSlider.test.js +++ b/packages/mui-base/src/useSlider/useSlider.test.js @@ -6,6 +6,7 @@ import { useSlider } from './useSlider'; describe('useSlider', () => { const { render } = createRenderer(); + describe('getRootProps', () => { it('forwards external props including event handlers', () => { const rootRef = React.createRef(); diff --git a/packages/mui-base/src/useTab/useTab.test.tsx b/packages/mui-base/src/useTab/useTab.test.tsx index c20252849006af..047c739c137628 100644 --- a/packages/mui-base/src/useTab/useTab.test.tsx +++ b/packages/mui-base/src/useTab/useTab.test.tsx @@ -8,6 +8,7 @@ import { useTab } from './useTab'; describe('useTab', () => { const { render } = createRenderer(); + describe('getRootProps', () => { it('returns props for root slot', () => { function TestTab() { diff --git a/packages/mui-base/src/useTabPanel/useTabPanel.test.js b/packages/mui-base/src/useTabPanel/useTabPanel.test.js index e94b8bd283bbb9..c516c2ce9b860d 100644 --- a/packages/mui-base/src/useTabPanel/useTabPanel.test.js +++ b/packages/mui-base/src/useTabPanel/useTabPanel.test.js @@ -9,6 +9,7 @@ import { useTabPanel } from './useTabPanel'; describe('useTabPanel', () => { const { render } = createRenderer(); + describe('getRootProps', () => { it('returns props for root slot', () => { const rootRef = React.createRef(); diff --git a/packages/mui-base/src/useTabsList/useTabsList.test.tsx b/packages/mui-base/src/useTabsList/useTabsList.test.tsx index dc9d4630aff8cc..02fe3b020c6b1b 100644 --- a/packages/mui-base/src/useTabsList/useTabsList.test.tsx +++ b/packages/mui-base/src/useTabsList/useTabsList.test.tsx @@ -7,6 +7,7 @@ import { useTabsList } from './useTabsList'; describe('useTabsList', () => { const { render } = createRenderer(); + describe('getRootProps', () => { it('returns props for root slot', () => { function TestTabsList() { diff --git a/packages/mui-base/src/utils/prepareForSlot.test.tsx b/packages/mui-base/src/utils/prepareForSlot.test.tsx index 7b26144b2e6e79..fd6e36368502bc 100644 --- a/packages/mui-base/src/utils/prepareForSlot.test.tsx +++ b/packages/mui-base/src/utils/prepareForSlot.test.tsx @@ -6,6 +6,7 @@ import { prepareForSlot } from './prepareForSlot'; describe('prepareForSlot', () => { const { render } = createRenderer(); + it('should not warn about ownerState', () => { const ThirdPartyComponent = React.forwardRef((props, ref) => { // @ts-ignore just double checking that it is not defined diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index f527a92d273c2c..3a123187bc9e18 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -1,6 +1,6 @@ # @mui/codemod -> Codemod scripts for Material UI, Base UI, MUI System, Joy UI. +> Codemod scripts for Material UI, Base UI, MUI System, Joy UI. [![npm version](https://img.shields.io/npm/v/@mui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@mui/codemod) [![npm downloads](https://img.shields.io/npm/dm/@mui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@mui/codemod) @@ -834,7 +834,7 @@ npx @mui/codemod@latest v5.0.0/base-remove-component-prop #### `rename-css-variables` -Updates the names of the CSS variables of the Joy UI components to adapt to the new naming standards of the CSS variables for components. +Updates the names of the CSS variables of the Joy UI components to adapt to the new naming standards of the CSS variables for components. ```diff - @@ -862,7 +862,7 @@ npx @mui/codemod@latest v5.0.0/base-hook-imports #### `joy-rename-classname-prefix` -Renames the classname prefix from `'Joy'` to `'Mui'` for Joy UI components. +Renames the classname prefix from `'Joy'` to `'Mui'` for Joy UI components. ```diff