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 to rtl to support all features

New features

TimeInput component now supports 12h format and empty initial state:

:
import { TimeInput } from '@mantine/dates';
function Demo() {
return <TimeInput label="What time is it now?" />;
}
:
import { TimeInput } from '@mantine/dates';
function Demo() {
return <TimeInput label="Pick time" format="12" defaultValue={new Date()} />;
}

Table component now supports setting vertical and horizontal spacing:

PositionNameSymbolMass
6CarbonC12.011
7NitrogenN14.007
39YttriumY88.906
56BariumBa137.33
58CeriumCe140.12
HorizontalSpacing
xs
sm
md
lg
xl
VerticalSpacing
xs
sm
md
lg
xl
FontSize
xs
sm
md
lg
xl
import { Table } from '@mantine/core';
function Demo() {
return (
<Table verticalSpacing="xs">
{/* {...rows} */}
</Table>
);
}

ScrollArea component now supports subscribing to scroll position with onScrollPositionChange handler:

Charizard (Pokémon)
Charizard description from Bulbapedia
Charizard is a draconic, bipedal Pokémon. It is primarily orange with a cream underside from the chest to the tip of its tail. It has a long neck, small blue eyes, slightly raised nostrils, and two horn-like structures protruding from the back of its rectangular head. There are two fangs visible in the upper jaw when its mouth is closed. Two large wings with blue-green undersides sprout from its back, and a horn-like appendage juts out from the top of the third joint of each wing. A single wing-finger is visible through the center of each wing membrane. Charizard's arms are short and skinny compared to its robust belly, and each limb has three white claws. It has stocky legs with cream-colored soles on each of its plantigrade feet. The tip of its long, tapering tail burns with a sizable flame.
As Mega Charizard X, its body and legs are more physically fit, though its arms remain thin. Its skin turns black with a sky-blue underside and soles. Two spikes with blue tips curve upward from the front and back of each shoulder, while the tips of its horns sharpen, turn blue, and curve slightly upward. Its brow and claws are larger, and its eyes are now red. It has two small, fin-like spikes under each horn and two more down its lower neck. The finger disappears from the wing membrane, and the lower edges are divided into large, rounded points. The third joint of each wing-arm is adorned with a claw-like spike. Mega Charizard X breathes blue flames out the sides of its mouth, and the flame on its tail now burns blue. It is said that its new power turns it black and creates more intense flames.
Scroll position: { x: 0, y: 0 }

Button component now supports new subtle variant:

New hooks

Other changes

  • Grid.Col component no longer requires to set span, it is set to Grid columns 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 on Stepper.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 in modals.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