MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI

Last update: Dec 30, 2022

Overview

MUI Core

MUI Core contains foundational React UI component libraries for shipping new features faster.

Material UI is a comprehensive library of components that features our implementation of Google's Material Design system.
Joy UI is a beautifully designed library of React UI components.
MUI Base is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.
MUI System is a collection of CSS utilities to help you rapidly lay out custom designs.

Stable channel v5

Installation

Material UI

Material UI is available as an npm package.

npm:

npm install @mui/material @emotion/react @emotion/styled

yarn:

yarn add @mui/material @emotion/react @emotion/styled

Older versions

Note: @next only points to pre-releases. Use @latest for the latest stable release.

MUI Base

MUI Base is available as an npm package.

npm:

npm install @mui/base

yarn:

yarn add @mui/base

Note: MUI Base is still in alpha. We are adding new components regularly and you're welcome to contribute!

MUI System

MUI System is available as an npm package.

npm:

npm install @mui/system @emotion/react @emotion/styled

yarn:

yarn add @mui/system @emotion/react @emotion/styled

Or if you want to use styled-components as a styling engine:

npm:

npm install @mui/material @mui/styled-engine-sc styled-components

yarn:

yarn add @mui/material @mui/styled-engine-sc styled-components

Visit our styled-engine guide for more information about how to configure styled-components as the style engine.

Getting started with Material UI

Here is an example of a basic app using Material UI's Button component:

import * as React from 'react';
import Button from '@mui/material/Button';

function App() {
  return <Button variant="contained">Hello World</Button>;
}

In the interactive demo below, try changing the code and see how it affects the output. (Hint: change variant to "outlined" and color to "secondary". For more options, see the Button component page in our docs.)

Questions

For how-to questions that don't involve making changes to the code base, please use Stack Overflow instead of GitHub issues. Use the "mui" tag on Stack Overflow to make it easier for the community to find your question.

Examples

Our documentation features a collection of example projects using Material UI.

Documentation

Premium themes

You can find complete templates and themes in the MUI Store.

Contributing

Read the contributing guide to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.

Contributing to MUI Core is about more than just issues and pull requests! There are many other ways to support MUI beyond contributing to the code base.

Changelog

The changelog is regularly updated to reflect what's changed in each new release.

Roadmap

Future plans and high-priority features and enhancements can be found in our roadmap.

License

This project is licensed under the terms of the MIT license.

Security

For details of supported versions and contact details for reporting security issues, please refer to the security policy.

Sponsoring services

These great services sponsor MUI's core infrastructure:

GitHub lets us host the Git repository and coordinate contributions.

Netlify lets us distribute the documentation.

Crowdin lets us translate the documentation.

BrowserStack lets us test in real browsers.

CodeCov lets us monitor test coverage.

Comments

[RFC] v5 styling solution 💅
This RFC is a proposal for changing the styling solution of Material-UI in v5.

TL:DR; the core team proposes we go with emotion

What's the problem?

Maintaining & developing a great styling engine takes a considerable amount of time. We have experienced it first hand. Over the last 12 months, we have preferred to invest time on our core value proposition: the UI components, rather than improve the style engine. Working on it has a high opportunity cost.

We have been facing issues with supporting dynamic styles for the components. The performance of our custom dynamic styles implementation (based on props) isn't great (see the performance benchmarks below). This is seriously limiting the quality of the Developer Experience we can provide. It's a blocker for improving our API around customizability or ease of writing styles. For instance, it will unlock: style utils props, color variant, and custom variant.

The React community, at large, hasn't voted for using JSS at scale (JSS is great and still used). 3 years ago we bet on the best option available. We have to recognize better options are available now. We can move faster and unlock better DX/UX by building on top of a more popular, existing, styling solution.

Many developers use styled-components to override Material-UI's styles. End-users find themselves with two CSS-in-JS libraries in their bundle. Not great. It would be better if we could offer different adapters for different CSS-in-JS libraries. (Potential problems: we may need to re-write the core styles to match the syntax of the engine used 🤷‍♀️)

What are the requirements?

Whatever styling engine we choose to go with we have to consider the following factors:

performance: the faster the better but we are willing to trade some performance to improve the DX.

bundle size: below our current 14.3 kB gzipped would be great.

support concurrent mode: @material-ui/styles has partial support as I'm writing.

support SSR

simple customization

allow dynamic styling

good community size

theming

flat specificity

RTL

TypeScript

It would be nice if it can support the following:

zero-config from the perspective of Material-UI consumers

streaming https://github.com/mui-org/material-ui/issues/8503

source map

What are our options?

styled-components

emotion

JSS (currently wrapped in material-ui)

styletron

Aphrodite

fela

else?

Comparison

Performance

Here are benchmarks with dynamic styles of several popular libraries (note the Material-UI v4 only use static styles which have good performance):

PR for reference: https://github.com/mnajdova/react-native-web/pull/1

Based on the performance, I think that we should eliminate: JSS (currently wrapped in @material-ui/styles), styletron, and fela. That would leave us with:

styled-components

emotion

Aphrodite

~~JSS~~

react-styletron

~~fela~~

Dynamic props

Based on the open issues, it seems that Aphrodite doesn't support dynamic props: https://github.com/Khan/aphrodite/issues/141 which in my opinion means that we should drop that one from our options too, leaving us with:

styled-components

emotion

~~Aphrodite~~

react-styletron

npm

While styled-components and emotion are both libraries are pretty popular, react-styletron at the time or writing is much behind with around 12500 downloads per week (this in my opinion is a strong reason why we should eliminate it, as if we decide to go with it, the community will again need to have two different styling engine in their apps).

Here is the list rang by the number of Weekly downloads at the time of writing:

Note that storybook has a dependency on emotion. It significantly skews the stats.

styled-components

emotion

~~react-styletron~~

Support concurrent mode

emotion: YES. Since v10 it is strict mode compatible based on their announcement post. I have tested it on a simple project that works as expected.

styled-components: Partial. There is at least one bug with global styles in strict mode.

SSR

emotion: YES. https://emotion.sh/docs/ssr. Also has an interesting no configuration support for prototyping only.

styled-components: YES. https://styled-components.com/docs/advanced

Stars

styled-components: 30.6k

emotion: 11.4k

~~JSS~~: 5.9k

Trafic on the documentation

SimilarWeb estimated sessions/month:

~~sass-lang.com~~: ~476K/month (for comparison)

styled-components.com: ~239K/month

emotion.sh: ~59K/month

~~cssinjs.org~~: <30k/month (for comparison)

Users feedback

Based on the survey, 53.8% percent are using the Material-UI styles (JSS), which is not a surprise as it is the engine coming from Material-UI. However, we can see that 20.4% percent are already using styled-components, which is a big number considering that we don't have direct support for it. Emotion is used by around 1.9% percent of the developers currently based on the survey.

Having these numbers we want to push with better support for styled-components, so this is something we should consider.

Browser support

emotion: modern evergreen browsers + IE11

styled-components: not documented for v5, but the previous versions support the following

Bundle size

emotion: 11.2kB

styled-components: 12.5kB

What's the best option?

Default engine

Even if we decide to support multiple engines, we would still need to advocate for one by default and have one documented in the demos.

styled-components

Pros:

Has the biggest community, people love to use it.

Performance starting from v5 is good.

Cons:

It will mean that all components styles need to be created using the styled API, which means for developers they will always have wrapper components if they need to re-style.

Lack of full concurrent support, which may create blockers down the road.

emotion

Pros:

Relatively large community, growing.

Good performance.

Concurrent mode + SSR would be possible out of the box.

The CSS prop can be useful for overrides.

Source map support.

A bit smaller.

Cons:

The default SSR API should likely be discouraged for the advanced API instead.

Support multiple

We may try to support multiple CSS-in-JS solutions, by providing our in house adapters for them. Some things that we need to consider is that, that we may have duplicate work on the styles, as the syntax is different between them (at least jss compared to styled-components/emotion). We will reuse the theme object no matter what solution we will pick up.

The less involved support for this may come from the usage of the styled, as people may do some webpack config to decide which one to use - (this is just something to consider).

Additional comments

Deterministic classnames on the components that can be targeted for custom styles

Regarding how the classes look and how developers may target them, I want to show a comparison of what we currently have and how the problem can be solved with the new approach.

As an example, I will take the Slider component. Here is currently how the generated DOM look like:

Each of the classes has a very well descriptive semantic and people can use these classes for overriding the styles of the component.

On the other hand, emotion, styled-components or any other similar library will create some hash as a class name. For us to solve this and offer the developers the same functionality for targeting classes, each of the components will add classes that can be targeted by the developers based on the props.

This would mean that apart from the classes generated by emotion, each component will still have the classes that we had previously, like MuiSlider-root & MuiSlider-colorPrimary, the only difference would be that this classes will now be used purely as selectors, rather than defining the styles for the components. This could be implemented like a hook - useSliderClasses

Conclusion

No matter which solution we would choose, we would use the styled API, which is supported by the two of them. This will allow us down the road to have easier support for styled + unstyled components (probably with webpack aliases, like for using preact).

After we investigated the two options we had in the end, the core team proposes we go with emotion. Some key elements:

A small migration cost between styled-components and emotion

Developers already using styled-components should be able to use emotion with almost no effort.

There are different ways for adding overrides other than wrapper components

The support of cx + css from emotion can be beneficial for developers to use it as an alternative for adding style overrides if they don't want to create wrapper components.

Concurrent mode is for sure supported :+1:

Kudos to @ryancogswell for doing a deeper investigation on this topic. So far we did not find anything in @emotion's code that would give us concern that concurrent mode wouldn't work. We were also looking into createGlobalStyle from styled-components as a comparison to emotion's Global component. It is doing most of its work during render (inherently problematic for Strict/Concurrent Mode) and just using useEffect for removing styles in its cleanup function. createGlobalStyle needs a complete rewrite before it will be usable in concurrent mode -- it isn't OK for it to add styles during render if that render is never committed. It looks like someone has tried rewriting it with some further changes in the last month, so we will need to follow this progress.

How is the specificity handled

Emotion's docs recommend doing composition of CSS into a single class rather than trying to leverage styles from multiple class names. In v5, our existing global class names would be applied without any styles attached to them. The composition of emotion-styled components automatically combines the styles into a single class. This potentially gets rid of these stylesheet order issues at least internal to the styles defined by Material-UI, because every component's styles are driven by a single class name :+1:. So we would have the global class names (for developers to target in various ways for customizations) and then a single generated (by emotion) class name per element that would consolidate all the CSS sources flowing into it. Specificity is then handled by emotion based on the order of composition. All compositions using emotion (whether render-time or definition-time composition) results in a single class on the element. styled-components does NOT work this way concerning render-time composition (definition-time composition does get combined into a single class). The same composition in styled-components results in multiple classes applied to the same element and the specificity does not work as I would have intended.

Alternatives

[RFC] Migrate to styled-components

What do you think about it?
discussion
opened by mnajdova 239
[RFC] Migrate to styled-components

Can we switch to styled-components?

Outdated comparison

It has many advantages against JSS Here comparison table, and next version is even going to avoid SSR styles re-render!

Features | styled-components | react-jss ------------ | ------------- | ------------- No build requirements | ✅| ✅ Small and lightweight | ✅ | ✅ Supports global CSS | ✅ | ✅ Supports entirety of CSS | ✅ | ✅ Colocated | ✅ | ✅ Isolated | ✅ | ✅ Doesn’t break inline styles | ✅ |✅ Easy to override | ✅ | ✅ Theming | ✅ | ✅ Server side rendering | ✅ | ✅ No wrapper components | ❌ | ✅ ReactNative support | ✅ | ❌

Legend: ✅ = Yes, ❌ = No, 😕 = Kinda, refer to notes or parentheses

new feature discussion

opened by kybarg 167
[Menu] Support Cascading Menus
Preview: https://deploy-preview-20591--material-ui.netlify.app/components/menus/#cascading-menu

I'd like to submit this solution to Cascading Menu support. Features of this solution include:

Infinite nesting

Supports any implementation you can do with current Menu and MenuItem

Full Keyboard support

ARIA support

RTL support

Very customizable

Only native, already existing components: Menu and MenuItem

Zero impact on pre-existing Menu and MenuItem implementations, i.e. No breaking changes

It uses a familiar and intuitive implementation pattern:

And best of all, it works.

Please take a look and let me know what you think. Thanks!

Closes #11723

TODO

[x] Agree on the API

[x] Replace assert with expect

[x] Replace enzyme with testing-library

[x] Keeping previously open sub-menu highlighted. For instance:

[x] Fix focus visible style not correctly applied when closing a sub menu.

[ ] Use a triangle of interactivity:

[ ] Alternate placement when there isn't enough space: (might be deferred until Menu Popover is replaced with Popper)

new feature PR: out-of-date component: menu
opened by EsoterikStare 158
Support React Native
Absolutely beautiful library. Any plans to port it to React-Native in the future?

Benchmarks

https://github.com/callstack/react-native-paper

https://github.com/xinthink/react-native-material-kit

https://github.com/xotahal/react-native-material-ui

https://github.com/binggg/mrn

https://github.com/lightningtgc/react-native-material-ui

https://github.com/invertase/react-native-material-design

out of scope new feature
opened by chadobado 120
Can the typings be simplified to improve performance?
As suggested by @eps1lon in #18128, I'm creating this issue as a place to discuss the Material-UI typings and whether they can be simplified to reduce the amount of time spent checking them, especially during editing.

There's always a tension between having the most exact types (which provide the best errors and editor completions) and having the fast type checking (the far end of the spectrum being any).
Issues like https://github.com/microsoft/TypeScript/issues/34801 suggest that Material-UI might benefit from relaxing the exactness in order to gain back some perf.

From the repros I've investigated so far, a lot of the slowness seems to come from the large number of CSS property names (see https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/src/withStyles/withStyles.d.ts). Not being an active CSS user myself, I have some naive questions:

Am I correct in assuming that having a name and type for each well-known CSS property is incredibly valuable and isn't something we could give up?

The CSSProperties type appears to exist to support "pseudo selectors and media queries", which - according to my limited reading - seem to be named bags of additional CSS properties. a) Are these bags themselves recursive or is there only a single additional layer? That is, do you go from width to foo.width or to foo.bar.width, etc? If it's just one level, simplifying the types cuts my local repro from 4.6 seconds down to 3.6 seconds (i.e. big win). b) I played around with the types myself and couldn't come up with anything better than BaseCSSProperties[keyof BaseCSSProperties], but - as I'm guessing you're aware - that's not a very useful type. It basically says that any CSS property can have the type of any (other) CSS property - that's only slightly better than any.

In StyleRules, if there are no properties, you get either CSSProperties or () => CSSProperties (which I will sloppily call "thunked CSSProperties"), which makes sense - the CSSProperties might be lazy. If there are properties, you get either CreateCSSProperties<Props>, which makes sense - the Props might be required to compute the CSSProperties - or (props: Props) => CreateCSSProperties<Props>, which I didn't understand because it's effectively double-lazy - you have pass in the Props once to get the CreateCSSProperties and then again to get individual properties. Why is it "double thunked"?

