RTL support improvements
- Emotion options on MantineProvider now supports dynamic values. This feature allows to create dynamic direction changes.
@mantine/ssr
package now supports RTL with Next.js and any other ssr environment- All components were tested to work correctly with stylis-plugin-rtl
- Mantine theme object now includes
dir
property which must be set tortl
to support all features
New features
TimeInput component now supports 12h format and empty initial state:
:
:
Table component now supports setting vertical and horizontal spacing:
Position | Name | Symbol | Mass |
---|---|---|---|
6 | Carbon | C | 12.011 |
7 | Nitrogen | N | 14.007 |
39 | Yttrium | Y | 88.906 |
56 | Barium | Ba | 137.33 |
58 | Cerium | Ce | 140.12 |
HorizontalSpacing
xs
sm
md
lg
xl
VerticalSpacing
xs
sm
md
lg
xl
FontSize
xs
sm
md
lg
xl
ScrollArea component now supports subscribing to scroll position with onScrollPositionChange
handler:
Scroll position:
{ x: 0, y: 0 }
Button component now supports new subtle
variant:
New hooks
- use-validated-state – useState with state validation and capturing last valid value
- use-event-listener – add event listener to an element using ref
Other changes
- Grid.Col component no longer requires to set
span
, it is set to Gridcolumns
by default - Dropzone component now supports
onReject
callback which is called when user tries to drop files that do not meet size or mime type requirements - Stepper component now supports
allowStepSelect
prop onStepper.Step
component which can be used to prevent user from reaching next steps before completing previous - Accordion component now supports changing headings level with
order
prop - Tabs component now supports getting tab keys in
onTabChange
handler - Slider default label transition is now set to
0
to make component feel more responsive - Portal now supports setting
target
with selector instead of element - Modal and Drawer components now support
target
prop to specify Portal target container - TransferList component now supports
limit
prop that can be used to improve performance of large data sets - Modals manager now supports
...others
props inmodals.openContextModal
handler - Select and MultiSelect components now support new
selectOnBlur
prop - Transition now supports
exitDuration
prop to specify unmount transition duration - Timeline now supports
reverseActive
prop to reverse active items direction - Menu now supports
auto
size - use-move hook now supports
rtl
direction - RichTextEditor now supports readonly state and code format
- All inputs components that are based on Input now support
iconWidth
prop
3.5.0 – 3.6.0 bug fixes
- Fix incorrect default
shouldCreate
logic in creatable Select - Fix incorrect border-radius in TransferList component
- Add color style to UnstyledButton in dark theme
- Fix incorrect Menu body background color in dark theme
- Fix incorrect focus management in DatePicker which resulted in closing dropdown when anything inside was clicked
- Fix incorrect position calculation for SegmentedControl when scale transform is applied to parent node
- Fix Slider initial value not being clamped with min/max
- Fix incorrect value set in RangeSlider when user interacted with slider after value was force updated
- Fix possible permanent placeholder after hydration in Image component
- Fix jumping items in dropdown when item is selected in Select, MultiSelect and Autocomplete components, this fix is also applied to dropdowns with transitions
- Fix Slider and RangeSlider components thumbs and marks overflowing parent element when is the same as min/max
- Fix value not being clamped in DatePicker with allowed free input, now value is clamped on blur