# [Versions](https://mui.com/versions/) ## 5.10.7 _Sep 26, 2022_ A big thanks to the 21 contributors who made this release possible. Here are some highlights โœจ: - ๐Ÿš€ [Divider](https://mui.com/joy-ui/react-divider/) component is added to Joy UI (#34403) @siriwatknp ### `@mui/material@5.10.7` - [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/system@5.10.7` - [system] Fix parsing of hsla colors in getLuminance (#34437) @ptrfrncsmrph - [system] Fix incorrect type of `shape.borderRadius` in theme (#34076) @ZeeshanTamboli - [system] Replace `enableSystem` with `defaultMode` (#33960) @siriwatknp ### `@mui/material@5.0.0-alpha.101` - [deps] Move @mui/types to dependencies (#34384) @Methuselah96 ### `@mui/base@5.0.0-alpha.99` #### Breaking changes - [TrapFocus] Rename TrapFocus to FocusTrap (#34216) @kabernardes ```diff - 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/joy@5.0.0-alpha.47` - [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 ## 5.10.6 _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/material@5.10.6` - [TextField] Fix conflict with `Bootstrap` even when label is not defined (#34343) @ZeeshanTamboli ### `@mui/joy@5.0.0-alpha.46` #### Breaking changes - [button][joy] Replace `start/endIcon` prop with `start/endDecorator` (#34288) @hbjORbj **BREAKING CHANGE**: replace `start/endIcon` with `start/endDecorator`. ```jsx // before ``` - [BottomNavigation] Remove wrapper from BottomNavigationAction (#26923) @siriwatknp `span` element that wraps children has been removed. `wrapper` classKey is also removed. More details about [this change](https://github.com/mui/material-ui/pull/26666). ```diff ``` #### Changes - ​[Box] Fix TypeScript error on maxWidth prop (#26859) @ansh-saini - ​[Dialog] Automatically label by its DialogTitle (#26814) @eps1lon - ​[Hidden] Bring back and mark as deprecated (#26908) @siriwatknp - ​[List] Add button runtime deprecation warning (#26743) @siriwatknp - ​[Modal] Type BackdropProps according to styled version (#26836) @eps1lon - ​[Radio] Fix `defaultValue` to match the other value types (#26945) @oliviertassinari - ​[Stepper] Add completed to global pseudo-classes (#26953) @michal-perlakowski - ​[Stepper] Fix support for no connectors (#26874) @varandasi - ​[TextField] Prevent `hiddenLabel` from spreading to DOM (#26864) @siriwatknp - ​[TextField] Fix label disappearing when focusing a button (#26933) @michal-perlakowski ### `@material-ui/codemod@5.0.0-beta.0` - ​[codemod] Add CLI (#26941) @eps1lon ### @material-ui/icons@5.0.0-beta.0 - ​[icons] Regenerate transpiled files (#26985) @eps1lon ### @material-ui/lab@5.0.0-alpha.39 #### Breaking changes - [DatePicker] Remove helper text default value (#26866) @DouglasPds Make the default rendered text field closer to the most common use cases (denser). ```diff ( - + )} > ``` #### Changes - ​[lab] Fix missing dependency on unstyled (#26937) @fishyFrogFace - ​[pickers] Consider TDate in ToolbarComponent types (#27035) @michal-perlakowski ### `@material-ui/system@5.0.0-beta.0` - ​[system] Support array overridesResolver (#26824) @siriwatknp ### Docs - ​[docs] Add notes to Table demo about stableSort (#27025) @CarlosGomez-dev - ​[docs] Add gold sponsor (#26968) @oliviertassinari - ​[docs] Update unstyled demos to not depend on `@material-ui/core` (#26869) @mnajdova - ​[docs] Fix demo paths in windows (#27004) @eps1lon - ​[docs] Export all locales (#27002) @eps1lon - ​[docs] Misc CONTRIBUTING.md changes (#26925) @eps1lon - ​[docs] Fix /components/hidden merge conflict (#26997) @eps1lon - ​[docs] Fix 404 links (#26963) @oliviertassinari - ​[docs] Remove link that points to v4 blog post (#26960) @steveafrost - ​[docs] Use custom webpack loader for markdown (#26774) @eps1lon - ​[docs] Fix 301 links (#26942) @oliviertassinari - ​[docs] Add page for the `sx` prop (#26769) @mnajdova - ​[docs] pre-fill issue when a demo crashes (#27034) @eps1lon - ​[docs] Move styled page under system (#26818) ### Core - ​[core] Inline rollup-plugin-size-snapshot (#26986) @eps1lon - ​[core] Remove unused props clone (#26992) @oliviertassinari - ​[core] Fix tests on Windows (#26931) @michaldudak - ​[core] Fix merge conflict between #26954 and #26874 @oliviertassinari - ​[core] Upgrade issues-helper to v2 (#26955) @michal-perlakowski - ​[core] Fix merge conflict (#26928) @eps1lon - ​[test] Convert HiddenCSS tests to testing-library (#27019) @eps1lon - ​[test] Convert NativeSelectInput tests to testing-library (#26952) @eps1lon - ​[test] Add a default mount implementation to conformance tests (#26949) @eps1lon - ​[test] Update tests to pass react@next (#26967) @eps1lon - ​[test] Add types to describeConformanceV5 (#26954) @eps1lon - ​[test] Use createPickerMount where appropriate (#26951) @eps1lon - ​[test] Convert SwipeableDrawer tests to testing-library (#26916) @eps1lon - ​[test] Convert Menu tests to testing-library (#26915) @eps1lon - ​[test] Convert Popover tests to testing-library (#26913) @eps1lon - ​[test] Convert Modal tests to testing-library (#26912) @eps1lon - ​[test] Make remaining testing-library tests StrictMode compatible (#26924) @eps1lon - ​[test] Only allow wrapping enzyme mount not creating (#27018) @eps1lon - ​[typescript] Disallow spreading TransitionHandlerProps (#26927) @eps1lon All contributors of this release in alphabetical order: @ansh-saini, @BC-M, @CarlosGomez-dev, @DouglasPds, @eps1lon, @fishyFrogFace, @michal-perlakowski, @michaldudak, @mnajdova, @oliviertassinari, @siriwatknp, @steveafrost, @varandasi ## 5.0.0-alpha.38 _Jun 23, 2021_ A big thanks to the 18 contributors who made this release possible. Here are some highlights โœจ: - ๐Ÿš€ We have only 2 left in the [breaking changes](https://github.com/mui/material-ui/issues/20012). The plan to release 5.0.0-beta.0 is on July 1st and will start to promote its usage over v4. - ๐ŸŽจ We have updated `Slider` to match current [Material Design guidelines](https://material.io/components/sliders). - ๐Ÿ’ก `IconButton` now supports 3 sizes (`small, medium, large`). [See demo](https://mui.com/components/buttons/#sizes-2). - โ™ฟ๏ธ We have improved the default style of the `Link` to be more accessible (#26145) @ahmed-28 ### `@material-ui/core@5.0.0-alpha.38` #### Breaking changes - ​[Menu] Use ButtonBase in MenuItem (#26591) @siriwatknp - Change the default value of `anchorOrigin.vertical` to follow the Material Design guidelines. The menu now displays below the anchor instead of on top of it. You can restore the previous behavior with: ```diff +
  • ``` - The prop `listItemClasses` was removed, you can use `classes` instead. ```diff - + ``` - ​[theme] Improve default breakpoints (#26746) @siriwatknp The default breakpoints were changed to better match the common use cases. They also better match the Material Design guidelines. [Read more about the change](https://github.com/mui/material-ui/issues/21902). ```diff { xs: 0, sm: 600, - md: 960, + md: 900, - lg: 1280, + lg: 1200, - xl: 1920, + xl: 1536, } ``` If you prefer the old breakpoint values, use the snippet below. ```js import { createTheme } from '@material-ui/core/styles'; const theme = createTheme({ breakpoints: { values: { xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920, }, }, }); ``` - ​[IconButton] Add size `large` and update styles (#26748) @siriwatknp The default size's padding is reduced to `8px` which makes the default IconButton size of `40px`. To get the old default size (`48px`), use `size="large"`. The change was done to better match Google's products when Material Design stopped documenting the icon button pattern. ```diff - + ``` - ​[Slider] Adjust css to match the specification (#26632) @siriwatknp Rework the CSS to match the latest [Material Design guidelines](https://material.io/components/sliders) and make custom styles more intuitive. [See documentation](https://mui.com/components/slider/). You can reduce the density of the slider, closer to v4 with the [`size="small"` prop](https://mui.com/components/slider/#sizes). - ​[IconButton] Remove label span (#26801) @siriwatknp `span` element that wraps children has been removed. `label` classKey is also removed. More details about [this change](https://github.com/mui/material-ui/pull/26666). ```diff ``` - ​[core] Remove `unstable_` prefix on the `useThemeProps` hook (#26777) @mnajdova The following utilities were renamed to not contain the `unstable_` prefix: - `@material-ui/sytstem` ```diff import { - unstable_useThemeProps, + useThemeProps, } from '@material-ui/system'; ``` - `@material-ui/core` ```diff import { - unstable_useThemeProps, + useThemeProps, } from '@material-ui/core/styles'; ``` #### Changes - ​[Alert] Add support for custom colors (#26831) @varandasi - ​[Button] Fix loading text invisible when disabled (#26857) @DanielBretzigheimer - ​[ButtonBase] Consider as a link with a custom component and `to` prop (#26576) @shadab14meb346 - ​[ButtonBase] Derive state on render instead of in layout effects (#26762) @eps1lon - ​ [Drawer] Fix incorrect z-index (#26791) @michal-perlakowski - ​[Drawer] Remove incorrect transition handler props (#26835) @eps1lon - ​[Link] Improve accessibility support (#26145) @ahmed-28 - ​[Modal] Fix calculating scrollbar size when using custom scrollbar (#26816) @michal-perlakowski - ​[Rating] Make input ids less predictable (#26493) @eps1lon - ​[Stepper] Add componentsProps.label to StepLabel (#26807) @michal-perlakowski - ​[Tabs] Show error when Tab has display: none (#26783) @michal-perlakowski - ​[theme] Add base color palette type to components (#26697) @siriwatknp ### `@material-ui/system@5.0.0-alpha.38` #### Breaking Changes - ​[system] Normalize api for `createBox` (#26820) @mnajdova ```diff import { createBox } from '@material-ui/system'; -const styled = createBox(defaultTheme); +const styled = createBox({ defaultTheme }); ``` #### Changes - ​[system] Add ThemeProvider component (#26787) @mnajdova ### Docs - ​[docs] Fix misspelling of the word Typography (#26898) @dmrqx - ​[docs] Instruct users to install @material-ui/icons with the next tag (#26873) @michal-perlakowski - ​[docs] Sync translations (#26828) @l10nbot - ​[docs] Improve grammar of autocomplete/autofill section (#26798) @dijonkitchen - ​[docs] Explain "inherited props" better in the props table (#26778) @eps1lon - ​[docs] Fix documentation for upgrading to v5 (#26812) @tungdt-90 - ​[docs] Improve notification color (#26796) @mnajdova - ​[docs] Fix various a11y issues with /customization/color (#26757) @eps1lon - ​[docs] Move custom theme to frame (#26744) @siriwatknp - ​[docs] Fix small PT typo fix: inciar -> iniciar (#26775) @brunocavalcante - ​[I10n] Add Chinese (Hong Kong) (zh-HK) locale (#26637) @kshuiroy - ​[l10n] Add sinhalese (siLK) locale (#26875) @pavinduLakshan - ​[examples] Rename nextjs typescript theme from tsx to ts (#26862) @Izhaki ### Core - ​[test] Fix Drawer test API @oliviertassinari - ​[test] Adjust expected useAutocomplete error messages for React 18 (#26858) @eps1lon - ​[test] Convert Drawer tests to testing-library (#26837) @eps1lon - ​[test] Convert remaining enzyme tests to testing-library (#26832) @eps1lon - ​[test] Ignore ReactDOM.hydrate deprecation warnings (#26815) @eps1lon - ​[test] Reduce flakiness (#26761) @eps1lon - ​[useId] Reduce likelyhood of collisions (#26758) @eps1lon - ​yarn deduplicate @oliviertassinari - ​Fix running framer's prettier under pwsh (#26819) @michaldudak - ​[core] Update babel-plugin-optimize-clsx (#26861) @oliviertassinari - ​[core] Assume no document.all at runtime (#26821) @eps1lon - ​[core] Remove dependency on `@material-ui/private-theming` (#26793) @mnajdova - ​[core] Remove dependency on `@material-ui/styled-engine` (#26792) @mnajdova All contributors of this release in alphabetical order: @ahmed-28, @brunocavalcante, @DanielBretzigheimer, @dijonkitchen, @dmrqx, @eps1lon, @Izhaki, @kshuiroy, @l10nbot, @michal-perlakowski, @michaldudak, @mnajdova, @oliviertassinari, @pavinduLakshan, @shadab14meb346, @siriwatknp, @tungdt-90, @varandasi ## 5.0.0-alpha.37 _Jun 15, 2021_ A big thanks to the 11 contributors who made this release possible. Here are some highlights โœจ: - ๐Ÿ’„ Add support for responsive props on the Grid component (#26590) @likitarai1. This fixes a longstanding issue. You can now specify different values for each breakpoint. ```jsx ``` Head to the [documentation](https://mui.com/components/grid/#responsive-values) for more details. - โš’๏ธ We've introduced a new `useTheme` and `useThemeProps` hooks in the `@material-ui/system` package. We believe that this package can be used as a standalone styling solution for building custom design systems (#26649) @mnajdova. - ๐Ÿ’ฅ Made progress with the breaking changes. We have done 105 of the 109 changes [planned](https://github.com/mui/material-ui/issues/20012). We are getting closer to our goal of releasing 5.0.0-beta.0 on July 1st and start to promote its usage over v4. You can also follow [our milestone](https://github.com/mui/material-ui/milestone/35) for more details. - And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements. ### `@material-ui/core@5.0.0-alpha.37` #### Breaking changes - ​[Button] Remove label span (#26666) @siriwatknp The `span` element that wraps children has been removed. `label` classKey is also removed. The nested span was required for fixing a flexbox issue with iOS < 11.0. ```diff ``` #### Changes - ​[Button] Add missing color type (#26593) @sakura90 - ​[Grid] Add responsive direction and spacing props (#26590) @likitarai1 - ​[List] Add ListItemButton export to index (#26667) @chadmuro - ​[theme] Fix missing exported Breakpoints types (#26684) @robphoenix ### `@material-ui/system@5.0.0-alpha.37` #### Breaking changes - ​[system] Remove `theme` & `isRtl` from `useThemeProps` (#26701) @mnajdova The `isRtl` and `theme` props are no longer added by the `useThemeProps` hook. You can use the `useTheme` hook for this. ```diff -import { unstable_useThemeProps as useThemeProps } from '@material-ui/core/styles'; +import { unstable_useThemeProps as useThemeProps, useTheme } from '@material-ui/core/styles'; const Component = (inProps) => { - const { isRtl, theme, ...props } = useThemeProps({ props: inProps, name: 'MuiComponent' }); + const props = useThemeProps({ props: inProps, name: 'MuiComponent' }); + const theme = useTheme(); + const isRtl = theme.direction === 'rtl'; //.. rest of the code } ``` #### Changes - ​[system] Add useThemeProps & useTheme hooks (#26649) @mnajdova - ​[system] Add color manipulators (#26668) @mnajdova - ​[system] Fix support of custom shape in createTheme (#26673) @varandasi ### `@material-ui/unstyled@5.0.0-alpha.37` - ​[Slider] Improve TS definition (#26642) @mnajdova - ​[TrapFocus] Capture nodeToRestore via relatedTarget (#26696) @eps1lon ### `@material-ui/icons@5.0.0-alpha.37` - ​Revert "[icons] Only ship ES modules (#26310)" (#26656) @eps1lon The changes that we have tried in #26310 were breaking the integration with Next.js. ### `@material-ui/lab@5.0.0-alpha.37` - ​[core] Remove unused useKeyDown (#26765) @eps1lon - ​[DateTimePicker] Fix not visible selected tab icon (#26624) @nikitabobers ### Docs - ​[blog] Michaล‚ Dudak joins Material UI (#26700) @oliviertassinari - ​[docs] Migrate onepirate premium template to emotion part2 (#26707) @vicasas - ​[docs] Fix TextField demo layout (#26710) @vicasas - ​[docs] Improve Paperbase demo (#26711) @oliviertassinari - ​[docs] Migrate onepirate premium template to emotion part1 (#26671) @vicasas - ​[docs] Migrate paperbase premium template to emotion (#26658) @vicasas - ​[List] Fix demo to have correct semantic (#26742) @siriwatknp ### Core - ​[core] Monitore size of key system modules (#26712) @oliviertassinari - ​[core] Batch small changes (#26738) @oliviertassinari - ​[core] Batch small changes (#26628) @oliviertassinari - ​[test] Ignore ReactDOM.render deprecation warning (#26683) @eps1lon - ​[test] Run e2e test with React 18 on a schedule (#26690) @eps1lon - ​[test] Count profiler renders not passive effects (#26678) @eps1lon - ​[test] Bundling fixtures should not override source build with published build (#26657) @eps1lon - ​[test] Make tests oblivious to StrictMode (#26654) @eps1lon All contributors of this release in alphabetical order: @chadmuro, @eps1lon, @likitarai1, @mnajdova, @nikitabobers, @oliviertassinari, @robphoenix, @sakura90, @siriwatknp, @varandasi, @vicasas ## 5.0.0-alpha.36 _Jun 8, 2021_ A big thanks to the 14 contributors who made this release possible. Here are some highlights โœจ: - โš’๏ธ We've introduced a new `ListItemButton` component that should prevent common mistakes when using `` and help with customization and TypeScript support (#26446) @siriwatknp. - ๐Ÿ‘ฉโ€๐ŸŽค `experimentalStyled` is now available without the `experimental` prefix. We're confident that its API shouldn't receive any major changes until the stable release of v5 (#26558) @mnajdova. - ๐Ÿ“ฆ `@material-ui/icons` only ships ES modules and no longer CommonJS modules. This reduces the download size of the package from 1.7 MB to 1.2 MB and install size from 15.6 MB to 6.7 MB (#26310) @eps1lon. - ๐Ÿ’„ Add support for [row and column spacing](https://mui.com/components/grid/#row-amp-column-spacing) in the Grid component (#26559) @likitarai1. grid spacing demo Note that this feature was already available for [CSS grid users](https://mui.com/components/grid/#css-grid-layout) with the `rowGap` and `columnGap` props. ### `@material-ui/core@5.0.0-alpha.36` #### Breaking changes - ​[AppBar] Fix background color on dark mode (#26545) @siriwatknp The `color` prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the [Material Design guidelines](https://material.io/design/color/dark-theme.html). Use `enableColorOnDark` to restore the behavior of v4. ```jsx ``` - ​[core] Rename `experimentalStyled` to `styled` (#26558) @mnajdova Remove the experimental prefix, this module is going stable: ```diff -import { experimentalStyled as styled } from '@material-ui/core/styles'; +import { styled } from '@material-ui/core/styles'; ``` - ​[SwitchBase] Replace IconButton with ButtonBase (#26460) @siriwatknp - ​[theme] Improve default `primary`, `secondary` and `error` theme palette (#26555) @siriwatknp #### Changes - ​[Box] Fix module 'clsx' not found in system (#26553) @coder-freestyle - ​[Box] Fix runtime error when using styled-components without ThemeProvider (#26548) @mnajdova - ​[Radio][checkbox] Don't forward `color` to DOM elements (#26625) @siriwatknp - ​[Dialog] Flatten DialogTitle DOM structure, remove `disableTypography` (#26323) @eps1lon - ​[Grid] Add rowSpacing and columnSpacing props (#26559) @likitarai1 - ​[List] extract button from ListItem to ListItemButton (#26446) @siriwatknp - ​[Popover] Fix PaperProps.ref breaking positioning (#26560) @vedadeepta - ​[Rating] onChangeActive shouldn't be fired on blur/focus (#26584) @coder-freestyle - ​[Select] Fix custom font size centering arrow (#26570) @sarahannnicholson - ​[styled] Convert implicit styleProps to explicit (#26461) @mnajdova@siriwatknp - ​[Tabs] Fix RTL indicator (#26470) @siriwatknp - ​[Tabs] Fix arrow rotation in vertical & RTL (#26527) @siriwatknp - ​[TextField] Fix support for custom `size` prop value (#26585) @coder-freestyle - ​[Tooltip] Finish exiting once started (#26535) @eps1lon ### `@material-ui/icons@5.0.0-alpha.36` #### Breaking changes - ​[icons] Only ship ES modules (#26310) @eps1lon The `require()` of `@material-ui/icons` is no longer supported. This should not affect you if you're using a bundler like `webpack` or `snowpack` or meta frameworks like `next` or `gatsby`. ### `@material-ui/lab@5.0.0-alpha.36` #### Breaking changes - ​[pickers] Remove `openPickerIcon` prop in favor of `components.OpenPickerIcon` (#26223) @vedadeepta ```diff } ``` ### `@material-ui/system@5.0.0-alpha.36` - ​[system] Add createTheme util (#26490) @mnajdova ### Docs - ​[docs] Migrate templates to emotion (#26604) @vicasas - ​[docs] Remove custom primary & secondary color (#26541) @siriwatknp - ​[docs] Don't escape prop descriptions for markdown table context (#26579) @eps1lon - ​[docs] Prepare for data grid auto-generated docs (#26477) @m4theushw - ​[docs] Fix typo sx !== xs (#26596) @onpaws - ​[docs] Multiple select demos moving when selecting values (#26539) @itsnorbertkalacska - ​[docs] Improve migration guide for `@material-ui/styles` (#26552) @mnajdova - ​[docs] `Rating` `value` is nullable in `onChange` (#26542) @sakura90 - ​[example] Remove the dependency on @material-ui/styles (#26567) @garfunkelvila ### Core - ​[core] Ignore latest prettier run in git-blame @eps1lon - ​[core] Format @eps1lon - ​[test] Add bundle fixtures (#23166) @eps1lon - ​[website] Add Michaล‚ to the About Us page (#26557) @michaldudak All contributors of this release in alphabetical order: @coder-freestyle, @eps1lon, @garfunkelvila, @itsnorbertkalacska, @likitarai1, @m4theushw, @michaldudak, @mnajdova, @onpaws, @sakura90, @sarahannnicholson, @siriwatknp, @vedadeepta, @vicasas ## 5.0.0-alpha.35 _May 31, 2021_ A big thanks to the 14 contributors who made this release possible. Here are some highlights โœจ: - ๐Ÿ‘ฉโ€๐ŸŽค We have completed the migration to emotion of all the components (`@material-ui/core` and `@material-ui/lab`) @siriwatknp, @mnajdova. - ๐Ÿ“ฆ Save [10 kB gzipped](https://bundlephobia.com/package/@material-ui/core@5.0.0-alpha.34) by removing the dependency on `@material-ui/styles` (JSS) from the core and the lab (#26377, #26382, #26376) @mnajdova. - โš’๏ธ Add many new [codemods](https://github.com/mui/material-ui/blob/HEAD/packages/mui-codemod/README.md) to automate the migration from v4 to v5 (#24867) @mbrookes. - And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements. ### `@material-ui/core@5.0.0-alpha.35` #### Breaking changes - [styles] Remove `makeStyles` from `@material-ui/core` (#26382) @mnajdova The `makeStyles` JSS utility is no longer exported from `@material-ui/core`. You can use `@material-ui/styles` instead. Make sure to add a `ThemeProvider` at the root of your application, as the `defaultTheme` is no longer available. If you are using this utility together with `@material-ui/core`, it's recommended you use the `ThemeProvider` component from `@material-ui/core` instead. ```diff -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; +const theme = createTheme(); const useStyles = makeStyles((theme) => ({ background: theme.palette.primary.main, })); function Component() { const classes = useStyles(); return
    } // In the root of your app function App(props) { - return ; + return ; } ``` - [styles] Remove `withStyles` from `@material-ui/core` (#26377) @mnajdova The `withStyles` JSS utility is no longer exported from `@material-ui/core`. You can use `@material-ui/styles` instead. Make sure to add a `ThemeProvider` at the root of your application, as the `defaultTheme` is no longer available. If you are using this utility together with `@material-ui/core`, you should use the `ThemeProvider` component from `@material-ui/core` instead. ```diff -import { withStyles } from '@material-ui/core/styles'; +import { withStyles } from '@material-ui/styles'; +import { createTheme, ThemeProvider } from '@material-ui/core/styles'; +const defaultTheme = createTheme(); const MyComponent = withStyles((props) => { const { classes, className, ...other } = props; return
    })(({ theme }) => ({ root: { background: theme.palette.primary.main }})); function App() { - return ; + return ; } ``` - [styles] Merge options in `experimentalStyled` (#26396) @mnajdova The options inside the `experimentalStyled` module are now merged under one object. In the coming weeks, we will rename ths module: `styled()` to signal that it's no longer experimental. ```diff -experimentalStyled(Button, { shouldForwardProp: (prop) => prop !== 'something' }, { skipSx: true })(...); +experimentalStyled(Button, { shouldForwardProp: (prop) => prop !== 'something', skipSx: true })(...); ``` - [Tabs] Update `min` & `max` width and remove `minWidth` media query (#26458) @siriwatknp Update the implementation to better match Material Design: - Tab `minWidth` changed from `72px` => `90px` (without media-query) according to [material-design spec](https://material.io/components/tabs#specs) - Tab `maxWidth` changed from `264px` => `360px` according to [material-design spec](https://material.io/components/tabs#specs) #### Changes - [ButtonBase] Fix role="button" attribute (#26271) @Gautam-Arora24 - [Dialog] Fix support for custom breakpoints (#26331) @jeferson-sb - [Select] Open popup below button (#26200) @oliviertassinari - [TextField] Add variants support, e.g. custom sizes (#26468) @siriwatknp - [Tooltip] Improve handling of small vs. touch screens (#26097) @oliviertassinari ### `@material-ui/codemod@5.0.0-alpha.35` - [codemod] Add multiple codemods to migrate components from v4 to v5 (#24867) @mbrookes - [codemod] Correct path and add target placeholder (#26414) @mbrookes ### `@material-ui/icons@5.0.0-alpha.35` - [icons] Use array children instead of React fragments (#26309) @eps1lon Reduce a bit the size of the package. ### `@material-ui/system@5.0.0-alpha.35` We are progressively moving all modules that are relevant to styling custom design systems in this package. It's meant to be complementary with `@material-ui/unstyled`. - [system] Add Box to system (#26379) @mnajdova - [system] Add createStyled utility (#26485) @mnajdova ### `@material-ui/styled-engine-sc@5.0.0-alpha.35` - [styled-engine] Fix styled() util to respect `options` (#26339) @pasDamola ### `@material-ui/lab@5.0.0-alpha.35` #### Breaking changes - [pickers] Remove allowKeyboardControl (#26451) @eps1lon - [ClockPicker] Rework keyboard implementation (#26400) @eps1lon Remove the `allowKeyboardControl` prop from ClockPicker (and TimePicker and variants). Keyboard navigation now works by default. #### Changes - [Button] Migrate LoadingButton to emotion (#26370) @siriwatknp - [ClockPicker] Selected option is the active descendant (#26411) @eps1lon - [DatePicker] Migrate CalendarPicker to emotion (#26390) @siriwatknp - [DatePicker] Migrate CalendarPickerSkeleton to emotion (#26335) @siriwatknp - [DateRangePicker] Migrate DateRangePickerDay to emotion (#26368) @siriwatknp - [DateRangePicker] Migrate internal components to emotion (#26326) @siriwatknp - [pickers] Migrate PickersCalendarHeader to emotion (#26354) @siriwatknp - [pickers] Migrate PickersModalDialog to emotion (#26355) @siriwatknp - [pickers] Migrate PickersPopper to emotion (#26391) @siriwatknp - [pickers] Migrate PickersTransition to emotion (#26353) @siriwatknp - [TimePicker] Migrate ClockPicker to emotion (#26389) @siriwatknp - [TreeView] Correctly select items in deeply nested trees (#26413) @Dru89 ### Docs - [docs] Add page for `experimentalStyled()` (#26361) @mnajdova - [docs] Add TypeScript convention (#26259) @siriwatknp - [docs] Add warning about git-blame-ignore-revs (#26487) @eps1lon - [docs] Clarify migration from Hidden (#26348) @m4theushw - [docs] Fix grammar for style library page (#26325) @mbrookes - [docs] Persist copied state indefinitely or until the user moves their cursor (#26336) @eps1lon - [docs] Typo in MultipleSelect (#26466) @wolfykey - [docs] Update system installation for v5 (#26481) @mnajdova - [template] Demo how to retreive form value (#26393) @akshitsuri ### Core - [core] Batch small changes (#26434) @oliviertassinari - [core] Fix peer dependencies declaration with yarn v2 (#26433) @oliviertassinari - [core] Remove `@material-ui/styles` dependencies from declaration files too (#26376) @mnajdova - [core] Revert Leverage CircleCI workspaces for jobs after checkout (#26444) @eps1lon - [test] Don't hoist constant elements (#26448) @eps1lon - [test] Fix prop-type warning (#26432) @oliviertassinari - [test] Flush scheduled effects before user event returns (#26447) @eps1lon - [test] Move ClockPicker tests to ClockPicker.test (#26407) @eps1lon - [test] setProps from createPickerRender should set props on the rendered element (#26405) @eps1lon - [utils] Convert useId to TypeScript (#26491) @eps1lon - [website] Add Material UI X page (#25794) @DanailH - [website] Add open application section (#26501) @oliviertassinari - [website] Add Siriwat to team page (#26406) @siriwatknp All contributors of this release in alphabetical order: @akshitsuri, @DanailH, @Dru89, @eps1lon, @Gautam-Arora24, @jeferson-sb, @m4theushw, @mbrookes, @mnajdova, @oliviertassinari, @pasDamola, @siriwatknp, @wolfykey ## 5.0.0-alpha.34 _May 18, 2021_ A big thanks to the 16 contributors who made this release possible. Here are some highlights โœจ: - ๐Ÿ’ฅ Make progress with the breaking changes. We have done 89 of the 109 changes [planned](https://github.com/mui/material-ui/issues/20012). We will release 5.0.0-beta.0 on July 1st and start to promote its usage over v4. You can also follow [our milestone](https://github.com/mui/material-ui/milestone/35) for more details. - ๐Ÿš€ Make progress with components migration to emotion. We have done 153 of the 168 components (almost there!) - And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements. ### `@material-ui/core@5.0.0-alpha.34` #### Breaking change - ​[Select][nativeselect] Polish CSS classes (#26186) @m4theushw **Select, NativeSelect** Merge the `selectMenu` slot into `select`. Slot `selectMenu` was redundant. The `root` slot is no longer applied to the select, but to the root. ```diff - + ``` **TablePagination** Move the custom class on `input` to `select`. The `input` key is being applied on another element. ```diff ``` - ​[core] Move `StyledEngineProvider` to `@material-ui/core/styles` (#26265) @mnajdova Change location of `StyledEngineProvider` import. ```diff -import StyledEngineProvider from '@material-ui/core/StyledEngineProvider'; +import { StyledEngineProvider } from '@material-ui/core/styles'; ``` - ​[Autocomplete] Apply .Mui-focused instead of data-focus on the focused option (#26181) @m4theushw The `data-focus` attribute is not set on the focused option anymore, instead, global class names are used. ```diff -'.MuiAutocomplete-option[data-focus="true"]': { +'.MuiAutocomplete-option.Mui-focused': { ``` - ​[Radio] Make color primary default (#26180) @vicasas - ​[Switch] Make color primary default (#26182) @vicasas - ​[pickers] Drop ResponsiveWrapper usage (#26123) @eps1lon When a responsive picker changes from mobile to desktop, it will now clear its entire state. To keep the original behavior you can implement a controlled picker: ```js function ResponsiveDateTimePicker(props) { const [open, setOpen] = React.useState(false); return ( setOpen(false)} onOpen={() => setOpen(true)} {...props} /> ); } ``` - ​[Autocomplete] Rename getOptionSelected to isOptionEqualToValue (#26173) @m4theushw ```diff option.title === value.title} + isOptionEqualToValue={(option, value) => option.title === value.title} /> ``` > Follow [this link](https://mui.com/material-ui/migration/migration-v4/) for full migration from v4 => v5 #### Changes - ​[TextField] Fix hiddenLabel type of FilledInput (#26290) @siriwatknp - ​[TextField] Fix classes forward to InputBase (#26231) @arpitBhalla - ​[Autocomplete] Fix missing 'createOption' in AutocompleteCloseReason type (#26197) @Gautam-Arora24 - ​[Autocomplete] Reduce CSS specificity by 1 (#26238) @Gautam-Arora24 - ​[ButtonBase] Omit aria-disabled if not disabled (#26189) @Gautam-Arora24 - ​[colors] Fix A inconsistencies (#26196) @oliviertassinari - ​[examples] Fix dynamic global styles & global styles leak in the ssr examples (#26177) @mnajdova - ​[Slider] Fix support for non primary colors (#26285) @davidfdriscoll - ​[Slider] Center value label for disabled slider (#26257) @davidfdriscoll - ​[styled-engine] Fix styled-components not supporting empty style (#26098) @ruppysuppy - ​[styles] Fix overrides type issues (#26228) @mnajdova - ​[Container] Fix support for custom breakpoints (#26328) @alanszp ### `@material-ui/lab@5.0.0-alpha.34` - ​[pickers] Migrate TimePickerToolbar to emotion (#26274) @siriwatknp - ​[pickers] Migrate DatePickerToolbar to emotion (#26292) @siriwatknp - ​[DateTimePicker] Migrate DateTimePickerTabs and Toolbar to emotion (#26327) @siriwatknp - ​[DatePicker] Migrate PickersYear to emotion (#25949) @siriwatknp - ​[DateRangePicker] Migrate PickersToolbarText to emotion (#25983) @siriwatknp - ​[pickers] Migrate StaticWrapper to emotion (#26275) @siriwatknp - ​[pickers] Migrate Clock to emotion (#26278) @siriwatknp - ​[pickers] Migrate PickersToolbar to emotion (#26273) @siriwatknp - ​[pickers] Migrate ClockNumber to emotion (#26058) @siriwatknp - ​[pickers] Migrate ClockPointer to emotion (#26057) @siriwatknp - ​[pickers] Migrate PickersMonth to emotion (#26021) @siriwatknp - ​[pickers] Migrate MonthPicker to emotion (#26025) @siriwatknp - ​[pickers] Migrate PickersDay to emotion (#25995) @siriwatknp - ​[pickers] Migrate PickersToolbarButton to emotion (#25989) @siriwatknp ### `@material-ui/icons@5.0.0-alpha.34` - ​[icons] Remove extraneous React.Fragment (#26308) @eps1lon - ​[icons] Synchronize icons (#26302) @eps1lon New DriveFileMove icon and its variants ### Docs - ​[NProgressBar] Fix invalid ARIA and HTML (#26234) @eps1lon - ​[docs] Simplify demos slider (#26324) @oliviertassinari - ​[docs] Use transpiled icons directly (#26268) @eps1lon - ​[docs] Remove dependency on withStyles from @material-ui/core/styles (#26269) @mnajdova - ​[docs] Add Jalali date picker demo (#26243) @smmoosavi - ​[docs] Remove last dependencies on `makeStyles` from `@material-ui/core/styles` (#26246) @mnajdova - ​[docs] Polish the pickers demo (#26094) @oliviertassinari - ​[docs] Fix broken overrides link on API pages (#26244) @mnajdova - ​[docs] Improve documentation for Buttons (#26184) @arpitBhalla - ​[docs] Emphasize on props for screen readers (#26222) @atisheyJain03 - ​[docs] Link third-party routing in Bottom navigation (#26190) @arpitBhalla - ​[docs] Migrate Select, Progress demos to emotion (#26178) @mnajdova - ​[docs] Add accessibility section to Badges (#26009) @likitarai1 - ​[docs] Migrate Popper, Drawer demos to emotion (#26183) @mnajdova - ​[docs] Use public next/router events API (#26233) @eps1lon - ​[docs] Remove remnants Hidden component (#26191) @vicasas - ​[docs] Ensure TreeView demos don't overflow demo container (#26161) @eps1lon - ​[docs] Fix a typo in the import statement of LocalizationProvider (#26226) @huyenltnguyen - ​[docs] Improve react-admin coverage in the showcase (#26169) @fzaninotto - ​[docs] Fix Workbox that are causing infinite loading of site (#26193) @arpitBhalla ### Core - ​[core] Skip sx prop in internal components (#26235) @mnajdova - ​[core] Remove `withStyles` dependencies from `@material-ui/core/styles` (#26277) @mnajdova - ​[core] Include human readable target in the BrowserStack build (#26322) @eps1lon - ​[core] Fix NotchedOutlineProps type (#26305) @gnowland - ​[core] Add file for git-blame --ignore-revs-file (#26295) @eps1lon - ​[core] Ensure component class keys aren't missing (#25754) @eps1lon - ​[core] Drop support for blocking mode (#26262) @eps1lon - ​[core] Don't download monorepo packages (#26261) @eps1lon - ​[core] Batch small changes (#26199) @oliviertassinari - ​[core] Extract classes descriptions from TypeScript (#25933) @eps1lon - ​[styled-engine] Fix test script (#26258) @ruppysuppy All contributors of this release in alphabetical order: @arpitBhalla, @atisheyJain03, @davidfdriscoll, @eps1lon, @fzaninotto, @Gautam-Arora24, @gnowland, @huyenltnguyen, @likitarai1, @m4theushw, @mnajdova, @oliviertassinari, @ruppysuppy, @siriwatknp, @smmoosavi, @vicas ## 5.0.0-alpha.33 _May 9, 2021_ A big thanks to the 17 contributors who made this release possible. Here are some highlights โœจ: - ๐Ÿ’ฅ Make progress with the breaking changes. We have done 81 of the 109 changes [planned](https://github.com/mui/material-ui/issues/20012). We will release 5.0.0-beta.0 on July 1st and start to promote its usage over v4. You can also follow [our milestone](https://github.com/mui/material-ui/milestone/35) for more details. - And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements. ### `@material-ui/core@5.0.0-alpha.33` #### Breaking changes - ​[core] Remove deprecated innerRef prop (#26028) @m4theushw **withStyles** Replace the `innerRef` prop with the `ref` prop. Refs are now automatically forwarded to the inner component. ```diff import * as React from 'react'; import { withStyles } from '@material-ui/core/styles'; const MyComponent = withStyles({ root: { backgroundColor: 'red', }, })(({ classes }) =>
    ); function MyOtherComponent(props) { const ref = React.useRef(); - return ; + return ; } ``` **withTheme** Replace the `innerRef` prop with the `ref` prop. Refs are now automatically forwarded to the inner component. ```diff import * as React from 'react'; import { withTheme } from '@material-ui/core/styles'; const MyComponent = withTheme(({ theme }) =>
    {props.theme.direction}
    ); function MyOtherComponent(props) { const ref = React.useRef(); - return ; + return ; } ``` - ​[theme] Rename `createMuiTheme` to `createTheme` (#25992) @m4theushw Developers only need one theme in their application. A prefix would suggest a second theme is needed. It's not the case. `createMuiTheme` will be removed in v6. ```diff -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const theme = createTheme({ ``` - ​[theme] Remove MuiThemeProvider alias (#26171) @m4theushw The `MuiThemeProvider` is no longer exported. Use `ThemeProvider` instead. It was removed from the documentation during v4-beta, 2 years ago. ```diff -import { MuiThemeProvider } from '@material-ui/core/styles'; +import { ThemeProvider } from '@material-ui/core/styles'; ``` - ​[Box] Remove the `clone` prop (#26031) @m4theushw Its behavior can be obtained using the `sx` prop. ```diff - - - + ``` - ​[Box] Remove render prop (#26113) @m4theushw Its behavior can be obtained using the `sx` prop directly on the child if it's a Material UI component. For non-Material UI components use the `sx` prop in conjunction with the `component` prop: ```diff - - {(props) => } - + ``` ```diff - - {(props) => } - +Save ``` - ​[Checkbox] Make color="primary" default (#26002) @vicasas This better matches the Material Design guidelines. ```diff - + + - +