@mui/base - npm Package Versions

@mui/base@5.0.0-alpha.121

• [docs][base] Improve the Slots Table in API docs (#36330) @hbjORbj

@mui/base@5.0.0-alpha.120

Breaking changes

• ​<!-- 27 -->[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

• ​<!-- 34 -->[useSnackBar] Add explicit return type (#36052) @sai6855
• ​<!-- 04 -->[useMenu] Fix import type syntax (#36411) @ZeeshanTamboli
• ​<!-- 03 -->[useSwitch] Add explicit return type (#36050) @sai6855

@mui/base@5.0.0-alpha.119

Breaking changes

• ​<!-- 29 -->[base] Remove classes prop from the Base components that have it (#36157) @hbjORbj These are the components affected by this change: ModalUnstyled, SliderUnstyled, TablePaginationUnstyled and TablePaginationActionsUnstyled. You can replace the classes prop by providing the class name prop directly to the prop via slotProps. Below is an example of how the migration should look like:

   <TablePaginationUnstyled
  -   classes={{ toolbar: 'toolbar-classname', menuItem: 'menuItem-classname' }}
  +   slotProps={{ toolbar: { className: 'toolbar-classname' }, menuItem: { className: 'menuItem-classname'}}}
   />
  

• ​<!-- 28 -->[base] Move hooks to their own directories (#36235) @hbjORbj Base hooks (e.g., useSelect) are no longer exported from {Component}Unstyled directories and instead they have their own directories. Below is an example of how the migration should look like:

  -import { useBadge } from '@mui/base/BadgeUnstyled';
  +import useBadge from '@mui/base/useBadge';
  

  You can use this codemod to help with the migration.

Changes

• ​<!-- 31 -->[Autocomplete] Add docs interface for the hook (#36242) @HeVictor
• ​<!-- 09 -->[MenuUnstyled] Remove extra useMemo (#36265) @ivp-dev
• ​<!-- 31 -->[base] Export all slot prop overrides interfaces (#36323) @michaldudak

@mui/base@5.0.0-alpha.118

• [base] Override the types of slotProps per slot (#35964) @hbjORbj
• [Select][base] Prevent unnecessary rerendering of Select options (#35946) @michaldudak
• [Select][base] Update the generated docs (#36183) @michaldudak
• [useAutocomplete] Pass only valid values for the getOptionLabel prop (#36088) @rangoo94
• [useAutocomplete] Fix useAutocomplete disabled prop not disabling the input (#36076) @sai6855
• [useInput] Add return value interface (#36036) @Shorifpatwary
• [UseTabPanel] Add explicit return type (#36053) @Shorifpatwary
• [useTabsList] Add explicit return type (#36048) @sai6855
• [Tab] Add explicit return type to useTab (#36046) @sai6855

@mui/base@5.0.0-alpha.116

• ​<!-- 29 -->[ListboxUnstyled] Fix option state highlighted to prevent unnecessary focus (#35838) @SaidMarar

@mui/base@5.0.0-alpha.115

Breaking changes

• ​<!-- 04 -->[SliderUnstyled] Improved logic for displaying the value label (#35805) @ZeeshanTamboli

  • The valueLabelDisplay prop is removed from SliderUnstyled. The prop was not working as intended in SliderUnstyled (See #35398). You can instead provide a valueLabel slot with the slots prop API to show the value label:

  - <SliderUnstyled valueLabelDisplay="on" />
  + <SliderUnstyled slots={{ valueLabel: SliderValueLabel }} />
  

  The following demo shows how to show a value label when it is hovered over with the thumb: https://mui.com/base-ui/react-slider/#value-label

  • The following classes are removed from sliderUnstyledClasses since they are not needed for the value label:

  - valueLabel
  - valueLabelOpen
  - valueLabelCircle
  - valueLabelLabel
  

  In the custom value label component, you can define your own classNames and target them with CSS.

  • The SliderValueLabelUnstyled component is removed from SliderUnstyled. You should provide your own custom component for the value label.

  • To avoid using React.cloneElement API in value label, the component hierarchy structure of the value label is changed. The value label is now inside the Thumb slot - Thumb -> Input, ValueLabel.

Changes

• ​<!-- 05 -->[InputUnstyled] Fix externally provided inputRef is ignored (#35807) @sai6855

@mui/base@5.0.0-alpha.114

• [base] Fix typos (#35802) @nnmax
• [Slider] Convert code to TypeScript (#35445) @sai6855

@mui/base@5.0.0-alpha.113

• [Portal][base] Convert code to TypeScript (#35657) @sai6855

Docs

• [docs] Revise and expand Joy UI Button doc (#35737) @samuelsycamore
• [docs] Document the workaround for crashing a translated page (#35720) @michaldudak
• [docs] Fix API page for MenuItem to list all valid props (#35561) @mnajdova
• [docs] Fix ad exception in Joy UI (#35685) @oliviertassinari
• [docs] Fix content wider than screen regression @oliviertassinari
• [examples] Add Vite.js with TypeScript example (#35683) @miha53cevic

Core

• [core] Close 2022 Developer Survey @oliviertassinari
• [core] Fix the product license reference name (#35703) @oliviertassinari
• [core] Use TypeScript AST instead of TTP for component doc building (#35379) @flaviendelangle
• [test] Always use & for nesting styles (#35702) @oliviertassinari
• [website] Improve Lead Designer role description (#35684) @oliviertassinari

All contributors of this release in alphabetical order: @CowDotDev, @flaviendelangle, @hamirmahal, @hbjORbj, @koolskateguy89, @michaldudak, @miha53cevic, @mnajdova, @oliviertassinari, @Ryczko, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli

@mui/base@5.0.0-alpha.112

• ​<!-- 16 -->[FocusTrap][base] Convert code to TypeScript (#35005) @trizotti
• ​<!-- 08 -->[Modal][base] Convert code to TypeScript (#34793) @leventdeniz
• ​<!-- 07 -->[Popper][base] Convert code to TypeScript (#34771) @danhuynhdev
• ​<!-- 04 -->[Slider] Exclude isRtl from Material UI's Slider props (#35564) @michaldudak