7 11 0

import { AvatarDemos, BarChartDemos, BubbleChartDemos, LineChartDemos, RadarChartDemos, TagsInputDemos, TransitionDemos, } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Changelog7110);

withProps function

All Mantine components now have withProps static function that can be used to add default props to the component:

import { IMaskInput } from 'react-imask';
import { Button, InputBase } from '@mantine/core';

const LinkButton = Button.withProps({
  component: 'a',
  target: '_blank',
  rel: 'noreferrer',
  variant: 'subtle',
});

const PhoneInput = InputBase.withProps({
  mask: '+7 (000) 000-0000',
  component: IMaskInput,
  label: 'Your phone number',
  placeholder: 'Your phone number',
});

function Demo() {
  return (
    <>
      <LinkButton href="https://mantine.dev">
        Mantine website
      </LinkButton>
      <PhoneInput placeholder="Personal phone" />
    </>
  );
}

Avatar initials

Avatar component now supports displaying initials with auto generated color based on the given name value. To display initials instead of the default placeholder, set name prop to the name of the person, for example, name="John Doe". If the name is set, you can use color="initials" to generate color based on the name:

BubbleChart component

New BubbleChart component:

BarChart waterfall type

BarChart component now supports waterfall type which is useful for visualizing changes in values over time:

LineChart gradient type

LineChart component now supports gradient type which renders line chart with gradient fill:

Right Y axis

LineChart, BarChart and AreaChart components now support rightYAxis prop which renders additional Y axis on the right side of the chart:

RadarChart legend

RadarChart component now supports legend:

TagsInput acceptValueOnBlur

TagsInput component behavior has been changed. Now By default, if the user types in a value and blurs the input, the value is added to the list. You can change this behavior by setting acceptValueOnBlur to false. In this case, the value is added only when the user presses Enter or clicks on a suggestion.

Transition delay

Transition component now supports enterDelay and exitDelay props to delay transition start:

Documentation updates

• New segmented progress example has been added to Progress component documentation
• Select, TagsInput and MultiSelect components documentation now includes additional demo on how to change the dropdown width
• New DatePicker example for excludeDate prop

Other changes

• Pagination component now supports hideWithOnePage prop which hides pagination when there is only one page
• Spoiler component now supports controlled expanded state with expanded and onExpandedChange props
• Burger component now supports lineSize prop to change lines height
• Calendar, DatePicker and other similar components now support highlightToday prop to highlight today's date