Version 3.6.0

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:

import { Table } from '@mantine/core';

function Demo() {
  return (
    <Table verticalSpacing="xs">
      {/* {...rows} */}
    </Table>
  );
}

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

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 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