# Version v8.1.0

## Support Mantine development

You can now sponsor Mantine development with [OpenCollective](https://opencollective.com/mantinedev).
All funds are used to improve Mantine and create new features and components.

## DatePicker presets

[DatePicker](https://mantine.dev/llms/dates-date-picker.md), [DatePickerInput](https://mantine.dev/llms/dates-date-picker-input.md)
and [DateTimePicker](https://mantine.dev/llms/dates-date-time-picker.md) now support `presets` prop
that allows you to add custom date presets. Presets are displayed next to the calendar:

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

function Demo() {
  const today = dayjs();

  return (
    <DatePicker
      type="range"
      presets={[
        {
          value: [today.subtract(2, 'day').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
          label: 'Last two days',
        },
        {
          value: [today.subtract(7, 'day').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
          label: 'Last 7 days',
        },
        {
          value: [today.startOf('month').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
          label: 'This month',
        },
        {
          value: [
            today.subtract(1, 'month').startOf('month').format('YYYY-MM-DD'),
            today.subtract(1, 'month').endOf('month').format('YYYY-MM-DD'),
          ],
          label: 'Last month',
        },
        {
          value: [
            today.subtract(1, 'year').startOf('year').format('YYYY-MM-DD'),
            today.subtract(1, 'year').endOf('year').format('YYYY-MM-DD'),
          ],
          label: 'Last year',
        },
      ]}
    />
  );
}
```


## Calendar headerControlsOrder

[Calendar](https://mantine.dev/llms/dates-calendar.md) and other components based on it now support `headerControlsOrder` prop.
You can use `headerControlsOrder` prop to change the order of header controls. The prop accepts an array of
`'next' | 'previous' | 'level'`. Note that each control can be used only once in the array.

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

function Demo() {
  return (
    <DatePicker
      defaultDate="2022-02-01"
      headerControlsOrder={['level', 'previous', 'next']}
      styles={{
        calendarHeaderLevel: {
          justifyContent: 'flex-start',
          paddingInlineStart: 8,
        },
      }}
    />
  );
}
```


## Popover middlewares improvements

[Popover](https://mantine.dev/llms/core-popover.md) component now handles `shift` and `flip` Floating UI
differently. Starting from 8.1.0 version, the popover dropdown position is not
changed when the popover is opened. `shift` and `flip` middlewares are used only
once to calculate the initial position of the dropdown.

This change fixes incorrect flipping/shifting behavior when there is dynamic content
in the dropdown. For example, searchable [Select](https://mantine.dev/llms/core-select.md) and [DatePickerInput](https://mantine.dev/llms/dates-date-picker-input.md)
without `consistentWeeks` option.

Previous behavior:

New behavior:

## use-long-press hook

New [use-long-press](https://mantine.dev/llms/hooks-use-long-press.md) hook:

```tsx
import { Button } from '@mantine/core';
import { useLongPress } from '@mantine/hooks';
import { notifications } from '@mantine/notifications';

function Demo() {
  const handlers = useLongPress(() => notifications.show({ message: 'Long press triggered' }));
  return <Button {...handlers}>Press and hold</Button>;
}
```


## Reference area support in charts

[BarChart](https://mantine.dev/llms/charts-bar-chart.md), [AreaChart](https://mantine.dev/llms/charts-area-chart.md) and [LineChart](https://mantine.dev/llms/charts-line-chart.md)
components now support reference area. Reference area is a rectangular area
that can be used to highlight a specific region of the chart:

```tsx
// Demo.tsx
import { ReferenceArea } from 'recharts';
import { BarChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <BarChart
      h={300}
      data={data}
      dataKey="month"
      series={[
        { name: 'Smartphones', color: 'violet.6' },
        { name: 'Laptops', color: 'blue.6' },
        { name: 'Tablets', color: 'teal.6' },
      ]}
    >
      <ReferenceArea
        x1="January"
        x2="March"
        y1={0}
        y2={1250}
        fillOpacity={0.3}
        strokeOpacity={0.9}
        fill="var(--mantine-color-gray-4)"
        stroke="var(--mantine-color-gray-6)"
        strokeWidth={1}
        label={{
          value: 'Q1 sales threshold',
          position: 'insideTopRight',
          fontSize: 12,
          fill: 'var(--mantine-color-bright)',
        }}
      />
    </BarChart>
  );
}

// data.ts
export const data = [
  { month: 'January', Smartphones: 1200, Laptops: 900, Tablets: 200 },
  { month: 'February', Smartphones: 1900, Laptops: 1200, Tablets: 400 },
  { month: 'March', Smartphones: 400, Laptops: 1000, Tablets: 200 },
  { month: 'April', Smartphones: 1000, Laptops: 200, Tablets: 800 },
  { month: 'May', Smartphones: 800, Laptops: 1400, Tablets: 1200 },
  { month: 'June', Smartphones: 750, Laptops: 600, Tablets: 1000 },
];
```


## use-form resetField handler

[use-form](https://mantine.dev/llms/form-use-form.md) now has a `resetField` method that resets field value to its initial value:

```tsx
import { useForm } from '@mantine/form'

const form  = useForm({ initialValues: { name: 'John Doe' } });

form.resetField('name'); // resets name field to 'John Doe'
```

## TagsInput isDuplicate prop

You can now use `isDuplicate` prop in [TagsInput](https://mantine.dev/llms/core-tags-input.md) component
to control how duplicates are detected. It is a function that receives two arguments:
tag value and current tags. The function must return `true` if the value is duplicate.

Example of using `isDuplicate` to allow using the same value with different casing:

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

function Demo() {
  return (
    <TagsInput
      label="Press Enter to submit a tag"
      placeholder="Enter tag"
      isDuplicate={(tagValue, currentTags) => currentTags.some((val) => val === tagValue)}
      defaultValue={['Tag', 'TAG', 'tag']}
    />
  );
}
```


## Slider domain prop

[Slider](https://mantine.dev/llms/core-slider.md) component now supports `domain` prop that allows
setting the possible range of values independently of the `min` and `max` values:

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

function Demo() {
  return (
    <Slider
      domain={[0, 100]}
      min={10}
      max={90}
      defaultValue={25}
      marks={[
        { value: 10, label: 'min' },
        { value: 90, label: 'max' },
      ]}
    />
  );
}
```


## RangeSlider pushOnOverlap prop

[RangeSlider](https://mantine.dev/llms/core-range-slider.md) component now supports `pushOnOverlap` prop that defines
whether the slider should push the overlapping thumb when the user drags it.

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

function Demo() {
  return <RangeSlider pushOnOverlap={false} defaultValue={[25, 65]} minRange={20} />;
}
```


## Hooks types exports

`@mantine/hooks` package now exports all types used in hooks options and return values.
For example, you can now import [use-uncontrolled](https://mantine.dev/llms/hooks-use-uncontrolled.md) types like this:

```tsx
import type { UseUncontrolledOptions, UseUncontrolledReturnValue } from '@mantine/hooks';
```

Types exported from the library:

```tsx
interface UseUncontrolledOptions<T> {
  /** Value for controlled state */
  value?: T;

  /** Initial value for uncontrolled state */
  defaultValue?: T;

  /** Final value for uncontrolled state when value and defaultValue are not provided */
  finalValue?: T;

  /** Controlled state onChange handler */
  onChange?: (value: T) => void;
}

type UseUncontrolledReturnValue<T> = [
  /** Current value */
  T,

  /** Handler to update the state, passes `value` and `payload` to `onChange` */
  (value: T, ...payload: any[]) => void,

  /** True if the state is controlled, false if uncontrolled */
  boolean,
];
```

## zod v4 with use-form

You can now use zod v4 with [use-form](https://mantine.dev/llms/form-use-form.md). To use zod 4:

* Update `mantine-form-zod-resolver` to `1.2.1` or later version
* Update zod to version `3.25.0` or later
* Replace `zod` imports with `zod/v4` (only if you have `zod@3` in your `package.json`)
* Replace `zodResolver` with `zod4Resolver` in your code
* All other code remains the same

Example with zod v4:

```tsx
import { z } from 'zod/v4';
import { zod4Resolver } from 'mantine-form-zod-resolver';

const schema = z.object({
  name: z.string().min(2, { message: 'Name should have at least 2 letters' }),
  email: z.email({ message: 'Invalid email' }),
  age: z.number().min(18, { message: 'You must be at least 18 to create an account' }),
});

const form = useForm({
  initialValues: {
    name: '',
    email: '',
    age: 16,
  },
  validate: zod4Resolver(schema),
})
```

## Documentation updates

* [use-debounced-callback](https://mantine.dev/llms/hooks-use-debounced-callback.md) documentation was updated to include new `flush` and `flushOnUnmount` features
* Documentation about exported types was added to all applicable hooks

## Other changes

* All components now support `bdrs` style prop to set border radius.
* [DateTimePicker](https://mantine.dev/llms/dates-date-time-picker.md) now supports `defaultTimeValue` prop
* [Tooltip](https://mantine.dev/llms/core-tooltip.md) now supports `autoContrast` prop.
* Handlers returned from [use-counter](https://mantine.dev/llms/hooks-use-counter.md) are now memoized.
* Return value of [use-event-listener](https://mantine.dev/llms/hooks-use-event-listener.md), [use-focus-within](https://mantine.dev/llms/hooks-use-focus-within.md), [use-focus-trap](https://mantine.dev/llms/hooks-use-focus-trap.md), [use-hover](https://mantine.dev/llms/hooks-use-hover.md), [use-move](https://mantine.dev/llms/hooks-use-move.md), [use-radial-move](https://mantine.dev/llms/hooks-use-radial-move.md) changed (`React.RefObject` -> `React.RefCallback`), required to fix incorrect ref handling in several cases. For more information, see the issue on GitHub – [#7406](https://github.com/mantinedev/mantine/issues/7406).
* Deprecated `React.MutableRefObject` type was replaced with `React.RefObject` in all packages to better support React 19 types.
* `positionDependencies` prop is now deprecated in [Tooltip](https://mantine.dev/llms/core-tooltip.md), [Popover](https://mantine.dev/llms/core-popover.md) and other components based on Popover. The prop is no longer required and can be safely removed. `positionDependencies` prop will be removed in 9.0 release.