github mui/material-ui v5.11.12

latest releases: v6.1.1, v6.1.0, v6.0.2...
18 months ago

Mar 6, 2023

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

  • @michaldudak added the multiselect functionality to SelectUnstyled (#36274)
  • @mnajdova updated extendTheme so that it can generate CSS variables with default values. This means that the CssVarsProvider is no longer required for Joy UI when using the default theme (#35739)
  • other 🐛 bug fixes and 📚 documentation improvements.

@mui/material@5.11.12

  • ​[Autocomplete] Fix list scrolls to the top when new data is added on touch devices (#36231) @SaidMarar
  • ​[Autocomplete] Add Mui-expanded class (#33312) @Osman-Sodefa
  • ​[Dialog] Use the id prop provided to the DialogTitle component (#36353) @Kundan28
  • ​[Menu] Fix Menu Paper styles overriding in the theme (#36316) @Paatus

@mui/lab@5.0.0-alpha.122

@mui/system@5.11.12

Breaking changes

  • ​[core] Generate vars in extendTheme (#35739) @mnajdova

    The shouldSkipGeneratingVar prop was moved from the createCssVarsProvider's option to the theme. If the default theme does not use extendTheme from Material UI or Joy UI, it needs to be wrapped inside unstable_createCssVarsTheme - a util exported from the MUI System. Below is an example of how the migration should look like:

     import {
        unstable_createCssVarsProvider as createCssVarsProvider,
    +   unstable_createCssVarsTheme as createCssVarsTheme,
     } from '@mui/system';
    
     const { CssVarsProvider } = createCssVarsProvider({
    -  theme: {
    +  theme: createCssVarsTheme({
         colorSchemes: {
           light: {
             typography: {
               htmlFontSize: '16px',
               h1: {
                 fontSize: '1rem',
                 fontWeight: 500,
               },
             },
           },
         },
    +    shouldSkipGeneratingVar: (keys) => keys[0] === 'typography' && keys[1] === 'h1',
    -  },
    +  }),
       defaultColorScheme: 'light',
    -  shouldSkipGeneratingVar: (keys) => keys[0] === 'typography' && keys[1] === 'h1',
     });

    Or you can define it directly in the theme prop:

     <CssVarsProvider
    +   theme={createCssVarsProvider({
    +    // other theme keys
    +    shouldSkipGeneratingVar: (keys) => keys[0] === 'typography' && keys[1] === 'h1'
    +   })} />

    This breaking change only affects experimental APIs

@mui/base@5.0.0-alpha.120

Breaking changes

  • ​[Select][base] Add the multiselect functionality to SelectUnstyled (#36274) @michaldudak

    The MultiSelectUnstyled was removed. The SelectUnstyled component with the multiple prop should be used instead. Additionally, the SelectUnstyledProps received a second generic parameter: Multiple extends boolean. If you deal with strictly single- or multi-select components, you can hard-code this parameter to false or true, respectively. Below is an example of how the migration should look like:

    -import MultiSelectUnstyled from '@mui/base/MultiSelectUnstyled';
    +import SelectUnstyled from '@mui/base/SelectUnstyled';
    
     export default App() {
    -return <MultiSelectUnstyled />
    +return <SelectUnstyled multiple />
     }

Changes

@mui/joy@5.0.0-alpha.70

Breaking changes

  • ​[Joy] Change CSS variables naming for components (#36282) @hbjORbj

    Joy UI has new naming standards of the CSS variables for its components. Below is an example of how the migration should look like:

    -<List sx={{ py: 'var(--List-divider-gap)' }}>
    +<List sx={{ py: 'var(--ListDivider-gap)' }}>
    -<Switch sx={{ '--Switch-track-width': '40px' }}>
    +<Switch sx={{ '--Switch-trackWidth': '40px' }}>

Changes

  • ​[Autocomplete][joy] Add disabled class to the popup indicator (#36397) @hbjORbj
  • ​[Joy] Fix broken loading button in Safari (#36298) @Kuba429

Docs

Core

All contributors of this release in alphabetical order: @cherniavskii, @hbjORbj, @joserodolfofreitas, @Kuba429, @Kundan28, @LukasTy, @MBilalShafi, @michaldudak, @mnajdova, @NoFr1ends, @oliviertassinari, @Osman-Sodefa, @Paatus, @sai6855, @SaidMarar, @varunmulay22, @ZeeshanTamboli

Don't miss a new material-ui release

NewReleases is sending notifications on new releases.