7 5 0

import { AreaChartDemos, DatePickerInputDemos, DatesProviderDemos, DonutChartDemos, PieChartDemos, TitleDemos, } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Changelog750);

DonutChart component

New DonutChart component:

PieChart component

New PieChart component:

@mantine/dates value formatter

DatePickerInput, MonthPickerInput and YearPickerInput now support valueFormatter prop.

valueFormatter is a more powerful alternative to valueFormat prop. It allows formatting value label with a custom function. The function is the same for all component types (default, multiple and range) – you need to perform additional checks inside the function to handle different types.

Example of using a custom formatter function with type="multiple":

@mantine/dates consistent weeks

You can now force each month to have 6 weeks by setting consistentWeeks: true on DatesProvider. This is useful if you want to avoid layout shifts when month changes.

Charts series label

It is now possible to change series labels with label property in series object. This feature is supported in AreaChart, BarChart and LineChart components.

Charts value formatter

All @mantine/charts components now support valueFormatter prop, which allows formatting value that is displayed on the y axis and inside the tooltip.

Headings text wrap

New Title textWrap prop sets text-wrap CSS property. It controls how text inside an element is wrapped.

You can also set textWrap on theme:

import { createTheme, MantineProvider, Title } from '@mantine/core';

const theme = createTheme({
  headings: {
    textWrap: 'wrap',
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Title>Some very long title that should wrap</Title>
    </MantineProvider>
  );
}

If set on theme, textWrap is also applied to headings in Typography

mod prop

All components now support mod prop, which allows adding data attributes to the root element:

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

<Box mod="data-button" />;
// -> <div data-button />

<Box mod={{ opened: true }} />;
// -> <div data-opened />

<Box mod={{ opened: false }} />;
// -> <div />

<Box mod={['button', { opened: true }]} />;
// -> <div data-button data-opened />

<Box mod={{ orientation: 'horizontal' }} />;
// -> <div data-orientation="horizontal" />

Documentation updates

• New testing with Vitest guide
• NativeSelect with dividers demo
• Popover shift and flip middlewares documentation
• Combobox props related to Popover documentation
• Loading styles from CDN guide
• Anchor now includes additional documentation on how to use Text props
• Pagination now includes props tables for all compound components
• A more detailed breakdown of browser support has been added to the about page

Help center updates

New articles added to the help center:

• Can I use Mantine with Astro?
• How can I contribute to the library?
• How can I add dynamic CSS styles?
• How can I load fonts in Next.js?
• How can I load fonts in Vite?
• Is there a floating action button component?
• How to change inputs placeholder color?
• I do not have styles in my dates components...

Other changes

• Checkbox.Group, Radio.Group and Switch.Group now support readOnly prop
• ActionIcon now has loading state animation
• SegmentedControl now supports withItemsBorder prop which allows removing border between items
• Progress now supports transitionDuration prop which controls section width animation duration
• Textarea and JsonInput components now support resize prop, which allows setting resize CSS property on the input
• @mantine/hooks package now exports readLocalStorageValue and readSessionStorageValue function to get value from storage outside of React components