Separately, I suspect, but have yet to demonstrate that IsEmptyInterface is too expensive for the benefit it provides. However, it's quite possible that I don't fully understand the benefits, so it would helpful to hear more.

Can we work together to find the right balance between accuracy and perf? (Note: "just make the compiler faster" is obviously a viable strategy, but I'd like to get the typings to a good place before we optimize for them.) Thanks!

Pains

https://www.reddit.com/r/reactjs/comments/tauog2/mantine_40_is_out_120_hooks_and_components_with/i045u2l/

https://www.reddit.com/r/reactjs/comments/sbrjxs/choosing_the_right_component_library_for_your/hu1tqmy/

performance typescript priority: important
opened by amcasey 116
[Core] There should be a more sophisticated styling solution.
@callemall/material-ui please leave some input here when you can 👍

We need to decide on a styling solution for 0.16.0 that will help address long standing issues. Outside of performance issues, there are hacks and props all over the place to make up for the fact that we are missing out on some of the powerful features in CSS that cannot be used with inline styles -- pseudo classes, media queries (without matchmedia), etc.

From what I understand, the general consensus is that we want a JS style solution that has the capability to write styles to an actual stylesheet in the DOM.

Here are a few of the maintained solutions that do this: https://github.com/rofrischmann/react-look https://github.com/Khan/aphrodite https://github.com/jsstyles/react-jss

Here are some points we need to consider when implementing the new solution (IMO):

Does it align with our goals? (lightly touched on above)

Implementing media queries that follow the high level breakpoints detailed in the spec that can be easily used in components with a stylesheet mixin (or whatever the implementation we use calls them). If we're overhauling the style implementation, it is the opportune moment to plant the seed for much better responsive UI support in this library. It would be even better if these tools are available in userland too 👍

Should we create layout helper components and/or mixins to help unify flexbox layout implementations across the lib?

Does theming needs to change to maximize best use of the new solution? While theming is one component of consistent styling, we should also look into creating variables for many of the common material styles such as global keylines/font sizes/spacing/margins/etc. I strongly recommend we improve our typography consistency by creating predefined type styles matching the material-ui typography guide, and try match up component elements like titles etc as best possible to these global type style variables as a default.

~~If using a library as large as react-look, try and see how we can import modules for a minimal build size. The full build size is 16kb gzipped which is fairly large. It would be great if we can minimize the impact on build size.~~ I realized that 9kb of that is https://github.com/rofrischmann/inline-style-prefixer which we already use... 😄

performance discussion umbrella
opened by nathanmarks 100
Refactor CSS into Javascript

Move component CSS into Javascript to remove the need for adding CSS/Less files to projects.

Suggest comes from seeing this slideshow https://speakerdeck.com/vjeux/react-css-in-js from @vjeux
customization: css

opened by aranw 95
Improve Material-UI performance
First, thank you very much for this awesome component library! It's great!

I added a drawer in my new app. Mostly, I copypasted drawer example. Just for PoC I multiplied

<Divider /> <List>{mailFolderListItems}</List>

section.

After that it feels very slow, especially on mobile device (nexus 4, cordova with crosswalk 20). I use dev mode, but prod mode doesn't speed up much.

Through react dev tools I noticed that components in mailFolderListItems rendered on every link click in react-router or even menu open. It takes sometime up to 50-60ms to rerender ONE {mailFolderListItems}. I use

const modalProps = { keepMounted: true, // Better open performance on mobile. };

To eliminate uncertainty with other app components, I converted mailFolderListItems to Component and disable rerendering:

class MailFolderListItems extends React.Component<{}, {}> { shouldComponentUpdate() { return false; } render() { return ( <List> <Link to={Routes.Startpage.path}> <ListItem> <ListItemIcon> <InboxIcon /> </ListItemIcon> [...] <Divider /> <MailFolderListItems />

After that this part feels OK.

I found https://github.com/mui-org/material-ui/issues/5628 . I suggest to revisit it. Optimizing shouldComponentUpdate is fundamental and most important step to gain performance. PureComponent is just most common shortcut.

Furthermore, I noticed that very much time (1-2ms and more for EVERY material-ui component) is spended in WithStyles.

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I'm expecting to get most of possible react performance for this great library.

Current Behavior

The app get slower with every material-ui component.

Steps to Reproduce (for bugs)

I don't provide reproducing example yet, because I just copypasted from component demo page, but if needed I can provide codesandbox demo. For browser it's noticeable, if browser slowed down by factor >=5x in performance setting.

Your Environment

| Tech | Version | |--------------|---------| | Material-UI | 1.0.0-beta.38 | | Material-UI Icons | 1.0.0-beta.36 | | React | 16.2.0 | | browser | cordova crosswalk 20 (equals android chrome 50) |
performance discussion
opened by Bessonov 93
[docs] Support live demo editing
[x] I have followed (at least) the PR section of the contributing guide.

Preview: https://deploy-preview-32107--material-ui.netlify.app/components/buttons/

a POC to add live editing for components docs, using react-runner

Code highlighting keeps the same, and with that we don't need a loader to load the demos anymore, just run the code

Fix #26476.
new feature docs PR: out-of-date on hold
opened by nihgwu 92
[RFC] Material-UI v5 🚀
Introduction

Material-UI v4 was released 10 months ago, per our release schedule. It's time to plan for v5. Our GitHub milestone has a due date for October 1st 2020, and while I doubt we will release in time, planning 6 months ahead seems relevant.

Developers made it clear in the past that they don't enjoy breaking changes. This is feedback we took into consideration when designing our versioning strategy, and for each minor/patch releases. The result was to commit to a minimum of 1 year between each major release.

At the same time, the v0 to v1 upgrade was a major breaking change (a rewrite with a brand new API) and yet it was successful. I think that we should be willing (taking the risk) to make bold changes, as long as they fit in the direction we see the community going in the long term (with Material-UI empowering it).

Structural changes

1. Unstyled components

Similar to Angular Material CDK components (Component Development Kit) #6218.

In practice, it could be a new hook version of all the components, something we have started to experiment with the useAutocomplete and usePagination in the lab.

The problem:

The React OSS component community is fragmented. You will find both standalone components for a specific problem, as well as and a growing number of component libraries, with a wide range of API consistency, a11y, bug density, performance, bundle size, quality, and support.

Styling solution usage is fragmented. We can get a glimpse of this by looking at the CodeSandbox usage stats for the style interoperability page:

plain css: 34%

styled components: 30%

global css: 18%

css modules: 12%

emotion: 5%

Developers and designers use different design systems. Material Design doesn't have a monopoly.

How can we help with the unstyled story of notistack, raised by @iamhosseindhv?

Why this solution?:

This will enable Material-UI to stay relevant in the long term. This is a cornerstone of our strapline. It will shift the developer's perception, that Material-UI is, at its core, about providing material to build UIs.

React components for faster and easier web development. Build your own design system, or start with Material Design.

Talking with backend and fullstack users, we know that they are craving for a single component store rather than having to deal with a wide range of dependencies. We could expect the same from front-end developers.

This new "offering" should better resonate with front-end developers. We could expect to gain more and higher quality contributions from the front-end community thanks to this shift.

Based of our current trust, usage, and exposure in the React community, we are well-positioned to gain usage with this new "offering".

Maintaining standalone components is rarely sustainable. I have seen too many projects left abandoned. But by aggregating them in Material-UI, it helps our flywheel. It can incentivize new maintainers to work on the OSS. It can also strengthen our current monetization channels and invest resources back into the OSS components.

It's important to support different style engines and design systems.

2. Full strict mode support

#18018, #13394

The problem:

While developers can set up strict mode in their app to identify incorrect patterns, Material-UI prevents them from keeping this mode enable on a daily basis, as there would be too much noise in the console. We have, for example, disabled it for the Material-UI documentation.

Why this solution?

It's the future.

It helps with the unstyled story.

3. Migrate to styled-components

#6115, #16947

The problem:

We have left important issues related to our styling solution unhandled over the last few months: streaming, strict mode, performance, CSS template support, style functions, class name mismatch, etc.

We need to support dynamic props, this is important for the features we want to implement on the components.

JSS popularity didn't stick with the front-end community.

Why this solution?

A migration to styled-components is our most requested (upvoted) issue to date.

We want to remove the need for the majority of developers to bundle two CSS-in-JS runtimes.

It could be interesting to provide a choice between different style engines. v5's users would be able to replace @material-ui/styles with react-jss.

4. Enable the use of @material-ui/system's props in the core components

#15561

The problem

Naming things is hard.

Indirections can be inefficient.

Why this solution?

This is mainly driven by the positive feedback Tailwind and styled-system have had recently in the community. I enjoy the pattern a lot for one-off layout problems. It's frustrating that only the Box component supports it. I think that it should also cover #6140.

<Typography textAlign={{ xs: 'left', md: 'center' }} /> <Button mt={3}>

Regarding the implementation and final API, we could still reconsider the tradeoff (relying on global class names rather than style functions).

5. Allow the use of dynamic theme variants and colors

#15573 & #13875. Allow breakpoints customization #11649.

I was wondering about revamping the theme structure to match System-UI Theme Specification but we don't see a clear win so far.

Material-UI's theme structure, on its own, is a specification, the structure is set. Assuming that Material-UI aims to support a wide range of components (unstyled or not), matching this spec, not just Material Design, I fail to see a strong advantage a different constraint could yield.

On the cost side, using theme-specification would require to drop some of the features of our theme and require breaking changes. The benefit isn't obvious, but it's something to consider.

Regarding styled-system. I think that we should re-evaluate if we still need @material-ui/system.

Material Design

✅ Checklist

[x] [Checkbox] Make color="primary" the default (#26002)

[x] [Paper] Dark mode brighening based on elevation #18309 (#25522)

[x] [Snackbar] Dark mode color #24438

[x] [Tabs] Improve color management #24286

[x] [Switch] Make color="primary" the default (BC: #26182)

[x] [Radio] Make color="primary" the default (BC #26180)

[x] [Tabs] Remove min-width media query #15824 (BC: #26458)

[x] [Select] Update to match the specification #18493 (BC: #26200)

[x] [Dialog] Flatten DialogTitle DOM structure #19696 (BC: #26323)

[x] ~[Button] Reduce the duration of the transition from 250ms to 200ms https://github.com/mui-org/material-ui/pull/24521#discussion_r562095317~ I don't think this is worth doing now - edited by @siriwatknp

[x] ~[Autocomplete] Consistency with select #18136~ [move to v5.1]

[x] [AppBar] Improve the design #18308 (BC: #26545)

[x] [Checkbox][Switch] Remove dependency on IconButton #21503 (BC: #26460)

[x] [docs] Use the default theme #22112, https://github.com/mui-org/material-ui/issues/21040#issue-618679269

[x] [theme] Dark mode colors #18378

[x] ~Material Design states #10870~ deferred @siriwatknp

[x] ~[Tabs] Update to match the specification #15324~ deferred (can be workaround by css) @siriwatknp

[x] [theme] Improve the breakpoints values #21902

[x] [Menu] Remove MenuItem dependency on ListItem #21587

[x] [Slider] Update to match the spec #20153

[x] [IconButton] Update default size and add large #24045

[x] ~[Button] Update to match the spec #19664~ deferred @siriwatknp

Lab to core components

I think that we can aim to move the following components from the lab to the core:

✅ Components

[x] Alert (#22651)

[x] Autocomplete (#22715)

[x] AvatarGroup #18869 (#23121)

[x] Pagination (#22848)

[x] Rating (#22725)

[x] Skeleton (#22740)

[x] SpeedDial (finally!) (#22743)

[x] Toggle Button (#22784)

The only component I have would propose to handle later on is the TreeView. We still have a couple of important features to implement, and might need to change the API to ship these features. Once we do, we'll start to get more adoption, so the more likely it is that developers will uncover root issues.

Supported browsers

While we plan to keep IE 11 support until v6, We will look into proposing different proposing entry points #18447. and if we can drop older browsers' versions #15496.

Deprecations

✅ List of breaking changes we can introduce with a deprecation during v4.

[x] ~Drop createStyles (see https://github.com/mui-org/material-ui/issues/20012#issuecomment-752125358)~

[x] ~[Portal] Remove Portal disablePortal prop. Maybe we can implement the logic at the Portal component consumer level. https://github.com/mui-org/material-ui/pull/18692#issuecomment-562197612~

[x] [theme] Remove theme.mixins.gutters. I don't believe we document them, nor are they used. (BC: #22109, Dep: #22245)

[x] [theme] Rename theme type -> mode. While the spec use "schema", saying "dark mode" seems to be more common, e.g https://css-tricks.com/dark-modes-with-css/. (BC: #22687, "Dep": #22702 – adaptV4Theme())

[x] [theme] Rename color helpers https://github.com/mui-org/material-ui/issues/13039#issuecomment-476020214. (BC: #22834, Dep: #22837)

[x] [test] Remove enzyme test helpers. They are legacy. It's also a good opportunity to upgrade the documentation #17070. (BC: #21855, #21863, Dep: #24074)

[x] Remove the onX* transition props from Dialog, Snackbar, Menu & Popover, https://github.com/mui-org/material-ui/issues/17047#issuecomment-523549825. (Snackbar BC: #22107, Dep: #22206; Popover BC: #22184, Dep: #22202; Dialog BC: #22113, Dep: #22114; Menu BC: #22212, Dep: #22213)

[x] Remove RootRef, it relies on ReactDOM.findDOMNode(component) that is already deprecated. (BC: #21974, Dep: #24075)

[x] [icons] Change default fontSize prop's value: default -> medium, for consistency with the other components #14993. (BC: #23950, Dep: #23951)

[x] [Accordion] Normalize focusVisible logic (BC: #22567, Dep: #24083)

[x] [Avatar] Rename variant circle -> circular for consistency #21964. (BC: #22015, Dep: #22090)

[x] [Badge] Rename overlap circle -> circular and rectangle -> rectangular for consistency #21964. (BC: #22050, Dep: #22076)

[x] [CircularProgress] Remove one variant. Kill the current determinate variant, rename static => determinate. https://github.com/mui-org/material-ui/issues/7223#issuecomment-566536553. (BC: #22060, Dep: #22094)

[x] [Collapse] Add orientation and horizontal support (BC: #20619, Dep: #24079)

[x] [Dialog] Remove withMobileDialog. #14992. We have already removed it from the documentation. (BC: #23202, Dep: #23570)

[x] [Dialog][Modal] Remove disableBackdropClick (BC: #23607, Dep: #24081)

[x] [Fab] Rename Fab round -> circular for consistency #21964. (BC: #21903, Dep: #24080)

[x] [Grid] Rename prop justify -> justifyContent to match system API. (BC: #21845, Dep: #24078)

[x] [GridList] Rename component to ImageList as more intuitive and better match the wording of the Material Design spec #14994. (BC: #22311, Dep: #22363)

[x] [GridList] Rename Tile to Item (BC: #22385, Dep: #22363)

[x] [GridList] Refactor using CSS grid & React context (BC: #22395, Dep: #22363)

[x] [GridList] Rename spacing prop to gap to align with the CSS attribute. (BC: #22395, Dep: #22363)

[x] [GridList] Rename the GridList cellHeight prop to rowHeight. (BC: #22395, Dep: #22363)

[x] [GridList] Rename the GridListItemBar titlePosition prop to position. (BC: #22395, Dep: #22363)

[x] [Modal] Add support for onKeyDown and remove onEscapeKeyDown (BC: #23571, Dep: #24081)

[x] [Portal] Remove onRendered -> ref. context: https://github.com/mui-org/material-ui/pull/16262#discussion_r294750748. (BC: #22464, Dep: #24082)

[x] [TextareaAutosize] Rename rowsMax -> maxRows for consistency, (BC: #21873, Dep: #23530)

[x] [Table] Rename onChangeRowsPerPage -> onRowsPerPageChange, onChangePage -> onPageChange for consistency. It's a good opportunity to mention this API design choice in the documentation: https://jaketrent.com/post/naming-event-handlers-react/#more-complicated-naming; (BC: #22900, Dep: #23789)

[x] [theme] Remove the fade color helper #13039. (BC: #25895)

[x] [Button] Remove the buttonRef prop. (BC: #25896, Dep: #25897)

[x] [Popover] Remove getContentAnchorEl prop. This method was present to implement a macOS native select like experience. It complicates the implementation of the Popover and could prevent us from moving #17353 forward.

[x] [TextField] The position prop should be required in InputAdornment. (BC: #25891, Dep: #25912)

[x] [Button] Change LoadingButton prop pending to loading #21593 (BC: #25874)

[x] [SwitchBase] Remove second onChange argument: event.target.checked is enough. (BC: #25871)

[x] [theme] Remove the exported theme.typography.round helper. (BC: #25914, Dep: #25916)

[x] ~[theme] Remove legacy v4 deprecation Object.defineProperty(spacing, 'unit', {~

[x] ?[theme] Replace theme.direction === 'rtl' -> theme.isRtl.

[x] [Table] Rename padding="default" -> padding="normal" (BC: #25924, Dep: #25990)

[x] [theme] Remove function width(key) { return values[key]; }, it's useless. (BC: #25918, Dep: #25993)

[x] [theme] Rename createMuiTheme -> createTheme to match ThemeProvider's theme prop. (BC: #25992, Dep: #26004)

[x] ~?[theme] Flatten colors to support CSS variables as theme option #12827~ later

For a list of committed breaking changes and associated deprecations, see: https://github.com/mui-org/material-ui/issues/22074

Breaking changes

Unlike the previous section, these are breaking changes we can't gracefully warn against.

[x] ~? [AppBar] Change default position from fixed to static. What's the most frequent AppBar position?~

[x] ~? Rotate 180° icons to only include one? Involve: TablePagination, Pagination or DatePicker~.

[x] ~[Slider] Fix the class names naming. track and rail means the same thing.~

[x] [Container] Revisit max-width values to be more useful #21902

[x] [core] Only support node >= 10 https://github.com/mui-org/material-ui/pull/19301#issuecomment-575991456 (#22814)

[x] [theme] Remove dead palette.text.hint key

[x] [theme] Always return value with 'px' unit in the spacing function breaking change enhancement #16205 (#22552)

[x] [theme] Breakpoints down use interval. Same as https://github.com/ionic-team/ionic/blob/master/BREAKING.md#display-classe #13448 (#22695)

[x] [Chip] Change variant default value #18914 (#22683)

[x] [Divider] Use border instead of block content (#18965)

[x] [Pagination] Rename round -> circular for consistency #21964. (#22009)

[x] [Popper] Figure out what we do with popper.js, we have 4 options upgrade, remove it, rewrite it, fork it #19358 (#21761)

[x] [Skeleton] Rename variant circle -> circular and rect -> rectangular for consistency #21964. (#22053)

[x] [Slider] Custom tooltip ignores valueLabelFormat and valueLabelDisplay #17905.

[x] [Snackbar] Change default position. Change the default position of the snackbar on desktop to bottom left. This will better be aligned to the behavior of material.io, Gmail, Google Keep, notistack, etc. (#21980)

[x] [Stepper] Remove Paper component #18423 (#22564)

[x] [Textfield] Change the default variant -> outlined. Per https://medium.com/@brianisrighthere/material-studies-text-fields-f029b3b38020. (#23503)

[x] [CssBaseline] Apply body2 -> body1 #17100. (#24018)

[x] [types] Remove deprecated SimplifiedPropsOf/Simplify types. #24750

https://github.com/mui-org/material-ui/blob/7a4bd5807959b0069be9b5f40ba80eaae9ace2c8/packages/material-ui/src/OverridableComponent.d.ts#L65-L74

[x] ~[typescript] Only support TypeScript 3.8 and onwards. Omit was added in 3.5, can be removed from @material-ui/types.~

[x] [Select] Change the default variat as TextField https://github.com/mui-org/material-ui/pull/24180#issuecomment-752773145. #24895

[x] [Box] Remove the clone prop #18496 (BC #26031)

[x] [core] Remove deprecated innerRef prop, forwardRef do the job now. (BC #26028)

[x] [Select] Remove labelWidth prop #22799 (BC: #26026)

[x] [Hidden] Remove component #19704. The CSS API can be replaced with the Box, the JS API can be replaced with useBreakpoint or useMediaQuery. (BC: #26135)

[x] Remove withWidth, replace with useBreakpoint() #17350. (BC: #26136)

[x] [theme] Remove MuiThemeProvider alias. ThemeProvider is enough. https://github.com/mui-org/material-ui/pull/22791/files#r499154080 (BC: #26171)

[x] [Autocomplete] Rename the reasons for consistancy. 'create-option' is not OK. It should be camelCase. (BC: #26172)

[x] ~[Select] Replace with #21782 (PR #26221)~ Do in the lab instead

[x] [Autocomplete] Polish the pseudo-classes customization API #19692 (BC: #26181)

[x] ~[Grid] Remove the type exports, developers don't need them. https://github.com/mui-org/material-ui/issues/19572#issuecomment-583070229 (BC: #26187)~ https://github.com/mui-org/material-ui/blob/9f3c45b1f7fbb7c2095b61c30a3e0659f21dd5cf/packages/material-ui/src/Grid/Grid.d.ts#L8

[x] [Select] CSS API's 'selectMenu' maps to the same element as 'select' #11646. (BC: #26186)

[x] [Autocomplete] getOptionSelected is confusing, rename to optionEqualValue #24855 (BC: #26173)

[x] [core] Normalize file location. #23208 (BC: #26265)

[x] ~Improve the color prop handling #13028~ [move to v5.1]

[x] [List] Improve <ListItem button> #13597 (PR: #26446)

[x] Check if Button > span still required. (PR: #26666, #26801)

[x] ~[CssBaseline] Improve CSS reset, can we leverage any of https://hankchizljaw.com/wrote/a-modern-css-reset/, https://github.com/sindresorhus/modern-normalize/blob/master/modern-normalize.css~ deferred @siriwatknp.

[x] Remove wrapper in BottomNavigationAction

[x] ~ref attribute is not the root element #19613~ [move to v5.x]

Timing

I think that we can try the following:

Deprecation preparation. (starts now)

Create the next branch, publish the next versions under https://next.material-ui.com/ and the next npm tag. (April?). Stop all efforts on the v4.x version. Put the master branch (v4.x) in a low maintenance mode, only handle security fixes.

Work on the above items, in whatever order is simpler, keep the same release schedule, once a week, with alpha first.

Once we have handled all the breaking changes and confidence with the architectural choices move to a beta stage. Once we are confident with the implemented features, start release candidates.

Current progress 109/109

Array.from(document.querySelectorAll('.contains-task-list')[2].children) .concat(Array.from(document.querySelectorAll('.contains-task-list')[3].children)) .concat(Array.from(document.querySelectorAll('.contains-task-list')[1].children)) .concat(Array.from(document.querySelectorAll('.contains-task-list')[0].children)) .reduce((acc, item) => { if (item.querySelector('input[type="checkbox"]:checked')) { acc.done += 1; } acc.total += 1; return acc; }, { total: 0, done: 0 });

umbrella
opened by oliviertassinari 92
[Stepper] Add new component

Closes #2722.

I just created**_ Vertical Stepper_** include animation, linear step, non-linear step, optional step. To be clear and easy to handle logic how to active a step and when the step is completed, the component delegate the implementation of those function to user(who use this component) to handle logic by themselves. This is a picture to demonstrate how it work Please take a look at this component. Thank you so much :)

opened by namKolo 83
[Alert] Background color mismatch with Figma's design kit
Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Steps to reproduce 🕹

Hi, we're currently trying to use the MUI Alert component but we found some mismatch between the background colors, and we think we found the root cause.

Current behavior 😯

On Alert Component page, the background variant color are:

error: #fdeded

warning: #fff4e5

info: #e5f6fd

success: #edf7ed

Expected behavior 🤔

However, on our MUI for Figma Material Pro v5.9.0 which should be similar to this community version, the color for the background are:

error: #fbeaea

warning: #fdf0e6

info: #e6f3fa

success: #eaf2ea

Context 🔦

Our design team is using the Figma version and they are confused because of this mismatch. We're hoping for both to use the same background colors

We have also gone in and check for the code of the Alert component and it seems like this is because of this condition

I think change from getBackgroundColor(theme.palette[color].light, 0.9) to getBackgroundColor(theme.palette[color].main, 0.9)

Your environment 🌎

npx @mui/envinfo

Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here.

status: needs triage
opened by phongdang707 0
Styled FormControl and InputLabel does not accept `component` prop in Typescript
Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

https://codesandbox.io/s/dry-monad-td0gep?file=/src/App.tsx

Steps:

Current behavior 😯

The documentation says that InputLabel also accepts the props of FormLabel. The documentation has component as a valid prop on FormLabel so I would expect InputLabel to accept it, yet it does not.

Also, when you style a FormControl then the component prop does not work either

Expected behavior 🤔

I should be able to add component to InputLabel and Typescript should not complain.

Context 🔦

I am trying change the component used in the InputLabel to be a legend to and the FormControl as a fieldset

Your environment 🌎

npx @mui/envinfo

System: OS: macOS 12.6.2 Binaries: Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node Yarn: Not Found npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm Browsers: Chrome: 108.0.5359.124 Edge: Not Found Firefox: 108.0.1 Safari: 16.2 npmPackages: @emotion/react: ^11.10.5 => 11.10.5 @emotion/styled: ^11.10.5 => 11.10.5 @mui/base: 5.0.0-alpha.112 @mui/core-downloads-tracker: 5.11.3 @mui/icons-material: ^5.11.0 => 5.11.0 @mui/material: ^5.11.3 => 5.11.3 @mui/private-theming: 5.11.2 @mui/styled-engine: 5.11.0 @mui/system: 5.11.2 @mui/types: 7.2.3 @mui/utils: ^5.11.2 => 5.11.2 @types/react: 17.0.52 => 17.0.52 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 typescript: 4.9.4 => 4.9.4

typescript status: needs triage component: FormControl
opened by heath-freenome 0
typo in `console.error` in `packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js`
Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

Current behavior 😯

It'll say something like

the ... method of useAutocomplete do not handle the options correctly.

Expected behavior 🤔

It should say something like

the ... method of useAutocomplete does not handle the options correctly.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here.

component: autocomplete status: needs triage
opened by hamirmahal 1
[Joy] Replace `row` prop with `orientation` prop in all Joy UI components
[x] I have followed (at least) the PR section of the contributing guide.

This PR includes:

replacing row prop (of boolean type) with orientation prop (of type 'horizontal' or 'vertical') in Card, List, RadioGroup and some internal components relevant to RadioGroup

replacing row prop with orientation prop in instances of components in Joy demos

making sure that all Joy UI components that have orientation prop to have either vertical or horizontal classname

Codemod script that transforms the prop only for Joy UI components

breaking change package: joy enhancement
opened by hbjORbj 1
[POC] MenuButton - Option 2 implementation

DO NOT MERGE

This is a playground for evaluating the API of a MenuButton component. It implements Option 2 from https://github.com/mui/material-ui/issues/32088#issuecomment-1216305769

Playground:
package: base proof of concept

opened by michaldudak 1

Releases(v5.11.3)

v5.11.3(Jan 2, 2023)
Jan 2, 2023

A big thanks to the 6 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.

@mui/[email protected]

[Select] Update renderValue prop's TypeScript type (#34177) @ZeeshanTamboli

@mui/[email protected]

[Autocomplete][joy] Export component (#35647) @mbranch

Docs

[blog] Fix handling of markdown links (#35628) @oliviertassinari

[docs] Fix demo code selection through copy shortcut key on Firefox browser (#35670) @ZeeshanTamboli

[docs] Fix layout shift when streaming the page (#35627) @oliviertassinari

[docs] Fix switch name to reflect the color (#35052) @rjhcnf

[docs] Fix anchor link in the card's docs and fix a typo (#35634) @ZeeshanTamboli

[docs] Fix layout shift with modal (#35591) @oliviertassinari

[Joy][docs] Add documentation for Input component (#35482) @hbjORbj

[docs][joy] Improved readability on theme tokens page (#35639) @badalsaibo

Core

[core] Disable prefetch of footer links @oliviertassinari

[core] A few SEO fixes (#35672) @oliviertassinari

[core] Remove need for scopePathnames (#35584) @oliviertassinari

[test] Fix Algolia noisy lvl1 anchor (#35686) @oliviertassinari

All contributors of this release in alphabetical order: @badalsaibo, @hbjORbj, @mbranch, @oliviertassinari, @rjhcnf, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)
v5.11.2(Dec 26, 2022)
Dec 26, 2022

A big thanks to the 20 contributors who made this release possible. Here are some highlights ✨:

⚙️ Several MUI Base components were converted to TypeScript by @trizotti, @leventdeniz and @danhuynhdev (#35005, #34793, #34771)

Many other 🐛 bug fixes and 📚 documentation improvements.

@mui/[email protected]

[l10n] Add displayed rows label to faIR locale (#35587) @hootan-rocky

[l10n] Add Kurdish (Kurmanji) locale (#32508) @JagarYousef

[Select] Accept non-component children (#33530) @boutahlilsoufiane

[SelectInput] Update menu to use select wrapper as anchor (#34229) @EduardoSCosta

[TableCell] Fix scope prop to be not set when a data cell is rendered within a table head (#35559) @sai6855

@mui/[email protected]

[utils] mergedeep deeply clones source key if it's an object (#35364) @sldk-yuri

@mui/[email protected]

[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

@mui/[email protected]

[Joy] Fix radius adjustment (#35629) @siriwatknp

[Joy] Apply color inversion to components (#34602) @siriwatknp

[Joy] Improve cursor pointer and add fallback for outlined variant (#35573) @siriwatknp

[Joy] Miscellaneous fixes (#35552) @siriwatknp

[Radio][joy] Use precise dimensions for radio icon (#35548) @hbjORbj

@mui/[email protected]

[Material You] Update Button test & add active class name (#35497) @mnajdova

Docs

[docs] Fix GoogleMaps demo (#35545) @hbjORbj

[docs] Remove flow, its legacy (#35624) @oliviertassinari

[docs] Add a guide on using icon libraries with Joy UI (#35377) @siriwatknp

[docs] Clarify comment about sortStability() use case (#35570) @frontendlane

[docs] Improve the experimental API demos on the button page (#35560) @mnajdova

[docs] Force light theme mode when activePage is null (#35575) @LukasTy

[docs] Fix ListItem button deprecated use (#33970) @MickaelAustoni

[docs] Fix typo in Progress docs (#35553) @jasonsturges

[docs] Remove empty tags on the TransferList demos (#33127) @ekusiadadus

[docs][joy] Add documentation for Stack component (#35373) @hbjORbj

[docs][joy] Add documentation for Grid component (#35374) @hbjORbj

[website] Update sponsor grid (#35452) @danilo-leal

Core

[core] Shorthand notation to remove outline (#35623) @oliviertassinari

[core] Fix header link layout shift and clash (#35626) @oliviertassinari

[core] Hide keyboard shortcut if no hover feature (#35625) @oliviertassinari

[core] Fix confusing duplicated name in the log @oliviertassinari

[core] Fix API demos callout spacing (#35579) @oliviertassinari

[core] Fix a few title case (#35547) @oliviertassinari

[core] Cleanup mention of test-utils (#35577) @oliviertassinari

[core] Remove outdated pickers prop-type logic (#35571) @oliviertassinari

[core] Exclude documentation of Base props not used in styled libraries (#35562) @michaldudak

All contributors of this release in alphabetical order: @boutahlilsoufiane, @danhuynhdev, @danilo-leal, @EduardoSCosta, @ekusiadadus, @frontendlane, @hbjORbj, @hootan-rocky, @JagarYousef, @jasonsturges, @leventdeniz, @LukasTy, @michaldudak, @MickaelAustoni, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @sldk-yuri, @trizotti
Source code(tar.gz)
Source code(zip)
v5.11.1(Dec 20, 2022)
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:

💅 @mnajdova added motion and shape design tokens to Material You package (#35384 and #35393).

Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.

@mui/[email protected]

[Chip] Fix hover and focus style with CSS Variables (#35502) @DimaAbr

[InputLabel] Enable size prop overrides via TypeScript module augmentation (#35460) @MickaelAustoni

[l10n] Change Kazakh locale name to match ISO-639-1 codes (#34664) @talgautb

[TextField] Fix error focus style (#35167) @42tte

[core] Bring experimental_sx back with error code (#35528) @siriwatknp

@mui/[email protected]

[Theme] Merge components and slots props (#35477) @siriwatknp

@mui/[email protected]

[Material You] Add motion design tokens (#35384) @mnajdova

[Material You] Add shape design tokens (#35393) @mnajdova

@mui/[email protected]

[Tooltip] Fix arrow does not appear (#35473) @siriwatknp

[Input] Fix autofill styles (#35056) @siriwatknp

[ChipDelete] Add onDelete prop to ChipDelete (#35412) @sai6855

@mui/[email protected]

[Button][base] Set active class when a subcomponent is clicked (#35410) @michaldudak

[Popper][base] Fix Tooltip Anchor Element Setter (#35469) @sydneyjodon-wk

Docs

[docs] Fixed the Select component onChange event type in the migration guide (#35509) @tzynwang

[docs] Add missing comma to Providing the colors directly section (#35507) @cassidoo

[docs] Add CardMedia example without component="img" prop (#35470) @lucasmfredmark

[docs] Fix unstable_sxConfig typo (#35478) @siriwatknp

[docs] List component introduction example default code is missing ListItemContent component (#35492) @Miigaarino

[website] Close our first people role @oliviertassinari

[website] Update product icons (#35413) @danilo-leal

Core

[test] Terminate BrowserStack after 5 minutes (#35454) @oliviertassinari

[test] Fix broken master branch (#35446) @oliviertassinari

All contributors of this release in alphabetical order: @42tte, @cassidoo, @danilo-leal, @DimaAbr, @lucasmfredmark, @michaldudak, @MickaelAustoni, @Miigaarino, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @sydneyjodon-wk, @talgautb, @tzynwang
Source code(tar.gz)
Source code(zip)
v5.11.0(Dec 13, 2022)
Dec 13, 2022

A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:

🔥 @mnajdova enabled configuration of the sx prop in the theme (#35150)

Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.

@mui/[email protected]

[Alert] Update icon color in all variants (#35414) @danilo-leal

[Select] Fix MenuProps.PopoverClasses being overriden (#35394) @vitorfrs-dev

[SwipeableDrawer] Fixed typescript warning "prop open undefined" (#34710) @kraftware

@mui/[email protected]

[icons] Restore the PhoneInTalk icons (#35409) @michaldudak

@mui/[email protected]

BREAKING CHANGES

[system] Enable configuring the sx prop in the theme (#35150) @mnajdova

The breaking change is regarding an experimental API:

-import { styled, experimental_sx } from '@mui/material/styles'; +import { styled } from '@mui/material/styles'; -const Component = styled('div)(experimental_sx({ p: 1 }}); +const Component = styled('div)(({ theme }) => theme.unstable_sx({ p: 1 }});

@mui/[email protected]

[Joy] Miscellaneous fixes (#35447) @siriwatknp

@mui/[email protected]

[PopperUnstyled] Update PopperTooltip to have correct width when closing with transition (#34714) @EduardoSCosta

@mui/[email protected]

[Material You] Add ripple on the button (#35299) @mnajdova

Docs

[docs] Simplify state management in Text Field demo page (#35051) @PratikDev

[docs] Improve Responsive App bar with Drawer demo (#35418) @ZeeshanTamboli

[docs] Improve line-height readability (#35387) @oliviertassinari

[docs] Improve a bit the Composition docs (#35329) @oliviertassinari

[docs] Refactor ToggleButtonSizes demo (#35375) @Armanio

[docs] Standardize the usage of callouts in the MUI Core docs (#35361) @samuelsycamore

[docs] Format feedback to add a link to the commented section (#35381) @alexfauquette

[docs] Direct users from Material UI to MUI Base 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

Core

[core] Fix @mui/material package building (#35324) @timbset

[core] Fix leaking theme color override (#35444) @oliviertassinari

[typescript] Add null to return type of OverridableComponent (#35311) @tsollbach

[website] Migrate X page to use CSS theme variables (#34922) @jesrodri

[website] Migrate /core page to use CSS variables (#35366) @siriwatknp

All contributors of this release in alphabetical order: @alexfauquette, @Armanio, @danilo-leal, @EduardoSCosta, @flaviendelangle, @jesrodri, @joserodolfofreitas, @kraftware, @michaldudak, @mnajdova, @oliviertassinari, @PratikDev, @samuelsycamore, @siriwatknp, @Spanishiwa, @timbset, @tsollbach, @vitorfrs-dev, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)
v5.10.17(Dec 6, 2022)
Dec 6, 2022

A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:

✨ @mnajdova added a Material You Button playground (#35222)

🔧 @hbjORbj renamed components / componentProps to slots / slotProps prop in Joy UI to create consistency across products (#34997)

Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements

@mui/[email protected]

[Slider] Fix markActive theme class not getting applied (#35067) @ZeeshanTamboli

[SwipeableDrawer] Fix missing close animation when initial open is true (#35010) @sai6855

[material-ui] Add channel colors if possible (#35178) @siriwatknp

[Fab] Increase disabled styles precedence (#35304) @Uzwername

[Rating] Apply labelEmptyValueActive style overrides from theme (#35315) @sai6855

@mui/[email protected]

[system] Add support for nested CssVarsProvider (#35277) @siriwatknp

@mui/[email protected]

BREAKING CHANGE

[Joy] Add slots/slotProps props to the typing of all components and apply useSlot to all components (#34997) @hbjORbj

Change all occurrences of components and componentsProps props in Joy UI components to slots and slotProps, respectively.

-<Autocomplete components={{listbox: CustomListbox}} componentsProps={{listbox: { className: 'custom-listbox' }}} /> +<Autocomplete slots={{listbox: CustomListbox}} slotProps={{listbox: { className: 'custom-listbox' }}} />

You can use this codemod to help with the migration.

Changes

[Joy] Miscellaneous fixes (#35345) @siriwatknp

[Joy][textarea] Expose decorator classes (#35247) @zignis

Docs

[docs] Improve spacing with ul (#35302) @oliviertassinari

[docs] Correct grammatically incorrect sentences in CONTRIBUTING.md (#34949) @Pandey-utkarsh

[docs] Move the demo higher in the API TOC (#35202) @oliviertassinari

[docs] Fix incorrect link in minimizing-bundle-size (#35297) @Juneezee

[docs] Revise and expand Joy UI "Breadcrumbs" page (#35292) @samuelsycamore

[docs] Fix wrong import in the unstyled tabs page (#35310) @guotie

[docs] Disable translations (#34820) @mnajdova

[docs] Fix typo (#35312) @flaviendelangle

[docs] Add Material You Button playground (#35222) @mnajdova

[docs] Fix experimental API page duplication (#35213) @oliviertassinari

[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 MUI Base 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

Core

[core] Use componentStyles.name over componentName (#35303) @oliviertassinari

[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

[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
Source code(tar.gz)
Source code(zip)
v5.10.16(Nov 28, 2022)
Nov 28, 2022

A big thanks to the 13 contributors who made this release possible. This release contains various 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.

@mui/[email protected]

[Autocomplete] Fix inferred value type when multiple prop is true (#35275) @fenghan34

[Chip] Add skipFocusWhenDisabled prop to not allow focussing deletable chip if disabled (#35065) @sai6855

[Chip] Remove unnecessary handleKeyDown event handler (#35231) @ZeeshanTamboli

[FormControl] Add missing types in useFormControl (#35168) @ZeeshanTamboli

[IconButton] Add missing color classes (#33820) @Zetta56

[SwipeableDrawer] Make paper ref accessible (#35082) @sai6855

@mui/[email protected]

[system] Remove unnecessary parsed theme (#35239) @siriwatknp

[theme] Fix TypeScript type for custom variants in responsive font sizes (#35057) @ZeeshanTamboli

@mui/[email protected]

[Base] Allow useSlotProps to receive undefined elementType (#35192) @leventdeniz

Docs

[docs] Improve feedback precision (#34641) @alexfauquette

[docs] Add Black Friday notification @oliviertassinari

[docs] Fix migration feedback (#35232) @alexfauquette

[docs] Improve the useSelect demo styling (#33883) @michaldudak

[docs] Fix layout jump on first mistake (#35215) @oliviertassinari

[docs] Support demos with side effect imports (#35177) @m4theushw

[examples] Fix Next.js errors (#35246) @oliviertassinari

[examples] Updated Remix examples with the lates changes using React 18 (#35092) @58bits

Core

[core] Remove unused pattern (#35165) @iamxukai

[core] Fix Base version in changelog (#35224) @siriwatknp

[core] Migrate describeConformance to TypeScript (#35193) @flaviendelangle

[core] Skip CI for docs and examples paths (#35225) @siriwatknp

All contributors of this release in alphabetical order: @58bits, @alexfauquette, @fenghan34, @flaviendelangle, @iamxukai, @leventdeniz, @m4theushw, @michaldudak, @oliviertassinari, @sai6855, @siriwatknp, @ZeeshanTamboli, @Zetta56
Source code(tar.gz)
Source code(zip)
v5.10.15(Nov 22, 2022)
A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:

🚀 @mnajdova added the button as the first component that implements Material You design (MD3)

🌐 @MBilalShafi added Urdu (Pakistan) localization

Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements

@mui/[email protected]

[Autocomplete] Fix keyboard navigation when using custom popover (#35160) @sai6855

[typescript] Add background.defaultChannel to CssVarsPalette (#35174) @alexfauquette

[l10n] Add Urdu (ur-PK) locale (#35154) @MBilalShafi

@mui/[email protected]

[icons] Update the Material Design icons (#35194) @michaldudak

@mui/[email protected]

[Material You] Add theme structure & Button component (#34650) @mnajdova

@mui/[email protected]

[Select] Add attributes to conform with ARIA 1.2 (#35182) @michaldudak

Docs

[docs] Fix a couple documentation errors (#35217) @danilo-leal

[docs] Change MUI -> Material UI in icons-material's readme (#35220) @michaldudak

[docs] the pages have no <link rel=canonical so we need to tell Google to not index the staging envs @oliviertassinari

[docs] Fix confusion in TOCs when reaching scroll bottom (#35214) @oliviertassinari

[docs] Fix typos in section titles (#35025) @iamxukai

[docs] Fix typo in legacy date picker migration guide @oliviertassinari

[docs] Iterating on recent Joy UI Component page updates (#35162) @samuelsycamore

[docs] Inform that pickers are in X repository (#35189) @alexfauquette

[docs] Explain how the error prop works in the Unstyled Input (#35171) @michaldudak

[docs] Hotfix missing styles in dark mode (#35179) @siriwatknp

[docs] Add Joy UI theme typography page (#34811) @siriwatknp

[docs] Fix undo/redo in live editor (#35163) @oliviertassinari

[docs] Revise the Joy UI "Avatar" component page (#35152) @samuelsycamore

[docs] Make navbar backdrop filter consistent with website (#35157) @danilo-leal

[docs] Host CodeSandbox on MUI org (#35110) @oliviertassinari

[docs] Uplift introduction demos & make consistent with Base (#34316) @danilo-leal

[website] Add Security questionnaire in pricing (#35172) @oliviertassinari

[website] Fix theme mode toggle state (#35216) @siriwatknp

[website] Exclude experiment pages in production (#35180) @siriwatknp

[website] Disable SEO for performance pages (#35173) @oliviertassinari

Core

[core] Convert icons scripts to ESM (#35101) @Janpot

[core] Group renovate GitHub Action dependency updates @oliviertassinari

[core] Upgrade eslint-config-airbnb-typescript (#34642) @Janpot

[core] Ensure that prettier CI step fails when code is badly formatted (#35170) @michaldudak

All contributors of this release in alphabetical order: @alexfauquette, @danilo-leal, @iamxukai, @Janpot, @MBilalShafi, @michaldudak, @oliviertassinari, @samuelsycamore, @siriwatknp
Source code(tar.gz)
Source code(zip)
v5.10.14(Nov 15, 2022)
Nov 15, 2022

A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:

🚀 @siriwatknp added the Autocomplete component to the Joy UI (#34315)

♿ @sfavello improved the accessibility of the Material UI's Autocomplete by adding support for the Delete key (#33822)

Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.

@mui/[email protected]

[Material UI] Add palette.background.defaultChannel token (#35061) @siriwatknp

[Autocomplete] Remove tags with the Delete key (#33822) @sfavello

[IconButton] custom color causes type error (#34521) @kushagra010

@mui/[email protected]

[Unstable_Gridv2] sorted responsize keys based on breakpoint value (#34987) @sai6855

@mui/[email protected]

[Joy] Export FormControl, LinearProgress and ListSubheader components from @mui/joy (#35003) @Studio384

[Joy] Miscellaneous fixes (#35044) @siriwatknp

[Joy] Add Autocomplete component (#34315) @siriwatknp

[Joy] Saturate a bit the gray palette (#35148) @danilo-leal

[Autocomplete][joy] Fix types (#35153) @siriwatknp

Docs

[blog] Fix font size of code blocks on iOS @oliviertassinari

[docs] Accessibility - increase default contrastThreshold for WCAG AA compliance (#34901) @kennethbigler

[docs] Correct the keepMounted section on the Drawer page (#35076) @michaldudak

[docs] Fix code editor styles mismatches (#35108) @oliviertassinari

[docs] Allows to access the next MUI-X (#34798) @alexfauquette

[docs] Fix bugs with live edit demos (#35106) @oliviertassinari

[docs] Fix MarkdownElement regression from adding CSS variables (#35096) @siriwatknp

[docs] Add a new gold sponsor (#35089) @hbjORbj

[docs] Fix scroll issue on expanded live demos (#35064) @bharatkashyap

[docs] Improve alignment of the sponsors @oliviertassinari

[docs] Improve code font family v2 (#35053) @oliviertassinari

[docs] Upgrade to Next.js 13 (#35001) @mnajdova

[docs] Fix typo in changelog @oliviertassinari

[docs] Update Joy UI templates to use latest components (#35058) @siriwatknp

[website] Fix design kits showcase throwing an error (#35093) @cherniavskii

[website] Fix margin bug on CTA @oliviertassinari

[website] Link respective repositories in product pages (#35046) @sidtohan

[website] Migrate blog pages to use CSS theme variables (#34976) @siriwatknp

[website] Update DoiT International logo and links with new brand (#35030) @ofir5300

[website] Improve visual design app bar (#35111) @oliviertassinari

Core

[core] Convert scripts to ES modules (#35036) @michaldudak

[core] Show the whole version to make blame easier @oliviertassinari

[core] Polish GitHub Action version @oliviertassinari

[core] Ignore icons to speed up CodeQL @oliviertassinari

[core] Feedback on branch protection @oliviertassinari

[core] Revert CI (#35098) @siriwatknp

[core] Fix job name to match the CI (#35097) @siriwatknp

[core] ESLint fixes for tests (#34924) @Janpot

[core] Ignore unrelated folders from github actions (#35028) @siriwatknp

[core] Use pretty-quick instead of custom script (#34062) @Janpot

All contributors of this release in alphabetical order: @alexfauquette, @bharatkashyap, @cherniavskii, @danilo-leal, @hbjORbj, @Janpot, @kennethbigler, @kushagra010, @michaldudak, @mnajdova, @ofir5300, @oliviertassinari, @sai6855, @sfavello, @sidtohan, @siriwatknp, @Studio384
Source code(tar.gz)
Source code(zip)
v5.10.13(Nov 7, 2022)
Nov 7, 2022

A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:

🚀 The slots API has been introduced to the Material UI package by @michaldudak (#34873).

🔥 Live editing of demos is stabilized by @oliviertassinari (#34870).

Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.

@mui/[email protected]

[material-ui] Introduce the slots API (#34873) @michaldudak

[NativeSelectInput] Support CSS theme variables (#34975) @siriwatknp

@mui/[email protected]

[system] Add a missing key attribute in getInitColorScheme to fix key issue (#34992) @akshaya-venkatesh8

@mui/[email protected]

[base] Avoid calling setState during renders (#34916) @Janpot

@mui/[email protected]

[Select] Fix custom options menu not opening on Avatar click (#34648) @shivam1646

Docs

[docs] Add a guide for setting dark mode by default (#34839) @siriwatknp

[docs] Improve code font family (#35027) @oliviertassinari

[docs] Revise and expand Joy UI "Alert" page (#34838) @samuelsycamore

[docs] Live demos v2 (#34870) @oliviertassinari

[docs] Fix 301 links in the docs @oliviertassinari

[docs] Fix code display in RTL (#34951) @oliviertassinari

[docs] New API design rule disabled > disable (#34972) @oliviertassinari

[docs] Explain the usage of Select's onOpen/onClose in the uncontrolled mode (#34755) @michaldudak

[docs] Add a new gold sponsor (#34984) @hbjORbj

[docs] Add author and published_time meta tags (#34382) @alexfauquette

[examples] Next.js examples v13 - fonts (#34971) @PetroSilenius

[examples] Next.js examples v13 - links (#34970) @PetroSilenius

[website] Update IPinfo.AI name @oliviertassinari

[website] Remove date-io from the docs dependencies (#34748) @michaldudak

[website] Migrate Design-kits page to use CSS theme variables (#34920) @jesrodri

[website] Migrate Pricing page to use CSS theme variables (#34917) @trizotti

Core

[core] Remove default access to GitHub action scopes @oliviertassinari

[core] Fix Pinned-Dependencies @oliviertassinari

[core] Fix typos in the component name @oliviertassinari

[core] Fix scorecard regression @oliviertassinari

[core] Create the docs theme once (#34954) @oliviertassinari

All contributors of this release in alphabetical order: @akshaya-venkatesh8, @alexfauquette, @hbjORbj, @Janpot, @jesrodri, @michaldudak, @oliviertassinari, @PetroSilenius, @samuelsycamore, @shivam1646, @siriwatknp, @trizotti
Source code(tar.gz)
Source code(zip)
v5.10.12(Oct 31, 2022)
Oct 31, 2022

A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:

🚀 The LinearProgress component has been added to Joy UI by @hbjORbj (#34514).

Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.

@mui/[email protected]

[Chip] Don't override icon color (#34247) @emlai

[Radio] Skip default hover style when disableRipple is set (#34902) @VinceCYLiao

[SwipeableDrawer] Fix React 18 issues (#34505) @mnajdova

[Tooltip] Save a few bytes (#34853) @oliviertassinari

@mui/[email protected]

[ButtonUnstyled] Update to render as link when href or to is provided (#34337) @EduardoSCosta

@mui/[email protected]

[Joy][circularprogress] Prevent new styles from being generated when value changes (#34897) @hbjORbj

[Joy] Add color inversion feature (#32511) @siriwatknp

[Joy] Add LinearProgress component (#34514) @hbjORbj

Docs

[blog] Add blog post for high-level overview of all MUI products (#34325) @samuelsycamore

[blog] Fix hydration mistmatch (#34857) @oliviertassinari

[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 Safari button misalignment (#34861) @oliviertassinari

[docs] Fix typo in docs title (#34926) @PunitSoniME

[docs] Fix missing emotion prefixes (#34958) @oliviertassinari

[docs] Improve UI display for copy code (#34950) @oliviertassinari

[docs] Standardize all MUI Core "Usage" pages (#34183) @samuelsycamore

[docs] Update templates' readme files to include required dependencies (#34757) @michaldudak

[docs] Fix inconsistent theme colors when applying custom colors in playground (#34866) @cherniavskii

[docs] Fix typo in bottom-navigation.md (#34884) @RoodyCode

[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] Remove one DOM node (#34960) @oliviertassinari

[website] Use span for icon image (#34914) @siriwatknp

[website] Fix subscribe input with Safari (#34869) @oliviertassinari

Core

[core] Ignore compiled icons in CodeQL @oliviertassinari

[core] Add OSSF Scorecard action (#34854) @oliviertassinari

[core] Fix extra GitHub Action permission (#34496) @sashashura

[core] Fix duplicate id @oliviertassinari

[core] Enforce import * as React (#34878) @da0x

[core] A couple of simply fixes from #34870 (#34953) @oliviertassinari

[core] Migrate outdated pattern to convention @oliviertassinari

[core] Pin GitHub Actions dependencies (#34929) @renovate[bot]

[core] Make the reproduction more important in the bug template (#34875) @oliviertassinari

[core] Fix docs GitHub API rate limit (#34856) @oliviertassinari

[core] Fix eslint issues (#34964) @mnajdova

[core] Pin GitHub Action to digests (#34855) @oliviertassinari

[core] Fix permissions in workflow @oliviertassinari

[core] memoize context values for react/jsx-no-constructed-context-values (#34849) @Janpot

[core] Fix @typescript-eslint/default-param-last issues (#34846) @Janpot

[core] Fix HTML validation error (#34860) @oliviertassinari

[core] Fix duplicate CodeQL build @oliviertassinari

[test] Move Firefox tests to CircleCI (#34764) @oliviertassinari

[test] Use screen when possible for simplicity (#34890) @oliviertassinari

All contributors of this release in alphabetical order: @cherniavskii, @DanailH, @EduardoSCosta, @emlai, @hbjORbj, @Janpot, @michaldudak, @mnajdova, @oliviertassinari, @punithnayak, @PunitSoniME, @renovate[bot], @RoodyCode, @samuelsycamore, @siriwatknp, @VinceCYLiao
Source code(tar.gz)
Source code(zip)
v5.10.11(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 MUI Base to create consistency across products

Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements

@mui/[email protected]

[InputBase] Fix onInvalid to use HTMLInputElement | HTMLTextAreaElement Element type (#33162) @KuSh

[Alert] Add components and componentsProps props to allow close action overrides (#33582) @jake-collibra

@mui/[email protected]

BREAKING CHANGE

[base] components -> slots API rename (#34693) @michaldudak

Change all occurrences of components and componentsProps props in Base components to slots and slotProps, respectively.

Change casing of slots' fields to camelCase

-<SwitchUnstyled components={{Root: CustomRoot}} componentsProps={{rail: { className: 'custom-rail' }}} /> +<SwitchUnstyled slots={{root: CustomRoot}} slotProps={{rail: { className: 'custom-rail' }}} />

[base] Make CSS class prefixes consistent (#33411) @michaldudak

This is a breaking change for anyone who depends on the class names applied to Base components. If you use the <component>UnstyledClasses objects, you won't notice a difference. Only if you depend on the resulting class names (e.g. in CSS stylesheets), you'll have to adjust your code.

-.ButtonUnstyled-root { ... }; +.MuiButton-root { ... };

Changes

[test] Test all Base components with describeConformanceUnstyled (#34825) @michaldudak

@mui/[email protected]

[CircularProgress][joy] Fix classnames and add test (#34806) @hbjORbj

[Joy] Allow string type for size prop in components (#34805) @hbjORbj

Docs

Revert "[docs] Fix search icons in other languages (#34823)" @oliviertassinari

Revert "[core] Move SearchIcons to docs src folder (#34802)" @oliviertassinari

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] Polish Crowdin config (#34852) @oliviertassinari

[docs] Fix a few style standard deviations @oliviertassinari

[docs] Enforce no trailing spaces (#34762) @oliviertassinari

[docs] Enforce correct git diff format (#34765) @oliviertassinari

[docs] Fix Toolpad docs 301 route (#34843) @bharatkashyap

[docs] Replace initial value with theme white (#34822) @siriwatknp

[docs] Remove localization redirects (#34844) @mnajdova

[docs] Fix search icons in other languages (#34823) @siriwatknp

[docs] Fix JavaScript capitalization @oliviertassinari

[docs] Update new links to MD2 (#34848) @oliviertassinari

[website] Update future work items on X landing page (#34810) @joserodolfofreitas

[website] Add Toolpad docs to navigation (#34749) @bharatkashyap

Core

[core] Remove dead files (#34850) @oliviertassinari

[core] Fix revert conflict @oliviertassinari

[core] Fix a few CodeQL errors (#34766) @oliviertassinari

[core] Harden GitHub Actions permissions (#34769) @oliviertassinari

[core] Remove the codeowners file (#34876) @michaldudak

All contributors of this release in alphabetical order: @bharatkashyap, @hbjORbj, @jake-collibra, @joserodolfofreitas, @KuSh, @marceliwac, @michaldudak, @oliviertassinari, @pixelass, @siriwatknp
Source code(tar.gz)
Source code(zip)
v5.10.10(Oct 18, 2022)
A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:

🖌 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 MUI Base to TypeScript. @mbayucot finished the first PR with the conversion of the NoSsr code (#34735).

And more 🐛 bug fixes and 📚 documentation improvements.

@mui/[email protected]

[Popover] Fix paper position flash on open (#34546) @TheUnlocked

[SwipeableDrawer] Make component defaultProps overridable (#34643) @hbjORbj

@mui/[email protected]

[system] Support CSS grey color in sx (#34548) @TheUnlocked

@mui/[email protected]

[styles] Use memoized context in StylesProvider (#34637) @mohd-akram

@mui/[email protected]

[Select][joy] Added hidden input element (#34657) @zee-bit

[Slider][joy] Add global variant to slider (#34733) @siriwatknp

[Tooltip][joy] Add component (#34509) @hbjORbj

@mui/[email protected]

[MultiSelect][base] Prevent the renderValue prop from being propagated to the DOM (#34698) @michaldudak

[NoSsr] Convert code to TypeScript (#34735) @mbayucot

Docs

[docs] Fix the Autocomplete Highlighting example (#34184) @hayawata3626

[docs] Fix typos in Base (Menu, Tabs) and Joy UI (Chip) (#34803) @rvrvrv

[docs] Use new editing API in homepage demos (#34220) @m4theushw

[docs] Live demos (#34454) @bharatkashyap

[docs] Fix typos in Joy UI Switch (#34728) @ndresx

[docs] Avoid scrollbar in the code demos (#34741) @oliviertassinari

[docs] Revise the Joy UI "Automatic adjustment" page (#34614) @samuelsycamore

[docs] Revise and rename the Joy UI "Perfect dark mode" page (#34613) @samuelsycamore

[docs] Revise the Joy UI "Global variants" page (#34595) @samuelsycamore

[docs] Basic link verification at PR level (#34588) @alexfauquette

[docs] Add a missing comma in the customization example (#34617) @AbayKinayat

[website] Clarify Pro/Premium support (#34607) @oliviertassinari

[website] Fix home page dark mode flicker (#33545)

[website] Update the state of the date pickers on the landing page (#34750) @joserodolfofreitas

Core

[core] Clean conditionals (#34772) @pedroprado010

[core] Temporary remove the authorization (#34796) @siriwatknp

[core] Avoid slower CI run statues @oliviertassinari

[core] Improve the playground DX (#34739) @oliviertassinari

[core] Link Netlify in the danger comment (#34688) @oliviertassinari

[core] Fix CI after out of sync merge @oliviertassinari

[core] Enforce straight quote (#34686) @oliviertassinari

[core] Add code scanning via CodeQL (#34707) @DanailH

[core] Fix some upcoming eslint issues (#34727) @oliviertassinari

[core] Auto-fix upcoming eslint issues (#34644) @Janpot

[core] Move SearchIcons to docs src folder (#34802)

[test] Enable react/no-unstable-nested-components (#34518) @eps1lon

All contributors of this release in alphabetical order: @AbayKinayat, @alexfauquette, @bharatkashyap, @DanailH, @eps1lon, @hayawata3626, @hbjORbj, @Janpot, @joserodolfofreitas, @m4theushw, @mbayucot, @michaldudak, @mohd-akram, @ndresx, @oliviertassinari, @pedroprado010, @rvrvrv, @samuelsycamore, @siriwatknp, @TheUnlocked, @zee-bit
Source code(tar.gz)
Source code(zip)
v5.10.9(Oct 11, 2022)
A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:

🚀 [Joy] Button loading functionality has been added by @kushagra010 (#34658)

And more 🐛 bug fixes and 📚 documentation improvements.

@mui/[email protected]

[Grid v2][system] Handle direction object prop for responsive design (#34574) @vanyaxk

[Slider] Fix unnecessary accessibility attribute in root element (#34610) @vanyaxk

@mui/[email protected]

BREAKING CHANGE

[system] Fix color-scheme implementation (#34639) @siriwatknp

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 <CssBaseline enableColorScheme />.

Joy UI: it is enabled automatically if you use <CssBaseline />, see the docs.

Changes

[system] Fix typo in createCssVarsProvider (#34661) @HexM7

@mui/[email protected]

[TrapFocus] Restore the previously exported type from @mui/material (#34601) @michaldudak

@mui/[email protected]

[Joy] Add button loading functionality (#34658) @kushagra010

Docs

[docs] Revert #34541 (#34700) @michaldudak

[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

[docs] Fix codesandbox export with dayjs (#34619) @oliviertassinari

[docs] Explain the purpose of renderGroup prop (#34066) @michaldudak

Core

[core] Make useForkRef variadic (#27939) @michaldudak

[core] Speedup of yarn install in the CI (#34632) @oliviertassinari

[core] Fix markdown loader on Windows (#34623) @michaldudak

[core] Update changelog for version v5.10.8 (#34593) @mnajdova

[core] Update root package.json version (#34592) @mnajdova

All contributors of this release in alphabetical order: @HexM7, @joserodolfofreitas, @kushagra010, @michaldudak, @mnajdova, @oliviertassinari, @vanyaxk
Source code(tar.gz)
Source code(zip)
v5.10.8(Oct 3, 2022)
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:

🚀 SnackbarUnstyled component & headless hook are added to MUI Base (#33227) @ZeeshanTamboli

📚 CSS variables documentation for Material UI has been added by @siriwatknp (#33958)

And more 🐛 bug fixes and 📚 documentation improvements.

@mui/[email protected]

[Autocomplete] Skip filtering when list of options is loading (#33278) @ndebeiss

[Fab] Add disabled class to FAB button (#34245) @meenarama

[l10n] Add Arabic Saudi Arabia (ar-SA) locale (#33340) @rolule

[l10n] zhTW refinement (#33391) @Aporim2051

[Popover] Add ownerState on the paper slot (#34445) @kabernardes

[Slider] Fixed incorrect marks displayed due to duplicate keys in range (#33526) @kskd1804

[TextField] Fix typo in FormControlLabel declaration file (#34535) @hghmn

@mui/[email protected]

[SnackbarUnstyled] Create component and useSnackbar hook (#33227) @ZeeshanTamboli

@mui/[email protected]

[Joy] Fix variantPlain classname missing in few components (#34534) @hbjORbj

[Joy] Fix input decorator color and list padding (#34586) @siriwatknp

[Joy] Miscellaneous fixes (#34492) @siriwatknp

Docs

[blog] Fix 404 link in base introduction @oliviertassinari

[docs] Fix CI build (#34589) @mnajdova

[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] 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

[website] Fix typo in pricing FAQ @oliviertassinari

[website] Move the React Engineer role from open to next (#34494) @mnajdova

Core

[core] Update root package.json version (#34592) @mnajdova

[core] Remove useless comment in fixtures (#34581) @Garz4

[core] Fix link to CODE_OF_CONDUCT.md (#34543) @peippo

[core] Remove outdated docsearch.js dependency (#34421) @oliviertassinari

[core] Add newFeature to the typing of MuiPage (#34511) @flaviendelangle

All contributors of this release in alphabetical order: @Aporim2051, @Dustin-Digitar, @flaviendelangle, @Garz4, @hbjORbj, @hghmn, @kabernardes, @kskd1804, @meenarama, @minkyngkm, @mnajdova, @ndebeiss, @oliviertassinari, @peippo, @rolule, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)
v5.10.7(Sep 27, 2022)
A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:

🚀 Divider component is added to Joy UI (#34403) @siriwatknp

@mui/[email protected]

[CssVarsProvider] Exclude dark mode variables from :root stylesheet (#34131) @siriwatknp

[Chip] Add chip classes (#33801) @pratikkarad

[Slider] Fix typo in the comments in the source (#34452) @HexM7

[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

@mui/[email protected]

Breaking changes

[Experimental] Replace enableSystem with defaultMode (#33960) @siriwatknp

Changes

[system] Fix parsing of hsla colors in getLuminance (#34437) @ptrfrncsmrph

[system] Fix incorrect type of shape.borderRadius in theme (#34076) @ZeeshanTamboli

@mui/[email protected]

[deps] Move @mui/types to dependencies (#34384) @Methuselah96

@mui/[email protected]

Breaking changes

[TrapFocus] Rename TrapFocus to FocusTrap (#34216) @kabernardes

- import TrapFocus from ‘@mui/base/TrapFocus’; + import FocusTrap from ‘@mui/base/FocusTrap’;

Changes

[MultiSelect] Require a single tap to select an item on mobile Chrome (#33932) @michaldudak

@mui/[email protected]

[Checkbox] spread value, required, and readOnly to input (#34477) @siriwatknp

[Chip] Fix unbinded onClick prop (#34455) @HexM7

[Divider] Add Divider component (#34403) @siriwatknp

[Radio] spread readOnly and required to input (#34478) @siriwatknp

Docs

[blog] MUI Base 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

[docs] Update the guide for migrating to TSS (#34417) @garronej

[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 MUI Core "Installation" pages (#34168) @samuelsycamore

[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] 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

Core

[core] Document some types in @mui/styled-engine-sc (#34413) @mnajdova

[core] Add yml support to prettier (#33980) @Janpot

All contributors of this release in alphabetical order: @abhinav-22-tech, @alexfauquette, @CodingItWrong, @Dustin-Digitar, @garronej, @HexM7, @howlettt, @Janpot, @joserodolfofreitas, @kabernardes, @MBilalShafi, @Methuselah96, @michaldudak, @mnajdova, @oliviertassinari, @prakhargupta1, @pratikkarad, @ptrfrncsmrph, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)
v5.10.6(Sep 19, 2022)
Sep 19, 2022

A big thanks to the 11 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.

@mui/[email protected]

[TextField] Fix conflict with Bootstrap even when label is not defined (#34343) @ZeeshanTamboli

@mui/[email protected]

Breaking changes

[button][joy] Replace start/endIcon prop with start/endDecorator (#34288) @hbjORbj

BREAKING CHANGE: replace start/endIcon with start/endDecorator.

// before <Button startIcon={...} endIcon={...} /> // after <Button startDecorator={...} endDecorator={...} />

Changes

[Joy] Adjust the Input and Textarea styles (#34281) @siriwatknp

[menu][joy] Set disablePortal default to false (#34283) @tomasz-sodzawiczny

@mui/[email protected]

Breaking changes

[Select][base] Add event parameter to the onChange callback (#34158) @michaldudak

The SelectUnstyled and MultiSelectUnstyled onChange callbacks did not have event as the first parameter, leading to inconsistency with other components and native HTML elements. This PR adds the event parameter as the first one and moves the newly selected value to the second position. Because of this, it's a breaking change. This also affects Select from Joy UI.

// before <SelectUnstyled onChange={(newValue) => { /* ... */ }} /> // after <SelectUnstyled onChange={(event, newValue) => { /* ... */ }} />

Docs

[blog] The Date Pickers gets a stable v5 release (#34152) @alexfauquette

[blog] Improve image handling (#34222) @oliviertassinari

[blog] Correct 2021 survey data interpretation (#34291) @samuelsycamore

[docs] Remove expired AospExtended showcase @oliviertassinari

[docs] Link the OpenSSF Best Practices card (#34331) @oliviertassinari

[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 MUI Base announcement post (#34295) @samuelsycamore

[website] Fix MUI X subscribe email border style (#34330) @oliviertassinari

[website] Improve security header @oliviertassinari

Core

[core] Lock file maintenance (#34161) @renovate[bot]

[core] Issue template: move reproduction steps to the top (#34279) @Janpot

[core] Create shared Next.js baseline config (#34259) @oliviertassinari

[core] In typescript-to-proptypes, respect the value pass to the generic (#34311) @flaviendelangle

All contributors of this release in alphabetical order: @alexfauquette, @flaviendelangle, @hbjORbj, @Janpot, @michaldudak, @oliviertassinari, @renovate[bot], @samuelsycamore, @siriwatknp, @tomasz-sodzawiczny, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)
v5.10.5(Sep 12, 2022)
Sep 12, 2022

A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:

🚀 Blog post for announcing the release of the MUI Base package is out thanks to @michaldudak.

🚀 Added Alert, Modal, ListSubheader, FormControl, CircularProgress components to Joy UI (#33859) @hbjORbj @siriwatknp

And more 🐛 bug fixes and 📚 documentation improvements.

@mui/[email protected]

[ListItemText] Fix variant mapping in primaryTypography (#33880) @iamxukai

[Timeline] Add left and right aligned timeline demos in docs (#34156) @ZeeshanTamboli

@mui/[email protected]

[Joy UI] Add CircularProgress component (#33869) @hbjORbj

[Joy UI] Add FormControl component (#34187) @siriwatknp

[Joy UI] Add ListSubheader component (#34191) @siriwatknp

[Joy UI] Add Modal component (#34043) @siriwatknp

[Joy] Fix list value of false or 0 (zero) text is incorrectly grey (#34255) @kushagra010

[Joy] Adjust typography decorator margin (#34257) @siriwatknp

[Joy] Miscellaneous fixes (#34193) @siriwatknp

[Radio][joy] Integrate with form control (#34277) @siriwatknp

[Joy][textarea] Pass textarea props from componentsProps (#34223) @HexM7

Docs

[blog] Introducing MUI Base (#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

[website] Add Lukas to the about page (#34284) @LukasTy

[website] Update diamond sponsor URL (#34256) @oliviertassinari

Core

[test] Replace argos-cli with @argos-ci/core (#34178) @michaldudak

[core] Create a script to generate codeowners (#34175) @michaldudak

[core] Add RFC GH issue template (#33871) @bytasv

All contributors of this release in alphabetical order: @bytasv, @ChrystianDeMatos, @hbjORbj, @HexM7, @iamxukai, @kushagra010, @LukasTy, @michaldudak, @oliviertassinari, @siriwatknp, @ZeeshanTamboli, @zillion504
Source code(tar.gz)
Source code(zip)
v5.10.4(Sep 6, 2022)
A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:

🚀 Added Alert component to Joy UI (#33859) @hbjORbj

Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements

@mui/[email protected]

[Avatar] Use structured / semantic markup for avatars and avatar groups (#33994) @paulschreiber

[Steps] Use structured / semantic markup for steps and steppers (#34138) @paulschreiber

@mui/[email protected]

Make the description of componentsProps generic (#34140) @hbjORbj

[Alert] Add Alert component (#33859) @hbjORbj

[Breadcrumbs] Add tests / classes for Breadcrumbs component (#33860) @hbjORbj

[Select] Fix forwarding listbox component prop (#34172) @siriwatknp

@mui/[email protected]

[Select][base] Fix type issues that appeared with TS 4.8 (#34132) @michaldudak

Docs

[docs] Add mui-color-input, mui-chips-input and mui-tel-input into the related projects page (#34123) @viclafouch

[docs] Update sponsors (#34157) @hbjORbj

[docs] Move 5 component names to Title Case (#34118) @oliviertassinari

[docs] Fix the color contrast on optional API methods (#34127) @oliviertassinari

[docs] Fix crash due to using wrong variable (#34171) @siriwatknp

[docs] Fix a few Base typos (#33986) @ropereraLK

[docs] Revise Joy UI "Overview" page copy (#34087) @samuelsycamore

[docs] Add "extend component sizes and variants" section (#34050) @siriwatknp

[blog] Fix social cards (#34160) @oliviertassinari

[website] Allow deep linking to sponsors @oliviertassinari

[website] Update job descriptions (#34134) @DanailH

[website] Link Toolpad landing page @oliviertassinari

Core

[core] Move renovate config to the repository root (#34180) @oliviertassinari

[core] Reinstate react/no-unused-prop-types eslint rule (#34125) @Janpot

[core] Do not append types field to packages without index.d.ts (#33952) @michaldudak

[core] Sanitize input in icon synonyms update script (#33989) @michaldudak

[test] Allow to pass options to mousePress function (#34124) @cherniavskii

All contributors of this release in alphabetical order: @cherniavskii, @DanailH, @hbjORbj, @Janpot, @michaldudak, @oliviertassinari, @paulschreiber, @ropereraLK, @samuelsycamore, @siriwatknp, @viclafouch
Source code(tar.gz)
Source code(zip)
v5.10.3(Aug 29, 2022)
Aug 29, 2022

A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:

⚡ @mnajdova implemented an alternative to OverridableComponent to achieve better dev-time performance (#32735)

Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements

@mui/[email protected]

[Autocomplete][material] Fix value overflow when disableClearable is used (#34053) @mnajdova

[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

@mui/[email protected]

[system] Fix mode blink when open multiple sessions (#33877) @siriwatknp

@mui/[email protected]

[Button][base] Prevent too many ref updates (#33882) @michaldudak

[Select][base] Fix typo in listbox blur event handler (#34120) @ZeeshanTamboli

[TrapFocus] Improve tab test and simplify demo (#34008) @EthanStandel

@mui/[email protected]

[Joy] Fix role proptypes (#34119) @siriwatknp

[Joy] Refine componentsProps for all components (#34077) @siriwatknp

[Radio][joy] support componentsProps as a function (#34022) @siriwatknp

[Select][joy] Improve the a11y on the select field demo (#34073) @mnajdova

[Textarea][joy] Add Textarea component (#33975) @siriwatknp

Docs

[blog] Add Grid v2 announcement (#33926) @siriwatknp

[blog] Making customizable components (#33183) @alexfauquette

[blog] Improve SEO metadata (#33954) @oliviertassinari

[docs] Add introduction Base component demos & general uplift (#33896) @danilo-leal

[docs] Fix Gatsby sample config in CSS variables (#34024) @bicstone

[docs] Fix 404 link from Joy to React Router (#34115) @oliviertassinari

[docs] Fix typo in Select component (#34091) @HexM7

[docs] Fix 301 links to tss's docs @oliviertassinari

[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 visual look of code demos (#34070) @oliviertassinari

[website] Fix DatePicker component demo on the home page (#34054) @NaveenPantra

Core

[core] Offer alternative to OverridableComponent via module augmentation for better performance (#32735) @mnajdova

[core] Fix prop-type warning in regression tests (#34086) @oliviertassinari

[core] Specify code owners (#33995) @michaldudak

[core] Fix scroll restoration (#34037) @oliviertassinari

All contributors of this release in alphabetical order: @alexfauquette, @bharatkashyap, @bicstone, @danilo-leal, @EthanStandel, @HexM7, @hoangph271, @JonathanAsbury-SPS, @michaldudak, @mnajdova, @NaveenPantra, @oliviertassinari, @pieetrus, @renovate[bot], @siriwatknp, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)
v5.10.2(Aug 23, 2022)
Aug 22, 2022

A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:

✨ @michaldudak synced the Material Icons set with the latest from Google (#33988).
A couple of icons changed their appearance. See the difference on this Argos build.

@mui/[email protected]

[Autocomplete] Fix keepMounted Popper prop not working (#33957) @ZeeshanTamboli

[IconButton] Fix hover effect when CSS Variables are enabled (#33971) @TheUnlocked

[LoadingButton] Add support for CSS variables (#34001) @ZeeshanTamboli

[TimelineConnector] Add support for CSS variables (#34002) @ZeeshanTamboli

[TimelineDot] Add support for CSS variables (#34003) @ZeeshanTamboli

[TreeItem] Add support for CSS variables (#34004) @ZeeshanTamboli

@mui/[email protected]

[system] catch localStorage errors (#34027) @jsakas

@mui/[email protected]

[Joy] Add missing global exports (#33982) @tomasz-sodzawiczny

@mui/[email protected]

[icons] Sync the Material Icons (#33988) @michaldudak

Docs

[docs] Fix typo in using-joy-ui-and-material-ui.md (#33997) @djohalo2 @danilo-leal

[docs] Fix typo in the Transition docs (#34040) @alirezahekmati

[docs] Typo fix in Joy UI Aspect Ratio doc (#33984) @AjeetSingh2016

[docs] Fix broken Joy UI codesandbox export (#34007) @oliviertassinari

[docs] Fix typos in test folder's README (#33976) @ropereraLK

[docs] Fix interior section links in Base docs that feature hooks (#33948) @samuelsycamore

[docs] Fix typo in Joy UI's List Component docs (#33956) @Cerebro92

[docs] Fix typo in Joy UI's docs (#33938) @AjeetSingh2016

Core

[website] Optimize meta description length (#34006) @oliviertassinari

Revert "[core] Replace getInitialProps with getStaticProps" (#33991) @mnajdova

[website] Move the React Engineer - X to next roles (#34030) @mnajdova

[website] Add Icons8 gold sponsor (#33978) @michaldudak

All contributors of this release in alphabetical order: @AjeetSingh2016, @alirezahekmati, @Cerebro92, @danilo-leal, @djohalo2, @jsakas, @michaldudak, @mnajdova, @oliviertassinari, @ropereraLK, @samuelsycamore, @TheUnlocked, @tomasz-sodzawiczny, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)
v5.10.1(Aug 16, 2022)
Aug 16, 2022

A big thanks to the 18 contributors who made this release possible. This release was mostly around 🐛 bug fixes and 📚 documentation improvements.

@mui/[email protected]

[TableCell] Enable variant overrides via TypeScript module augmentation (#33856) @arjunvijayanathakurup

@mui/[email protected]

[system] Fix ContainerProps export (#33923) @bugzpodder

@mui/[email protected]

[TrapFocus] Removes invisible tabbable elements from (#33543) @EthanStandel

[Input][base] Pass the rows prop to the underlying textarea (#33873) @michaldudak

[SelectUnstyled] Add ability to post the select's value when submitting a form (#33697) @michaldudak

@mui/[email protected]

[IconButton][joy] Fix large IconButton scaling (#33885) @cherewaty

Docs

[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

[docs] Improve the HorizontalNonLinearStepper demo styling (#33886) @hayawata3626

[docs] Remove dead NoSsr in the demos (#33910) @oliviertassinari

[docs] Fix the reopening menu problem in MenuUnstyled demo (#33890) @michaldudak

[docs] Fix a few link issues (#33909) @oliviertassinari

[docs] Explain the icons package dependencies (#33592) @michaldudak

[docs] Fix reported SEO issues (#33818) @oliviertassinari

[docs] Add permanent notifications back (#33843) @oliviertassinari

[docs] Enforce description for all pages (#33698) @oliviertassinari

[docs] Clarify difference in startup times between named and default imports (#33109) @cmdcolin

[docs] Update transform function in the sx prop sizing docs (#33850) @ZeeshanTamboli

[docs] Adding missing accessibility labels (#33782) @PunitSoniME

[docs] Fix /system/getting-started/advanced/ does not exist (#33867) @MonstraG

[docs] New Crowdin updates (#32213) @l10nbot

[examples] Fix broken path to favicon.ico (#33906) @mmostafavi

[website] Add new FAQ to pricing page (#33553) @oliviertassinari

[website] Miscellaneous improvements to the marketing pages (#33897) @danilo-leal

Core

[core] Add the download tracker package (#33899) @michaldudak

[core] Use proper external build id for Argos uploads (#33929) @cherniavskii

[core] Enforce 70 as the max width on the title on the docs (#33819) @oliviertassinari

[core] Clear yarn installation warning (#33776) @michaldudak

[core] Bump yarn to 1.22.19 (#33656) @michaldudak

[core] Remove outdated Next.js options (#33845) @oliviertassinari

[core] Add the download tracker build script (#33941) @michaldudak

[website] Allow /r/store- redirection pattern @oliviertassinari

All contributors of this release in alphabetical order: @arjunvijayanathakurup, @bugzpodder, @cherewaty, @cherniavskii, @cmdcolin, @danilo-leal, @EthanStandel, @hayawata3626, @IsaacInsoll, @l10nbot, @michaldudak, @mmostafavi, @MonstraG, @oliviertassinari, @PunitSoniME, @samuelsycamore, @TKrishnasamy, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)
v5.10.0(Aug 9, 2022)
A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:

✨ Stack component is added to MUI System and Joy UI #33760 #33800 @mnajdova

✨ Breadcrumbs component is added to Joy UI (#32697) @hbjORbj

Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements

@mui/[email protected]

[Grid] Prevent crash if spacing is set to zero in theme (#33777) @PunitSoniME

[Grid] Export interface RegularBreakpoints to fix type error (#33751) @ZeeshanTamboli

[Skeleton] Add rounded variant (#33687) @siriwatknp

[Stepper] Fix classes for icon container (#33734) @pratikkarad

[TableCell] Enable size prop overrides via module augmentation (#33816) @brentertz

[Tooltip] Fix tooltip arrow css var background (#33753) @TimoWilhelm

[useScrollTrigger] Add passive flag to scroll trigger event listener #32437 (#33749) @Dsalazar1685

@mui/[email protected]

Fix unnecessary styles created from sx (#33752) @siriwatknp

Fix duplicated styles in Box (#33774) @iamxukai

Don't spread props to DOM for string tags (#33761) @siriwatknp

Add Stack component (#33760) @mnajdova

@mui/[email protected]

[Stack] Add new component (#33800) @mnajdova

[Breadcrumbs] Add Breadcrumbs component (#32697) @hbjORbj

[Card] Fix wrong api description for size prop (#33862) @hbjORbj

Miscellaneous fixes (#33796, #33750) @siriwatknp

Docs

[docs] Create, revise, and expand System "Getting started" docs (#33503) @samuelsycamore

[docs] Test new image best practice @oliviertassinari

[docs] Fix typo in the ClickAwayListerner name (#33813) @pawelsmigielski

[docs] Fix link to Basics section in Trap Focus docs (#33772) @ZeeshanTamboli

[docs] z-index added in popper when used by split button (#33763) @PunitSoniME

[docs] Improve the guide for using @mui/base with Tailwind CSS (#33670) @mnajdova

[docs] Fix warnings related to Next.js' links (#33693) @mnajdova

[docs] Add notification to aggregation blogpost (#33745) @joserodolfofreitas

[docs] Add Grid version 2 docs (#33554) @siriwatknp

[examples] Fix NextLinkComposedProps type error (#33842) @adham618

Core

[blog] Add social card to Tenerife retreat post (#33764)

[blog] Fix blue outline bug (#33707) @oliviertassinari

[blog] Improve the width of the layout (#33706) @oliviertassinari

[core] Remove unnecessary packageName attribute from pages (#33488) @cherniavskii

[core] Remove duplicated CODE_OF_CONDUCT (#33702) @oliviertassinari

[core] Update Playwright packages together (#33737) @michaldudak

[website] Fix notifications not being marked as read in production (#33756) @cherniavskii

All contributors of this release in alphabetical order: @adham618, @brentertz, @cherniavskii, @Dsalazar1685, @hbjORbj, @iamxukai, @joserodolfofreitas, @michaldudak, @mnajdova, @oliviertassinari, @pawelsmigielski, @pratikkarad, @PunitSoniME, @siriwatknp, @TimoWilhelm, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)
v5.9.3(Aug 1, 2022)
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)

Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements

@mui/[email protected]

[Chip] Assign classnames and associated styles for filled variant (#33587) @hbjORbj

[Grid] Fix columnSpacing and rowSpacing props ignore higher breakpoints with 0 (#33480) @ZeeshanTamboli

[Input] Add the readOnly state class (#33654) @michaldudak

[Stack] Responsive styles based on breakpoints should be in the correct order (#33552) @hbjORbj

@mui/[email protected]

[system] Make @emotion/* fully supported in the System (#33205) @garronej

@mui/[email protected]

[codemod] Fix theme-spacing performance (#33691) @siriwatknp

[codemod] Support @mui import for variant-prop (#33692) @siriwatknp

@mui/[email protected]

[styled-engine-sc] Add missing @babel/runtime dependency (#33741) @MonstraG

@mui/[email protected]

[Joy] Add Tabs components (#33664) @siriwatknp

[Joy] Miscellaneous fixes (#33685) @siriwatknp

[Joy] Update read.me content (#33643) @danilo-leal

Docs

[blog] Add blog post about company retreat in Tenerife 🏝 (#33566) @samuelsycamore

[blog] Add blog post to announce the aggregation feature (#33595) @joserodolfofreitas

[blog] Fix horizontal scrollbar with code snippets (#33648) @joserodolfofreitas

[docs] Fix a typo in the code in Sorting & selecting Table demo (#33674) @mracette

[docs] Fix en-US format in the Skeleton demo (#33699) @husseinsaad98

[docs] Update module reference for usePagination (#33675) @fullstackzach

[docs] Fix code examples in styled API vs sx prop docs (#33665) @ZeeshanTamboli

[docs][system] Throw an informative error when theme.vars is used in createTheme and mention this in the theming docs (#33619) @hbjORbj

[website] Remove legacy redirect @oliviertassinari

[website] Add new legal pages (#33650) @oliviertassinari

[website] Clarify when a license in development is required (#33668) @oliviertassinari

[website] Update links to rows pages (#33739) @cherniavskii

[website] Update pricing table to add aggregation and row pinning (#33659) @joserodolfofreitas

Core

[core] Replace getInitialProps with getStaticProps (#33684) @mnajdova

[core] Remove accidentally added files (#33636) @michaldudak

[core] Update packages with security issues (#33679) @michaldudak

[core] Add React 17 nightly build (#33594) @mnajdova

[core] Update lerna to 5.2.0 (#33635) @michaldudak

[core] Prepare isolation of Next.js X app (#33649) @oliviertassinari

[core] Remove thenify version override from package.json resolutions (#33638) @michaldudak

[core] Update Node.js to 14 on CircleCI, CodeSandbox, and Netlify (#33642) @michaldudak

[test] Replace istanbul-instrumenter-loader with babel-plugin-istanbul (#33666) @michaldudak

[test] Run TypeScript module augmentation tests for Joy UI in CI (#33667) @ZeeshanTamboli

All contributors of this release in alphabetical order: @cherniavskii, @danilo-leal, @fullstackzach, @garronej, @hbjORbj, @husseinsaad98, @joserodolfofreitas, @michaldudak, @mnajdova, @MonstraG, @mracette, @oliviertassinari, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)
v5.9.2(Jul 25, 2022)
Jul 25, 2022

A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:

🧪 Ensure all Base components are OverridableComponent (#33506) @michaldudak

🧪 Various improvements on the Material Stack component (#33548, #33588, #33549) @hbjORbj

Many other 🐛 bug fixes and 📚 documentation improvements

@mui/[email protected]

Revert "[Tooltip] Fix children mouse over detection (#32321)" @oliviertassinari

[FormHelperText] Fix unable to create new variants (#33589) @DinhBaoTran

[ImageList] Remove vertical spacing between items in masonry layout (#33593) @michaldudak

[LoadingButton] Refactor duplicate code (#33570) @ZeeshanTamboli

[Modal] Explain the meaning of deprecation of the BackdropComponent prop (#33591) @michaldudak

[Stack] Fix unit test failure (#33588) @hbjORbj

[Stack] Fix default flexDirection value with responsive prop (#33549) @hbjORbj

[Stack] Ensure that marginundefined doesn't occur in styling (#33548) @hbjORbj

[Tabs] Fix indicatorColor prop type (#33569) @ZeeshanTamboli

[Tabs] Add TypeScript interface to augment tab indicator color in theme (#33333) @AHeiming

@mui/[email protected]

[Base] Make PopperUnstyled component overridable (#33573) @siriwatknp

[Base] Ensure all components are OverridableComponent (#33506) @michaldudak

@mui/[email protected]

[Select] Add new component in Joy (#33630) @siriwatknp

[Joy] Add Text field documentation (#33430, #33631) @danilo-leal

[Joy] Add menu components (#31789) @siriwatknp

Docs

[blog] Fix 404 link to Algolia docs search (dd4308d) @oliviertassinari

[docs] Add accessibility tips (#33633) @siriwatknp

[docs] Fix production deploy of codesandboxes (#33608) @oliviertassinari

[docs] Show border on palette.background.paper in dark mode docs (#33611) @ZeeshanTamboli

[docs] Fix typo in Joy UI dark mode page (#33620) @bairamau

[docs] Final polish on Base docs - formatting and style consistency (#33156) @samuelsycamore

[docs] Fix CssBaseline import in example code (#33614) @dd-ssc

[docs] Fix Toolpad docs redirection (#33524) @bharatkashyap

[docs] Fix link to Snackbar customization section in Alert docs (#33586) @ZeeshanTamboli

[docs] Fix placement choices typo in Tooltip docs (#33571) @MonstraG

[website] Update home page's sponsor grid (#33528) @danilo-leal

[website] Add Vytautas to the about page (#33567) @bytasv

[website] Improve newsletter input design (#33585) @danilo-leal

[website] Add YouTube link to footer (#33580) @gerdadesign

[website] Clarify scope of technical support (#33435) @joserodolfofreitas

Core

[core] Swallow ad blocker fetch fail (#33617) @oliviertassinari

[core] Fix dep security by resolving thenify to latest (#33612) @siriwatknp

[test] Remove view option from Event in Snackbar tests (#33555) @ZeeshanTamboli

All contributors of this release in alphabetical order: @AHeiming, @bairamau, @bharatkashyap, @bytasv, @danilo-leal, @dd-ssc, @DinhBaoTran, @gerdadesign, @hbjORbj, @joserodolfofreitas, @michaldudak, @MonstraG, @oliviertassinari, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)
v5.9.1(Jul 18, 2022)
Jul 18, 2022

A big thanks to the 17 contributors who made this release possible. This release is mainly about 🐛 bug fixes and 📚 documentation improvements

@mui/[email protected]

[Autocomplete] Fix disabling component crashing when focused (#31313) @mzedel

[Grid] Avoid scrollbar in demo (#33527) @oliviertassinari

[Slider] Fix transition of tooltips on vertical slider (#33009) @abhinav-22-tech

[TouchRipple] Fix crash on android where event.touches are an empty array (#32974) @lukeggchapman

@mui/[email protected]

[system] Add flag to switch negative margin approach in Grid (#33484) @siriwatknp

[system] Remove needless optional chaining check in createEmptyBreakpointObject method (#33482) @ZeeshanTamboli

@mui/[email protected]

[base] Export types used by components' props (#33522) @michaldudak

[base] Add missing type definitions in useControllableReducer (#33496) @michaldudak

[SelectUnstyled] Do not call onChange unnecessarily (#33408) @michaldudak

@mui/[email protected]

[TimelineDot] Add TimelineDotPropsColorOverrides interface to extend color options (#33466) @lolaignatova

Docs

[docs] Add note about CssBaseline in the dark mode page (#33108) @GabrielaLokelani

[docs] Fix typos in the Interoperability page (#33273) @HexM7

[docs] Improve the useTheme documentation (#33508) @rickstaa

[docs] Fix 301 redirections (#33521) @oliviertassinari

[docs] Link the same codesandbox as in the docs (#33472) @oliviertassinari

[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

[examples] Change createEmotionCache to use insertionPoint (#32104) @ANTARES-KOR

[examples] Fix error in Next.js example with @mui/styles (#33456) @paustria

Core

[core] Cleanup experiments (#33547) @siriwatknp

[core] Update CHANGELOG to include pickers breaking change (#33486) @siriwatknp

All contributors of this release in alphabetical order: @abhinav-22-tech, @ajhenry, @ANTARES-KOR, @anthonypz, @aravindpanicker, @GabrielaLokelani, @HexM7, @lolaignatova, @lukeggchapman, @michaldudak, @mzedel, @Nikhilthadani, @oliviertassinari, @paustria, @rickstaa, @siriwatknp, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)
v5.9.0(Jul 12, 2022)
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.

⚠️ [BREAKING CHANGE] Date pickers are removed from the lab, please follow the migration guide. (#33386) @flaviendelangle

many other 🐛 bug fixes and 📚 documentation improvements

our documentation site is now running with React 18! (#33196) @mnajdova

@mui/[email protected]

[CssBaseline] Fixes in overriding style (#33338) @ZeeshanTamboli

[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] 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

@mui/[email protected]

[System] Add offset feature to Grid (#33415) @siriwatknp

[system] Add new Grid implementation (#32746) @siriwatknp

@mui/[email protected]

Breaking changes

[lab] Remove the pickers (#33386) @flaviendelangle

The pickers are moved to MUI X, check out the migration guide.

Changes

[Masonry] Support rem/em values for spacing prop (#33384) @hbjORbj

@mui/[email protected]

Base] Change the order of class names merged in useSlotProps (#33383) @michaldudak

[ModalUnstyled] Accept callbacks in componentsProps (#33181) @michaldudak

[SelectUnstyled] Accept callbacks in componentsProps (#33197) @michaldudak

[TabsUnstyled] Accept callbacks in componentsProps (#33284) @michaldudak

@mui/[email protected]

[Joy] Add guide about using Joy and Material UI together (#33396) @siriwatknp

[Joy] Fix variants color palette regressions (#33394) @danilo-leal

Docs

[docs] Correcting small grammatical error (#33393) @robyyo

[docs] Link to the correct package on Joy component pages (#33439) @cherniavskii

[docs] Fix e2e tests (#33477) @siriwatknp

[docs] Fix dead links (#33462) @oliviertassinari

[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 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] Improve external link icons synonyms (#33257) @davidgarciab

[examples] Update MUI Base with Tailwind CSS to use the latest versions of the dependencies (#33401) @mnajdova

[examples] Add MUI base example (#33154) @siriwatknp

Core

[core] Fix @mui/monorepo regression for the import of the docs infra (#33390) @Janpot

[core] Remove old babel resolve rule (#33432) @oliviertassinari

[website] Shorten the plan descriptions on the pricing page (#32984) @joserodolfofreitas

[website] Link EULA in the license quantity section (#33292) @oliviertassinari

All contributors of this release in alphabetical order: @baharalidurrani, @cherniavskii, @danilo-leal, @davidgarciab, @flaviendelangle, @hbjORbj, @ivan-ngchakming, @Janpot, @jgbae, @joebingham-wk, @joserodolfofreitas, @michaldudak, @mnajdova, @oliviertassinari, @omeraplak, @robyyo, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)
v5.8.7(Jul 4, 2022)
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!

many other 🐛 bug fixes and 📚 documentation improvements

@mui/[email protected]

[Autocomplete] Add some missing props in useAutocomplete (#33269) @henriqueholtz

[Autocomplete] Extend componentsProps to include popper and popupIndicator slots (#33283) @jake-collibra

[Select] Annotate empty string as valid value prop (#33088) @MattiasMartens

[SnackbarContent] Fix message text color with css var provider (#33285) @TimoWilhelm

@mui/[email protected]

[styled-engine] Add missing type dependency on csstype (#33310) @Methuselah96

@mui/[email protected]

[system] Simplify theme input types for CssVarsProvider (#33381) @siriwatknp

[system] Export required types (#33324) @michaldudak

@mui/[email protected]

[Joy] Add radio button documentation (#33254) @siriwatknp

[Joy] Add switch documentation (#33302) @siriwatknp

[Joy] Batch a couple of documentation refinements (#33158) @danilo-leal

[Joy] Enable Joy and Material UI compatibility (#33379) @siriwatknp

@mui/[email protected]

[base] Remove a type incompatible with Typescript 3.5 (#33361) @michaldudak

[BadgeUnstyled] Export BadgeUnstyledOwnProps interface to fix typescript compiler error (#33314) @aaronlademann-wf

[TablePaginationUnstyled] Accept callbacks in componentsProps (#33309) @michaldudak

Docs

[docs] Fix Link typings in the react-router example (#32308) @aaarichter

[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

All contributors of this release in alphabetical order: @aaarichter, @aaronlademann-wf, @danilo-leal, @henriqueholtz, @jake-collibra, @joshkel, @MattiasMartens, @Methuselah96, @michaldudak, @oliviertassinari, @siriwatknp, @TimoWilhelm, @xlianghang
Source code(tar.gz)
Source code(zip)
v5.8.6(Jun 27, 2022)
Jun 27, 2022

A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:

⚒️ Fixed React 18 issues in few components

🚀 Improved the TypeScript augmentation when using CSS variables with @mui/material

many other 🐛 bug fixes and 📚 documentation improvements

@mui/[email protected]

[Alert] Add support for CSS vars (#32624) @haneenmahd

[Alert] Use getContrastText for filled variant font color (#29813) @SamoraMabuya

Note: The color of the text in the warning contained Alert in dark mode was changed to black in order to improve the color contrast ratio

[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

@mui/[email protected]

[system] Add enableColorScheme option to getInitColorSchemeScript (#33261) @siriwatknp

@mui/[email protected]

[utils] Allow state prefix to be configurable (#32972) @siriwatknp

@mui/[email protected]

[base] Improve the return type of useSlotProps (#33279) @michaldudak

[base] Improve some types (#33270) @mnajdova

[MenuUnstyled] Fix keyboard accessibility of menu items (#33145) @michaldudak

[ModalManager] Lock body scroll when container is inside shadow DOM (#33168) @jacobweberbowery

[SliderUnstyled] Use useSlotProps (#33132) @michaldudak

[TextareaAutosize] Fix crash when used with React 18 & Suspense (#33238) @howlettt

[TextareaAutosize] Fix warnings for too many renders in React 18 (#33253) @mnajdova

@mui/[email protected]

[Joy] Add Sheet doc (#32820) @hbjORbj

Docs

[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] 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

[docs] Badge component link in Base docs should be under Data Display section (#33249) @ZeeshanTamboli

[examples] Fix comment typo (#33256) @WinmezzZ

Core

[core] Remove dead code (#33243) @oliviertassinari

[website] Fix the scroll-top for all the website (#33215) @oliviertassinari

[website] List new core role @oliviertassinari

[website] Fix navigation menu close behavior (#33203) @oliviertassinari

All contributors of this release in alphabetical order: @davidgarciab, @Fafruch, @haneenmahd, @hbjORbj, @howlettt, @jacobweberbowery, @michaldudak, @mnajdova, @oliviertassinari, @SamoraMabuya, @siriwatknp, @WinmezzZ, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)
v5.8.5(Jun 21, 2022)
Jun 20, 2022

A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:

🚀 Added support for CSS variables in the Avatar component and the SpeedDialAction component respectively by @vicasas and @gin1314

many other 🐛 bug fixes and 📚 documentation improvements

@mui/[email protected]

[Avatar] Add support for CSS variables (#32499) @vicasas

[Dialog] Fix broken styles if maxWidth is set to false (#32987) @kmurgic

[SpeedDialAction] Add support for CSS variables (#32608) @gin1314

[Tabs] Increment scroll of the minimum amount possible (#33103) @oliviertassinari

@mui/[email protected]

[codemod] Preserve comments within jss-to-tss-react (#33170) @ryancogswell

@mui/[email protected]

[Masonry] Fix flickering when used with React 18 (#33163) @mnajdova

@mui/[email protected]

[BadgeUnstyled] Accept callbacks in componentsProps (#33176) @michaldudak

[ButtonUnstyled] Use useSlotProps (#33096) @michaldudak

[FormControlUnstyled] Accept callbacks in componentsProps (#33180) @michaldudak

[InputUnstyled] Use useSlotProps (#33094) @michaldudak

[ModalUnstyled] Define ownerState and slot props' types (#32901) @michaldudak

[SwitchUnstyled] Use useSlotProps (#33174) @michaldudak

@mui/[email protected]

[Joy] Add Checkbox documentation (#33171) @siriwatknp

[Joy] Add List documentation (#33120) @siriwatknp

[Joy] Make slider displays Joy classname (#33051) @siriwatknp

Docs

[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 MUI Base 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

[docs] Add job ad in table of content (#33143) @mnajdova

[docs] Add customization as a value proposition (#33014) @oliviertassinari

[examples] Add example using nextjs & @mui/styles as a starter for the migration to v5 (#33005) @mnajdova

[website] Replace Airtable with Ashby links for applying to a opened position (#33193) @DanailH

Core

[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

[core] Improve inline code rendering within the details tag (#33086) @Harmouch101

All contributors of this release in alphabetical order: @cherniavskii, @DanailH, @gin1314, @Harmouch101, @Janpot, @joserodolfofreitas, @kmurgic, @michaldudak, @mnajdova, @oliviertassinari, @ryancogswell, @samuelsycamore, @siriwatknp, @vicasas
Source code(tar.gz)
Source code(zip)
v5.8.4(Jun 14, 2022)
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

many other 🐛 bug fixes and 📚 documentation improvements

@mui/[email protected]

[Button] Add missing classes in ButtonClasses type (#33040) @ZeeshanTamboli

[Grid] Fix prop-type key regression (#33123) @oliviertassinari

[Grid] Support custom breakpoints (#31998) @boutahlilsoufiane

[Grow] Limit CSS transition bug workaround to Safari 15.4 only (#32996) @igordanchenko

[Hidden] Remove dependency on hoist-non-react-statics (#33015) @oliviertassinari

[Link] Add support for CSS variables (#33036) @winderica

[Popover] Export getOffsetTop & getOffsetLeft from Popover's index and add typings (#32959) @rart

[Slider] Fix SliderValueLabelProps type (#32895) @oliviertassinari

[Snackbar] Remove RTL direction specific logic (#32808) @aaarichter

[StepIcon] Fix text centering when changing browser font size (#32706) @alansouzati

[Tabs] Scroll by width of the first visible tab if only one tab is partially visible (#32778) @frankkluijtmans

@mui/[email protected]

[Stack, system] Apply correct responsive styles if any custom breakpoints are provided (#32913) @ZeeshanTamboli

[system] Fix missing typings for ColorFormat (#32417) @l-zoy

@mui/[email protected]

[codemod] Add support for @mui/styles/makeStyles imports (#32962) @joshkel

@mui/[email protected]

[pickers] Fix broken ref forwarding (#33107) @oliviertassinari

[lab] Fix React's forwardRef warning when importing from the index (#33134) @mnajdova

@mui/[email protected]

[MenuUnstyled] Accept callbacks in componentsProps (#32997) @michaldudak

[ModalUnstyled] Fix errors from the W3C validator about incorrect aria-hidden attribute on some elements (#30920) @mkrtchian

[ModalUnstyled] Fix behavior of not respecting props ariaHidden value (#32055) @tech-meppem

@mui/[email protected]

[Joy] Miscellaneous card fixes (#33129) @siriwatknp

[Joy] Miscellaneous fixes (#33073) @siriwatknp

[Joy] Add typography and link docs (#33047) @siriwatknp

Docs

[Contributing.md] Local install instructions (#32975) @Moizsohail

[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 MUI Base 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

[docs] Improve aspect ratio docs and integration (#33065) @siriwatknp

[docs] Update code block copy label (#33128) @siriwatknp

[docs] Fix typo in Autocomplete CSS API (#32838) @KeaghanKennedy

[docs] Improvements for Radio Group Rating Docs (#32843) @Kai-W

[docs] Enable Joy pages (#33064) @siriwatknp

[website] Add Joy UI to the pricing page (#33099) @danilo-leal

[website] Clarify the pricing a bit (#33069) @oliviertassinari

Core

yarn proptypes @oliviertassinari

[core] Update dependencies to fix security vulnerabilities (#33095) @michaldudak

[core] Import new line convention (#33068) @oliviertassinari

[core] Make repository configurable in changelog script (#33130) @Janpot

All contributors of this release in alphabetical order: @aaarichter, @alansouzati, @boutahlilsoufiane, @cherniavskii, @danilo-leal, @dvlprAlamin, @frankkluijtmans, @igordanchenko, @Janpot, @joshkel, @Kai-W, @KeaghanKennedy, @l-zoy, @michaldudak, @mkrtchian, @mnajdova, @Moizsohail, @oliviertassinari, @pushys, @rart, @siriwatknp, @tech-meppem, @winderica, @ZeeshanTamboli
Source code(tar.gz)
Source code(zip)

MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

Related tags

Overview

MUI Core

Installation

Material UI

MUI Base

MUI System

Sponsors

Diamond 💎

Gold 🏆

More backers

Getting started with Material UI

Questions

Examples

Documentation

Premium themes

Contributing

Changelog

Roadmap

License

Security

Sponsoring services

Comments

What's the problem?

What are the requirements?

What are our options?

Comparison

Performance

Dynamic props

npm

Support concurrent mode

SSR

Stars

Trafic on the documentation

Users feedback

Browser support

Bundle size

What's the best option?

Default engine

styled-components

Pros:

Cons:

emotion

Pros:

Cons:

Support multiple

Additional comments

Deterministic classnames on the components that can be targeted for custom styles

Conclusion

A small migration cost between styled-components and emotion

There are different ways for adding overrides other than wrapper components

Concurrent mode is for sure supported :+1:

How is the specificity handled

Alternatives

TODO

Benchmarks

Pains

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

Your Environment

Introduction

Structural changes

1. Unstyled components

2. Full strict mode support

3. Migrate to styled-components

4. Enable the use of @material-ui/system's props in the core components

5. Allow the use of dynamic theme variants and colors

Material Design

Lab to core components

Supported browsers

Deprecations

Breaking changes

Timing

Duplicates

Latest version

Steps to reproduce 🕹

Current behavior 😯

Expected behavior 🤔

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`

`@mui/[email protected]`