View changelog with demos on Mantine website
ScrollArea component
- New ScrollArea component lets you easily manage custom scrollbars
without any external libraries - ScrollArea is now rendered as default dropdown element in Select, MultiSelect
and TransferList components:
use-form hook improvements
- use-form hook now includes new
getInputProps
handler to simplify inputs:
import { TextInput, Checkbox, Button } from '@mantine/core';
import { useForm } from '@mantine/hooks';
export function Demo() {
const form = useForm({
initialValues: {
email: '',
termsOfService: false,
},
validationRules: {
email: (value) => /^\S+@\S+$/.test(value),
},
});
return (
<form onSubmit={form.onSubmit((values) => console.log(values))}>
<TextInput
required
label="Email"
placeholder="your@email.com"
{...form.getInputProps('email')}
/>
<Checkbox
mt="md"
label="I agree to sell my privacy to this corporation"
{...form.getInputProps('termsOfService', { type: 'checkbox' })}
/>
<Button type="submit">Submit</Button>
</form>
);
}
- Also use-form hook now supports optional error messages (hook will work as before if messages are not provided):
const form = useForm({
initialValues: { name: '', age: 0 },
validationRules: {
name: (value) => value.trim().length >= 2,
age: (value) => value > 21,
},
errorMessages: {
name: 'Name must include at least 2 characters',
age: 'You must be 21 or older to enter',
},
});
form.validate();
form.errors;
// -> { name: 'Name must include at least 2 characters', age: 'You must be 21 or older to enter' }
form.setFieldValue('name', 'John');
form.validate();
form.errors;
// -> { name: null, age: 'You must be 21 or older to enter' }
New features and improvements
- Modal component can now be centered
- Accordion component now supports controlled state with
useAccordionState
hook - Components that use Popper (Select, Menu, DatePicker, etc.) now support an option to disable rendering within portal
- Rich text editor now has an option to get editor ref, it can be used, for example, to focus/blur editor or to extend editor with plugins
- Components that use Popper now support rendering without Portal by setting
withinPortal={false}
. This option is useful when you want to use Select and other components inside Popover or other components that use use-click-outside. - Accordion component now supports
iconSize
andoffsetIcon
props - Menu component now support disabled items
- You can now change default locale that is used in all
@mantine/dates
components withdateLocale
on MantineProvider
Bug fixes
- Collapse component now works correctly with
transitionDuration={0}
- use-focus-trap hook is now less restrictive, it fixes issue with Popover and Menu scrolling page when being closed
- Fix click outside not working with Modal with outside overflow
- InputWrapper label now has
display: inline-block
styles, these styles will prevent input focusing when empty area above the input is clicked - Select component now correctly handles up and down arrow keys with selected value
- Fix incorrect opened dropdown state in Select component when search results are empty and nothing found message is not provided
- Fix incorrect enter key handling in Autocomplete, Select, MultiSelect and DatePicker components which resulted in unexpected form submits
- Fix incorrect space key handling in Select and MultiSelect components
- Fix focus shifting to input when date is selected with keyboard in DateRangePicker