May 2, 2023

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

• all planned breaking changes for Base UI are done. The first beta release should come next week 🎉
• 🐛 bug fixes and 📚 documentation improvements.

@mui/material@5.12.3

• ​[Accordion] Add missing component type (#37111) @sai6855
• ​[ButtonGroup] Should not retain divider color when it is disabled and variant is text (#36967) @DavidBoyer11
• ​[Divider] Fix styles on dividers with text (#35072) @maxdestors
• ​[TextField] Improve IntelliSense support for props (#36737) @sai6855
• ​[TextField] Fix running click event on disabled (#36892) @sai6855

@mui/joy@5.0.0-alpha.78

• ​[Joy] Miscellaneous fixes and docs improvement (#37026) @siriwatknp

@mui/base@5.0.0-alpha.128

Breaking changes

• The component prop is no longer supported because it can be replaced with the slots API. This is how the transformation will look like:

   <Button
  -  component="span"
  +  slots={{ root: "span" }}
   />
  

  If using TypeScript, the custom component type should be added as a generic on the Button component.

  -<Button
  +<Button<typeof CustomComponent>
     slots={{ root: CustomComponent }}
     customProp="foo"
   />
  

  There is codemod that you can run in your project to do the transformation:

  npx @mui/codemod v5.0.0/base-remove-component-prop <path>
  

  The full documentation about the codemod can be found here.

  This is the list of PR related to this change:

  • ​[Button][base] Drop component prop (#36677) @mnajdova
  • ​[Badge][base] Drop component prop (#37028) @hbjORbj
  • ​[FormControl][base] Drop component prop (#37031) @hbjORbj
  • ​[Input][base] Drop component prop (#37057) @hbjORbj
  • ​[Menu][base] Drop component prop (#37033) @hbjORbj
  • ​[MenuItem][base] Drop component prop (#37032) @hbjORbj
  • ​[Modal][base] Drop component prop (#37058) @hbjORbj
  • ​[Option][base] Drop component prop (#37052) @hbjORbj
  • ​[OptionGroup][base] Drop component prop (#37055) @hbjORbj
  • ​[Popper][base] Drop component prop (#37084) @hbjORbj
  • ​[Select][base] Drop component prop (#37035) @hbjORbj
  • ​[Slider][base] Drop component prop (#37056) @hbjORbj
  • ​[Snackbar][base] Drop component prop (#37041) @nicolas-ot
  • ​[Switch][base] Drop component prop (#37053) @hbjORbj
  • ​[Tab][base] Drop component prop (#36768) @sai6855
  • ​[Tabs][base] Drop component prop (#36770) @sai6855
  • ​[TablePagination][base] Drop component prop (#37059) @sai6855
  • ​[TabPanel][base] Drop component prop (#37054) @sai6855
  • ​[TabsList][base] Drop component prop (#37042) @sai6855

• ​[base] Improve API consistency (#36970) @michaldudak

  Brought consistency to Base UI components and hooks' parameters and return values:

  1. Whenever a hook needs a ref, it's now called <slot_name>Ref, which matches the get<slot_name>Props in the return value.
  2. All hooks that accept external refs now return merged refs, making combining multiple hooks on one element easier. This was proven necessary in several compound components (like menuItem being both a button and a list item). The type of this value is React.RefCallback as using the more general React.Ref caused variance issues.
  3. Type of accepted refs is standardized to React.Ref<Element>
  4. Naming and typing of the forwarded ref in unstyled components were standardized - it's forwardedRef: React.ForwardedRef<Element> (unless a more specific type is needed).
  5. The shape of the definition of unstyled components was standardized - it's React.forwardRef(function Component(props: Props, forwardedRef: React.Ref<Element>) { ... });. Specifically, the generic parameters of forwardRef were removed as they are specified in function arguments.

Changes

• ​[FormControl][base] Do not use optional fields in useFormControlContext's return value (#37037) @michaldudak

Docs

• ​[base][docs] Add Base UI Quickstart Guide (#36717) @mj12albert
• ​[docs] Fix Material UI's API linking to Base UI (#37121) @mnajdova
• ​[docs] Fix pagination in the DataGrid demo (#37114) @cherniavskii
• ​[docs] Add notification to the release of the new Time Picker UI (#37065) @joserodolfofreitas
• ​[docs] Specify "Material UI" (not "MUI") where appropriate throughout the docs (#37066) @samuelsycamore
• ​[docs] Use focus-visible instead of focus for Menu demos (#36847) @michaldudak
• ​[docs] Fix small regressions API pages (#36972) @oliviertassinari
• ​[docs] Handle a few docs-feedback (#36977) @oliviertassinari
• ​[docs] Fix anchor link in customization (#37004) @oliviertassinari
• ​[docs] Add a note about minimal required version for theme merging to the guides (#36973) @jakub-stastny
• ​[docs] smooth scrolling added for back to top (#37011) @PunitSoniME
• ​[docs] Remove useFormControl return values from demos page (#37036) @ZeeshanTamboli
• ​ [docs][base] Move styles to the bottom of demos code for SwitchUnstyled (#36720) @varunmulay22
• ​ [docs][base] Move styles to the bottom of demos code for InputUnstyled (#36724) @varunmulay22
• ​ [docs][base] Move styles to the bottom of demos code for SliderUnstyled (#36721) @varunmulay22
• ​ [docs][base] Move styles to the bottom of demos code for Snackbar (#36719) @varunmulay22
• ​[docs][base] Move styles to the bottom of demos code for SelectUnstyled (#36718) @varunmulay22
• ​[templates] Image not displayed in blog layout of React template. (#36991) @navedqb
• ​[website] Take the design role offline @oliviertassinari
• ​[website] Fix URL convention @oliviertassinari
• ​[docs] Turn off job banner on docs (#36080) @joserodolfofreitas

Core

• ​[core] Allow type alias as well in hooks API docs generation (#37034) @ZeeshanTamboli

All contributors of this release in alphabetical order: @cherniavskii, @DavidBoyer11, @hbjORbj, @jakub-stastny, @joserodolfofreitas, @maxdestors, @michaldudak, @mj12albert, @mnajdova, @navedqb, @nicolas-ot, @oliviertassinari, @PunitSoniME, @sai6855, @samuelsycamore, @siriwatknp, @varunmulay22, @ZeeshanTamboli