Version 1.1.0

New features and components

SegmentedControl component:

Popover component:

Divider component now supports labels and margins:

Group component now supports vertical orientation:

import { Group, Button } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <Button variant="outline">1</Button>
      <Button variant="outline">2</Button>
      <Button variant="outline">3</Button>
    </Group>
  );
}

Grid component allows you to use flexbox grid with any columns count:

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

function Demo() {
  return (
    <Grid grow>
      <Grid.Col span={4}>1</Grid.Col>
      <Grid.Col span={4}>2</Grid.Col>
      <Grid.Col span={4}>3</Grid.Col>
      <Grid.Col span={4}>4</Grid.Col>
      <Grid.Col span={4}>5</Grid.Col>
    </Grid>
  );
}

use-debounced-value - hook to debounce value with useEffect:

import { useState } from 'react';
import { useDebouncedValue } from '@mantine/hooks';
import { TextInput, Text } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState('');
  const [debounced] = useDebouncedValue(value, 200);

  return (
    <>
      <TextInput
        label="Enter value to see debounce"
        value={value}
        style={{ flex: 1 }}
        onChange={(event) => setValue(event.currentTarget.value)}
      />

      <Text>Value: {value}</Text>
      <Text>Debounced value: {debounced}</Text>
    </>
  );
}

API changes

• Prop typo fix in Checkbox component (intermediate -> indeterminate)
• Hr component replaced with Divider to support more options
• ElementsGroup component replaced with Group to support all elements positioning
• Custom component is now supported by ActionIcon and MenuItem components
• Modal and Drawer components are wrapped with Portal by default
• LoadingOverlay now supports custom loaders
• @mantine/core components types are now exported from package, import it with Props suffix: import { ButtonProps } from '@mantine/core'

Bug fixes and improvements

• Significant performance improvements with react-jss parameters memoization
• Dark theme improvements, all components now use more balanced transparent colors in dark theme
• Portal component now does not show warning during server side rendering
• @mantine/notifications – useNotifications hook now returns queue