@mantine/notifications 3.2.0 on Node.js Yarn

View changelog with demos on Mantine website

Breaking changes

Group component was migrated to flexbox gap, it no longer uses hack with negative margins, thus withGutter prop is not longer supported.
Button component no longer supports link variant due to Styles API limitations, use Anchor component instead.
@mantine/core package no longer exports getFontStyles, getFocusStyles and hexToRgba functions, replace them with theme functions: theme.fn.fontStyles(), theme.fn.focusStyles(), theme.fn.rgba().
AppShell component was migrated to mobile-first approach, the way Navbar width is set was changed

Normalize.css and global styles on MantineProvider

MantineProvider now supports adding global styles and normalize.css
with props:

<MantineProvider withGlobalStyles withNormalizeCSS>
  <App />
</MantineProvider>

Functions on theme

Mantine theme now adds several functions (full list) that can help you
write styles in createStyles function, styles and sx props:

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

const useStyles = createStyles((theme) => ({
  myResponsiveText: {
    fontSize: theme.fontSizes.md,

    [theme.fn.smallerThan('sm')]: {
      fontSize: theme.fontSizes.sm,
    },

    [theme.fn.smallerThan(500)]: {
      fontSize: theme.fontSizes.xs,
    },
  },
}));

function MyResponsiveText() {
  const { classes } = useStyles();
  return <div className={classes.myResponsiveText}>My responsive text</div>;
}

Custom properties on theme

You can now add any amount of custom properties on Mantine theme using other key:

// Add any other properties on theme
<MantineProvider
  theme={{
    other: {
      fontFamilySecondary: 'Arial',
      lineHeights: [1.2, 1.4, 1.6, 1.8, 1.95],
      reduceMotion: true,
    },
  }}
>
  <App />
</MantineProvider>

// Then use your custom properties
<Box sx={(theme) => ({
  fontFamily: theme.other.fontFamilySecondary,
  lineHeight: theme.other.lineHeight[2],
  transitionDuration: theme.other.reduceMotion ? '0ms' : '200ms',
})} />

Mobile first approach

All layout components now support mobile first approach:

SimpleGrid component now supports minWidth breakpoints (cols prop is no longer required):

<SimpleGrid
  breakpoints={[
    { minWidth: 'sm', cols: 2 },
    { minWidth: 'md', cols: 3 },
    { minWidth: 1200, cols: 4 },
  ]}
>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</SimpleGrid>

AppShell component was migrated to use mobile first approach (breaking change) – you will need to change how Navbar width is set:

// old way
<Navbar width={{ base: 400, breakpoints: { sm: '100%', lg: 500 } }} />

// new way (mobile first), base width defaults to 100%
<Navbar width={{ sm: 400, lg: 500 }} />

New @mantine/modals package

New @mantine/modals package is similar to @mantine/notification but for modals.
It includes modals manager that allows you to:

create shared modals context storage
show confirm modals
handle multiple modals layers

import { Button, Text } from '@mantine/core';
import { useModals } from '@mantine/modals';

function Demo() {
  const modals = useModals();

  const openDeleteModal = () =>
    modals.openConfirmModal({
      title: 'Delete your profile',
      children: (
        <Text size="sm">
          Are you sure you want to delete your profile? This action is destructive and you will have
          to contact support to restore your data.
        </Text>
      ),
      labels: { confirm: 'Delete account', cancel: "No don't delete it" },
      confirmProps: { color: 'red' },
      onCancel: () => console.log('Cancel'),
      onConfirm: () => console.log('Confirmed'),
    });

  return <Button onClick={openDeleteModal} color="red">Delete account</Button>;
}

New components and hooks

New Stepper component:

New TransferList component:

With new use-os hook you can detect user os:

import { useOs } from '@mantine/hooks';

function Demo() {
  const os = useOs();
  return <>Your os is <b>{os}</b></>;
}

New use-set-state lets you work with state like in class components:

const [state, setState] = useSetState({ name: 'John', age: 35, job: 'Engineer' });

state; // -> { name: 'John', age: 35, job: 'Engineer' }

setState({ name: 'Jane' }); // -> { name: 'Jane', age: 35, job: 'Engineer' }
setState({ age: 25, job: 'Manager' }); // -> { name: 'Jane', age: 25, job: 'Manager' }
setState((current) => ({ age: current.age + 7 })); // -> { name: 'Jane', age: 32, job: 'Manager' }

Other changes

3 new guides were added: RTL Support, sx prop and Responsive styles
All date picking components from @mantine/dates package now support first day of week customization (either sunday or monday)
Tabs component pills variant was redesigned to be more neutral
Button and ActionIcon component now have hover effects
SegmentedControl component is now a generic – it accepts values as single type argument
Autocomplete, Select and MultiSelect dropdowns are now rendered within Popper. This means that dropdown element is now aware of its position on screen and will change placement based on container scroll position. You should also experience less issues with z-index configuration.
Col component now supports responsive offset props: offsetXs={5}, offsetMd={10}, etc.
NumberInput component now supports empty value
You can now set default date format on MantineProvider, it will be used to format DatePicker and DateRangePicker inputs values
Checkbox component now supports default icons replacement
use-list-state hook now supports pop and shift handlers
use-idle hook now supports setting initial state
use-merged-ref hook now exports mergeRefs function, it supports refs merging for dynamic lists
use-focus-return hook now includes an option to disable automatic focus return and returns a function that can be used to return focus
use-move hook now supports onScrubStart and onScrubEnd callbacks
PasswordInput component now supports visibility toggle icon changing
DatePicker component now supports free input
MultiSelect component now supports limiting maximum selected values
DatePicker, DateRangePicker, Calendar and RangeCalendar components now support multiple months rendering