From 10de174f77ea058ca05ec3d45f1b879c660d07cf Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 2 Feb 2024 17:20:57 -0300 Subject: [PATCH 1/3] Merge branch 'master' into pr/40901 --- .circleci/config.yml | 42 +- .codesandbox/ci.json | 38 +- .eslintignore | 1 + .github/ISSUE_TEMPLATE/1.bug.yml | 14 +- .github/ISSUE_TEMPLATE/2.feature.yml | 22 +- .github/ISSUE_TEMPLATE/3.rfc.yml | 7 +- .github/ISSUE_TEMPLATE/4.docs-feedback.yml | 16 +- .github/ISSUE_TEMPLATE/5.priority-support.yml | 14 +- .github/ISSUE_TEMPLATE/config.yml | 2 +- .github/styles/Blog/BrandName.yml | 4 + .github/styles/Blog/NoCompanyName.yml | 6 +- .github/workflows/codeql.yml | 4 +- .github/workflows/issue-cleanup.yml | 2 +- .../priority-support-validation-prompt.yml | 6 +- .github/workflows/scorecards.yml | 2 +- .markdownlint-cli2.cjs | 4 +- CHANGELOG.md | 753 ++-- CHANGELOG.old.md | 136 +- CONTRIBUTING.md | 29 +- README.md | 24 +- apps/zero-runtime-next-app/README.md | 2 +- apps/zero-runtime-next-app/next.config.js | 20 +- apps/zero-runtime-next-app/package.json | 4 +- .../src/app/avatar/page.tsx | 12 + apps/zero-runtime-next-app/src/app/layout.tsx | 18 +- apps/zero-runtime-next-app/src/app/page.tsx | 6 + apps/zero-runtime-next-app/src/augment.d.ts | 10 +- .../src/components/Avatar/Avatar.js | 272 ++ .../src/components/Slider/ZeroSlider.tsx | 9 +- apps/zero-runtime-vite-app/package.json | 12 +- apps/zero-runtime-vite-app/src/App.tsx | 8 +- babel.config.js | 1 + benchmark/browser/README.md | 2 +- benchmark/browser/scripts/benchmark.js | 2 +- benchmark/package.json | 4 +- benchmark/server/README.md | 2 +- docs/README.md | 4 +- .../base/all-components/all-components.md | 4 +- .../base/components/accordion/accordion.md | 2 +- .../components/autocomplete/autocomplete.md | 12 +- docs/data/base/components/button/button.md | 4 +- .../data/base/components/checkbox/checkbox.md | 2 +- docs/data/base/components/drawer/drawer.md | 2 +- docs/data/base/components/input/OTPInput.js | 231 ++ docs/data/base/components/input/OTPInput.tsx | 245 ++ .../components/input/OTPInput.tsx.preview | 2 + docs/data/base/components/input/input.md | 8 + .../menu/MenuIntroduction/css/index.js | 61 +- .../menu/MenuIntroduction/css/index.tsx | 61 +- .../menu/MenuIntroduction/system/index.js | 59 +- .../menu/MenuIntroduction/system/index.tsx | 59 +- .../MenuIntroduction/system/index.tsx.preview | 2 +- .../menu/MenuIntroduction/tailwind/index.js | 35 +- .../menu/MenuIntroduction/tailwind/index.tsx | 36 +- .../components/menu/MenuSimple/css/index.js | 7 +- .../components/menu/MenuSimple/css/index.tsx | 7 +- .../menu/MenuSimple/system/index.js | 7 +- .../menu/MenuSimple/system/index.tsx | 7 +- .../menu/MenuSimple/tailwind/index.js | 2 +- .../menu/MenuSimple/tailwind/index.tsx | 2 +- .../base/components/menu/MenuTransitions.js | 183 + .../base/components/menu/MenuTransitions.tsx | 181 + .../menu/MenuTransitions.tsx.preview | 10 + docs/data/base/components/menu/UseMenu.js | 160 +- docs/data/base/components/menu/UseMenu.tsx | 160 +- .../base/components/menu/WrappedMenuItems.js | 7 +- .../base/components/menu/WrappedMenuItems.tsx | 7 +- docs/data/base/components/menu/menu.md | 9 +- docs/data/base/components/modal/modal.md | 2 +- .../components/number-input/number-input.md | 4 +- .../base/components/pagination/pagination.md | 2 +- docs/data/base/components/popper/popper.md | 2 +- .../base/components/popup/AnimatedPopup.js | 8 +- .../base/components/popup/AnimatedPopup.tsx | 8 +- docs/data/base/components/popup/popup.md | 4 +- .../radio-group.md} | 6 +- docs/data/base/components/rating/rating.md | 2 +- .../select/UnstyledSelectBasic/css/index.js | 4 +- .../select/UnstyledSelectBasic/css/index.tsx | 4 +- .../UnstyledSelectBasic/system/index.js | 5 +- .../UnstyledSelectBasic/system/index.tsx | 5 +- .../UnstyledSelectBasic/tailwind/index.js | 6 +- .../UnstyledSelectBasic/tailwind/index.tsx | 4 +- .../select/UnstyledSelectControlled.js | 7 +- .../select/UnstyledSelectControlled.tsx | 5 +- .../select/UnstyledSelectCustomRenderValue.js | 7 +- .../UnstyledSelectCustomRenderValue.tsx | 5 +- .../components/select/UnstyledSelectForm.js | 5 +- .../components/select/UnstyledSelectForm.tsx | 5 +- .../select/UnstyledSelectGrouping.js | 7 +- .../select/UnstyledSelectGrouping.tsx | 5 +- .../UnstyledSelectIntroduction/css/index.js | 54 +- .../UnstyledSelectIntroduction/css/index.tsx | 63 +- .../system/index.js | 58 +- .../system/index.tsx | 59 +- .../tailwind/index.js | 42 +- .../tailwind/index.tsx | 41 +- .../select/UnstyledSelectMultiple.js | 7 +- .../select/UnstyledSelectMultiple.tsx | 5 +- .../select/UnstyledSelectObjectValues.js | 7 +- .../select/UnstyledSelectObjectValues.tsx | 5 +- .../select/UnstyledSelectObjectValuesForm.js | 7 +- .../select/UnstyledSelectObjectValuesForm.tsx | 5 +- .../select/UnstyledSelectRichOptions.js | 7 +- .../select/UnstyledSelectRichOptions.tsx | 5 +- .../select/UnstyledSelectTransitions.js | 238 ++ .../select/UnstyledSelectTransitions.tsx | 236 ++ .../UnstyledSelectTransitions.tsx.preview | 8 + docs/data/base/components/select/select.md | 25 +- .../base/components/slider/DiscreteSlider.js | 57 +- .../base/components/slider/DiscreteSlider.tsx | 57 +- .../components/slider/DiscreteSliderMarks.js | 52 +- .../components/slider/DiscreteSliderMarks.tsx | 52 +- .../components/slider/DiscreteSliderValues.js | 53 +- .../slider/DiscreteSliderValues.tsx | 53 +- .../components/slider/LabeledValuesSlider.js | 97 +- .../components/slider/LabeledValuesSlider.tsx | 97 +- .../base/components/slider/RangeSlider.js | 58 +- .../base/components/slider/RangeSlider.tsx | 58 +- .../base/components/slider/UnstyledSlider.js | 112 - .../base/components/slider/UnstyledSlider.tsx | 112 - .../slider/UnstyledSlider.tsx.preview | 2 - .../slider/UnstyledSliderBasic/css/index.js | 131 - .../slider/UnstyledSliderBasic/css/index.tsx | 131 - .../UnstyledSliderBasic/system/index.js | 105 - .../UnstyledSliderBasic/system/index.tsx | 105 - .../system/index.tsx.preview | 2 - .../UnstyledSliderBasic/tailwind/index.js | 61 - .../UnstyledSliderBasic/tailwind/index.tsx | 61 - .../UnstyledSliderIntroduction/css/index.js | 52 +- .../UnstyledSliderIntroduction/css/index.tsx | 52 +- .../system/index.js | 50 +- .../system/index.tsx | 50 +- .../system/index.tsx.preview | 2 +- .../tailwind/index.js | 14 +- .../tailwind/index.tsx | 14 +- .../tailwind/index.tsx.preview | 2 +- .../UnstyledSliderValueLabel.tsx.preview | 1 - .../base/components/slider/VerticalSlider.js | 36 +- .../base/components/slider/VerticalSlider.tsx | 36 +- .../UnstyledSwitchIntroduction/css/index.js | 3 + .../UnstyledSwitchIntroduction/css/index.tsx | 3 + .../system/index.js | 3 + .../system/index.tsx | 3 + .../components/switch/UseSwitchesBasic.js | 3 + .../components/switch/UseSwitchesBasic.tsx | 3 + .../textarea-autosize/EmptyTextarea.js | 1 + .../textarea-autosize/EmptyTextarea.tsx | 1 + .../textarea-autosize/MaxHeightTextarea.js | 1 + .../textarea-autosize/MaxHeightTextarea.tsx | 1 + .../textarea-autosize/MinHeightTextarea.js | 1 + .../textarea-autosize/MinHeightTextarea.tsx | 1 + .../UnstyledTextarea/css/index.js | 1 + .../UnstyledTextarea/css/index.tsx | 1 + .../UnstyledTextarea/system/index.js | 1 + .../UnstyledTextarea/system/index.tsx | 1 + .../UnstyledTextarea/tailwind/index.js | 2 +- .../UnstyledTextarea/tailwind/index.tsx | 2 +- .../tailwind/index.tsx.preview | 2 +- .../UnstyledTextareaIntroduction/css/index.js | 1 + .../css/index.tsx | 1 + .../system/index.js | 1 + .../system/index.tsx | 1 + .../tailwind/index.js | 2 +- .../tailwind/index.tsx | 2 +- .../tailwind/index.tsx.preview | 2 +- .../toggle-button-group.md | 2 +- docs/data/base/components/tooltip/tooltip.md | 2 +- .../components/transitions/ReactSpring.js | 8 +- .../components/transitions/ReactSpring.tsx | 8 +- .../transitions/ReactTransitionGroup.js | 3 +- .../transitions/ReactTransitionGroup.tsx | 3 +- .../components/transitions/TransitionHooks.js | 15 +- .../transitions/TransitionHooks.tsx | 15 +- .../components/transitions/transitions.md | 10 +- .../accessibility/KeyboardNavigation.js | 5 +- .../accessibility/KeyboardNavigation.tsx | 5 +- .../accessibility/accessibility.md | 10 +- .../customization/customization.md | 18 +- .../base/getting-started/overview/overview.md | 28 +- .../getting-started/quickstart/quickstart.md | 38 +- .../base/getting-started/support/support.md | 100 + docs/data/base/getting-started/usage/usage.md | 13 +- .../next-js-app-router/next-js-app-router.md | 21 +- .../overriding-component-structure.md | 8 +- .../working-with-tailwind-css.md | 14 +- docs/data/base/pages.ts | 3 +- .../components/aspect-ratio/aspect-ratio.md | 2 +- .../components/autocomplete/autocomplete.md | 2 +- docs/data/joy/components/box/box.md | 6 +- docs/data/joy/components/checkbox/checkbox.md | 1 + docs/data/joy/components/grid/grid.md | 6 +- docs/data/joy/components/link/link.md | 2 +- docs/data/joy/components/menu/menu.md | 2 +- docs/data/joy/components/modal/modal.md | 2 +- .../components/radio-button/radio-button.md | 1 + docs/data/joy/components/sheet/sheet.md | 2 +- docs/data/joy/components/stack/stack.md | 2 +- docs/data/joy/components/textarea/textarea.md | 2 +- .../joy/components/typography/typography.md | 2 +- .../overriding-component-structure.md | 2 +- .../themed-components/themed-components.md | 2 +- .../installation/installation.md | 6 +- .../joy/getting-started/overview/overview.md | 10 +- .../joy/getting-started/roadmap/roadmap.md | 12 +- .../joy/getting-started/support/support.md | 100 + .../getting-started/tutorial/LoginFinal.js | 109 +- .../joy/getting-started/tutorial/tutorial.md | 8 +- .../icon-libraries/icon-libraries.md | 4 +- .../integrations/material-ui/material-ui.md | 20 +- .../next-js-app-router/next-js-app-router.md | 3 +- docs/data/joy/pages.ts | 1 + .../material/all-components/all-components.md | 6 +- .../components/about-the-lab/about-the-lab.md | 4 +- .../accordion/AccordionTransition.js | 4 +- .../accordion/AccordionTransition.tsx | 6 +- .../components/accordion/accordion.md | 10 +- docs/data/material/components/alert/alert.md | 8 +- .../components/app-bar/BottomAppBar.js | 6 +- .../components/app-bar/BottomAppBar.tsx | 6 +- .../data/material/components/badges/badges.md | 4 +- .../FixedBottomNavigation.js | 6 +- .../FixedBottomNavigation.tsx | 6 +- docs/data/material/components/box/box.md | 6 +- .../breadcrumbs/RouterBreadcrumbs.js | 7 +- .../breadcrumbs/RouterBreadcrumbs.tsx | 7 +- .../components/button-group/button-group.md | 2 +- .../material/components/buttons/buttons.md | 4 +- docs/data/material/components/cards/cards.md | 2 +- docs/data/material/components/chips/chips.md | 4 +- .../click-away-listener.md | 4 +- .../components/css-baseline/css-baseline.md | 2 +- .../components/dialogs/FullScreenDialog.js | 10 +- .../components/dialogs/FullScreenDialog.tsx | 10 +- .../components/dividers/IntroDivider.js | 2 +- .../components/dividers/IntroDivider.tsx | 2 +- .../components/dividers/ListDividers.js | 6 +- .../components/dividers/ListDividers.tsx | 6 +- .../material/components/dividers/dividers.md | 10 +- docs/data/material/components/grid/grid.md | 4 +- docs/data/material/components/grid2/grid2.md | 8 +- .../data/material/components/hidden/hidden.md | 2 +- docs/data/material/components/icons/icons.md | 10 +- .../components/material-icons/SearchIcons.js | 46 +- .../components/menus/SimpleListMenu.js | 7 +- .../components/menus/SimpleListMenu.tsx | 7 +- .../data/material/components/no-ssr/no-ssr.md | 4 +- .../components/pagination/pagination.md | 5 +- docs/data/material/components/paper/paper.md | 2 +- .../data/material/components/portal/portal.md | 4 +- .../material/components/progress/progress.md | 6 +- .../material/components/selects/selects.md | 2 +- .../material/components/slider/CustomMarks.js | 54 + .../components/slider/CustomMarks.tsx | 54 + .../data/material/components/slider/slider.md | 10 +- .../material/components/steppers/steppers.md | 2 +- docs/data/material/components/tabs/tabs.md | 20 +- .../components/text-fields/text-fields.md | 21 +- .../textarea-autosize/textarea-autosize.md | 4 +- .../material/components/timeline/timeline.md | 2 +- .../material/components/tooltips/tooltips.md | 2 +- .../transfer-list/SelectAllTransferList.js | 7 +- .../transfer-list/SelectAllTransferList.tsx | 7 +- .../components/transfer-list/TransferList.js | 7 +- .../components/transfer-list/TransferList.tsx | 7 +- .../components/transitions/transitions.md | 6 +- .../components/typography/typography.md | 4 +- .../use-media-query/use-media-query.md | 4 +- .../customization/breakpoints/breakpoints.md | 2 +- .../material/customization/color/color.md | 8 +- .../customization/dark-mode/dark-mode.md | 2 +- .../material/customization/density/density.md | 4 +- .../how-to-customize/how-to-customize.md | 22 +- .../material/customization/palette/palette.md | 2 +- .../material/customization/spacing/spacing.md | 2 +- .../theme-components/theme-components.md | 10 +- .../material/customization/theming/theming.md | 10 +- .../customization/transitions/transitions.md | 2 +- .../customization/typography/typography.md | 8 +- .../material/customization/z-index/z-index.md | 2 +- .../material/discover-more/backers/backers.md | 15 +- .../discover-more/changelog/changelog.md | 2 +- .../discover-more/design-kits/design-kits.md | 8 +- .../related-projects/related-projects.md | 24 +- .../material/discover-more/roadmap/roadmap.md | 18 +- .../discover-more/showcase/showcase.md | 4 +- .../material/discover-more/vision/vision.md | 8 +- .../classname-generator.md | 8 +- .../css-theme-variables/customization.md | 3 +- .../css-theme-variables/migration.md | 6 +- .../css-theme-variables/overview.md | 8 +- .../css-theme-variables/usage/usage.md | 4 +- .../design-resources/design-resources.md | 4 +- .../example-projects/example-projects.md | 18 +- docs/data/material/getting-started/faq/faq.md | 38 +- .../installation/installation.md | 40 +- .../material/getting-started/learn/learn.md | 20 +- .../getting-started/overview/overview.md | 24 +- .../getting-started/support/support.md | 121 +- .../supported-platforms.md | 16 +- .../getting-started/templates/templates.md | 4 +- .../material/getting-started/usage/usage.md | 14 +- docs/data/material/guides/api/api.md | 4 +- .../guides/composition/composition.md | 14 +- .../content-security-policy.md | 2 +- .../creating-themed-components.md | 6 +- .../interoperability/interoperability.md | 74 +- .../guides/localization/localization.md | 6 +- .../material-3-components.md | 22 +- .../minimizing-bundle-size.md | 7 +- docs/data/material/guides/nextjs/nextjs.md | 224 +- .../pickers-migration/pickers-migration.md | 8 +- docs/data/material/guides/routing/routing.md | 8 +- .../server-rendering/server-rendering.md | 6 +- .../material/guides/shadow-dom/shadow-dom.md | 4 +- .../styled-components/styled-components.md | 18 +- docs/data/material/guides/testing/testing.md | 12 +- .../guides/theme-scoping/theme-scoping.md | 20 +- .../material/guides/typescript/typescript.md | 6 +- .../migration-grid-v2/migration-grid-v2.md | 12 +- .../migration/migration-v0x/migration-v0x.md | 8 +- .../migration/migration-v3/migration-v3.md | 14 +- .../migration-v4/migrating-from-jss.md | 8 +- .../migration/migration-v4/migration-v4.md | 26 +- .../migration/migration-v4/troubleshooting.md | 7 +- .../migration-v4/v5-component-changes.md | 20 +- .../migration-v4/v5-style-changes.md | 20 +- docs/data/material/pages.ts | 2 +- docs/data/styles/advanced/advanced.md | 12 +- docs/data/styles/api/api.md | 6 +- docs/data/styles/basics/basics.md | 8 +- docs/data/system/components/box/box.md | 10 +- docs/data/system/components/grid/grid.md | 2 +- .../configure-the-sx-prop.md | 2 +- .../css-theme-variables.md | 8 +- .../custom-components/custom-components.md | 2 +- .../installation/installation.md | 32 +- .../getting-started/overview/overview.md | 24 +- .../system/getting-started/support/support.md | 100 + .../the-sx-prop/the-sx-prop.md | 4 +- .../system/getting-started/usage/usage.md | 34 +- docs/data/system/pages.ts | 1 + docs/data/system/properties/properties.md | 4 +- docs/data/system/styled/styled.md | 18 +- docs/lib/sourcing.ts | 2 +- docs/notifications.json | 9 +- docs/package.json | 37 +- docs/pages/_app.js | 16 +- docs/pages/base-ui/api/css-transition.json | 1 - docs/pages/base-ui/api/menu-item.json | 1 + docs/pages/base-ui/api/popup.json | 3 +- docs/pages/base-ui/api/select.json | 12 +- docs/pages/base-ui/api/use-menu-item.json | 4 + docs/pages/base-ui/getting-started/support.js | 7 + .../index.js | 2 +- .../blog/2019-developer-survey-results.md | 48 +- docs/pages/blog/2019.md | 22 +- .../blog/2020-developer-survey-results.md | 44 +- docs/pages/blog/2020-introducing-sketch.md | 16 +- docs/pages/blog/2020-q1-update.md | 2 +- docs/pages/blog/2020-q2-update.md | 4 +- docs/pages/blog/2020-q3-update.md | 8 +- docs/pages/blog/2020.md | 11 +- .../blog/2021-developer-survey-results.md | 60 +- docs/pages/blog/2021-q1-update.md | 4 +- docs/pages/blog/2021-q2-update.md | 2 +- docs/pages/blog/2021-q3-update.md | 28 +- docs/pages/blog/2021.md | 32 +- docs/pages/blog/2022-tenerife-retreat.md | 14 +- .../blog/2023-material-ui-v6-and-beyond.md | 30 +- docs/pages/blog/2023-mui-values.md | 2 +- .../blog/2023-toolpad-beta-announcement.md | 8 +- docs/pages/blog/aggregation-functions.md | 4 +- docs/pages/blog/april-2019-update.md | 2 +- .../blog/build-layouts-faster-with-grid-v2.md | 6 +- .../callback-support-in-style-overrides.md | 4 +- .../blog/danail-hadjiatanasov-joining.md | 2 +- docs/pages/blog/date-pickers-stable-v5.md | 4 +- docs/pages/blog/discord-announcement.md | 2 +- docs/pages/blog/docs-restructure-2022.md | 42 +- docs/pages/blog/first-look-at-joy.md | 22 +- docs/pages/blog/introducing-base-ui.md | 54 +- docs/pages/blog/lab-date-pickers-to-mui-x.md | 28 +- docs/pages/blog/lab-tree-view-to-mui-x.md | 26 +- .../blog/making-customizable-components.md | 20 +- docs/pages/blog/march-2019-update.md | 2 +- docs/pages/blog/material-ui-is-now-mui.md | 18 +- docs/pages/blog/material-ui-v1-is-out.md | 28 +- docs/pages/blog/material-ui-v4-is-out.md | 40 +- docs/pages/blog/matheus-wichman-joining.md | 4 +- docs/pages/blog/may-2019-update.md | 2 +- .../blog/mui-core-v5-migration-update.md | 16 +- docs/pages/blog/mui-core-v5.md | 48 +- docs/pages/blog/mui-next-js-app-router.md | 26 +- docs/pages/blog/mui-product-comparison.md | 98 +- docs/pages/blog/mui-x-end-v6-features.md | 22 +- docs/pages/blog/mui-x-mid-v6-features.md | 20 +- docs/pages/blog/mui-x-v5.md | 26 +- docs/pages/blog/mui-x-v6-alpha-zero.md | 12 +- docs/pages/blog/mui-x-v6.md | 14 +- docs/pages/blog/mui-x-v7-beta.js | 7 + docs/pages/blog/mui-x-v7-beta.md | 226 ++ docs/pages/blog/november-2019-update.md | 2 +- docs/pages/blog/october-2019-update.md | 2 +- docs/pages/blog/premium-plan-release.md | 10 +- docs/pages/blog/september-2019-update.md | 2 +- docs/pages/blog/siriwat-kunaporn-joining.md | 4 +- docs/pages/blog/v6-beta-pickers.md | 2 +- docs/pages/careers.tsx | 598 ++- docs/pages/careers/ROLE_TEMPLATE.md | 12 +- docs/pages/careers/accessibility-engineer.md | 14 +- docs/pages/careers/design-engineer-x-grid.md | 22 +- docs/pages/careers/design-engineer.md | 16 +- docs/pages/careers/designer.md | 34 +- docs/pages/careers/developer-advocate.md | 10 +- .../careers/developer-experience-engineer.md | 14 +- docs/pages/careers/engineering-manager.md | 16 +- docs/pages/careers/full-stack-engineer.md | 20 +- docs/pages/careers/head-of-operations.md | 10 +- .../pages/careers/people-operation-manager.md | 10 +- docs/pages/careers/product-engineer.md | 18 +- docs/pages/careers/product-manager.md | 12 +- .../careers/product-marketing-manager.md | 10 +- .../pages/careers/react-community-engineer.md | 14 +- docs/pages/careers/react-engineer-core.md | 16 +- docs/pages/careers/react-engineer-x-charts.md | 20 +- docs/pages/careers/react-engineer-x-grid.md | 14 +- docs/pages/careers/react-engineer-x.md | 14 +- docs/pages/careers/react-tech-lead-core.md | 18 +- docs/pages/careers/react-tech-lead-x-grid.md | 18 +- docs/pages/careers/senior-designer.md | 24 +- .../careers/staff-ui-engineer-base-ui.js | 7 + .../careers/staff-ui-engineer-base-ui.md | 94 + docs/pages/careers/support-agent.js | 7 + docs/pages/careers/support-agent.md | 56 +- .../careers/technical-product-manager.md | 10 +- docs/pages/careers/technical-recruiter.md | 10 +- docs/pages/core.tsx | 7 +- .../experiments/base/components-gallery.tsx | 2 +- docs/pages/joy-ui/getting-started/support.js | 7 + docs/pages/material-ui.tsx | 4 +- .../material-ui/api/accordion-summary.json | 3 +- docs/pages/material-ui/api/accordion.json | 28 +- docs/pages/material-ui/api/alert.json | 4 +- docs/pages/material-ui/api/divider.json | 13 +- .../material-ui/api/pagination-item.json | 24 +- docs/pages/material-ui/api/tab-context.json | 5 +- docs/pages/system/getting-started/support.js | 7 + .../public/static/blog/mui-x-v7-beta/card.png | Bin 0 -> 195590 bytes .../mui-x-v7-beta/charts-reference-line.png | Bin 0 -> 82407 bytes .../mui-x-v7-beta/column-management-panel.png | Bin 0 -> 57923 bytes .../mui-x-v7-beta/date-time-range-picker.mp4 | Bin 0 -> 322726 bytes .../static/blog/mui-x-v7-beta/intro.png | Bin 0 -> 2368367 bytes .../blog/mui-x-v7-beta/new-bundle-size.png | Bin 0 -> 70071 bytes .../blog/mui-x-v7-beta/sticky-headers.mp4 | Bin 0 -> 3500715 bytes .../branding/companies/particl-dark.svg | 1 + .../static/components-gallery/base-theme.css | 35 +- docs/scripts/formattedTSDemos.js | 15 +- docs/src/components/about/OurValues.tsx | 43 +- docs/src/components/about/Team.tsx | 22 +- docs/src/components/action/Frame.tsx | 1 + docs/src/components/action/Highlighter.tsx | 25 +- docs/src/components/action/InfoCard.tsx | 15 +- docs/src/components/action/Item.tsx | 6 +- docs/src/components/action/NpmCopyButton.tsx | 6 +- docs/src/components/action/StylingInfo.tsx | 13 +- docs/src/components/animation/FlashCode.tsx | 2 +- docs/src/components/banner/AppFrameBanner.tsx | 45 +- .../src/components/banner/AppHeaderBanner.tsx | 9 +- docs/src/components/footer/EmailSubscribe.tsx | 67 +- docs/src/components/header/HeaderNavBar.tsx | 10 +- .../components/header/HeaderNavDropdown.tsx | 24 +- docs/src/components/home/AdvancedShowcase.tsx | 5 - docs/src/components/home/CoreShowcase.tsx | 144 +- .../home/DesignSystemComponents.tsx | 11 +- .../src/components/home/GetStartedButtons.tsx | 6 +- docs/src/components/home/Hero.tsx | 28 +- docs/src/components/home/HeroEnd.tsx | 2 +- .../home/MaterialDesignComponents.tsx | 38 +- .../components/home/MaterialDesignDemo.tsx | 144 +- docs/src/components/home/MuiStatistics.tsx | 71 +- docs/src/components/home/ProductSuite.tsx | 11 +- docs/src/components/home/References.tsx | 2 +- .../src/components/home/ShowcaseContainer.tsx | 70 +- docs/src/components/home/StartToday.tsx | 97 +- docs/src/components/home/Testimonials.tsx | 43 +- docs/src/components/home/UserFeedbacks.tsx | 222 +- .../src/components/home/XGridGlobalStyles.tsx | 6 +- .../pricing/LicensingModelSwitch.tsx | 4 + .../productBaseUI/BaseUIComponents.tsx | 73 +- .../productBaseUI/BaseUICustomization.tsx | 43 +- .../productBaseUI/BaseUISummary.tsx | 4 +- .../productBaseUI/BaseUIThemesDemo.tsx | 197 +- .../components/BaseButtonDemo.tsx | 74 +- .../components/BaseInputDemo.tsx | 25 +- .../productBaseUI/components/BaseMenuDemo.tsx | 128 +- .../components/BaseSliderDemo.tsx | 87 +- .../productBaseUI/components/BaseTabsDemo.tsx | 70 +- .../components/productBaseUI/heroVariables.ts | 92 +- docs/src/components/productCore/CoreHero.tsx | 64 +- .../components/productCore/CoreHeroEnd.tsx | 58 - .../productDesignKit/DesignKitHero.tsx | 1 - .../productMaterial/MaterialComponents.tsx | 1 + .../productMaterial/MaterialEnd.tsx | 91 + .../productMaterial/MaterialStyling.tsx | 20 +- .../productMaterial/MaterialTheming.tsx | 21 +- .../productTemplate/TemplateHero.tsx | 1 - docs/src/components/productX/XDataGrid.tsx | 4 +- docs/src/components/productX/XHero.tsx | 10 +- docs/src/components/productX/XRoadmap.tsx | 1 - docs/src/components/productX/XTheming.tsx | 8 +- .../components/showcase/ThemeToggleButton.tsx | 2 - .../components/typography/SectionHeadline.tsx | 17 +- docs/src/featureToggle.js | 4 +- docs/src/layouts/HeroContainer.tsx | 6 +- docs/src/layouts/Section.tsx | 6 +- docs/src/modules/brandingTheme.ts | 154 +- .../components/ApiPage/list/ClassesList.tsx | 2 +- .../ApiPage/list/PropertiesList.tsx | 22 +- .../ApiPage/sections/ClassesSection.tsx | 2 +- .../components/ApiPage/table/ClassesTable.tsx | 2 +- .../ApiPage/table/PropertiesTable.tsx | 7 +- docs/src/modules/components/AppLayoutDocs.js | 12 +- .../modules/components/AppNavDrawerItem.js | 2 +- docs/src/modules/components/AppSearch.js | 39 +- .../modules/components/ComponentLinkHeader.js | 11 +- docs/src/modules/components/Demo.js | 48 +- docs/src/modules/components/DemoToolbar.js | 24 +- .../src/modules/components/HooksApiContent.js | 10 +- .../src/modules/components/MarkdownElement.js | 4 +- .../MaterialFreeTemplatesCollection.js | 12 +- docs/src/modules/sandbox/CodeSandbox.test.js | 9 + docs/src/modules/sandbox/CodeSandbox.ts | 28 +- docs/src/modules/sandbox/Dependencies.ts | 58 +- docs/src/modules/sandbox/StackBlitz.ts | 4 +- docs/src/pages/production-error/index.md | 2 +- docs/src/pages/versions/versions.md | 49 +- docs/tailwind.config.js | 19 +- .../api-docs-base/badge/badge.json | 4 +- .../css-transition/css-transition.json | 3 - .../api-docs-base/input/input.json | 2 +- .../api-docs-base/menu-item/menu-item.json | 3 + .../translations/api-docs-base/menu/menu.json | 4 +- .../api-docs-base/modal/modal.json | 4 +- .../number-input/number-input.json | 6 +- .../option-group/option-group.json | 4 +- .../api-docs-base/popup/popup.json | 7 +- .../api-docs-base/select/select.json | 4 +- .../api-docs-base/slider/slider.json | 12 +- .../api-docs-base/switch/switch.json | 2 +- .../table-pagination/table-pagination.json | 10 +- .../accordion-details/accordion-details.json | 4 +- .../accordion-summary/accordion-summary.json | 4 +- .../api-docs-joy/alert/alert.json | 4 +- .../aspect-ratio/aspect-ratio.json | 4 +- .../autocomplete/autocomplete.json | 16 +- .../api-docs-joy/avatar/avatar.json | 4 +- .../api-docs-joy/badge/badge.json | 4 +- .../api-docs-joy/breadcrumbs/breadcrumbs.json | 4 +- .../api-docs-joy/button/button.json | 6 +- .../api-docs-joy/checkbox/checkbox.json | 6 +- docs/translations/api-docs-joy/chip/chip.json | 8 +- .../circular-progress/circular-progress.json | 4 +- .../api-docs-joy/drawer/drawer.json | 4 +- .../api-docs-joy/form-label/form-label.json | 4 +- .../api-docs-joy/input/input.json | 6 +- docs/translations/api-docs-joy/link/link.json | 4 +- .../api-docs-joy/list-item/list-item.json | 4 +- .../api-docs-joy/menu-button/menu-button.json | 6 +- .../api-docs-joy/modal/modal.json | 4 +- .../api-docs-joy/radio/radio.json | 8 +- .../api-docs-joy/select/select.json | 6 +- .../api-docs-joy/slider/slider.json | 12 +- .../api-docs-joy/snackbar/snackbar.json | 6 +- docs/translations/api-docs-joy/step/step.json | 4 +- .../api-docs-joy/switch/switch.json | 8 +- .../api-docs-joy/textarea/textarea.json | 4 +- .../api-docs-joy/tooltip/tooltip.json | 4 +- .../api-docs-joy/typography/typography.json | 4 +- .../accordion-summary/accordion-summary.json | 3 +- .../api-docs/accordion/accordion.json | 5 + .../api-docs/divider/divider.json | 3 +- docs/translations/api-docs/modal/modal.json | 4 +- .../pagination-item/pagination-item.json | 22 +- .../api-docs/use-menu-item/use-menu-item.json | 6 +- docs/translations/translations.json | 7 +- examples/base-ui-cra-ts/README.md | 4 +- examples/base-ui-cra/README.md | 4 +- examples/base-ui-nextjs-tailwind-ts/README.md | 6 +- .../{next.config.js => next.config.mjs} | 2 +- .../src/app/layout.tsx | 3 +- examples/base-ui-vite-tailwind-ts/README.md | 4 +- examples/base-ui-vite-tailwind/README.md | 4 +- examples/joy-ui-nextjs-ts/README.md | 2 +- .../{next.config.js => next.config.mjs} | 2 +- examples/joy-ui-nextjs-ts/src/app/layout.tsx | 3 +- .../components/ThemeRegistry/EmotionCache.tsx | 5 +- .../README.md | 4 +- .../src/App.tsx | 2 +- .../src/ProTip.tsx | 2 +- .../README.md | 4 +- .../src/App.js | 2 +- .../src/ProTip.js | 2 +- .../material-ui-cra-tailwind-ts/README.md | 6 +- .../material-ui-cra-tailwind-ts/src/App.tsx | 2 +- .../src/ProTip.tsx | 2 +- examples/material-ui-cra-ts/README.md | 6 +- examples/material-ui-cra-ts/src/App.tsx | 2 +- examples/material-ui-cra-ts/src/ProTip.tsx | 2 +- examples/material-ui-cra/README.md | 6 +- examples/material-ui-cra/src/App.js | 2 +- examples/material-ui-cra/src/ProTip.js | 2 +- examples/material-ui-express-ssr/App.js | 2 +- examples/material-ui-express-ssr/ProTip.js | 2 +- examples/material-ui-express-ssr/README.md | 4 +- examples/material-ui-gatsby/README.md | 4 +- .../src/components/ProTip.js | 2 +- .../material-ui-gatsby/src/pages/about.js | 2 +- .../material-ui-gatsby/src/pages/index.js | 2 +- .../README.md | 6 +- .../pages/_document.tsx | 15 +- .../pages/about.tsx | 2 +- .../pages/index.tsx | 2 +- .../src/ProTip.tsx | 2 +- .../material-ui-nextjs-pages-router/README.md | 6 +- .../pages/_document.js | 5 +- .../pages/about.js | 2 +- .../pages/index.js | 2 +- .../src/ProTip.js | 2 +- .../README.md | 6 +- .../pages/_document.tsx | 9 +- .../pages/about.tsx | 2 +- .../pages/index.tsx | 2 +- examples/material-ui-nextjs-ts/README.md | 6 +- examples/material-ui-nextjs-ts/next.config.js | 15 - .../material-ui-nextjs-ts/next.config.mjs | 4 + .../src/app/about/page.tsx | 35 + .../material-ui-nextjs-ts/src/app/layout.tsx | 103 +- .../material-ui-nextjs-ts/src/app/page.tsx | 87 +- .../src/app/starred/page.tsx | 23 - .../src/app/tasks/page.tsx | 23 - .../src/components/Copyright.tsx | 15 + .../src/components/MediaCard.tsx | 37 - .../src/components/ProTip.tsx | 23 + examples/material-ui-nextjs/README.md | 6 +- examples/material-ui-nextjs/next.config.js | 15 - examples/material-ui-nextjs/next.config.mjs | 4 + .../material-ui-nextjs/src/app/about/page.js | 35 + examples/material-ui-nextjs/src/app/layout.js | 103 +- examples/material-ui-nextjs/src/app/page.js | 87 +- .../src/app/starred/page.js | 23 - .../material-ui-nextjs/src/app/tasks/page.js | 23 - .../src/components/Copyright.js | 15 + .../src/components/MediaCard.js | 37 - .../src/components/ProTip.js | 23 + examples/material-ui-preact/README.md | 6 +- examples/material-ui-preact/src/App.js | 2 +- examples/material-ui-preact/src/ProTip.js | 2 +- examples/material-ui-remix-ts/README.md | 4 +- .../app/routes/_index.tsx | 2 +- .../material-ui-remix-ts/app/routes/about.tsx | 2 +- .../material-ui-remix-ts/app/src/ProTip.tsx | 2 +- examples/material-ui-via-cdn/README.md | 4 +- examples/material-ui-via-cdn/index.html | 4 +- examples/material-ui-vite-ts/README.md | 4 +- examples/material-ui-vite-ts/src/App.tsx | 2 +- examples/material-ui-vite-ts/src/ProTip.tsx | 2 +- examples/material-ui-vite/README.md | 4 +- examples/material-ui-vite/src/App.jsx | 2 +- examples/material-ui-vite/src/ProTip.jsx | 2 +- package.json | 75 +- .../baseUi/generateBaseUiApiPages.ts | 162 +- .../baseUi/projectSettings.ts | 4 +- packages/api-docs-builder-core/package.json | 8 +- .../ApiBuilders/ComponentApiBuilder.ts | 51 +- .../ApiBuilders/HookApiBuilder.ts | 32 +- packages/api-docs-builder/ProjectSettings.ts | 21 +- packages/api-docs-builder/buildApi.ts | 4 +- packages/api-docs-builder/buildApiUtils.ts | 21 +- packages/api-docs-builder/package.json | 13 +- packages/api-docs-builder/tsconfig.json | 2 +- .../utils/generateApiTranslation.ts | 32 +- .../utils/parseSlotsAndClasses.ts | 16 +- .../api-docs-builder/utils/sortObjects.ts | 4 + packages/docs-utilities/README.md | 5 - packages/docs-utilities/index.d.ts | 9 - packages/docs-utilities/package.json | 6 - packages/docs-utilities/tsconfig.json | 19 - packages/docs-utils/.npmignore | 1 + packages/docs-utils/CHANGELOG.md | 5 + packages/docs-utils/README.md | 9 + packages/docs-utils/package.json | 30 + .../src}/ComponentClassDefinition.ts | 0 .../docs-utils/src/createTypeScriptProject.ts | 131 + .../src/getPropsFromComponentNode.ts | 358 ++ .../index.js => docs-utils/src/index.ts} | 29 +- packages/docs-utils/tsconfig.build.json | 15 + packages/docs-utils/tsconfig.json | 11 + .../eslint-plugin-material-ui/package.json | 2 +- .../rules/mui-name-matches-component-name.js | 9 + .../mui-name-matches-component-name.test.js | 35 + packages/feedback/package.json | 2 +- packages/markdown/package.json | 2 +- .../markdownlint-rule-mui/duplicate-h1.js | 31 + packages/mui-babel-macros/package.json | 4 +- packages/mui-base/CONTRIBUTING.md | 4 +- packages/mui-base/README.md | 10 +- packages/mui-base/package.json | 8 +- .../mui-base/src/Dropdown/Dropdown.test.tsx | 54 +- packages/mui-base/src/Menu/Menu.test.tsx | 217 +- packages/mui-base/src/Menu/Menu.tsx | 6 +- packages/mui-base/src/Menu/Menu.types.ts | 9 +- .../src/MenuButton/MenuButton.test.tsx | 94 +- packages/mui-base/src/MenuItem/MenuItem.tsx | 6 + .../mui-base/src/MenuItem/MenuItem.types.ts | 6 + packages/mui-base/src/Option/Option.tsx | 2 +- packages/mui-base/src/Select/Select.spec.tsx | 46 +- packages/mui-base/src/Select/Select.test.tsx | 242 +- packages/mui-base/src/Select/Select.tsx | 26 +- packages/mui-base/src/Select/Select.types.ts | 36 +- packages/mui-base/src/Select/selectClasses.ts | 4 +- .../TablePagination/TablePagination.types.ts | 2 +- .../src/Transitions/CssAnimation.test.tsx | 38 - .../mui-base/src/Transitions/CssAnimation.tsx | 11 +- .../src/Transitions/CssTransition.test.tsx | 13 +- .../src/Transitions/CssTransition.tsx | 57 +- .../src/Unstable_Popup/Popup.test.tsx | 20 +- .../mui-base/src/Unstable_Popup/Popup.tsx | 19 +- .../src/Unstable_Popup/Popup.types.ts | 20 +- packages/mui-base/src/Unstable_Popup/index.ts | 1 + packages/mui-base/src/index.js | 1 - .../src/unstable_useModal/useModal.ts | 2 +- .../numberInputReducer.ts | 4 +- .../unstable_useNumberInput/useNumberInput.ts | 4 +- .../src/unstable_useNumberInput/utils.test.ts | 32 +- .../src/unstable_useNumberInput/utils.ts | 16 +- .../mui-base/src/useAutocomplete/index.js | 1 - .../src/useCompound/useCompoundItem.ts | 7 +- .../src/useCompound/useCompoundParent.ts | 1 - .../src/useDropdown/dropdownReducer.ts | 10 +- .../mui-base/src/useDropdown/useDropdown.ts | 9 +- .../src/useDropdown/useDropdown.types.ts | 5 +- .../mui-base/src/useList/listActions.types.ts | 7 + .../mui-base/src/useList/listReducer.test.ts | 56 + packages/mui-base/src/useList/listReducer.ts | 12 + packages/mui-base/src/useMenu/menuReducer.ts | 5 +- packages/mui-base/src/useMenu/useMenu.ts | 19 +- .../src/useMenuButton/useMenuButton.test.tsx | 2 +- .../src/useMenuButton/useMenuButton.ts | 2 +- .../mui-base/src/useMenuItem/useMenuItem.ts | 11 +- .../src/useMenuItem/useMenuItem.types.ts | 6 + packages/mui-base/src/useSelect/useSelect.ts | 2 +- packages/mui-base/src/useSlider/useSlider.ts | 11 +- .../mui-base/src/useSnackbar/useSnackbar.ts | 24 +- .../src/useTransition/TransitionContext.ts | 12 - .../useTransitionStateManager.ts | 18 +- .../useTransitionTrigger.test.ts | 31 +- .../src/useTransition/useTransitionTrigger.ts | 125 +- packages/mui-codemod/CONTRIBUTING.md | 55 + packages/mui-codemod/README.md | 53 +- packages/mui-codemod/codemod.js | 48 +- packages/mui-codemod/package.json | 8 +- .../accordion-props/accordion-props.js | 95 + .../accordion-props/accordion-props.test.js | 53 + .../src/deprecations/accordion-props/index.js | 1 + .../accordion-props/test-cases/actual.js | 30 + .../accordion-props/test-cases/expected.js | 36 + .../test-cases/theme.actual.js | 8 + .../test-cases/theme.expected.js | 13 + .../src/deprecations/all/deprecations-all.js | 11 + .../mui-codemod/src/deprecations/all/index.js | 1 + .../mui-codemod/src/util/appendAttribute.js | 11 + packages/mui-codemod/src/util/assignObject.js | 26 + .../mui-codemod/src/util/findComponentJSX.js | 39 + packages/mui-codemod/testUtils/index.js | 4 + .../mui-core-downloads-tracker/package.json | 2 +- packages/mui-docs/README.md | 2 +- packages/mui-docs/package.json | 6 +- packages/mui-envinfo/envinfo.test.js | 42 +- packages/mui-envinfo/package.json | 2 +- packages/mui-envinfo/test/package.json | 9 +- packages/mui-icons-material/README.md | 4 +- packages/mui-icons-material/builder.md | 2 +- packages/mui-icons-material/package.json | 6 +- packages/mui-joy/package.json | 6 +- packages/mui-joy/src/Menu/Menu.test.tsx | 2 +- .../src/MenuButton/MenuButton.test.tsx | 4 +- packages/mui-joy/src/Tooltip/Tooltip.tsx | 84 +- .../mui-joy/src/styles/CssVarsProvider.tsx | 4 +- .../mui-joy/src/styles/defaultTheme.test.js | 1 + .../mui-joy/src/styles/extendTheme.test.js | 26 +- packages/mui-joy/src/styles/extendTheme.ts | 2 + packages/mui-joy/src/styles/types/theme.ts | 2 + packages/mui-lab/package.json | 6 +- .../mui-lab/src/TabContext/TabContext.d.ts | 2 +- packages/mui-lab/src/TabContext/TabContext.js | 2 +- packages/mui-material-next/README.md | 6 +- packages/mui-material-next/migration.md | 2 +- packages/mui-material-next/package.json | 10 +- .../src/ButtonBase/TouchRipple.tsx | 61 +- packages/mui-material-next/src/Menu/Menu.tsx | 2 +- .../src/MenuItem/MenuItem.tsx | 2 +- .../mui-material-next/src/Option/Option.tsx | 2 +- .../src/Switch/Switch.types.ts | 4 +- .../src/TablePagination/TablePagination.d.ts | 2 +- packages/mui-material-nextjs/README.md | 2 +- packages/mui-material-nextjs/package.json | 4 +- .../src/v13-appRouter/appRouterV13.tsx | 12 +- .../pagesRouterV13Document.tsx | 6 +- packages/mui-material/README.md | 10 +- packages/mui-material/package.json | 10 +- .../mui-material/src/Accordion/Accordion.d.ts | 32 +- .../mui-material/src/Accordion/Accordion.js | 42 +- .../src/Accordion/Accordion.test.js | 41 + packages/mui-material/src/Accordion/index.js | 1 - .../src/AccordionActions/index.js | 1 - .../src/AccordionDetails/index.js | 1 - .../accordionSummaryClasses.ts | 5 +- .../src/AccordionSummary/index.js | 1 - packages/mui-material/src/Alert/Alert.d.ts | 6 +- packages/mui-material/src/Alert/Alert.js | 5 +- packages/mui-material/src/Alert/Alert.test.js | 48 + packages/mui-material/src/Avatar/Avatar.js | 49 +- .../mui-material/src/Avatar/Avatar.test.js | 14 + .../src/AvatarGroup/AvatarGroup.js | 58 +- packages/mui-material/src/Badge/Badge.js | 5 +- .../src/ButtonBase/TouchRipple.js | 63 +- .../src/CardHeader/CardHeader.spec.tsx | 16 +- .../mui-material/src/Collapse/Collapse.js | 12 +- .../mui-material/src/Divider/Divider.d.ts | 1 + packages/mui-material/src/Divider/Divider.js | 1 + .../src/Divider/dividerClasses.ts | 8 +- packages/mui-material/src/Grow/Grow.js | 12 +- .../src/PaginationItem/PaginationItem.js | 1 + .../src/PaginationItem/PaginationItem.test.js | 12 + .../PaginationItem/paginationItemClasses.ts | 26 +- packages/mui-material/src/Rating/Rating.js | 13 +- packages/mui-material/src/Rating/index.js | 1 - packages/mui-material/src/Select/Select.js | 4 +- .../mui-material/src/Select/Select.test.js | 18 + .../mui-material/src/SpeedDial/SpeedDial.js | 29 +- .../src/TablePagination/TablePagination.d.ts | 2 +- packages/mui-material/src/Toolbar/index.js | 1 - packages/mui-material/src/Tooltip/Tooltip.js | 78 +- packages/mui-material/src/index.js | 1 - .../src/internal/svg-icons/README.md | 4 +- .../src/styles/createTheme.test.js | 48 +- .../src/styles/experimental_extendTheme.d.ts | 5 +- .../styles/experimental_extendTheme.test.js | 24 + packages/mui-material/src/utils/types.ts | 33 + .../mui-material/src/utils/useSlot.test.tsx | 290 ++ packages/mui-material/src/utils/useSlot.ts | 172 + .../mui-material/src/zero-styled/index.d.ts | 2 - .../mui-material/src/zero-styled/index.js | 2 - .../mui-material/src/zero-styled/index.ts | 8 + packages/mui-private-theming/package.json | 6 +- packages/mui-styled-engine-sc/package.json | 6 +- packages/mui-styled-engine/package.json | 6 +- packages/mui-styles/package.json | 6 +- packages/mui-system/README.md | 4 +- packages/mui-system/package.json | 6 +- packages/mui-system/src/colorManipulator.js | 11 +- .../mui-system/src/createTheme/applyStyles.ts | 85 + .../src/createTheme/createTheme.d.ts | 2 + .../mui-system/src/createTheme/createTheme.js | 3 + .../src/createTheme/createTheme.test.js | 46 + .../mui-system/src/createTheme/index.d.ts | 2 + packages/mui-system/src/createTheme/index.js | 1 + packages/mui-system/src/index.js | 1 - packages/mui-types/package.json | 2 +- packages/mui-utils/package.json | 8 +- packages/mui-utils/src/clamp/clamp.test.ts | 10 + packages/mui-utils/src/clamp/clamp.ts | 9 + packages/mui-utils/src/clamp/index.ts | 1 + .../createChainedFunction.ts | 0 .../src/createChainedFunction/index.ts | 1 + .../src/{ => deepmerge}/deepmerge.test.ts | 0 .../src/{ => deepmerge}/deepmerge.ts | 0 packages/mui-utils/src/deepmerge/index.ts | 2 + .../deprecatedPropType.d.ts | 0 .../deprecatedPropType.js | 0 .../deprecatedPropType.test.js | 0 .../mui-utils/src/deprecatedPropType/index.ts | 1 + .../elementAcceptingRef.test.tsx | 0 .../elementAcceptingRef.ts | 2 +- .../src/elementAcceptingRef/index.ts | 1 + .../elementTypeAcceptingRef.test.tsx | 0 .../elementTypeAcceptingRef.ts | 2 +- .../src/elementTypeAcceptingRef/index.ts | 1 + .../getDisplayName.test.tsx | 0 .../{ => getDisplayName}/getDisplayName.ts | 0 .../mui-utils/src/getDisplayName/index.ts | 2 + .../getScrollbarSize.test.ts | 0 .../getScrollbarSize.ts | 0 .../mui-utils/src/getScrollbarSize/index.ts | 1 + .../getValidReactChildren.ts | 0 .../src/getValidReactChildren/index.ts | 1 + packages/mui-utils/src/index.ts | 5 +- .../mui-utils/src/integerPropType/index.ts | 2 + .../integerPropType.d.ts | 0 .../{ => integerPropType}/integerPropType.js | 0 .../integerPropType.test.js | 0 packages/mui-utils/src/isMuiElement/index.ts | 1 + .../src/{ => isMuiElement}/isMuiElement.ts | 0 packages/mui-utils/src/refType/index.ts | 1 + .../mui-utils/src/{ => refType}/refType.ts | 0 .../mui-utils/src/requirePropFactory/index.ts | 1 + .../requirePropFactory.d.ts | 0 .../requirePropFactory.js | 0 .../requirePropFactory.test.js | 0 packages/mui-utils/src/resolveProps/index.ts | 1 + .../{ => resolveProps}/resolveProps.test.ts | 0 .../src/{ => resolveProps}/resolveProps.ts | 0 packages/mui-utils/src/scrollLeft/index.ts | 1 + .../src/{ => scrollLeft}/scrollLeft.d.ts | 0 .../src/{ => scrollLeft}/scrollLeft.js | 0 packages/mui-utils/src/setRef/index.ts | 1 + .../src/{ => setRef}/setRef.spec.tsx | 0 .../mui-utils/src/{ => setRef}/setRef.test.ts | 0 packages/mui-utils/src/{ => setRef}/setRef.ts | 0 .../mui-utils/src/unsupportedProp/index.ts | 1 + .../unsupportedProp.d.ts | 0 .../{ => unsupportedProp}/unsupportedProp.js | 0 .../unsupportedProp.test.js | 0 packages/mui-utils/src/useControlled/index.js | 1 - .../mui-utils/src/useEnhancedEffect/index.ts | 1 - .../mui-utils/src/useEventCallback/index.ts | 1 - packages/mui-utils/src/useForkRef/index.ts | 1 - packages/mui-utils/src/useId/index.ts | 1 - .../mui-utils/src/useIsFocusVisible/index.ts | 2 + .../useIsFocusVisible.test.js | 2 +- .../useIsFocusVisible.ts | 8 +- packages/mui-utils/src/useLazyRef/index.ts | 1 + .../mui-utils/src/useLazyRef/useLazyRef.ts | 21 + packages/mui-utils/src/useOnMount/index.ts | 1 + .../mui-utils/src/useOnMount/useOnMount.ts | 13 + .../mui-utils/src/usePreviousProps/index.ts | 1 + .../usePreviousProps.ts | 0 packages/mui-utils/src/useTimeout/index.ts | 2 + .../mui-utils/src/useTimeout/useTimeout.ts | 41 + .../mui-utils/src/visuallyHidden/index.ts | 1 + .../{ => visuallyHidden}/visuallyHidden.ts | 0 packages/rsc-builder/package.json | 2 +- packages/test-utils/package.json | 8 +- packages/test-utils/src/flushMicrotasks.ts | 8 + packages/test-utils/src/index.ts | 1 + packages/test-utils/src/initMatchers.ts | 12 + packages/typescript-to-proptypes/.npmignore | 1 + packages/typescript-to-proptypes/CHANGELOG.md | 176 +- .../typescript-to-proptypes/CHANGELOG.old.md | 179 + packages/typescript-to-proptypes/README.md | 12 +- packages/typescript-to-proptypes/package.json | 35 +- .../typescript-to-proptypes/src/createType.ts | 14 +- .../src/getPropTypesFromFile.ts | 20 +- .../src/getTypeHash.ts | 24 + .../typescript-to-proptypes/src/models.ts | 4 +- .../test/genericUnion/input.tsx | 31 + .../test/genericUnion/output.js | 21 + .../test/interfaceUnion/input.tsx | 32 + .../test/interfaceUnion/output.js | 25 + .../test/typescript-to-proptypes.test.ts | 4 +- .../tsconfig.build.json | 15 + .../typescript-to-proptypes/tsconfig.json | 14 +- packages/zero-next-plugin/package.json | 2 +- packages/zero-runtime/README.md | 251 ++ .../exports/createUseThemeProps.js | 5 + packages/zero-runtime/exports/css.js | 5 + packages/zero-runtime/package.json | 24 +- .../zero-runtime/src/createUseThemeProps.d.ts | 5 + .../zero-runtime/src/createUseThemeProps.js | 52 + packages/zero-runtime/src/css.d.ts | 22 + packages/zero-runtime/src/css.js | 5 + packages/zero-runtime/src/index.ts | 2 + .../src/processors/createUseThemeProps.ts | 64 + packages/zero-runtime/src/processors/css.ts | 183 + .../zero-runtime/src/processors/keyframes.ts | 23 +- .../zero-runtime/src/processors/styled.ts | 15 +- packages/zero-runtime/src/styled.jsx | 9 +- .../src/utils/cssFunctionTransformerPlugin.ts | 5 +- .../zero-runtime/src/utils/generateCss.ts | 159 +- packages/zero-runtime/src/utils/index.ts | 2 +- packages/zero-runtime/tsup.config.ts | 2 +- packages/zero-unplugin/package.json | 2 +- packages/zero-unplugin/src/index.ts | 46 +- packages/zero-vite-plugin/package.json | 4 +- packages/zero-vite-plugin/src/index.ts | 35 +- .../zero-vite-plugin/src/zero-vite-plugin.ts | 2 +- pnpm-lock.yaml | 3443 +++++++++-------- pnpm-workspace.yaml | 2 +- prettier.config.js | 6 + scripts/README.md | 2 +- scripts/build.mjs | 3 +- scripts/generateProptypes.ts | 14 +- scripts/sizeSnapshot/webpack.config.js | 2 +- scripts/useTypescriptDistTag.mjs | 56 - test/README.md | 13 +- .../fixtures/create-react-app/package.json | 2 +- test/bundling/fixtures/esbuild/package.json | 2 +- test/bundling/fixtures/gatsby/package.json | 2 +- .../fixtures/next-webpack4/package.json | 2 +- .../fixtures/next-webpack5/package.json | 2 +- test/bundling/fixtures/snowpack/package.json | 2 +- test/bundling/fixtures/vite/package.json | 4 +- test/package.json | 14 +- tsconfig.json | 3 +- webpackBaseConfig.js | 6 +- 1006 files changed, 15095 insertions(+), 9876 deletions(-) create mode 100644 apps/zero-runtime-next-app/src/app/avatar/page.tsx create mode 100644 apps/zero-runtime-next-app/src/components/Avatar/Avatar.js create mode 100644 docs/data/base/components/input/OTPInput.js create mode 100644 docs/data/base/components/input/OTPInput.tsx create mode 100644 docs/data/base/components/input/OTPInput.tsx.preview create mode 100644 docs/data/base/components/menu/MenuTransitions.js create mode 100644 docs/data/base/components/menu/MenuTransitions.tsx create mode 100644 docs/data/base/components/menu/MenuTransitions.tsx.preview rename docs/data/base/components/{radio-button/radio-button.md => radio-group/radio-group.md} (73%) create mode 100644 docs/data/base/components/select/UnstyledSelectTransitions.js create mode 100644 docs/data/base/components/select/UnstyledSelectTransitions.tsx create mode 100644 docs/data/base/components/select/UnstyledSelectTransitions.tsx.preview delete mode 100644 docs/data/base/components/slider/UnstyledSlider.js delete mode 100644 docs/data/base/components/slider/UnstyledSlider.tsx delete mode 100644 docs/data/base/components/slider/UnstyledSlider.tsx.preview delete mode 100644 docs/data/base/components/slider/UnstyledSliderBasic/css/index.js delete mode 100644 docs/data/base/components/slider/UnstyledSliderBasic/css/index.tsx delete mode 100644 docs/data/base/components/slider/UnstyledSliderBasic/system/index.js delete mode 100644 docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx delete mode 100644 docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx.preview delete mode 100644 docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js delete mode 100644 docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.tsx delete mode 100644 docs/data/base/components/slider/UnstyledSliderValueLabel.tsx.preview create mode 100644 docs/data/base/getting-started/support/support.md create mode 100644 docs/data/joy/getting-started/support/support.md create mode 100644 docs/data/material/components/slider/CustomMarks.js create mode 100644 docs/data/material/components/slider/CustomMarks.tsx create mode 100644 docs/data/system/getting-started/support/support.md create mode 100644 docs/pages/base-ui/getting-started/support.js rename docs/pages/base-ui/{react-radio-button => react-radio-group}/index.js (79%) create mode 100644 docs/pages/blog/mui-x-v7-beta.js create mode 100644 docs/pages/blog/mui-x-v7-beta.md create mode 100644 docs/pages/careers/staff-ui-engineer-base-ui.js create mode 100644 docs/pages/careers/staff-ui-engineer-base-ui.md create mode 100644 docs/pages/careers/support-agent.js create mode 100644 docs/pages/joy-ui/getting-started/support.js create mode 100644 docs/pages/system/getting-started/support.js create mode 100644 docs/public/static/blog/mui-x-v7-beta/card.png create mode 100644 docs/public/static/blog/mui-x-v7-beta/charts-reference-line.png create mode 100644 docs/public/static/blog/mui-x-v7-beta/column-management-panel.png create mode 100644 docs/public/static/blog/mui-x-v7-beta/date-time-range-picker.mp4 create mode 100644 docs/public/static/blog/mui-x-v7-beta/intro.png create mode 100644 docs/public/static/blog/mui-x-v7-beta/new-bundle-size.png create mode 100644 docs/public/static/blog/mui-x-v7-beta/sticky-headers.mp4 create mode 100644 docs/public/static/branding/companies/particl-dark.svg delete mode 100644 docs/src/components/productCore/CoreHeroEnd.tsx create mode 100644 docs/src/components/productMaterial/MaterialEnd.tsx rename examples/base-ui-nextjs-tailwind-ts/{next.config.js => next.config.mjs} (69%) rename examples/joy-ui-nextjs-ts/{next.config.js => next.config.mjs} (69%) delete mode 100644 examples/material-ui-nextjs-ts/next.config.js create mode 100644 examples/material-ui-nextjs-ts/next.config.mjs create mode 100644 examples/material-ui-nextjs-ts/src/app/about/page.tsx delete mode 100644 examples/material-ui-nextjs-ts/src/app/starred/page.tsx delete mode 100644 examples/material-ui-nextjs-ts/src/app/tasks/page.tsx create mode 100644 examples/material-ui-nextjs-ts/src/components/Copyright.tsx delete mode 100644 examples/material-ui-nextjs-ts/src/components/MediaCard.tsx create mode 100644 examples/material-ui-nextjs-ts/src/components/ProTip.tsx delete mode 100644 examples/material-ui-nextjs/next.config.js create mode 100644 examples/material-ui-nextjs/next.config.mjs create mode 100644 examples/material-ui-nextjs/src/app/about/page.js delete mode 100644 examples/material-ui-nextjs/src/app/starred/page.js delete mode 100644 examples/material-ui-nextjs/src/app/tasks/page.js create mode 100644 examples/material-ui-nextjs/src/components/Copyright.js delete mode 100644 examples/material-ui-nextjs/src/components/MediaCard.js create mode 100644 examples/material-ui-nextjs/src/components/ProTip.js create mode 100644 packages/api-docs-builder/utils/sortObjects.ts delete mode 100644 packages/docs-utilities/README.md delete mode 100644 packages/docs-utilities/index.d.ts delete mode 100644 packages/docs-utilities/package.json delete mode 100644 packages/docs-utilities/tsconfig.json create mode 100644 packages/docs-utils/.npmignore create mode 100644 packages/docs-utils/CHANGELOG.md create mode 100644 packages/docs-utils/README.md create mode 100644 packages/docs-utils/package.json rename packages/{docs-utilities => docs-utils/src}/ComponentClassDefinition.ts (100%) create mode 100644 packages/docs-utils/src/createTypeScriptProject.ts create mode 100644 packages/docs-utils/src/getPropsFromComponentNode.ts rename packages/{docs-utilities/index.js => docs-utils/src/index.ts} (66%) create mode 100644 packages/docs-utils/tsconfig.build.json create mode 100644 packages/docs-utils/tsconfig.json create mode 100644 packages/markdownlint-rule-mui/duplicate-h1.js create mode 100644 packages/mui-codemod/CONTRIBUTING.md create mode 100644 packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js create mode 100644 packages/mui-codemod/src/deprecations/accordion-props/accordion-props.test.js create mode 100644 packages/mui-codemod/src/deprecations/accordion-props/index.js create mode 100644 packages/mui-codemod/src/deprecations/accordion-props/test-cases/actual.js create mode 100644 packages/mui-codemod/src/deprecations/accordion-props/test-cases/expected.js create mode 100644 packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.actual.js create mode 100644 packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.expected.js create mode 100644 packages/mui-codemod/src/deprecations/all/deprecations-all.js create mode 100644 packages/mui-codemod/src/deprecations/all/index.js create mode 100644 packages/mui-codemod/src/util/appendAttribute.js create mode 100644 packages/mui-codemod/src/util/assignObject.js create mode 100644 packages/mui-codemod/src/util/findComponentJSX.js create mode 100644 packages/mui-codemod/testUtils/index.js create mode 100644 packages/mui-material/src/utils/types.ts create mode 100644 packages/mui-material/src/utils/useSlot.test.tsx create mode 100644 packages/mui-material/src/utils/useSlot.ts delete mode 100644 packages/mui-material/src/zero-styled/index.d.ts delete mode 100644 packages/mui-material/src/zero-styled/index.js create mode 100644 packages/mui-material/src/zero-styled/index.ts create mode 100644 packages/mui-system/src/createTheme/applyStyles.ts create mode 100644 packages/mui-utils/src/clamp/clamp.test.ts create mode 100644 packages/mui-utils/src/clamp/clamp.ts create mode 100644 packages/mui-utils/src/clamp/index.ts rename packages/mui-utils/src/{ => createChainedFunction}/createChainedFunction.ts (100%) create mode 100644 packages/mui-utils/src/createChainedFunction/index.ts rename packages/mui-utils/src/{ => deepmerge}/deepmerge.test.ts (100%) rename packages/mui-utils/src/{ => deepmerge}/deepmerge.ts (100%) create mode 100644 packages/mui-utils/src/deepmerge/index.ts rename packages/mui-utils/src/{ => deprecatedPropType}/deprecatedPropType.d.ts (100%) rename packages/mui-utils/src/{ => deprecatedPropType}/deprecatedPropType.js (100%) rename packages/mui-utils/src/{ => deprecatedPropType}/deprecatedPropType.test.js (100%) create mode 100644 packages/mui-utils/src/deprecatedPropType/index.ts rename packages/mui-utils/src/{ => elementAcceptingRef}/elementAcceptingRef.test.tsx (100%) rename packages/mui-utils/src/{ => elementAcceptingRef}/elementAcceptingRef.ts (97%) create mode 100644 packages/mui-utils/src/elementAcceptingRef/index.ts rename packages/mui-utils/src/{ => elementTypeAcceptingRef}/elementTypeAcceptingRef.test.tsx (100%) rename packages/mui-utils/src/{ => elementTypeAcceptingRef}/elementTypeAcceptingRef.ts (97%) create mode 100644 packages/mui-utils/src/elementTypeAcceptingRef/index.ts rename packages/mui-utils/src/{ => getDisplayName}/getDisplayName.test.tsx (100%) rename packages/mui-utils/src/{ => getDisplayName}/getDisplayName.ts (100%) create mode 100644 packages/mui-utils/src/getDisplayName/index.ts rename packages/mui-utils/src/{ => getScrollbarSize}/getScrollbarSize.test.ts (100%) rename packages/mui-utils/src/{ => getScrollbarSize}/getScrollbarSize.ts (100%) create mode 100644 packages/mui-utils/src/getScrollbarSize/index.ts rename packages/mui-utils/src/{ => getValidReactChildren}/getValidReactChildren.ts (100%) create mode 100644 packages/mui-utils/src/getValidReactChildren/index.ts create mode 100644 packages/mui-utils/src/integerPropType/index.ts rename packages/mui-utils/src/{ => integerPropType}/integerPropType.d.ts (100%) rename packages/mui-utils/src/{ => integerPropType}/integerPropType.js (100%) rename packages/mui-utils/src/{ => integerPropType}/integerPropType.test.js (100%) create mode 100644 packages/mui-utils/src/isMuiElement/index.ts rename packages/mui-utils/src/{ => isMuiElement}/isMuiElement.ts (100%) create mode 100644 packages/mui-utils/src/refType/index.ts rename packages/mui-utils/src/{ => refType}/refType.ts (100%) create mode 100644 packages/mui-utils/src/requirePropFactory/index.ts rename packages/mui-utils/src/{ => requirePropFactory}/requirePropFactory.d.ts (100%) rename packages/mui-utils/src/{ => requirePropFactory}/requirePropFactory.js (100%) rename packages/mui-utils/src/{ => requirePropFactory}/requirePropFactory.test.js (100%) create mode 100644 packages/mui-utils/src/resolveProps/index.ts rename packages/mui-utils/src/{ => resolveProps}/resolveProps.test.ts (100%) rename packages/mui-utils/src/{ => resolveProps}/resolveProps.ts (100%) create mode 100644 packages/mui-utils/src/scrollLeft/index.ts rename packages/mui-utils/src/{ => scrollLeft}/scrollLeft.d.ts (100%) rename packages/mui-utils/src/{ => scrollLeft}/scrollLeft.js (100%) create mode 100644 packages/mui-utils/src/setRef/index.ts rename packages/mui-utils/src/{ => setRef}/setRef.spec.tsx (100%) rename packages/mui-utils/src/{ => setRef}/setRef.test.ts (100%) rename packages/mui-utils/src/{ => setRef}/setRef.ts (100%) create mode 100644 packages/mui-utils/src/unsupportedProp/index.ts rename packages/mui-utils/src/{ => unsupportedProp}/unsupportedProp.d.ts (100%) rename packages/mui-utils/src/{ => unsupportedProp}/unsupportedProp.js (100%) rename packages/mui-utils/src/{ => unsupportedProp}/unsupportedProp.test.js (100%) create mode 100644 packages/mui-utils/src/useIsFocusVisible/index.ts rename packages/mui-utils/src/{ => useIsFocusVisible}/useIsFocusVisible.test.js (98%) rename packages/mui-utils/src/{ => useIsFocusVisible}/useIsFocusVisible.ts (96%) create mode 100644 packages/mui-utils/src/useLazyRef/index.ts create mode 100644 packages/mui-utils/src/useLazyRef/useLazyRef.ts create mode 100644 packages/mui-utils/src/useOnMount/index.ts create mode 100644 packages/mui-utils/src/useOnMount/useOnMount.ts create mode 100644 packages/mui-utils/src/usePreviousProps/index.ts rename packages/mui-utils/src/{ => usePreviousProps}/usePreviousProps.ts (100%) create mode 100644 packages/mui-utils/src/useTimeout/index.ts create mode 100644 packages/mui-utils/src/useTimeout/useTimeout.ts create mode 100644 packages/mui-utils/src/visuallyHidden/index.ts rename packages/mui-utils/src/{ => visuallyHidden}/visuallyHidden.ts (100%) create mode 100644 packages/test-utils/src/flushMicrotasks.ts create mode 100644 packages/typescript-to-proptypes/.npmignore create mode 100644 packages/typescript-to-proptypes/CHANGELOG.old.md create mode 100644 packages/typescript-to-proptypes/src/getTypeHash.ts create mode 100644 packages/typescript-to-proptypes/test/genericUnion/input.tsx create mode 100644 packages/typescript-to-proptypes/test/genericUnion/output.js create mode 100644 packages/typescript-to-proptypes/test/interfaceUnion/input.tsx create mode 100644 packages/typescript-to-proptypes/test/interfaceUnion/output.js create mode 100644 packages/typescript-to-proptypes/tsconfig.build.json create mode 100644 packages/zero-runtime/README.md create mode 100644 packages/zero-runtime/exports/createUseThemeProps.js create mode 100644 packages/zero-runtime/exports/css.js create mode 100644 packages/zero-runtime/src/createUseThemeProps.d.ts create mode 100644 packages/zero-runtime/src/createUseThemeProps.js create mode 100644 packages/zero-runtime/src/css.d.ts create mode 100644 packages/zero-runtime/src/css.js create mode 100644 packages/zero-runtime/src/processors/createUseThemeProps.ts create mode 100644 packages/zero-runtime/src/processors/css.ts delete mode 100644 scripts/useTypescriptDistTag.mjs diff --git a/.circleci/config.yml b/.circleci/config.yml index daae93dcb38ab7..bdf92fe6efa1d7 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -71,10 +71,6 @@ commands: node scripts/useReactVersion.mjs # log a patch for maintainers who want to check out this change git --no-pager diff HEAD - - restore_cache: - name: Restore pnpm package cache - keys: - - pnpm-packages-{{ checksum "pnpm-lock.yaml" }} - when: condition: << parameters.browsers >> steps: @@ -107,14 +103,6 @@ commands: - run: name: Install playwright browsers command: pnpm playwright install --with-deps - - save_cache: - name: Save pnpm package cache - key: pnpm-packages-{{ checksum "pnpm-lock.yaml" }} - paths: - - node_modules - - when: - condition: << parameters.browsers >> - steps: - save_cache: name: Save playwright cache key: v6-playwright-{{ arch }}-{{ checksum "/tmp/playwright_info.json" }} @@ -304,10 +292,8 @@ jobs: - checkout - run: name: Resolve typescript version - environment: - TYPESCRIPT_DIST_TAG: next command: | - node scripts/useTypescriptDistTag.mjs + pnpm add typescript@next -d -w # log a patch for maintainers who want to check out this change git --no-pager diff HEAD - install_js @@ -350,7 +336,7 @@ jobs: <<: *defaults resource_class: 'medium+' docker: - - image: mcr.microsoft.com/playwright:v1.40.1-focal + - image: mcr.microsoft.com/playwright:v1.41.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -380,7 +366,7 @@ jobs: test_e2e: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.40.1-focal + - image: mcr.microsoft.com/playwright:v1.41.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -399,7 +385,7 @@ jobs: test_e2e_website: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.40.1-focal + - image: mcr.microsoft.com/playwright:v1.41.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -414,7 +400,7 @@ jobs: test_profile: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.40.1-focal + - image: mcr.microsoft.com/playwright:v1.41.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -441,7 +427,7 @@ jobs: test_regressions: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.40.1-focal + - image: mcr.microsoft.com/playwright:v1.41.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -495,7 +481,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack4/ docker: - - image: mcr.microsoft.com/playwright:v1.40.1-focal + - image: mcr.microsoft.com/playwright:v1.41.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -519,7 +505,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack5/ docker: - - image: mcr.microsoft.com/playwright:v1.40.1-focal + - image: mcr.microsoft.com/playwright:v1.41.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -543,7 +529,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/create-react-app/ docker: - - image: mcr.microsoft.com/playwright:v1.40.1-focal + - image: mcr.microsoft.com/playwright:v1.41.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -567,7 +553,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/snowpack/ docker: - - image: mcr.microsoft.com/playwright:v1.40.1-focal + - image: mcr.microsoft.com/playwright:v1.41.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -591,7 +577,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/vite/ docker: - - image: mcr.microsoft.com/playwright:v1.40.1-focal + - image: mcr.microsoft.com/playwright:v1.41.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -615,7 +601,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/esbuild/ docker: - - image: mcr.microsoft.com/playwright:v1.40.1-focal + - image: mcr.microsoft.com/playwright:v1.41.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -643,7 +629,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/gatsby/ docker: - - image: mcr.microsoft.com/playwright:v1.40.1-focal + - image: mcr.microsoft.com/playwright:v1.41.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -744,7 +730,7 @@ jobs: test_benchmark: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.40.1-focal + - image: mcr.microsoft.com/playwright:v1.41.1-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index d3e8fff59c28fc..c086cfc1cc843a 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -3,38 +3,44 @@ "installCommand": "install:codesandbox", "node": "18", "packages": [ - "packages/mui-material", + "packages/mui-base", "packages/mui-codemod", + "packages/mui-core-downloads-tracker", "packages/mui-icons-material", + "packages/mui-joy", "packages/mui-lab", + "packages/mui-material-next", + "packages/mui-material-nextjs", + "packages/mui-material", + "packages/mui-private-theming", + "packages/mui-styled-engine-sc", + "packages/mui-styled-engine", "packages/mui-styles", "packages/mui-system", - "packages/mui-private-theming", "packages/mui-types", "packages/mui-utils", - "packages/mui-base", - "packages/mui-styled-engine", - "packages/mui-styled-engine-sc", - "packages/mui-material-next", - "packages/mui-material-nextjs", - "packages/mui-joy" + "packages/docs-utils", + "packages/typescript-to-proptypes" ], "publishDirectory": { + "@mui/base": "packages/mui-base/build", "@mui/codemod": "packages/mui-codemod/build", - "@mui/material": "packages/mui-material/build", + "@mui/core-downloads-tracker": "packages/mui-core-downloads-tracker/build", "@mui/icons-material": "packages/mui-icons-material/build", + "@mui/joy": "packages/mui-joy/build", "@mui/lab": "packages/mui-lab/build", - "@mui/styles": "packages/mui-styles/build", - "@mui/styled-engine": "packages/mui-styled-engine/build", + "@mui/material-next": "packages/mui-material-next/build", + "@mui/material-nextjs": "packages/mui-material-nextjs/build", + "@mui/material": "packages/mui-material/build", + "@mui/private-theming": "packages/mui-private-theming/build", "@mui/styled-engine-sc": "packages/mui-styled-engine-sc/build", + "@mui/styled-engine": "packages/mui-styled-engine/build", + "@mui/styles": "packages/mui-styles/build", "@mui/system": "packages/mui-system/build", - "@mui/private-theming": "packages/mui-private-theming/build", "@mui/types": "packages/mui-types/build", "@mui/utils": "packages/mui-utils/build", - "@mui/base": "packages/mui-base/build", - "@mui/material-next": "packages/mui-material-next/build", - "@mui/material-nextjs": "packages/mui-material-nextjs/build", - "@mui/joy": "packages/mui-joy/build" + "@mui-internal/docs-utils": "packages/docs-utils", + "@mui-internal/typescript-to-proptypes": "packages/typescript-to-proptypes" }, "sandboxes": [ "material-ui-issue-latest-s2dsx", diff --git a/.eslintignore b/.eslintignore index 298ccbdd2f0041..2933e3842db111 100644 --- a/.eslintignore +++ b/.eslintignore @@ -11,6 +11,7 @@ /examples/material-ui-nextjs/src /packages/mui-codemod/lib /packages/mui-codemod/src/*/*.test/* +/packages/mui-codemod/src/**/test-cases/* /packages/mui-icons-material/fixtures /packages/mui-icons-material/legacy /packages/mui-icons-material/lib diff --git a/.github/ISSUE_TEMPLATE/1.bug.yml b/.github/ISSUE_TEMPLATE/1.bug.yml index ab864bcaa38beb..faf654a00f515b 100644 --- a/.github/ISSUE_TEMPLATE/1.bug.yml +++ b/.github/ISSUE_TEMPLATE/1.bug.yml @@ -1,18 +1,16 @@ name: Bug report 🐛 -description: Create a bug report for MUI Core. +description: Create a bug report for Material UI, Base UI, MUI System, or Joy UI. labels: ['status: waiting for maintainer'] body: - type: markdown attributes: - value: | - Please provide a searchable summary of the issue in the title above ⬆️. - - Thanks for contributing by creating an issue! ❤️ + value: Thanks for contributing by creating an issue! ❤️ Please provide a searchable summary of the issue in the title above ⬆️. - type: input attributes: label: Search keywords - description: Your issue may have already been reported! List the keywords you've used to search the [existing issues](https://github.com/mui/material-ui/issues). This will also make your issue searchable for others. - placeholder: e.g. tooltip color + description: | + Your issue may have already been reported! First search for duplicates among the [existing issues](https://github.com/mui/material-ui/issues). + 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 - type: checkboxes @@ -47,7 +45,7 @@ body: - type: textarea attributes: label: Context - description: What are you trying to accomplish? How has this issue affected you? Providing context helps us come up with a solution that is more useful in the real world. + description: What are you trying to accomplish? Providing context helps us come up with a solution that is more useful in the real world. - type: textarea attributes: label: Your environment diff --git a/.github/ISSUE_TEMPLATE/2.feature.yml b/.github/ISSUE_TEMPLATE/2.feature.yml index 621872e8bcfb0c..b225d797ae8cd8 100644 --- a/.github/ISSUE_TEMPLATE/2.feature.yml +++ b/.github/ISSUE_TEMPLATE/2.feature.yml @@ -1,20 +1,18 @@ name: Feature request 💄 -description: Suggest a new idea for MUI Core. +description: Suggest a new idea for Material UI, Base UI, MUI System, or Joy UI. labels: ['status: waiting for maintainer'] body: - type: markdown attributes: - value: | - Please provide a searchable summary of the issue in the title above ⬆️. - - Thanks for contributing by creating an issue! ❤️ - - type: checkboxes + value: Thanks for contributing by creating an issue! ❤️ Please provide a searchable summary of the issue in the title above ⬆️. + - type: input attributes: - label: Duplicates - description: Please [search the history](https://github.com/mui/material-ui/issues) to see if an issue already exists for the same problem. - options: - - label: I have searched the existing issues - required: true + 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). + 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 - type: checkboxes attributes: label: Latest version @@ -33,4 +31,4 @@ body: - type: textarea attributes: label: Motivation - description: What are you trying to accomplish? How has the lack of this feature affected you? Providing context helps us come up with a solution that is more useful in the real world. + description: What are you trying to accomplish? Providing context helps us come up with a solution that is more useful in the real world. diff --git a/.github/ISSUE_TEMPLATE/3.rfc.yml b/.github/ISSUE_TEMPLATE/3.rfc.yml index 3f09a50f774127..21e181b4da0001 100644 --- a/.github/ISSUE_TEMPLATE/3.rfc.yml +++ b/.github/ISSUE_TEMPLATE/3.rfc.yml @@ -12,7 +12,7 @@ body: - type: textarea attributes: label: What's the problem? - description: Write a short paragraph or bulleted list to briefly explain what you're trying to do, what outcomes you're aiming for, and any other relevant details to help us understand the motivation behind this RFC. + description: Write a short paragraph or bulleted list to briefly explain what you're trying to do, what outcomes you're aiming for. - type: textarea attributes: label: What are the requirements? @@ -20,8 +20,7 @@ body: - type: textarea attributes: label: What are our options? - description: | - Have you considered alternative options for achieving your desired outcome? It's not necessary to go into too much detail here, but it can help strengthen your main proposal. + description: What are the alternative options to achieve the desired outcome? - type: textarea attributes: label: Proposed solution @@ -35,4 +34,4 @@ body: - type: textarea attributes: label: Resources and benchmarks - description: Attach any issues, PRs, links, documents, etc… that might be relevant to the RFC + description: Attach any issues, PRs, links, documents, etc… that might be relevant to the RFC. diff --git a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml index e15cd053f6ed9e..8c41c69d7c074a 100644 --- a/.github/ISSUE_TEMPLATE/4.docs-feedback.yml +++ b/.github/ISSUE_TEMPLATE/4.docs-feedback.yml @@ -1,19 +1,17 @@ name: Docs feedback -description: Improve documentation about Material UI, Joy UI, Base UI, MUI System. +description: Improve documentation about Material UI, Base UI, MUI System, or Joy UI. labels: ['status: waiting for maintainer', 'support: docs-feedback'] title: '[docs] ' body: - type: markdown attributes: - value: | - Please provide a searchable summary of the issue in the title above ⬆️. - - Thanks for contributing by creating an issue! ❤️ + value: Thanks for contributing by creating an issue! ❤️ Please provide a searchable summary of the issue in the title above ⬆️. - type: input attributes: label: Search keywords - description: Your issue may have already been reported! List the keywords you've used to search the [existing issues](https://github.com/mui/material-ui/issues). This will also make your issue searchable for others. - placeholder: e.g. datagrid column resizing + description: | + Your issue may have already been reported! First search for duplicates among the [existing issues](https://github.com/mui/material-ui/issues). + 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 - type: input @@ -40,9 +38,7 @@ body: label: Issue description description: | Let us know what went wrong when you were using this documentation and what we could do to improve it. - value: | - I was looking for ... and it appears that ... - type: textarea attributes: label: Context - description: What are you trying to accomplish? What brought you to this page? Your context can help us to come up with solutions that benefit the community as a whole. + description: What are you trying to accomplish? Providing context helps us come up with a solution that is more useful in the real world. diff --git a/.github/ISSUE_TEMPLATE/5.priority-support.yml b/.github/ISSUE_TEMPLATE/5.priority-support.yml index c3630d077cd00d..fb19f4eb3b26d2 100644 --- a/.github/ISSUE_TEMPLATE/5.priority-support.yml +++ b/.github/ISSUE_TEMPLATE/5.priority-support.yml @@ -1,5 +1,5 @@ name: 'Priority Support: SLA ⏰' -description: I'm an MUI X Premium user and we have purchased the Priority Support add-on. I can't find a solution to my problem with MUI Core (Material UI, Base UI, MUI System, and Joy UI). +description: I'm an MUI X Premium user and we have purchased the Priority Support add-on. I can't find a solution to my problem with Material UI, Base UI, MUI System, or Joy UI. title: '[question] ' labels: ['status: waiting for maintainer', 'support: unknown'] body: @@ -7,13 +7,13 @@ body: attributes: value: | Please provide a searchable summary of the issue in the title above ⬆️. - - type: checkboxes + - type: input attributes: - label: Duplicates - description: Please [search the history](https://github.com/mui/material-ui/issues) to see if an issue already exists for the same problem. - options: - - label: I have searched the existing issues - required: true + 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). + 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 attributes: label: Latest version diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 0c36c6dea84e5b..1bc33bd5c715cb 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,4 +1,4 @@ contact_links: - name: Support ❔ url: https://mui.com/getting-started/support/ - about: I need support with MUI Core. + about: I need support with Material UI, Base UI, MUI System, or Joy UI. diff --git a/.github/styles/Blog/BrandName.yml b/.github/styles/Blog/BrandName.yml index f0e0dd6b3e0933..b95387c58510b3 100644 --- a/.github/styles/Blog/BrandName.yml +++ b/.github/styles/Blog/BrandName.yml @@ -10,3 +10,7 @@ swap: MUI X: MUI X Base UI: Base UI MUI System: MUI System + MUI Store: MUI Store + MUI Core: MUI Core + MUI Toolpad: MUI Toolpad + MUI Connect: MUI Connect diff --git a/.github/styles/Blog/NoCompanyName.yml b/.github/styles/Blog/NoCompanyName.yml index 43da752bf02c52..dacecf36f4a80f 100644 --- a/.github/styles/Blog/NoCompanyName.yml +++ b/.github/styles/Blog/NoCompanyName.yml @@ -6,6 +6,8 @@ tokens: - 'MUI \w+' exceptions: - 'MUI X' - - 'MUI X' - - 'MUI System' - 'MUI System' + - 'MUI Store' + - 'MUI Core' + - 'MUI Toolpad' + - 'MUI Connect' diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 51a97a8fcff855..4a11a35e6d949d 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@012739e5082ff0c22ca6d6ab32e07c36df03c4a4 # v3.22.12 + uses: github/codeql-action/init@b7bf0a3ed3ecfa44160715d7c442788f65f0f923 # v3.23.2 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@012739e5082ff0c22ca6d6ab32e07c36df03c4a4 # v3.22.12 + uses: github/codeql-action/analyze@b7bf0a3ed3ecfa44160715d7c442788f65f0f923 # v3.23.2 diff --git a/.github/workflows/issue-cleanup.yml b/.github/workflows/issue-cleanup.yml index dab93c5d505e39..0da67dc0a803a3 100644 --- a/.github/workflows/issue-cleanup.yml +++ b/.github/workflows/issue-cleanup.yml @@ -13,7 +13,7 @@ jobs: permissions: issues: write steps: - - uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6 + - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7 with: script: | const issue = await github.rest.issues.get({ diff --git a/.github/workflows/priority-support-validation-prompt.yml b/.github/workflows/priority-support-validation-prompt.yml index 0dafa9aee9ed97..61d99765fbd83e 100644 --- a/.github/workflows/priority-support-validation-prompt.yml +++ b/.github/workflows/priority-support-validation-prompt.yml @@ -16,7 +16,7 @@ jobs: steps: - name: Find Comment - uses: peter-evans/find-comment@a54c31d7fa095754bfef525c0c8e5e5674c4b4b1 # v2 + uses: peter-evans/find-comment@d5fe37641ad8451bdd80312415672ba26c86575e # v3 id: findComment with: issue-number: ${{ github.event.issue.number }} @@ -25,7 +25,7 @@ jobs: - name: Create comment if: ${{ steps.findComment.outputs.comment-id == '' && contains(github.event.label.name, 'unknown') }} - uses: peter-evans/create-or-update-comment@23ff15729ef2fc348714a3bb66d2f655ca9066f2 # v3.1.0 + uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4.0.0 with: issue-number: ${{ github.event.issue.number }} body: | @@ -39,7 +39,7 @@ jobs: - name: Update comment if: ${{ steps.findComment.outputs.comment-id != '' && contains(github.event.label.name, 'priority') }} - uses: peter-evans/create-or-update-comment@23ff15729ef2fc348714a3bb66d2f655ca9066f2 # v3.1.0 + uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4.0.0 with: comment-id: ${{ steps.findComment.outputs.comment-id }} body: | diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index bbc138db1d680e..383b205771af46 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@012739e5082ff0c22ca6d6ab32e07c36df03c4a4 # v3.22.12 + uses: github/codeql-action/upload-sarif@b7bf0a3ed3ecfa44160715d7c442788f65f0f923 # v3.23.2 with: sarif_file: results.sarif diff --git a/.markdownlint-cli2.cjs b/.markdownlint-cli2.cjs index 2fad76ea77860a..4c32c4753903e0 100644 --- a/.markdownlint-cli2.cjs +++ b/.markdownlint-cli2.cjs @@ -2,6 +2,7 @@ const straightQuotes = require('./packages/markdownlint-rule-mui/straight-quotes const gitDiff = require('./packages/markdownlint-rule-mui/git-diff'); const tableAlignment = require('./packages/markdownlint-rule-mui/table-alignment'); const terminalLanguage = require('./packages/markdownlint-rule-mui/terminal-language'); +const duplicateH1 = require('./packages/markdownlint-rule-mui/duplicate-h1'); // https://github.com/DavidAnson/markdownlint#rules--aliases module.exports = { @@ -35,8 +36,9 @@ module.exports = { gitDiff: true, tableAlignment: true, terminalLanguage: true, + duplicateH1: true, }, - customRules: [straightQuotes, gitDiff, tableAlignment, terminalLanguage], + customRules: [straightQuotes, gitDiff, tableAlignment, terminalLanguage, duplicateH1], ignores: [ 'CHANGELOG.old.md', '**/node_modules/**', diff --git a/CHANGELOG.md b/CHANGELOG.md index 46ef22b557ef00..219d9cd078b4fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,257 @@ # [Versions](https://mui.com/versions/) +## v5.15.7 + + + +_Jan 31, 2024_ + +A big thanks to the 21 contributors who made this release possible. +This release was mostly about 🐛 bug fixes and 📚 documentation improvements. + +### `@mui/material@5.15.7` + +- ​[Select] Fix to show notched outline when `displayEmpty` (#40865) @ZeeshanTamboli +- ​[Avatar] Improve fallback when `children` is empty string or boolean (#40766) @mirus-ua +- ​[AvatarGroup] Refactor component thereby fixing custom spacing logic (#40686) @ZeeshanTamboli + +### `@mui/codemod@5.15.7` + +- ​Add accordion props deprecation (#40771) @siriwatknp + +### `@mui/system@5.15.7` + +- ​[zero-runtime] Use lodash instead of its subpackages (#40868) @michaldudak +- ​Add `applyStyles()` to theme (#40667) @siriwatknp +- ​[zero] Use `theme.applyStyles` in the demo app (#40787) @siriwatknp +- ​[zero] Add `useThemeProps` processor (#40648) @siriwatknp + +### `@mui/utils@5.15.7` + +- ​[core] Remove unnecessary default export (#40788) @siriwatknp +- ​[core] Convert all exports to modules (#39882) @mnajdova +- ​[perf] Prevent unneeded `clearTimeout` calls (#39060) @romgrk + +### `@mui/base@5.0.0-beta.34` + +- ​[Input] Add OTP input demo (#40539) @sai6855 +- ​[Menu] Focus last item after opening a menu using up arrow (#40764) @Jaswanth-Sriram-Veturi +- ​[Menu] Focus Menu Items on hover (#40755) @michaldudak + +### `@mui/joy@5.0.0-beta.25` + +- ​Change the color scheme type to `SupportedColorScheme` (#40776) @Nikhilh26 + +### `@mui/lab@5.0.0-alpha.163` + +- ​[TabContext] Support number type in `value` (#40829) @srinidhi9831 + +### Docs + +- ​[material-ui] Fix the icon preview dialog (#40863) @danilo-leal +- ​[material-ui] Fix typo on styled-components guide (#40858) @dancielos +- ​[base-ui] Fix CSS vars from the plain CSS theme stylesheet (#40762) @zanivan +- ​[material-ui][Divider] Remove light prop references from docs (#40782) @sai6855 +- ​Fix build @oliviertassinari +- ​Add support pages for each product @oliviertassinari +- ​Add survey banner to docs and website (#40553) @joserodolfofreitas +- ​[Menu] Fix hydration mismatch error on Base UI's Menu docs (#40758) @michaldudak +- ​[material-nextjs] Add theming and configuration content to the page (#40626) @siriwatknp + +### Core + +- ​[website] Move `React Engineer - X` into the future roles section (#40867) @DanailH +- ​[material-ui][test][Alert] Add action, icon, and iconMapping tests (#40682) @DiegoAndai +- ​[blog] Lint duplicate h1 on the page (#40835) @oliviertassinari +- ​[blog] MUI X v7 beta announcement blogpost (#40784) @joserodolfofreitas +- ​[code-infra] Remove custom TS installation script (#40636) @michaldudak +- ​[code-infra] Correct API Docs Builder dependencies (#40775) @michaldudak +- ​[code-infra] Migrate to prettier async APIs (#40668) @Janpot +- ​[code-infra] Refined docs generation (#40603) @alexfauquette +- ​[code-infra] Explain how to install the browsers (#40474) @oliviertassinari +- ​`missingKeyGenerator` do no longer exist (#40830) @oliviertassinari +- ​Rely on immutable ref when possible (#40831) @oliviertassinari +- ​Remove deprecated `@types/markdown-to-jsx` package from docs (#40828) @ZeeshanTamboli +- ​Remove unneeded `@slack/web-api` package (#40840) @ZeeshanTamboli +- ​Clarify TODO instruction @oliviertassinari +- ​Remove unneeded use-clients (#40663) @oliviertassinari +- ​[docs-infra] Fix anchor link hook (#40836) @oliviertassinari +- ​[docs-infra] Avoid layout shift on docs-pages (#40749) @oliviertassinari +- ​[examples] Fix build on Next.js Pages Router examples (#40665) @oliviertassinari +- ​[test] Speed up the envinfo test (#40669) @michaldudak +- ​[typescript-to-proptypes] Allow to represent dates as `PropTypes.object` (#40774) @flaviendelangle +- ​[website] Add new Base UI role (#40773) @colmtuite +- ​[website] Fix a couple of rough edges (#40849) @danilo-leal +- ​[website] Small polishing after latest changes to the theme (#40846) @zanivan +- ​[website] Polish some pages and stray components (#40797) @danilo-leal +- ​[website] Refine the careers page slightly (#40793) @danilo-leal +- ​[website] Fix missing key on the Testimonials section (#40791) @Janpot +- ​[website] Fix Footer layout shift (#40786) @oliviertassinari +- ​[website] Revamp the testimonial section in the homepage (#40752) @danilo-leal +- ​[website] Fix pricing license model toggle style (#40747) @oliviertassinari +- ​[website] Fine-tune colors and styles on the branding theme (#40751) @danilo-leal +- ​[website] Fix Toggle Button styles in the homepage demos (#40744) @mohamedsaiedd +- ​[website] Update stats on the testimonials section (#40769) @EyaOuenniche + +All contributors of this release in alphabetical order: @alexfauquette, @colmtuite, @danilo-leal, @DiegoAndai, @EyaOuenniche, @flaviendelangle, @Janpot, @Jaswanth-Sriram-Veturi, @joserodolfofreitas, @michaldudak, @mirus-ua, @mnajdova, @mohamedsaiedd, @Nikhilh26, @oliviertassinari, @romgrk, @sai6855, @siriwatknp, @srinidhi9831, @zanivan, @ZeeshanTamboli + +## v5.15.6 + + + +_Jan 22, 2024_ + +A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨: +This release was mostly about 🐛 bug fixes and 📚 documentation improvements. + +### `@mui/material@5.15.6` + +- ​[Avatar] Use variants api (#40324) @mnajdova +- ​[TablePagination] Accept readonly array for `rowsPerPageOptions` prop (#40481) @pcorpet +- ​[PaginationItem] Deprecate classes for v6 (#40673) @sai6855 +- ​[Rating] Fix rating width via min-content (#40503) @devhik0 + +### `@mui/base@5.0.0-beta.33` + +- ​[Select] Fix display of selected Options with rich content (#40689) @michaldudak +- ​[Select] Use Popup instead of Popper (#40524) @michaldudak +- ​[useMenuButton] Fix non native button triggers (#40645) @DiegoAndai + +### `@mui/system@5.15.6` + +- ​[zero] Fix theme token import in source file (#40691) @brijeshb42 +- ​[zero] Add support for css import (#40541) @brijeshb42 + +### `@mui/icons-material@5.15.6` + +- ​[icons-material] Fix icons package.json version (#40655) @mj12albert + +### Docs + +- ​[base-ui] Polish the Slider demos (#40332) @danilo-leal +- ​[base-ui][Slider] Fix plain CSS demo's wrong keyboard behavior (#40652) @mnajdova +- ​[base-ui][TextareaAutosize] Add border-box to demo (#40646) @ANUGLYPLUGIN +- ​Fix brand name non-breaking space (#40701) @oliviertassinari +- ​Improve error message for MUI Vale rule @oliviertassinari +- ​Add notification to publish the survey (#40552) @joserodolfofreitas +- ​[system] Explain a bit more how AppRouterCacheProvider works @oliviertassinari +- ​[joy-ui] Move tutorial to iframe (#40567) @oliviertassinari +- ​[material-ui][Slider] Remove custom divs from new demo (#40674) @zanivan +- ​[material-ui] Improve TabContext, TabList, and TabPanel documentation (#40587) @anle9650 +- ​[material-ui][Slider] Added custom mark labels demo (#40647) @DonikaV + +### Core + +- ​[core] Fix RXDB-logo Url (#40724) @mohamedsaiedd +- ​[code-infra] Improve proptypes-generation (#40617) @alexfauquette +- ​[code-infra] Disable pnpm package cache on CircleCI (#40670) @michaldudak +- ​[code-infra] Add missing package to CodeSandbox CI config (#40657) @michaldudak +- ​[code-infra] Remove unnecessary @mui/utils dependency from api-docs-builder (#40632) @michaldudak +- ​[core] Polish issue templates @oliviertassinari +- ​[docs-infra] Support markdown link in slots descriptions (#40679) @alexfauquette +- ​[examples] Simplify Next.js example (#40661) @oliviertassinari +- ​[website] Fix broken styles on Base UI page (#40683) @michaldudak + +All contributors of this release in alphabetical order: @alexfauquette, @anle9650, @ANUGLYPLUGIN, @brijeshb42, @danilo-leal, @devhik0, @DiegoAndai, @DonikaV, @joserodolfofreitas, @michaldudak, @mj12albert, @mnajdova, @mohamedsaiedd, @oliviertassinari, @pcorpet, @sai6855, @zanivan + +## v5.15.5 + + + +_Jan 17, 2024_ + +A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨: + +- Base UI's CSS class prefix is now `base-` (#40205) @michaldudak +- Bug fixes, and a lot of improvements to code and docs infra + +### `@mui/material@5.15.5` + +- ​[Accordion] Deprecate \*Props props and classes for v6 (#40418) @DiegoAndai +- ​[Alert] Update TypeScript types to allow color override types to be added to `iconMapping` and `severity` props (#40551) @2metres +- ​[Dialog] Remove deprecated onBackdropClick from Dialog tests (#40505) @sai6855 +- ​[Divider] Deprecate props and classes for v6 (#40563) @sai6855 + +### `@mui/material-next@6.0.0-alpha.118` + +- ​[ButtonGroup] Apply MD3 style to `ButtonGroup` (#40124) @lhilgert9 + +### `@mui/base@5.0.0-beta.32` + +#### Breaking changes + +- ​Change the CSS class prefix to `base-` (#40205) @michaldudak + +The class prefix of Base UI components have been changed from `Mui-` to `base-`. This only affects codebases that uses class names verbatim, i.e. not exposed by JS objects such as `buttonClasses`, but as plain strings or in CSS stylesheets (`.MuiButton.root`) + +To adapt your code to the new pattern: + +- replace all occurrences of the regex `.Mui([A-Z][A-Za-z]*)-` with `.base-$1-` (so `MuiButton-root` becomes `base-Button-root`, etc.), +- replace all occurrences of the regex `.Mui-([a-z]*)` with `.base--$1` (so `Mui-disabled` becomes `base--disabled`, etc.). + +#### Changes + +- ​[Select] Fix screen-reader CSS to avoid body scrollbar (#40599) @brijeshb42 +- ​[Switch] Add border-box to demos (#40638) @zanivan + +### `@mui/joy@5.0.0-beta.23` + +- ​[ModalDialog] Fix ModalDialog layout prop override (#40512) @maakcode +- ​[RadioGroup] Allow zero number as a value (#40344) @aacevski + +### `@mui/codemod@5.15.5` + +- ​Allow `json` files to be transformed (#40536) @ZeeshanTamboli + +### `@mui/lab@5.0.0-alpha.161` + +- ​Update `@mui/material` peer dependency version (#40528) @ZeeshanTamboli + +### `@mui/material-nextjs@5.15.5` + +- ​Fix release script (#40519) @petrovmiroslav +- ​Support Nonces in the App Router Provider (#40269) @josh-feldman +- ​Polish @mui/material-nextjs (#40473) @oliviertassinari + +### `@mui/system@5.15.5` + +- ​Fix import path for @mui/system in vite apps (#40490) @brijeshb42 +- ​Fix css vars generation and simplify the code (#40530) @siriwatknp +- ​Identify zero runtime styled path (#40555) @brijeshb42 + +### Docs + +- ​[joy-ui][Card] Fix text alignment in horizontal aligned card demo (#40562) @ZeeshanTamboli +- ​Improve instructions about peer dependencies (#40621) @danilo-leal +- ​Solve page description length @oliviertassinari +- ​Fix MUI Treasury links (#40561) @siriwatknp +- ​[material-ui] Update to ListItemButton in demos (#40564) @sai6855 +- ​[material-ui] Revise the Snackbar page (#39298) @danilo-leal +- ​[material-ui] Sharpen Material 3 copy on demo pages (#40546) @samuelsycamore +- ​[material-ui] Fix typo on Next.js integration guide (#40538) @zanivan +- ​[material-ui][Snackbar] Remove unused `State` interface from Consecutive Snackbars demo (#40410) + @zinoroman +- ​[website] Resolve broken links reported by `docs:link-check` (#40547) @samuelsycamore + +### Core + +- ​[blog] Fix 404 link to MUI Treasury @oliviertassinari +- ​[code-infra] Add `run` command to deploy docs (#40513) @siriwatknp +- ​[core] Update the lockfile (#40628) @michaldudak +- ​[core] Remove dead code and follow standard @oliviertassinari +- ​[core] Simplify server detection (#40471) @oliviertassinari +- ​[core] Sync playwright cache between MUI X and Material UI (#40475) @oliviertassinari +- ​[dependencies] Bump tough-cookie (#40437) @michaldudak +- ​[docs-infra] Enforce brand name rules (#40525) @oliviertassinari +- ​[docs-infra] Minimize ad layout shift on mobile (#40582) @oliviertassinari +- ​[docs-infra] Improve API page deprecation info (#40440) @DiegoAndai +- ​[docs-infra] Remove old tocs banners (#40537) @oliviertassinari +- ​[docs-infra] Remove dead code aria-label sponsors (#40526) @oliviertassinari +- ​[utils] Centralize clamp implementation in utils (#40267) @Kamino0 +- ​[website] Polish the Base UI page demos (#40504) @danilo-leal + +All contributors of this release in alphabetical order: @2metres, @aacevski, @brijeshb42, @danilo-leal, @DiegoAndai, @josh-feldman, @Kamino0, @lhilgert9, @maakcode, @michaldudak, @oliviertassinari, @petrovmiroslav, @sai6855, @samuelsycamore, @siriwatknp, @zanivan, @ZeeshanTamboli, @zinoroman + ## 5.15.4 @@ -8,7 +260,7 @@ _Jan 10, 2024_ A big thanks to the 22 contributors who made this release possible. Here are some highlights: -- ✨ Material UI's [ToggleButtonGroup](https://mui.com/material-ui/react-toggle-button/) now supports non-button element as a child (e.g., showing a Tooltip on a disabled ToggleButton) (#40220) @Methuselah96 +- ✨ Material UI's [ToggleButtonGroup](https://mui.com/material-ui/react-toggle-button/) now supports non-button element as a child (e.g., showing a Tooltip on a disabled ToggleButton) (#40220) @Methuselah96 ### `@mui/material@5.15.4` @@ -50,7 +302,7 @@ A big thanks to the 22 contributors who made this release possible. Here are som - [base-ui] Update the overview page (#40412) @danilo-leal - [material-ui][Drawer] Resolve flickering when double-clicking on the backdrop to close it (#40343) @aacevski - [material-ui] Refactor form submission in FormDialog component (#40470) @sai6855 -- [material-ui] Replace recharts with MUI X charts on the Dashboard template (#40107) @alexfauquette +- [material-ui] Replace recharts with MUI X charts on the Dashboard template (#40107) @alexfauquette - [material-ui] Revise the Alert demo page (#34892) @samuelsycamore - [material-ui] Revise the Accordion page (#40284) @anle9650 - [material-ui] Add docs for complementary Card components (#40346) @anle9650 @@ -76,7 +328,7 @@ A big thanks to the 22 contributors who made this release possible. Here are som - [core] Lock file maintenance (#34538) @renovate[bot] - [core] Remove duplicate devDependencies (#40438) @michaldudak - [core] Remove issue emoji @oliviertassinari -- [core] Move prefetch at the core, will propagate to MUI X @oliviertassinari +- [core] Move prefetch at the core, will propagate to MUI X @oliviertassinari - [core] Change package manager to pnpm (#36287) @Janpot - [core][docs] Remove the "Understand MUI packages" page (#39835) @savalaram-redkar - [website] Evolve the Developer Advocate role (#40337) @oliviertassinari @@ -137,8 +389,8 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - ​[code-infra] Break package dependency cycle between @mui/material and @mui/icons-material (#40400) @michaldudak - ​[code-infra] Break package dependency cycles (#40398) @michaldudak - ​[code-infra] Sync bug issue template (#40305) @oliviertassinari -- ​[docs] Fix 301 link to Base UI (#40396) @oliviertassinari -- ​[docs] Link new MUI X components in sidnav (#40345) @oliviertassinari +- ​[docs] Fix 301 link to Base UI (#40396) @oliviertassinari +- ​[docs] Link new MUI X components in sidnav (#40345) @oliviertassinari - ​[docs] Fix 301 links to Toolpad @oliviertassinari - ​[docs] Remove old notifications @oliviertassinari - ​[docs] Always mention the npm tag with npx (#40335) @oliviertassinari @@ -148,7 +400,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - ​[docs-infra] Prefetch pages on hover (#40314) @oliviertassinari - ​[docs-infra] Fix footer links to link to the main domain (#40373) @oliviertassinari - ​[docs-infra] Add stray design adjustments (#40347) @danilo-leal -- ​[website] Fix Base UI page's component section imports & styles (#40231) @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] Update some social preview images (#40282) @danilo-leal @@ -164,7 +416,7 @@ _Dec 25, 2023_ A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨: - 🚀 Added support for callbacks in the [variant's props definition](https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants) (#40094) @mnajdova -- 💫 Published a [blogpost](https://mui.com/blog/2023-material-ui-v6-and-beyond/) for the 2024's plan about Material UI +- 💫 Published a [blogpost](https://mui.com/blog/2023-material-ui-v6-and-beyond/) for the 2024's plan about Material UI ### `@mui/material@5.15.2` @@ -188,7 +440,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som ### Docs - ​[base-ui] Fix form submission Select demo (#40014) @ZeeshanTamboli -- ​[blog] Add Material UI v6 and beyond blog post (#40242) @mnajdova +- ​[blog] Add Material UI v6 and beyond blog post (#40242) @mnajdova - ​[material-ui] Fix broken links in the All components page (#40303) @muazaqdas - ​[material-ui] Fix broken links on the All components page (#40279) @danilo-leal - ​[material-ui] Add aria-current for nav tabs demo (#39594) @Kimzify @@ -267,7 +519,7 @@ _Dec 11, 2023_ A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨: -- 🚀 Added [a new package for a better Material UI integration with Next.js](https://mui.com/material-ui/guides/nextjs) (#39947) @siriwatknp +- 🚀 Added [a new package for a better Material UI integration with Next.js](https://mui.com/material-ui/guides/nextjs) (#39947) @siriwatknp ### `@mui/material@5.15.0` @@ -305,14 +557,14 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​[docs][base-ui] Add copy button & primary color picker to the component gallery page (#39884) @mnajdova - ​[docs-infra] Update CodeSandbox links (#39992) @anle9650 - ​[material-ui][docs] Fix wrong root element for emotion styles in shadow DOM (#35326) @EloB -- ​[material-ui][docs] Move the responsive font charts from recharts to MUI X (#40097) @alexfauquette +- ​[material-ui][docs] Move the responsive font charts from recharts to MUI X (#40097) @alexfauquette - ​[joy-ui][templates] Remove outdated code (#40095) @zanivan - ​[material-ui][docs][Popper] Update Positioned Popper demo styles (#40170) @sai6855 ### Core - ​[blog] Add a Phuket retreat blog post (#40055) @mikailaread -- ​[blog] Adjust the latest MUI X blog post (#40046) @danilo-leal +- ​[blog] Adjust the latest MUI X blog post (#40046) @danilo-leal - ​[core] Migrate from tslint to eslint (#40020) @ZeeshanTamboli All contributors of this release in alphabetical order: @abreel, @alexfauquette, @anle9650, @blakenetz, @danilo-leal, @EloB, @lhilgert9, @mbrookes, @mikailaread, @mj12albert, @mnajdova, @sai6855, @siriwatknp, @zanivan, @ZeeshanTamboli @@ -349,7 +601,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - ​[docs-infra] Simplify CSS classes extraction in API docs generator (#39808) @michaldudak - ​[website] Polish dark mode colors (#40052) @danilo-leal - ​[website] Add why Design Engineer for data grid (#40016) @oliviertassinari -- ​[website] Add stray fixes to the Base UI page (#40051) @danilo-leal +- ​[website] Add stray fixes to the Base UI page (#40051) @danilo-leal - ​[website] Revise the Developer Advocate job posting (#39210) @samuelsycamore All contributors of this release in alphabetical order: @alexfauquette, @anle9650, @caweidmann, @danilo-leal, @DiegoAndai, @fzaninotto, @Janpot, @lhilgert9, @michaldudak, @mnajdova, @oliviertassinari, @REX500, @samuelsycamore, @zanivan @@ -362,7 +614,7 @@ _Nov 29, 2023_ A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨: -- 🐛 Fix Material UI Autocomplete behavior when there are duplicate labels (#36426) @islandryu +- 🐛 Fix Material UI Autocomplete behavior when there are duplicate labels (#36426) @islandryu - 🚀 Added Material You Linear Progress to `material-next` package (#39807) @lhilgert9 ### `@mui/material@5.14.19` @@ -404,7 +656,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som - ​[material-ui] Fix theme prop in v5 migration guide (#39976) @sai6855 - ​[base-ui] Improve Next.js Link docs (#39838) @oliviertassinari -- ​[base-ui] Export Base UI theme in stylesheet (#39694) @mnajdova +- ​[base-ui] Export Base UI theme in stylesheet (#39694) @mnajdova - ​[joy-ui] Fix the date min & max slot props values on the Input demo (#40018) @avikalpg - ​[joy-ui][ButtonGroup] Fix orientation prop description (#39876) @sai6855 - ​[joy-ui] Update gif from the Dark Mode Optimization page (#39726) @danilo-leal @@ -438,7 +690,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som - ​[website] Fix 301 redirection to X tree-view @oliviertassinari - ​[website] Change redirection prefixes @oliviertassinari - ​[website] Fix 301 link @oliviertassinari -- ​[website] Fix modal not being closed with the escape key on the Base UI page (#39880) @ZeeshanTamboli +- ​[website] Fix modal not being closed with the escape key on the Base UI page (#39880) @ZeeshanTamboli All contributors of this release in alphabetical order: @avikalpg, @brijeshb42, @cherniavskii, @danilo-leal, @DarhkVoyd, @dhaub-exelixis, @DiegoAndai, @flaviendelangle, @islandryu, @joserodolfofreitas, @lhilgert9, @mj12albert, @mnajdova, @oliviertassinari, @sadik-malik, @sai6855, @zanivan, @ZeeshanTamboli @@ -484,12 +736,12 @@ A big thanks to the 14 contributors who made this release possible. Here are som - ​[joy-ui] Fix API generation for Grid (#39861) @oliviertassinari - ​[joy-ui] Fix menu in color inversion header demo (#39785) @sai6855 - ​[joy-ui] Change the design kit link on the Overview page (#39725) @danilo-leal -- ​[joy-ui] Add `CssBaseline` to integration with Material UI page (#39790) @swillianc +- ​[joy-ui] Add `CssBaseline` to integration with Material UI page (#39790) @swillianc - ​[joy-ui][Tabs] Add wordBreak style to demo (#39821) @sai6855 ## Core -- ​[blog] MUI X late v6 blog post (#39700) @joserodolfofreitas +- ​[blog] MUI X late v6 blog post (#39700) @joserodolfofreitas - ​[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 @@ -557,7 +809,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - [docs-infra] Fix crawler on API pages (#39490) @alexfauquette - [docs–infra] Small polish on API toggle (#39704) @oliviertassinari - [core] Speed up the CI by removing the second build (#39684) @michaldudak -- [core][docs] Fix broken MUI System link in README.md (#39734) @samuelsycamore +- [core][docs] Fix broken MUI System link in README.md (#39734) @samuelsycamore - [website] List benefits for sponsors (#39640) @oliviertassinari - [website] Add Vadym teamMember card to 'About' (#39701) @hasdfa - [test] Fix flaky screenshot (#39711) @oliviertassinari @@ -744,9 +996,9 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements ### Docs - ​[docs][base-ui] Renaming demos to BaseXxx (#39104) @christophermorin -- ​[docs] Accessibility in Base UI (#39264) @michaldudak +- ​[docs] Accessibility in Base UI (#39264) @michaldudak - ​[docs] Fix 301 redirection @oliviertassinari -- ​[docs] Improve Base UI table of contents for APIs (#39412) @ZeeshanTamboli +- ​[docs] Improve Base UI table of contents for APIs (#39412) @ZeeshanTamboli - ​[docs] Adjust design kits-related content (#39367) @danilo-leal - ​[docs] Revise the Contributing Guide (#39190) @samuelsycamore - ​[docs][joy-ui] Fix row hover prop name in the Table page (#39431) @adrienbrault @@ -981,7 +1233,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - [core] Add a comment to explain `useEnhancedEffect` (#39035) @Janpot - [docs-infra] Fix code removal in table of content (#39165) @alexfauquette - [docs-infra] Improve callouts design (#39084) @danilo-leal -- [docs-infra] Fix key warning in Base UI Slider slots section (#38954) @ZeeshanTamboli +- [docs-infra] Fix key warning in Base UI Slider slots section (#38954) @ZeeshanTamboli - [docs-infra] Fix error when redirecting to the root page (#38451) @maheshguntur - [docs-infra] Open demo crash in the right repository (#39006) @oliviertassinari - [test] Split the test package (#39061) @michaldudak @@ -1060,7 +1312,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 -- ✨ Material UI's [`ButtonGroup` component](https://mui.com/material-ui/react-button-group/) now styles button elements within it correctly (#38520) @ZeeshanTamboli +- ✨ 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` @@ -1112,7 +1364,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som - ​[Button][docs][material-ui] Update the file upload demo (#38823) @danilo-leal - ​[docs][DialogTitle] Fix props docs doesn't mention it extends `Typography` props (#38856) @sai6855 - ​[docs] Improve npm experience (#38906) @oliviertassinari -- ​[docs] Fix redirection to Base UI URLs @oliviertassinari +- ​[docs] Fix redirection to Base UI URLs @oliviertassinari - ​[docs] Fix use of callouts (#38747) @oliviertassinari - ​[docs] Fix 301 links for SEO @oliviertassinari - ​[docs] Remove flag from installation page @oliviertassinari @@ -1133,7 +1385,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som ### Examples - ​[examples] Add shortcut to open example in online IDE (#38572) @oliviertassinari -- ​[examples][base-ui] Add Base UI + Vite + Tailwind CSS example in TypeScript (#37595) @dvkam +- ​[examples][base-ui] Add Base UI + Vite + Tailwind CSS example in TypeScript (#37595) @dvkam ### Core @@ -1152,7 +1404,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som - ​[docs–infra] Fix callout container width (#38880) @oliviertassinari - ​[docs-infra] Catch duplicated trailing splashes in links (#38758) @oliviertassinari - ​[website] add Michel Engelen to the about us page (#38818) @michelengelen -- ​[website] Add a templates & design kits section to the Material UI page (#38617) @danilo-leal +- ​[website] Add a templates & design kits section to the Material UI page (#38617) @danilo-leal All contributors of this release in alphabetical order: @brentertz, @brijeshb42, @danilo-leal, @DiegoAndai, @dvkam, @flaviendelangle, @Janpot, @LadyBluenotes, @michaldudak, @michelengelen, @mj12albert, @mnajdova, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @zanivan, @ZeeshanTamboli @@ -1188,7 +1440,7 @@ A big thanks to the 25 contributors who made this release possible. ### `@mui/lab@5.0.0-alpha.143` -- ​[TreeView] Use Tree View from MUI X in the lab (#38261) @flaviendelangle +- ​[TreeView] Use Tree View from MUI X in the lab (#38261) @flaviendelangle - ​[LoadingButton] Fix HTML rule button > div forbidden nesting (#38584) @oliviertassinari ### `@mui/system@5.14.8` @@ -1298,7 +1550,7 @@ _Aug 23, 2023_ A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨: -- 🚀 Added the [Popup](https://mui.com/base-ui/react-popup/) component to Base UI (#37960) @michaldudak +- 🚀 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 InputBase and ButtonBase components to `material-next` (#38319) @DiegoAndai @mj12albert @@ -1337,7 +1589,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som - [docs] Improve the "Understanding MUI packages" page images (#38619) @danilo-leal - [docs][base-ui] Revise the structure of the Component docs (#38529) @samuelsycamore - [docs][base-ui] Fix Menu Hooks demo (#38479) @homerchen19 -- [docs][base-ui] Correct the MUI System quickstart example (#38496) @michaldudak +- [docs][base-ui] Correct the MUI System quickstart example (#38496) @michaldudak - [docs][base-ui] Add Tailwind & plain CSS demos for Autocomplete page (#38157) @mj12albert - [docs][base-ui] Add Tailwind CSS + plain CSS demo on the Input page (#38302) @alisasanib - [docs][base-ui] Add Tailwind CSS + plain CSS demo on the Snackbar, Badge, Switch pages (#38425) @alisasanib @@ -1364,7 +1616,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som - [docs] Clarify System peer dependencies @oliviertassinari - [docs] Fix horizontal scrollbar @oliviertassinari - [docs] Code style convention @oliviertassinari -- [docs] Fix typo in Base UI @oliviertassinari +- [docs] Fix typo in Base UI @oliviertassinari - [docs] Update the backers page (#38505) @danilo-leal - [docs] Add stray design adjustments to the docs (#38501) @danilo-leal - [docs] Use IBM Plex Sans in Tailwind CSS demos (#38464) @mnajdova @@ -1379,7 +1631,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som ### Core - [changelog] Fix issues in highlight @oliviertassinari -- [core] Remove redundant `@material-ui/` aliases from regression test webpack config (#38574) @ZeeshanTamboli +- [core] Remove redundant `@material-ui/` aliases from regression test Webpack config (#38574) @ZeeshanTamboli - [core] Fix CI error @oliviertassinari - [core] Remove unnecessary Box (#38461) @oliviertassinari - [core] Set GitHub Action top level permission @oliviertassinari @@ -1399,9 +1651,9 @@ A big thanks to the 21 contributors who made this release possible. Here are som - [docs-infra] Fix GoogleAnalytics missing event for code copy (#38469) @alexfauquette - [docs-infra] Improve affordance on the code block expansion (#38421) @danilo-leal - [website] Fine-tune the branding theme buttons (#38588) @danilo-leal -- [website] Improve the Base UI hero section demo (#38585) @danilo-leal -- [website] Add stray design improvements to the Material UI page (#38590) @danilo-leal -- [website] Fix mobile view Material UI page (#38568) @oliviertassinari +- [website] Improve the Base UI hero section demo (#38585) @danilo-leal +- [website] Add stray design improvements to the Material UI page (#38590) @danilo-leal +- [website] Fix mobile view Material UI page (#38568) @oliviertassinari - [website] Fix reference to the data grid @oliviertassinari - [website] Configure Apple Pay @oliviertassinari - [website] Fix template link on the homepage (#38471) @danilo-leal @@ -1416,7 +1668,7 @@ _Aug 14, 2023_ A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨: -- @mnajdova [made it easier to use third-party components in Base UI slots](https://mui.com/base-ui/getting-started/customization/#overriding-subcomponent-slots) with the introduction of the `prepareForSlot` utility (#38138) +- @mnajdova [made it easier to use third-party components in Base UI slots](https://mui.com/base-ui/getting-started/customization/#overriding-subcomponent-slots) with the introduction of the `prepareForSlot` utility (#38138) ### `@mui/material@5.14.5` @@ -1442,7 +1694,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som ### Docs -- ​[blog] Blog post for MUI X mid v6. Date Pickers, Data Grid, and Charts (#38241) @richbustos +- ​[blog] Blog post for MUI X mid v6. Date Pickers, Data Grid, and Charts (#38241) @richbustos - ​[docs][base-ui] Update number input API docs (#38363) @mj12albert - ​[docs] Improve page transition speed (#38394) @oliviertassinari - ​[docs] Improve examples (#38398) @oliviertassinari @@ -1471,7 +1723,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som - ​[docs-infra] Adjust heading styles (#38365) @danilo-leal - ​[docs-infra] Fix info callout border color (#38370) @danilo-leal - ​[website] Upgrade the homepage hero demos design (#38388) @danilo-leal -- ​[website] Improve Base UI hero section demo (#38255) @danilo-leal +- ​[website] Improve Base UI hero section demo (#38255) @danilo-leal - ​[website] Fix EmailSubscribe look (#38429) @oliviertassinari - ​[website] Link Discord in footer (#38369) @richbustos - ​[website] Clean up the `GetStartedButtons` component (#38256) @danilo-leal @@ -1486,7 +1738,7 @@ _Aug 8, 2023_ A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨: -- 🎉 Added [Number Input](https://mui.com/base-ui/react-number-input/) component & [useNumberInput](https://mui.com/base-ui/react-number-input/#hook) hook in [Base UI](https://mui.com/base-ui/getting-started/) @mj12albert +- 🎉 Added [Number Input](https://mui.com/base-ui/react-number-input/) component & [useNumberInput](https://mui.com/base-ui/react-number-input/#hook) hook in [Base UI](https://mui.com/base-ui/getting-started/) @mj12albert ### `@mui/material@5.14.4` @@ -1503,7 +1755,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som - ​[base] Ban default exports (#38200) @michaldudak - Base UI default exports were changed to named ones. Previously we had a mix of default and named ones. + Base UI default exports were changed to named ones. Previously we had a mix of default and named ones. This was changed to improve consistency and avoid problems some bundlers have with default exports. See https://github.com/mui/material-ui/issues/21862 for more context. @@ -1553,10 +1805,10 @@ A big thanks to the 18 contributors who made this release possible. Here are som - ​[docs][Skeleton] Make the demos feel more realistic (#38212) @oliviertassinari - ​[examples] Swap Next.js examples between App Router and Pages Router; update naming convention (#38204) @samuelsycamore -- ​[examples][material-ui] Add Material UI + Next.js (App Router) example in JS (#38323) @samuelsycamore +- ​[examples][material-ui] Add Material UI + Next.js (App Router) example in JS (#38323) @samuelsycamore - ​[blog] Discord announcement blog (#38258) @richbustos - ​[blog] Fix 301 links to Toolpad @oliviertassinari -- ​[website] Updating Charts demo with real charts usage for MUI X marketing page (#38317) @richbustos +- ​[website] Updating Charts demo with real charts usage for MUI X marketing page (#38317) @richbustos - ​[website] Adjust styles of the Product section on the homepage (#38366) @danilo-leal - ​[website] Add Nora teamMember card to 'About' (#38358) @noraleonte - ​[website] Fix image layout shift (#38326) @oliviertassinari @@ -1586,7 +1838,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som - 🚀 [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 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 ### `@mui/material@5.14.3` @@ -1654,7 +1906,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som ### Core -- ​[blog] Fix blog post slug Base UI (#38254) @oliviertassinari +- ​[blog] Fix blog post slug Base UI (#38254) @oliviertassinari - ​[core] Use native Node's fetch instead of node-fetch package (#38263) @michaldudak - ​[core] Remove dead code @oliviertassinari - ​[core] Polish Stack test to closer CSS injection order @oliviertassinari @@ -1694,7 +1946,7 @@ A big thanks to the 23 contributors who made this release possible. - ​[docs][base] Add Tailwind CSS & plain CSS demos on the Textarea page (#37943) @zanivan - ​[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] Fix Base UI Button Tailwind CSS padding @oliviertassinari - ​[docs] Mention in hompage hero that Core is free (#38075) @mbrookes - ​[docs] Fix a typo in notifications.json (#38078) @mbrookes - ​[docs] Add Tailwind CSS & plain CSS demo on the table pagination page (#37937) @mnajdova @@ -1716,11 +1968,11 @@ A big thanks to the 23 contributors who made this release possible. - ​[website] Mobile navigation: Toolpad to Beta (#38146) @bharatkashyap - ​[website] Fix typo on pricing page @oliviertassinari - ​[website] Fix a few regression (#38050) @oliviertassinari -- ​[website] Update Demo footers on MUI X landing page (#38027) @richbustos +- ​[website] Update Demo footers on MUI X landing page (#38027) @richbustos - ​[website] Fix 301 redirection to base index page @oliviertassinari - ​[website] Fix Cell selection feature name (#38029) @oliviertassinari - ​[website] Improve button look (#38052) @oliviertassinari -- ​[website] Link new core page to new Base UI landing page (#38030) @mj12albert +- ​[website] Link new core page to new Base UI landing page (#38030) @mj12albert - ​[website] Polish pricing page (#37975) @oliviertassinari - ​[test] Fail the CI when new unexpected files are created (#38039) @oliviertassinari - ​[test] Fix linting error by matching main component demo name to filename (#38122) @ZeeshanTamboli @@ -1738,7 +1990,7 @@ A big thanks to the 24 contributors who made this release possible. Here are som - 💫 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)! +- 🎉 Base UI has its own [landing page](https://www.mui.com/base-ui)! - 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements. ### `@mui/material@5.14.1` @@ -1770,14 +2022,14 @@ A big thanks to the 24 contributors who made this release possible. Here are som ### Docs - ​[docs][base] Add Tailwind CSS & plain CSS demo on the form control page (#37914) @mnajdova -- ​[docs][base] Make Base UI Select demos denser (#37836) @zanivan -- ​[docs] Link Material UI from the landing page (#37971) @oliviertassinari +- ​[docs][base] Make Base UI Select demos denser (#37836) @zanivan +- ​[docs] Link Material UI from the landing page (#37971) @oliviertassinari - ​[docs] Fix the empty /components page (#38010) @brijeshb42 - ​[docs] Checkout template follows user's color scheme preference (#37928) @OndrejHj04 - ​[docs] Disable ad for onboarding pages (#37998) @oliviertassinari -- ​[docs] Fix broken link to Base UI Next.js App Router (#37973) @oliviertassinari +- ​[docs] Fix broken link to Base UI Next.js App Router (#37973) @oliviertassinari - ​[docs] Fix typo in next-js-app-router.md (#37974) @ericbrian -- ​[docs] Add pnpm commands to Material UI Installation page (#36650) @officialrajdeepsingh +- ​[docs] Add pnpm commands to Material UI Installation page (#36650) @officialrajdeepsingh - ​[docs] Link charts in the roadmap (#37944) @oliviertassinari - ​[docs] Improve changelog @oliviertassinari - ​[docs] Improve the Select docs (#37279) @michaldudak @@ -1787,7 +2039,7 @@ A big thanks to the 24 contributors who made this release possible. Here are som ### Core - ​[blog] Add blog post about support for Next.js App Router (#37929) @samuelsycamore -- ​[blog] Blog MUI X pro statement removed (#38015) @prakhargupta1 +- ​[blog] Blog MUI X pro statement removed (#38015) @prakhargupta1 - ​[blog] Add Toolpad beta announcement blog (#37799) @prakhargupta1 - ​[core] Increase space available for sidenav @oliviertassinari - ​[core] Adds `component` prop to `OverrideProps` type (#35924) @sai6855 @@ -1803,15 +2055,15 @@ A big thanks to the 24 contributors who made this release possible. Here are som - ​[docs-infra] Fix button label on mobile (#37997) @oliviertassinari - ​[docs-infra] Square drawer corners (#37970) @oliviertassinari - ​[docs-infra] Improve tab contrast in codeblock (#38000) @oliviertassinari -- ​[docs-infra] Fix API generation for Base UI (#37941) @oliviertassinari +- ​[docs-infra] Fix API generation for Base UI (#37941) @oliviertassinari - ​[docs-infra] Fix layout shift on xGrid (#37954) @oliviertassinari - ​[docs-infra] Update installation commands to use the new tabs code component (#37927) @danilo-leal - ​[docs-infra] Improve disableToc={true} support (#37931) @oliviertassinari - ​[docs-infra] Remove icons and tweak the design of the side nav (#37860) @danilo-leal - ​[docs-infra] Fix TypeScrit error in demo export (#37830) @oliviertassinari - ​[notifications] Add notification for first Charts release (#37679) @joserodolfofreitas -- ​[website] Add Base UI marketing page (#36622) @siriwatknp -- ​[website] Update MUI X landing page (#37966) @cherniavskii +- ​[website] Add Base UI marketing page (#36622) @siriwatknp +- ​[website] Update MUI X landing page (#37966) @cherniavskii - ​[website] Fix a11y issues (#37999) @oliviertassinari - ​[website] Make the Core page refer to group of products (#37608) @danilo-leal - ​[website] Add perpetual option to pricing page (#35504) @joserodolfofreitas @@ -1826,11 +2078,11 @@ _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/) + - Ⓜ️ [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/) - - 🅱️ [Base UI guide](https://mui.com/base-ui/guides/next-js-app-router/) + - 🅱️ [Base UI guide](https://mui.com/base-ui/guides/next-js-app-router/) - 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements. ### `@mui/material@5.14.0` @@ -1875,7 +2127,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som ### Core -- [core] Prepend "use-client" directive + add docs and examples for using MUI libraries with Next.js App Router (#37656) @mj12albert +- [core] Prepend "use-client" directive + add docs and examples for using the library with Next.js App Router (#37656) @mj12albert - [core] Fix imports to React (#37863) @oliviertassinari - [core] Disambiguate eslint plugin name @oliviertassinari - [core] Sync the lint script name with the other repositories @oliviertassinari @@ -1925,16 +2177,16 @@ This release focuses primarily on 🐛 bug fixes, 📚 documentation, and ⚙️ - [docs][base] Add demo for using the Button as a link (#37317) @AdamSundberg - [docs][base] Add Tailwind CSS + plain CSS demo on the Select page (#37725) @mnajdova -- [docs][base] Make Base UI input demos denser (#37750) @zanivan -- [docs][base] Make Base UI button demos denser (#37689) @zanivan +- [docs][base] Make Base UI input demos denser (#37750) @zanivan +- [docs][base] Make Base UI button demos denser (#37689) @zanivan - [docs][base] Add Tailwind CSS & plain CSS demos on the Input page (#37685) @mnajdova - [docs][base] Fix horizontal scrolling on the mobile input page (#37688) @zanivan -- [docs] Improve Base UI index page (#37761) @oliviertassinari +- [docs] Improve Base UI index page (#37761) @oliviertassinari - [docs] Fix incorrect package URL in README of example material-vite (#37755) @Dlouxgit - [docs] Explain how to disable Base Select's portal (#37684) @michaldudak - [docs] Shorten overview page URLs (#37660) @oliviertassinari - [docs][material] Rename custom tab panel in Tabs demo to prevent confusion with @mui/lab (#37638) @MUK-Dev -- [docs][tabs] Document how to use routing with Tabs in Base UI (#37369) @michaldudak +- [docs][tabs] Document how to use routing with Tabs in Base UI (#37369) @michaldudak - [docs] Rename product to productId (#37801) @siriwatknp - [docs][base] Add Tailwind CSS & plain CSS demo on the Slider page (#37736) @mnajdova @@ -1963,7 +2215,7 @@ This release focuses primarily on 🐛 bug fixes, 📚 documentation, and ⚙️ - [test] Fix test:e2e local run (#37719) @oliviertassinari - [test] Remove failing test in dev @oliviertassinari - [website] Add no-op service worker to fix stale cache issue (#37607) @cherniavskii -- [website] Transition the Core page to be Material UI instead (#37583) @danilo-leal +- [website] Transition the Core page to be Material UI instead (#37583) @danilo-leal - [website] Update the pricing page to reflect sales (#37751) @oliviertassinari - [website] Match Copyright with the rest of the website @oliviertassinari - [website] Support deep linking to pricing FAQ @oliviertassinari @@ -1977,12 +2229,12 @@ _Jun 21, 2023_ A big thanks to the 25 contributors who made this release possible. Here are some highlights ✨: - 💫 Added [Slider](https://mui.com/material-ui/react-slider/#material-you-version) component using the new Material You design language (#37520) @DiegoAndai. -- 📚 Added [examples](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts) showcasing how you can use Material UI with next.js's app directory (#37315) @smo043 +- 📚 Added [examples](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts) showcasing how you can use Material UI with next.js's app directory (#37315) @smo043 ### `@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 @@ -2013,15 +2265,15 @@ A big thanks to the 25 contributors who made this release possible. Here are som ### Docs -- ​[docs][base] Improve Base UI all components images (#37590) @danilo-leal +- ​[docs][base] Improve Base UI all components images (#37590) @danilo-leal - ​[docs][base] Add pages for coming soon components (#37575) @danilo-leal - ​[docs][base] Add a Snackbar introduction demo (#37602) @danilo-leal -- ​[docs][base] Add page for all Base UI components (#37536) @danilo-leal +- ​[docs][base] Add page for all Base UI components (#37536) @danilo-leal - ​[docs] Fix scrollbar on snackbar page (#37657) @oliviertassinari - ​[docs] Switch order of snackbar buttons in demos (#37389) @Primajin - ​[docs] Add support for Tailwind CSS and plain CSS demos (#37319) @mnajdova - ​[docs] Tree view color fix for dark mode in Gmail example (#37051) @PunitSoniME -- ​[docs] Inline the Base UI demo (#37603) @oliviertassinari +- ​[docs] Inline the Base UI demo (#37603) @oliviertassinari - ​[docs] Fix typo in themed components page (#37598) @vinayr - ​[docs] Fix render inline code in CSS description generation (#37448) @alexfauquette - ​[docs] Add styles to styled argument list (#37558) @DiegoAndai @@ -2029,17 +2281,17 @@ A big thanks to the 25 contributors who made this release possible. Here are som - ​[docs] Fix small base -> base-ui migration issue (#37594) @oliviertassinari - ​[docs] Fix GitHub typo (#37578) @oliviertassinari - ​[docs] Improve release guide (#37547) @DiegoAndai -- ​[docs] Review fixes to the Material UI's "Example projects" page (#37444) @danilo-leal +- ​[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 design and consistency tweaks to the Playground (#37580) @danilo-leal -- ​[docs] Add and revise Base UI + Create React App examples (#36825) @samuelsycamore +- ​[docs] Add and revise Base UI + Create React App examples (#36825) @samuelsycamore - ​[docs-infra] Fix demos border radius (#37658) @oliviertassinari - ​[docs-infra] Add analyticsTags to Algolia (#37600) @Janpot - ​[docs-infra] Simplify product id handling (#37593) @oliviertassinari - ​[changelog] Add missing release date for v5.13.5 @oliviertassinari - ​[examples] Shell command fix in the readme file of material-next-ts example (#37675) @bablukpik -- ​[examples] Next.js v13 app router with Material UI (#37315) @smo043 +- ​[examples] Next.js v13 app router with Material UI (#37315) @smo043 ### Core @@ -2077,7 +2329,7 @@ A big thanks to the 9 contributors who made this release possible. Here are some - ​[docs] Update /base url references to /base-ui (#37412) @brijeshb42 - ​[docs] Skip components and hooks due to duplicate index (#37539) @siriwatknp - ​[docs] Polish Sign in to your account joy demo (#37498) @oliviertassinari -- ​[docs] Remove outdated Material UI FAQ @oliviertassinari +- ​[docs] Remove outdated Material UI FAQ @oliviertassinari - ​[docs] Fix crash access to localStorage in Firefox (#37518) @brijeshb42 - ​[docs-infra] Enforce max length on description (#37565) @oliviertassinari - ​[docs-infra] Mandatory versions (#37497) @oliviertassinari @@ -2125,11 +2377,11 @@ A big thanks to the 12 contributors who made this release possible. Here are som - ​[docs][base] Remove usage of `component` prop in docs (#37462) @sai6855 - ​[docs] Fix docs redirections @oliviertassinari - ​[docs] Fix Fluent -> Fluent UI @oliviertassinari -- ​[docs] Fix MUI Base -> Base UI @oliviertassinari +- ​[docs] Fix MUI Base -> Base UI @oliviertassinari - ​[docs] Add base-vite-tailwind example repo (#36994) @mj12albert - ​[docs] Fix search bar layout shift (#37460) @oliviertassinari -- ​[docs] Tweak Material UI's "Showcase" page design (#37259) @danilo-leal -- ​[docs] Tweak Material UI's "Template" page design (#37260) @danilo-leal +- ​[docs] Tweak Material UI's "Showcase" page design (#37259) @danilo-leal +- ​[docs] Tweak Material UI's "Template" page design (#37260) @danilo-leal - ​[docs] Fix "Language" page removal leftovers (#37408) @danilo-leal - ​[docs] Move contents of css-variables to sibling pages (#37411) @brijeshb42 @@ -2176,7 +2428,7 @@ This release focuses primarily on 🐛 bug fixes and 📚 documentation improvem ### Docs - ​[docs] Clarify Hidden down props as exclusive (#36927) @canac -- ​[docs] Add refine to Material UI "Related projects" and "More advanced example projects" pages (#37308) @necatiozmen +- ​[docs] Add refine to Material UI "Related projects" and "More advanced example projects" pages (#37308) @necatiozmen - ​[docs] Remove todo link from sidebar (#37373) @brijeshb42 - ​[docs] Clarify the peer dependency with react (#37360) @oliviertassinari - ​[docs] Divider vertical middle prop migration (#36840) @JhonnK08 @@ -2215,7 +2467,7 @@ A big thanks to the 12 contributors who made this release possible. - [docs][base] Remove default annotations from useBadge's return type (#37313) @TinaSay - [docs][base] Remove default annotations from useButton's return type (#37312) @TinaSay - [docs][base] Remove default annotations from useSlider's return type (#37309) @TinaSay -- [docs] Remove Material UI's "Languages" page (#37314) @danilo-leal +- [docs] Remove Material UI's "Languages" page (#37314) @danilo-leal - [docs] Prefer to link GitHub repository @oliviertassinari - [docs] Move product versions to page context (#35078) @m4theushw - [docs] Fix v5 migration npm install instruction (#37293) @oliviertassinari @@ -2280,8 +2532,8 @@ A big thanks to the 25 contributors who made this release possible. Here are som - [docs] Add summary and improve `test_static` CI doc in CONTRIBUTING readme file (#36711) @kriskw1999 - [docs] Update theme customization typescript (#35551) @siriwatknp - [docs] Add Joy Frames X web blocks template (#37203) @siriwatknp -- [docs] Change Base UI `alpha` to `beta` in README (#37228) @ZeeshanTamboli -- [docs] Improve Base UI overview page (#37227) @mnajdova +- [docs] Change Base UI `alpha` to `beta` in README (#37228) @ZeeshanTamboli +- [docs] Improve Base UI overview page (#37227) @mnajdova - [docs] Update Joy + Material guide (#36911) @cherniavskii ### Core @@ -2303,7 +2555,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! +- 🚀 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. - 🐛 Various bug fixes, 📚 documentation and 🧪 testing improvements @@ -2336,10 +2588,10 @@ A big thanks to the 18 contributors who made this release possible. Here are som ### Docs -- [docs] Stray design tweaks to Base UI demos (#37003) @danilo-leal +- [docs] Stray design tweaks to Base UI demos (#37003) @danilo-leal - [docs] Move outdated CSS prefixing docs (#36710) @kriskw1999 - [docs] Improve "Example projects" page design (#37007) @danilo-leal -- [docs] Redirect NoSsr, Portal and TextareaAutosize to Base UI API page (#37175) @ZeeshanTamboli +- [docs] Redirect NoSsr, Portal and TextareaAutosize to Base UI API page (#37175) @ZeeshanTamboli - [docs] Demonstrate `TextField` customization using theme style overrides (#36805) @ZeeshanTamboli - [docs] Tweak the "Edit this page" button icon (#37142) @danilo-leal - [docs] Update links to the public roadmap (#36995) @mnajdova @@ -2348,7 +2600,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som ### Core -- [blog] Fix images using "MUI Base" instead of "Base UI" (#37044) @danilo-leal +- [blog] Fix images using "MUI Base" instead of "Base UI" (#37044) @danilo-leal - [core] Add VSCode extensions recommendations (#37166) @michaldudak - [test] `e2e-website` related minor fixes (#37204) @ZeeshanTamboli - [website] Update the active positions (#37075) @DanailH @@ -2365,7 +2617,7 @@ _May 2, 2023_ A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨: -- all planned breaking changes for Base UI are done. The first beta release should come next week 🎉 +- all planned breaking changes for Base UI are done. The first beta release should come next week 🎉 - 🐛 bug fixes and 📚 documentation improvements. ### `@mui/material@5.12.3` @@ -2435,7 +2687,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som - ​[base] Improve API consistency (#36970) @michaldudak - Brought consistency to Base UI components and hooks' parameters and return values: + Brought consistency to Base UI components and hooks' parameters and return values: 1. Whenever a hook needs a ref, it's now called `Ref`, which matches the `getProps` in the return value. 2. All hooks that accept external refs now return merged refs, making combining multiple hooks on one element easier. This was proven necessary in several compound components (like menuItem being both a button and a list item). The type of this value is `React.RefCallback` as using the more general `React.Ref` caused variance issues. @@ -2449,11 +2701,11 @@ A big thanks to the 18 contributors who made this release possible. Here are som ### Docs -- ​[base][docs] Add Base UI Quickstart Guide (#36717) @mj12albert -- ​[docs] Fix Material UI's API linking to Base UI (#37121) @mnajdova +- ​[base][docs] Add Base UI Quickstart Guide (#36717) @mj12albert +- ​[docs] Fix Material UI's API linking to Base UI (#37121) @mnajdova - ​[docs] Fix pagination in the DataGrid demo (#37114) @cherniavskii - ​[docs] Add notification to the release of the new Time Picker UI (#37065) @joserodolfofreitas -- ​[docs] Specify "Material UI" (not "MUI") where appropriate throughout the docs (#37066) @samuelsycamore +- ​[docs] Specify "Material UI" (not "MUI") where appropriate throughout the docs (#37066) @samuelsycamore - ​[docs] Use focus-visible instead of focus for Menu demos (#36847) @michaldudak - ​[docs] Fix small regressions API pages (#36972) @oliviertassinari - ​[docs] Handle a few docs-feedback (#36977) @oliviertassinari @@ -2485,7 +2737,7 @@ _Apr 25, 2023_ A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨: -- ⚠️ **[BREAKING CHANGE]** The `Unstyled` suffix has been removed from Base UI component names, including names of types and other related identifiers – a codemod script is provided to assist with the change. +- ⚠️ **[BREAKING CHANGE]** The `Unstyled` suffix has been removed from Base UI component names, including names of types and other related identifiers – a codemod script is provided to assist with the change. - 🐛 bug fixes and 📚 documentation improvements. ### `@mui/material@5.12.2` @@ -2500,7 +2752,7 @@ A big thanks to the 12 contributors who made this release possible. Here are som - ​[base] Remove unstyled suffix from Base components + Codemod script (#36873) @hbjORbj - The `Unstyled` suffix has been removed from all Base UI component names, including names of types and other related identifiers. + The `Unstyled` suffix has been removed from all Base UI component names, including names of types and other related identifiers. You can use this [codemod](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/base-remove-unstyled-suffix.js) to help with the migration: @@ -2606,7 +2858,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 @@ -2653,7 +2905,7 @@ A big thanks to the 9 contributors who made this release possible. Here are some - ​[docs] Add missing `readOnly` state class in the list (#36788) @ZeeshanTamboli - ​[docs] Improve side nav scroll into view (#36732) @oliviertassinari - ​[docs][base & joy] Display "Classes" Section in API docs (#36589) @hbjORbj -- ​[docs] Fix 100+ typos throughout the Material UI docs (#36194) @Lioness100 +- ​[docs] Fix 100+ typos throughout the Material UI docs (#36194) @Lioness100 - ​[docs] Change "coming soon" chip color (#36786) @danilo-leal - ​[docs][Joy] Fix wrong prop descriptions (#36826) @hbjORbj - ​[docs][material] Highlight global state classes in CSS table in API docs (#36633) @hbjORbj @@ -2663,7 +2915,7 @@ A big thanks to the 9 contributors who made this release possible. Here are some ### Core - ​[core] Increase margin to scroll @oliviertassinari -- ​[core] Replace MUI Base with Base UI (#36716) @mnajdova +- ​[core] Replace MUI Base with Base UI (#36716) @mnajdova - ​[website] Fix broken career website links @oliviertassinari - ​[website] Fix backlinks to homepage (#36801) @oliviertassinari - ​[website] Tweaks to the Designer position ad (#36771) @danilo-leal @@ -2678,7 +2930,7 @@ _Apr 4, 2023_ A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨: -- 💅 Added tabs on API pages of Base UI to switch between component and hook references (#35938) @mnajdova +- 💅 Added tabs on API pages of Base UI to switch between component and hook references (#35938) @mnajdova - 🐛 bug fixes and 📚 documentation improvements. ### `@mui/material@5.11.16` @@ -2718,7 +2970,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som - [docs] Fix small typo (#36727) @RBerthier - [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] 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] Support Google Analytics 4 (#36123) @alexfauquette @@ -2840,7 +3092,6 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - [docs] Remove `shouldSkipGeneratingVar` usage (#36581) @siriwatknp - [docs][material] Update Table's demo to show pointer cursor on clickable rows (#36546) @varunmulay22 - [website] Designer role changes (#36528) @danilo-leal -- [website] No association between showcase and MUI @oliviertassinari - [website] Open Head of Operations role (#36501) @oliviertassinari - [website] Limit sponsors description to two rows @oliviertassinari @@ -2860,13 +3111,13 @@ _Mar 14, 2023_ A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨: -- @michaldudak added an option for [disabling the generation](https://mui.com/base-ui/getting-started/customization/#disabling-default-css-classes) of the default classes in Base UI (#35963) +- @michaldudak added an option for [disabling the generation](https://mui.com/base-ui/getting-started/customization/#disabling-default-css-classes) of the default classes in Base UI (#35963) - other 🐛 bug fixes and 📚 documentation improvements. ### `@mui/material@5.11.13` -- ​[core] Bump Base UI's version in Material UI (#36492) @hbjORbj -- ​[material] Export `shouldSkipGeneratingVar` from Material UI (#36489) @siriwatknp +- ​[core] Bump Base UI's version in Material UI (#36492) @hbjORbj +- ​[material] Export `shouldSkipGeneratingVar` from Material UI (#36489) @siriwatknp - ​[Typography] Apply font properties to typography inherit variant (#33621) @oyar99 ### `@mui/base@5.0.0-alpha.121` @@ -2881,12 +3132,12 @@ A big thanks to the 13 contributors who made this release possible. Here are som - ​[blog] Update fields behavior on date pickers blog post (#36480) @joserodolfofreitas - ​[docs] Info markdown not rendering in Contributing Guide README (#36487) @hbjORbj -- ​[docs] Remove 301 redirection to MUI X lab migration @oliviertassinari +- ​[docs] Remove 301 redirection to MUI X lab migration @oliviertassinari - ​[docs] Fix a grammar error (#36486) @hbjORbj - ​[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 @@ -2922,7 +3173,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 { @@ -3011,11 +3262,11 @@ A big thanks to the 17 contributors who made this release possible. Here are som ### Docs - ​[docs][joy] Clarify when `CssVarsProvider` is required (#36410) @mnajdova -- ​MUI X v6 release announcement (#36398) @joserodolfofreitas +- ​MUI X v6 release announcement (#36398) @joserodolfofreitas - ​[docs] Add instructions for deploying docs without a release (#36301) @cherniavskii - ​[docs] Fix 301 redirections on the docs @oliviertassinari -- ​[docs] Update MUI X banner to reflect stable release (#36354) @MBilalShafi -- ​[docs] Clarify the future plan for integrating Base UI in Material UI (#36365) @mnajdova +- ​[docs] Update MUI X banner to reflect stable release (#36354) @MBilalShafi +- ​[docs] Clarify the future plan for integrating Base UI in Material UI (#36365) @mnajdova - ​[docs] Improve visual look of loose lists (#36190) @oliviertassinari - ​[docs] Fix @mui/styles example links (#36331) @oliviertassinari - ​[docs][joy] Build TS versions for List component demos (#36382) @sai6855 @@ -3045,14 +3296,14 @@ _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` - ​[Autocomplete] Adds `sx` prop to `ListboxProps` type (#36243) @sai6855 - ​[material] Add global CSS class for `readOnly` prop (#32822) @jrparish -- ​[Stack][material] Use createStack from the system (#33795) @mnajdova +- ​[Stack][material] Use createStack from MUI System (#33795) @mnajdova - ​[Select] Fix incorrect selecting of first element (#36024) @michaldudak - ​[Slider] Miscellaneous improvements (#35941) @ZeeshanTamboli - ​[Slider] Remove unnecessary `data-focusvisible` attribute (#36091) @ZeeshanTamboli @@ -3109,7 +3360,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​[docs] Add missing sandbox adapter deps resolving (#36291) @LukasTy - ​[docs] Allow to pass navigation bar banner from outside (#36299) @MBilalShafi - ​[docs] Fix code on the Working with Tailwind CSS guide (#36090) @mnajdova -- ​[docs] Remove See Slots Section text from Material UI slots description (#36284) @hbjORbj +- ​[docs] Remove See Slots Section text from Material UI slots description (#36284) @hbjORbj - ​[docs] Fix emotion warning `:first-child` (#36263) @siriwatknp - ​[docs][joy] Improve the descriptions of props in API docs (#36307) @hbjORbj - ​[docs][joy] List slots in API documentation (#36271) @hbjORbj @@ -3276,13 +3527,13 @@ A big thanks to the 14 contributors who made this release possible. Here are som ### Docs - ​[blog] Fix dark mode support (#35969) @oliviertassinari -- ​[docs] Add banner pointing to "Whats new" in MUI X page (#36074) @joserodolfofreitas +- ​[docs] Add banner pointing to "Whats new" in MUI X page (#36074) @joserodolfofreitas - ​[docs] Revert unintended change @oliviertassinari - ​[docs] [Joy] Fixed a typo in `customizing theme tokens` (#36067) @badalsaibo - ​[docs] Improve inline preview's information (#35974) @oliviertassinari - ​[docs] Fix wrong v5 migration instructions (#36022) @oliviertassinari - ​[docs] Fix autocomplete render group key warning in the demo (#36025) @chuanyu0201 -- ​[docs] Add hooks API pages for Base UI (#35828) @mnajdova +- ​[docs] Add hooks API pages for Base UI (#35828) @mnajdova - ​[docs] Fix grammar typo (#36016) @alexownejazayeri - ​[docs][joy] Add JSDoc for the `AutocompleteProps` type (#36039) @ArthurPedroti @@ -3365,7 +3616,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​[docs] Fix Joy UI variables playground (#35950) @siriwatknp - ​[docs] Fix typos in base components docs (#35985) @HeVictor - ​[docs] Fix event's label reported to GA (#35930) @oliviertassinari -- ​[docs] Standardize "no longer" / "not documented" callouts in Material UI docs (#35957) @samuelsycamore +- ​[docs] Standardize "no longer" / "not documented" callouts in Material UI docs (#35957) @samuelsycamore - ​[docs] Revise and expand Joy UI Checkbox doc (#35817) @samuelsycamore - ​[docs] Add docs notification to Date and Time Pickers revamped (#35935) @joserodolfofreitas - ​[docs] Update community theme builder to forked updated one (#35928) @idebeijer @@ -3469,7 +3720,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements ### `@mui/material@5.11.5` -- [Material UI] Custom channel token should suppress the warning (#35804) @siriwatknp +- [Material UI] Custom channel token should suppress the warning (#35804) @siriwatknp - [Autocomplete] Fix value type when `strictNullChecks` is `false` (#35367) @fenghan34 - [Slider] Replace `SliderUnstyled` with `useSlider` hook (#35770) @ZeeshanTamboli - [l10n] Add Belarusian translation (#35742) @volhalink @@ -3498,7 +3749,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - [docs] Improve pickers lab migration stressing `mui-x` usage (#35740) @LukasTy - [docs] Fix incorrectly named AccessibleTable demo component (#35832) @HeVictor -- [docs] Clarify where to find docs for Base UI components in Material UI (#35799) @samuelsycamore +- [docs] Clarify where to find docs for Base UI components in Material UI (#35799) @samuelsycamore - [docs] Fix typos (#35814) @alexfauquette - [docs] Revise and expand the Joy UI Card page (#35745) @samuelsycamore - [docs] Fix navigation layout shift (#35679) @oliviertassinari @@ -3512,7 +3763,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - [website] Improve pricing page (#35767) @oliviertassinari - [website] Add Greg in about page (#35816) @oliviertassinari - [website] Update the Accessibility Engineer role (#35751) @oliviertassinari -- [website] Add docs for MUI for Figma @oliviertassinari +- [website] Add docs for MUI for Figma @oliviertassinari All contributors of this release in alphabetical order: @alexfauquette, @atrefonas, @fenghan34, @hbjORbj, @HeVictor, @Juneezee, @LukasTy, @mnajdova, @msoyka, @nnmax, @oliviertassinari, @pupudu, @sai6855, @samuelsycamore, @siriwatknp, @volhalink, @ZeeshanTamboli @@ -3556,7 +3807,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements ### Core -- [core] Close 2022 developer survey @oliviertassinari +- [core] Close 2022 Developer Survey @oliviertassinari - [core] Fix the product license reference name (#35703) @oliviertassinari - [core] Use TypeScript AST instead of TTP for component doc building (#35379) @flaviendelangle - [test] Always use & for nesting styles (#35702) @oliviertassinari @@ -3609,7 +3860,7 @@ _Dec 26, 2022_ A big thanks to the 20 contributors who made this release possible. Here are some highlights ✨: -- ⚙️ Several Base UI components were converted to TypeScript by @trizotti, @leventdeniz and @danhuynhdev (#35005, #34793, #34771) +- ⚙️ Several Base UI components were converted to TypeScript by @trizotti, @leventdeniz and @danhuynhdev (#35005, #34793, #34771) - Many other 🐛 bug fixes abd 📚 documentation improvements. ### `@mui/material@5.11.2` @@ -3629,7 +3880,7 @@ A big thanks to the 20 contributors who made this release possible. Here are som - ​[FocusTrap][base] Convert code to TypeScript (#35005) @trizotti - ​[Modal][base] Convert code to TypeScript (#34793) @leventdeniz - ​[Popper][base] Convert code to TypeScript (#34771) @danhuynhdev -- ​[Slider] Exclude `isRtl` from Material UI's Slider props (#35564) @michaldudak +- ​[Slider] Exclude `isRtl` from Material UI's Slider props (#35564) @michaldudak ### `@mui/joy@5.0.0-alpha.60` @@ -3786,11 +4037,11 @@ A big thanks to the 19 contributors who made this release possible. Here are som - [docs] Refactor `ToggleButtonSizes` demo (#35375) @Armanio - [docs] Standardize the usage of callouts in the docs (#35361) @samuelsycamore - [docs] Format feedback to add a link to the commented section (#35381) @alexfauquette -- [docs] Direct users from Material UI to Base UI for duplicated components (#35293) @samuelsycamore +- [docs] Direct users from Material UI to Base UI for duplicated components (#35293) @samuelsycamore - [docs] Fix typo in FormControl API docs (#35449) @Spanishiwa - [docs] Update callouts design (#35390) @danilo-leal - [website] New wave of open roles (#35240) @mnajdova -- [website] Developer survey 2022 (#35407) @joserodolfofreitas +- [website] Developer Survey 2022 (#35407) @joserodolfofreitas ### Core @@ -3861,9 +4112,9 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​[docs] Improve the autogenerated "Unstyled" and "API" text (#35185) @samuelsycamore - ​[docs] Fix ad margin on API pages (#35201) @oliviertassinari - ​[docs] Revise and expand the Joy UI "Badge" page (#35199) @samuelsycamore -- ​[docs] Update Base UI docs with latest style conventions (#35034) @samuelsycamore +- ​[docs] Update Base UI docs with latest style conventions (#35034) @samuelsycamore - ​[l10n] Improve Chinese (Taiwan) zh-TW locale (#35328) @happyincent -- ​[website] Update MUI stats: GitHub stars, Twitter followers, etc. (#35318) @nomandhoni-cs +- ​[website] Update stats: GitHub stars, Twitter followers, etc. (#35318) @nomandhoni-cs ### Core @@ -3871,7 +4122,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​[core] Fix warning leak in production (#35313) @oliviertassinari - ​[core] Move the internal packages from docs/packages (#35305) @michaldudak - ​[core] Clean up the API docs generation scripts (#35244) @michaldudak -- ​[test] Scope the tests to just Material UI components (#35219) @siriwatknp +- ​[test] Scope the tests to just Material UI components (#35219) @siriwatknp - ​[website] Remove BlackFriday notification @oliviertassinari All contributors of this release in alphabetical order: @flaviendelangle, @guotie, @happyincent, @hbjORbj, @Juneezee, @michaldudak, @mnajdova, @nomandhoni-cs, @oliviertassinari, @Pandey-utkarsh, @sai6855, @samuelsycamore, @siriwatknp, @Uzwername, @zignis @@ -3955,7 +4206,7 @@ A big thanks to the 9 contributors who made this release possible. Here are some ### Docs - [docs] Fix a couple documentation errors (#35217) @danilo-leal -- [docs] Change MUI -> Material UI in icons-material's readme (#35220) @michaldudak +- [docs] Change MUI -> Material UI in icons-material's readme (#35220) @michaldudak - [docs] the pages have no [docs] Revise the Joy UI "Aspect Ratio" page (#34858) @samuelsycamore - ​[docs] Fix Safari code font size (#34859) @oliviertassinari - ​[docs] Fix spelling mistake (#34955) @punithnayak -- ​[docs] Fix 404 link of supported Material UI components @oliviertassinari +- ​[docs] Fix 404 link of supported Material UI components @oliviertassinari - ​[docs] Fix Safari button misalignment (#34861) @oliviertassinari - ​[docs] Fix typo in docs title (#34926) @PunitSoniME - ​[docs] Fix missing emotion prefixes (#34958) @oliviertassinari @@ -4157,7 +4408,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som - ​[website] Migrate about-us page to use CSS theme variables (#34919) @brianlu2610 - ​[website] Migrate Product-Templates page to use CSS theme variables (#34913) @EduardoSCosta - ​[website] Migrate career page to use CSS theme variables (#34908) @the-mgi -- ​[website] Update MUI X open and future roles + about page (#34894) @DanailH +- ​[website] Update MUI X open and future roles + about page (#34894) @DanailH - ​[website] Remove one DOM node (#34960) @oliviertassinari - ​[website] Use `span` for icon image (#34914) @siriwatknp - ​[website] Fix subscribe input with Safari (#34869) @oliviertassinari @@ -4194,7 +4445,7 @@ _Oct 25, 2022_ A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨: -- 🔧 Moved `components` to `slots` prop starting at Base UI to create consistency across products +- 🔧 Moved `components` to `slots` prop starting at Base UI to create consistency across products - Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements ### `@mui/material@5.10.11` @@ -4242,7 +4493,7 @@ A big thanks to the 10 contributors who made this release possible. Here are som - Revert "[docs] Live demos (#34454)" @oliviertassinari - Update the order of operations for pagination example so that slicing takes place after sorting. (#34189) @marceliwac - [docs] Gatsby Description in Joy dark-mode (#34702) @pixelass -- [docs] Add notification for blogpost MUI X v6 alpha (#34809) @joserodolfofreitas +- [docs] Add notification for blogpost MUI X v6 alpha (#34809) @joserodolfofreitas - [docs] Polish Crowdin config (#34852) @oliviertassinari - [docs] Fix a few style standard deviations @oliviertassinari - [docs] Enforce no trailing spaces (#34762) @oliviertassinari @@ -4276,7 +4527,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som - 🖌 Thanks to the efforts of @bharatkashyap and @nihgwu, we now have editable demos across our docs (#34454)! - 🚀 The Tooltip component has been added to Joy UI by @hbjORbj (#34509). -- ⚙️ We started converting the remaining JS components in Base UI to TypeScript. +- ⚙️ We started converting the remaining JS components in Base UI to TypeScript. @mbayucot finished the first PR with the conversion of the NoSsr code (#34735). - And more 🐛 bug fixes and 📚 documentation improvements. @@ -4360,11 +4611,11 @@ A big thanks to the 7 contributors who made this release possible. Here are some - ​[system] Fix color-scheme implementation (#34639) @siriwatknp - The `enableColorScheme` prop has been removed from `CssVarsProvider` and `getInitColorScheme` (both Material UI and Joy UI). + The `enableColorScheme` prop has been removed from `CssVarsProvider` and `getInitColorScheme` (both Material UI and Joy UI). Migration: - - **Material UI**: you can enable the CSS color scheme via ``. + - **Material UI**: you can enable the CSS color scheme via ``. - **Joy UI**: it is enabled automatically if you use ``, [see the docs](https://mui.com/joy-ui/react-css-baseline/). #### Changes @@ -4382,7 +4633,7 @@ A big thanks to the 7 contributors who made this release possible. Here are some ### Docs - ​[docs] Revert #34541 (#34700) @michaldudak -- ​[blog] Blog post for MUI X v6 alpha zero (#34424) @joserodolfofreitas +- ​[blog] Blog post for MUI X v6 alpha zero (#34424) @joserodolfofreitas - ​[docs] Improve Joy UI tutorial demo (#34653) @oliviertassinari - ​[docs] Explain how SelectUnstyled renders a hidden input (#34638) @michaldudak - ​[docs] Fix Taiwan description (#34611) @oliviertassinari @@ -4407,8 +4658,8 @@ _Oct 3, 2022_ A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨: -- 🚀 [SnackbarUnstyled](https://mui.com/base-ui/react-snackbar/) component & headless hook are added to Base UI (#33227) @ZeeshanTamboli -- 📚 [CSS variables documentation](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) for Material UI has been added by @siriwatknp (#33958) +- 🚀 [SnackbarUnstyled](https://mui.com/base-ui/react-snackbar/) component & headless hook are added to Base UI (#33227) @ZeeshanTamboli +- 📚 [CSS variables documentation](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) for Material UI has been added by @siriwatknp (#33958) - And more 🐛 bug fixes and 📚 documentation improvements. ### `@mui/material@5.10.8` @@ -4438,7 +4689,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som - ​[docs] Temporary remove date picker from home page (#34541) @siriwatknp - ​[docs] Revise and expand Joy UI "Tutorial" doc (#34569) @samuelsycamore - ​[docs] Fix SEO issues (#34537) @oliviertassinari -- ​[docs] Add CSS variables documentation for Material UI (#33958) @siriwatknp +- ​[docs] Add CSS variables documentation for Material UI (#33958) @siriwatknp - ​[docs] Capitalize Material Design on the Breakpoints page (#34481) @Dustin-Digitar - ​[docs] Able to load doc components inside markdown files (#34243) @flaviendelangle - ​[docs] Use mouse pointer on esc button in the search modal (#34485) @minkyngkm @@ -4473,7 +4724,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som - [SvgIcon] Fix passing an ownerState to SvgIcon changes the font size (#34429) @ZeeshanTamboli - [Stepper] Fix optional label is not centered when `alternativeLabel` is used (#34335) @ZeeshanTamboli - [Tooltip] Add undefined, null or false in `title` (#34289) @abhinav-22-tech -- Make @emotion/\* fully supported in all Material UI components (#34451) @garronej +- Make @emotion/\* fully supported in all Material UI components (#34451) @garronej ### `@mui/system@5.10.7` @@ -4509,7 +4760,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som ### Docs -- [blog] Base UI announcement typo fixed (#34409) @prakhargupta1 +- [blog] Base UI announcement typo fixed (#34409) @prakhargupta1 - [blog] Fix typo in date-pickers v5 stable (#34386) @alexfauquette - [blog] Update date on date pickers v5 release blog post (#34406) @joserodolfofreitas - [docs] Update `useMenu` and `useMenuItem` hooks demo (#34166) @ZeeshanTamboli @@ -4517,11 +4768,11 @@ A big thanks to the 21 contributors who made this release possible. Here are som - [docs] Fix typo in `Grid` docs (#34475) @Dustin-Digitar - [docs] Fix typo in `Back to top` section in AppBar docs (#34479) @Dustin-Digitar - [docs] Standardize all "Installation" pages (#34168) @samuelsycamore -- [docs] Fix webpack file name to the standard: `webpack.config.js` (#34446) @CodingItWrong +- [docs] Fix Webpack file name to the standard: `webpack.config.js` (#34446) @CodingItWrong - [docs] Fix Select `onChange` call (#34408) @siriwatknp - [docs] Notification for pickers blog - v5 stable (#34400) @joserodolfofreitas - [docs] Improve social sharing of docs pages (#34346) @oliviertassinari -- [docs] Refine the use of MUI vs. Material UI (#34345) @oliviertassinari +- [docs] Refine the use of MUI vs. Material UI (#34345) @oliviertassinari - [docs] Send feedback directly to a dedicated slack channel (#34196) @alexfauquette - [website] Adds Bilal to about page (#34412) @MBilalShafi - [website] Add date range picker to pricing table (#34399) @joserodolfofreitas @@ -4595,8 +4846,8 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - [docs] Fix 301 link to external projects @oliviertassinari - [docs] Move 12 component names to Title Case (#34188) @oliviertassinari - [docs] Fix broken links (#34320) @alexfauquette -- [docs] Add notification for Base UI announcement post (#34295) @samuelsycamore -- [website] Fix MUI X subscribe email border style (#34330) @oliviertassinari +- [docs] Add notification for Base UI announcement post (#34295) @samuelsycamore +- [website] Fix MUI X subscribe email border style (#34330) @oliviertassinari - [website] Improve security header @oliviertassinari ### Core @@ -4616,7 +4867,7 @@ _Sep 12, 2022_ A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨: -- 🚀 [Blog post](https://mui.com/blog/introducing-base-ui/) for announcing the release of the Base UI package is out thanks to @michaldudak. +- 🚀 [Blog post](https://mui.com/blog/introducing-base-ui/) for announcing the release of the Base UI package is out thanks to @michaldudak. - 🚀 Added [`Alert`](https://mui.com/joy-ui/react-alert/), [`Modal`](https://mui.com/joy-ui/react-modal/), [`ListSubheader`](https://mui.com/joy-ui/react-list-subheader/), [`FormControl`](https://mui.com/joy-ui/react-form-control/), [`CircularProgress`](https://mui.com/joy-ui/react-circular-progress/) components to Joy UI (#33859) @hbjORbj @siriwatknp - And more 🐛 bug fixes and 📚 documentation improvements. @@ -4639,7 +4890,7 @@ A big thanks to the 12 contributors who made this release possible. Here are som ### Docs -- ​[blog] Introducing Base UI (#33778) @michaldudak +- ​[blog] Introducing Base UI (#33778) @michaldudak - ​[docs] Fix spelling error (#34209) @ChrystianDeMatos - ​[docs] Improve link to the security policy (#34219) @oliviertassinari - ​[docs] Fix typo in Joy UI's `Usage` docs (#34200) @zillion504 @@ -4719,7 +4970,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som ### `@mui/material@5.10.3` - [Autocomplete][material] Fix value overflow when `disableClearable` is used (#34053) @mnajdova -- [Autocomplete] Update unstyled demo to not import Material UI (#34060) @oliviertassinari +- [Autocomplete] Update unstyled demo to not import Material UI (#34060) @oliviertassinari - [Slider] Remove SliderInput export from d.ts (#34055) @pieetrus - [TablePagination] Fix select variant not working (#33974) @ZeeshanTamboli @@ -4754,7 +5005,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som - [docs] Fixing Joy UI usage snippet (#34049) @JonathanAsbury-SPS - [docs] Fix missing JSX closing tag in Tooltip docs (#34064) @hoangph271 - [website] Add Toolpad to Navigation (#33937) @bharatkashyap -- [website] Improve SEO meta description for MUI X @oliviertassinari +- [website] Improve SEO meta description for MUI X @oliviertassinari - [website] Improve visual look of code demos (#34070) @oliviertassinari - [website] Fix `DatePicker` component demo on the home page (#34054) @NaveenPantra @@ -4847,7 +5098,7 @@ A big thanks to the 18 contributors who made this release possible. This release ### Docs -- ​[docs] Expand on a11y section for Material UI `Link` component (#32839) @TKrishnasamy +- ​[docs] Expand on a11y section for Material UI `Link` component (#32839) @TKrishnasamy - ​[docs] Fix typo in Joy UI's `AspectRatio` docs (#33895) @IsaacInsoll - ​[docs] Improve the Base Usage page (#33272) @samuelsycamore - ​[docs] Avoid refreshing the page when button on demo is clicked (#33852) @PunitSoniME @@ -4889,7 +5140,7 @@ _Aug 8, 2022_ A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨: -- ✨ [Stack](https://mui.com/system/react-stack/) component is added to MUI System and Joy UI #33760 #33800 @mnajdova +- ✨ [Stack](https://mui.com/system/react-stack/) component is added to MUI System and Joy UI #33760 #33800 @mnajdova - ✨ [Breadcrumbs](https://mui.com/joy-ui/react-breadcrumbs/) component is added to Joy UI (#32697) @hbjORbj - Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements @@ -4950,7 +5201,7 @@ _Aug 1, 2022_ A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨: -- 🖼️ @garronej worked on improving the support of Emotion packages in the System (#33205) +- 🖼️ @garronej worked on improving the support of Emotion packages in MUI System (#33205) - Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements ### `@mui/material@5.9.3` @@ -4962,7 +5213,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som ### `@mui/system@5.9.3` -- [system] Make @emotion/\* fully supported in the System (#33205) @garronej +- [system] Make @emotion/\* fully supported in MUI System (#33205) @garronej ### `@mui/codemod@5.9.3` @@ -5112,8 +5363,8 @@ A big thanks to the 17 contributors who made this release possible. This release - ​[docs] Fix copy search false positives (#33438) @oliviertassinari - ​[docs] Fix typo (#33520) @aravindpanicker - ​[docs] Update Tailwind docs to include step about updating popover containers (#33315) @ajhenry -- ​[docs] Add yarn command for Roboto font in Material UI's typography.md (#33485) @anthonypz -- ​[docs] Add new community content to the Material UI Learn page (#32927) @Nikhilthadani +- ​[docs] Add yarn command for Roboto font in Material UI's typography.md (#33485) @anthonypz +- ​[docs] Add new community content to the Material UI Learn page (#32927) @Nikhilthadani - ​[examples] Change createEmotionCache to use `insertionPoint` (#32104) @ANTARES-KOR - ​[examples] Fix error in Next.js example with @mui/styles (#33456) @paustria @@ -5133,8 +5384,8 @@ _Jul 12, 2022_ A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨: - 🧪 Exported Grid v2 as `Unstable_Grid2` (#33479) @siriwatknp -- 📖 Added a guide for using Joy UI and Material UI together (#33396) @siriwatknp -- 🐛 Fixed a few bugs in Material UI components. Thanks to @ZeeshanTamboli, @ivan-ngchakming, and @joebingham-wk. +- 📖 Added a guide for using Joy UI and Material UI together (#33396) @siriwatknp +- 🐛 Fixed a few bugs in Material UI components. Thanks to @ZeeshanTamboli, @ivan-ngchakming, and @joebingham-wk. - ⚠️ **[BREAKING CHANGE]** Date pickers were removed from the lab. Learn how to migrate by visiting the [migration guide](https://mui.com/x/migration/migration-pickers-lab/). (#33386) @flaviendelangle - many other 🐛 bug fixes and 📚 documentation improvements - our documentation site is now running with React 18! (#33196) @mnajdova @@ -5145,7 +5396,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som - [Autocomplete] Remove unnecessary `clsx` wrapper for single className (#33398) @ZeeshanTamboli - [Grid] Export new grid as unstable (#33479) @siriwatknp - [Tooltip] Fix children mouse over detection (#32321) @ivan-ngchakming -- [TypeScript] getCssVar autocomplete for Material UI (#33464) @siriwatknp +- [TypeScript] getCssVar autocomplete for Material UI (#33464) @siriwatknp - [TypeScript] Fix theme options components types to use `Theme` (#33434) @siriwatknp - [TypeScript] Reexports necessary types for module augmentation (#33397) @siriwatknp - [ScopedCssBaseline] Add sx typings (#33474) @joebingham-wk @@ -5161,7 +5412,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som - [lab] Remove the pickers (#33386) @flaviendelangle - The pickers are moved to MUI X, check out the [migration guide](https://mui.com/x/migration/migration-pickers-lab/). + The pickers are moved to MUI X, check out the [migration guide](https://mui.com/x/migration/migration-pickers-lab/). **Changes** @@ -5176,7 +5427,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som ### `@mui/joy@5.0.0-alpha.36` -- [Joy] Add guide about using Joy and Material UI together (#33396) @siriwatknp +- [Joy] Add guide about using Joy and Material UI together (#33396) @siriwatknp - [Joy] Fix variants color palette regressions (#33394) @danilo-leal ### Docs @@ -5188,14 +5439,14 @@ A big thanks to the 19 contributors who made this release possible. Here are som - [docs] Cleanup the migration (#33463) @siriwatknp - [docs] Fix broken Sponsoring services links @samuelsycamore - [docs] Improve repo README with light/dark logos, relative links and more (#33356) @samuelsycamore -- [docs] Update links to MUI X Overview and Introduction pages (#33201) @samuelsycamore +- [docs] Update links to MUI X Overview and Introduction pages (#33201) @samuelsycamore - [docs] Update to React 18 (#33196) @mnajdova - [docs] Simplify "Upload button" demo (#33326) @baharalidurrani - [docs] Add "refine" demo to showcase (#33240) @omeraplak -- [docs] Add webpack alias for legacy utils package (#33376) @jgbae +- [docs] Add Webpack alias for legacy utils package (#33376) @jgbae - [docs] Improve external link icons synonyms (#33257) @davidgarciab -- [examples] Update Base UI with Tailwind CSS to use the latest versions of the dependencies (#33401) @mnajdova -- [examples] Add Base UI example (#33154) @siriwatknp +- [examples] Update Base UI with Tailwind CSS to use the latest versions of the dependencies (#33401) @mnajdova +- [examples] Add Base UI example (#33154) @siriwatknp ### Core @@ -5214,8 +5465,8 @@ _Jul 4, 2022_ A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨: -- 🐛 Fixed an issue causing TypeScript errors when building a project with Material UI v5.8.6 (@michaldudak) -- 🐛 Fixed a few bugs in Material UI components. Thanks @henriqueholtz, @jake-collibra, @MattiasMartens and @TimoWilhelm! +- 🐛 Fixed an issue causing TypeScript errors when building a project with Material UI v5.8.6 (@michaldudak) +- 🐛 Fixed a few bugs in Material UI components. Thanks @henriqueholtz, @jake-collibra, @MattiasMartens and @TimoWilhelm! - many other 🐛 bug fixes and 📚 documentation improvements ### `@mui/material@5.8.7` @@ -5239,7 +5490,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som - [Joy] Add radio button documentation (#33254) @siriwatknp - [Joy] Add switch documentation (#33302) @siriwatknp - [Joy] Batch a couple of documentation refinements (#33158) -- [Joy] Enable Joy and Material UI compatibility (#33379) @siriwatknp +- [Joy] Enable Joy and Material UI compatibility (#33379) @siriwatknp ### `@mui/base@5.0.0-alpha.88` @@ -5253,7 +5504,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som - [docs] Add caveat about class components with Tooltip (#33325) @joshkel - [docs] Fix SEO issues (#33288) @oliviertassinari - [docs] Fix Slider's "player" demo (#33267) @xlianghang -- [website] Link MUI Toolpad in mui.com (#33287) @oliviertassinari +- [website] Link MUI Toolpad in mui.com (#33287) @oliviertassinari All contributors of this release in alphabetical order: @aaarichter, @aaronlademann-wf, @danilo-leal, @henriqueholtz, @jake-collibra, @joshkel, @MattiasMartens, @Methuselah96, @michaldudak, @oliviertassinari, @siriwatknp, @TimoWilhelm, @xlianghang @@ -5278,7 +5529,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som - ​[OutlinedInput] Fix `ownerState` undefined in theme style overrides (#33241) @siriwatknp - ​[Tabs] Fix crash when used with React 18 & Suspense (#33277) @mnajdova -- ​[TypeScript] Add CSS vars type augmentation for Material UI (#33211) @siriwatknp +- ​[TypeScript] Add CSS vars type augmentation for Material UI (#33211) @siriwatknp ### `@mui/system@5.8.6` @@ -5304,9 +5555,9 @@ A big thanks to the 13 contributors who made this release possible. Here are som ### Docs -- ​[blog] Polish Why you should migrate to Material UI v5 today (#33244) @oliviertassinari +- ​[blog] Polish Why you should migrate to Material UI v5 today (#33244) @oliviertassinari - ​[docs] Add note in docs about `componentsProps.root` taking precedence (#33097) @ZeeshanTamboli -- ​[docs] Remove a note about Base components being reexported from Material UI (#33265) @michaldudak +- ​[docs] Remove a note about Base components being reexported from Material UI (#33265) @michaldudak - ​[docs] Update code snippet in docs for custom color palette (#32946) @ZeeshanTamboli - ​[docs] Fix the docs for production class generation (#31933) @Fafruch - ​[docs] Fix internal link in Box page (#33149) @davidgarciab @@ -5368,7 +5619,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som - ​[blog] Update Blogpost to clear confusion on "no impact" disclaimer. (#33131) @joserodolfofreitas - ​[blog] Add post about v5 Migration guide update (#33063) @samuelsycamore - ​[blog] Fix display on Safari (#33102) @oliviertassinari -- ​[docs] Add guide on how to use Base UI with Tailwind CSS (#33100) @mnajdova +- ​[docs] Add guide on how to use Base UI with Tailwind CSS (#33100) @mnajdova - ​[docs] Improve Joy template UX (#33159) @siriwatknp - ​[docs] Update Shadow DOM guide (#33160) @cherniavskii - ​[docs] Fix SEO regressions (#33106) @oliviertassinari @@ -5379,7 +5630,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som ### Core -- ​[core] Add CSS variables support for Material UI components (#32835) @siriwatknp +- ​[core] Add CSS variables support for Material UI components (#32835) @siriwatknp - ​[core] Add name to workspace root package.json (#33226) @Janpot - ​[core] Update bug template with generic instruction (#33153) @joserodolfofreitas - ​[core] Remove dead and redundant code (#33125) @oliviertassinari @@ -5396,7 +5647,7 @@ _Jun 14, 2022_ A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨: - 🚀 Added support for custom breakpoints in the `Grid` component by @boutahlilsoufiane -- 📚 Added guide on how to use Material UI with Shadow DOM by @cherniavskii +- 📚 Added guide on how to use Material UI with Shadow DOM by @cherniavskii - many other 🐛 bug fixes and 📚 documentation improvements ### `@mui/material@5.8.4` @@ -5445,8 +5696,8 @@ A big thanks to the 24 contributors who made this release possible. Here are som - ​[docs] Add responsive AppBar with drawer (#32769) @dvlprAlamin - ​[docs] Move codesandbox to MUI org (#33122) @oliviertassinari - ​[docs] Add Shadow DOM guide (#33007) @cherniavskii -- ​[docs] Fix typo in Material UI overview page (#33087) @oliviertassinari -- ​[docs] Miscellaneous fixes in `Base UI` docs (#33091) @ZeeshanTamboli +- ​[docs] Fix typo in Material UI overview page (#33087) @oliviertassinari +- ​[docs] Miscellaneous fixes in `Base UI` docs (#33091) @ZeeshanTamboli - ​[docs] Fix GitHub capitalization (#33071) @oliviertassinari - ​[docs] Fix a typo in `InputUnstyled` docs (#33077) @ZeeshanTamboli - ​[docs] Add notification for Joy blog post (#33059) @siriwatknp @@ -5520,10 +5771,10 @@ This release is mostly about 🐛 bug fixes and 📚 documentation improvements. - [docs] Fix icon color in `BadgeUnstyled` docs (#32976) @ZeeshanTamboli - [docs] Improve product identifier (#32707) @danilo-leal - [docs] Improve UX with back to top (#32896) @oliviertassinari -- [docs] Polish overview page to Material UI (#32954) @oliviertassinari +- [docs] Polish overview page to Material UI (#32954) @oliviertassinari - [docs] Redirect older URLs (#33037) @oliviertassinari - [docs] Remove pickers page from the Lab section (#32961) @DanailH -- [docs] Show product identifier on updated MUI X Introduction pages (#32966) @samuelsycamore +- [docs] Show product identifier on updated MUI X Introduction pages (#32966) @samuelsycamore - [docs] Throw on 301 links (#32939) @oliviertassinari - [website] Add Gerda to the about page (#33038) @danilo-leal - [website] Polish the pricing page (#32811) @oliviertassinari @@ -5604,7 +5855,7 @@ _May 23, 2022_ A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨: -- 💅 Added CSS variables support for two more Material UI components by @diggis00 and @alisasanib +- 💅 Added CSS variables support for two more Material UI components by @diggis00 and @alisasanib - And more 🐛 bug fixes and 📚 documentation improvements. ### `@mui/material@5.8.1` @@ -5659,7 +5910,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som ### Core -- ​[core] Upgrade MUI X dependency (#32824) @oliviertassinari +- ​[core] Upgrade MUI X dependency (#32824) @oliviertassinari - ​[typescript] Allow module augmentation for `Mixins` (#32798) @mnajdova All contributors of this release in alphabetical order: @abriginets, @alexfauquette, @alisasanib, @apedroferreira, @danilo-leal, @diggis00, @flaviendelangle, @garronej, @JeanPetrov, @mbrookes, @mnajdova, @nate-summercook, @o-dubrovskyi, @oliviertassinari, @paales, @robertwt7, @SamuelMaddox, @siriwatknp, @veronikaslc, @VibhorJaiswal, @ZeeshanTamboli @@ -5672,7 +5923,7 @@ _May 17, 2022_ A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨: -- 🚀 [Blog post](https://mui.com/blog/premium-plan-release/) for announcing the release of the Premium plan of MUI X is out thanks to @joserodolfofreitas. +- 🚀 [Blog post](https://mui.com/blog/premium-plan-release/) for announcing the release of the Premium plan of MUI X is out thanks to @joserodolfofreitas. - Codemod for `jss` to `tss-react` migration is out thanks to @ryancogswell - And more 🐛 bug fixes and 📚 documentation improvements. @@ -5706,7 +5957,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som ### Docs -- ​[blog] Add release post for MUI X Premium (#32720) @joserodolfofreitas +- ​[blog] Add release post for MUI X Premium (#32720) @joserodolfofreitas - ​[docs] Fix wrong code snippet for overriding styles in theme with a callback value (#32781) @ZeeshanTamboli - ​[docs] Update Crowdin logo (#32782) @andrii-bodnar - ​[docs] Improve callouts design (#32709) @danilo-leal @@ -5722,9 +5973,9 @@ A big thanks to the 14 contributors who made this release possible. Here are som - ​[examples] Update remix example's tsconfig with required values (#32723) @michaldudak - ​[examples] Update to use React 18's createRoot (#32506) @mnajdova - ​[l10n] Fix typos and translations on arSD and arEG locales (#31848) @shadigaafar -- ​[website] Improve communication about MUI X components that are still wip (#32708) @danilo-leal +- ​[website] Improve communication about MUI X components that are still wip (#32708) @danilo-leal - ​[website] Remove scrollbar on x-axis (#32291) @MrHBS -- ​[website] Update the pricing page for the MUI X premium plan release (#32458) @joserodolfofreitas +- ​[website] Update the pricing page for the MUI X premium plan release (#32458) @joserodolfofreitas - ​[website] Update sponsors (#32725) @oliviertassinari ### Core @@ -5744,7 +5995,7 @@ _May 10, 2022_ A big thanks to the 27 contributors who made this release possible. Here are some highlights ✨: -🛠 This release is all about supporting CSS variables in many Material UI components. +🛠 This release is all about supporting CSS variables in many Material UI components. Kudos to all contributors! ### `@mui/material@5.7.0` @@ -5810,7 +6061,7 @@ Kudos to all contributors! - [docs] Correct links to prevent 301 redirects (#32692) @michaldudak - [docs] Move, split, and revise "Unstyled components" page (#32562) @samuelsycamore - [docs] Nest `ListItemButton` in `ListItem` in the Drawer examples (#31987) @stefanprobst -- [docs] Apply callouts in the Material UI docs (#32567) @danilo-leal +- [docs] Apply callouts in the Material UI docs (#32567) @danilo-leal - [docs] Show product identifier on new X pages (#32657) @cherniavskii - [docs] Fix copy button childNode not found (#32652) @siriwatknp - [docs] Split install commands in isolated code blocks (#32566) @danilo-leal @@ -5845,7 +6096,7 @@ _May 2, 2022_ A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨: -- 💅 5 Material UI components were updated to support CSS variables by @ZeeshanTamboli & @vicasas +- 💅 5 Material UI components were updated to support CSS variables by @ZeeshanTamboli & @vicasas - And more 🐛 bug fixes and 📚 improvements. ### `@mui/material@5.6.4` @@ -5876,18 +6127,18 @@ A big thanks to the 13 contributors who made this release possible. Here are som - ​[docs] SEO fixes (#32515) @oliviertassinari - ​[docs] Replace `Overriding nested component styles` anchor link with text (#32487) @ZeeshanTamboli - ​[docs] Update the list of external domains (#32514) @oliviertassinari -- ​[docs] Update Material UI code snippets for React 18 (#32361) @samuelsycamore +- ​[docs] Update Material UI code snippets for React 18 (#32361) @samuelsycamore - ​[docs] Base TextareaAutosize style revisions and final review (#32481) @samuelsycamore - ​[docs] Base ClickAwayListener style revisions and final review (#32156) @samuelsycamore - ​[docs] Base Button style revisions and final review (#32380) @samuelsycamore - ​[docs] Base NoSsr style revisions and final review (#32254) @samuelsycamore - ​[docs] Correctly capitalize Ctrl @oliviertassinari -- ​[docs] Fix styling in `Basic Popper` demo on the Base UI docs (#32488) @ZeeshanTamboli +- ​[docs] Fix styling in `Basic Popper` demo on the Base UI docs (#32488) @ZeeshanTamboli - ​[docs] Add "Overview" page to Base docs (#32310) @samuelsycamore - ​[docs] Add copy button to code block (#32390) @siriwatknp - ​[docs] Base Tabs style revisions and final review (#32423) @samuelsycamore - ​[docs] Base Popper style revisions and final review (#32412) @samuelsycamore -- ​[docs] Improve sidenav for MUI X (#32435) @oliviertassinari +- ​[docs] Improve sidenav for MUI X (#32435) @oliviertassinari - ​[docs] Don't redirect on deploy preview (#32399) @m4theushw - ​[docs] A few SEO fixes (#32431) @oliviertassinari - ​[docs] Update links to the new Group & Pivot pages (#32410) @flaviendelangle @@ -5898,7 +6149,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som ### Core -- ​[experiment] Add template for testing Material UI components with CSS variables (#32500) @siriwatknp +- ​[experiment] Add template for testing Material UI components with CSS variables (#32500) @siriwatknp All contributors of this release in alphabetical order: @b-novikov-ipersonality, @flaviendelangle, @hbjORbj, @HexM7, @m4theushw, @Martin005, @mongolyy, @oliviertassinari, @ryancogswell, @samuelsycamore, @siriwatknp, @vicasas, @ZeeshanTamboli @@ -5910,7 +6161,7 @@ _Apr 25, 2022_ A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨: -- 🛠 Fixed TypeScript issue when the `fill` CSS property is used in the system (#32355) @valerii15298 +- 🛠 Fixed TypeScript issue when the `fill` CSS property is used in MUI System (#32355) @valerii15298 - And more 🐛 bug fixes and 📚 improvements. ### `@mui/material@5.6.3` @@ -6054,7 +6305,7 @@ This release is mostly about 🐛 bug fixes and 📚 documentation improvements. - [docs] Remove notifications temporary (#32192) @siriwatknp - [docs] Redirect to new urls (#32048) @siriwatknp - [docs] Update Learn page copy and resource list (#31989) @samuelsycamore -- [website] Fix wrong MUI X installation instruction link @oliviertassinari +- [website] Fix wrong MUI X installation instruction link @oliviertassinari - [website] Revise homepage copy below the hero section (#31283) @samuelsycamore - [website] Revise homepage Hero copy for more clarity (#31212) @samuelsycamore - [website] Give up on promoting roles in our docs @oliviertassinari @@ -6076,7 +6327,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - 🧰 Update peer dependencies to support React 18 (#32063) @eps1lon - 🚀 Added the experimental `CssVarsProvider` in `@mui/material` for generating theme CSS variables (#31138) @mnajdova -- 📣 Moved date and time pickers from the lab to MUI X (#31984) @flaviendelangle +- 📣 Moved date and time pickers from the lab to MUI X (#31984) @flaviendelangle - Several 🐛 bug fixes and 📚 documentation improvements ### `@mui/material@5.6.0` @@ -6136,7 +6387,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​[core] Update peer deps to support React 18 (#32063) @eps1lon - ​[core] Fix running docs:api on Windows (#32091) @michaldudak -- ​[core] Fix api build script for Base UI (#32081) @siriwatknp +- ​[core] Fix api build script for Base UI (#32081) @siriwatknp All contributors of this release in alphabetical order: @apeltop, @eps1lon, @flaviendelangle, @garronej, @ivan-ngchakming, @m4theushw, @MatthijsMud, @michaldudak, @mnajdova, @oliviertassinari, @psjishnu, @raigoinabox, @samuelsycamore, @siriwatknp, @TkaczykAdam @@ -6184,7 +6435,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som - ​[FocusTrap] Move docs to Base and drop the Unstyled prefix (#31954) @michaldudak - Removed the `Unstyled_` prefix from the Base export (it remains in the Material UI export, though). + Removed the `Unstyled_` prefix from the Base export (it remains in the Material UI export, though). ```diff -import { Unstyled_TrapFocus } from '@mui/base'; @@ -6329,7 +6580,7 @@ A big thanks to the 23 contributors who made this release possible. Here are som - [docs] Refine the product identifier menu (#31262) @danilo-leal - [docs] Fix Search crash (#31386) @reckter - [docs] Update TextField multiline description (#31291) @jontewks -- [docs] Add gap theme mapping in the System properties table (#31382) @danilo-leal +- [docs] Add gap theme mapping in MUI System properties table (#31382) @danilo-leal - [docs] Test products search (#31351) @siriwatknp - [docs] Fix GitHub source links in the demo toolbar (#31339) @PunitSoniME - [docs] Add Algolia verification code to robot.txt (#31356) @siriwatknp @@ -6363,7 +6614,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som - ​[ClassNameGenerator] Prevent all `base` imports (#31297) @siriwatknp - `unstable_ClassNameGenerator` has been moved from `utils` to `className` folder to prevent all Base UI module imports. If you use the module, please update the import as suggested in the diff below: + `unstable_ClassNameGenerator` has been moved from `utils` to `className` folder to prevent all Base UI module imports. If you use the module, please update the import as suggested in the diff below: ```diff -import { unstable_ClassNameGenerator } from '@mui/material/utils'; @@ -6528,7 +6779,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som - ​[docs] Fix small typo in chips.md (#31092) @cameliaben - ​[l10n] Add it-IT translation for labelDisplayedRows (#31131) @frab90 - ​[l10n] Add pl-PL translation for labelDisplayedRows (#31088) @ThomasTheHuman -- ​[website] Sync MUI X table feature (#30913) @alexfauquette +- ​[website] Sync MUI X table feature (#30913) @alexfauquette - ​[website] Prefill source in job application links (#31036) @oliviertassinari - ​[website] Fix a grammar mistake (#31099) @huyenltnguyen @@ -6583,7 +6834,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som - [docs] Increase scroll affordance in wide tables (#30713) @danilo-leal - [docs] Fix look & feel of the Masonry demos (#30971) @oliviertassinari - [docs] Improve Base component demos (#30884) @danilo-leal -- [docs] Use full product names (Material UI, MUI System) (#30960) @oliviertassinari +- [docs] Use full product names (Material UI, MUI System) (#30960) @oliviertassinari - [docs] Prefer useEnhancedEffect to avoid server side warnings (#30977) @mnajdova - [docs] Fix force redirection to a different locale (#30967) @oliviertassinari - [docs] Add live Tailwind CSS demo (#30966) @oliviertassinari @@ -6600,7 +6851,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som - [core] Bump date-io version (#31016) @michaldudak - [core] Fix typo in useSlider (#31061) @ryohey - [core] Remove unused draft-js types package (#30993) @michaldudak -- [test] Test if certain Base members are exported from Material UI (#31067) @michaldudak +- [test] Test if certain Base members are exported from Material UI (#31067) @michaldudak - [core] Remove dead code (#31064) @oliviertassinari All contributors of this release in alphabetical order: @agauravdev, @alisasanib, @DanailH, @danilo-leal, @huyenltnguyen, @l10nbot, @liradb2000, @mbrookes, @michaldudak, @mnajdova, @prakhargupta1, @oliviertassinari, @ryohey, @samuelsycamore, @siriwatknp, @sydneyjodon-wk @@ -6685,7 +6936,7 @@ _Feb 1, 2022_ A big thanks to the 22 contributors who made this release possible. Here are some highlights ✨: -- 🛠 @goncalovf added an example project using [Material UI with Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite) (#28241) +- 🛠 @goncalovf added an example project using [Material UI with Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite) (#28241) - Number of 🐛 bug fixes and 📚 documentation improvements. ### `@mui/material@5.4.0` @@ -6748,7 +6999,7 @@ A big thanks to the 22 contributors who made this release possible. Here are som ### Core -- ​[core] Clarify the label, to match with MUI X (#30831) @oliviertassinari +- ​[core] Clarify the label, to match with MUI X (#30831) @oliviertassinari - ​[core] Remove none code related instructions from git (#30843) @oliviertassinari - ​[core] Fix typos in comments for scripts (#30809) @aefox - ​[core] Fix 301 link in the blog @oliviertassinari @@ -6864,7 +7115,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - [docs] Fix migration guides for versions older than v4 (#30595) @kkirsche - [docs] Inform about specific files for DataGrid locales (#30411) @alexfauquette - [docs] jss-to-tss migration advise to drop clsx in favor of cx (#30527) @garronej -- [docs] Fix integration with MUI X (#30593) @oliviertassinari +- [docs] Fix integration with MUI X (#30593) @oliviertassinari - [docs] Adding peer dependencies explanation on @mui/lab README.md (#30532) @glaucoheitor - [docs] Add missing quote in migration docs (#30587) @Atralbus - [docs] Update link to Doit sponsor (#30586) @oliviertassinari @@ -7015,7 +7266,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som ### Core -- ​[core] Rename Material UI to MUI (#30338) @ZeeshanTamboli +- ​[core] Rename Material UI to MUI (#30338) @ZeeshanTamboli - ​[core] Fix warning in dev mode (#30368) @oliviertassinari - ​[core] Update `buildApi` script to support new structure (#30245) @siriwatknp @@ -7307,13 +7558,13 @@ _Nov 25, 2021_ A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨: -This is an early release to fix `export 'useId' (imported as 'React') was not found in 'react'` when bundling code depending on MUI Core. +This is an early release to fix `export 'useId' (imported as 'React') was not found in 'react'` when bundling code depending on MUI Core. - ​[AppBar][docs] Add a fully responsive demo to docs (#29829) @karakib2k18 - ​[core] Fix PR run detection in test_bundle_size_monitor (#29879) @eps1lon - ​[core] Move bundle size monitoring to CircleCI (#29876) @eps1lon - ​[docs] Add keys to Responsive AppBar demo (#29884) @mbrookes -- ​[docs] MUI's 2021 Developer survey (#29765) @prakhargupta1 +- ​[docs] MUI's 2021 Developer Survey (#29765) @prakhargupta1 - ​[docs] Smoother image loading UX (#29858) @oliviertassinari - ​[Select] Fix select display value with React Nodes (#29836) @kegi - ​[system] Add `experimental_sx` utility (#29833) @mnajdova @@ -7378,7 +7629,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som ### Docs -- [blog] MUI X v5 blog post (#29590) @DanailH +- [blog] MUI X v5 blog post (#29590) @DanailH - [blog] Polish the Benny Joo joins MUI post (#29697) @oliviertassinari - [changelog] Explain why we do breaking changes @oliviertassinari - [core] Update latest issue template for codesandbox CI (#29783) @eps1lon @@ -7430,7 +7681,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​[core] Rename mui/core to mui/base (#29585) @michaldudak - Based on the results of the [poll](https://twitter.com/michaldudak/status/1452630484706635779) and our internal discussions, we decided to rename the `@mui/core` package to `@mui/base`. The main rationale for this is the fact that we use the term "Core" to refer to the core components product family, the one that includes Material Design components, unstyled components, System utilities, etc. Therefore, @mui/core was effectively a subset of MUI Core. This was confusing. + Based on the results of the [poll](https://twitter.com/michaldudak/status/1452630484706635779) and our internal discussions, we decided to rename the `@mui/core` package to `@mui/base`. The main rationale for this is the fact that we use the term "Core" to refer to the core components product family, the one that includes Material Design components, unstyled components, System utilities, etc. Therefore, @mui/core was effectively a subset of MUI Core. This was confusing. The new name better reflects the purpose of the package: it contains unstyled components, hooks, and utilities that serve as a **base** to build on. @@ -7446,7 +7697,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som ### Docs -- ​[docs] Correct bundler configuration for using legacy MUI build (#29146) @petermikitsh +- ​[docs] Correct bundler configuration for using legacy Material UI build (#29146) @petermikitsh - ​[docs] Fix typo on autocomplete.md (#29570) @netizer - ​[docs] Fix dark mode on branding pages (#29611) @alexfauquette - ​[docs] Do not render CSS section in API docs navbar if there are no CSS classes (#29622) @ZeeshanTamboli @@ -7458,7 +7709,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​[docs] Remove svg logos from the Support page (#29431) @oliviertassinari - ​[docs] Link UXPin integration (#29422) @oliviertassinari - ​[docs] Link to the new public roadmap for the design kits (#29433) @oliviertassinari -- ​[docs] correct bundler configuration for using legacy MUI build (#29146) @petermikitsh +- ​[docs] correct bundler configuration for using legacy Material UI build (#29146) @petermikitsh - ​[website] Fix premium plan release date (#29430) @oliviertassinari - ​[website] Add GitHub icon button to the navbar (#29640) @danilo-leal - ​[blog] Support many authors in markdown pages (#29633) @m4theushw @@ -7572,7 +7823,7 @@ A big thanks to the 33 contributors who made this release possible. Here are som - ​[core] Convert a named color to lowercase (#29465) @ainatenhi - ​[core] Allow to reuse functions from `docs:api` (#28828) @m4theushw - ​[core] Commit new nextjs 12 tsconfig (#29458) @eps1lon -- ​[core] Settle on MUI X for the official name (#29420) @oliviertassinari +- ​[core] Settle on MUI X for the official name (#29420) @oliviertassinari - ​[core] Add mui as a npm keyword (#29427) @oliviertassinari - ​[core] Fix issue template redirection (#29432) @oliviertassinari - ​[core] Remove unecessary destructuration (#29354) @oliviertassinari @@ -7932,7 +8183,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som - ​[docs] Update caret position in comments to match npm scope (#28426) @eps1lon - ​[docs] Fix CONTRIBUTING to point out to master as targeted branch (#28396) @mnajdova - ​[docs] Update examples to remove 'beta' (#28475) @oliviertassinari -- ​[docs] Fix 404 links to MUI X API (#28176) @oliviertassinari +- ​[docs] Fix 404 links to MUI X API (#28176) @oliviertassinari - ​[docs] Fix broken/incorrect attributes links in Avatar and NativeSelect API pages (#28417) @xenostar - ​[docs] Explain how `` behaves (#28348) @nguyenkhanhnam - ​[docs] Fix typo in /system/the-sx-prop (#28393) @danwoods @@ -7959,7 +8210,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som - ​[core] Remove code handling JSS components (#28421) @eps1lon - ​[core] Remove unused dependencies (#28468) @eps1lon - ​[core] Ensure both docs bundles are analyzeable (#28410) @eps1lon -- ​[core] Switch to webpack 5 (#28248) @eps1lon +- ​[core] Switch to Webpack 5 (#28248) @eps1lon - ​[core] Batch small changes (#28177) @oliviertassinari - ​[core] Update publish tag to latest (#28382) @mnajdova - ​[framer] Update @mui/\* dependencies (#28469) @eps1lon @@ -7976,7 +8227,7 @@ All contributors of this release in alphabetical order: @breitembach, @chetrit, _Sep 16, 2021_ -After over 400 days of development and over 40 canary releases, we are excited to introduce [MUI Core v5.0.0](https://mui.com/blog/mui-core-v5/)! +After over 400 days of development and over 40 canary releases, we are excited to introduce [MUI Core v5.0.0](https://mui.com/blog/mui-core-v5/)! Some statistics with the released of v5.0.0 compared to the one of v4.0.0: @@ -8011,10 +8262,10 @@ These are the changes done from the last release candidate version (5.0.0-rc.1): ### Docs -- ​[blog] Introducing MUI Core v5.0 (#27912) @oliviertassinari +- ​[blog] Introducing MUI Core v5.0 (#27912) @oliviertassinari - ​[docs] Fix quotes in font-face literal (#28260) @Aurelain - ​[docs] Update redirects to X's docs (#28263) @m4theushw -- ​[docs] Change Material UI to MUI in the console (#28270) @mbrookes +- ​[docs] Change Material UI to MUI in the console (#28270) @mbrookes - ​[docs] Docs redesign adjustments (#28203) @mnajdova - ​[docs] How to compose theme in steps (#28246) @goncalovf - ​[docs] Fix DataGrid demo console warning in Table docs (#28235) @ZeeshanTamboli @@ -8035,7 +8286,7 @@ These are the changes done from the last release candidate version (5.0.0-rc.1): ### Core -- ​[core] Replace Material UI with MUI (#28243) @mnajdova +- ​[core] Replace Material UI with MUI (#28243) @mnajdova - ​[core] Prepare for v5 stable release (#28240) @mnajdova - ​[core] Mark lines that needs to be changed with a major release (#28238) @mnajdova - ​[core] Various updates to what we consider the default branch (#28328) @eps1lon @@ -8096,7 +8347,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som - ​[docs] Improve docs for creating dark theme (#28104) @mnajdova - ​[docs] Don't use Material theme in unstyled demos (#28073) @michaldudak - ​[docs] Fix api doc import example (#28199) @siriwatknp -- ​[docs] Remove demo for re-creating Material UI switches (#28042) @eps1lon +- ​[docs] Remove demo for re-creating Material UI switches (#28042) @eps1lon - ​[docs] Improve legibility of CTA on landing page (#28124) @akashshyamdev - ​[docs] Fix Link outdated default underline prop (#28134) @outofgamut - ​[docs] Fix branding theme leaking on the templates (#28120) @mnajdova @@ -8584,7 +8835,7 @@ A big thanks to the 20 contributors who made this release possible. Here are som ### Docs - ​[docs] Display Popper arrow correctly (#27339) @Patil2099 -- ​[docs] Focus pickers introduction on Material UI (#27394) @eps1lon +- ​[docs] Focus pickers introduction on Material UI (#27394) @eps1lon - ​[docs] Fix wrong import path in @material-ui/styles section (#27427) @WeldonTan - ​[docs] Update color imports (#27321) @siriwatknp - ​[docs] Sync params of callbacks between types and JSDoc description (#27366) @eps1lon @@ -8707,7 +8958,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som - [docs] Sort the size in a more logical order (#27186) @oliviertassinari - [docs] Use actual link to paperbase (#27063) @eps1lon - [docs] Use custom markdown loader for landing page (#27065) @eps1lon -- [docs] Use webpack 5 (#27077) @eps1lon +- [docs] Use Webpack 5 (#27077) @eps1lon - [examples] Fix CDN warning (#27229) @oliviertassinari - [examples] Remove `StyledEngineProvider` as JSS is not used (#27133) @mnajdova - [examples] Remove forgotten StyledEngineProvider (#27163) @oliviertassinari @@ -8727,7 +8978,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som - [test] Update tests with latest state of StrictMode compatibility (#27042) @eps1lon - [test] Use DOM events instead of mocked, partial events (#27198) @eps1lon - [website] Open 4 new roles (#27123) @oliviertassinari -- [blog] Danilo Leal joins Material UI (#27231) @oliviertassinari +- [blog] Danilo Leal joins Material UI (#27231) @oliviertassinari All contributors of this release in alphabetical order: @eps1lon, @mbrookes, @michal-perlakowski, @michaldudak, @mnajdova, @moshfeu, @oliviertassinari, @rajzik, @renovate[bot], @sahil-blulabs, @ShirasawaSama, @siriwatknp, @vimutti77 @@ -8837,7 +9088,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som - ​[docs] Fix /components/hidden merge conflict (#26997) @eps1lon - ​[docs] Fix 404 links (#26963) @oliviertassinari - ​[docs] Remove link that points to v4 blog post (#26960) @steveafrost -- ​[docs] Use custom webpack loader for markdown (#26774) @eps1lon +- ​[docs] Use custom Webpack loader for markdown (#26774) @eps1lon - ​[docs] Fix 301 links (#26942) @oliviertassinari - ​[docs] Add page for the `sx` prop (#26769) @mnajdova - ​[docs] pre-fill issue when a demo crashes (#27034) @eps1lon @@ -9164,7 +9415,7 @@ A big thanks to the 11 contributors who made this release possible. Here are som ### Docs -- ​[blog] Michał Dudak joins Material UI (#26700) @oliviertassinari +- ​[blog] Michał Dudak joins Material UI (#26700) @oliviertassinari - ​[docs] Migrate onepirate premium template to emotion part2 (#26707) @vicasas - ​[docs] Fix TextField demo layout (#26710) @vicasas - ​[docs] Improve Paperbase demo (#26711) @oliviertassinari @@ -9452,7 +9703,7 @@ We are progressively moving all modules that are relevant to styling custom desi - [test] Move ClockPicker tests to ClockPicker.test (#26407) @eps1lon - [test] setProps from createPickerRender should set props on the rendered element (#26405) @eps1lon - [utils] Convert useId to TypeScript (#26491) @eps1lon -- [website] Add Material UI X page (#25794) @DanailH +- [website] Add Material UI X page (#25794) @DanailH - [website] Add open application section (#26501) @oliviertassinari - [website] Add Siriwat to team page (#26406) @siriwatknp @@ -9711,7 +9962,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som - ​[Box] Remove render prop (#26113) @m4theushw - Its behavior can be obtained using the `sx` prop directly on the child if it's a Material UI component. For non-Material UI components use the `sx` prop in conjunction with the `component` prop: + Its behavior can be obtained using the `sx` prop directly on the child if it's a Material UI component. For non-Material UI components use the `sx` prop in conjunction with the `component` prop: ```diff - @@ -10327,7 +10578,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som - ​[docs] Add interoperability section for Portal (#25575) @mnajdova - ​[docs] Fix side nav scroll position (#25619) @misaka3 - ​[website] Q1 2021 Update (#25591) @oliviertassinari -- ​[website] Matheus Wichman joins Material UI (#25590) @oliviertassinari +- ​[website] Matheus Wichman joins Material UI (#25590) @oliviertassinari ### Core @@ -10831,7 +11082,7 @@ A big thanks to the 30 contributors who made this release possible. Here are som 2. @vicasas x5 3. @kodai3 x4 -- 📐 Add a subset of the system as flattened props on `Typography` (#24496) @mnajdova. +- 📐 Add a subset of MUI System as flattened props on `Typography` (#24496) @mnajdova. Now, you can do: ```jsx @@ -10848,7 +11099,7 @@ A big thanks to the 30 contributors who made this release possible. Here are som - Increase the minimum version of TypeScript supported from v3.2 to v3.5. (#24795) @petyosi We try to align with types released from [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) (i.e. packages published on npm under the `@types` namespace). - We will not change the minimum supported version in a major version of Material UI. + We will not change the minimum supported version in a major version of Material UI. However, we generally recommend to not use a TypeScript version older than the [lowest supported version of DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped#older-versions-of-typescript-33-and-earlier). #### Changes @@ -10998,7 +11249,7 @@ A big thanks to the 23 contributors who made this release possible. Here are som - 👩‍🎤 Convert 31 components to emotion. Around 40% of the components have been migrated so far thanks to the help of the community. - 🐛 Fix two long-standing issues with the Grid. Solve the horizontal scrollbar as well as dimensions when nesting (#24332) @greguintow. - 📚 Fix various display issues on API documentation pages (#24526, #24503, #24504. #24517, #24417). -- 📐 Add a subset of the system as flatten props on the CSS utility components (`Grid` and `Box` so far, `Typography` and `Stack` coming later) (#24485, #24499) @mnajdova. +- 📐 Add a subset of MUI System as flatten props on the CSS utility components (`Grid` and `Box` so far, `Typography` and `Stack` coming later) (#24485, #24499) @mnajdova. ```jsx @@ -11081,7 +11332,7 @@ A big thanks to the 23 contributors who made this release possible. Here are som - ​[docs] Add API of picker components (#24497) @eps1lon - ​[examples] Add `locale` prop to the Nextjs Link component (#24596) @CyanoFresh - ​[docs] List required props first in /api/\* (#24526) @eps1lon -- ​[docs] Mention the system props when available in the API pages (#24503) @mnajdova +- ​[docs] Mention MUI System props when available in the API pages (#24503) @mnajdova - ​[docs] Improve system properties page (#24524) @mnajdova - ​[docs] Fix malformed component API description (#24504) @eps1lon - ​[docs] Fix ToC "Component name" fragment link on /api/\* (#24517) @eps1lon @@ -11564,7 +11815,7 @@ _Dec 3, 2020_ A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨: -- Fix most of the issues with the system (#23716, #23635, #23737, #23733, #23700, #23688) @mnajdova. +- Fix most of the issues with MUI System (#23716, #23635, #23737, #23733, #23700, #23688) @mnajdova. - And many more 🐛 bug fixes and 📚 improvements. ### `@material-ui/core@v5.0.0-alpha.18` @@ -11657,7 +11908,7 @@ _Nov 23, 2020_ A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨: - 📚 Improve the IntelliSense support for the `sx` prop (#23599) @mnajdova. - You should now get a description for each property of the system. For instance with `mx`: + You should now get a description for each property of MUI System. For instance with `mx`: ![system TypeScript](https://user-images.githubusercontent.com/3165635/99920493-20f60a00-2d24-11eb-8748-c5dd7fe85cbd.png) @@ -11787,19 +12038,19 @@ A big thanks to the 18 contributors who made this release possible. Here are som ### Docs -- [docs] Add advanced page for the system (#23596) @mnajdova +- [docs] Add advanced page for MUI System (#23596) @mnajdova - [docs] Add docs for typography in system (#23510) @oliviertassinari - [docs] API pages i18n (#23214) @mbrookes - [docs] Create pickers migration guide (#23605) @dmtrKovalenko - [docs] Enable TS language service for docs/src (#23576) @eps1lon -- [docs] Explain the information listed on the system properties page (#23566) @mnajdova +- [docs] Explain the information listed on MUI System properties page (#23566) @mnajdova - [docs] Fix /api client-side routing (#23586) @eps1lon - [docs] Fix the Box section title on migration-v4 guide (#23679) @claudioldf - [docs] Generate default values for docs from the unstyled components (#23614) @mnajdova - [docs] Increase printWidth from 80 to 85(#23512) @eps1lon - [docs] Prevent layout jumps from img loading in system demo (#23504) @eps1lon - [docs] Remove controlled Tooltip example in Slider (#23625) @micsidoruk -- [docs] Remove dead demos in the system basics page (#23565) @mnajdova +- [docs] Remove dead demos in MUI System basics page (#23565) @mnajdova - [docs] Replace emotion-server packages with @emotion/server (#23557) @numToStr - [docs] Sync translations (#23648) @l10nbot @@ -11828,7 +12079,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som While the source code is currently hosted in the [main repository](https://github.com/mui/material-ui), we might move it to the [x repository](https://github.com/mui/mui-x) in the future, depending on what is easier for the commercial date range picker. The date picker will stay open source no matter what. -- 📚 Revamp the documentation for [the system](https://mui.com/system/getting-started/). The System contains CSS utilities. The documentation now promotes the use of the `sx` prop. It's ideal for adding one-off styles, e.g. padding, but when pushed to its limits, it can be used to implement quickly a complete page. +- 📚 Revamp the documentation for [MUI System](https://mui.com/system/getting-started/). The System contains CSS utilities. The documentation now promotes the use of the `sx` prop. It's ideal for adding one-off styles, e.g. padding, but when pushed to its limits, it can be used to implement quickly a complete page. - 👩‍🎨 Upgrade emotion to v11 (#23007) @mnajdova. - And many more 🐛 bug fixes and 📚 improvements. @@ -11895,12 +12146,12 @@ A big thanks to the 34 contributors who made this release possible. Here are som - [docs] Fix links being opened when dismissing context menus (#23491) @eps1lon - [docs] Fix the Netlify proxy for localization of X (#23387) @oliviertassinari - [docs] Fix usage of palette.type instead of palette.mode in docs (#23414) @hubgit -- [docs] Improve documentation of the system (#23294) @mnajdova +- [docs] Improve documentation of MUI System (#23294) @mnajdova - [docs] Improve feedback a11y (#23459) @eps1lon -- [docs] Improve formatting of the system (#23509) @oliviertassinari +- [docs] Improve formatting of MUI System (#23509) @oliviertassinari - [docs] Improve migration guide for theme.palette (#23416) @hubgit - [docs] Mention delay instead of transition twice (#23393) @benmneb -- [docs] Prepare Material UI X (#1893) @oliviertassinari +- [docs] Prepare Material UI X (#1893) @oliviertassinari - [docs] Redirect legacy GridList pages to ImageList (#23456) @eps1lon - [docs] Remove redundant aria-label when wrapped in Tooltip (#23455) @eps1lon - [docs] Sync translations (#23316) @l10nbot @@ -11928,19 +12179,19 @@ _Nov 4, 2020_ A big thanks to the 20 contributors who made this release possible. Here are some highlights ✨: - ⚛️ Add support for React 17 (#23311) @eps1lon. - React 17 release is unusual because it doesn't add any new developer-facing features. It was released a couple of days ago. You can learn more about it in the [introduction post](https://legacy.reactjs.org/blog/2020/10/20/react-v17.html). Material UI now supports `^16.8.0 || ^17.0.0`. + React 17 release is unusual because it doesn't add any new developer-facing features. It was released a couple of days ago. You can learn more about it in the [introduction post](https://legacy.reactjs.org/blog/2020/10/20/react-v17.html). Material UI now supports `^16.8.0 || ^17.0.0`. - 🛠 Introduce a new `@material-ui/unstyled` package (#23270) @mnajdova. This package will host the unstyled version of the components. In this first iteration, only the Slider is available. You can find it documented under the [same page](https://mui.com/components/slider-styled/#unstyled-slider) as the styled version. **Why an unstyled package?** - While engineering teams are successfully building custom design systems by wrapping Material UI, we [occasionally hear](https://github.com/mui/material-ui/issues/6218) that Material Design or our styling solution are something they don't need. Some teams prefer SASS, others prefer to customize the components starting from a pristine state. What all these teams have in common is that they value the features coming from the components, such as accessibility. + While engineering teams are successfully building custom design systems by wrapping Material UI, we [occasionally hear](https://github.com/mui/material-ui/issues/6218) that Material Design or our styling solution are something they don't need. Some teams prefer SASS, others prefer to customize the components starting from a pristine state. What all these teams have in common is that they value the features coming from the components, such as accessibility. The unstyled package goes one step down in the abstraction layer, providing more flexibility. Angular Material introduced this approach two years ago. Today their unstyled components account for [25% of the usage](https://npm-stat.com/charts.html?package=%40angular%2Fmaterial&package=%40angular%2Fcdk&from=2017-11-03&to=2020-11-03). Another reason for introducing this package is to prepare the groundwork for a [second theme](https://github.com/mui/material-ui/issues/22485) (not Material Design based). - A note on the terminology: "unstyled" means that the components have the same API as the "styled" components but come without CSS. Material UI also contains "headless" components that exposes a hook API, e.g. [useAutocomplete](https://mui.com/components/autocomplete/#useautocomplete) or [usePagination](https://mui.com/components/pagination/#usepagination). + A note on the terminology: "unstyled" means that the components have the same API as the "styled" components but come without CSS. Material UI also contains "headless" components that exposes a hook API, e.g. [useAutocomplete](https://mui.com/components/autocomplete/#useautocomplete) or [usePagination](https://mui.com/components/pagination/#usepagination). This change is part of our strategy to iterate on the v5 architecture with the `Slider` first. In the next alpha release, we plan to replace the v4 slider with the v5 slider. Once the new approach is stress-tested and validated, we will roll it out to all the components. @@ -12004,8 +12255,8 @@ A big thanks to the 20 contributors who made this release possible. Here are som ### Docs - [Transition] Document default appear value (#23221) @GuilleDF -- [blog] Danail Hadjiatanasov joins Material UI (#23223) @oliviertassinari -- [docs] Add Material UI Builder to in-house ads (#23342) @mbrookes +- [blog] Danail Hadjiatanasov joins Material UI (#23223) @oliviertassinari +- [docs] Add Material UI Builder to in-house ads (#23342) @mbrookes - [docs] Fix a few typos and add comma (#23284) @reedanders - [docs] Fix few propTypes in Inputs (#23331) @youknowhat - [docs] Fix language cookie (#23324) @mbrookes @@ -12041,8 +12292,8 @@ A big thanks to the 23 contributors who made this release possible. Here are some highlights ✨: - 💄 Introduce a new `sx` prop (#23053, #23205) @mnajdova - We have resumed the work on Material UI System. This is made possible by the latest progress on the new styling solution of v5. - You can read the [introduction blog post](https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df) that we did for the system two years ago. + We have resumed the work on Material UI System. This is made possible by the latest progress on the new styling solution of v5. + You can read the [introduction blog post](https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df) that we did for MUI System two years ago. The system is meant to solve the following problems: @@ -12051,10 +12302,10 @@ Here are some highlights ✨: 3. Introducing a `makeStyles` for the first time in a component is daunting. For example, it's why https://github.com/vscodeshift/material-ui-codemorphs#add-usestyles-hook exists. What if we had less code to type, gaining velocity when writing styles? 4. Pulling values out from the theme can be cumbersome. How can we make it less painful to increase the usage of design tokens? - This new iteration of the system brings two major improvements: + This new iteration of MUI System brings two major improvements: - It moves from the support of a subset of CSS to the support of a superset of CSS. - Learning the shorthand is optional. It's no longer necessary to moving back to styled() when the system doesn't support a specific CSS property. + Learning the shorthand is optional. It's no longer necessary to moving back to styled() when MUI System doesn't support a specific CSS property. - It moves from support on Box only to any core component (starting with the slider). ```jsx @@ -12214,7 +12465,7 @@ A big thanks to the 25 contributors who made this release possible. Here are some highlights ✨: - 📦 Ship modern bundle (#22814) @eps1lon. - This is a significant update to the [browsers supported](https://mui.com/material-ui/getting-started/supported-platforms/) by Material UI. + This is a significant update to the [browsers supported](https://mui.com/material-ui/getting-started/supported-platforms/) by Material UI. The previous policy was defined 2 years ago, and the landscape has evolved since then. The package now includes 4 bundles: 1. `stable` (default, formerly `esm`) which targets a snapshot (on release) of `> 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11"` @@ -12764,7 +13015,7 @@ More documentation are coming. - [docs] Add ui-schema in related projects (#22644) @elbakerino - [docs] Avoid confusion between layout grid and data grid (#22681) @oliviertassinari - [docs] Batch small changes (#22646) @oliviertassinari -- [docs] Configuring redirects for MUI X (#22632) @dtassone +- [docs] Configuring redirects for MUI X (#22632) @dtassone - [docs] Customized hook at Autocomplete issue in dark mode (#22605) @hmaddisb - [docs] Encourage DataGrid in /components/tables/ over alternatives (#22637) @oliviertassinari - [docs] Fix emotion broken in SSR (#22731) @mnajdova @@ -12869,7 +13120,7 @@ Here are some highlights ✨: - [theme] Remove palette.text.hint key (#22537) @mbrookes - The `theme.palette.text.hint` key was available but unused in Material UI v4 components. + The `theme.palette.text.hint` key was available but unused in Material UI v4 components. You can use `adaptV4Theme()` to restore the previous behavior. #### Changes @@ -13287,7 +13538,7 @@ A big thanks to the 26 contributors who made this release possible. Here are some highlights ✨: - 💅 Introduce a new dynamic variant API (#21648) @mnajdova. - This API allows developers to add new variants on the Material UI's components right from the theme, without having to wrap the components. + This API allows developers to add new variants on the Material UI's components right from the theme, without having to wrap the components. For instance with the Button: ```tsx diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md index 4dc47b7385fb10..4363c779c9865f 100644 --- a/CHANGELOG.old.md +++ b/CHANGELOG.old.md @@ -40,7 +40,7 @@ _Jul 19, 2021_ ### Docs -- [blog] Danilo Leal joins Material UI (#27231) @oliviertassinari +- [blog] Danilo Leal joins Material UI (#27231) @oliviertassinari - [blog] Jun did join in Q1 @oliviertassinari - [blog] Fix typo @oliviertassinari - [blog] Q2 2021 Update (#27089) @oliviertassinari @@ -105,8 +105,8 @@ A big thanks to the 12 contributors who made this release possible. It includes ### Docs -- [blog] Michał Dudak joins Material UI (#26700) -- [blog] Siriwat Kunaporn joins Material UI (#26329) @oliviertassinari +- [blog] Michał Dudak joins Material UI (#26700) +- [blog] Siriwat Kunaporn joins Material UI (#26329) @oliviertassinari - [docs] Add gold sponsor (#26968) - [docs] Add v5 banner (#27070) - [docs] Fix 404 link (Evergreen Box) (#26430) @k-utsumi @@ -157,7 +157,7 @@ We fixed an issue related to some packages using incompatible versions of `@mate - [core] Update the codesandbox issue templates (#25501) @oliviertassinari - [core] Support /r/issue-template back (#24870) @oliviertassinari - [website] Q1 2021 Update (#25591) @oliviertassinari -- [website] Matheus Wichman joins Material UI (#25590) @oliviertassinari +- [website] Matheus Wichman joins Material UI (#25590) @oliviertassinari - [website] Fix 404 page @oliviertassinari - [website] Update Careers page (#24948) @oliviertassinari @@ -165,7 +165,7 @@ All contributors of this release in alphabetical order: @DanailH, @dtassone, @ep ## UNRELEASED - 4.12.0 -This release is intended to help prepare the migration to Material UI v5 ⏫: +This release is intended to help prepare the migration to Material UI v5 ⏫: - 📚 Start to add deprecations in anticipation of v5. We plan to add a deprecation for any breaking change in v5 that allows it. Each warning comes with a simple message that explains how to handle the deprecation. If no warnings are reported in the console, you are set for this first batch. Please report issues with the deprecations on [#22074](https://github.com/mui/material-ui/issues/22074) (wrong instructions, false-positives, floods in the console, etc.). @@ -232,7 +232,7 @@ This release fixes an important issue with Chrome 88. The usage of NaN as a CSS _Dec 2, 2020_ This release widens the peer dependency scope of React to accept ^17.0.0. -The change makes it easier for developers to upgrade React independently from Material UI. The best support for React 17 will be found in Material UI v5. +The change makes it easier for developers to upgrade React independently from Material UI. The best support for React 17 will be found in Material UI v5. This is a reminder that all ongoing work has moved to v5. This means a feature freeze on v4. The development of v4 is limited to important bug fixes, security patches and easing the upgrade path to v5. @@ -289,7 +289,7 @@ A big thanks to the 12 contributors who made this release possible. ### Docs - [blog] Allow to support card preview (#23087) @oliviertassinari -- [blog] Danail Hadjiatanasov joins Material UI (#23223) @oliviertassinari +- [blog] Danail Hadjiatanasov joins Material UI (#23223) @oliviertassinari - [blog] New posts (#22607) @oliviertassinari - [blog] Q2 2020 Update (#21822) @oliviertassinari - [blog] Q3 2020 Update (#23055) @oliviertassinari @@ -297,13 +297,13 @@ A big thanks to the 12 contributors who made this release possible. - [docs] Add Design resources in installation (#22209) @oliviertassinari - [docs] Add DoiT diamond sponsor (#22436) @oliviertassinari - [docs] Add LightyearVPN to showcase (#22568) @lightyearvpn -- [docs] Add Material UI Builder to in-house ads (#23342) @mbrookes +- [docs] Add Material UI Builder to in-house ads (#23342) @mbrookes - [docs] Add Octopus diamond sponsor (#22178) @oliviertassinari - [docs] Add Spotify to users (#22776) @mbrookes - [docs] Add ethicalads.io (#21752) @oliviertassinari - [docs] Add live demo with DataGrid (#22697) @oliviertassinari - [docs] Add notification about survey @oliviertassinari -- [docs] Add notification for MUI for Figma v4.12.0 (#23212) @mbrookes +- [docs] Add notification for Material UI for Figma v4.12.0 (#23212) @mbrookes - [docs] Add redirection for links published on npm (#22575) @oliviertassinari - [docs] Allow to host code in a different repo (#23390) @oliviertassinari - [docs] Avoid confusion between layout grid and data grid (#22681) @oliviertassinari @@ -332,7 +332,7 @@ A big thanks to the 12 contributors who made this release possible. - [docs] Sync translation (#21638, #21751, #21925, #22751, #22850, #22887, #23357) @oliviertassinari - [docs] Update homepage quotes (#23326) @mbrookes - [docs] Use codesandbox deploy for demos created from deploy previews (#22616) @eps1lon -- [docs] configuring redirects for MUI X (#22632) @dtassone +- [docs] configuring redirects for MUI X (#22632) @dtassone ### Core @@ -444,7 +444,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som - Minify error messages in production (#21214) @eps1lon. - Using the [React error decoder](https://legacy.reactjs.org/docs/error-decoder.html/) as inspiration, the exceptions thrown by Material UI in production are now minified. + Using the [React error decoder](https://legacy.reactjs.org/docs/error-decoder.html/) as inspiration, the exceptions thrown by Material UI in production are now minified. You will be redirected to the documentation to [decode the error](https://mui.com/production-error/?code=4&args%5B%5D=500). ### `@material-ui/core@v4.10.2` @@ -791,7 +791,7 @@ Here are some highlights ✨: - [ButtonGroup] Add disableElevation prop (#20747) @Andrew5569 - [ClickAwayListener] Fix support of leading edge (#20647) @oliviertassinari - [ExpansionPanel] Increase contrast for focus state (#20720) @petermikitsh -- [l10n] Document how far Material UI should go (#20737) @eloyrubinos +- [l10n] Document how far Material UI should go (#20737) @eloyrubinos - [l10n] Improve az-AZ locale (#20659) @rommelmamedov - [l10n] Improve bg-BG locale (#20668) @panayotoff - [l10n] Improve cs-CZ locale (#20670) @char0n @@ -909,7 +909,7 @@ A big thanks to the 25 contributors who made this release possible. - [docs] Improve a11y of the chip array example (#20294) @m4theushw - [docs] Refactor markdown parsing (#20549) @eps1lon - [docs] Remove old workarounds (#20587) @eps1lon -- [docs] Remove unnecessary webpack loaders (#20563) @eps1lon +- [docs] Remove unnecessary Webpack loaders (#20563) @eps1lon - [docs] Sync translations (#20498) @oliviertassinari - [docs] Use reactStrictMode over custom switch (#20522) @eps1lon @@ -992,7 +992,7 @@ You can expect the following: - [examples] Fix Next.js AMP support (#20463) @timneutkens - [examples] Fix Next.js prop-type (#20474) @Izhaki -- [docs] Material UI Developer Survey 2020 @oliviertassinari +- [docs] Material UI Developer Survey 2020 @oliviertassinari - [docs] Add Component name section to API docs (#20434) @Josh-Weston - [docs] Fix various issues with heading structure (#20389) @eps1lon - [docs] Synchronize translations (#20405) @oliviertassinari @@ -1034,7 +1034,7 @@ A big thanks to the 20 contributors who made this release possible. ### Docs - [examples] Move Copyright into its own component (#20383) @HaNdTriX -- [blog] Introducing Material UI for Sketch (#20295) @oliviertassinari +- [blog] Introducing Material UI for Sketch (#20295) @oliviertassinari - [docs] Batch small changes (#20312) @oliviertassinari - [docs] Explain mini-theme example (#20339) @maksimgm - [docs] Fix Tidelift UTM parameters (#20348) @phated @@ -1435,7 +1435,7 @@ A big thanks to the 24 contributors who made this release possible. - [docs] Add post-update to examples so they run on CodeSandbox (#19605) @garethx - [docs] Fix typo in the Avatar docs (#19544) @UltimateForm - [docs] Improve entry points for issue repros (#19501) @eps1lon -- [docs] Link a VSCode extension for working with Material UI (#19280) @jedwards1211 +- [docs] Link a VSCode extension for working with Material UI (#19280) @jedwards1211 - [docs] Notification blog post @oliviertassinari - [docs] Refactor EnchancedTable demo (#19560) @ahmad-reza619 - [docs] The error style rule is a pseudo-class (#19555) @TommyJackson85 @@ -2331,7 +2331,7 @@ Here are some highlights ✨: You can [learn more about the difference](https://v4.mui.com/styles/basics/#material-ui-core-styles-vs-material-ui-styles) in the documentation. - ♿️ Improve the accessibility of the table and select components (#17696, #17773) @adeelibr, @eps1lon. -- 📊 Launch a [developer survey](https://www.surveymonkey.com/r/5XHDL76) as a precursor to a major DatePicker enhancement effort. +- 📊 Launch a Developer Survey as a precursor to a major DatePicker enhancement effort. - 💄 Add support for different [slider track mode](https://mui.com/components/slider/#track) (#17714) @slipmat. - And many more 🐛 bug fixes and 📚 improvements. @@ -2390,7 +2390,7 @@ Here are some highlights ✨: - [docs] Mentioned CSS required for disabling transitions (#17802) @burtyish - [docs] Migrate Globals demo to TypeScript (#17785) @limatgans - [docs] Migrate Palette demo to TypeScript (#17683) @limatgans -- [docs] Prepare the DatePicker developer survey notification (#17805) @oliviertassinari +- [docs] Prepare the DatePicker Developer Survey notification (#17805) @oliviertassinari - [docs] Update "Who's using" (#17830) @mbrookes - [docs] Update notification @oliviertassinari - [docs] Update useMediaQuery example to avoid confusion with print (#17642) @epeicher @@ -2764,7 +2764,7 @@ Here are some highlights ✨: ### Docs - [docs] Add TypeScript example for switch label position (#16959) @nowNick -- [docs] Adjust React + Material UI + Firebase for v2.0 (#16988) @Phoqe +- [docs] Adjust React + Material UI + Firebase for v2.0 (#16988) @Phoqe - [docs] Improve instructions for Babel import plugins (#16993) @lookfirst - [docs] Make it easier to find material icons (#16956) @oliviertassinari - [docs] Add synonyms for Material icons (#17021) @mbrookes @@ -2819,7 +2819,7 @@ Here are some highlights ✨: ### Docs - [blog] July 2019 update (#16872) @oliviertassinari -- [docs] Add Material UI with React course in learning (#16869) @deekshasharma +- [docs] Add Material UI with React course in learning (#16869) @deekshasharma - [docs] Add error boundary to demos (#16871) @oliviertassinari - [docs] Add react compatibility in supported platforms (#16863) @pranshuchittora - [docs] Batch small changes (#16951) @oliviertassinari @@ -2901,7 +2901,7 @@ Here are some highlights ✨: If you are not familiar with codemods, [check the library out](https://github.com/facebook/codemod). This is a tool tool to assist you with large-scale codebase refactors. We introduce two new codemods in this release: - - `optimal-imports`: Material UI supports tree shaking for modules at 1 level depth maximum. + - `optimal-imports`: Material UI supports tree shaking for modules at 1 level depth maximum. You shouldn't import any module at a higher level depth. ```diff @@ -2963,7 +2963,7 @@ Here are some highlights ✨: - [docs] Add CSS to api for TextField (#16659) @m2mathew - [docs] Apply v1 redirection first @oliviertassinari - [docs] Batch changes (#16621) @oliviertassinari -- [docs] Display correct version of Material UI (#16680) @eps1lon +- [docs] Display correct version of Material UI (#16680) @eps1lon - [docs] Document the global class names (#16770) @oliviertassinari - [docs] Fix SEO reported by Ahrefs (#16765) @oliviertassinari - [docs] Fix Typo in modal.md (#16744) @jeffshek @@ -3324,7 +3324,7 @@ Here are some highlights ✨: - [docs] Improve the CssBaseline description (#16148) @levigunz - [docs] Lowercase text to demo text-transform (#16160) @blmoore - [docs] Pseudo-class: the style rules that require an increase of specificity (#16120) @oliviertassinari -- [docs] Remove `CSS to MUI webpack Loader` (#16175) @sabrinaluo +- [docs] Remove `CSS to Material UI webpack Loader` (#16175) @sabrinaluo - [docs] import Omit Type from @material-ui/types (#16157) @aditya1906 ### Core @@ -3466,7 +3466,7 @@ Here are some highlights ✨: ### Docs -- [docs] Add React + Material UI + Firebase as an example project (#15915) @Phoqe +- [docs] Add React + Material UI + Firebase as an example project (#15915) @Phoqe - [docs] Batch of fixes (#15996) @oliviertassinari - [docs] Fix a typo within pricing page layout example (#15978) @sdornan - [docs] Fix broken JSS links (#15972) @timkindberg @@ -3583,7 +3583,7 @@ Here are some highlights ✨: _May 23, 2019_ -[Material UI v4 is out 🎉](https://mui.com/blog/material-ui-v4-is-out/) +[Material UI v4 is out 🎉](https://mui.com/blog/material-ui-v4-is-out/) Some statistics with v4 compared to the release of v1 one year ago: @@ -3605,7 +3605,7 @@ Some statistics with v4 compared to the release of v1 one year ago: - [docs] Fix some gramma in testing doc (#15776) @DDDDDanica - [docs] Fix some grammar in right to left guide (#15789) @DDDDDanica - [docs] Fix typo (#15792) @retyui -- [docs] Material UI v4 is out (#15766) @oliviertassinari +- [docs] Material UI v4 is out (#15766) @oliviertassinari - [docs] Reference the article with it's full name in icon doc (#15796) @DDDDDanica - [docs] Revert the marked change (#15797) @oliviertassinari @@ -4090,7 +4090,7 @@ We hope 2-3 weeks of beta will be enough. We plan on releasing v4 stable in May. - [docs] Improve table demos (#15281) @eps1lon - [docs] Add ClippedDrawer TypeScript demo (#15284) @cahilfoley - [docs] Add most Dialog TypeScript demos (#15271) @sperry94 -- [docs] Who's using Material UI? (#15301) @mbrookes +- [docs] Who's using Material UI? (#15301) @mbrookes - [examples] Fix HTML end tag (#15293) @raybooysen - [docs] Update version filter (#15307) @mbrookes - [docs] Removed styled-components in gatsby-next dependencies (#15313) @tatchi @@ -4209,7 +4209,7 @@ Here are some highlights ✨: - [docs] Flatten /layout/layout (#15120) @oliviertassinari - [docs] Migrate docs' App bar page to hooks (#15121) @gabrielgene - [docs] Migrate docs' Tooltips page to hooks (#15137) @gabrielgene -- [docs] Use Date type instead of any for MUI pickers demo (#15144) @gabrielgene +- [docs] Use Date type instead of any for Material UI pickers demo (#15144) @gabrielgene - [docs] Add virtualized List example (#15149) @joshwooding - [docs] Update Style library interoperability + Container forwardRef (#15147) @oliviertassinari - [docs] Run the TypeScript demos (#15159) @oliviertassinari @@ -4219,7 +4219,7 @@ Here are some highlights ✨: - [docs] Add ExpansionPanels TypeScript Demo (#15162) @Adherentman - [docs] Add ref forwarding to API docs (#15135) @eps1lon - [docs] Add ImgMediaCard TypeScript demo (#15130) @jasondashwang -- [docs] Link 'React Material UI Cookbook' (#15211) @oliviertassinari +- [docs] Link 'React Material UI Cookbook' (#15211) @oliviertassinari - [docs] Fix the docs in dev mode for IE11 (#15230) @oliviertassinari - [docs] New translations (#15235) @mbrookes - [examples] Update all the examples + page layout examples (#15219) @nareshbhatia @@ -4338,7 +4338,7 @@ This release fixes an important regression with TypeScript: https://github.com/m - [docs] Fix hooks codesandbox broken (#14553) @Abbo44 - [docs] Fix typo in simple breadcrumbs example (#14575) @AndrewUsher -- [blog] Material UI Developer Survey 2019 (#14614) @oliviertassinari +- [blog] Material UI Developer Survey 2019 (#14614) @oliviertassinari - [docs] Change Gitter to Spectrum (#14668) @mbrookes - [docs] Update link to http://cssinjs.org/jss-api/ (#14788) @monicatie - [docs] Add Algolia metadata (#14835) @oliviertassinari @@ -4860,7 +4860,7 @@ Remove the first option argument of `withTheme()`. The first argument was a plac _Feb 12, 2019_ -This is our first unstable release toward Material UI v4.0.0. We try to release a major every 6-12 months. +This is our first unstable release toward Material UI v4.0.0. We try to release a major every 6-12 months. This gives us the opportunity to remove deprecated APIs, upgrade our peer dependencies and more importantly, keep up with the direction the community is taking. - You can find the documentation following this URL: https://mui.com/. @@ -4918,7 +4918,7 @@ console.log({ background }); - [core] Change UMD output name to 'MaterialUI' (#13142) @tkrotoff - This change eases the use of Material UI with a CDN: + This change eases the use of Material UI with a CDN: ```diff const { @@ -5326,7 +5326,7 @@ Here are some highlights ✨: ### Docs - [docs] Fix demo iframe styling in Firefox (#14056) @joshwooding -- [docs] CSS to MUI loader documentation updated (#14060) @Kaliyani +- [docs] CSS to Material UI loader documentation updated (#14060) @Kaliyani - [docs] Fix spelling mistake in Premium themes footer (#14071) @nikhilem - [docs] Update showcase with 36 new sites (#14083) @mbrookes - [docs] Update URL for @material-ui/system (#14043) @NMinhNguyen @@ -5334,7 +5334,7 @@ Here are some highlights ✨: - [docs] Update broken link to cssinjs.org in css-in-js (#14080) @valerieernst - [docs] Tweeper theme (#14034) @siriwatknp - [docs] Add Code Typing Tutor to Showcase (#14061) @kulakowka -- [docs] Improve the system variant demo (#14091) @oliviertassinari +- [docs] Improve MUI System variant demo (#14091) @oliviertassinari - [docs] Add PhotoUtils to Showcase (#14098) @Maxim-Gurin - [docs] Add GovX to Showcase, move Onepixel (#14094) @mbrookes - [docs] Simplify the color documentation page (#14103) @oliviertassinari @@ -5550,7 +5550,7 @@ you to add them up quickly in your head without having to worry about decimals. ### Core - [core] 100% remove the prop types (#13859) @oliviertassinari -- [core] Prefix the errors with Material UI (#13892) @oliviertassinari +- [core] Prefix the errors with Material UI (#13892) @oliviertassinari ## 3.6.2 @@ -5752,7 +5752,7 @@ import Divider from '@material-ui/core/Divider'; - [docs] Add redirect rule for moved page layout examples (#13588) @mbrookes - [docs] Add the selfeducation.app showcase (#13620) @kulakowka - [docs] Warn about the Dynamic CSS alpha state (#13619) @WebDeg-Brian -- [docs] Learn Material UI (#13624) @oliviertassinari +- [docs] Learn Material UI (#13624) @oliviertassinari - [docs] Add a Firebase example in the premium-theme section (#13579) @siriwatknp - [docs] Increase clarity around the usage of font icons (#13628) @JosephMart - [docs] Add swimmy.io to showcase page (#13637) @uufish @@ -5781,7 +5781,7 @@ Here are some highlights ✨: - Introduce a new `@material-ui/styles` package 💅 (#13503). -The Material UI's styling solution has pretty much stayed the same [for the last 12 months](https://github.com/oliviertassinari/a-journey-toward-better-style). +The Material UI's styling solution has pretty much stayed the same [for the last 12 months](https://github.com/oliviertassinari/a-journey-toward-better-style). Some interesting CSS-in-JS libraries like styled-components, Emotion or linaria have emerged. This new package is a significant step forward. Some of the key features: @@ -6144,7 +6144,7 @@ Here are some highlights ✨: - [test] Add visual regression test for SpeedDIal (#13140) @eps1lon - [test] Tidelift - skip checking nomnom & os-locale (#13157) @mbrookes -- [core] Benchmark Material UI (#13233) @oliviertassinari +- [core] Benchmark Material UI (#13233) @oliviertassinari - [core] Introduce JSS caching (#13236) @oliviertassinari ## 3.2.0 @@ -6877,12 +6877,12 @@ Here are some highlights ✨: https://m2.material.io/tools/icons/. There are more than 5,000 icons. (#12016, #12036, #12170, #12111, #12225) -- The 1.4.0 release of Material UI has introduced a new implementation of the Tooltip and Popper component. +- The 1.4.0 release of Material UI has introduced a new implementation of the Tooltip and Popper component. This release fixes a lot of issues following the rewrite (#12168, #12161, #12194, #12223, #12218). Thank you for reporting all these problems 🐛. Hopefully, it's very stable now. -- Creative Tim has just completed [their second Material UI theme](https://www.creative-tim.com/product/material-kit-pro-react?partner=104080) 💅. - It's an important milestone for the themability of Material UI. +- Creative Tim has just completed [their second Material UI theme](https://www.creative-tim.com/product/material-kit-pro-react?partner=104080) 💅. + It's an important milestone for the themability of Material UI. We are going to keep working on adding more themes to the list. ### Breaking change @@ -7324,7 +7324,7 @@ N/A #### Labs - [SpeedDial] Fix classes prop description (#11599) @mbrookes -- [Slider] Misc fixes towards standard MUI patterns (#11605) @mbrookes +- [Slider] Misc fixes towards standard Material UI patterns (#11605) @mbrookes - [Slider] Fire the right event on mouseDown (#11642) @acroyear - [SpeedDial] Add type definitions to lab, so SpeedDial can be use with TypeScript project (#11542) @TR3MIC @@ -7408,7 +7408,7 @@ _May 17, 2018_ Our first stable v1 release! 🎉 -It has taken us two years to do it, but Material UI v1 has finally arrived! +It has taken us two years to do it, but Material UI v1 has finally arrived! We are so excited about this release, as it's setting a new course for the project. Thank you to _everyone_, especially to [the team](https://mui.com/material-ui/discover-more/team/), and to everyone who's contributed code, issue triage, and support. **Thank you**. Some statistics with v1 while it was in alpha and beta: @@ -7473,7 +7473,7 @@ A big thanks to the 14 contributors who made this release possible. - [RaisedButton] Conditionally apply overlay backgroundColor (#9811) @walwoodr - [Snackbar] Static properties for reason string constants (#10300) @RavenHursT - [TextField] Fix caret position issue (#10214) @MaratFaskhiev -- Add sideEffects: false for webpack 4 (#11167) @matthoffner +- Add sideEffects: false for Webpack 4 (#11167) @matthoffner ### Docs @@ -7655,7 +7655,7 @@ A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨: -- A release date. We will release Material UI v1 May 17th. +- A release date. We will release Material UI v1 May 17th. - Improve the performance of withStyles by adding memoization (#11202) @CharlesStover. - Standardization of the component injection pattern (#11204) @oliviertassinari - And many more bug fixes and documentation improvements. @@ -8078,7 +8078,7 @@ Here are some highlights ✨: - [Grid] Change the default spacing value: 0 (#10768) @oliviertassinari The negative margin implementation solution currently used comes with [serious limitations](https://mui.com/components/grid/#negative-margin). -Material UI is the only library with a non-zero default spacing between the items. +Material UI is the only library with a non-zero default spacing between the items. Having zero spacing by default will ease the usage of the component. ```diff @@ -8306,7 +8306,7 @@ A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨: - We have started the effort toward supporting the async API of react@16.3.0 (#10489, #10523) @oliviertassinari. -- Document how to use Material UI with a CDN (#10514) @zelinf. +- Document how to use Material UI with a CDN (#10514) @zelinf. - And many more bug fixes and documentation improvements. ### Breaking change @@ -9144,8 +9144,8 @@ Remove the `transitionClasses` property of the Popover component. Instead, you c - [core] Update jss plugins dependencies (#9732) @cherniavskii -You might be relying on the transitive dependency of Material UI: `jss-preset-default`. -If you do, you need to declare the dependency in your package.json. Material UI will no longer install it for you. +You might be relying on the transitive dependency of Material UI: `jss-preset-default`. +If you do, you need to declare the dependency in your package.json. Material UI will no longer install it for you. Alternatively, you can use our preset to save bundle size. ```diff @@ -10234,7 +10234,7 @@ Here are some highlights ✨: - Introduction of the first codemods for the `v0.x -> v1.x` migration as well as a documentation page. @vividh (#8311, #8333, #8314) - The TypeScript definitions made an important step forward with more than 10 PRs merged. @pelotom @sebald @xaviergonz and more -- Wondering how Material UI compares to the other solutions out there? +- Wondering how Material UI compares to the other solutions out there? We have created a documentation page to stress the tradeoffs taken. (#8319) - `material-ui@next` has just [crossed **react-toolbox**](https://npm-stat.com/charts.html?package=react-scrollbar-size&package=react-toolbox&from=2017-01-24&to=2017-09-24) in terms of downloads on npm. @@ -10705,7 +10705,7 @@ Push #7741 initiative forward (use `value` and `onChange` as controlling propert ### Docs - [docs] Use Next.js: x2 performance (#7759) @oliviertassinari -- [docs] Add the 'data grid for Material UI' reference (#7786) @dxbykov +- [docs] Add the 'data grid for Material UI' reference (#7786) @dxbykov - [docs] Renamed the styleSheet argument in withStyles to styles (#7819) @phiilu - [docs] Advanced table (#7824) @oliviertassinari - [docs] Fix typo (#7777) @Merkyl999x @@ -11051,7 +11051,7 @@ We do, we have extended the support of React to the 16.0.0-alpha.13 release (aka - [docs] Fix typo in class name (#7192) @ossan-engineer - [docs] Add supported server section (#7231) @oliviertassinari - [docs] Detail the browser support (#7188) @oliviertassinari -- [docs] Upgrade to webpack v3 (#7210) @oliviertassinari +- [docs] Upgrade to Webpack v3 (#7210) @oliviertassinari - [docs] More documentation on the typography (#7248) @oliviertassinari ### Core @@ -11223,7 +11223,7 @@ This release introduces an important change in the API and the implementation. Each exposed component is wrapped with a `withStyles` Higher-order component. This HOC has different responsibilities, the one you're going to be interested in is regarding the `classes` property. Now, we consider the CSS as a public API. -You now have two way to customize absolutely all the CSS injected by Material UI. +You now have two way to customize absolutely all the CSS injected by Material UI. Either the instance level with the `classes` property or the class level with the `overrides` theme property. @@ -11630,7 +11630,7 @@ _Feb 26, 2017_ ### Docs -- [docs] Use webpack 2 & dll bundle (#6160) @nathanmarks +- [docs] Use Webpack 2 & dll bundle (#6160) @nathanmarks - [docs] Improve the user experience on mobile (#6154) @oliviertassinari - [docs] Fix the Table examples on mobile (425d8ed47e0282b8c0409517c53e00ef61374b02) @oliviertassinari - [docs] Add an API section (#6239) @oliviertassinari @@ -11640,7 +11640,7 @@ _Feb 26, 2017_ - [core] Fix typos in styles/transitions pointed out in issue (#6175) @Shahrukh-Zindani - [core] Lightweight the build (#6152) @oliviertassinari -- [core] Add exports to index.js for inclusion in webpack bundle (#6144) @fkretzer +- [core] Add exports to index.js for inclusion in Webpack bundle (#6144) @fkretzer - [test] Integration of test suite to run on BrowserStack (#6236) @oliviertassinari - [test] Bump vrtest version for exit code fix (1831aa76fe72e9b22a0b82f2a360f860ca89fdce) @nathanmarks @@ -11748,7 +11748,7 @@ _Dec 25, 2016_ We are releasing sooner than we use to for this **special day** :christmas_tree::gift:. 17 contributors are making that last release of the year possible. -2016 has been an exceptional year for Material UI. +2016 has been an exceptional year for Material UI. - We went from 40k to 180k [downloads](https://npm-stat.com/charts.html?package=material-ui&from=2014-12-24&to=2016-12-25) a month. :package: - We went from 12k to 22k [stars](http://www.timqian.com/star-history/#mui/material-ui). :star: @@ -12465,18 +12465,18 @@ _Mar 18, 2016_ ### Breaking Changes -- [Core] if you used Material UI from npm in CommonJS environment, +- [Core] if you used Material UI from npm in CommonJS environment, you need to add `.default` to your requires (#3648): ```diff -- const MUI = require('material-ui'); -+ const MUI = require('material-ui').default; +- const MaterialUI = require('material-ui'); ++ const MaterialUI = require('material-ui').default; ``` If you used ES modules, you're already all good: ```js -import MUI from 'material-ui'; // no changes here :D +import MaterialUI from 'material-ui'; // no changes here :D ``` - [Core] Remove uniqueId utils (#3538) @@ -13049,7 +13049,7 @@ _Oct 21, 2015_ ### Breaking Changes -- Material UI for React 0.14.x +- Material UI for React 0.14.x ### Component Fixes / Enhancements @@ -13072,7 +13072,7 @@ v0.12.4 should have really been v0.13.0 as it breaks compatibility with React 0. _Oct 19, 2015_ -**This version is not compatible with React 0.13.x.** If you're on React 0.13.x, use Material UI v0.12.5 instead. +**This version is not compatible with React 0.13.x.** If you're on React 0.13.x, use Material UI v0.12.5 instead. ### General @@ -13558,11 +13558,11 @@ _May 24, 2015_ ### Breaking Changes - Refactored all CSS into JavaScript (#30, #316) - - All Material UI components now have their styles defined inline. This solves + - All Material UI components now have their styles defined inline. This solves many problems with CSS as mentions in [@vjeux's presentation](https://speakerdeck.com/vjeux/react-css-in-js) such as polluting the global namespace with classes that really should be component specific. In addition to the benefits mentioned in the - presentation, inline styles allow Material UI to become CSS preprocessor + presentation, inline styles allow Material UI to become CSS preprocessor agnostic and make Themeing much more dynamic and simple. [Read our CSS in JS discussion](https://github.com/mui/material-ui/issues/30) - Upgrade path: @@ -13575,10 +13575,10 @@ _May 24, 2015_ element. If a style prop does not exist for the component's nested element that you are trying to override, [submit an issue](https://github.com/mui/material-ui/issues/new) requesting to have it added. - - _If you are using any of Material UI's Less files:_ These files have been + - _If you are using any of Material UI's Less files:_ These files have been refactored into their [own JavaScript files](https://github.com/mui/material-ui/tree/css-in-js/src/styles) and can be accessed like so `var FILENAME = require('material-ui').Styles.FILENAME;`. - Material UI has moved away from being a CSS Framework to being simply a + Material UI has moved away from being a CSS Framework to being simply a set of React components. - Paper component no longer generates nested divs (#601) - This allowed us to simplify styling of paper containers. As a result, styling the inner div is no longer necessary. @@ -13588,7 +13588,7 @@ _May 24, 2015_ - Themes have been added (#202) - Requiring individual components is now supported (#363) - An example would be: `var SvgIcon = require('material-ui/lib/svg-icon);` - - The `/lib` folder in Material UI contains the file structure needed when referencing individual components. + - The `/lib` folder in Material UI contains the file structure needed when referencing individual components. ### Components @@ -14074,7 +14074,7 @@ _Nov. 17, 2014_ _Nov. 11, 2014_ -- Changed project structure to be less confusing. Material UI components/styles live in the src directory. +- Changed project structure to be less confusing. Material UI components/styles live in the src directory. Docs site code lives in the docs directory. This still allows us to easily test components in the docs site as we are working on them - Added .editorconfig to help keep code formatting consistent among contributors. See http://editorconfig.org/ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f67695d6f32e6c..60a57fd49d0273 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,7 +1,7 @@ -# Contributing to MUI +# Contributing to Material UI, Base UI, MUI System, Joy UI If you're reading this, you're awesome! -Thank you for being a part of the MUI community and helping us make these projects great. +Thank you for being a part of the community and helping us make these projects great. Here are a few guidelines that will help you along the way. ## Summary @@ -25,12 +25,12 @@ Here are a few guidelines that will help you along the way. ## Code of conduct -MUI has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as our code of conduct, and we expect project participants to adhere to it. +We has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as our code of conduct, and we expect project participants to adhere to it. Please read [the full text](https://github.com/mui/.github/blob/master/CODE_OF_CONDUCT.md) to understand what actions will and will not be tolerated. ## A large spectrum of contributions -There are [many ways](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) to contribute to MUI, and writing code is only one part of the story—[documentation improvements](#contributing-to-the-documentation) can be just as important as code changes. +There are [many ways](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) to contribute to the library, and writing code is only one part of the story—[documentation improvements](#contributing-to-the-documentation) can be just as important as code changes. If you have an idea for an improvement to the code or the docs, we encourage you to open an issue as a first step, to discuss your proposed changes with the maintainers before proceeding. ## Your first pull request @@ -40,10 +40,10 @@ Working on your first pull request? You can learn how in this free video series: Get started with [good first issues](https://github.com/mui/material-ui/issues?q=is:open+is:issue+label:"good+first+issue"), which have a limited scope and a working solution that's already been discussed. This makes them ideal for newer developers, or those who are new to these libraries and want to see how the contribution process works. -We also have a list of [good to take issues](https://github.com/mui/material-ui/issues?q=is:open+is:issue+label:"good+to+take"), which are issues that have already been at least partially resolved in discussion, to the point that it's clear what to do next. +We also have a list of [ready to take issues](https://github.com/mui/material-ui/issues?q=is:open+is:issue+label:"ready+to+take"), which are issues that have already been at least partially resolved in discussion, to the point that it's clear what to do next. These issues are great for developers who want to reduce their chances of falling down a rabbit hole in search of a solution. -Of course, you can work on any other issue you like—the "good first" and "good to take" issues are simply those where the scope and timeline may be better defined. +Of course, you can work on any other issue you like—the "good first" and "ready to take" issues are simply those where the scope and timeline may be better defined. Pull requests for other issues, or completely novel problems, may take a bit longer to review if they don't fit into our current development cycle. If you decide to fix an issue, please make sure to check the comment thread in case somebody is already working on a fix. @@ -54,7 +54,7 @@ If there has been no activity on the issue for 7 to 14 days, then it's safe to a ## Sending a pull request -MUI Core projects are community-driven, so pull requests are always welcome, but before working on a large change, it's best to open an issue first to discuss it with the maintainers. +MUI Core projects are community-driven, so pull requests are always welcome, but before working on a large change, it's best to open an issue first to discuss it with the maintainers. When in doubt, keep your pull requests small. For the best chances of being accepted, don't bundle more than one feature or bug fix per PR. @@ -104,7 +104,7 @@ We will review your PR and either merge it, request changes to it, or close it w ### Trying changes on the documentation site -The documentation site is built with Material UI and contains examples of all of the components. +The documentation site is built with Material UI and contains examples of all of the components. This is the best place to experiment with your changes—it's the local development environment used by the maintainers. To get started, run: @@ -180,9 +180,8 @@ The following sections give an overview of what each check is responsible for. #### ci/codesandbox -This task creates multiple sandboxes on CodeSandbox.com that use the version of MUI that was built from this pull request. -It should not fail in isolation. -Use it to test more complex scenarios. +This task creates multiple sandboxes on CodeSandbox.com that use the version of npm packages that was built from this pull request. +It should not fail in isolation. Use it to test more complex scenarios. #### ci/circleci: checkout @@ -264,7 +263,7 @@ $ pnpm docs:api ### Coding style Please follow the coding style of the project. -MUI Core projects use prettier and ESLint, so if possible, enable linting in your editor to get real-time feedback. +MUI Core projects use prettier and ESLint, so if possible, enable linting in your editor to get real-time feedback. - `pnpm prettier` reformats the code. - `pnpm eslint` runs the linting rules. @@ -352,7 +351,7 @@ Alternatively, you can open the Netlify preview of the documentation, and open a The documentation automatically configures the dependencies to use the preview packages. You can also package and test your changes locally. -The following example shows how to package `@mui/material`, but you can package any MUI module with this process: +The following example shows how to package `@mui/material`, but you can package any npm package with this process: ```bash $> cd packages/mui-material # or path to any other mui package @@ -375,7 +374,9 @@ $test-project> npm i ./path-to-file/mui-material-x.x.x.tar.gz ## Roadmap -Learn more about the future of MUI and its products by visiting our [roadmap](https://mui.com/material-ui/discover-more/roadmap/). +Learn more about the future by visiting our different projects' roadmaps: + +- [Material UI roadmap](https://mui.com/material-ui/discover-more/roadmap/). ## License diff --git a/README.md b/README.md index 35fad55225adc0..421ed7bee3a1d2 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,19 @@

- MUI Core logo + MUI Core logo

-

MUI Core

+

MUI Core

-**MUI Core** contains foundational React UI component libraries for shipping new features faster: +**MUI Core** contains foundational React UI component libraries for shipping new features faster: -- [Material UI](https://mui.com/material-ui/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system. +- [Material UI](https://mui.com/material-ui/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system. - [Joy UI](https://mui.com/joy-ui/getting-started/) is a library of beautifully designed React UI components built to spark joy. -- [Base UI](https://mui.com/base-ui/) is a library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app's CSS and accessibility features. +- [Base UI](https://mui.com/base-ui/) is a library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app's CSS and accessibility features. -- [MUI System](https://mui.com/system/getting-started/) is a collection of CSS utilities to help you rapidly lay out custom designs. +- [MUI System](https://mui.com/system/getting-started/) is a collection of CSS utilities to help you rapidly lay out custom designs.
@@ -33,7 +33,7 @@ ## Documentation -### Material UI +### Material UI Visit [https://mui.com/material-ui/](https://mui.com/material-ui/) to view the full documentation. @@ -56,14 +56,14 @@ Visit [https://mui.com/joy-ui/getting-started/](https://mui.com/joy-ui/getting-s **Note**: Joy UI is still in beta. We are adding new components regularly and you're welcome to contribute! -### Base UI +### Base UI Visit [https://mui.com/base-ui/](https://mui.com/base-ui/) to view the full documentation. -**Note**: Base UI is still in beta. +**Note**: Base UI is still in beta. We are adding new components regularly and you're welcome to contribute! -### MUI System +### MUI System Visit [https://mui.com/system/getting-started/](https://mui.com/system/getting-started/) to view the full documentation. @@ -86,7 +86,7 @@ via [Open Collective](https://opencollective.com/mui-org) or via [Patreon](http tidelift.com Spotify Icons8 - RxDB + RxDB text-em-all.com megafamous.com dialmycalls.com @@ -109,7 +109,7 @@ Our documentation features [a collection of example projects](https://github.com ## Premium templates -You can find complete templates and themes in the [MUI Store](https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=readme-store). +You can find complete templates and themes in the [MUI Store](https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=readme-store). ## Contributing diff --git a/apps/zero-runtime-next-app/README.md b/apps/zero-runtime-next-app/README.md index de47d5fc1fa6a3..642698cf6b3abc 100644 --- a/apps/zero-runtime-next-app/README.md +++ b/apps/zero-runtime-next-app/README.md @@ -1,6 +1,6 @@ # Demo Next.js app for Zero Runtime -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +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). ## Getting Started diff --git a/apps/zero-runtime-next-app/next.config.js b/apps/zero-runtime-next-app/next.config.js index e22437e5b24ac8..57a52d81b50b8d 100644 --- a/apps/zero-runtime-next-app/next.config.js +++ b/apps/zero-runtime-next-app/next.config.js @@ -3,13 +3,18 @@ const { withZeroPlugin } = require('@mui/zero-next-plugin'); const { experimental_extendTheme: extendTheme } = require('@mui/material/styles'); -const theme = extendTheme(); - -theme.applyDarkStyles = function applyDarkStyles(obj) { - return { - ':where([data-mui-color-scheme="dark"]) &': obj, - }; -}; +const theme = extendTheme({ + cssVarPrefix: 'app', + components: { + MuiBadge: { + defaultProps: { + color: 'error', + }, + }, + }, +}); +theme.getColorSchemeSelector = (targetColorScheme) => + `[data-mui-color-scheme="${targetColorScheme}"] &`; /** * @typedef {import('@mui/zero-next-plugin').ZeroPluginConfig} ZeroPluginConfig @@ -20,7 +25,6 @@ theme.applyDarkStyles = function applyDarkStyles(obj) { */ const zeroPluginOptions = { theme, - cssVariablesPrefix: 'app', transformLibraries: ['local-ui-lib'], sourceMap: true, displayName: true, diff --git a/apps/zero-runtime-next-app/package.json b/apps/zero-runtime-next-app/package.json index 4fdd18a56442c2..9ea4cbbb7be30d 100644 --- a/apps/zero-runtime-next-app/package.json +++ b/apps/zero-runtime-next-app/package.json @@ -17,12 +17,12 @@ "local-ui-lib": "workspace:^", "react": "^18.2.0", "react-dom": "^18.2.0", - "next": "14.0.4" + "next": "14.1.0" }, "devDependencies": { "@mui/zero-next-plugin": "workspace:^", "@types/node": "^20.5.7", - "@types/react": "^18.2.45", + "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", "eslint": "^8.56.0", "typescript": "^5.3.3" diff --git a/apps/zero-runtime-next-app/src/app/avatar/page.tsx b/apps/zero-runtime-next-app/src/app/avatar/page.tsx new file mode 100644 index 00000000000000..d4f79567a58504 --- /dev/null +++ b/apps/zero-runtime-next-app/src/app/avatar/page.tsx @@ -0,0 +1,12 @@ +import Stack from '@mui/material/Stack'; +import Avatar from '@/components/Avatar/Avatar'; + +export default function Avatars() { + return ( + + + + + + ); +} diff --git a/apps/zero-runtime-next-app/src/app/layout.tsx b/apps/zero-runtime-next-app/src/app/layout.tsx index bb634f29fa01e5..68cda51c45fe81 100644 --- a/apps/zero-runtime-next-app/src/app/layout.tsx +++ b/apps/zero-runtime-next-app/src/app/layout.tsx @@ -1,5 +1,4 @@ import type { Metadata } from 'next'; -import { styled } from '@mui/zero-runtime'; import { Inter } from 'next/font/google'; import '@mui/zero-runtime/styles.css'; @@ -12,19 +11,10 @@ export const metadata: Metadata = { description: 'Generated by create next app', }; -const Html = styled.html({ - color: 'red', -}); - -const Body = styled.body({ - color: 'rgb(var(--foreground-rgb))', - background: `linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb))`, -}); - -export default function RootLayout({ children }: { children: React.ReactNode }) { +export default function RootLayout(props: { children: React.ReactNode }) { return ( - - {children} - + + {props.children} + ); } diff --git a/apps/zero-runtime-next-app/src/app/page.tsx b/apps/zero-runtime-next-app/src/app/page.tsx index 59edcbe6c33e14..377dca936779c3 100644 --- a/apps/zero-runtime-next-app/src/app/page.tsx +++ b/apps/zero-runtime-next-app/src/app/page.tsx @@ -1,8 +1,11 @@ import Image from 'next/image'; import { styled } from '@mui/zero-runtime'; +import Badge from '@mui/material/Badge'; import styles from './page.module.css'; const Main = styled.main({ + color: 'rgb(var(--foreground-rgb))', + background: `linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb))`, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', @@ -75,6 +78,9 @@ const Description = styled.div({ export default function Home() { return (
+ +
Hey
+

Get started by editing  diff --git a/apps/zero-runtime-next-app/src/augment.d.ts b/apps/zero-runtime-next-app/src/augment.d.ts index d68ef6f18f37e6..c229ef09da32c6 100644 --- a/apps/zero-runtime-next-app/src/augment.d.ts +++ b/apps/zero-runtime-next-app/src/augment.d.ts @@ -1,10 +1,14 @@ -import type { experimental_extendTheme } from '@mui/material/styles'; +import type { Theme } from '@mui/material/styles'; +import type {} from '@mui/material/themeCssVarsAugmentation'; import '@mui/zero-runtime/theme'; declare module '@mui/zero-runtime/theme' { export interface ThemeArgs { - theme: ReturnType & { - applyDarkStyles(obj: T): Record; + theme: Omit & { + applyStyles: ( + colorScheme: 'light' | 'dark', + styles: Record, + ) => Record; }; } } diff --git a/apps/zero-runtime-next-app/src/components/Avatar/Avatar.js b/apps/zero-runtime-next-app/src/components/Avatar/Avatar.js new file mode 100644 index 00000000000000..c5fa7151c6323f --- /dev/null +++ b/apps/zero-runtime-next-app/src/components/Avatar/Avatar.js @@ -0,0 +1,272 @@ +'use client'; +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses'; +import { styled } from '@mui/zero-runtime'; +import { useThemeProps } from '@mui/material/styles'; +/* eslint-disable-next-line no-restricted-imports */ +import Person from '@mui/material/internal/svg-icons/Person'; +import { getAvatarUtilityClass } from '@mui/material/Avatar'; + +const useUtilityClasses = (ownerState) => { + const { classes, variant, colorDefault } = ownerState; + + const slots = { + root: ['root', variant, colorDefault && 'colorDefault'], + img: ['img'], + fallback: ['fallback'], + }; + + return composeClasses(slots, getAvatarUtilityClass, classes); +}; + +const AvatarRoot = styled('div', { + name: 'MuiAvatar', + slot: 'Root', + overridesResolver: (props, styles) => { + const { ownerState } = props; + + return [ + styles.root, + styles[ownerState.variant], + ownerState.colorDefault && styles.colorDefault, + ]; + }, +})(({ theme }) => ({ + position: 'relative', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexShrink: 0, + width: 40, + height: 40, + fontFamily: theme.typography.fontFamily, + fontSize: theme.typography.pxToRem(20), + lineHeight: 1, + borderRadius: '50%', + overflow: 'hidden', + userSelect: 'none', + variants: [ + { + props: { variant: 'rounded' }, + style: { + borderRadius: (theme.vars || theme).shape.borderRadius, + }, + }, + { + props: { variant: 'square' }, + style: { + borderRadius: 0, + }, + }, + { + props: { colorDefault: true }, + style: { + color: (theme.vars || theme).palette.background.default, + ...(theme.vars + ? { + backgroundColor: theme.vars.palette.Avatar.defaultBg, + } + : { + backgroundColor: theme.palette.grey[400], + ...theme.applyDarkStyles({ backgroundColor: theme.palette.grey[600] }), + }), + }, + }, + ], +})); + +const AvatarImg = styled('img', { + name: 'MuiAvatar', + slot: 'Img', + overridesResolver: (props, styles) => styles.img, +})({ + width: '100%', + height: '100%', + textAlign: 'center', + // Handle non-square image. The property isn't supported by IE11. + objectFit: 'cover', + // Hide alt text. + color: 'transparent', + // Hide the image broken icon, only works on Chrome. + textIndent: 10000, +}); + +const AvatarFallback = styled(Person, { + name: 'MuiAvatar', + slot: 'Fallback', + overridesResolver: (props, styles) => styles.fallback, +})({ + width: '75%', + height: '75%', +}); + +function useLoaded({ crossOrigin, referrerPolicy, src, srcSet }) { + const [loaded, setLoaded] = React.useState(false); + + React.useEffect(() => { + if (!src && !srcSet) { + return undefined; + } + + setLoaded(false); + + let active = true; + const image = new Image(); + image.onload = () => { + if (!active) { + return; + } + setLoaded('loaded'); + }; + image.onerror = () => { + if (!active) { + return; + } + setLoaded('error'); + }; + image.crossOrigin = crossOrigin; + image.referrerPolicy = referrerPolicy; + image.src = src; + if (srcSet) { + image.srcset = srcSet; + } + + return () => { + active = false; + }; + }, [crossOrigin, referrerPolicy, src, srcSet]); + + return loaded; +} + +const Avatar = React.forwardRef(function Avatar(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiAvatar' }); + const { + alt, + children: childrenProp, + className, + component = 'div', + imgProps, + sizes, + src, + srcSet, + variant = 'circular', + ...other + } = props; + + 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, + }; + + const classes = useUtilityClasses(ownerState); + + if (hasImgNotFailing) { + children = ( + + ); + } else if (childrenProp != null) { + children = childrenProp; + } else if (hasImg && alt) { + children = alt[0]; + } else { + children = ; + } + + return ( + + {children} + + ); +}); + +Avatar.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the d.ts file and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * Used in combination with `src` or `srcSet` to + * provide an alt attribute for the rendered `img` element. + */ + alt: PropTypes.string, + /** + * Used to render icon or text elements inside the Avatar if `src` is not set. + * This can be an element, or just a string. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + */ + classes: PropTypes.object, + /** + * @ignore + */ + className: PropTypes.string, + /** + * The component used for the root node. + * Either a string to use a HTML element or a component. + */ + component: PropTypes.elementType, + /** + * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image. + * It can be used to listen for the loading error event. + */ + imgProps: PropTypes.object, + /** + * The `sizes` attribute for the `img` element. + */ + sizes: PropTypes.string, + /** + * The `src` attribute for the `img` element. + */ + src: PropTypes.string, + /** + * The `srcSet` attribute for the `img` element. + * Use this attribute for responsive image display. + */ + srcSet: PropTypes.string, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), + /** + * The shape of the avatar. + * @default 'circular' + */ + variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['circular', 'rounded', 'square']), + PropTypes.string, + ]), +}; + +export default Avatar; diff --git a/apps/zero-runtime-next-app/src/components/Slider/ZeroSlider.tsx b/apps/zero-runtime-next-app/src/components/Slider/ZeroSlider.tsx index fe6f4e8108a037..3f193c182caf6a 100644 --- a/apps/zero-runtime-next-app/src/components/Slider/ZeroSlider.tsx +++ b/apps/zero-runtime-next-app/src/components/Slider/ZeroSlider.tsx @@ -231,7 +231,7 @@ const SliderTrack = styled('span', { }, style: { '--slider-track-color': lightPrimaryColor, - ...theme.applyDarkStyles({ + ...theme.applyStyles('dark', { '--slider-track-color': darkPrimaryColor, }), }, @@ -242,7 +242,7 @@ const SliderTrack = styled('span', { }, style: { '--slider-track-color': lightSecondaryColor, - ...theme.applyDarkStyles({ + ...theme.applyStyles('dark', { '--slider-track-color': darkSecondaryColor, }), }, @@ -686,7 +686,6 @@ const Slider = React.forwardRef(function Slider(pr const ownerState: SliderOwnerState = { ...props, - // @ts-expect-error @TODO - Figure out how to support rtl/ltr with themes isRtl, max, min, @@ -761,7 +760,6 @@ const Slider = React.forwardRef(function Slider(pr }, ownerState: { ...ownerState, - // @ts-expect-error ...rootSlotProps?.ownerState, }, className: [classes.root, className], @@ -785,7 +783,6 @@ const Slider = React.forwardRef(function Slider(pr }, ownerState: { ...ownerState, - // @ts-expect-error ...trackSlotProps?.ownerState, }, className: classes.track, @@ -797,7 +794,6 @@ const Slider = React.forwardRef(function Slider(pr externalSlotProps: thumbSlotProps, ownerState: { ...ownerState, - // @ts-expect-error ...thumbSlotProps?.ownerState, }, className: classes.thumb, @@ -808,7 +804,6 @@ const Slider = React.forwardRef(function Slider(pr externalSlotProps: valueLabelSlotProps, ownerState: { ...ownerState, - // @ts-expect-error ...valueLabelSlotProps?.ownerState, }, className: classes.valueLabel, diff --git a/apps/zero-runtime-vite-app/package.json b/apps/zero-runtime-vite-app/package.json index 1f466f737596f4..8a42e022278943 100644 --- a/apps/zero-runtime-vite-app/package.json +++ b/apps/zero-runtime-vite-app/package.json @@ -12,23 +12,23 @@ "@mui/base": "workspace:^", "@mui/system": "workspace:^", "@mui/zero-runtime": "workspace:^", - "clsx": "^2.0.0", + "clsx": "^2.1.0", "local-ui-lib": "workspace:^", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { - "@babel/preset-env": "^7.23.2", - "@babel/preset-react": "^7.22.15", - "@babel/preset-typescript": "^7.23.2", + "@babel/preset-env": "^7.23.9", + "@babel/preset-react": "^7.23.3", + "@babel/preset-typescript": "^7.23.3", "@mui/material": "workspace:^", "@mui/utils": "workspace:^", "@mui/zero-vite-plugin": "workspace:^", - "@types/react": "^18.2.47", + "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", "@vitejs/plugin-react": "^4.2.1", "postcss": "^8.4.33", "postcss-combine-media-query": "^1.0.1", - "vite": "5.0.10" + "vite": "5.0.12" } } diff --git a/apps/zero-runtime-vite-app/src/App.tsx b/apps/zero-runtime-vite-app/src/App.tsx index 1819e27088ceda..ec8dfb2bd40fda 100644 --- a/apps/zero-runtime-vite-app/src/App.tsx +++ b/apps/zero-runtime-vite-app/src/App.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { styled, generateAtomics } from '@mui/zero-runtime'; +import { styled, generateAtomics, css } from '@mui/zero-runtime'; import type { Breakpoint } from '@mui/system'; import { Button, bounceAnim } from 'local-ui-lib'; import Slider from './Slider/ZeroSlider'; @@ -57,7 +57,11 @@ export function App({ isRed }: AppProps) { const [isHorizontal, setIsHorizontal] = React.useState(true); return ( -

+
diff --git a/babel.config.js b/babel.config.js index eca2870ce49edb..f04e19b097f92f 100644 --- a/babel.config.js +++ b/babel.config.js @@ -33,6 +33,7 @@ module.exports = function getBabelConfig(api) { '@mui/material-next': resolveAliasPath('./packages/mui-material-next/src'), '@mui/joy': resolveAliasPath('./packages/mui-joy/src'), '@mui/zero-runtime': resolveAliasPath('./packages/zero-runtime/src'), + '@mui-internal/docs-utils': resolveAliasPath('./packages/docs-utils/src'), docs: resolveAliasPath('./docs'), test: resolveAliasPath('./test'), }; diff --git a/benchmark/browser/README.md b/benchmark/browser/README.md index 1ea58aa954b8e3..2ecf0ebd4e8fbc 100644 --- a/benchmark/browser/README.md +++ b/benchmark/browser/README.md @@ -21,7 +21,7 @@ Grid (html): 28.34 ±01.80ms Grid System: 167 ±2% -Grid Material UI: +Grid Material UI: 179 ±1% Table: 128 ±3% diff --git a/benchmark/browser/scripts/benchmark.js b/benchmark/browser/scripts/benchmark.js index 0b6529f82f3909..e5d35e4d873a87 100644 --- a/benchmark/browser/scripts/benchmark.js +++ b/benchmark/browser/scripts/benchmark.js @@ -215,7 +215,7 @@ async function run() { name: 'Box Chakra-UI', path: './box-chakra-ui/index.js', }, - // Test the system perf difference with alternatives + // Test MUI System perf difference with alternatives { name: 'styled-components Box + @mui/system', path: './styled-components-box-material-ui-system/index.js', diff --git a/benchmark/package.json b/benchmark/package.json index 15aeda8da56fa9..1d90b1ba18663e 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -24,7 +24,7 @@ "express": "^4.18.2", "fs-extra": "^11.2.0", "jss": "^10.10.0", - "playwright": "^1.40.1", + "playwright": "^1.41.1", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -36,6 +36,6 @@ "styled-components": "^6.1.8", "styled-system": "^5.1.5", "theme-ui": "^0.16.1", - "webpack": "^5.89.0" + "webpack": "^5.90.0" } } diff --git a/benchmark/server/README.md b/benchmark/server/README.md index b0507b7716be49..21c02dafcb00de 100644 --- a/benchmark/server/README.md +++ b/benchmark/server/README.md @@ -1,4 +1,4 @@ -# MUI benchmark +# Benchmark ## `@mui/material` diff --git a/docs/README.md b/docs/README.md index 6e37344014ce0e..be608ab1462f71 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,6 +1,6 @@ -# MUI docs +# Docs -This is the documentation website of MUI. +This is the website of the company (MUI), the documentation of Material UI, Base UI, MUI System, and Joy UI. To start the docs site in development mode, from the project root, run: diff --git a/docs/data/base/all-components/all-components.md b/docs/data/base/all-components/all-components.md index d8a892d14450f2..99c56c2df357e6 100644 --- a/docs/data/base/all-components/all-components.md +++ b/docs/data/base/all-components/all-components.md @@ -1,5 +1,5 @@ -# Base UI components +# Base UI components -

Every Base UI component available so far, sorted alphabetically.

+

Every Base UI component available so far, sorted alphabetically.

{{"component": "modules/components/BaseUIComponents.js"}} diff --git a/docs/data/base/components/accordion/accordion.md b/docs/data/base/components/accordion/accordion.md index a16c09fe31c10c..5a82e1bbcc8ba3 100644 --- a/docs/data/base/components/accordion/accordion.md +++ b/docs/data/base/components/accordion/accordion.md @@ -10,5 +10,5 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

Accordions let users show and hide sections of related content on a page.

:::warning -The Base UI Accordion component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38037) to see it arrive sooner. +The Base UI Accordion component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38037) to see it arrive sooner. ::: diff --git a/docs/data/base/components/autocomplete/autocomplete.md b/docs/data/base/components/autocomplete/autocomplete.md index d0a0cb5de11e64..0b20f73deb9523 100644 --- a/docs/data/base/components/autocomplete/autocomplete.md +++ b/docs/data/base/components/autocomplete/autocomplete.md @@ -18,17 +18,17 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ An autocomplete component is an enhanced text input that shows a list of suggested options as users type, and lets them select an option from the list. -Base UI provides the `useAutocomplete` hook for building a custom Autocomplete. +Base UI provides the `useAutocomplete` hook for building a custom Autocomplete. It implements the WAI-ARIA Combobox pattern, and is typically used to assist users in completing form inputs or search queries faster. {{"demo": "AutocompleteIntroduction", "defaultCodeOpen": false, "bg": "gradient"}} :::warning -Material UI and Joy UI have Autocomplete components that are built using the `useAutocomplete` hook, and they include many features not yet described here. +Material UI and Joy UI have Autocomplete components that are built using the `useAutocomplete` hook, and they include many features not yet described here. -To learn more about implementing a custom Autocomplete, you can explore the [`useAutocomplete` API docs](/base-ui/react-autocomplete/hooks-api/#use-autocomplete), or reference the Material UI and Joy UI implementations: +To learn more about implementing a custom Autocomplete, you can explore the [`useAutocomplete` API docs](/base-ui/react-autocomplete/hooks-api/#use-autocomplete), or reference the Material UI and Joy UI implementations: -- [Material UI Autocomplete](/material-ui/react-autocomplete/) +- [Material UI Autocomplete](/material-ui/react-autocomplete/) - [Joy UI Autocomplete](/joy-ui/react-autocomplete/) ::: @@ -102,9 +102,9 @@ Learn more about controlled and uncontrolled components in the [React documentat React Portals can be used to render the listbox outside of the DOM hierarchy, making it easier to allow it to "float" above adjacent elements. -Base UI provides a [Popper](/base-ui/react-popper/) component built around React's `createPortal()` for exactly this purpose, and additionally helps you manage keyboard focus as it moves in and out of the portal. +Base UI provides a [Popper](/base-ui/react-popper/) component built around React's `createPortal()` for exactly this purpose, and additionally helps you manage keyboard focus as it moves in and out of the portal. -To render the listbox in Base UI's Popper, the `ref`s must be merged as follows: +To render the listbox in Base UI's Popper, the `ref`s must be merged as follows: ```jsx import { useAutocomplete } from '@mui/base/useAutocomplete'; diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md index 864b67ccb3f0fe..a3302c53b20fe4 100644 --- a/docs/data/base/components/button/button.md +++ b/docs/data/base/components/button/button.md @@ -127,7 +127,7 @@ You can even use SVGs, as shown in the demo below: ### Using with links -The following demo illustrates how to use the Button as a link, whether using the Base UI Button itself for the `href`, or with the [Next.js Link component](https://nextjs.org/docs/pages/api-reference/components/link): +The following demo illustrates how to use the Button as a link, whether using the Base UI Button itself for the `href`, or with the [Next.js Link component](https://nextjs.org/docs/pages/api-reference/components/link): {{"demo": "UnstyledLinkButton.js", "defaultCodeOpen": true}} @@ -142,7 +142,7 @@ Instead, `aria-disabled` is used, which makes the Button focusable. This should be used whenever the disabled Button needs to be read by screen readers. -Base UI uses this prop internally in [menu items](/base-ui/react-menu/), making it possible to use the keyboard to navigate to disabled items (in compliance with [ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-7-focusability-of-disabled-controls)). +Base UI uses this prop internally in [menu items](/base-ui/react-menu/), making it possible to use the keyboard to navigate to disabled items (in compliance with [ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-7-focusability-of-disabled-controls)). The following demo shows how the `focusableWhenDisabled` prop works—use the Tab key to navigate within this document to see that only the second Button accepts the focus: diff --git a/docs/data/base/components/checkbox/checkbox.md b/docs/data/base/components/checkbox/checkbox.md index db0b97378ba049..58e682082f27b2 100644 --- a/docs/data/base/components/checkbox/checkbox.md +++ b/docs/data/base/components/checkbox/checkbox.md @@ -10,5 +10,5 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/

Checkboxes give users binary choices when presented with multiple options in a series.

:::warning -The Base UI Checkbox component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38036) to see it arrive sooner. +The Base UI Checkbox component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38036) to see it arrive sooner. ::: diff --git a/docs/data/base/components/drawer/drawer.md b/docs/data/base/components/drawer/drawer.md index b1dd173e490884..5d046213e952bc 100644 --- a/docs/data/base/components/drawer/drawer.md +++ b/docs/data/base/components/drawer/drawer.md @@ -9,5 +9,5 @@ githubLabel: 'component: drawer'

Navigation drawers (also known as sidebars) provide ergonomic access to different destinations without taking the user out of context.

:::warning -The Base UI Drawer component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38181) to see it arrive sooner. +The Base UI Drawer component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38181) to see it arrive sooner. ::: diff --git a/docs/data/base/components/input/OTPInput.js b/docs/data/base/components/input/OTPInput.js new file mode 100644 index 00000000000000..4b3e5512147af8 --- /dev/null +++ b/docs/data/base/components/input/OTPInput.js @@ -0,0 +1,231 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { Input as BaseInput } from '@mui/base/Input'; +import { Box, styled } from '@mui/system'; + +function OTP({ separator, length, value, onChange }) { + const inputRefs = React.useRef(new Array(length).fill(null)); + + const focusInput = (targetIndex) => { + const targetInput = inputRefs.current[targetIndex]; + targetInput.focus(); + }; + + const selectInput = (targetIndex) => { + const targetInput = inputRefs.current[targetIndex]; + targetInput.select(); + }; + + const handleKeyDown = (event, currentIndex) => { + switch (event.key) { + case 'ArrowUp': + case 'ArrowDown': + case ' ': + event.preventDefault(); + break; + case 'ArrowLeft': + event.preventDefault(); + if (currentIndex > 0) { + focusInput(currentIndex - 1); + selectInput(currentIndex - 1); + } + break; + case 'ArrowRight': + event.preventDefault(); + if (currentIndex < length - 1) { + focusInput(currentIndex + 1); + selectInput(currentIndex + 1); + } + break; + case 'Delete': + event.preventDefault(); + onChange((prevOtp) => { + const otp = + prevOtp.slice(0, currentIndex) + prevOtp.slice(currentIndex + 1); + return otp; + }); + + break; + case 'Backspace': + event.preventDefault(); + if (currentIndex > 0) { + focusInput(currentIndex - 1); + selectInput(currentIndex - 1); + } + + onChange((prevOtp) => { + const otp = + prevOtp.slice(0, currentIndex) + prevOtp.slice(currentIndex + 1); + return otp; + }); + break; + + default: + break; + } + }; + + const handleChange = (event, currentIndex) => { + const currentValue = event.target.value; + let indexToEnter = 0; + + while (indexToEnter <= currentIndex) { + if (inputRefs.current[indexToEnter].value && indexToEnter < currentIndex) { + indexToEnter += 1; + } else { + break; + } + } + onChange((prev) => { + const otpArray = prev.split(''); + const lastValue = currentValue[currentValue.length - 1]; + otpArray[indexToEnter] = lastValue; + return otpArray.join(''); + }); + if (currentValue !== '') { + if (currentIndex < length - 1) { + focusInput(currentIndex + 1); + } + } + }; + + const handleClick = (event, currentIndex) => { + selectInput(currentIndex); + }; + + const handlePaste = (event, currentIndex) => { + event.preventDefault(); + const clipboardData = event.clipboardData; + + // Check if there is text data in the clipboard + if (clipboardData.types.includes('text/plain')) { + let pastedText = clipboardData.getData('text/plain'); + pastedText = pastedText.substring(0, length).trim(); + let indexToEnter = 0; + + while (indexToEnter <= currentIndex) { + if (inputRefs.current[indexToEnter].value && indexToEnter < currentIndex) { + indexToEnter += 1; + } else { + break; + } + } + + const otpArray = value.split(''); + + for (let i = indexToEnter; i < length; i += 1) { + const lastValue = pastedText[i - indexToEnter] ?? ' '; + otpArray[i] = lastValue; + } + + onChange(otpArray.join('')); + } + }; + + return ( + + {new Array(length).fill(null).map((_, index) => ( + + { + inputRefs.current[index] = ele; + }, + onKeyDown: (event) => handleKeyDown(event, index), + onChange: (event) => handleChange(event, index), + onClick: (event) => handleClick(event, index), + onPaste: (event) => handlePaste(event, index), + value: value[index] ?? '', + }, + }} + /> + {index === length - 1 ? null : separator} + + ))} + + ); +} + +OTP.propTypes = { + length: PropTypes.number.isRequired, + onChange: PropTypes.func.isRequired, + separator: PropTypes.node, + value: PropTypes.string.isRequired, +}; + +export default function OTPInput() { + const [otp, setOtp] = React.useState(''); + + return ( + + -} value={otp} onChange={setOtp} length={5} /> + Entered value: {otp} + + ); +} + +const blue = { + 100: '#DAECFF', + 200: '#80BFFF', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E5EAF2', + 200: '#DAE2ED', + 300: '#C7D0DD', + 400: '#B0B8C4', + 500: '#9DA8B7', + 600: '#6B7A90', + 700: '#434D5B', + 800: '#303740', + 900: '#1C2025', +}; + +const InputElement = styled('input')( + ({ theme }) => ` + width: 40px; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.5; + padding: 8px 0px; + border-radius: 8px; + text-align: center; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; + box-shadow: 0px 2px 4px ${ + theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)' + }; + + &:hover { + border-color: ${blue[400]}; + } + + &:focus { + border-color: ${blue[400]}; + box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]}; + } + + // firefox + &:focus-visible { + outline: 0; + } +`, +); diff --git a/docs/data/base/components/input/OTPInput.tsx b/docs/data/base/components/input/OTPInput.tsx new file mode 100644 index 00000000000000..16342a4935cf6d --- /dev/null +++ b/docs/data/base/components/input/OTPInput.tsx @@ -0,0 +1,245 @@ +import * as React from 'react'; +import { Input as BaseInput } from '@mui/base/Input'; +import { Box, styled } from '@mui/system'; + +function OTP({ + separator, + length, + value, + onChange, +}: { + separator: React.ReactNode; + length: number; + value: string; + onChange: React.Dispatch>; +}) { + const inputRefs = React.useRef(new Array(length).fill(null)); + + const focusInput = (targetIndex: number) => { + const targetInput = inputRefs.current[targetIndex]; + targetInput.focus(); + }; + + const selectInput = (targetIndex: number) => { + const targetInput = inputRefs.current[targetIndex]; + targetInput.select(); + }; + + const handleKeyDown = ( + event: React.KeyboardEvent, + currentIndex: number, + ) => { + switch (event.key) { + case 'ArrowUp': + case 'ArrowDown': + case ' ': + event.preventDefault(); + break; + case 'ArrowLeft': + event.preventDefault(); + if (currentIndex > 0) { + focusInput(currentIndex - 1); + selectInput(currentIndex - 1); + } + break; + case 'ArrowRight': + event.preventDefault(); + if (currentIndex < length - 1) { + focusInput(currentIndex + 1); + selectInput(currentIndex + 1); + } + break; + case 'Delete': + event.preventDefault(); + onChange((prevOtp) => { + const otp = + prevOtp.slice(0, currentIndex) + prevOtp.slice(currentIndex + 1); + return otp; + }); + + break; + case 'Backspace': + event.preventDefault(); + if (currentIndex > 0) { + focusInput(currentIndex - 1); + selectInput(currentIndex - 1); + } + + onChange((prevOtp) => { + const otp = + prevOtp.slice(0, currentIndex) + prevOtp.slice(currentIndex + 1); + return otp; + }); + break; + + default: + break; + } + }; + + const handleChange = ( + event: React.ChangeEvent, + currentIndex: number, + ) => { + const currentValue = event.target.value; + let indexToEnter = 0; + + while (indexToEnter <= currentIndex) { + if (inputRefs.current[indexToEnter].value && indexToEnter < currentIndex) { + indexToEnter += 1; + } else { + break; + } + } + onChange((prev) => { + const otpArray = prev.split(''); + const lastValue = currentValue[currentValue.length - 1]; + otpArray[indexToEnter] = lastValue; + return otpArray.join(''); + }); + if (currentValue !== '') { + if (currentIndex < length - 1) { + focusInput(currentIndex + 1); + } + } + }; + + const handleClick = ( + event: React.MouseEvent, + currentIndex: number, + ) => { + selectInput(currentIndex); + }; + + const handlePaste = ( + event: React.ClipboardEvent, + currentIndex: number, + ) => { + event.preventDefault(); + const clipboardData = event.clipboardData; + + // Check if there is text data in the clipboard + if (clipboardData.types.includes('text/plain')) { + let pastedText = clipboardData.getData('text/plain'); + pastedText = pastedText.substring(0, length).trim(); + let indexToEnter = 0; + + while (indexToEnter <= currentIndex) { + if (inputRefs.current[indexToEnter].value && indexToEnter < currentIndex) { + indexToEnter += 1; + } else { + break; + } + } + + const otpArray = value.split(''); + + for (let i = indexToEnter; i < length; i += 1) { + const lastValue = pastedText[i - indexToEnter] ?? ' '; + otpArray[i] = lastValue; + } + + onChange(otpArray.join('')); + } + }; + + return ( + + {new Array(length).fill(null).map((_, index) => ( + + { + inputRefs.current[index] = ele!; + }, + onKeyDown: (event) => handleKeyDown(event, index), + onChange: (event) => handleChange(event, index), + onClick: (event) => handleClick(event, index), + onPaste: (event) => handlePaste(event, index), + value: value[index] ?? '', + }, + }} + /> + {index === length - 1 ? null : separator} + + ))} + + ); +} + +export default function OTPInput() { + const [otp, setOtp] = React.useState(''); + + return ( + + -} value={otp} onChange={setOtp} length={5} /> + Entered value: {otp} + + ); +} + +const blue = { + 100: '#DAECFF', + 200: '#80BFFF', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', + 700: '#0059B2', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E5EAF2', + 200: '#DAE2ED', + 300: '#C7D0DD', + 400: '#B0B8C4', + 500: '#9DA8B7', + 600: '#6B7A90', + 700: '#434D5B', + 800: '#303740', + 900: '#1C2025', +}; + +const InputElement = styled('input')( + ({ theme }) => ` + width: 40px; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.5; + padding: 8px 0px; + border-radius: 8px; + text-align: center; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; + box-shadow: 0px 2px 4px ${ + theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)' + }; + + &:hover { + border-color: ${blue[400]}; + } + + &:focus { + border-color: ${blue[400]}; + box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]}; + } + + // firefox + &:focus-visible { + outline: 0; + } +`, +); diff --git a/docs/data/base/components/input/OTPInput.tsx.preview b/docs/data/base/components/input/OTPInput.tsx.preview new file mode 100644 index 00000000000000..9e5f02b24737cc --- /dev/null +++ b/docs/data/base/components/input/OTPInput.tsx.preview @@ -0,0 +1,2 @@ +-} value={otp} onChange={setOtp} length={5} /> +Entered value: {otp} \ No newline at end of file diff --git a/docs/data/base/components/input/input.md b/docs/data/base/components/input/input.md index 3e0ef2a7679d5d..5134081bc1f995 100644 --- a/docs/data/base/components/input/input.md +++ b/docs/data/base/components/input/input.md @@ -134,3 +134,11 @@ To set minimum and maximum sizes, add the `minRows` and `maxRows` props. The following demo shows how to insert a Textarea Autosize component into an Input so that its height grows with the length of the content: {{"demo": "InputMultilineAutosize.js"}} + +## Common examples + +### OTP Input + +The following demo shows how to build a one-time password component using `Input`. + +{{"demo": "OTPInput.js"}} diff --git a/docs/data/base/components/menu/MenuIntroduction/css/index.js b/docs/data/base/components/menu/MenuIntroduction/css/index.js index a57a0205e9a7e8..8642947eea37c1 100644 --- a/docs/data/base/components/menu/MenuIntroduction/css/index.js +++ b/docs/data/base/components/menu/MenuIntroduction/css/index.js @@ -1,9 +1,12 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import { Menu } from '@mui/base/Menu'; import { MenuItem, menuItemClasses } from '@mui/base/MenuItem'; import { MenuButton } from '@mui/base/MenuButton'; import { Dropdown } from '@mui/base/Dropdown'; import { useTheme } from '@mui/system'; +import { CssTransition } from '@mui/base/Transitions'; +import { PopupContext } from '@mui/base/Unstable_Popup'; export default function MenuIntroduction() { const createHandleMenuClick = (menuItem) => { @@ -18,6 +21,9 @@ export default function MenuIntroduction() { +
    + + ); +}); + +Listbox.propTypes = { + ownerState: PropTypes.object.isRequired, +}; + const cyan = { 50: '#E9F8FC', 100: '#BDEBF4', @@ -97,6 +130,26 @@ function Styles() { border: 1px solid ${isDarkMode ? grey[700] : grey[200]}; color: ${isDarkMode ? grey[300] : grey[900]}; box-shadow: 0px 4px 30px ${isDarkMode ? grey[900] : grey[200]}; + + .closed & { + opacity: 0; + transform: scale(0.95, 0.8); + transition: opacity 200ms ease-in, transform 200ms ease-in; + } + + .open & { + opacity: 1; + transform: scale(1, 1); + transition: opacity 100ms ease-out, transform 100ms cubic-bezier(0.43, 0.29, 0.37, 1.48); + } + + .placement-top & { + transform-origin: bottom; + } + + .placement-bottom & { + transform-origin: top; + } } .CustomMenuIntroduction--item { @@ -111,7 +164,7 @@ function Styles() { border-bottom: none; } - .CustomMenuIntroduction--item.${menuItemClasses.focusVisible} { + .CustomMenuIntroduction--item:focus { outline: 3px solid ${isDarkMode ? cyan[600] : cyan[200]}; background-color: ${isDarkMode ? grey[800] : grey[100]}; color: ${isDarkMode ? grey[300] : grey[900]}; @@ -121,11 +174,6 @@ function Styles() { color: ${isDarkMode ? grey[700] : grey[400]}; } - .CustomMenuIntroduction--item:hover:not(.${menuItemClasses.disabled}) { - background-color: ${isDarkMode ? cyan[800] : cyan[50]}; - color: ${isDarkMode ? grey[300] : grey[900]}; - } - .TriggerButtonIntroduction { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; @@ -156,7 +204,6 @@ function Styles() { } } - .CustomMenuIntroduction { z-index: 1; } diff --git a/docs/data/base/components/menu/MenuIntroduction/css/index.tsx b/docs/data/base/components/menu/MenuIntroduction/css/index.tsx index 00a011e014066e..cf0951e09cd2d1 100644 --- a/docs/data/base/components/menu/MenuIntroduction/css/index.tsx +++ b/docs/data/base/components/menu/MenuIntroduction/css/index.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; -import { Menu } from '@mui/base/Menu'; +import { Menu, MenuListboxSlotProps } from '@mui/base/Menu'; import { MenuItem, menuItemClasses } from '@mui/base/MenuItem'; import { MenuButton } from '@mui/base/MenuButton'; import { Dropdown } from '@mui/base/Dropdown'; import { useTheme } from '@mui/system'; +import { CssTransition } from '@mui/base/Transitions'; +import { PopupContext } from '@mui/base/Unstable_Popup'; export default function MenuIntroduction() { const createHandleMenuClick = (menuItem: string) => { @@ -18,6 +20,9 @@ export default function MenuIntroduction() { , +) { + const { ownerState, ...other } = props; + const popupContext = React.useContext(PopupContext); + + if (popupContext == null) { + throw new Error( + 'The `Listbox` component cannot be rendered outside a `Popup` component', + ); + } + + const verticalPlacement = popupContext.placement.split('-')[0]; + + return ( + +
      + + ); +}); + const cyan = { 50: '#E9F8FC', 100: '#BDEBF4', @@ -97,6 +128,26 @@ function Styles() { border: 1px solid ${isDarkMode ? grey[700] : grey[200]}; color: ${isDarkMode ? grey[300] : grey[900]}; box-shadow: 0px 4px 30px ${isDarkMode ? grey[900] : grey[200]}; + + .closed & { + opacity: 0; + transform: scale(0.95, 0.8); + transition: opacity 200ms ease-in, transform 200ms ease-in; + } + + .open & { + opacity: 1; + transform: scale(1, 1); + transition: opacity 100ms ease-out, transform 100ms cubic-bezier(0.43, 0.29, 0.37, 1.48); + } + + .placement-top & { + transform-origin: bottom; + } + + .placement-bottom & { + transform-origin: top; + } } .CustomMenuIntroduction--item { @@ -111,7 +162,7 @@ function Styles() { border-bottom: none; } - .CustomMenuIntroduction--item.${menuItemClasses.focusVisible} { + .CustomMenuIntroduction--item:focus { outline: 3px solid ${isDarkMode ? cyan[600] : cyan[200]}; background-color: ${isDarkMode ? grey[800] : grey[100]}; color: ${isDarkMode ? grey[300] : grey[900]}; @@ -121,11 +172,6 @@ function Styles() { color: ${isDarkMode ? grey[700] : grey[400]}; } - .CustomMenuIntroduction--item:hover:not(.${menuItemClasses.disabled}) { - background-color: ${isDarkMode ? cyan[800] : cyan[50]}; - color: ${isDarkMode ? grey[300] : grey[900]}; - } - .TriggerButtonIntroduction { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; @@ -156,7 +202,6 @@ function Styles() { } } - .CustomMenuIntroduction { z-index: 1; } diff --git a/docs/data/base/components/menu/MenuIntroduction/system/index.js b/docs/data/base/components/menu/MenuIntroduction/system/index.js index b57e884703335f..ff1f679b61121f 100644 --- a/docs/data/base/components/menu/MenuIntroduction/system/index.js +++ b/docs/data/base/components/menu/MenuIntroduction/system/index.js @@ -1,9 +1,12 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import { Dropdown } from '@mui/base/Dropdown'; import { Menu } from '@mui/base/Menu'; import { MenuButton as BaseMenuButton } from '@mui/base/MenuButton'; import { MenuItem as BaseMenuItem, menuItemClasses } from '@mui/base/MenuItem'; import { styled } from '@mui/system'; +import { CssTransition } from '@mui/base/Transitions'; +import { PopupContext } from '@mui/base/Unstable_Popup'; export default function MenuIntroduction() { const createHandleMenuClick = (menuItem) => { @@ -15,7 +18,7 @@ export default function MenuIntroduction() { return ( My account - + Profile Language settings @@ -68,9 +71,56 @@ const Listbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]}; z-index: 1; + + .closed & { + opacity: 0; + transform: scale(0.95, 0.8); + transition: opacity 200ms ease-in, transform 200ms ease-in; + } + + .open & { + opacity: 1; + transform: scale(1, 1); + transition: opacity 100ms ease-out, transform 100ms cubic-bezier(0.43, 0.29, 0.37, 1.48); + } + + .placement-top & { + transform-origin: bottom; + } + + .placement-bottom & { + transform-origin: top; + } `, ); +const AnimatedListbox = React.forwardRef(function AnimatedListbox(props, ref) { + const { ownerState, ...other } = props; + const popupContext = React.useContext(PopupContext); + + if (popupContext == null) { + throw new Error( + 'The `AnimatedListbox` component cannot be rendered outside a `Popup` component', + ); + } + + const verticalPlacement = popupContext.placement.split('-')[0]; + + return ( + + + + ); +}); + +AnimatedListbox.propTypes = { + ownerState: PropTypes.object.isRequired, +}; + const MenuItem = styled(BaseMenuItem)( ({ theme }) => ` list-style: none; @@ -83,7 +133,7 @@ const MenuItem = styled(BaseMenuItem)( border-bottom: none; } - &.${menuItemClasses.focusVisible} { + &:focus { outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]}; background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; @@ -92,11 +142,6 @@ const MenuItem = styled(BaseMenuItem)( &.${menuItemClasses.disabled} { color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; } - - &:hover:not(.${menuItemClasses.disabled}) { - background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]}; - color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; - } `, ); diff --git a/docs/data/base/components/menu/MenuIntroduction/system/index.tsx b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx index d3ed96e7fd0bb4..77cf182c65a69b 100644 --- a/docs/data/base/components/menu/MenuIntroduction/system/index.tsx +++ b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; import { Dropdown } from '@mui/base/Dropdown'; -import { Menu } from '@mui/base/Menu'; +import { Menu, MenuListboxSlotProps } from '@mui/base/Menu'; import { MenuButton as BaseMenuButton } from '@mui/base/MenuButton'; import { MenuItem as BaseMenuItem, menuItemClasses } from '@mui/base/MenuItem'; import { styled } from '@mui/system'; +import { CssTransition } from '@mui/base/Transitions'; +import { PopupContext } from '@mui/base/Unstable_Popup'; export default function MenuIntroduction() { const createHandleMenuClick = (menuItem: string) => { @@ -15,7 +17,7 @@ export default function MenuIntroduction() { return ( My account - + Profile Language settings @@ -68,9 +70,55 @@ const Listbox = styled('ul')( color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]}; z-index: 1; + + .closed & { + opacity: 0; + transform: scale(0.95, 0.8); + transition: opacity 200ms ease-in, transform 200ms ease-in; + } + + .open & { + opacity: 1; + transform: scale(1, 1); + transition: opacity 100ms ease-out, transform 100ms cubic-bezier(0.43, 0.29, 0.37, 1.48); + } + + .placement-top & { + transform-origin: bottom; + } + + .placement-bottom & { + transform-origin: top; + } `, ); +const AnimatedListbox = React.forwardRef(function AnimatedListbox( + props: MenuListboxSlotProps, + ref: React.ForwardedRef, +) { + const { ownerState, ...other } = props; + const popupContext = React.useContext(PopupContext); + + if (popupContext == null) { + throw new Error( + 'The `AnimatedListbox` component cannot be rendered outside a `Popup` component', + ); + } + + const verticalPlacement = popupContext.placement.split('-')[0]; + + return ( + + + + ); +}); + const MenuItem = styled(BaseMenuItem)( ({ theme }) => ` list-style: none; @@ -83,7 +131,7 @@ const MenuItem = styled(BaseMenuItem)( border-bottom: none; } - &.${menuItemClasses.focusVisible} { + &:focus { outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]}; background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; @@ -92,11 +140,6 @@ const MenuItem = styled(BaseMenuItem)( &.${menuItemClasses.disabled} { color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; } - - &:hover:not(.${menuItemClasses.disabled}) { - background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]}; - color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; - } `, ); diff --git a/docs/data/base/components/menu/MenuIntroduction/system/index.tsx.preview b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx.preview index 7dd86352523212..76021a2873d157 100644 --- a/docs/data/base/components/menu/MenuIntroduction/system/index.tsx.preview +++ b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx.preview @@ -1,6 +1,6 @@ My account - + Profile Language settings diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js index 0269a77e2bc4ae..f3271f0bc53524 100644 --- a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js +++ b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js @@ -6,6 +6,8 @@ import { MenuButton as BaseMenuButton } from '@mui/base/MenuButton'; import { MenuItem as BaseMenuItem } from '@mui/base/MenuItem'; import { Dropdown } from '@mui/base/Dropdown'; import { useTheme } from '@mui/system'; +import { PopupContext } from '@mui/base/Unstable_Popup'; +import { CssTransition } from '@mui/base/Transitions'; function useIsDarkMode() { const theme = useTheme(); @@ -48,6 +50,9 @@ const Menu = React.forwardRef((props, ref) => { { @@ -71,7 +76,7 @@ const Menu = React.forwardRef((props, ref) => { return { ...resolvedSlotProps, className: clsx( - 'text-sm box-border font-sans p-1.5 my-3 mx-0 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 min-w-listbox shadow-md dark:shadow-slate-900', + 'text-sm box-border font-sans p-1.5 my-3 mx-0 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 min-w-listbox shadow-md dark:shadow-slate-900 [.open_&]:opacity-100 [.open_&]:scale-100 transition-[opacity,transform] [.closed_&]:opacity-0 [.closed_&]:scale-90 [.placement-top_&]:origin-bottom [.placement-bottom_&]:origin-top', resolvedSlotProps?.className, ), }; @@ -119,7 +124,7 @@ const MenuItem = React.forwardRef((props, ref) => { { MenuItem.propTypes = { className: PropTypes.string, }; + +const Listbox = React.forwardRef(function Listbox(props, ref) { + const { ownerState, ...other } = props; + const popupContext = React.useContext(PopupContext); + + if (popupContext == null) { + throw new Error( + 'The `Listbox` component cannot be rendered outside a `Popup` component', + ); + } + + const verticalPlacement = popupContext.placement.split('-')[0]; + + return ( + +
        + + ); +}); + +Listbox.propTypes = { + ownerState: PropTypes.object.isRequired, +}; diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx index 268b0a4fe40dac..627a19bacb7d3e 100644 --- a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx +++ b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; import clsx from 'clsx'; -import { Menu as BaseMenu, MenuProps } from '@mui/base/Menu'; +import { Menu as BaseMenu, MenuListboxSlotProps, MenuProps } from '@mui/base/Menu'; import { MenuButton as BaseMenuButton, MenuButtonProps } from '@mui/base/MenuButton'; import { MenuItem as BaseMenuItem, MenuItemProps } from '@mui/base/MenuItem'; import { Dropdown } from '@mui/base/Dropdown'; import { useTheme } from '@mui/system'; +import { PopupContext } from '@mui/base/Unstable_Popup'; +import { CssTransition } from '@mui/base/Transitions'; function useIsDarkMode() { const theme = useTheme(); @@ -48,6 +50,9 @@ const Menu = React.forwardRef((props, ref) => { { @@ -71,7 +76,7 @@ const Menu = React.forwardRef((props, ref) => { return { ...resolvedSlotProps, className: clsx( - 'text-sm box-border font-sans p-1.5 my-3 mx-0 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 min-w-listbox shadow-md dark:shadow-slate-900', + 'text-sm box-border font-sans p-1.5 my-3 mx-0 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 min-w-listbox shadow-md dark:shadow-slate-900 [.open_&]:opacity-100 [.open_&]:scale-100 transition-[opacity,transform] [.closed_&]:opacity-0 [.closed_&]:scale-90 [.placement-top_&]:origin-bottom [.placement-bottom_&]:origin-top', resolvedSlotProps?.className, ), }; @@ -103,10 +108,35 @@ const MenuItem = React.forwardRef((props, ref) => ); }); + +const Listbox = React.forwardRef(function Listbox( + props: MenuListboxSlotProps, + ref: React.ForwardedRef, +) { + const { ownerState, ...other } = props; + const popupContext = React.useContext(PopupContext); + + if (popupContext == null) { + throw new Error( + 'The `Listbox` component cannot be rendered outside a `Popup` component', + ); + } + + const verticalPlacement = popupContext.placement.split('-')[0]; + + return ( + +
          + + ); +}); diff --git a/docs/data/base/components/menu/MenuSimple/css/index.js b/docs/data/base/components/menu/MenuSimple/css/index.js index 5b5f4fc567fba3..d96f4b0be4471b 100644 --- a/docs/data/base/components/menu/MenuSimple/css/index.js +++ b/docs/data/base/components/menu/MenuSimple/css/index.js @@ -113,7 +113,7 @@ function Styles() { border-bottom: none; } - .CustomMenuSimple--item.${menuItemClasses.focusVisible} { + .CustomMenuSimple--item:focus { outline: 3px solid ${isDarkMode ? cyan[600] : cyan[200]}; background-color: ${isDarkMode ? grey[800] : grey[100]}; color: ${isDarkMode ? grey[300] : grey[900]}; @@ -123,11 +123,6 @@ function Styles() { color: ${isDarkMode ? grey[700] : grey[400]}; } - .CustomMenuSimple--item:hover:not(.${menuItemClasses.disabled}) { - background-color: ${isDarkMode ? cyan[800] : cyan[50]}; - color: ${isDarkMode ? grey[300] : grey[900]}; - } - .TriggerButtonSimple { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; diff --git a/docs/data/base/components/menu/MenuSimple/css/index.tsx b/docs/data/base/components/menu/MenuSimple/css/index.tsx index 6307aec0c7a101..215649719dc6d0 100644 --- a/docs/data/base/components/menu/MenuSimple/css/index.tsx +++ b/docs/data/base/components/menu/MenuSimple/css/index.tsx @@ -113,7 +113,7 @@ function Styles() { border-bottom: none; } - .CustomMenuSimple--item.${menuItemClasses.focusVisible} { + .CustomMenuSimple--item:focus { outline: 3px solid ${isDarkMode ? cyan[600] : cyan[200]}; background-color: ${isDarkMode ? grey[800] : grey[100]}; color: ${isDarkMode ? grey[300] : grey[900]}; @@ -123,11 +123,6 @@ function Styles() { color: ${isDarkMode ? grey[700] : grey[400]}; } - .CustomMenuSimple--item:hover:not(.${menuItemClasses.disabled}) { - background-color: ${isDarkMode ? cyan[800] : cyan[50]}; - color: ${isDarkMode ? grey[300] : grey[900]}; - } - .TriggerButtonSimple { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; diff --git a/docs/data/base/components/menu/MenuSimple/system/index.js b/docs/data/base/components/menu/MenuSimple/system/index.js index 3a3d492801aa66..12492f1b227b01 100644 --- a/docs/data/base/components/menu/MenuSimple/system/index.js +++ b/docs/data/base/components/menu/MenuSimple/system/index.js @@ -85,7 +85,7 @@ const MenuItem = styled(BaseMenuItem)( border-bottom: none; } - &.${menuItemClasses.focusVisible} { + &:focus { outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]}; background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; @@ -94,11 +94,6 @@ const MenuItem = styled(BaseMenuItem)( &.${menuItemClasses.disabled} { color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; } - - &:hover:not(.${menuItemClasses.disabled}) { - background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]}; - color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; - } `, ); diff --git a/docs/data/base/components/menu/MenuSimple/system/index.tsx b/docs/data/base/components/menu/MenuSimple/system/index.tsx index 55c5c808dc0f11..6dba263a27a4e1 100644 --- a/docs/data/base/components/menu/MenuSimple/system/index.tsx +++ b/docs/data/base/components/menu/MenuSimple/system/index.tsx @@ -85,7 +85,7 @@ const MenuItem = styled(BaseMenuItem)( border-bottom: none; } - &.${menuItemClasses.focusVisible} { + &:focus { outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]}; background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; @@ -94,11 +94,6 @@ const MenuItem = styled(BaseMenuItem)( &.${menuItemClasses.disabled} { color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; } - - &:hover:not(.${menuItemClasses.disabled}) { - background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]}; - color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; - } `, ); diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.js b/docs/data/base/components/menu/MenuSimple/tailwind/index.js index f10328192e1daf..04e0e19685bc61 100644 --- a/docs/data/base/components/menu/MenuSimple/tailwind/index.js +++ b/docs/data/base/components/menu/MenuSimple/tailwind/index.js @@ -119,7 +119,7 @@ const MenuItem = React.forwardRef((props, ref) => { ((props, ref) => { + return () => { + console.log(`Clicked on ${menuItem}`); + }; + }; + + return ( + + My account + + Profile + + Language settings + + Log out + + + ); +} + +const blue = { + 50: '#F0F7FF', + 100: '#C2E0FF', + 200: '#99CCF3', + 300: '#66B2FF', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E6', + 700: '#0059B3', + 800: '#004C99', + 900: '#003A75', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E5EAF2', + 200: '#DAE2ED', + 300: '#C7D0DD', + 400: '#B0B8C4', + 500: '#9DA8B7', + 600: '#6B7A90', + 700: '#434D5B', + 800: '#303740', + 900: '#1C2025', +}; + +const Listbox = styled('ul')( + ({ theme }) => ` + font-family: 'IBM Plex Sans', sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 6px; + margin: 12px 0; + min-width: 200px; + border-radius: 12px; + overflow: auto; + outline: 0px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]}; + z-index: 1; + + .closed & { + opacity: 0; + transform: scale(0.95, 0.8); + transition: opacity 200ms ease-in, transform 200ms ease-in; + } + + .open & { + opacity: 1; + transform: scale(1, 1); + transition: opacity 100ms ease-out, transform 100ms cubic-bezier(0.43, 0.29, 0.37, 1.48); + } + + .placement-top & { + transform-origin: bottom; + } + + .placement-bottom & { + transform-origin: top; + } + `, +); + +const AnimatedListbox = React.forwardRef(function AnimatedListbox(props, ref) { + const { ownerState, ...other } = props; + const popupContext = React.useContext(PopupContext); + + if (popupContext == null) { + throw new Error( + 'The `AnimatedListbox` component cannot be rendered outside a `Popup` component', + ); + } + + const verticalPlacement = popupContext.placement.split('-')[0]; + + return ( + + + + ); +}); + +AnimatedListbox.propTypes = { + ownerState: PropTypes.object.isRequired, +}; + +const MenuItem = styled(BaseMenuItem)( + ({ theme }) => ` + list-style: none; + padding: 8px; + border-radius: 8px; + cursor: default; + user-select: none; + + &:last-of-type { + border-bottom: none; + } + + &.${menuItemClasses.focusVisible} { + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]}; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + } + + &.${menuItemClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + + &:hover:not(.${menuItemClasses.disabled}) { + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; + } + `, +); + +const MenuButton = styled(BaseMenuButton)( + ({ theme }) => ` + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 600; + font-size: 0.875rem; + line-height: 1.5; + padding: 8px 16px; + border-radius: 8px; + color: white; + transition: all 150ms ease; + cursor: pointer; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; + color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]}; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + + &:hover { + background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]}; + border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]}; + } + + &:active { + background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]}; + } + + &:focus-visible { + box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]}; + outline: none; + } + `, +); diff --git a/docs/data/base/components/menu/MenuTransitions.tsx b/docs/data/base/components/menu/MenuTransitions.tsx new file mode 100644 index 00000000000000..3ceafd9583e4be --- /dev/null +++ b/docs/data/base/components/menu/MenuTransitions.tsx @@ -0,0 +1,181 @@ +import * as React from 'react'; +import { Dropdown } from '@mui/base/Dropdown'; +import { Menu, MenuListboxSlotProps } from '@mui/base/Menu'; +import { MenuButton as BaseMenuButton } from '@mui/base/MenuButton'; +import { MenuItem as BaseMenuItem, menuItemClasses } from '@mui/base/MenuItem'; +import { styled } from '@mui/system'; +import { CssTransition } from '@mui/base/Transitions'; +import { PopupContext } from '@mui/base/Unstable_Popup'; + +export default function MenuTransitions() { + const createHandleMenuClick = (menuItem: string) => { + return () => { + console.log(`Clicked on ${menuItem}`); + }; + }; + + return ( + + My account + + Profile + + Language settings + + Log out + + + ); +} + +const blue = { + 50: '#F0F7FF', + 100: '#C2E0FF', + 200: '#99CCF3', + 300: '#66B2FF', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E6', + 700: '#0059B3', + 800: '#004C99', + 900: '#003A75', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E5EAF2', + 200: '#DAE2ED', + 300: '#C7D0DD', + 400: '#B0B8C4', + 500: '#9DA8B7', + 600: '#6B7A90', + 700: '#434D5B', + 800: '#303740', + 900: '#1C2025', +}; + +const Listbox = styled('ul')( + ({ theme }) => ` + font-family: 'IBM Plex Sans', sans-serif; + font-size: 0.875rem; + box-sizing: border-box; + padding: 6px; + margin: 12px 0; + min-width: 200px; + border-radius: 12px; + overflow: auto; + outline: 0px; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]}; + z-index: 1; + + .closed & { + opacity: 0; + transform: scale(0.95, 0.8); + transition: opacity 200ms ease-in, transform 200ms ease-in; + } + + .open & { + opacity: 1; + transform: scale(1, 1); + transition: opacity 100ms ease-out, transform 100ms cubic-bezier(0.43, 0.29, 0.37, 1.48); + } + + .placement-top & { + transform-origin: bottom; + } + + .placement-bottom & { + transform-origin: top; + } + `, +); + +const AnimatedListbox = React.forwardRef(function AnimatedListbox( + props: MenuListboxSlotProps, + ref: React.ForwardedRef, +) { + const { ownerState, ...other } = props; + const popupContext = React.useContext(PopupContext); + + if (popupContext == null) { + throw new Error( + 'The `AnimatedListbox` component cannot be rendered outside a `Popup` component', + ); + } + + const verticalPlacement = popupContext.placement.split('-')[0]; + + return ( + + + + ); +}); + +const MenuItem = styled(BaseMenuItem)( + ({ theme }) => ` + list-style: none; + padding: 8px; + border-radius: 8px; + cursor: default; + user-select: none; + + &:last-of-type { + border-bottom: none; + } + + &.${menuItemClasses.focusVisible} { + outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]}; + background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; + color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; + } + + &.${menuItemClasses.disabled} { + color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]}; + } + + &:hover:not(.${menuItemClasses.disabled}) { + background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]}; + color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; + } + `, +); + +const MenuButton = styled(BaseMenuButton)( + ({ theme }) => ` + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 600; + font-size: 0.875rem; + line-height: 1.5; + padding: 8px 16px; + border-radius: 8px; + color: white; + transition: all 150ms ease; + cursor: pointer; + background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; + color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]}; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + + &:hover { + background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]}; + border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]}; + } + + &:active { + background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]}; + } + + &:focus-visible { + box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]}; + outline: none; + } + `, +); diff --git a/docs/data/base/components/menu/MenuTransitions.tsx.preview b/docs/data/base/components/menu/MenuTransitions.tsx.preview new file mode 100644 index 00000000000000..76021a2873d157 --- /dev/null +++ b/docs/data/base/components/menu/MenuTransitions.tsx.preview @@ -0,0 +1,10 @@ + + My account + + Profile + + Language settings + + Log out + + \ No newline at end of file diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js index 95f8d5baa713da..1c851e348969c0 100644 --- a/docs/data/base/components/menu/UseMenu.js +++ b/docs/data/base/components/menu/UseMenu.js @@ -123,101 +123,93 @@ function useIsDarkMode() { function Styles() { // Replace this with your app logic for determining dark mode const isDarkMode = useIsDarkMode(); - return ( - - ); + // eslint-disable-next-line react/no-danger + return - ); + // eslint-disable-next-line react/no-danger + return - ); -} diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/css/index.tsx b/docs/data/base/components/slider/UnstyledSliderBasic/css/index.tsx deleted file mode 100644 index 5e17f46294bde9..00000000000000 --- a/docs/data/base/components/slider/UnstyledSliderBasic/css/index.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import * as React from 'react'; -import { useTheme, alpha } from '@mui/system'; -import { Slider, sliderClasses } from '@mui/base/Slider'; - -export default function UnstyledSlider() { - return ( -
          - - - -
          - ); -} - -const cyan = { - 50: '#E9F8FC', - 100: '#BDEBF4', - 200: '#99D8E5', - 300: '#66BACC', - 400: '#1F94AD', - 500: '#0D5463', - 600: '#094855', - 700: '#063C47', - 800: '#043039', - 900: '#022127', -}; - -const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -function useIsDarkMode() { - const theme = useTheme(); - return theme.palette.mode === 'dark'; -} - -function Styles() { - // Replace this with your app logic for determining dark mode - const isDarkMode = useIsDarkMode(); - return ( - - ); -} diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/system/index.js b/docs/data/base/components/slider/UnstyledSliderBasic/system/index.js deleted file mode 100644 index b7bed900ed44c6..00000000000000 --- a/docs/data/base/components/slider/UnstyledSliderBasic/system/index.js +++ /dev/null @@ -1,105 +0,0 @@ -import * as React from 'react'; -import { styled, alpha, Box } from '@mui/system'; -import { Slider as BaseSlider, sliderClasses } from '@mui/base/Slider'; - -export default function UnstyledSlider() { - return ( - - - - - ); -} - -const blue = { - 100: '#DAECFF', - 200: '#99CCF3', - 400: '#3399FF', - 300: '#66B2FF', - 500: '#007FFF', - 600: '#0072E5', - 700: '#0059B3', - 900: '#003A75', -}; - -const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -const Slider = styled(BaseSlider)( - ({ theme }) => ` - color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - height: 6px; - width: 100%; - padding: 16px 0; - display: inline-block; - position: relative; - cursor: pointer; - touch-action: none; - -webkit-tap-highlight-color: transparent; - - &.${sliderClasses.disabled} { - pointer-events: none; - cursor: default; - color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; - opacity: 0.5; - } - - & .${sliderClasses.rail} { - display: block; - position: absolute; - width: 100%; - height: 4px; - border-radius: 2px; - background-color: currentColor; - opacity: 0.4; - } - - & .${sliderClasses.track} { - display: block; - position: absolute; - height: 4px; - border-radius: 2px; - background-color: currentColor; - } - - & .${sliderClasses.thumb} { - position: absolute; - width: 16px; - height: 16px; - margin-left: -6px; - margin-top: -6px; - box-sizing: border-box; - border-radius: 50%; - outline: 0; - border: 3px solid currentColor; - background-color: #fff; - - &:hover{ - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], - 0.3, - )}; - } - - &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]}; - outline: none; - } - - &.${sliderClasses.active} { - box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[600] : blue[300]}; - outline: none; - } - } -`, -); diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx b/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx deleted file mode 100644 index b7bed900ed44c6..00000000000000 --- a/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import * as React from 'react'; -import { styled, alpha, Box } from '@mui/system'; -import { Slider as BaseSlider, sliderClasses } from '@mui/base/Slider'; - -export default function UnstyledSlider() { - return ( - - - - - ); -} - -const blue = { - 100: '#DAECFF', - 200: '#99CCF3', - 400: '#3399FF', - 300: '#66B2FF', - 500: '#007FFF', - 600: '#0072E5', - 700: '#0059B3', - 900: '#003A75', -}; - -const grey = { - 50: '#F3F6F9', - 100: '#E5EAF2', - 200: '#DAE2ED', - 300: '#C7D0DD', - 400: '#B0B8C4', - 500: '#9DA8B7', - 600: '#6B7A90', - 700: '#434D5B', - 800: '#303740', - 900: '#1C2025', -}; - -const Slider = styled(BaseSlider)( - ({ theme }) => ` - color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; - height: 6px; - width: 100%; - padding: 16px 0; - display: inline-block; - position: relative; - cursor: pointer; - touch-action: none; - -webkit-tap-highlight-color: transparent; - - &.${sliderClasses.disabled} { - pointer-events: none; - cursor: default; - color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; - opacity: 0.5; - } - - & .${sliderClasses.rail} { - display: block; - position: absolute; - width: 100%; - height: 4px; - border-radius: 2px; - background-color: currentColor; - opacity: 0.4; - } - - & .${sliderClasses.track} { - display: block; - position: absolute; - height: 4px; - border-radius: 2px; - background-color: currentColor; - } - - & .${sliderClasses.thumb} { - position: absolute; - width: 16px; - height: 16px; - margin-left: -6px; - margin-top: -6px; - box-sizing: border-box; - border-radius: 50%; - outline: 0; - border: 3px solid currentColor; - background-color: #fff; - - &:hover{ - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], - 0.3, - )}; - } - - &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]}; - outline: none; - } - - &.${sliderClasses.active} { - box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[600] : blue[300]}; - outline: none; - } - } -`, -); diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx.preview b/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx.preview deleted file mode 100644 index 5ac4c78edddc6c..00000000000000 --- a/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js b/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js deleted file mode 100644 index 4f6e7fd7a260e6..00000000000000 --- a/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.js +++ /dev/null @@ -1,61 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/system'; -import { Slider } from '@mui/base/Slider'; - -function useIsDarkMode() { - const theme = useTheme(); - return theme.palette.mode === 'dark'; -} - -export default function UnstyledSliderBasic() { - // Replace this with your app logic for determining dark mode - const isDarkMode = useIsDarkMode(); - - return ( -
          - ({ - className: `h-1.5 w-full py-4 inline-block relative touch-none ${ - disabled - ? 'opacity-50 cursor-default pointer-events-none text-slate-300 dark:text-slate-600' - : 'hover:opacity-100 cursor-pointer text-purple-500 dark:text-purple-400' - }`, - }), - rail: { - className: 'block absolute w-full h-1 rounded-sm bg-current opacity-40', - }, - track: { className: 'block absolute h-1 rounded-sm bg-current' }, - thumb: (_, { active, focused }) => ({ - className: `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-3 border-solid border-current bg-white hover:shadow-outline-purple ${ - focused || active ? 'shadow-outline-purple' : '' - }`, - }), - }} - defaultValue={10} - /> - ({ - className: `h-1.5 w-full py-4 inline-block relative touch-none ${ - disabled - ? 'opacity-50 cursor-default pointer-events-none text-slate-300 dark:text-slate-600' - : 'hover:opacity-100 cursor-pointer text-purple-500 dark:text-purple-400' - }`, - }), - rail: { - className: 'block absolute w-full h-1 rounded-sm bg-current opacity-40', - }, - track: { className: 'block absolute h-1 rounded-sm bg-current' }, - thumb: (_, { active, focused }) => ({ - className: `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-3 border-solid border-current bg-white hover:shadow-outline-purple ${ - focused || active ? 'shadow-outline-purple' : '' - }`, - }), - }} - defaultValue={10} - disabled - /> -
          - ); -} diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.tsx b/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.tsx deleted file mode 100644 index 4f6e7fd7a260e6..00000000000000 --- a/docs/data/base/components/slider/UnstyledSliderBasic/tailwind/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/system'; -import { Slider } from '@mui/base/Slider'; - -function useIsDarkMode() { - const theme = useTheme(); - return theme.palette.mode === 'dark'; -} - -export default function UnstyledSliderBasic() { - // Replace this with your app logic for determining dark mode - const isDarkMode = useIsDarkMode(); - - return ( -
          - ({ - className: `h-1.5 w-full py-4 inline-block relative touch-none ${ - disabled - ? 'opacity-50 cursor-default pointer-events-none text-slate-300 dark:text-slate-600' - : 'hover:opacity-100 cursor-pointer text-purple-500 dark:text-purple-400' - }`, - }), - rail: { - className: 'block absolute w-full h-1 rounded-sm bg-current opacity-40', - }, - track: { className: 'block absolute h-1 rounded-sm bg-current' }, - thumb: (_, { active, focused }) => ({ - className: `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-3 border-solid border-current bg-white hover:shadow-outline-purple ${ - focused || active ? 'shadow-outline-purple' : '' - }`, - }), - }} - defaultValue={10} - /> - ({ - className: `h-1.5 w-full py-4 inline-block relative touch-none ${ - disabled - ? 'opacity-50 cursor-default pointer-events-none text-slate-300 dark:text-slate-600' - : 'hover:opacity-100 cursor-pointer text-purple-500 dark:text-purple-400' - }`, - }), - rail: { - className: 'block absolute w-full h-1 rounded-sm bg-current opacity-40', - }, - track: { className: 'block absolute h-1 rounded-sm bg-current' }, - thumb: (_, { active, focused }) => ({ - className: `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-3 border-solid border-current bg-white hover:shadow-outline-purple ${ - focused || active ? 'shadow-outline-purple' : '' - }`, - }), - }} - defaultValue={10} - disabled - /> -
          - ); -} diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js index 0bc9bad1fb1099..187fb60903cc83 100644 --- a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js +++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js @@ -10,7 +10,7 @@ export default function UnstyledSliderIntroduction() { root: { className: 'CustomSlider' }, rail: { className: 'CustomSlider-rail' }, track: { className: 'CustomSlider-track' }, - thumb: { className: 'CustomSlider-thumb', tabIndex: 0 }, + thumb: { className: 'CustomSlider-thumb' }, }} defaultValue={50} /> @@ -21,7 +21,7 @@ export default function UnstyledSliderIntroduction() { track: { className: 'CustomSlider-track' }, thumb: { className: 'CustomSlider-thumb' }, }} - defaultValue={10} + defaultValue={30} disabled /> @@ -67,25 +67,22 @@ function Styles() { ); diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx index 0bc9bad1fb1099..187fb60903cc83 100644 --- a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx +++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx @@ -10,7 +10,7 @@ export default function UnstyledSliderIntroduction() { root: { className: 'CustomSlider' }, rail: { className: 'CustomSlider-rail' }, track: { className: 'CustomSlider-track' }, - thumb: { className: 'CustomSlider-thumb', tabIndex: 0 }, + thumb: { className: 'CustomSlider-thumb' }, }} defaultValue={50} /> @@ -21,7 +21,7 @@ export default function UnstyledSliderIntroduction() { track: { className: 'CustomSlider-track' }, thumb: { className: 'CustomSlider-thumb' }, }} - defaultValue={10} + defaultValue={30} disabled /> @@ -67,25 +67,22 @@ function Styles() { ); diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js index 5583e5ece2d51d..df3b76c80b819e 100644 --- a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js +++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js @@ -6,7 +6,7 @@ export default function UnstyledSliderIntroduction() { return ( - + ); } @@ -37,11 +37,12 @@ const grey = { const Slider = styled(BaseSlider)( ({ theme }) => ` - color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]}; - height: 6px; + color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; + height: 4px; width: 100%; padding: 16px 0; - display: inline-block; + display: inline-flex; + align-items: center; position: relative; cursor: pointer; touch-action: none; @@ -51,7 +52,7 @@ const Slider = styled(BaseSlider)( pointer-events: none; cursor: default; color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; - opacity: 0.5; + opacity: 0.4; } & .${sliderClasses.rail} { @@ -59,49 +60,62 @@ const Slider = styled(BaseSlider)( position: absolute; width: 100%; height: 4px; - border-radius: 2px; + border-radius: 6px; background-color: currentColor; - opacity: 0.4; + opacity: 0.3; } & .${sliderClasses.track} { display: block; position: absolute; height: 4px; - border-radius: 2px; + border-radius: 6px; background-color: currentColor; } & .${sliderClasses.thumb} { + display: flex; + align-items: center; + justify-content: center; position: absolute; - width: 16px; - height: 16px; margin-left: -6px; - margin-top: -6px; + width: 20px; + height: 20px; box-sizing: border-box; border-radius: 50%; outline: 0; - border: 3px solid currentColor; - background-color: #fff; + background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; + transition-property: box-shadow, transform; + transition-timing-function: ease; + transition-duration: 120ms; + transform-origin: center; - &:hover{ - box-shadow: 0 0 0 4px ${alpha( + &:hover { + box-shadow: 0 0 0 6px ${alpha( theme.palette.mode === 'light' ? blue[200] : blue[300], 0.3, )}; } &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]}; + box-shadow: 0 0 0 8px ${alpha( + theme.palette.mode === 'light' ? blue[200] : blue[400], + 0.5, + )}; outline: none; } &.${sliderClasses.active} { - box-shadow: 0 0 0 5px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], + box-shadow: 0 0 0 8px ${alpha( + theme.palette.mode === 'light' ? blue[200] : blue[400], 0.5, )}; outline: none; + transform: scale(1.2); + } + + &.${sliderClasses.disabled} { + background-color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; } } `, diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx index 5583e5ece2d51d..df3b76c80b819e 100644 --- a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx +++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx @@ -6,7 +6,7 @@ export default function UnstyledSliderIntroduction() { return ( - + ); } @@ -37,11 +37,12 @@ const grey = { const Slider = styled(BaseSlider)( ({ theme }) => ` - color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]}; - height: 6px; + color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; + height: 4px; width: 100%; padding: 16px 0; - display: inline-block; + display: inline-flex; + align-items: center; position: relative; cursor: pointer; touch-action: none; @@ -51,7 +52,7 @@ const Slider = styled(BaseSlider)( pointer-events: none; cursor: default; color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; - opacity: 0.5; + opacity: 0.4; } & .${sliderClasses.rail} { @@ -59,49 +60,62 @@ const Slider = styled(BaseSlider)( position: absolute; width: 100%; height: 4px; - border-radius: 2px; + border-radius: 6px; background-color: currentColor; - opacity: 0.4; + opacity: 0.3; } & .${sliderClasses.track} { display: block; position: absolute; height: 4px; - border-radius: 2px; + border-radius: 6px; background-color: currentColor; } & .${sliderClasses.thumb} { + display: flex; + align-items: center; + justify-content: center; position: absolute; - width: 16px; - height: 16px; margin-left: -6px; - margin-top: -6px; + width: 20px; + height: 20px; box-sizing: border-box; border-radius: 50%; outline: 0; - border: 3px solid currentColor; - background-color: #fff; + background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; + transition-property: box-shadow, transform; + transition-timing-function: ease; + transition-duration: 120ms; + transform-origin: center; - &:hover{ - box-shadow: 0 0 0 4px ${alpha( + &:hover { + box-shadow: 0 0 0 6px ${alpha( theme.palette.mode === 'light' ? blue[200] : blue[300], 0.3, )}; } &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]}; + box-shadow: 0 0 0 8px ${alpha( + theme.palette.mode === 'light' ? blue[200] : blue[400], + 0.5, + )}; outline: none; } &.${sliderClasses.active} { - box-shadow: 0 0 0 5px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], + box-shadow: 0 0 0 8px ${alpha( + theme.palette.mode === 'light' ? blue[200] : blue[400], 0.5, )}; outline: none; + transform: scale(1.2); + } + + &.${sliderClasses.disabled} { + background-color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]}; } } `, diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview index 51dde9ce84ae32..8d8d77dbaf79d8 100644 --- a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview +++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx.preview @@ -1,2 +1,2 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js index 02b578ac24ae34..9692d9cc722392 100644 --- a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js +++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js @@ -16,7 +16,7 @@ export default function UnstyledSliderIntroduction() { return (
          - +
          ); } @@ -38,10 +38,10 @@ const Slider = React.forwardRef((props, ref) => { return { ...resolvedSlotProps, className: clsx( - `h-1.5 w-full py-4 inline-block relative touch-none ${ + `h-1.5 w-full py-4 inline-flex items-center relative touch-none ${ ownerState.disabled ? 'opacity-50 cursor-default pointer-events-none text-slate-300 dark:text-slate-600' - : 'hover:opacity-100 cursor-pointer text-purple-500 dark:text-purple-400' + : 'hover:opacity-100 cursor-pointer text-purple-600 dark:text-purple-400' }`, resolvedSlotProps?.className, ), @@ -55,7 +55,7 @@ const Slider = React.forwardRef((props, ref) => { return { ...resolvedSlotProps, className: clsx( - 'block absolute w-full h-1 rounded-sm bg-current opacity-40', + 'block absolute w-full h-[4px] rounded-full bg-current opacity-40', resolvedSlotProps?.className, ), }; @@ -69,7 +69,7 @@ const Slider = React.forwardRef((props, ref) => { return { ...resolvedSlotProps, className: clsx( - 'block absolute h-1 rounded-sm bg-current', + 'block absolute h-[4px] rounded-full bg-current', resolvedSlotProps?.className, ), }; @@ -82,9 +82,9 @@ const Slider = React.forwardRef((props, ref) => { return { ...resolvedSlotProps, className: clsx( - `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-[3px] border-solid border-current bg-white hover:shadow-outline-purple ${ + `absolute w-[20px] h-[20px] -ml-1.5 box-border rounded-full outline-0 bg-current hover:shadow-outline-purple transition ${ focused || active - ? 'shadow-[0_0_0_4px_#e9d5ff] dark:shadow-[0_0_0_4px_#7e22ce] active:shadow-[0_0_0_4px_#d8b4fe] dark:active:shadow-[0_0_0_4px_#9333ea] outline-none' + ? 'shadow-[0_0_0_8px_rgba(192,132,252,0.5)] dark:shadow-[0_0_0_4px_rgba(192,132,252,0.5)] active:shadow-[0_0_0_4px_rgba(192,132,252,0.5)] dark:active:shadow-[0_0_0_4px_rgba(192,132,252,0.5)] scale-[1.2] outline-none' : '' }`, resolvedSlotProps?.className, diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx index c8ceb29a879e24..9e67c54f8cd7d5 100644 --- a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx +++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx @@ -15,7 +15,7 @@ export default function UnstyledSliderIntroduction() { return (
          - +
          ); } @@ -38,10 +38,10 @@ const Slider = React.forwardRef((props, ref) => { return { ...resolvedSlotProps, className: clsx( - `h-1.5 w-full py-4 inline-block relative touch-none ${ + `h-1.5 w-full py-4 inline-flex items-center relative touch-none ${ ownerState.disabled ? 'opacity-50 cursor-default pointer-events-none text-slate-300 dark:text-slate-600' - : 'hover:opacity-100 cursor-pointer text-purple-500 dark:text-purple-400' + : 'hover:opacity-100 cursor-pointer text-purple-600 dark:text-purple-400' }`, resolvedSlotProps?.className, ), @@ -55,7 +55,7 @@ const Slider = React.forwardRef((props, ref) => { return { ...resolvedSlotProps, className: clsx( - 'block absolute w-full h-1 rounded-sm bg-current opacity-40', + 'block absolute w-full h-[4px] rounded-full bg-current opacity-40', resolvedSlotProps?.className, ), }; @@ -69,7 +69,7 @@ const Slider = React.forwardRef((props, ref) => { return { ...resolvedSlotProps, className: clsx( - 'block absolute h-1 rounded-sm bg-current', + 'block absolute h-[4px] rounded-full bg-current', resolvedSlotProps?.className, ), }; @@ -82,9 +82,9 @@ const Slider = React.forwardRef((props, ref) => { return { ...resolvedSlotProps, className: clsx( - `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-[3px] border-solid border-current bg-white hover:shadow-outline-purple ${ + `absolute w-[20px] h-[20px] -ml-1.5 box-border rounded-full outline-0 bg-current hover:shadow-outline-purple transition ${ focused || active - ? 'shadow-[0_0_0_4px_#e9d5ff] dark:shadow-[0_0_0_4px_#7e22ce] active:shadow-[0_0_0_4px_#d8b4fe] dark:active:shadow-[0_0_0_4px_#9333ea] outline-none' + ? 'shadow-[0_0_0_8px_rgba(192,132,252,0.5)] dark:shadow-[0_0_0_4px_rgba(192,132,252,0.5)] active:shadow-[0_0_0_4px_rgba(192,132,252,0.5)] dark:active:shadow-[0_0_0_4px_rgba(192,132,252,0.5)] scale-[1.2] outline-none' : '' }`, resolvedSlotProps?.className, diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview index 51dde9ce84ae32..8d8d77dbaf79d8 100644 --- a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview +++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx.preview @@ -1,2 +1,2 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/base/components/slider/UnstyledSliderValueLabel.tsx.preview b/docs/data/base/components/slider/UnstyledSliderValueLabel.tsx.preview deleted file mode 100644 index d9c718353d621d..00000000000000 --- a/docs/data/base/components/slider/UnstyledSliderValueLabel.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/base/components/slider/VerticalSlider.js b/docs/data/base/components/slider/VerticalSlider.js index 8226aa6b179bb1..e02335da7736a6 100644 --- a/docs/data/base/components/slider/VerticalSlider.js +++ b/docs/data/base/components/slider/VerticalSlider.js @@ -39,52 +39,62 @@ const Slider = styled(BaseSlider)( position: absolute; height: 100%; width: inherit; - border-radius: 2px; + border-radius: 6px; background-color: currentColor; - opacity: 0.4; + opacity: 0.3; } & .${sliderClasses.track} { display: block; position: absolute; width: inherit; - border-radius: 2px; + border-radius: 6px; background-color: currentColor; } & .${sliderClasses.thumb} { + display: flex; + align-items: center; + justify-content: center; position: absolute; - width: 16px; - height: 16px; + width: 20px; + height: 20px; box-sizing: border-box; border-radius: 50%; outline: 0; - border: 3px solid currentColor; - background-color: #fff; + background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; left: 50%; -webkit-transform: translate(-50%, 50%); -moz-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); transform: translate(-50%, 50%); + transition-property: box-shadow, width, height; + transition-timing-function: ease; + transition-duration: 120ms; - &:hover{ - box-shadow: 0 0 0 4px ${alpha( + &:hover { + box-shadow: 0 0 0 6px ${alpha( theme.palette.mode === 'light' ? blue[200] : blue[300], 0.3, )}; } - + &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]}; + box-shadow: 0 0 0 8px ${alpha( + theme.palette.mode === 'light' ? blue[200] : blue[400], + 0.5, + )}; outline: none; } &.${sliderClasses.active} { - box-shadow: 0 0 0 5px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], + box-shadow: 0 0 0 8px ${alpha( + theme.palette.mode === 'light' ? blue[200] : blue[400], 0.5, )}; outline: none; + width: 22px; + height: 22px; } } `, diff --git a/docs/data/base/components/slider/VerticalSlider.tsx b/docs/data/base/components/slider/VerticalSlider.tsx index 8226aa6b179bb1..e02335da7736a6 100644 --- a/docs/data/base/components/slider/VerticalSlider.tsx +++ b/docs/data/base/components/slider/VerticalSlider.tsx @@ -39,52 +39,62 @@ const Slider = styled(BaseSlider)( position: absolute; height: 100%; width: inherit; - border-radius: 2px; + border-radius: 6px; background-color: currentColor; - opacity: 0.4; + opacity: 0.3; } & .${sliderClasses.track} { display: block; position: absolute; width: inherit; - border-radius: 2px; + border-radius: 6px; background-color: currentColor; } & .${sliderClasses.thumb} { + display: flex; + align-items: center; + justify-content: center; position: absolute; - width: 16px; - height: 16px; + width: 20px; + height: 20px; box-sizing: border-box; border-radius: 50%; outline: 0; - border: 3px solid currentColor; - background-color: #fff; + background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]}; left: 50%; -webkit-transform: translate(-50%, 50%); -moz-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); transform: translate(-50%, 50%); + transition-property: box-shadow, width, height; + transition-timing-function: ease; + transition-duration: 120ms; - &:hover{ - box-shadow: 0 0 0 4px ${alpha( + &:hover { + box-shadow: 0 0 0 6px ${alpha( theme.palette.mode === 'light' ? blue[200] : blue[300], 0.3, )}; } - + &.${sliderClasses.focusVisible} { - box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]}; + box-shadow: 0 0 0 8px ${alpha( + theme.palette.mode === 'light' ? blue[200] : blue[400], + 0.5, + )}; outline: none; } &.${sliderClasses.active} { - box-shadow: 0 0 0 5px ${alpha( - theme.palette.mode === 'light' ? blue[200] : blue[300], + box-shadow: 0 0 0 8px ${alpha( + theme.palette.mode === 'light' ? blue[200] : blue[400], 0.5, )}; outline: none; + width: 22px; + height: 22px; } } `, diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js index c36fd514d04e91..897c7f8a1993ce 100644 --- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js +++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js @@ -87,6 +87,7 @@ function Styles() { - - , - ); - const animationRoot = getByTestId('root'); - - const promise = new Promise((resolve) => { - animationRoot.addEventListener('animationend', () => { - // wait for internal event handlers to be called - requestAnimationFrame(() => { - expect(onEnteredSpy.callCount).to.equal(1); - resolve(); - }); - }); - }); - - return promise; - }); }); }); diff --git a/packages/mui-base/src/Transitions/CssAnimation.tsx b/packages/mui-base/src/Transitions/CssAnimation.tsx index 601f91c1262c06..89ac171d31efb4 100644 --- a/packages/mui-base/src/Transitions/CssAnimation.tsx +++ b/packages/mui-base/src/Transitions/CssAnimation.tsx @@ -50,19 +50,15 @@ function CssAnimation(props: CssAnimationProps) { ...other } = props; - const { requestedEnter, onEntering, onEntered, onExiting, onExited } = - useTransitionStateManager(); + const { requestedEnter, onExited } = useTransitionStateManager(); const hasExited = React.useRef(true); React.useEffect(() => { if (requestedEnter && hasExited.current) { - onEntering(); hasExited.current = false; - } else if (!requestedEnter && !hasExited.current) { - onExiting(); } - }, [onEntering, onExiting, requestedEnter]); + }, [requestedEnter]); const handleAnimationEnd = React.useCallback( (event: React.AnimationEvent) => { @@ -70,11 +66,10 @@ function CssAnimation(props: CssAnimationProps) { onExited(); hasExited.current = true; } else if (event.animationName === enterAnimationName) { - onEntered(); hasExited.current = false; } }, - [onExited, onEntered, exitAnimationName, enterAnimationName], + [onExited, exitAnimationName, enterAnimationName], ); return ( diff --git a/packages/mui-base/src/Transitions/CssTransition.test.tsx b/packages/mui-base/src/Transitions/CssTransition.test.tsx index ab79e037b43092..ce9d3b04c651ae 100644 --- a/packages/mui-base/src/Transitions/CssTransition.test.tsx +++ b/packages/mui-base/src/Transitions/CssTransition.test.tsx @@ -6,7 +6,6 @@ import { CssTransition } from './CssTransition'; import { TransitionContext, TransitionContextValue } from '../useTransition'; const onExitedSpy = spy(); -const onEnteredSpy = spy(); function TestTransitionContextProvider(props: { requestEnter: boolean; @@ -15,9 +14,6 @@ function TestTransitionContextProvider(props: { const contextValue: TransitionContextValue = React.useMemo( () => ({ requestedEnter: props.requestEnter, - onEntering: spy(), - onEntered: onEnteredSpy, - onExiting: spy(), onExited: onExitedSpy, registerTransition: () => () => {}, }), @@ -32,7 +28,6 @@ function TestTransitionContextProvider(props: { describe('CssTransition', () => { beforeEach(() => { onExitedSpy.resetHistory(); - onEnteredSpy.resetHistory(); }); const { render, clock } = createRenderer(); @@ -52,7 +47,7 @@ describe('CssTransition', () => { describe('prop: enterClassName, exitClassName', () => { clock.withFakeTimers(); - it('applies enterClassName, then immediately exitClassName when requested to exit', function test() { + it('applies exitClassName when requested to exit', function test() { if (/jsdom/.test(window.navigator.userAgent)) { this.skip(); } @@ -65,13 +60,9 @@ describe('CssTransition', () => { const root = getByTestId('root'); - // briefly after mounting - expect(root).to.have.class('enter'); - expect(root).not.to.have.class('exit'); - - clock.runToLast(); expect(root).to.have.class('exit'); expect(root).not.to.have.class('enter'); + clock.runToLast(); }); it('applies exitClassName, then immediately enterClassName when requested to enter', () => { diff --git a/packages/mui-base/src/Transitions/CssTransition.tsx b/packages/mui-base/src/Transitions/CssTransition.tsx index b8af95c664c069..7c668323fb2cc5 100644 --- a/packages/mui-base/src/Transitions/CssTransition.tsx +++ b/packages/mui-base/src/Transitions/CssTransition.tsx @@ -17,13 +17,6 @@ export interface CssTransitionProps { * is requested to exit. */ exitClassName?: string; - /** - * The name of the CSS property that is transitioned the longest (has the largest `transition-duration`) on enter. - * This is used to determine when the transition has ended. - * If not specified, the transition will be considered finished end when the first property is transitioned. - * If all properties have the same `transition-duration` (or there is just one transitioned property), this can be omitted. - */ - lastTransitionedPropertyOnEnter?: string; /** * The name of the CSS property that is transitioned the longest (has the largest `transition-duration`) on exit. * This is used to determine when the transition has ended. @@ -45,21 +38,22 @@ export interface CssTransitionProps { * * - [CssTransition API](https://mui.com/base-ui/react-transitions/components-api/#css-transition) */ -function CssTransition(props: CssTransitionProps) { +const CssTransition = React.forwardRef(function CssTransition( + props: CssTransitionProps, + forwardedRef: React.ForwardedRef, +) { const { children, className, - lastTransitionedPropertyOnEnter, lastTransitionedPropertyOnExit, enterClassName, exitClassName, ...other } = props; - const { requestedEnter, onEntering, onEntered, onExiting, onExited } = - useTransitionStateManager(); + const { requestedEnter, onExited } = useTransitionStateManager(); - const [isEntering, setIsEntering] = React.useState(!requestedEnter); + const [isEntering, setIsEntering] = React.useState(false); // The `isEntering` state (which is used to determine the right CSS class to apply) // is updated slightly (one animation frame) after the `requestedEnter` state is updated. @@ -71,43 +65,21 @@ function CssTransition(props: CssTransitionProps) { setIsEntering(true); }); } else { - requestAnimationFrame(() => { - setIsEntering(false); - }); + setIsEntering(false); } - }); - - React.useEffect(() => { - if (requestedEnter) { - onEntering(); - } else { - onExiting(); - } - }, [requestedEnter, onEntering, onExiting]); + }, [requestedEnter]); const handleTransitionEnd = React.useCallback( (event: React.TransitionEvent) => { - if (requestedEnter) { - if ( - lastTransitionedPropertyOnEnter == null || - event.propertyName === lastTransitionedPropertyOnEnter - ) { - onEntered(); - } - } else if ( - lastTransitionedPropertyOnExit == null || - event.propertyName === lastTransitionedPropertyOnExit + if ( + !requestedEnter && + (lastTransitionedPropertyOnExit == null || + event.propertyName === lastTransitionedPropertyOnExit) ) { onExited(); } }, - [ - onExited, - onEntered, - requestedEnter, - lastTransitionedPropertyOnEnter, - lastTransitionedPropertyOnExit, - ], + [onExited, requestedEnter, lastTransitionedPropertyOnExit], ); return ( @@ -115,11 +87,12 @@ function CssTransition(props: CssTransitionProps) { onTransitionEnd={handleTransitionEnd} className={clsx(className, isEntering ? enterClassName : exitClassName)} {...other} + ref={forwardedRef} > {children}
); -} +}); CssTransition.propTypes = { children: PropTypes.node, diff --git a/packages/mui-base/src/Unstable_Popup/Popup.test.tsx b/packages/mui-base/src/Unstable_Popup/Popup.test.tsx index f55418788ebec0..7fb9225c73a7c1 100644 --- a/packages/mui-base/src/Unstable_Popup/Popup.test.tsx +++ b/packages/mui-base/src/Unstable_Popup/Popup.test.tsx @@ -16,13 +16,11 @@ const TRANSITION_DURATION = 100; function FakeTransition(props: React.PropsWithChildren<{}>) { const { children: transitionChildren } = props; - const { requestedEnter, onExited, onEntering } = useTransitionStateManager(); + const { requestedEnter, onExited } = useTransitionStateManager(); React.useEffect(() => { let timeoutId: NodeJS.Timeout | null = null; - if (requestedEnter) { - onEntering(); - } else { + if (!requestedEnter) { timeoutId = setTimeout(() => { act(() => onExited()); }, TRANSITION_DURATION); @@ -35,7 +33,7 @@ function FakeTransition(props: React.PropsWithChildren<{}>) { timeoutId = null; } }; - }, [requestedEnter, onExited, onEntering]); + }, [requestedEnter, onExited]); return
{transitionChildren}
; } @@ -295,12 +293,12 @@ describe('', () => { }); }); - describe('prop: withTransition', () => { + describe('transitions', () => { clock.withFakeTimers(); it('should work', async () => { const { queryByRole, getByRole, setProps } = render( - + Hello World @@ -336,7 +334,7 @@ describe('', () => { - +

Hello World

@@ -387,12 +385,12 @@ describe('', () => { }); }); - describe('display', () => { + describe('visibility', () => { clock.withFakeTimers(); - it('should keep display:none when not toggled and transition/keepMounted/disablePortal props are set', async () => { + it('should keep visibility:hidden when not toggled and transition/keepMounted/disablePortal props are set', async () => { const { getByRole, setProps } = render( - + Hello World diff --git a/packages/mui-base/src/Unstable_Popup/Popup.tsx b/packages/mui-base/src/Unstable_Popup/Popup.tsx index a976503fc4ea03..0b0a90cfde1dc9 100644 --- a/packages/mui-base/src/Unstable_Popup/Popup.tsx +++ b/packages/mui-base/src/Unstable_Popup/Popup.tsx @@ -16,10 +16,10 @@ import { } from '@mui/utils'; import { unstable_composeClasses as composeClasses } from '../composeClasses'; import { Portal } from '../Portal'; -import { useSlotProps } from '../utils'; +import { useSlotProps, WithOptionalOwnerState } from '../utils'; import { useClassNamesOverride } from '../utils/ClassNameConfigurator'; import { getPopupUtilityClass } from './popupClasses'; -import { PopupOwnerState, PopupProps } from './Popup.types'; +import { PopupOwnerState, PopupProps, PopupRootSlotProps } from './Popup.types'; import { useTransitionTrigger, TransitionContext } from '../useTransition'; import { PopupContext, PopupContextValue } from './PopupContext'; @@ -72,7 +72,6 @@ const Popup = React.forwardRef(function Popup = useSlotProps({ elementType: Root, externalSlotProps: slotProps.root, externalForwardedProps: other, @@ -195,7 +193,7 @@ Popup.propTypes /* remove-proptypes */ = { disablePortal: PropTypes.bool, /** * If `true`, the popup will exist in the DOM even if it's closed. - * Its visibility will be controlled by the `display` CSS property. + * Its visibility will be controlled by the `visibility` CSS property. * * Otherwise, a closed popup will be removed from the DOM. * @@ -285,15 +283,6 @@ Popup.propTypes /* remove-proptypes */ = { * @see https://floating-ui.com/docs/computePosition#strategy */ strategy: PropTypes.oneOf(['absolute', 'fixed']), - /** - * If `true`, the popup will not disappear immediately when it needs to be closed - * but wait until the exit transition has finished. - * In such a case, a function form of `children` must be used and `onExited` - * callback function must be called when the transition or animation finish. - * - * @default false - */ - withTransition: PropTypes.bool, } as any; export { Popup }; diff --git a/packages/mui-base/src/Unstable_Popup/Popup.types.ts b/packages/mui-base/src/Unstable_Popup/Popup.types.ts index ae78c8a34b2279..0f94e70b98dad6 100644 --- a/packages/mui-base/src/Unstable_Popup/Popup.types.ts +++ b/packages/mui-base/src/Unstable_Popup/Popup.types.ts @@ -43,7 +43,7 @@ export interface PopupOwnProps { disablePortal?: boolean; /** * If `true`, the popup will exist in the DOM even if it's closed. - * Its visibility will be controlled by the `display` CSS property. + * Its visibility will be controlled by the `visibility` CSS property. * * Otherwise, a closed popup will be removed from the DOM. * @@ -103,15 +103,6 @@ export interface PopupOwnProps { * @see https://floating-ui.com/docs/computePosition#strategy */ strategy?: PopupStrategy; - /** - * If `true`, the popup will not disappear immediately when it needs to be closed - * but wait until the exit transition has finished. - * In such a case, a function form of `children` must be used and `onExited` - * callback function must be called when the transition or animation finish. - * - * @default false - */ - withTransition?: boolean; } export interface PopupSlots { @@ -142,5 +133,12 @@ export interface PopupOwnerState extends PopupOwnProps { placement: PopupPlacement; finalPlacement: PopupPlacement; strategy: PopupStrategy; - withTransition: boolean; } + +export type PopupRootSlotProps = { + className?: string; + children?: React.ReactNode; + ownerState: PopupOwnerState; + style: React.CSSProperties; + role: React.AriaRole; +}; diff --git a/packages/mui-base/src/Unstable_Popup/index.ts b/packages/mui-base/src/Unstable_Popup/index.ts index d352f36e412402..2a4873a767fcad 100644 --- a/packages/mui-base/src/Unstable_Popup/index.ts +++ b/packages/mui-base/src/Unstable_Popup/index.ts @@ -2,3 +2,4 @@ export { Popup as Unstable_Popup } from './Popup'; export * from './Popup.types'; export * from './popupClasses'; +export * from './PopupContext'; diff --git a/packages/mui-base/src/index.js b/packages/mui-base/src/index.js index 3799770b696df0..0fdf181c5a03bb 100644 --- a/packages/mui-base/src/index.js +++ b/packages/mui-base/src/index.js @@ -1,4 +1,3 @@ -'use client'; export * from './utils'; export * from './Badge'; export * from './Button'; diff --git a/packages/mui-base/src/unstable_useModal/useModal.ts b/packages/mui-base/src/unstable_useModal/useModal.ts index dc877903af81c7..3166acd289d6eb 100644 --- a/packages/mui-base/src/unstable_useModal/useModal.ts +++ b/packages/mui-base/src/unstable_useModal/useModal.ts @@ -54,7 +54,7 @@ export function useModal(parameters: UseModalParameters): UseModalReturnValue { // @ts-ignore internal logic const modal = React.useRef<{ modalRef: HTMLDivElement; mount: HTMLElement }>({}); - const mountNodeRef = React.useRef(null); + const mountNodeRef = React.useRef(null); const modalRef = React.useRef(null); const handleRef = useForkRef(modalRef, rootRef); const [exited, setExited] = React.useState(!open); diff --git a/packages/mui-base/src/unstable_useNumberInput/numberInputReducer.ts b/packages/mui-base/src/unstable_useNumberInput/numberInputReducer.ts index f3fbc18ba9fbfd..0ccb4c8748c73a 100644 --- a/packages/mui-base/src/unstable_useNumberInput/numberInputReducer.ts +++ b/packages/mui-base/src/unstable_useNumberInput/numberInputReducer.ts @@ -5,13 +5,13 @@ import { StepDirection, } from './useNumberInput.types'; import { NumberInputActionTypes } from './numberInputAction.types'; -import { clamp, isNumber } from './utils'; +import { clampStepwise, isNumber } from './utils'; // extracted from handleValueChange function getClampedValues(rawValue: number | undefined, context: NumberInputActionContext) { const { min, max, step } = context; - const clampedValue = rawValue === undefined ? '' : clamp(rawValue, min, max, step); + const clampedValue = rawValue === undefined ? '' : clampStepwise(rawValue, min, max, step); const newInputValue = clampedValue === undefined ? '' : String(clampedValue); diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts index 7d01f9b15f2f96..e5ee54ca792c53 100644 --- a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts +++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts @@ -19,7 +19,7 @@ import { UseNumberInputReturnValue, StepDirection, } from './useNumberInput.types'; -import { clamp, isNumber } from './utils'; +import { clampStepwise, isNumber } from './utils'; const STEP_KEYS = ['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown']; @@ -132,7 +132,7 @@ export function useNumberInput(parameters: UseNumberInputParameters): UseNumberI newValue = val; setDirtyValue(''); } else { - newValue = clamp(val, min, max, step); + newValue = clampStepwise(val, min, max, step); setDirtyValue(String(newValue)); } diff --git a/packages/mui-base/src/unstable_useNumberInput/utils.test.ts b/packages/mui-base/src/unstable_useNumberInput/utils.test.ts index 213294e133bf95..c01da437fbd511 100644 --- a/packages/mui-base/src/unstable_useNumberInput/utils.test.ts +++ b/packages/mui-base/src/unstable_useNumberInput/utils.test.ts @@ -1,24 +1,24 @@ import { expect } from 'chai'; -import { clamp, isNumber } from './utils'; +import { clampStepwise, isNumber } from './utils'; describe('utils', () => { - it('clamp: clamps a value based on min and max', () => { - expect(clamp(1, 2, 4)).to.equal(2); - expect(clamp(5, 2, 4)).to.equal(4); - expect(clamp(-5, -1, 5)).to.equal(-1); + it('clampStepwise: clamps a value based on min and max', () => { + expect(clampStepwise(1, 2, 4)).to.equal(2); + expect(clampStepwise(5, 2, 4)).to.equal(4); + expect(clampStepwise(-5, -1, 5)).to.equal(-1); }); - it('clamp: clamps a value between min and max and on a valid step', () => { - expect(clamp(2, -15, 15, 3)).to.equal(3); - expect(clamp(-1, -15, 15, 3)).to.equal(0); - expect(clamp(5, -15, 15, 3)).to.equal(6); - expect(clamp(-5, -15, 15, 3)).to.equal(-6); - expect(clamp(-55, -15, 15, 3)).to.equal(-15); - expect(clamp(57, -15, 15, 3)).to.equal(15); - expect(clamp(3, -20, 20, 5)).to.equal(5); - expect(clamp(2, -20, 20, 5)).to.equal(0); - expect(clamp(8, -20, 20, 5)).to.equal(10); - expect(clamp(-7, -20, 20, 5)).to.equal(-5); + it('clampStepwise: clamps a value between min and max and on a valid step', () => { + expect(clampStepwise(2, -15, 15, 3)).to.equal(3); + expect(clampStepwise(-1, -15, 15, 3)).to.equal(0); + expect(clampStepwise(5, -15, 15, 3)).to.equal(6); + expect(clampStepwise(-5, -15, 15, 3)).to.equal(-6); + expect(clampStepwise(-55, -15, 15, 3)).to.equal(-15); + expect(clampStepwise(57, -15, 15, 3)).to.equal(15); + expect(clampStepwise(3, -20, 20, 5)).to.equal(5); + expect(clampStepwise(2, -20, 20, 5)).to.equal(0); + expect(clampStepwise(8, -20, 20, 5)).to.equal(10); + expect(clampStepwise(-7, -20, 20, 5)).to.equal(-5); }); it('isNumber: rejects NaN', () => { diff --git a/packages/mui-base/src/unstable_useNumberInput/utils.ts b/packages/mui-base/src/unstable_useNumberInput/utils.ts index c20907be5b683a..b9d44c06bd2fed 100644 --- a/packages/mui-base/src/unstable_useNumberInput/utils.ts +++ b/packages/mui-base/src/unstable_useNumberInput/utils.ts @@ -1,19 +1,13 @@ -function simpleClamp( - val: number, - min: number = Number.MIN_SAFE_INTEGER, - max: number = Number.MAX_SAFE_INTEGER, -): number { - return Math.max(min, Math.min(val, max)); -} +import { clamp } from '@mui/utils'; -export function clamp( +export function clampStepwise( val: number, min: number = Number.MIN_SAFE_INTEGER, max: number = Number.MAX_SAFE_INTEGER, stepProp: number = NaN, ): number { if (Number.isNaN(stepProp)) { - return simpleClamp(val, min, max); + return clamp(val, min, max); } const step = stepProp || 1; @@ -23,10 +17,10 @@ export function clamp( const positivity = Math.sign(remainder); if (Math.abs(remainder) > step / 2) { - return simpleClamp(val + positivity * (step - Math.abs(remainder)), min, max); + return clamp(val + positivity * (step - Math.abs(remainder)), min, max); } - return simpleClamp(val - positivity * Math.abs(remainder), min, max); + return clamp(val - positivity * Math.abs(remainder), min, max); } export function isNumber(val: unknown): val is number { diff --git a/packages/mui-base/src/useAutocomplete/index.js b/packages/mui-base/src/useAutocomplete/index.js index 7fea413747e9c0..1c769dc17cdad7 100644 --- a/packages/mui-base/src/useAutocomplete/index.js +++ b/packages/mui-base/src/useAutocomplete/index.js @@ -1,2 +1 @@ -'use client'; export * from './useAutocomplete'; diff --git a/packages/mui-base/src/useCompound/useCompoundItem.ts b/packages/mui-base/src/useCompound/useCompoundItem.ts index 6efa5a34a4ed1d..05f28a0d16e9e4 100644 --- a/packages/mui-base/src/useCompound/useCompoundItem.ts +++ b/packages/mui-base/src/useCompound/useCompoundItem.ts @@ -11,7 +11,7 @@ export interface UseCompoundItemReturnValue { /** * The unique key for the child component. * If the id was provided to `useCompoundItem`, this will be the same value. - * Otherwise, this will be a value generated by the `missingKeyGenerator`. + * Otherwise, this will be a value generated by the `id` function. */ id: Key | undefined; /** @@ -30,10 +30,9 @@ export interface UseCompoundItemReturnValue { * * @param id A unique key for the child component. If the `id` is `undefined`, the registration logic will not run (this can sometimes be the case during SSR). * This can be either a value, or a function that generates a value based on already registered siblings' ids. - * @param itemMetadata Arbitrary metadata to pass to the parent component. This should be a stable reference (e.g. a memoized object), to avoid unnecessary re-registrations. - * @param missingKeyGenerator A function that generates a unique id for the item. - * It is called with the set of the ids of all the items that have already been registered. + * If a function, it's called with the set of the ids of all the items that have already been registered. * Return `existingKeys.size` if you want to use the index of the new item as the id. + * @param itemMetadata Arbitrary metadata to pass to the parent component. This should be a stable reference (e.g. a memoized object), to avoid unnecessary re-registrations. * * @ignore - internal hook. */ diff --git a/packages/mui-base/src/useCompound/useCompoundParent.ts b/packages/mui-base/src/useCompound/useCompoundParent.ts index 61826f1e3392f2..61aa53700cc3bd 100644 --- a/packages/mui-base/src/useCompound/useCompoundParent.ts +++ b/packages/mui-base/src/useCompound/useCompoundParent.ts @@ -4,7 +4,6 @@ import * as React from 'react'; interface RegisterItemReturnValue { /** * The id of the item. - * If the `id` was `undefined`, an id from the `missingKeyGenerator` will be used. */ id: Key; /** diff --git a/packages/mui-base/src/useDropdown/dropdownReducer.ts b/packages/mui-base/src/useDropdown/dropdownReducer.ts index f2a0269eb44d67..66ee1a28aa5fb0 100644 --- a/packages/mui-base/src/useDropdown/dropdownReducer.ts +++ b/packages/mui-base/src/useDropdown/dropdownReducer.ts @@ -3,15 +3,15 @@ import { DropdownAction, DropdownActionTypes, DropdownState } from './useDropdow export function dropdownReducer(state: DropdownState, action: DropdownAction): DropdownState { switch (action.type) { case DropdownActionTypes.blur: - return { open: false }; + return { open: false, changeReason: action.event }; case DropdownActionTypes.escapeKeyDown: - return { open: false }; + return { open: false, changeReason: action.event }; case DropdownActionTypes.toggle: - return { open: !state.open }; + return { open: !state.open, changeReason: action.event }; case DropdownActionTypes.open: - return { open: true }; + return { open: true, changeReason: action.event }; case DropdownActionTypes.close: - return { open: false }; + return { open: false, changeReason: action.event }; default: throw new Error(`Unhandled action`); } diff --git a/packages/mui-base/src/useDropdown/useDropdown.ts b/packages/mui-base/src/useDropdown/useDropdown.ts index e55186cc0dfbd1..f6b1fc1be5e11c 100644 --- a/packages/mui-base/src/useDropdown/useDropdown.ts +++ b/packages/mui-base/src/useDropdown/useDropdown.ts @@ -25,7 +25,10 @@ export function useDropdown(parameters: UseDropdownParameters = {}) { const handleStateChange: StateChangeCallback = React.useCallback( (event, field, value, reason) => { if (field === 'open') { - onOpenChange?.(event as React.MouseEvent | React.KeyboardEvent | React.FocusEvent, value); + onOpenChange?.( + event as React.MouseEvent | React.KeyboardEvent | React.FocusEvent, + value as boolean, + ); } lastActionType.current = reason; @@ -40,7 +43,9 @@ export function useDropdown(parameters: UseDropdownParameters = {}) { const [state, dispatch] = useControllableReducer({ controlledProps, - initialState: defaultOpen ? { open: true } : { open: false }, + initialState: defaultOpen + ? { open: true, changeReason: null } + : { open: false, changeReason: null }, onStateChange: handleStateChange, reducer: dropdownReducer, componentName, diff --git a/packages/mui-base/src/useDropdown/useDropdown.types.ts b/packages/mui-base/src/useDropdown/useDropdown.types.ts index 568e784a0a3b30..3118ca97913286 100644 --- a/packages/mui-base/src/useDropdown/useDropdown.types.ts +++ b/packages/mui-base/src/useDropdown/useDropdown.types.ts @@ -76,4 +76,7 @@ export type DropdownAction = | DropdownOpenAction | DropdownCloseAction; -export type DropdownState = { open: boolean }; +export type DropdownState = { + open: boolean; + changeReason: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null; +}; diff --git a/packages/mui-base/src/useList/listActions.types.ts b/packages/mui-base/src/useList/listActions.types.ts index e9ff658d5bc0bb..848858100c775f 100644 --- a/packages/mui-base/src/useList/listActions.types.ts +++ b/packages/mui-base/src/useList/listActions.types.ts @@ -6,6 +6,7 @@ export const ListActionTypes = { itemsChange: 'list:itemsChange', keyDown: 'list:keyDown', resetHighlight: 'list:resetHighlight', + highlightLast: 'list:highlightLast', textNavigation: 'list:textNavigation', clearSelection: 'list:clearSelection', } as const; @@ -56,6 +57,11 @@ interface ResetHighlightAction { event: React.SyntheticEvent | null; } +interface HighlightLastAction { + type: typeof ListActionTypes.highlightLast; + event: React.SyntheticEvent | null; +} + interface ClearSelectionAction { type: typeof ListActionTypes.clearSelection; } @@ -71,5 +77,6 @@ export type ListAction = | ItemsChangeAction | KeyDownAction | ResetHighlightAction + | HighlightLastAction | TextNavigationAction | ClearSelectionAction; diff --git a/packages/mui-base/src/useList/listReducer.test.ts b/packages/mui-base/src/useList/listReducer.test.ts index 047f719b30b169..873be0f0f7430e 100644 --- a/packages/mui-base/src/useList/listReducer.test.ts +++ b/packages/mui-base/src/useList/listReducer.test.ts @@ -1143,6 +1143,62 @@ describe('listReducer', () => { }); }); + describe('action: highlightLast', () => { + it('highlights the last item', () => { + const state: ListState = { + highlightedValue: 'one', + selectedValues: [], + }; + + const action: ListReducerAction = { + type: ListActionTypes.highlightLast, + event: null, + context: { + items: ['one', 'two', 'three'], + disableListWrap: false, + disabledItemsFocusable: false, + focusManagement: 'DOM', + isItemDisabled: () => false, + itemComparer: (o, v) => o === v, + getItemAsString: (option) => option, + orientation: 'vertical', + pageSize: 5, + selectionMode: 'none', + }, + }; + + const result = listReducer(state, action); + expect(result.highlightedValue).to.equal('three'); + }); + + it('highlights the last non-disabled item', () => { + const state: ListState = { + highlightedValue: 'one', + selectedValues: [], + }; + + const action: ListReducerAction = { + type: ListActionTypes.highlightLast, + event: null, + context: { + items: ['one', 'two', 'three'], + disableListWrap: false, + disabledItemsFocusable: false, + focusManagement: 'DOM', + isItemDisabled: (item) => item === 'three', + itemComparer: (o, v) => o === v, + getItemAsString: (option) => option, + orientation: 'vertical', + pageSize: 5, + selectionMode: 'none', + }, + }; + + const result = listReducer(state, action); + expect(result.highlightedValue).to.equal('two'); + }); + }); + describe('action: clearSelection', () => { it('clears the selection', () => { const state: ListState = { diff --git a/packages/mui-base/src/useList/listReducer.ts b/packages/mui-base/src/useList/listReducer.ts index ad32bdbafa8c50..975d692834e2f8 100644 --- a/packages/mui-base/src/useList/listReducer.ts +++ b/packages/mui-base/src/useList/listReducer.ts @@ -431,6 +431,16 @@ function handleResetHighlight>( }; } +function handleHighlightLast>( + state: State, + context: ListActionContext, +) { + return { + ...state, + highlightedValue: moveHighlight(null, 'end', context), + }; +} + function handleClearSelection>( state: State, context: ListActionContext, @@ -461,6 +471,8 @@ export function listReducer>( return handleItemsChange(action.items, action.previousItems, state, context); case ListActionTypes.resetHighlight: return handleResetHighlight(state, context); + case ListActionTypes.highlightLast: + return handleHighlightLast(state, context); case ListActionTypes.clearSelection: return handleClearSelection(state, context); default: diff --git a/packages/mui-base/src/useMenu/menuReducer.ts b/packages/mui-base/src/useMenu/menuReducer.ts index 56478d8e456975..74ffc00361bbe0 100644 --- a/packages/mui-base/src/useMenu/menuReducer.ts +++ b/packages/mui-base/src/useMenu/menuReducer.ts @@ -11,7 +11,10 @@ export function menuReducer( action: ActionWithContext, MenuActionContext>, ) { if (action.type === ListActionTypes.itemHover) { - return state; + return { + ...state, + highlightedValue: action.item, + }; } const newState = listReducer(state, action); diff --git a/packages/mui-base/src/useMenu/useMenu.ts b/packages/mui-base/src/useMenu/useMenu.ts index 456f34b4ac8483..aa4215ee4b3b92 100644 --- a/packages/mui-base/src/useMenu/useMenu.ts +++ b/packages/mui-base/src/useMenu/useMenu.ts @@ -8,7 +8,7 @@ import { import { UseMenuListboxSlotProps, UseMenuParameters, UseMenuReturnValue } from './useMenu.types'; import { menuReducer } from './menuReducer'; import { DropdownContext, DropdownContextValue } from '../useDropdown/DropdownContext'; -import { useList } from '../useList'; +import { ListActionTypes, useList } from '../useList'; import { MenuItemMetadata } from '../useMenuItem'; import { DropdownActionTypes } from '../useDropdown'; import { EventHandlers } from '../utils/types'; @@ -22,7 +22,7 @@ const FALLBACK_MENU_CONTEXT: DropdownContextValue = { popupId: '', registerPopup: () => {}, registerTrigger: () => {}, - state: { open: true }, + state: { open: true, changeReason: null }, triggerElement: null, }; @@ -53,7 +53,7 @@ export function useMenu(parameters: UseMenuParameters = {}): UseMenuReturnValue const listboxId = useId(idParam) ?? ''; const { - state: { open }, + state: { open, changeReason }, dispatch: menuDispatch, triggerElement, registerPopup, @@ -123,6 +123,19 @@ export function useMenu(parameters: UseMenuParameters = {}): UseMenuReturnValue registerPopup(listboxId); }, [listboxId, registerPopup]); + useEnhancedEffect(() => { + if ( + open && + changeReason?.type === 'keydown' && + (changeReason as React.KeyboardEvent).key === 'ArrowUp' + ) { + listDispatch({ + type: ListActionTypes.highlightLast, + event: changeReason as React.KeyboardEvent, + }); + } + }, [open, changeReason, listDispatch]); + React.useEffect(() => { if (open && autoFocus && highlightedValue && !isInitiallyOpen.current) { subitems.get(highlightedValue)?.ref?.current?.focus(); diff --git a/packages/mui-base/src/useMenuButton/useMenuButton.test.tsx b/packages/mui-base/src/useMenuButton/useMenuButton.test.tsx index d14beef942ad9a..9bf81af45f0a93 100644 --- a/packages/mui-base/src/useMenuButton/useMenuButton.test.tsx +++ b/packages/mui-base/src/useMenuButton/useMenuButton.test.tsx @@ -10,7 +10,7 @@ const testContext: DropdownContextValue = { popupId: 'menu-popup', registerPopup: () => {}, registerTrigger: () => {}, - state: { open: true }, + state: { open: true, changeReason: null }, triggerElement: null, }; diff --git a/packages/mui-base/src/useMenuButton/useMenuButton.ts b/packages/mui-base/src/useMenuButton/useMenuButton.ts index 5355a6f03f1b86..82a04a688cee67 100644 --- a/packages/mui-base/src/useMenuButton/useMenuButton.ts +++ b/packages/mui-base/src/useMenuButton/useMenuButton.ts @@ -80,7 +80,7 @@ export function useMenuButton(parameters: UseMenuButtonParameters = {}): UseMenu externalProps: ExternalProps = {} as ExternalProps, ) => { const externalEventHandlers = extractEventHandlers(externalProps); - const getCombinedProps = combineHooksSlotProps(getButtonRootProps, getOwnRootProps); + const getCombinedProps = combineHooksSlotProps(getOwnRootProps, getButtonRootProps); return { 'aria-haspopup': 'menu' as const, diff --git a/packages/mui-base/src/useMenuItem/useMenuItem.ts b/packages/mui-base/src/useMenuItem/useMenuItem.ts index 68ab53d6199fb9..40f6fee89998ea 100644 --- a/packages/mui-base/src/useMenuItem/useMenuItem.ts +++ b/packages/mui-base/src/useMenuItem/useMenuItem.ts @@ -26,7 +26,7 @@ const FALLBACK_MENU_CONTEXT: DropdownContextValue = { popupId: '', registerPopup: () => {}, registerTrigger: () => {}, - state: { open: true }, + state: { open: true, changeReason: null }, triggerElement: null, }; @@ -41,7 +41,13 @@ const FALLBACK_MENU_CONTEXT: DropdownContextValue = { * - [useMenuItem API](https://mui.com/base-ui/react-menu/hooks-api/#use-menu-item) */ export function useMenuItem(params: UseMenuItemParameters): UseMenuItemReturnValue { - const { disabled = false, id: idParam, rootRef: externalRef, label } = params; + const { + disabled = false, + id: idParam, + rootRef: externalRef, + label, + disableFocusOnHover = false, + } = params; const id = useId(idParam); const itemRef = React.useRef(null); @@ -55,6 +61,7 @@ export function useMenuItem(params: UseMenuItemParameters): UseMenuItemReturnVal const { getRootProps: getListRootProps, highlighted } = useListItem({ item: id, + handlePointerOverEvents: !disableFocusOnHover, }); const { index, totalItemCount } = useCompoundItem(id ?? idGenerator, itemMetadata); diff --git a/packages/mui-base/src/useMenuItem/useMenuItem.types.ts b/packages/mui-base/src/useMenuItem/useMenuItem.types.ts index 8fa180882bf93b..8f5231685ec892 100644 --- a/packages/mui-base/src/useMenuItem/useMenuItem.types.ts +++ b/packages/mui-base/src/useMenuItem/useMenuItem.types.ts @@ -26,6 +26,12 @@ export interface UseMenuItemParameters { label?: string; onClick?: React.MouseEventHandler; rootRef: React.Ref; + /** + * If `true`, the menu item won't receive focus when the mouse moves over it. + * + * @default false + */ + disableFocusOnHover?: boolean; } export interface UseMenuItemReturnValue { diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts index 2997e91244a704..984b93e32922b0 100644 --- a/packages/mui-base/src/useSelect/useSelect.ts +++ b/packages/mui-base/src/useSelect/useSelect.ts @@ -378,7 +378,7 @@ function useSelect( externalProps: ExternalProps = {} as ExternalProps, ): UseSelectButtonSlotProps => { const externalEventHandlers = extractEventHandlers(externalProps); - const combinedProps = combineHooksSlotProps(getButtonRootProps, getSelectTriggerProps); + const combinedProps = combineHooksSlotProps(getSelectTriggerProps, getButtonRootProps); return { ...externalProps, diff --git a/packages/mui-base/src/useSlider/useSlider.ts b/packages/mui-base/src/useSlider/useSlider.ts index 805872a998b717..0cabfaf5039f93 100644 --- a/packages/mui-base/src/useSlider/useSlider.ts +++ b/packages/mui-base/src/useSlider/useSlider.ts @@ -8,6 +8,7 @@ import { unstable_useForkRef as useForkRef, unstable_useIsFocusVisible as useIsFocusVisible, visuallyHidden, + clamp, } from '@mui/utils'; import { Mark, @@ -25,13 +26,6 @@ function asc(a: number, b: number) { return a - b; } -function clamp(value: number, min: number, max: number) { - if (value == null) { - return min; - } - return Math.min(Math.max(min, value), max); -} - function findClosest(values: number[], currentValue: number) { const { index: closestIndex } = values.reduce<{ distance: number; index: number } | null>( @@ -259,7 +253,8 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue const range = Array.isArray(valueDerived); let values = range ? valueDerived.slice().sort(asc) : [valueDerived]; - values = values.map((value) => clamp(value, min, max)); + values = values.map((value) => (value == null ? min : clamp(value, min, max))); + const marks = marksProp === true && step !== null ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({ diff --git a/packages/mui-base/src/useSnackbar/useSnackbar.ts b/packages/mui-base/src/useSnackbar/useSnackbar.ts index e8237f9d5e12d4..d2d73cf641af1f 100644 --- a/packages/mui-base/src/useSnackbar/useSnackbar.ts +++ b/packages/mui-base/src/useSnackbar/useSnackbar.ts @@ -1,6 +1,9 @@ 'use client'; import * as React from 'react'; -import { unstable_useEventCallback as useEventCallback } from '@mui/utils'; +import { + unstable_useEventCallback as useEventCallback, + unstable_useTimeout as useTimeout, +} from '@mui/utils'; import { UseSnackbarParameters, SnackbarCloseReason, @@ -29,7 +32,7 @@ export function useSnackbar(parameters: UseSnackbarParameters = {}): UseSnackbar resumeHideDuration, } = parameters; - const timerAutoHide = React.useRef>(); + const timerAutoHide = useTimeout(); React.useEffect(() => { if (!open) { @@ -65,10 +68,9 @@ export function useSnackbar(parameters: UseSnackbarParameters = {}): UseSnackbar return; } - clearTimeout(timerAutoHide.current); - timerAutoHide.current = setTimeout(() => { + timerAutoHide.start(autoHideDurationParam, () => { handleClose(null, 'timeout'); - }, autoHideDurationParam); + }); }); React.useEffect(() => { @@ -76,10 +78,8 @@ export function useSnackbar(parameters: UseSnackbarParameters = {}): UseSnackbar setAutoHideTimer(autoHideDuration); } - return () => { - clearTimeout(timerAutoHide.current); - }; - }, [open, autoHideDuration, setAutoHideTimer]); + return timerAutoHide.clear; + }, [open, autoHideDuration, setAutoHideTimer, timerAutoHide]); const handleClickAway = (event: React.SyntheticEvent | Event) => { onClose?.(event, 'clickaway'); @@ -87,9 +87,7 @@ export function useSnackbar(parameters: UseSnackbarParameters = {}): UseSnackbar // Pause the timer when the user is interacting with the Snackbar // or when the user hide the window. - const handlePause = () => { - clearTimeout(timerAutoHide.current); - }; + const handlePause = timerAutoHide.clear; // Restart the timer when the user is no longer interacting with the Snackbar // or when the window is shown back. @@ -140,7 +138,7 @@ export function useSnackbar(parameters: UseSnackbarParameters = {}): UseSnackbar } return undefined; - }, [disableWindowBlurListener, handleResume, open]); + }, [disableWindowBlurListener, open, handleResume, handlePause]); const getRootProps = = {}>( externalProps: ExternalProps = {} as ExternalProps, diff --git a/packages/mui-base/src/useTransition/TransitionContext.ts b/packages/mui-base/src/useTransition/TransitionContext.ts index a8b7d685104bf4..06e2fa23956415 100644 --- a/packages/mui-base/src/useTransition/TransitionContext.ts +++ b/packages/mui-base/src/useTransition/TransitionContext.ts @@ -5,22 +5,10 @@ export type TransitionContextValue = { * `true`, if the current element was requested to appear. */ requestedEnter: boolean; - /** - * Callback to be called when the element has started exiting. - */ - onExiting: () => void; /** * Callback to be called when the element has completely exited. */ onExited: () => void; - /** - * Callback to be called when the element has started entering. - */ - onEntering: () => void; - /** - * Callback to be called when the element has completely entered. - */ - onEntered: () => void; /** * Registers a child transition. * This is used to notify the parent `useTransitionTrigger` hook that a child transition exists diff --git a/packages/mui-base/src/useTransition/useTransitionStateManager.ts b/packages/mui-base/src/useTransition/useTransitionStateManager.ts index 2c202d5b997631..3c5043cd2628ed 100644 --- a/packages/mui-base/src/useTransition/useTransitionStateManager.ts +++ b/packages/mui-base/src/useTransition/useTransitionStateManager.ts @@ -7,18 +7,6 @@ export type UseTransitionStateManagerReturnValue = { * `true`, if the current element should be visible. */ requestedEnter: boolean; - /** - * Callback to be called when the element has started entering. - */ - onEntering: () => void; - /** - * Callback to be called when the element has completely entered. - */ - onEntered: () => void; - /** - * Callback to be called when the element has started exiting. - */ - onExiting: () => void; /** * Callback to be called when the element has completely exited. */ @@ -43,17 +31,13 @@ export function useTransitionStateManager(): UseTransitionStateManagerReturnValu throw new Error('Missing transition context'); } - const { registerTransition, requestedEnter, onEntering, onEntered, onExiting, onExited } = - transitionContext; + const { registerTransition, requestedEnter, onExited } = transitionContext; React.useEffect(() => { return registerTransition(); }, [registerTransition]); return { - onEntering, - onEntered, - onExiting, onExited, requestedEnter, }; diff --git a/packages/mui-base/src/useTransition/useTransitionTrigger.test.ts b/packages/mui-base/src/useTransition/useTransitionTrigger.test.ts index 02a3d3749a197e..2d66c57bc4633a 100644 --- a/packages/mui-base/src/useTransition/useTransitionTrigger.test.ts +++ b/packages/mui-base/src/useTransition/useTransitionTrigger.test.ts @@ -7,8 +7,7 @@ describe('useTransitionTrigger', () => { [true, false].forEach((requestEnter) => it(`should not be in transition and have exited = ${!requestEnter} initially when requestEnter = ${requestEnter}`, () => { const { result } = renderHook(() => useTransitionTrigger(requestEnter)); - const { transitionInProgress, hasExited } = result.current; - expect(transitionInProgress).to.equal(false); + const { hasExited } = result.current; expect(hasExited).to.equal(!requestEnter); }), ); @@ -21,53 +20,33 @@ describe('useTransitionTrigger', () => { rerender(true); expect(result.current.hasExited).to.equal(false); - expect(result.current.transitionInProgress).to.equal(false); rerender(false); expect(result.current.hasExited).to.equal(true); - expect(result.current.transitionInProgress).to.equal(false); }); }); describe('when a child transition is registered', () => { - it('should wait for callbacks to change its state', () => { + it('should wait for onExited callback to change its state', () => { const { result, rerender } = renderHook((requestEnter: boolean = false) => useTransitionTrigger(requestEnter), ); - result.current.contextValue.registerTransition(); - - rerender(true); - expect(result.current.hasExited).to.equal(true); - expect(result.current.transitionInProgress).to.equal(false); - act(() => { - result.current.contextValue.onEntering(); + result.current.contextValue.registerTransition(); }); - expect(result.current.hasExited).to.equal(false); - expect(result.current.transitionInProgress).to.equal(true); - act(() => { - result.current.contextValue.onEntered(); - }); + rerender(true); expect(result.current.hasExited).to.equal(false); - expect(result.current.transitionInProgress).to.equal(false); rerender(false); expect(result.current.hasExited).to.equal(false); - expect(result.current.transitionInProgress).to.equal(false); - - act(() => { - result.current.contextValue.onExiting(); - }); - expect(result.current.hasExited).to.equal(false); - expect(result.current.transitionInProgress).to.equal(true); act(() => { result.current.contextValue.onExited(); }); + expect(result.current.hasExited).to.equal(true); - expect(result.current.transitionInProgress).to.equal(false); }); }); }); diff --git a/packages/mui-base/src/useTransition/useTransitionTrigger.ts b/packages/mui-base/src/useTransition/useTransitionTrigger.ts index 7e4feb423d31f6..2430731fe1a91c 100644 --- a/packages/mui-base/src/useTransition/useTransitionTrigger.ts +++ b/packages/mui-base/src/useTransition/useTransitionTrigger.ts @@ -14,71 +14,68 @@ import { TransitionContextValue } from './TransitionContext'; * - [useTransitionTrigger API](https://mui.com/base-ui/react-transitions/hooks-api/#use-transition-trigger) */ export function useTransitionTrigger(requestEnter: boolean): UseTransitionTriggerReturnValue { - const [state, dispatch] = React.useReducer(transitionStateReducer, { - elementExited: !requestEnter, - inProgress: false, - }); + const [exitTransitionFinished, setExitTransitionFinished] = React.useState(true); + const hasPendingExitTransition = React.useRef(false); - const hasTransition = React.useRef(false); + const registeredTransitions = React.useRef(0); + const [hasTransition, setHasTransition] = React.useState(false); - const handleEntering = React.useCallback(() => { - dispatch('entering'); - }, []); + const previousRequestEnter = React.useRef(requestEnter); - const handleEntered = React.useCallback(() => { - dispatch('entered'); - }, []); + React.useEffect(() => { + if ( + !requestEnter && + // checking registeredTransitions.current instead of hasTransition to avoid this effect re-firing whenever hasTransition changes + registeredTransitions.current > 0 && + // prevents waiting for a pending transition right after mounting + previousRequestEnter.current !== requestEnter + ) { + hasPendingExitTransition.current = true; + setExitTransitionFinished(false); + } - const handleExiting = React.useCallback(() => { - dispatch('exiting'); - }, []); + previousRequestEnter.current = requestEnter; + }, [requestEnter]); const handleExited = React.useCallback(() => { - dispatch('exited'); + hasPendingExitTransition.current = false; + setExitTransitionFinished(true); }, []); - React.useEffect(() => { - if (!hasTransition.current) { - if (requestEnter) { - dispatch('entered'); - } else { - dispatch('exited'); - } - } - }, [requestEnter]); - const registerTransition = React.useCallback(() => { - hasTransition.current = true; + registeredTransitions.current += 1; + setHasTransition(true); return () => { - hasTransition.current = false; + registeredTransitions.current -= 1; + if (registeredTransitions.current === 0) { + setHasTransition(false); + } }; }, []); + let hasExited: boolean; + if (!hasTransition) { + // If there are no transitions registered, the `exited` state is opposite of `requestEnter` immediately. + hasExited = !requestEnter; + } else if (requestEnter) { + hasExited = false; + } else { + hasExited = !hasPendingExitTransition.current && exitTransitionFinished; + } + const contextValue: TransitionContextValue = React.useMemo( () => ({ requestedEnter: requestEnter, - onEntering: handleEntering, - onEntered: handleEntered, - onExiting: handleExiting, onExited: handleExited, registerTransition, - hasExited: state.elementExited, + hasExited, }), - [ - handleEntering, - handleEntered, - handleExiting, - handleExited, - requestEnter, - registerTransition, - state.elementExited, - ], + [handleExited, requestEnter, registerTransition, hasExited], ); return { contextValue, - hasExited: state.elementExited, - transitionInProgress: state.inProgress, + hasExited, }; } @@ -91,48 +88,4 @@ export type UseTransitionTriggerReturnValue = { * `true`, if the transitioned element has exited completely (or not entered yet). */ hasExited: boolean; - /** - * `true`, if the transition is in progress. - */ - transitionInProgress: boolean; }; - -function transitionStateReducer(_: TransitionState, action: TransitionAction): TransitionState { - switch (action) { - case 'entering': - return { - elementExited: false, - inProgress: true, - }; - case 'entered': - return { - elementExited: false, - inProgress: false, - }; - case 'exiting': - return { - elementExited: false, - inProgress: true, - }; - case 'exited': - return { - elementExited: true, - inProgress: false, - }; - default: - throw new Error(`Unhandled action: ${action}`); - } -} - -type TransitionAction = 'entering' | 'entered' | 'exiting' | 'exited'; - -interface TransitionState { - /** - * `true`, if the transitioned element has exited completely. - */ - elementExited: boolean; - /** - * `true`, if the transition is in progress. - */ - inProgress: boolean; -} diff --git a/packages/mui-codemod/CONTRIBUTING.md b/packages/mui-codemod/CONTRIBUTING.md new file mode 100644 index 00000000000000..f4fc9feba22676 --- /dev/null +++ b/packages/mui-codemod/CONTRIBUTING.md @@ -0,0 +1,55 @@ +# Contributing + +## Understanding the codemod + +The codemod is a tool that helps developers migrate thier codebase when we introduced changes in new version. The changes could be deprecations, enhancements, or breaking changes. + +The codemod is based on [jscodeshift](https://github.com/facebook/jscodeshift) which is a wrapper of [recast](https://github.com/benjamn/recast). + +## Adding a new codemod + +1. Create a new folder in `packages/mui-codemod/src/*/*` with the name of the codemod. +2. The folder should include: + - `.js` - the transform implementation + - `.test.js` - tests for the codemod (use jscodeshift from the `testUtils` folder) + - `test-cases` - folder with fixtures for the codemod + - `actual.js` - the input for the codemod + - `expected.js` - the expected output of the codemod +3. Use [astexplorer](https://astexplorer.net/) to check the AST types and properties (set to @babel/parser because we use [`tsx`](https://github.com/benjamn/recast/blob/master/parsers/babel.ts) as a default parser for our codemod). +4. [Test the codemod locally](#local) +5. Add the codemod to README.md + +## Testing + +I recommend to follow these steps to test the codemod: + +- Create an `actual.js` file with the code you want to transform. +- Run [local](#local) transformation to check if the codemod is correct. +- Copy the transformed code to `expected.js`. +- Run `pnpm tc ` to final check if the codemod is correct. + +💡 The reason that I don't recommend creating the `expected.js` and run the test with `pnpm` script is because the transformation is likely not pretty-printed and it's hard to compare the output with the expected output. + +### Local transformation (while developing) + +Open the terminal at root directory and run the codemod to test the transformation, for example, testing the `accordion-props` codemod: + +```bash +node packages/mui-codemod/codemod deprecations/accordion-props packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.actual.js +``` + +### CI (after opening a PR) + +To simulate a consumer-facing experience on any project before merging the PR, open the CodeSandbox CI build and copy the link from the "Local Install Instructions" section. + +Run the codemod to test the transformation: + +```bash +npx @mui/codemod@ +``` + +For example: + +```bash +npx @mui/codemod@https://pkg.csb.dev/mui/material-ui/commit/39bf9464/@mui/codemod deprecations/accordion-props docs/src/modules/brandingTheme.ts +``` diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 8399a52c2ee36b..acabaf5646f6cc 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -60,11 +60,42 @@ npx @mui/codemod@latest --jscodeshift="--printOptions='{\"quo ## Included scripts +- [Deprecation](#deprecations) +- [v5](#v500) +- [v4](#v400) +- [v1](#v100) +- [v0.15](#v0150) + +### Deprecations + +```bash +npx @mui/codemod@latest deprecations/all +``` + +#### `all` + +A combination of all deprecations. + +#### `accordion-props` + +```diff + +``` + +```bash +npx @mui/codemod@latest deprecations/accordion-props +``` + ### v5.0.0 -### `base-use-named-exports` +#### `base-use-named-exports` -Base UI default exports were changed to named ones. Previously we had a mix of default and named ones. +Base UI default exports were changed to named ones. Previously we had a mix of default and named ones. This was changed to improve consistency and avoid problems some bundlers have with default exports. See https://github.com/mui/material-ui/issues/21862 for more context. @@ -81,9 +112,9 @@ This codemod updates the import and re-export statements. npx @mui/codemod@latest v5.0.0/base-use-named-exports ``` -### `base-remove-unstyled-suffix` +#### `base-remove-unstyled-suffix` -The `Unstyled` suffix has been removed from all Base UI component names, including names of types and other related identifiers. +The `Unstyled` suffix has been removed from all Base UI component names, including names of types and other related identifiers. ```diff - ; @@ -96,9 +127,9 @@ npx @mui/codemod@latest v5.0.0/base-remove-unstyled-suffix #### `base-remove-component-prop` -Remove `component` prop from all Base UI components by transferring its value into `slots.root`. +Remove `component` prop from all Base UI components by transferring its value into `slots.root`. -This change only affects Base UI components. +This change only affects Base UI components. ```diff - @@ -126,7 +157,7 @@ npx @mui/codemod@latest v5.0.0/rename-css-variables #### `base-hook-imports` -Updates the sources of the imports of the Base UI hooks to adapt to the new directories of the hooks. +Updates the sources of the imports of the Base UI hooks to adapt to the new directories of the hooks. ```diff - import { useBadge } from '@mui/base/BadgeUnstyled'; @@ -452,7 +483,7 @@ You can find more details about this breaking change in [the migration guide](ht Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively. Also, changes `slots`' fields names to camelCase. -This change only affects Base UI components. +This change only affects Base UI components. ```diff #### `import-path` Updates the `import-paths` for the new location of the components. -MUI v0.15.0 is reorganizing the folder distribution of the project. +Material UI v0.15.0 is reorganizing the folder distribution of the project. The diff should look like this: ```diff diff --git a/packages/mui-codemod/codemod.js b/packages/mui-codemod/codemod.js index 20c0622c98f27a..5c9e19d739cc49 100755 --- a/packages/mui-codemod/codemod.js +++ b/packages/mui-codemod/codemod.js @@ -10,27 +10,39 @@ const jscodeshiftDirectory = path.dirname(require.resolve('jscodeshift')); const jscodeshiftExecutable = path.join(jscodeshiftDirectory, jscodeshiftPackage.bin.jscodeshift); async function runTransform(transform, files, flags, codemodFlags) { - const transformerSrcPath = path.resolve(__dirname, './src', `${transform}.js`); - const transformerBuildPath = path.resolve(__dirname, './node', `${transform}.js`); + const paths = [ + path.resolve(__dirname, './src', `${transform}/index.js`), + path.resolve(__dirname, './src', `${transform}.js`), + path.resolve(__dirname, './node', `${transform}/index.js`), + path.resolve(__dirname, './node', `${transform}.js`), + ]; + let transformerPath; - try { - await fs.stat(transformerSrcPath); - transformerPath = transformerSrcPath; - } catch (srcPathError) { + let error; + // eslint-disable-next-line no-restricted-syntax + for (const item of paths) { try { - await fs.stat(transformerBuildPath); - transformerPath = transformerBuildPath; - } catch (buildPathError) { - if (buildPathError.code === 'ENOENT') { - throw new Error( - `Transform '${transform}' not found. Check out ${path.resolve( - __dirname, - './README.md for a list of available codemods.', - )}`, - ); - } - throw buildPathError; + // eslint-disable-next-line no-await-in-loop + await fs.stat(item); + error = undefined; + transformerPath = item; + break; + } catch (srcPathError) { + error = srcPathError; + continue; + } + } + + if (error) { + if (error?.code === 'ENOENT') { + throw new Error( + `Transform '${transform}' not found. Check out ${path.resolve( + __dirname, + './README.md for a list of available codemods.', + )}`, + ); } + throw error; } const args = [ diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json index 899f994c94fd50..d171cde25d3381 100644 --- a/packages/mui-codemod/package.json +++ b/packages/mui-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@mui/codemod", - "version": "5.15.4", + "version": "5.15.7", "bin": "./codemod.js", "private": false, "author": "MUI Team", @@ -30,9 +30,9 @@ "url": "https://opencollective.com/mui-org" }, "dependencies": { - "@babel/core": "^7.23.7", - "@babel/runtime": "^7.23.8", - "@babel/traverse": "^7.23.7", + "@babel/core": "^7.23.9", + "@babel/runtime": "^7.23.9", + "@babel/traverse": "^7.23.9", "jscodeshift": "^0.13.1", "jscodeshift-add-imports": "^1.0.10", "yargs": "^17.7.2" diff --git a/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js b/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js new file mode 100644 index 00000000000000..dddc01c2288104 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js @@ -0,0 +1,95 @@ +import findComponentJSX from '../../util/findComponentJSX'; +import assignObject from '../../util/assignObject'; +import appendAttribute from '../../util/appendAttribute'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + + findComponentJSX(j, { root, componentName: 'Accordion' }, (elementPath) => { + let index = elementPath.node.openingElement.attributes.findIndex( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'TransitionComponent', + ); + if (index !== -1) { + const removed = elementPath.node.openingElement.attributes.splice(index, 1); + let hasNode = false; + elementPath.node.openingElement.attributes.forEach((attr) => { + if (attr.name?.name === 'slots') { + hasNode = true; + assignObject(j, { + target: attr, + key: 'transition', + expression: removed[0].value.expression, + }); + } + }); + if (!hasNode) { + appendAttribute(j, { + target: elementPath.node, + attributeName: 'slots', + expression: j.objectExpression([ + j.objectProperty(j.identifier('transition'), removed[0].value.expression), + ]), + }); + } + } + + index = elementPath.node.openingElement.attributes.findIndex( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'TransitionProps', + ); + if (index !== -1) { + const removed = elementPath.node.openingElement.attributes.splice(index, 1); + let hasNode = false; + elementPath.node.openingElement.attributes.forEach((attr) => { + if (attr.name?.name === 'slotProps') { + hasNode = true; + assignObject(j, { + target: attr, + key: 'transition', + expression: removed[0].value.expression, + }); + } + }); + if (!hasNode) { + appendAttribute(j, { + target: elementPath.node, + attributeName: 'slotProps', + expression: j.objectExpression([ + j.objectProperty(j.identifier('transition'), removed[0].value.expression), + ]), + }); + } + } + }); + + root.find(j.ObjectProperty, { key: { name: 'TransitionComponent' } }).forEach((path) => { + if (path.parent?.parent?.parent?.parent?.node.key?.name === 'MuiAccordion') { + path.replace( + j.property( + 'init', + j.identifier('slots'), + j.objectExpression([j.objectProperty(j.identifier('transition'), path.node.value)]), + ), + ); + } + }); + + root.find(j.ObjectProperty, { key: { name: 'TransitionProps' } }).forEach((path) => { + if (path.parent?.parent?.parent?.parent?.node.key?.name === 'MuiAccordion') { + path.replace( + j.property( + 'init', + j.identifier('slotProps'), + j.objectExpression([j.objectProperty(j.identifier('transition'), path.node.value)]), + ), + ); + } + }); + + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.test.js b/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.test.js new file mode 100644 index 00000000000000..4c807f4721f71c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.test.js @@ -0,0 +1,53 @@ +import path from 'path'; +import { expect } from 'chai'; +import { jscodeshift } from '../../../testUtils'; +import transform from './accordion-props'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('accordion-props', () => { + it('transforms props as needed', () => { + const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('[theme] accordion-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/theme.actual.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/theme.expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/accordion-props/index.js b/packages/mui-codemod/src/deprecations/accordion-props/index.js new file mode 100644 index 00000000000000..d069f42dc1754a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/accordion-props/index.js @@ -0,0 +1 @@ +export { default } from './accordion-props'; diff --git a/packages/mui-codemod/src/deprecations/accordion-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/actual.js new file mode 100644 index 00000000000000..20ac7fa81a3bb8 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/actual.js @@ -0,0 +1,30 @@ +import Accordion from '@mui/material/Accordion'; +import { Accordion as MyAccordion } from '@mui/material'; + +; +; +; +; +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/accordion-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/expected.js new file mode 100644 index 00000000000000..d0f76993c9142a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/expected.js @@ -0,0 +1,36 @@ +import Accordion from '@mui/material/Accordion'; +import { Accordion as MyAccordion } from '@mui/material'; + +; +; +; +; +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.actual.js new file mode 100644 index 00000000000000..b21358b649fa77 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.actual.js @@ -0,0 +1,8 @@ +fn({ + MuiAccordion: { + defaultProps: { + TransitionComponent: CustomTransition, + TransitionProps: { unmountOnExit: true }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.expected.js new file mode 100644 index 00000000000000..e98f56af5651d5 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.expected.js @@ -0,0 +1,13 @@ +fn({ + MuiAccordion: { + defaultProps: { + slots: { + transition: CustomTransition + }, + + slotProps: { + transition: { unmountOnExit: true } + } + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js new file mode 100644 index 00000000000000..08e1d4510f02fd --- /dev/null +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -0,0 +1,11 @@ +import transformAccordionProps from '../accordion-props/accordion-props'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function deprecationsAll(file, api, options) { + file.source = transformAccordionProps(file, api, options); + + return file.source; +} diff --git a/packages/mui-codemod/src/deprecations/all/index.js b/packages/mui-codemod/src/deprecations/all/index.js new file mode 100644 index 00000000000000..dcd97bd9b0e340 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/all/index.js @@ -0,0 +1 @@ +export { default } from './deprecations-all'; diff --git a/packages/mui-codemod/src/util/appendAttribute.js b/packages/mui-codemod/src/util/appendAttribute.js new file mode 100644 index 00000000000000..4cf0e860e6ae49 --- /dev/null +++ b/packages/mui-codemod/src/util/appendAttribute.js @@ -0,0 +1,11 @@ +/** + * @param {import('jscodeshift')} j + * @param {{ target: import('jscodeshift').JSXElement; attributeName: string; expression: import('ast-types/gen/kinds').ExpressionKind | import('ast-types/gen/kinds').JSXEmptyExpressionKind; }} options + */ +export default function appendAttribute(j, options) { + const { target, attributeName, expression } = options; + + target.openingElement.attributes.push( + j.jsxAttribute(j.jsxIdentifier(attributeName), j.jsxExpressionContainer(expression)), + ); +} diff --git a/packages/mui-codemod/src/util/assignObject.js b/packages/mui-codemod/src/util/assignObject.js new file mode 100644 index 00000000000000..f08a1a6fb91d21 --- /dev/null +++ b/packages/mui-codemod/src/util/assignObject.js @@ -0,0 +1,26 @@ +/** + * Pushes an expression to a known object. handles local object and variable declaration. + * + * @param {import('jscodeshift')} j + * @param {{ target: import('jscodeshift').JSXAttribute; expression: import('ast-types/gen/kinds').ExpressionKind; key: string }} options + * + * @example push expression to `slots.transition` => }} /> + * @example push expression to `slots.transition` => }} /> + */ +export default function assignObject(j, options) { + const { target, expression, key } = options; + if (target && target.type === 'JSXAttribute') { + const expContainer = /** @type import('jscodeshift').JSXExpressionContainer */ (target.value); + + if (expContainer.expression.type === 'ObjectExpression') { + // case `={{ ... }}` + expContainer.expression.properties.push(j.objectProperty(j.identifier(key), expression)); + } else if (expContainer.expression.type === 'Identifier') { + // case `={outerVariable} + expContainer.expression = j.objectExpression([ + j.spreadElement(j.identifier(expContainer.expression.name)), + j.objectProperty(j.identifier(key), expression), + ]); + } + } +} diff --git a/packages/mui-codemod/src/util/findComponentJSX.js b/packages/mui-codemod/src/util/findComponentJSX.js new file mode 100644 index 00000000000000..57719b9ea28492 --- /dev/null +++ b/packages/mui-codemod/src/util/findComponentJSX.js @@ -0,0 +1,39 @@ +/** + * Find all the JSXElements of a given component name. + * + * @param {import('jscodeshift')} j + * @param {{ root: import('jscodeshift').Collection; componentName: string }} options + * @param {(path: import('jscodeshift').ASTPath) => void} callback + * + */ +export default function findComponentJSX(j, options, callback) { + const { root, componentName } = options; + + // case 1: import ComponentName from '@mui/material/ComponentName'; + // case 2: import { ComponentName } from '@mui/material'; + // case 3: import { ComponentName as SomethingElse } from '@mui/material'; + + const importName = new Set(); + + root + .find(j.ImportDeclaration) + .filter((path) => + path.node.source.value.match(new RegExp(`^@mui/material(/${componentName})?$`)), + ) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if (specifier.type === 'ImportDefaultSpecifier') { + importName.add(specifier.local.name); + } + if (specifier.type === 'ImportSpecifier' && specifier.imported.name === componentName) { + importName.add(specifier.local.name); + } + }); + }); + + [...importName].forEach((name) => { + root.findJSXElements(name).forEach((elementPath) => { + callback(elementPath); + }); + }); +} diff --git a/packages/mui-codemod/testUtils/index.js b/packages/mui-codemod/testUtils/index.js new file mode 100644 index 00000000000000..038f57962c8576 --- /dev/null +++ b/packages/mui-codemod/testUtils/index.js @@ -0,0 +1,4 @@ +/* eslint-disable import/prefer-default-export */ +import j from 'jscodeshift'; + +export const jscodeshift = j.withParser('tsx'); diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json index ff09f65c6521fb..92c77db6d57f03 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": "5.15.4", + "version": "5.15.7", "private": false, "author": "MUI Team", "description": "Internal package to track number of downloads of our design system libraries", diff --git a/packages/mui-docs/README.md b/packages/mui-docs/README.md index 8bdba568db4dc6..00b0d507a3e6cf 100644 --- a/packages/mui-docs/README.md +++ b/packages/mui-docs/README.md @@ -11,7 +11,7 @@ npm install @mui/docs ``` The docs has a peer dependency on the core components. -If you are not already using MUI in your project, you can add it with: +If you are not already using Material UI in your project, you can add it with: ```bash npm install @mui/material diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json index 6faf14c27abff9..7d39a0ee4423dd 100644 --- a/packages/mui-docs/package.json +++ b/packages/mui-docs/package.json @@ -1,6 +1,6 @@ { "name": "@mui/docs", - "version": "5.15.4", + "version": "5.15.7", "private": false, "author": "MUI Team", "description": "MUI Docs - Documentation building blocks.", @@ -34,14 +34,14 @@ "test": "exit 0" }, "dependencies": { - "@babel/runtime": "^7.23.8", + "@babel/runtime": "^7.23.9", "@mui/base": "workspace:*", "@mui/utils": "workspace:^", "nprogress": "^0.2.0", "prop-types": "^15.8.1" }, "devDependencies": { - "@types/react": "^18.2.46", + "@types/react": "^18.2.48", "react": "^18.2.0" }, "peerDependencies": { diff --git a/packages/mui-envinfo/envinfo.test.js b/packages/mui-envinfo/envinfo.test.js index 41209a3557cf83..1367c58eb72991 100644 --- a/packages/mui-envinfo/envinfo.test.js +++ b/packages/mui-envinfo/envinfo.test.js @@ -2,48 +2,24 @@ const { execFileSync } = require('child_process'); const path = require('path'); const { expect } = require('chai'); -const isRunningOnWindows = process.platform === 'win32'; - describe('@mui/envinfo', () => { const packagePath = __dirname; const testProjectPath = path.resolve(packagePath, 'test'); - before(function beforeHook() { - // only run in node - if (!/jsdom/.test(window.navigator.userAgent)) { - this.skip(); - } - - // Building might take some time - this.timeout(20000); - execFileSync('pnpm', ['build'], { - cwd: packagePath, + function execEnvinfo(args) { + const envinfoPath = path.resolve(packagePath, 'envinfo.js'); + return execFileSync('node', [envinfoPath, ...args], { + encoding: 'utf8', stdio: 'pipe', - }); - - execFileSync('npm', ['install'], { cwd: testProjectPath, - stdio: 'pipe', }); - }); - - function execEnvinfo(args) { - const buildPath = path.resolve(packagePath, 'build'); - - return execFileSync( - isRunningOnWindows ? 'npx.cmd' : 'npx', - ['--package', buildPath, 'envinfo', ...args], - { - encoding: 'utf8', - stdio: 'pipe', - cwd: testProjectPath, - }, - ); } it('includes info about the environment relevant to MUI', function test() { - // Need more time to download packages - this.timeout(20000); + // only run in node + if (!/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } const envinfoJSON = execEnvinfo(['--json']); @@ -60,7 +36,7 @@ describe('@mui/envinfo', () => { // Non-exhaustive list of `@mui/*` packages expect(envinfo).to.have.nested.property('npmPackages.@mui/material'); expect(envinfo).to.have.nested.property('npmPackages.@mui/joy'); - expect(envinfo).to.have.nested.property('npmPackages.@mui/utils'); + expect(envinfo).to.have.nested.property('npmPackages.@mui/base'); // Other libraries expect(envinfo).to.have.nested.property('npmPackages.react'); expect(envinfo).to.have.nested.property('npmPackages.react-dom'); diff --git a/packages/mui-envinfo/package.json b/packages/mui-envinfo/package.json index 2de87ce034c8b1..321dad3a093459 100644 --- a/packages/mui-envinfo/package.json +++ b/packages/mui-envinfo/package.json @@ -1,6 +1,6 @@ { "name": "@mui/envinfo", - "version": "2.0.16", + "version": "2.0.17", "private": false, "author": "MUI Team", "description": "Logs infos about the environment relevant to @mui/*", diff --git a/packages/mui-envinfo/test/package.json b/packages/mui-envinfo/test/package.json index a8dac4cbad2cde..c4a6938fa98f5f 100644 --- a/packages/mui-envinfo/test/package.json +++ b/packages/mui-envinfo/test/package.json @@ -1,16 +1,17 @@ { - "name": "test-project", + "name": "envinfo-test-project", "version": "1.0.0", "private": true, "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", - "@mui/material": "^5.15.4", - "@mui/joy": "^5.0.0-beta.21", + "@mui/base": "5.0.0-beta.30", + "@mui/joy": "5.0.0-beta.22", + "@mui/material": "5.15.4", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { - "@types/react": "^18.2.46" + "@types/react": "^18.2.48" } } diff --git a/packages/mui-icons-material/README.md b/packages/mui-icons-material/README.md index c009aa230ee7b0..cf532bffeb018a 100644 --- a/packages/mui-icons-material/README.md +++ b/packages/mui-icons-material/README.md @@ -14,9 +14,9 @@ npm install @mui/icons-material -These components use the Material UI's [SvgIcon](https://mui.com/material-ui/api/svg-icon) component to render the SVG path for each icon. +These components use the Material UI's [SvgIcon](https://mui.com/material-ui/api/svg-icon) component to render the SVG path for each icon. -If you are not already using Material UI in your project, you can add it with: +If you are not already using Material UI in your project, you can add it with: ```bash npm install @mui/material diff --git a/packages/mui-icons-material/builder.md b/packages/mui-icons-material/builder.md index d494bb5fd5e53c..c3cfee1fef8f7b 100644 --- a/packages/mui-icons-material/builder.md +++ b/packages/mui-icons-material/builder.md @@ -1,6 +1,6 @@ # @mui/icons-material-builder -This tool generates MUI SvgIcon components for a set of svg icons. +This tool generates Material UI SvgIcon components for a set of svg icons. ## Running the build diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json index 3663570c8d621a..f22853385b243c 100644 --- a/packages/mui-icons-material/package.json +++ b/packages/mui-icons-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/icons-material", - "version": "5.15.4", + "version": "5.15.7", "private": false, "author": "MUI Team", "description": "Material Design icons distributed as SVG React components.", @@ -46,14 +46,14 @@ "typescript": "tsc -p tsconfig.json" }, "dependencies": { - "@babel/runtime": "^7.23.8" + "@babel/runtime": "^7.23.9" }, "devDependencies": { "@mui/icons-material": "workspace:*", "@mui/internal-waterfall": "workspace:^", "@mui/material": "workspace:^", "@types/chai": "^4.3.11", - "@types/react": "^18.2.46", + "@types/react": "^18.2.48", "chai": "^4.4.1", "chalk": "^5.3.0", "cross-fetch": "^4.0.0", diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json index 2f14db116a2307..e0c4fc4776fa21 100644 --- a/packages/mui-joy/package.json +++ b/packages/mui-joy/package.json @@ -1,6 +1,6 @@ { "name": "@mui/joy", - "version": "5.0.0-beta.22", + "version": "5.0.0-beta.25", "private": false, "author": "MUI Team", "description": "Joy UI is an open-source React component library that implements MUI's own design principles. It's comprehensive and can be used in production out of the box.", @@ -38,7 +38,7 @@ "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" }, "dependencies": { - "@babel/runtime": "^7.23.8", + "@babel/runtime": "^7.23.9", "@mui/base": "workspace:*", "@mui/core-downloads-tracker": "workspace:^", "@mui/system": "workspace:^", @@ -52,7 +52,7 @@ "@mui/material": "workspace:^", "@types/chai": "^4.3.11", "@types/prop-types": "^15.7.11", - "@types/react": "^18.2.46", + "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", "@types/sinon": "^10.0.20", "chai": "^4.4.1", diff --git a/packages/mui-joy/src/Menu/Menu.test.tsx b/packages/mui-joy/src/Menu/Menu.test.tsx index 13221bcafb8d49..6d2e67fc43cd7f 100644 --- a/packages/mui-joy/src/Menu/Menu.test.tsx +++ b/packages/mui-joy/src/Menu/Menu.test.tsx @@ -21,7 +21,7 @@ const testContext: DropdownContextValue = { popupId: 'menu-popup', registerPopup: () => {}, registerTrigger: () => {}, - state: { open: true }, + state: { open: true, changeReason: null }, triggerElement: document.createElement('div'), }; diff --git a/packages/mui-joy/src/MenuButton/MenuButton.test.tsx b/packages/mui-joy/src/MenuButton/MenuButton.test.tsx index ba265e18575be2..bb12143611c677 100644 --- a/packages/mui-joy/src/MenuButton/MenuButton.test.tsx +++ b/packages/mui-joy/src/MenuButton/MenuButton.test.tsx @@ -11,7 +11,7 @@ const testContext: DropdownContextValue = { popupId: 'menu-popup', registerPopup: () => {}, registerTrigger: () => {}, - state: { open: true }, + state: { open: true, changeReason: null }, triggerElement: null, }; @@ -59,7 +59,7 @@ describe('', () => { const dispatchSpy = spy(); const context = { ...testContext, - state: { open: false }, + state: { open: false, changeReason: null }, dispatch: dispatchSpy, }; diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx index 709be9361b2177..00aa8a51f00c63 100644 --- a/packages/mui-joy/src/Tooltip/Tooltip.tsx +++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx @@ -9,6 +9,8 @@ import { unstable_useForkRef as useForkRef, unstable_useIsFocusVisible as useIsFocusVisible, unstable_useId as useId, + unstable_useTimeout as useTimeout, + unstable_Timeout as Timeout, } from '@mui/utils'; import { Popper, unstable_composeClasses as composeClasses } from '@mui/base'; import { OverridableComponent } from '@mui/types'; @@ -156,14 +158,12 @@ const TooltipArrow = styled('span', { }); let hystersisOpen = false; -let hystersisTimer: ReturnType | null = null; +const hystersisTimer = new Timeout(); let cursorPosition = { x: 0, y: 0 }; export function testReset() { hystersisOpen = false; - if (hystersisTimer) { - clearTimeout(hystersisTimer); - } + hystersisTimer.clear(); } function composeMouseEventHandler( @@ -245,14 +245,10 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { const disableInteractive = disableInteractiveProp || followCursor; - const closeTimer: React.MutableRefObject | undefined> = - React.useRef(); - const enterTimer: React.MutableRefObject | undefined> = - React.useRef(); - const leaveTimer: React.MutableRefObject | undefined> = - React.useRef(); - const touchTimer: React.MutableRefObject | undefined> = - React.useRef(); + const closeTimer = useTimeout(); + const enterTimer = useTimeout(); + const leaveTimer = useTimeout(); + const touchTimer = useTimeout(); const [openState, setOpenState] = useControlled({ controlled: openProp, @@ -266,28 +262,19 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { const id = useId(idProp); const prevUserSelect: React.MutableRefObject = React.useRef(); - const stopTouchInteraction = React.useCallback(() => { + const stopTouchInteraction = useEventCallback(() => { if (prevUserSelect.current !== undefined) { (document.body.style as unknown as { WebkitUserSelect?: string }).WebkitUserSelect = prevUserSelect.current; prevUserSelect.current = undefined; } - clearTimeout(touchTimer.current); - }, []); + touchTimer.clear(); + }); - React.useEffect(() => { - return () => { - clearTimeout(closeTimer.current); - clearTimeout(enterTimer.current); - clearTimeout(leaveTimer.current); - stopTouchInteraction(); - }; - }, [stopTouchInteraction]); + React.useEffect(() => stopTouchInteraction, [stopTouchInteraction]); const handleOpen = (event: React.MouseEvent) => { - if (hystersisTimer) { - clearTimeout(hystersisTimer); - } + hystersisTimer.clear(); hystersisOpen = true; // The mouseover event will trigger for every nested element in the tooltip. @@ -301,22 +288,18 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { }; const handleClose = useEventCallback((event: React.SyntheticEvent | Event) => { - if (hystersisTimer) { - clearTimeout(hystersisTimer); - } - hystersisTimer = setTimeout(() => { + hystersisTimer.start(800 + leaveDelay, () => { hystersisOpen = false; - }, 800 + leaveDelay); + }); setOpenState(false); if (onClose && open) { onClose(event); } - clearTimeout(closeTimer.current); - closeTimer.current = setTimeout(() => { + closeTimer.start(150, () => { ignoreNonTouchEvents.current = false; - }, 150); + }); }); const handleEnter = (event: React.MouseEvent) => { @@ -331,26 +314,22 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { (childNode as HTMLElement).removeAttribute('title'); } - clearTimeout(enterTimer.current); - clearTimeout(leaveTimer.current); + enterTimer.clear(); + leaveTimer.clear(); if (enterDelay || (hystersisOpen && enterNextDelay)) { - enterTimer.current = setTimeout( - () => { - handleOpen(event); - }, - hystersisOpen ? enterNextDelay : enterDelay, - ); + enterTimer.start(hystersisOpen ? enterNextDelay : enterDelay, () => { + handleOpen(event); + }); } else { handleOpen(event); } }; const handleLeave = (event: React.MouseEvent) => { - clearTimeout(enterTimer.current); - clearTimeout(leaveTimer.current); - leaveTimer.current = setTimeout(() => { + enterTimer.clear(); + leaveTimer.start(leaveDelay, () => { handleClose(event); - }, leaveDelay); + }); }; const { @@ -399,8 +378,8 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { const handleTouchStart = (event: React.TouchEvent) => { detectTouchStart(event); - clearTimeout(leaveTimer.current); - clearTimeout(closeTimer.current); + leaveTimer.clear(); + closeTimer.clear(); stopTouchInteraction(); prevUserSelect.current = ( @@ -409,11 +388,11 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { // Prevent iOS text selection on long-tap. (document.body.style as unknown as { WebkitUserSelect?: string }).WebkitUserSelect = 'none'; - touchTimer.current = setTimeout(() => { + touchTimer.start(enterTouchDelay, () => { (document.body.style as unknown as { WebkitUserSelect?: string }).WebkitUserSelect = prevUserSelect.current; handleEnter(event as unknown as React.MouseEvent); - }, enterTouchDelay); + }); }; const handleTouchEnd = (event: React.TouchEvent) => { @@ -422,10 +401,9 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { } stopTouchInteraction(); - clearTimeout(leaveTimer.current); - leaveTimer.current = setTimeout(() => { + leaveTimer.start(leaveTouchDelay, () => { handleClose(event); - }, leaveTouchDelay); + }); }; React.useEffect(() => { diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx index 298f65b0adb850..59d61d0dc7b572 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx @@ -5,11 +5,11 @@ import * as React from 'react'; import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system'; import defaultTheme from './defaultTheme'; -import type { DefaultColorScheme, ExtendedColorScheme } from './types'; +import type { SupportedColorScheme } from './types'; import THEME_ID from './identifier'; const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider< - DefaultColorScheme | ExtendedColorScheme, + SupportedColorScheme, typeof THEME_ID >({ themeId: THEME_ID, diff --git a/packages/mui-joy/src/styles/defaultTheme.test.js b/packages/mui-joy/src/styles/defaultTheme.test.js index 154e11cbd2707a..f45402d3a1629a 100644 --- a/packages/mui-joy/src/styles/defaultTheme.test.js +++ b/packages/mui-joy/src/styles/defaultTheme.test.js @@ -31,6 +31,7 @@ describe('defaultTheme', () => { 'unstable_sx', 'shouldSkipGeneratingVar', 'generateCssVars', + 'applyStyles', ]).to.includes(field); }); }); diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js index 7568b02be2dbcf..d6fe75ac3aa5b3 100644 --- a/packages/mui-joy/src/styles/extendTheme.test.js +++ b/packages/mui-joy/src/styles/extendTheme.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer } from '@mui-internal/test-utils'; -import { extendTheme, useTheme, CssVarsProvider } from '@mui/joy/styles'; +import { extendTheme, useTheme, CssVarsProvider, styled } from '@mui/joy/styles'; describe('extendTheme', () => { it('the output contains required fields', () => { @@ -31,6 +31,7 @@ describe('extendTheme', () => { 'unstable_sx', 'shouldSkipGeneratingVar', 'generateCssVars', + 'applyStyles', ]).to.includes(field); }); }); @@ -176,5 +177,28 @@ describe('extendTheme', () => { borderRadius: 'var(--joy-radius-md)', }); }); + + it('applyStyles', () => { + const attribute = 'data-custom-color-scheme'; + let darkStyles = {}; + const Test = styled('div')(({ theme }) => { + darkStyles = theme.applyStyles('dark', { + backgroundColor: 'rgba(0, 0, 0, 0)', + }); + return null; + }); + + render( + + + , + ); + + expect(darkStyles).to.deep.equal({ + [`*:where([${attribute}="dark"]) &`]: { + backgroundColor: 'rgba(0, 0, 0, 0)', + }, + }); + }); }); }); diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index 6a4a97ccb7e46e..b1e85193334932 100644 --- a/packages/mui-joy/src/styles/extendTheme.ts +++ b/packages/mui-joy/src/styles/extendTheme.ts @@ -10,6 +10,7 @@ import { unstable_styleFunctionSx as styleFunctionSx, SxConfig, } from '@mui/system'; +import { unstable_applyStyles as applyStyles } from '@mui/system/createTheme'; import defaultSxConfig from './sxConfig'; import colors from '../colors'; import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar'; @@ -662,6 +663,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { }; theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar; + theme.applyStyles = applyStyles; return theme; } diff --git a/packages/mui-joy/src/styles/types/theme.ts b/packages/mui-joy/src/styles/types/theme.ts index c380d259ebcc12..9d94dfc53113d1 100644 --- a/packages/mui-joy/src/styles/types/theme.ts +++ b/packages/mui-joy/src/styles/types/theme.ts @@ -6,6 +6,7 @@ import { SystemProps as SystemSystemProps, CSSObject, SxConfig, + ApplyStyles, } from '@mui/system'; import { DefaultColorScheme, ExtendedColorScheme } from './colorScheme'; import { ColorSystem } from './colorSystem'; @@ -118,6 +119,7 @@ export interface Theme extends ThemeScales, RuntimeColorSystem { shouldSkipGeneratingVar: (keys: string[], value: string | number) => boolean; unstable_sxConfig: SxConfig; unstable_sx: (props: SxProps) => CSSObject; + applyStyles: ApplyStyles; } export type SxProps = SystemSxProps; diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index bbb066f2b91a07..b4b5dbed0d3195 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -1,6 +1,6 @@ { "name": "@mui/lab", - "version": "5.0.0-alpha.160", + "version": "5.0.0-alpha.163", "private": false, "author": "MUI Team", "description": "Laboratory for new MUI modules.", @@ -41,7 +41,7 @@ "typescript": "tsc -p tsconfig.json" }, "dependencies": { - "@babel/runtime": "^7.23.8", + "@babel/runtime": "^7.23.9", "@mui/base": "workspace:*", "@mui/system": "workspace:^", "@mui/types": "workspace:^", @@ -53,7 +53,7 @@ "@mui-internal/test-utils": "workspace:^", "@types/chai": "^4.3.11", "@types/prop-types": "^15.7.11", - "@types/react": "^18.2.46", + "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", "@types/sinon": "^10.0.20", "chai": "^4.4.1", diff --git a/packages/mui-lab/src/TabContext/TabContext.d.ts b/packages/mui-lab/src/TabContext/TabContext.d.ts index f37f7c88a3f22e..b3db92467f8936 100644 --- a/packages/mui-lab/src/TabContext/TabContext.d.ts +++ b/packages/mui-lab/src/TabContext/TabContext.d.ts @@ -13,7 +13,7 @@ export interface TabContextProps { /** * The value of the currently selected `Tab`. */ - value: string; + value: string | number; } /** * diff --git a/packages/mui-lab/src/TabContext/TabContext.js b/packages/mui-lab/src/TabContext/TabContext.js index c4332280d7bc4d..a910236bab70b1 100644 --- a/packages/mui-lab/src/TabContext/TabContext.js +++ b/packages/mui-lab/src/TabContext/TabContext.js @@ -41,7 +41,7 @@ TabContext.propTypes /* remove-proptypes */ = { /** * The value of the currently selected `Tab`. */ - value: PropTypes.string.isRequired, + value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, }; /** diff --git a/packages/mui-material-next/README.md b/packages/mui-material-next/README.md index f4ba4306bf6ab3..40f5948e44e8e8 100644 --- a/packages/mui-material-next/README.md +++ b/packages/mui-material-next/README.md @@ -4,9 +4,9 @@ This package is a nursery for components that will ultimately replace the @mui/material ones. -## Material UI v6 changes +## Material UI v6 changes -Material UI v6's notable changes compared to v5 are: +Material UI v6's notable changes compared to v5 are: - Built using [@mui/base](https://mui.com/base-ui/getting-started/overview/) - Built with TypeScript. @@ -18,5 +18,5 @@ For migration steps when upgrading from v5, follow the [migration guide](/packag Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes. -Contributing to Material UI is about more than just issues and pull requests! +Contributing to Material UI is about more than just issues and pull requests! There are many other ways to [support MUI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. diff --git a/packages/mui-material-next/migration.md b/packages/mui-material-next/migration.md index e86a42aadab41d..1ca0322d107c35 100644 --- a/packages/mui-material-next/migration.md +++ b/packages/mui-material-next/migration.md @@ -1,6 +1,6 @@ # Migration -This is a reference guide on how to migrate from Material UI v5 to v6. +This is a reference guide on how to migrate from Material UI v5 to v6. ## Breaking changes: components diff --git a/packages/mui-material-next/package.json b/packages/mui-material-next/package.json index 046a114b0d2b75..4cc3e61fa72e62 100644 --- a/packages/mui-material-next/package.json +++ b/packages/mui-material-next/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material-next", - "version": "6.0.0-alpha.117", + "version": "6.0.0-alpha.120", "private": false, "author": "MUI Team", "description": "v6-alpha: React components that implement Google's Material Design", @@ -40,7 +40,7 @@ "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" }, "dependencies": { - "@babel/runtime": "^7.23.8", + "@babel/runtime": "^7.23.9", "@mui/base": "workspace:*", "@mui/material": "workspace:^", "@mui/system": "workspace:^", @@ -59,15 +59,15 @@ "@testing-library/user-event": "^14.5.2", "@types/chai": "^4.3.11", "@types/prop-types": "^15.7.11", - "@types/react": "^18.2.46", + "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", - "@types/react-is": "^18.2.3", + "@types/react-is": "^18.2.4", "@types/sinon": "^10.0.20", "chai": "^4.4.1", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.21.2", + "react-router-dom": "^6.21.3", "sinon": "^15.2.0" }, "peerDependencies": { diff --git a/packages/mui-material-next/src/ButtonBase/TouchRipple.tsx b/packages/mui-material-next/src/ButtonBase/TouchRipple.tsx index f223f6b9796280..0be23b2cebd49f 100644 --- a/packages/mui-material-next/src/ButtonBase/TouchRipple.tsx +++ b/packages/mui-material-next/src/ButtonBase/TouchRipple.tsx @@ -5,6 +5,7 @@ import PropTypes from 'prop-types'; import { TransitionGroup } from 'react-transition-group'; import clsx from 'clsx'; import { keyframes, useThemeProps } from '@mui/system'; +import { unstable_useTimeout as useTimeout } from '@mui/utils'; import styled from '@mui/material/styles/styled'; import { TouchRippleActions, TouchRippleProps } from './TouchRipple.types'; import Ripple from './Ripple'; @@ -104,18 +105,12 @@ const TouchRipple = React.forwardRef(funct const ignoringMouseDown = React.useRef(false); // We use a timer in order to only show the ripples for touch "click" like events. // We don't want to display the ripple for touch scroll events. - const startTimer = React.useRef>(); + const startTimer = useTimeout(); // This is the hook called once the previous timeout is ready. const startTimerCommit = React.useRef<(() => void) | null>(null); const container = React.useRef(null); - React.useEffect(() => { - return () => { - clearTimeout(startTimer.current); - }; - }, []); - const startCommit = React.useCallback( (params: { rippleX: number; rippleY: number; rippleSize: number; cb: () => void }) => { const { rippleX, rippleY, rippleSize, cb } = params; @@ -217,44 +212,48 @@ const TouchRipple = React.forwardRef(funct startCommit({ rippleX, rippleY, rippleSize, cb }); }; // Delay the execution of the ripple effect. - startTimer.current = setTimeout(() => { + // We have to make a tradeoff with this delay value. + startTimer.start(DELAY_RIPPLE, () => { if (startTimerCommit.current) { startTimerCommit.current(); startTimerCommit.current = null; } - }, DELAY_RIPPLE); // We have to make a tradeoff with this value. + }); } } else { startCommit({ rippleX, rippleY, rippleSize, cb }); } }, - [centerProp, startCommit], + [centerProp, startCommit, startTimer], ); - const stop = React.useCallback((event, cb) => { - clearTimeout(startTimer.current); + const stop = React.useCallback( + (event, cb) => { + startTimer.clear(); - // The touch interaction occurs too quickly. - // We still want to show ripple effect. - if (event?.type === 'touchend' && startTimerCommit.current) { - startTimerCommit.current(); - startTimerCommit.current = null; - startTimer.current = setTimeout(() => { - stop(event, cb); - }); - return; - } + // The touch interaction occurs too quickly. + // We still want to show ripple effect. + if (event?.type === 'touchend' && startTimerCommit.current) { + startTimerCommit.current(); + startTimerCommit.current = null; + startTimer.start(0, () => { + stop(event, cb); + }); + return; + } - startTimerCommit.current = null; + startTimerCommit.current = null; - setRipples((oldRipples) => { - if (oldRipples.length > 0) { - return oldRipples.slice(1); - } - return oldRipples; - }); - rippleCallback.current = cb; - }, []); + setRipples((oldRipples) => { + if (oldRipples.length > 0) { + return oldRipples.slice(1); + } + return oldRipples; + }); + rippleCallback.current = cb; + }, + [startTimer], + ); React.useImperativeHandle( ref, diff --git a/packages/mui-material-next/src/Menu/Menu.tsx b/packages/mui-material-next/src/Menu/Menu.tsx index 93764691fdcecd..b133c2cdb670ea 100644 --- a/packages/mui-material-next/src/Menu/Menu.tsx +++ b/packages/mui-material-next/src/Menu/Menu.tsx @@ -98,7 +98,7 @@ const MenuInner = React.forwardRef(function Menu(inProps, ref) { const theme = useTheme(); const isRtl = theme.direction === 'rtl'; - const listRef = React.useRef(null); + const listRef = React.useRef(null); // TODO v6: Handle the rest of the props from the MenuListProps prop const { diff --git a/packages/mui-material-next/src/MenuItem/MenuItem.tsx b/packages/mui-material-next/src/MenuItem/MenuItem.tsx index b491f4f95eca73..1967b236d42247 100644 --- a/packages/mui-material-next/src/MenuItem/MenuItem.tsx +++ b/packages/mui-material-next/src/MenuItem/MenuItem.tsx @@ -183,7 +183,7 @@ const MenuItem = React.forwardRef(function MenuItem(null); + const menuItemRef = React.useRef(null); const handleRef = useForkRef(menuItemRef, ref); const { getRootProps, disabled, focusVisible, highlighted } = useMenuItem({ diff --git a/packages/mui-material-next/src/Option/Option.tsx b/packages/mui-material-next/src/Option/Option.tsx index c16a2c56bc62be..e6217ffe012b81 100644 --- a/packages/mui-material-next/src/Option/Option.tsx +++ b/packages/mui-material-next/src/Option/Option.tsx @@ -180,7 +180,7 @@ const Option = React.forwardRef(function Option(null); + const optionRef = React.useRef(null); const handleRef = useForkRef(optionRef, ref); const { getRootProps, disabled, focusVisible, highlighted } = useMenuItem({ diff --git a/packages/mui-material-next/src/Switch/Switch.types.ts b/packages/mui-material-next/src/Switch/Switch.types.ts index 2d5a89dd053cc2..4eff5796daf7c3 100644 --- a/packages/mui-material-next/src/Switch/Switch.types.ts +++ b/packages/mui-material-next/src/Switch/Switch.types.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion, OverrideProps, PartiallyRequired } from '@mui/types'; -import { Theme } from '@mui/material/styles'; // eslint-disable-next-line no-restricted-imports import { InternalStandardProps as StandardProps } from '@mui/material'; import type { SwitchBaseProps } from '@mui/material/internal/SwitchBase'; +import { Theme } from '../styles'; import { SwitchClasses } from './switchClasses'; export interface SwitchPropsSizeOverrides {} @@ -12,7 +12,7 @@ export interface SwitchPropsSizeOverrides {} export interface SwitchPropsColorOverrides {} export interface SwitchOwnProps - extends StandardProps { + extends StandardProps { /** * The icon to display when the component is checked. */ diff --git a/packages/mui-material-next/src/TablePagination/TablePagination.d.ts b/packages/mui-material-next/src/TablePagination/TablePagination.d.ts index 33c27a8c781729..8acb44381a0ebc 100644 --- a/packages/mui-material-next/src/TablePagination/TablePagination.d.ts +++ b/packages/mui-material-next/src/TablePagination/TablePagination.d.ts @@ -126,7 +126,7 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps { * Use -1 for the value with a custom label to show all the rows. * @default [10, 25, 50, 100] */ - rowsPerPageOptions?: Array< + rowsPerPageOptions?: ReadonlyArray< | number | { value: number; diff --git a/packages/mui-material-nextjs/README.md b/packages/mui-material-nextjs/README.md index 602c842532ec9f..100db71551dc7d 100644 --- a/packages/mui-material-nextjs/README.md +++ b/packages/mui-material-nextjs/README.md @@ -1,3 +1,3 @@ # @mui/material-nextjs -The official Material UI integration with Next.js. For the full documentation, visit [Next.js integration](https://mui.com/material-ui/guides/nextjs/) page. +The official Material UI integration with Next.js. For the full documentation, visit [Next.js integration](https://mui.com/material-ui/guides/nextjs/) page. diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json index 1e67ea6ef8755d..1e1a2848adc460 100644 --- a/packages/mui-material-nextjs/package.json +++ b/packages/mui-material-nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material-nextjs", - "version": "5.15.4", + "version": "5.15.7", "private": false, "author": "MUI Team", "description": "Collection of utilities for integration between Material UI and Next.js.", @@ -40,7 +40,7 @@ "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.3", "@emotion/server": "^11.11.0", - "@types/react": "^18.2.46", + "@types/react": "^18.2.48", "next": "13.4.19", "react": "^18.2.0" }, diff --git a/packages/mui-material-nextjs/src/v13-appRouter/appRouterV13.tsx b/packages/mui-material-nextjs/src/v13-appRouter/appRouterV13.tsx index 7c9ce7b307d172..8eda09a16c9c3f 100644 --- a/packages/mui-material-nextjs/src/v13-appRouter/appRouterV13.tsx +++ b/packages/mui-material-nextjs/src/v13-appRouter/appRouterV13.tsx @@ -18,21 +18,25 @@ export type AppRouterCacheProviderProps = { /** * By default from 'import { CacheProvider } from "@emotion/react"'. */ - CacheProvider?: (props: { - value: EmotionCache; - children: React.ReactNode; - }) => React.JSX.Element | null; + CacheProvider?: React.ElementType<{ value: EmotionCache }>; children: React.ReactNode; }; +/** + * Emotion works OK without this provider but it's recommended to use this provider to improve performance. + * Without it, Emotion will generate a new