@mantine/modals 3.3.0

on Node.js Yarn

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