8 2 0

import { Button } from '@mantine/core'; import { HeartIcon } from '@phosphor-icons/react'; import { ContainerDemos, HoverCardDemos, SelectDemos, TipTapDemos, TooltipDemos, UseSelectionDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Changelog820);

Support Mantine development

You can now sponsor Mantine development with OpenCollective. All funds are used to improve Mantine and create new features and components.

Styles API attributes

You now can pass attributes to inner elements of all components that support Styles API with attributes prop. For example, it can be used to add data attributes for testing purposes:

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

function Demo() {
  return (
    <Button
      attributes={{
        root: { 'data-test-id': 'root' },
        label: { 'data-test-id': 'label' },
        inner: { 'data-test-id': 'inner' },
      }}
    >
      Button
    </Button>
  );
}

Container grid strategy

Container now supports strategy="grid" prop which enables more features.

Differences from the default strategy="block":

• Uses display: grid instead of display: block
• Does not include default inline padding
• Does not set max-width on the root element (uses grid template columns instead)

Features supported by strategy="grid":

• Everything that is supported by strategy="block"
• Children with data-breakout attribute take the entire width of the container's parent element
• Children with data-container inside data-breakout have the same width as the main grid column

Example of using breakout feature:

Tooltip target

New Tooltip target prop is an alternative to children. It accepts a string (selector), an HTML element or a ref object with HTML element. Use target prop when you do not render tooltip target as JSX element.

Example of using target prop with a string selector:

HoverCard.Group

HoverCard now supports delay synchronization between multiple instances using HoverCard.Group component:

<Demo data={HoverCardDemos.group} demoProps={{ defaultExpanded: false }} />

use-selection hook

New use-selection hook:

<Demo data={UseSelectionDemos.usage} demoProps={{ defaultExpanded: false }} />

autoSelectOnBlur prop

Select and Autocomplete components now support autoSelectOnBlur prop. Use it to automatically select the highlighted option when the input loses focus. To see this feature in action: select an option with up/down arrows, then click outside the input:

Source edit mode in RichTextEditor

RichTextEditor now supports source edit mode:

Recharts 3 support

You can now use the latest Recharts 3 version with Mantine charts. @mantine/charts package was validated to work with both Recharts 2 and Recharts 3 versions. Note that, there might still be some minor issues with Recharts 3, you are welcome to report issues on GitHub.

Other changes

• Accordion default chevronSize prop value was changed to auto to allow using dynamic icon sizes
• Accordion now supports chevronIconSize prop to configure size of the default chevron icon
• AffixPosition type is now exported from @mantine/core package
• errorProps, labelProps and descriptionProps props of all inputs now have stricter types and better IDE autocomplete
• TypographyStylesProvider was renamed to just Typography to simplify usage. TypographyStylesProvider name is still available but marked as deprecated – it will be removed in 9.0.0 release.
• Slider and RangeSlider components now have separate documentation pages