Version 3.3.0

ScrollArea component

New ScrollArea component lets you easily manage custom scrollbars without any external libraries:

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

function Demo() {
  return (
    <ScrollArea style={{ height: 250 }}>
      {/* ... content */}
    </ScrollArea>
  );
}

ScrollArea is now rendered as default dropdown element in Select, MultiSelect and TransferList components:

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

const data = Array(50).fill(0).map((_, index) => `Item ${index}`);

function Demo() {
  return (
    <Select
      label="What item is the best?"
      placeholder="Pick one"
      searchable
      nothingFound="No options"
      maxDropdownHeight={280}
      data={data}
    />
  );
}

use-form hook improvements

• use-form hook now includes new getInputProps handler to simplify inputs

• 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

Modal component can now be centered:

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

function Demo() {
  return <Modal centered /* ...other props */ />;
};

Other changes

• 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 and offsetIcon props
• Menu component now support disabled items
• You can now change default locale that is used in all @mantine/dates components with dateLocale 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
• Input.Wrapper 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