Version v7.12.0

Release date

Notifications at any position

It is now possible to display notifications at any position on the screen with @mantine/notifications package:

import { Button } from '@mantine/core';
import { notifications } from '@mantine/notifications';

const positions = [
  'top-left',
  'top-right',
  'bottom-left',
  'bottom-right',
  'top-center',
  'bottom-center',
] as const;

function Demo() {
  const buttons = positions.map((position) => (
    <Button
      key={position}
      onClick={() =>
        notifications.show({
          title: `Notification at ${position}`,
          message: `Notification at ${position} message`,
          position,
        })
      }
    >
      {position}
    </Button>
  ));

  return <Group>{buttons}</Group>;
}

Subscribe to notifications state

You can now subscribe to notifications state changes with useNotifications hook:

Notifications state

[]

Notifications queue

[]
function Demo() {
  const [counter, { increment }] = useCounter();
  const notificationsStore = useNotifications();

  const showNotification = () => {
    notifications.show({
      title: `Notification ${counter}`,
      message: 'Most notifications are added to queue',
    });

    increment();
  };

  return (
    <>
      <Button onClick={showNotification} mb="md">
        Show notification
      </Button>

      <Text>Notifications state</Text>
      <Code block>{JSON.stringify(notificationsStore.notifications, null, 2)}</Code>

      <Text mt="md">Notifications queue</Text>
      <Code block>{JSON.stringify(notificationsStore.queue, null, 2)}</Code>
    </>
  );
}

SemiCircleProgress component

New SemiCircleProgress component:

Label

Fill direction
Orientation
Filled segment color
Size
Thickness
Value
import { SemiCircleProgress } from '@mantine/core';

function Demo() {
  return (
    <SemiCircleProgress
      fillDirection="left-to-right"
      orientation="up"
      filledSegmentColor="blue"
      size={200}
      thickness={12}
      value={40}
      label="Label"
    />
  );
}

Tree checked state

Tree component now supports checked state:

  • src
  • node_modules
  • package.json
  • tsconfig.json
import { IconChevronDown } from '@tabler/icons-react';
import { Checkbox, Group, RenderTreeNodePayload, Tree } from '@mantine/core';
import { data } from './data';

const renderTreeNode = ({
  node,
  expanded,
  hasChildren,
  elementProps,
  tree,
}: RenderTreeNodePayload) => {
  const checked = tree.isNodeChecked(node.value);
  const indeterminate = tree.isNodeIndeterminate(node.value);

  return (
    <Group gap="xs" {...elementProps}>
      <Checkbox.Indicator
        checked={checked}
        indeterminate={indeterminate}
        onClick={() => (!checked ? tree.checkNode(node.value) : tree.uncheckNode(node.value))}
      />

      <Group gap={5} onClick={() => tree.toggleExpanded(node.value)}>
        <span>{node.label}</span>

        {hasChildren && (
          <IconChevronDown
            size={14}
            style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
          />
        )}
      </Group>
    </Group>
  );
};

function Demo() {
  return <Tree data={data} levelOffset={23} expandOnClick={false} renderNode={renderTreeNode} />;
}

Disable specific features in postcss-preset-mantine

You can now disable specific features of the postcss-preset-mantine by setting them to false in the configuration object. This feature is available starting from postcss-preset-mantine@1.17.0.

module.exports = {
  'postcss-preset-mantine': {
    features: {
      // Turn off `light-dark` function
      lightDarkFunction: false,

      // Turn off `postcss-nested` plugin
      nested: false,

      // Turn off `lighten`, `darken` and `alpha` functions
      colorMixAlpha: false,

      // Turn off `rem` and `em` functions
      remEmFunctions: false,

      // Turn off `postcss-mixins` plugin
      mixins: false,
    },
  },
};

Help Center updates

Other changes

  • use-interval hook now supports autoInvoke option to start the interval automatically when the component mounts.
  • use-form with mode="uncontrolled" now triggers additional rerender when dirty state changes to allow subscribing to form state changes.
  • ScrollArea component now supports onTopReached and onBottomReached props. The functions are called when the user scrolls to the top or bottom of the scroll area.
  • Accordion.Panel component now supports onTransitionEnd prop that is called when the panel animation completes.