7 12 0

import { NotificationsDemos, SemiCircleProgressDemos, TreeDemos, } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Changelog7120);

Notifications at any position

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

Subscribe to notifications state

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

SemiCircleProgress component

New SemiCircleProgress component:

Tree checked state

Tree component now supports checked state:

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 [email protected].

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 has been updated to include Component.extend usage in server components.
• A guide on applying input focus styles has been updated to work correctly with PasswordInput 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 now includes additional instructions for use-form.
• New Can I have color schemes other than light and dark? 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? guide explains why VSCode cannot automatically import Text component.
• New Are Mantine components accessible? question
• New How can I focus the first input with error with use-form? question
• New How to scroll to the top of the form if the form is submitted with errors? question
• New Why my notifications are displayed at a wrong position? question
• New Why my screen is completely empty after I've added notifications package? question
• New Why can I not use value/label data structure with Autocomplete/TagsInput? question
• New Why FileButton does not work in Menu? question
• New How can I display different elements in light and dark color schemes? question

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.