7.5.0

[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-5-0)

## DonutChart component

New [DonutChart](https://mantine.dev/charts/donut-chart) component:

```tsx
import { DonutChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <DonutChart data={data} />;
}
```

## PieChart component

New [PieChart](https://mantine.dev/charts/pie-chart) component:

```tsx
import { PieChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <PieChart data={data} />;
}
```

## @mantine/dates value formatter

[DatePickerInput](https://mantine.dev/dates/date-picker-input), [MonthPickerInput](https://mantine.dev/dates/month-picker-input) and
[YearPickerInput](https://mantine.dev/dates/year-picker-input) 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"`:

```tsx
import dayjs from 'dayjs';
import { useState } from 'react';
import { DateFormatter, DatePickerInput } from '@mantine/dates';

const formatter: DateFormatter = ({ type, date, locale, format }) => {
  if (type === 'multiple' && Array.isArray(date)) {
    if (date.length === 1) {
      return dayjs(date[0]).locale(locale).format(format);
    }

    if (date.length > 1) {
      return `${date.length} dates selected`;
    }

    return '';
  }

  return '';
};

function Demo() {
  const [value, setValue] = useState<Date[]>([]);

  return (
    <DatePickerInput
      label="Pick 2 dates or more"
      placeholder="Pick 2 dates or more"
      value={value}
      onChange={setValue}
      type="multiple"
      valueFormatter={formatter}
    />
  );
}
```

## @mantine/dates consistent weeks

You can now force each month to have 6 weeks by setting `consistentWeeks: true` on
[DatesProvider](https://mantine.dev/dates/getting-started). This is useful if you want to avoid layout
shifts when month changes.

```tsx
import { DatePicker, DatesProvider } from '@mantine/dates';

function Demo() {
  return (
    <DatesProvider settings={{ consistentWeeks: true }}>
      <DatePicker />
    </DatesProvider>
  );
}
```

## Charts series label

It is now possible to change series labels with `label` property
in `series` object. This feature is supported in [AreaChart](https://mantine.dev/charts/area-chart),
[BarChart](https://mantine.dev/charts/bar-chart) and [LineChart](https://mantine.dev/charts/line-chart) components.

```tsx
import { AreaChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <AreaChart
      h={300}
      data={data}
      dataKey="date"
      type="stacked"
      withLegend
      legendProps={{ verticalAlign: 'bottom' }}
      series={[
        { name: 'Apples', label: 'Apples sales', color: 'indigo.6' },
        { name: 'Oranges', label: 'Oranges sales', color: 'blue.6' },
        { name: 'Tomatoes', label: 'Tomatoes sales', color: 'teal.6' },
      ]}
    />
  );
}
```

## 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.

```tsx
import { AreaChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <AreaChart
      h={300}
      data={data}
      dataKey="date"
      type="stacked"
      valueFormatter={(value) => new Intl.NumberFormat('en-US').format(value)}
      series={[
        { name: 'Apples', color: 'indigo.6' },
        { name: 'Oranges', color: 'blue.6' },
        { name: 'Tomatoes', color: 'teal.6' },
      ]}
    />
  );
}
```

## Headings text wrap

New [Title](https://mantine.dev/core/title) `textWrap` prop sets [text-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap)
CSS property. It controls how text inside an element is wrapped.

```tsx
import { Title } from '@mantine/core';

function Demo() {
  return (
    <Title order={3} textWrap="wrap">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptatibus inventore iusto
      cum dolore molestiae perspiciatis! Totam repudiandae impedit maxime!
    </Title>
  );
}
```

You can also set `textWrap` on [theme](https://mantine.dev/theming/theme-object):

```tsx
import { createTheme, MantineProvider } 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 [TypographyStylesProvider](https://mantine.dev/core/typography-styles-provider)

## mod prop

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

```tsx
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](https://mantine.dev/guides/vitest/)
- [NativeSelect](https://mantine.dev/core/native-select/#with-dividers) with dividers demo
- [Popover](https://mantine.dev/core/popover/#middlewares) `shift` and `flip` middlewares documentation
- [Combobox](https://mantine.dev/core/combobox/#popover-props) props related to [Popover](https://mantine.dev/core/popover) documentation
- [Loading styles from CDN guide](https://mantine.dev/styles/mantine-styles/#loading-styles-from-cdn)
- [Anchor](https://mantine.dev/core/anchor/#text-props) now includes additional documentation on how to use [Text](https://mantine.dev/core/text) props
- [Pagination](https://mantine.dev/core/pagination) now includes props tables for all compound components
- A more detailed breakdown of [browser support](https://mantine.dev/about/#browser-support) has been added to the about page

## Help center updates

New articles added to the [help center](https://help.mantine.dev):

- [Can I use Mantine with Astro?](https://help.mantine.dev/q/can-i-use-mantine-with-astro)
- [How can I contribute to the library?](https://help.mantine.dev/q/how-can-i-contribute)
- [How can I add dynamic CSS styles?](https://help.mantine.dev/q/dynamic-css-styles)
- [How can I load fonts in Next.js?](https://help.mantine.dev/q/next-load-fonts)
- [How can I load fonts in Vite?](https://help.mantine.dev/q/vite-load-fonts)
- [Is there a floating action button component?](https://help.mantine.dev/q/floating-action-button)
- [How to change inputs placeholder color?](https://help.mantine.dev/q/inputs-placeholder-color)
- [I do not have styles in my dates components...](https://help.mantine.dev/q/dates-missing-styles)

## Other changes

- [Checkbox.Group](https://mantine.dev/core/checkbox), [Radio.Group](https://mantine.dev/core/radio) and [Switch.Group](https://mantine.dev/core/switch) now support `readOnly` prop
- [ActionIcon](https://mantine.dev/core/action-icon) now has `loading` state animation
- [SegmentedControl](https://mantine.dev/core/segmented-control) now supports `withItemsBorder` prop which allows removing border between items
- [Progress](https://mantine.dev/core/progress) now supports `transitionDuration` prop which controls section width animation duration
- [Textarea](https://mantine.dev/core/textarea) and [JsonInput](https://mantine.dev/core/json-input) components now support `resize` prop, which allows setting `resize` CSS property on the input
- `@mantine/hooks` package now exports [readLocalStorageValue and readSessionStorageValue](hooks/use-local-storage/#read-storage-value) function to get value from storage outside of React components