@mui/styles 5.11.12

v5.11.12

on Node.js NPM

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

• ​[TreeView] Fix Tree View inside shadow root crashes (#36225) @NoFr1ends

@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

• ​[useSnackBar] Add explicit return type (#36052) @sai6855
• ​[useMenu] Fix import type syntax (#36411) @ZeeshanTamboli
• ​[useSwitch] Add explicit return type (#36050) @sai6855

@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

• ​[docs][joy] Clarify when CssVarsProvider is required (#36410) @mnajdova
• ​MUI X v6 release announcement (#36398) @joserodolfofreitas
• ​[docs] Add instructions for deploying docs without a release (#36301) @cherniavskii
• ​[docs] Fix 301 redirections on the docs @oliviertassinari
• ​[docs] Update MUI X banner to reflect stable release (#36354) @MBilalShafi
• ​[docs] Clarify the future plan for integrating MUI Base in Material UI (#36365) @mnajdova
• ​[docs] Improve visual look of loose lists (#36190) @oliviertassinari
• ​[docs] Fix @mui/styles example links (#36331) @oliviertassinari
• ​[docs][joy] Build TS versions for List component demos (#36382) @sai6855
• ​[docs][joy] Build TS versions for Radio component demos (#36406) @sai6855
• ​[docs][joy] Build TS versions for Checkbox component demos (#36381) @sai6855
• ​[docs][joy] Build TS versions for Select component demos (#36380) @sai6855
• ​[docs][joy] Build TS versions for Typography component demos (#36378) @varunmulay22
• ​[docs][joy] Add typescript demos for Divider (#36374) @sai6855
• ​[docs][joy] Build TS versions for Textarea component demos (#36371) @varunmulay22
• ​[docs][joy] Build TS versions for Link component demos (#36366) @hbjORbj

Core

• ​Revert "Bump rimraf to ^4.1.3" (#36420) @mnajdova
• ​[core] Fix test utils types and external buildApiUtils usage issues (#36310) @LukasTy
• ​[test] Remove duplicate combobox role queries in Autocomplete tests (#36394) @ZeeshanTamboli
• ​[website] Clarify redistribution @oliviertassinari
• ​[website] Sync /about page (#36334) @oliviertassinari

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