# Version v7.12.0

## Notifications at any position

It is now possible to display notifications at any position on the screen
with [@mantine/notifications package](https://mantine.dev/llms/x-notifications.md):

```tsx
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:

```tsx
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](https://mantine.dev/llms/core-semi-circle-progress.md) component:

```tsx
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](https://mantine.dev/llms/core-tree.md) component now supports checked state:

```tsx
import { FileTextIcon, FolderOpenIcon, FolderSimpleIcon } from '@phosphor-icons/react';
import { Checkbox, Group, RenderTreeNodePayload, Tree } from '@mantine/core';
import { data } from './data';

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

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

      <Group gap={6} onClick={() => tree.toggleExpanded(node.value)}>
        {hasChildren ? (
          expanded ? (
            <FolderOpenIcon size={14} style={{ opacity: 0.75 }} />
          ) : (
            <FolderSimpleIcon size={14} style={{ opacity: 0.75 }} />
          )
        ) : (
          <FileTextIcon size={14} style={{ opacity: 0.75 }} />
        )}
        <span>{node.label}</span>
      </Group>
    </Group>
  );
};

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


## Disable specific features in postcss-preset-mantine

You can now disable specific features of the [postcss-preset-mantine](https://mantine.dev/llms/styles-postcss-preset.md)
by setting them to `false` in the configuration object. This feature is available starting from
`postcss-preset-mantine@1.17.0`.

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

* [Server components guide](https://help.mantine.dev/q/server-components) has been updated to include `Component.extend` usage in server components.
* [A guide on applying input focus styles](https://help.mantine.dev/q/input-focus-styles) has been updated to work correctly with [PasswordInput](https://mantine.dev/llms/core-password-input.md) and other components in which the `input` selector is not used for actual input element.
* The guide on [how to disable all inputs in the form](https://help.mantine.dev/q/disable-all-inputs-in-form) now includes additional instructions for [use-form](https://mantine.dev/llms/form-use-form.md).
* New [Can I have color schemes other than light and dark?](https://help.mantine.dev/q/light-dark-is-not-enough) guide explains the difference between color scheme and theme and why Mantine does not support custom color schemes.
* New [Why VSCode cannot autoimport Text component?](https://help.mantine.dev/q/why-vscode-cannot-autoimport-text) guide explains why VSCode cannot automatically import `Text` component.
* New [Are Mantine components accessible?](https://help.mantine.dev/q/are-mantine-components-accessible) question
* New [How can I focus the first input with error with use-form?](https://help.mantine.dev/q/focus-first-input-with-error) question
* New [How to scroll to the top of the form if the form is submitted with errors?](https://help.mantine.dev/q/scroll-to-the-top-of-the-form) question
* New [Why my notifications are displayed at a wrong position?](https://help.mantine.dev/q/notifications-missing-styles) question
* New [Why my screen is completely empty after I've added notifications package?](https://help.mantine.dev/q/notifications-empty-screen) question
* New [Why can I not use value/label data structure with Autocomplete/TagsInput?](https://help.mantine.dev/q/autocomplete-value-label) question
* New [Why FileButton does not work in Menu?](https://help.mantine.dev/q/file-button-in-menu) question
* New [How can I display different elements in light and dark color schemes?](https://help.mantine.dev/q/light-dark-elements) question

## Other changes

* [use-interval](https://mantine.dev/llms/hooks-use-interval.md) hook now supports `autoInvoke` option to start the interval automatically when the component mounts.
* [use-form](https://mantine.dev/llms/form-use-form.md) with `mode="uncontrolled"` now triggers additional rerender when dirty state changes to allow subscribing to form state changes.
* [ScrollArea](https://mantine.dev/llms/core-scroll-area.md) 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](https://mantine.dev/llms/core-accordion.md) component now supports `onTransitionEnd` prop that is called when the panel animation completes.