Version 3.3.0

ScrollArea component

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

<ScrollArea style={{ height: 250 }}>
  {/* ... content */}
</ScrollArea>

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

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

<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

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

Modal component can now be centered:

<Modal centered />

Accordion component now supports controlled state with useAccordionState hook:

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