mantinedev/mantine (@mantine/core)
### [`v7.12.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.12.1)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.12.0...7.12.1)
##### What's Changed
- `[@mantine/dates]` DateInput: Fix default date being set to the current date when `minDate` is set to the future ([#6646](https://togithub.com/mantinedev/mantine/issues/6646))
- `[@mantine/core]` ScrollArea: Fix incorrect thumb::before styles
- `[@mantine/core]` Fix incorrect active styles of buttons used inside disabled fieldset
- `[@mantine/form]` Fix `form.watch` callbacks not being fired when `form.initialize` is called ([#6639](https://togithub.com/mantinedev/mantine/issues/6639))
- `[@mantine/core]` Switch: Fix Switch shrinking when large label or description is used ([#6531](https://togithub.com/mantinedev/mantine/issues/6531))
- `[@mantine/core]` Combobox: Fix `Combobox.Search` overflow when `ScrollArea` is used in the dropdown ([#6562](https://togithub.com/mantinedev/mantine/issues/6562))
- `[@mantine/core]` Accordion: Add missing `withProps` function ([#6564](https://togithub.com/mantinedev/mantine/issues/6564))
- `[@mantine/core]` Pill: Fix remove icon overflowing pill container if its background color was changed with Styles API ([#6565](https://togithub.com/mantinedev/mantine/issues/6565))
- `[@mantine/core]` PinInput: Allow passing props to individual input elements depending on index with `getInputProps` ([#6588](https://togithub.com/mantinedev/mantine/issues/6588))
- `[@mantine/charts]`: Fix LineChart Legend and Tooltip to support nested names ([#6536](https://togithub.com/mantinedev/mantine/issues/6536))
- `[@mantine/core]` Tooltip: Add missing `Tooltip.Group.extend` function ([#6576](https://togithub.com/mantinedev/mantine/issues/6576))
- `[@mantine/spotlight]` Fix `limit` prop not working correctly with actions groups ([#6632](https://togithub.com/mantinedev/mantine/issues/6632))
- `[@mantine/core]` Badge: Fix text overflow not being handled correctly ([#6629](https://togithub.com/mantinedev/mantine/issues/6629))
- `[@mantine/core]` SegmentedControl: Add `data-disabled` attribute to the root element to simplify styling with Styles API ([#6625](https://togithub.com/mantinedev/mantine/issues/6625))
- `[@mantine/core]` SegmentedControl: Fix initial position of indicator being broken when the component is used inside other element that has transitions on mount ([#6622](https://togithub.com/mantinedev/mantine/issues/6622))
- `[@mantine/core]` TagsInput: Fix `onKeyDown` prop not working ([#6569](https://togithub.com/mantinedev/mantine/issues/6569))
- `[@mantine/charts]` PieChart: Fix `valueFormatter` not working on outside labels ([#6616](https://togithub.com/mantinedev/mantine/issues/6616))
- `[@mantine/core]` Popover: Fix `apply` function of `size` middleware not being handled correctly ([#6598](https://togithub.com/mantinedev/mantine/issues/6598))
- `[@mantine/core]` Chip: Fix incorrect checked padding for `size="xl"` ([#6586](https://togithub.com/mantinedev/mantine/issues/6586))
- `[@mantine/dates]` TimeInput: Fix incorrect focus styles of am/pm input ([#6579](https://togithub.com/mantinedev/mantine/issues/6579))
- `[@mantine/hook]` use-os: Fix incorrect iPadOS detection ([#6535](https://togithub.com/mantinedev/mantine/issues/6535))
- `[@mantine/core]` DatePickerInput: Fix incorrect `aria-label` being set on the input element ([#6530](https://togithub.com/mantinedev/mantine/issues/6530))
- `[@mantine/core]` Menu: Fix incorrect Escape key handling inside Modal ([#6580](https://togithub.com/mantinedev/mantine/issues/6580))
##### New Contributors
- [@vorant94](https://togithub.com/vorant94) made their first contribution in [https://github.com/mantinedev/mantine/pull/6530](https://togithub.com/mantinedev/mantine/pull/6530)
- [@hajimism](https://togithub.com/hajimism) made their first contribution in [https://github.com/mantinedev/mantine/pull/6539](https://togithub.com/mantinedev/mantine/pull/6539)
- [@ziimakc](https://togithub.com/ziimakc) made their first contribution in [https://github.com/mantinedev/mantine/pull/6561](https://togithub.com/mantinedev/mantine/pull/6561)
- [@th3fallen](https://togithub.com/th3fallen) made their first contribution in [https://github.com/mantinedev/mantine/pull/6579](https://togithub.com/mantinedev/mantine/pull/6579)
- [@david-szabo97](https://togithub.com/david-szabo97) made their first contribution in [https://github.com/mantinedev/mantine/pull/6586](https://togithub.com/mantinedev/mantine/pull/6586)
- [@bastiankistner](https://togithub.com/bastiankistner) made their first contribution in [https://github.com/mantinedev/mantine/pull/6607](https://togithub.com/mantinedev/mantine/pull/6607)
- [@inx-fldu](https://togithub.com/inx-fldu) made their first contribution in [https://github.com/mantinedev/mantine/pull/6569](https://togithub.com/mantinedev/mantine/pull/6569)
- [@michaelperros](https://togithub.com/michaelperros) made their first contribution in [https://github.com/mantinedev/mantine/pull/6622](https://togithub.com/mantinedev/mantine/pull/6622)
- [@risen228](https://togithub.com/risen228) made their first contribution in [https://github.com/mantinedev/mantine/pull/6625](https://togithub.com/mantinedev/mantine/pull/6625)
- [@ddoemonn](https://togithub.com/ddoemonn) made their first contribution in [https://github.com/mantinedev/mantine/pull/6629](https://togithub.com/mantinedev/mantine/pull/6629)
- [@yorkeJohn](https://togithub.com/yorkeJohn) made their first contribution in [https://github.com/mantinedev/mantine/pull/6632](https://togithub.com/mantinedev/mantine/pull/6632)
- [@raulfpl](https://togithub.com/raulfpl) made their first contribution in [https://github.com/mantinedev/mantine/pull/6639](https://togithub.com/mantinedev/mantine/pull/6639)
- [@uriFrischman](https://togithub.com/uriFrischman) made their first contribution in [https://github.com/mantinedev/mantine/pull/6645](https://togithub.com/mantinedev/mantine/pull/6645)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/7.12.0...7.12.1
### [`v7.12.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.12.0): 🌟
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.11.2...7.12.0)
[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-12-0)
#### Notifications at any position
It is now possible to display notifications at any position on the screen
with [@mantine/notifications package](https://mantine.dev/x/notifications):
```tsx
import { Button } from '@mantine/core';
import { notifications } from '@mantine/notifications';
const positions = [
'top-left',
'top-right',
'bottom-left',
'bottom-right',
'top-center',
'bottom-center',
] as const;
function Demo() {
const buttons = positions.map((position) => (
));
return {buttons};
}
```
#### Subscribe to notifications state
You can now subscribe to notifications state changes with `useNotifications` hook:
```tsx
import { Button } from '@mantine/core';
import { notifications } from '@mantine/notifications';
function Demo() {
return (
);
}
```
#### SemiCircleProgress component
New [SemiCircleProgress](https://mantine.dev/core/semi-circle-progress) component:
```tsx
import { SemiCircleProgress } from '@mantine/core';
function Demo() {
return (
);
}
```
#### Tree checked state
[Tree](https://mantine.dev/core/tree) component now supports checked state:
```tsx
import { IconChevronDown } from '@tabler/icons-react';
import { Checkbox, Group, RenderTreeNodePayload, Tree } from '@mantine/core';
import { data } from './data';
const renderTreeNode = ({
node,
expanded,
hasChildren,
elementProps,
tree,
}: RenderTreeNodePayload) => {
const checked = tree.isNodeChecked(node.value);
const indeterminate = tree.isNodeIndeterminate(node.value);
return (
(!checked ? tree.checkNode(node.value) : tree.uncheckNode(node.value))}
/>
tree.toggleExpanded(node.value)}>
{node.label}
{hasChildren && (
)}
);
};
function Demo() {
return ;
}
```
#### Disable specific features in postcss-preset-mantine
You can now disable specific features of the [postcss-preset-mantine](https://mantine.dev/styles/postcss-preset)
by setting them to `false` in the configuration object. This feature is available starting from
`postcss-preset-mantine@1.17.0`.
```tsx
module.exports = {
'postcss-preset-mantine': {
features: {
// Turn off `light-dark` function
lightDarkFunction: false,
// Turn off `postcss-nested` plugin
nested: false,
// Turn off `lighten`, `darken` and `alpha` functions
colorMixAlpha: false,
// Turn off `rem` and `em` functions
remEmFunctions: false,
// Turn off `postcss-mixins` plugin
mixins: false,
},
},
};
```
#### Help Center updates
- [Server components guide](https://help.mantine.dev/q/server-components) has been updated to include `Component.extend` usage in server components.
- [A guide on applying input focus styles](https://help.mantine.dev/q/input-focus-styles) has been updated to work correctly with [PasswordInput](https://mantine.dev/core/password-input) and other components in which the `input` selector is not used for actual input element.
- The guide on [how to disable all inputs in the form](https://help.mantine.dev/q/disable-all-inputs-in-form) now includes additional instructions for [use-form](https://mantine.dev/form/use-form).
- New [Can I have color schemes other than light and dark?](https://help.mantine.dev/q/light-dark-is-not-enough) guide explains the difference between color scheme and theme and why Mantine does not support custom color schemes.
- New [Why VSCode cannot autoimport Text component?](https://help.mantine.dev/q/why-vscode-cannot-autoimport-text) guide explains why VSCode cannot automatically import `Text` component.
- New [Are Mantine components accessible?](https://help.mantine.dev/q/are-mantine-components-accessible) question
- New [How can I focus the first input with error with use-form?](https://help.mantine.dev/q/focus-first-input-with-error) question
- New [How to scroll to the top of the form if the form is submitted with errors?](https://help.mantine.dev/q/scroll-to-the-top-of-the-form) question
- New [Why my notifications are displayed at a wrong position?](https://help.mantine.dev/q/notifications-missing-styles) question
- New [Why my screen is completely empty after I've added notifications package?](https://help.mantine.dev/q/notifications-empty-screen) question
- New [Why can I not use value/label data structure with Autocomplete/TagsInput?](https://help.mantine.dev/q/autocomplete-value-label) question
- New [Why FileButton does not work in Menu?](https://help.mantine.dev/q/file-button-in-menu) question
- New [How can I display different elements in light and dark color schemes?](https://help.mantine.dev/q/light-dark-elements) question
#### Other changes
- [use-interval](https://mantine.dev/hooks/use-interval) hook now supports `autoInvoke` option to start the interval automatically when the component mounts.
- [use-form](https://mantine.dev/form/use-form) with `mode="uncontrolled"` now triggers additional rerender when dirty state changes to allow subscribing to form state changes.
- [ScrollArea](https://mantine.dev/core/scroll-area) component now supports `onTopReached` and `onBottomReached` props. The functions are called when the user scrolls to the top or bottom of the scroll area.
- [Accordion.Panel](https://mantine.dev/core/accordion) component now supports `onTransitionEnd` prop that is called when the panel animation completes.
### [`v7.11.2`](https://togithub.com/mantinedev/mantine/compare/7.11.1...b27d64babc72a6f82384216aa8010cb395d62ad8)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.11.1...7.11.2)
### [`v7.11.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.11.1)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.11.0...7.11.1)
##### What's Changed
- `[@mantine/core]` Add option to display `nothingFoundMessage` when data is empty in Select and MultiSelect components ([#6477](https://togithub.com/mantinedev/mantine/issues/6477))
- `[@mantine/core]` Tooltip: Add `defaultOpened` prop support ([#6466](https://togithub.com/mantinedev/mantine/issues/6466))
- `[@mantine/core]` PinInput: Fix incorrect rtl logic ([#6382](https://togithub.com/mantinedev/mantine/issues/6382))
- `[@mantine/core]` Popover: Fix `floatingStrategy="fixed"` not having `position:fixed` styles ([#6419](https://togithub.com/mantinedev/mantine/issues/6419))
- `[@mantine/spotlight]` Fix spotlight not working correctly with shadow DOM ([#6400](https://togithub.com/mantinedev/mantine/issues/6400))
- `[@mantine/form]` Fix `onValuesChange` using stale values ([#6392](https://togithub.com/mantinedev/mantine/issues/6392))
- `[@mantine/carousel]` Fix `onSlideChange` using stale props values ([#6393](https://togithub.com/mantinedev/mantine/issues/6393))
- `[@mantine/charts]` Fix unexpected padding on the right side of the chart in BarChart, AreaChart and LineChart components ([#6467](https://togithub.com/mantinedev/mantine/issues/6467))
- `[@mantine/core]` Select: Fix `onChange` being called with the already selected if it has been picked from the dropdown ([#6468](https://togithub.com/mantinedev/mantine/issues/6468))
- `[@mantine/dates]` DatePickerInput: Fix `highlightToday` not working ([#6471](https://togithub.com/mantinedev/mantine/issues/6471))
- `[@mantine/core]` NumberInput: Fix incorrect handling of numbers larger than max safe integer on blur ([#6407](https://togithub.com/mantinedev/mantine/issues/6407))
- `[@mantine/core]` Tooltip: Fix tooltip arrow being incompatible with headless mode ([#6458](https://togithub.com/mantinedev/mantine/issues/6458))
- `[@mantine/core]` ActionIcon: Fix loading styles inconsistency with Button component ([#6460](https://togithub.com/mantinedev/mantine/issues/6460))
- `[@mantine/charts]` PieChart: Fix key error for duplicated `name` data ([#6067](https://togithub.com/mantinedev/mantine/issues/6067))
- `[@mantine/core]` Modal: Fix `removeScrollProps.ref` not being compatible with React 19 ([#6446](https://togithub.com/mantinedev/mantine/issues/6446))
- `[@mantine/core]` TagsInput: Fix `selectFirstOptionOnChange` prop not working ([#6337](https://togithub.com/mantinedev/mantine/issues/6337))
- `[@mantine/hooks]` use-eye-dropper: Fix Opera being incorrectly detected as a supported browser ([#6307](https://togithub.com/mantinedev/mantine/issues/6307))
- `[@mantine/core]` Fix `:host` selector now working correctly in `cssVariablesSelector` of MantineProvider ([#6404](https://togithub.com/mantinedev/mantine/issues/6404))
- `[@mantine/core]` TagsInput: Fix `onChange` being called twice when Enter key is pressed in some cases ([#6416](https://togithub.com/mantinedev/mantine/issues/6416))
- `[@mantine/modals]` Fix Modal overrides type augmentation not working with TypeScript 5.5 ([#6443](https://togithub.com/mantinedev/mantine/issues/6443))
- `[@mantine/core]` Tree: Fix `levelOffset` prop being added to the root DOM element ([#6461](https://togithub.com/mantinedev/mantine/issues/6461))
##### New Contributors
- [@bsl-zcs](https://togithub.com/bsl-zcs) made their first contribution in [https://github.com/mantinedev/mantine/pull/6461](https://togithub.com/mantinedev/mantine/pull/6461)
- [@florisdg](https://togithub.com/florisdg) made their first contribution in [https://github.com/mantinedev/mantine/pull/6443](https://togithub.com/mantinedev/mantine/pull/6443)
- [@snlacks](https://togithub.com/snlacks) made their first contribution in [https://github.com/mantinedev/mantine/pull/6425](https://togithub.com/mantinedev/mantine/pull/6425)
- [@lid0a](https://togithub.com/lid0a) made their first contribution in [https://github.com/mantinedev/mantine/pull/6415](https://togithub.com/mantinedev/mantine/pull/6415)
- [@Knamer95](https://togithub.com/Knamer95) made their first contribution in [https://github.com/mantinedev/mantine/pull/6416](https://togithub.com/mantinedev/mantine/pull/6416)
- [@yyytae0](https://togithub.com/yyytae0) made their first contribution in [https://github.com/mantinedev/mantine/pull/6404](https://togithub.com/mantinedev/mantine/pull/6404)
- [@toanxyz](https://togithub.com/toanxyz) made their first contribution in [https://github.com/mantinedev/mantine/pull/6388](https://togithub.com/mantinedev/mantine/pull/6388)
- [@viktorkasap](https://togithub.com/viktorkasap) made their first contribution in [https://github.com/mantinedev/mantine/pull/6307](https://togithub.com/mantinedev/mantine/pull/6307)
- [@alexlapp](https://togithub.com/alexlapp) made their first contribution in [https://github.com/mantinedev/mantine/pull/6337](https://togithub.com/mantinedev/mantine/pull/6337)
- [@brycefranzen](https://togithub.com/brycefranzen) made their first contribution in [https://github.com/mantinedev/mantine/pull/6446](https://togithub.com/mantinedev/mantine/pull/6446)
- [@marcobiedermann](https://togithub.com/marcobiedermann) made their first contribution in [https://github.com/mantinedev/mantine/pull/6442](https://togithub.com/mantinedev/mantine/pull/6442)
- [@mullwar](https://togithub.com/mullwar) made their first contribution in [https://github.com/mantinedev/mantine/pull/6067](https://togithub.com/mantinedev/mantine/pull/6067)
- [@gruschis](https://togithub.com/gruschis) made their first contribution in [https://github.com/mantinedev/mantine/pull/6400](https://togithub.com/mantinedev/mantine/pull/6400)
- [@jpranays](https://togithub.com/jpranays) made their first contribution in [https://github.com/mantinedev/mantine/pull/6466](https://togithub.com/mantinedev/mantine/pull/6466)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/7.11.0...7.11.1
### [`v7.11.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.11.0): 👁️
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.10.2...7.11.0)
[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-11-0)
##### withProps function
All Mantine components now have `withProps` static function that can be used to
add default props to the component:
```tsx
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 (
<>
{/* You can pass additional props to components created with `withProps` */}
Mantine website
{/* Component props override default props defined in `withProps` */}
);
}
```
##### Avatar initials
[Avatar](https://mantine.dev/core/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:
```tsx
import { Avatar, Group } from '@mantine/core';
const names = [
'John Doe',
'Jane Mol',
'Alex Lump',
'Sarah Condor',
'Mike Johnson',
'Kate Kok',
'Tom Smith',
];
function Demo() {
const avatars = names.map((name) => );
return {avatars};
}
```
##### BubbleChart component
New [BubbleChart](https://mantine.dev/charts/bubble-chart) component:
```tsx
import { BubbleChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
);
}
```
##### BarChart waterfall type
[BarChart](https://mantine.dev/charts/bar-chart) component now supports `waterfall` type
which is useful for visualizing changes in values over time:
```tsx
import { BarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
);
}
```
##### LineChart gradient type
[LineChart](https://mantine.dev/charts/line-chart) component now supports `gradient` type
which renders line chart with gradient fill:
```tsx
import { LineChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
`${value}°C`}
/>
);
}
```
##### Right Y axis
[LineChart](https://mantine.dev/charts/line-chart), [BarChart](https://mantine.dev/charts/bar-chart) and [AreaChart](https://mantine.dev/charts/area-chart) components
now support `rightYAxis` prop which renders additional Y axis on the right side of the chart:
```tsx
import { LineChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
);
}
```
##### RadarChart legend
[RadarChart](https://mantine.dev/charts/radar-chart) component now supports legend:
```tsx
import { RadarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
);
}
```
##### TagsInput acceptValueOnBlur
[TagsInput](https://mantine.dev/core/tags-input) 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.
```tsx
import { TagsInput } from '@mantine/core';
function Demo() {
return (
<>
);
}
```
##### Transition delay
[Transition](https://mantine.dev/core/transition) component now supports `enterDelay` and `exitDelay` props to delay transition start:
```tsx
import { useState } from 'react';
import { Button, Flex, Paper, Transition } from '@mantine/core';
export function Demo() {
const [opened, setOpened] = useState(false);
return (
{(transitionStyle) => (
setOpened(false)}
style={{ ...transitionStyle, zIndex: 1 }}
>
Click to close
)}
);
}
```
##### Documentation updates
- New [segmented progress](https://mantine.dev/core/progress/#example-progress-with-segments) example has been added to `Progress` component documentation
- [Select](https://mantine.dev/core/select), [TagsInput](https://mantine.dev/core/tags-input) and [MultiSelect](https://mantine.dev/core/multi-select) components documentation now includes additional demo on how to change the dropdown width
- New [DatePicker](https://mantine.dev//dates/date-picker/#exclude-dates) example for `excludeDate` prop
##### Other changes
- [Pagination](https://mantine.dev/core/pagination) component now supports `hideWithOnePage` prop which hides pagination when there is only one page
- [Spoiler](https://mantine.dev/core/spoiler) component now supports controlled expanded state with `expanded` and `onExpandedChange` props
- [Burger](https://mantine.dev/core/burger) component now supports `lineSize` prop to change lines height
- [Calendar](https://mantine.dev/dates/calendar), [DatePicker](https://mantine.dev/dates/date-picker) and other similar components now support `highlightToday` prop to highlight today's date
### [`v7.10.2`](https://togithub.com/mantinedev/mantine/releases/tag/7.10.2)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.10.1...7.10.2)
##### What's Changed
- `[@mantine/core]` Select: Fix incorrect state changes handling when both `value` and `searchValue` are controlled ([#6272](https://togithub.com/mantinedev/mantine/issues/6272))
- `[@mantine/core]` Stepper: Fix `autoContrast` prop being added to the DOM element
- `[@mantine/charts]` PieChart: Fix inner label not using formatted value ([#6328](https://togithub.com/mantinedev/mantine/issues/6328))
- `[@mantine/core]` Fix incorrect color resolving logic in border style prop resolver ([#6326](https://togithub.com/mantinedev/mantine/issues/6326))
- `[@mantine/modals]` Fix incorrect styles of the confirmation modal when it is used without any description ([#6325](https://togithub.com/mantinedev/mantine/issues/6325))
- `[@mantine/core]` ScrollArea: Fix click events being triggered when scrollbar drag is released over an interactive element in Firefox ([#6354](https://togithub.com/mantinedev/mantine/issues/6354))
- `[@mantine/core]` Combobox: Fix clicks on footer and header triggering dropdown close ([#6344](https://togithub.com/mantinedev/mantine/issues/6344))
- `[@mantine/core]` PasswordInput: Fix `withErrorStyles` prop being passed to the DOM element ([#6348](https://togithub.com/mantinedev/mantine/issues/6348))
##### New Contributors
- [@stefanzmf](https://togithub.com/stefanzmf) made their first contribution in [https://github.com/mantinedev/mantine/pull/6344](https://togithub.com/mantinedev/mantine/pull/6344)
- [@Prasiddha22](https://togithub.com/Prasiddha22) made their first contribution in [https://github.com/mantinedev/mantine/pull/6325](https://togithub.com/mantinedev/mantine/pull/6325)
- [@ShionTerunaga](https://togithub.com/ShionTerunaga) made their first contribution in [https://github.com/mantinedev/mantine/pull/6332](https://togithub.com/mantinedev/mantine/pull/6332)
- [@djdduty](https://togithub.com/djdduty) made their first contribution in [https://github.com/mantinedev/mantine/pull/6326](https://togithub.com/mantinedev/mantine/pull/6326)
- [@Jones-Griffin](https://togithub.com/Jones-Griffin) made their first contribution in [https://github.com/mantinedev/mantine/pull/6328](https://togithub.com/mantinedev/mantine/pull/6328)
- [@floriankapaun](https://togithub.com/floriankapaun) made their first contribution in [https://github.com/mantinedev/mantine/pull/6272](https://togithub.com/mantinedev/mantine/pull/6272)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/7.10.1...7.10.2
### [`v7.10.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.10.1)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.10.0...7.10.1)
##### What's Changed
- `[@mantine/charts]` BarChart: Add waterfall type ([#6231](https://togithub.com/mantinedev/mantine/issues/6231))
- `[@mantine/form]` Fix `form.setFieldError` called inside `form.onSubmit` not working correctly in some cases ([#6101](https://togithub.com/mantinedev/mantine/issues/6101))
- `[@mantine/core]` SegmentedControl: Fix false error reported by React 18.3+ for incorrect key prop usage
- `[@mantine/hooks]` use-fetch: Fix incorrect error handling ([#6278](https://togithub.com/mantinedev/mantine/issues/6278))
- `[@mantine/core]` Fix `bd` style prop not being applied in some components ([#6282](https://togithub.com/mantinedev/mantine/issues/6282))
- `[@mantine/core]` NumberInput: Fix incorrect leading zeros handling ([#6232](https://togithub.com/mantinedev/mantine/issues/6232))
- `[@mantine/core]` NumberInput: Fix incorrect logic while editing decimal values ([#6232](https://togithub.com/mantinedev/mantine/issues/6232))
- `[@mantine/core]` ScrollArea: Fix scrollbar flickering on reveal with hover and scroll types ([#6218](https://togithub.com/mantinedev/mantine/issues/6218))
- `[@mantine/hooks]` Update use-throttled-\* hooks to emit updates on trailing edges ([#6257](https://togithub.com/mantinedev/mantine/issues/6257))
- `[@mantine/core]` Input: Add `inputSize` prop to set `size` html attribute on the input element
##### New Contributors
- [@a-kon](https://togithub.com/a-kon) made their first contribution in [https://github.com/mantinedev/mantine/pull/6265](https://togithub.com/mantinedev/mantine/pull/6265)
- [@dfaust](https://togithub.com/dfaust) made their first contribution in [https://github.com/mantinedev/mantine/pull/6257](https://togithub.com/mantinedev/mantine/pull/6257)
- [@ElTupac](https://togithub.com/ElTupac) made their first contribution in [https://github.com/mantinedev/mantine/pull/6278](https://togithub.com/mantinedev/mantine/pull/6278)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/7.10.0...7.10.1
### [`v7.10.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.10.0): 😎
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.9.2...7.10.0)
[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-10-0)
##### Tree component
New [Tree](https://mantine.dev/core/tree) component:
```tsx
import { IconFolder, IconFolderOpen } from '@tabler/icons-react';
import { Group, RenderTreeNodePayload, Tree } from '@mantine/core';
import { CssIcon, NpmIcon, TypeScriptCircleIcon } from '@mantinex/dev-icons';
import { data, dataCode } from './data';
import classes from './Demo.module.css';
interface FileIconProps {
name: string;
isFolder: boolean;
expanded: boolean;
}
function FileIcon({ name, isFolder, expanded }: FileIconProps) {
if (name.endsWith('package.json')) {
return ;
}
if (name.endsWith('.ts') || name.endsWith('.tsx') || name.endsWith('tsconfig.json')) {
return ;
}
if (name.endsWith('.css')) {
return ;
}
if (isFolder) {
return expanded ? (
) : (
);
}
return null;
}
function Leaf({ node, expanded, hasChildren, elementProps }: RenderTreeNodePayload) {
return (
{node.label}
);
}
function Demo() {
return (
}
/>
);
}
```
##### form.getInputNode
New `form.getInputNode(path)` handler returns input DOM node for the given field path.
Form example, it can be used to focus input on form submit if there is an error:
```tsx
import { Button, Group, TextInput } from '@mantine/core';
import { isEmail, isNotEmpty, useForm } from '@mantine/form';
function Demo() {
const form = useForm({
mode: 'uncontrolled',
initialValues: {
name: '',
email: '',
},
validate: {
name: isNotEmpty('Name is required'),
email: isEmail('Invalid email'),
},
});
return (
);
}
```
##### Container queries in SimpleGrid
You can now use [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)
in [SimpleGrid](https://mantine.dev/core/simple-grid) component. With container queries, grid columns and spacing
will be adjusted based on the container width, not the viewport width.
Example of using container queries. To see how the grid changes, resize the root element
of the demo with the resize handle located at the bottom right corner of the demo:
```tsx
import { SimpleGrid } from '@mantine/core';
function Demo() {
return (
// Wrapper div is added for demonstration purposes only,
// it is not required in real projects
1
2
3
4
5
);
}
```
##### Checkbox and Radio indicators
New [Checkbox.Indicator](https://mantine.dev/core/checkbox/#checkboxindicator) and [Radio.Indicator](https://mantine.dev/core/radio/#radioindicator)
components look exactly the same as `Checkbox` and `Radio` components, but they do not
have any semantic meaning, they are just visual representations of checkbox and radio states.
`Checkbox.Indicator` component:
```tsx
import { Checkbox, Group } from '@mantine/core';
function Demo() {
return (
);
}
```
`Radio.Indicator` component:
```tsx
import { Group, Radio } from '@mantine/core';
function Demo() {
return (
);
}
```
##### Checkbox and Radio cards
New [Checkbox.Card](https://mantine.dev/core/checkbox/#checkboxcard-component) and [Radio.Card](https://mantine.dev/core/radio/#radiocard-component)
components can be used as replacements for `Checkbox` and `Radio` to build custom cards/buttons/etc.
that work as checkboxes and radios. Components are accessible by default and support the same
keyboard interactions as `input[type="checkbox"]` and `input[type="radio"]`.
`Checkbox.Card` component:
```tsx
import { useState } from 'react';
import { Checkbox, Group, Text } from '@mantine/core';
import classes from './Demo.module.css';
function Demo() {
const [checked, setChecked] = useState(false);
return (
setChecked((c) => !c)}
>
@mantine/core
Core components library: inputs, buttons, overlays, etc.
);
}
```
`Checkbox.Card` component with `Checkbox.Group`:
```tsx
import { useState } from 'react';
import { Checkbox, Group, Stack, Text } from '@mantine/core';
import classes from './Demo.module.css';
const data = [
{
name: '@mantine/core',
description: 'Core components library: inputs, buttons, overlays, etc.',
},
{ name: '@mantine/hooks', description: 'Collection of reusable hooks for React applications.' },
{ name: '@mantine/notifications', description: 'Notifications system' },
];
function Demo() {
const [value, setValue] = useState([]);
const cards = data.map((item) => (
{item.name}{item.description}
));
return (
<>
{cards}
CurrentValue: {value.join(', ') || '–'}
);
}
```
`Radio.Card` component:
```tsx
import { useState } from 'react';
import { Group, Radio, Text } from '@mantine/core';
import classes from './Demo.module.css';
function Demo() {
const [checked, setChecked] = useState(false);
return (
setChecked((c) => !c)}
>
@mantine/core
Core components library: inputs, buttons, overlays, etc.
);
}
```
`Radio.Card` component with `Radio.Group`:
```tsx
import { useState } from 'react';
import { Group, Radio, Stack, Text } from '@mantine/core';
import classes from './Demo.module.css';
const data = [
{
name: '@mantine/core',
description: 'Core components library: inputs, buttons, overlays, etc.',
},
{ name: '@mantine/hooks', description: 'Collection of reusable hooks for React applications.' },
{ name: '@mantine/notifications', description: 'Notifications system' },
];
function Demo() {
const [value, setValue] = useState(null);
const cards = data.map((item) => (
{item.name}{item.description}
));
return (
<>
{cards}
CurrentValue: {value || '–'}
);
}
```
##### bd style prop
New [bd style prop](https://mantine.dev/styles/style-props/) can be used to set `border` CSS property.
It is available in all components that support style props.
Border width value is automatically converted to rem. For border color you can reference
theme colors similar to other style props:
```tsx
import { Box } from '@mantine/core';
function Demo() {
return ;
}
```
### [`v7.9.2`](https://togithub.com/mantinedev/mantine/releases/tag/7.9.2)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.9.1...7.9.2)
##### What's Changed
- `[@mantine/dates]` DateTimePicker: Fix some of `timeInputProps` not being respected ([#6204](https://togithub.com/mantinedev/mantine/issues/6204))
- `[@mantine/core]` NavLink: Add react-router support to display active route ([#6180](https://togithub.com/mantinedev/mantine/issues/6180))
- `[@mantine/core]` Fix `nonce` attribute not being set on `` tag generated in color scheme switching script
- `[@mantine/core]` Input: Fix incorrect margins when input wrapper order is explicitly set
- `[@mantine/core]` Pagination: Fix types definition being incompatible with [@tabler/icons-react](https://togithub.com/tabler/icons-react) 3.x
- `[@mantine/charts]` Fix incorrect tooltip position in LineChart, AreaChart and BarChart with vertical orientation
- `[@mantine/core]` Rating: Fix `readOnly` prop now working on touch devices ([#6202](https://togithub.com/mantinedev/mantine/issues/6202))
- `[@mantine/core]` TagsInput: Fix existing search value being ignored in `onPaste` even handler ([#6073](https://togithub.com/mantinedev/mantine/issues/6073))
- `[@mantine/core]` TagsInput: Improve `clearable` prop logic related to dropdown ([#6115](https://togithub.com/mantinedev/mantine/issues/6115))
##### New Contributors
- [@corydeppen](https://togithub.com/corydeppen) made their first contribution in [https://github.com/mantinedev/mantine/pull/6180](https://togithub.com/mantinedev/mantine/pull/6180)
- [@rodda-kyusu](https://togithub.com/rodda-kyusu) made their first contribution in [https://github.com/mantinedev/mantine/pull/6204](https://togithub.com/mantinedev/mantine/pull/6204)
- [@iguit0](https://togithub.com/iguit0) made their first contribution in [https://github.com/mantinedev/mantine/pull/6233](https://togithub.com/mantinedev/mantine/pull/6233)
- [@Shadowfita](https://togithub.com/Shadowfita) made their first contribution in [https://github.com/mantinedev/mantine/pull/6238](https://togithub.com/mantinedev/mantine/pull/6238)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/7.9.1...7.9.2
### [`v7.9.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.9.1)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.9.0...7.9.1)
##### What's Changed
- `[@mantine/core]` Fix `theme.scale` being ignored in Input, Paper and Table border styles
- `[@mantine/core]` Fix `virtualColor` function requring `use client` in Next.js
- `[@mantine/core]` FloatingIndicator: Fix incorrect resize observer logic ([#6129](https://togithub.com/mantinedev/mantine/issues/6129))
- `[@mantine/core]` NumberInput: Fix incorrect `allowNegative` handling with up/down arrows ([#6170](https://togithub.com/mantinedev/mantine/issues/6170))
- `[@mantine/core]` Fix `error={true}` prop set on Checkbox, Radio and Switch rendering unxpected error element with margin
- `[@mantine/core]` SegmentedControl: Fix `theme.primaryColor` not being respected in the focus ring styles
- `[@mantine/core]` CloseButton: Fix incorrect specificity of some selectors
- `[@mantine/core]` Fix incorrect `aria-label` handling in Select, Autocomplete, MultiSelect and TagsInputs components ([#6123](https://togithub.com/mantinedev/mantine/issues/6123))
- `[@mantine/core]` Modal: Prevent `onClose` from being called when modal is not opened ([#6156](https://togithub.com/mantinedev/mantine/issues/6156))
- `[@mantine/core]` PasswordInput: Fix duplicated password visibility icon in Edge browser ([#6126](https://togithub.com/mantinedev/mantine/issues/6126))
- `[@mantine/hooks]` use-hash: Fix hash value not being updated correctly ([#6145](https://togithub.com/mantinedev/mantine/issues/6145))
- `[@mantine/emotion]` Fix incorrect transform logic that was causing extra hooks to render ([#6159](https://togithub.com/mantinedev/mantine/issues/6159))
##### New Contributors
- [@lachtanek](https://togithub.com/lachtanek) made their first contribution in [https://github.com/mantinedev/mantine/pull/6145](https://togithub.com/mantinedev/mantine/pull/6145)
- [@hsskey](https://togithub.com/hsskey) made their first contribution in [https://github.com/mantinedev/mantine/pull/6156](https://togithub.com/mantinedev/mantine/pull/6156)
- [@ataldev](https://togithub.com/ataldev) made their first contribution in [https://github.com/mantinedev/mantine/pull/6198](https://togithub.com/mantinedev/mantine/pull/6198)
- [@OliverWales](https://togithub.com/OliverWales) made their first contribution in [https://github.com/mantinedev/mantine/pull/6188](https://togithub.com/mantinedev/mantine/pull/6188)
- [@AustinWildgrube](https://togithub.com/AustinWildgrube) made their first contribution in [https://github.com/mantinedev/mantine/pull/6170](https://togithub.com/mantinedev/mantine/pull/6170)
- [@theca11](https://togithub.com/theca11) made their first contribution in [https://github.com/mantinedev/mantine/pull/6178](https://togithub.com/mantinedev/mantine/pull/6178)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/7.9.0...7.9.1
### [`v7.9.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.9.0): ✨
[Compare Source](https://togithub.com/mantinedev/mantine/compare/7.8.1...7.9.0)
[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-9-0)
##### [@mantine/emotion](https://togithub.com/mantine/emotion) package
New [@mantine/emotion](https://mantine.dev/styles/emotion) package is now available to simplify migration
from [6.x to 7.x](https://mantine.dev/guides/6x-to-7x/). It includes `createStyles` function and additional
functionality for `sx` and `styles` props for all components similar to what was available
in `@mantine/core` package in v6.
If you still haven't migrated to 7.x because of the change in styling approach, you can now
have a smoother transition by using `@mantine/emotion` package. To learn more about the package,
visit the [documentation page](https://mantine.dev/styles/emotion) and updated [6.x to 7.x migration guide](https://mantine.dev/guides/6x-to-7x/).
```tsx
import { rem } from '@mantine/core';
import { createStyles } from '@mantine/emotion';
const useStyles = createStyles((theme, _, u) => ({
wrapper: {
maxWidth: rem(400),
width: '100%',
height: rem(180),
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginLeft: 'auto',
marginRight: 'auto',
borderRadius: theme.radius.sm,
// Use light and dark selectors to change styles based on color scheme
[u.light]: {
backgroundColor: theme.colors.gray[1],
},
[u.dark]: {
backgroundColor: theme.colors.dark[5],
},
// Reference theme.breakpoints in smallerThan and largerThan functions
[u.smallerThan('sm')]: {
// Child reference in nested selectors via ref
[`& .${u.ref('child')}`]: {
fontSize: theme.fontSizes.xs,
},
},
},
child: {
// Assign selector to a ref to reference it in other styles
ref: u.ref('child'),
padding: theme.spacing.md,
borderRadius: theme.radius.sm,
boxShadow: theme.shadows.md,
[u.light]: {
backgroundColor: theme.white,
color: theme.black,
},
[u.dark]: {
backgroundColor: theme.colors.dark[8],
color: theme.white,
},
},
}));
function Demo() {
const { classes } = useStyles();
return (
createStyles demo
);
}
```
##### React 18.3 support
All `@mantine/*` components and hooks have been updated to support React 18.3. It is
recommended to update your application as well to prepare for the upcoming [React 19 release](https://react.dev/blog/2024/04/25/react-19).
##### use-field hook
New [use-field](https://mantine.dev/form/use-field) hook is now available in `@mantine/form` package.
It can be used as a simpler alternative to [use-form](https://mantine.dev/form/use-form) hook to manage state of a single input without the need to create a form.
The hook supports most of `use-form` hook features: validation with function, touched and
dirty state, error message, validation on change/blur and more.
```tsx
import { TextInput } from '@mantine/core';
import { isEmail, useField } from '@mantine/form';
function Demo() {
const field = useField({
initialValue: '',
validateOnChange: true,
validate: isEmail('Invalid email'),
});
return ;
}
```
`use-field` hook also supports async validation:
```tsx
import { Button, Loader, TextInput } from '@mantine/core';
import { useField } from '@mantine/form';
function validateAsync(value: string): Promise {
return new Promise((resolve) => {
window.setTimeout(() => {
resolve(value === 'mantine' ? null : 'Value must be "mantine"');
}, 800);
});
}
function Demo() {
const field = useField({
initialValue: '',
validate: validateAsync,
});
return (
<>
: null}
mb="md"
/>
);
}
```
##### Custom PostCSS mixins
You can now define custom mixins that are not included in [mantine-postcss-preset](https://mantine.dev/styles/postcss-preset) by specifying them
in the `mixins` option. To learn about mixins syntax, follow [postcss-mixins documentation](https://togithub.com/postcss/postcss-mixins#readme).
Note that this feature is available in `postcss-preset-mantine` starting from version 1.15.0.
Example of adding `clearfix` and `circle` mixins:
```tsx
module.exports = {
plugins: {
'postcss-preset-mantine': {
autoRem: true,
mixins: {
clearfix: {
'&::after': {
content: '""',
display: 'table',
clear: 'both',
},
},
circle: (_mixin, size) => ({
borderRadius: '50%',
width: size,
height: size,
}),
},
},
// ... Other plugins
},
};
```
Then you can use these mixins in your styles:
```scss
.demo {
@mixin clearfix;
@mixin circle 100px;
}
```
##### use-matches hook
New `use-matches` hook exported from `@mantine/core` is an alternative to [use-media-query](https://mantine.dev/hooks/use-media-query/)
if you need to match multiple media queries and values. It accepts an object with media queries as keys and
values at given breakpoint as values.
Note that `use-matches` hook uses the same logic as [use-media-query](https://mantine.dev/hooks/use-media-query/) under the hood,
it is not recommended to be used as a primary source of responsive styles, especially if you have ssr in your application.
In the following example:
- Starting from `theme.breakpoints.lg`, color will be `red.9`
- Between `theme.breakpoints.sm` and `th
Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about these updates again.
[ ] If you want to rebase/retry this PR, check this box
This PR contains the following updates:
7.4.1->7.12.17.4.1->7.12.17.4.1->7.12.17.4.1->7.12.17.4.1->7.12.1Release Notes
mantinedev/mantine (@mantine/core)
### [`v7.12.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.12.1) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.12.0...7.12.1) ##### What's Changed - `[@mantine/dates]` DateInput: Fix default date being set to the current date when `minDate` is set to the future ([#6646](https://togithub.com/mantinedev/mantine/issues/6646)) - `[@mantine/core]` ScrollArea: Fix incorrect thumb::before styles - `[@mantine/core]` Fix incorrect active styles of buttons used inside disabled fieldset - `[@mantine/form]` Fix `form.watch` callbacks not being fired when `form.initialize` is called ([#6639](https://togithub.com/mantinedev/mantine/issues/6639)) - `[@mantine/core]` Switch: Fix Switch shrinking when large label or description is used ([#6531](https://togithub.com/mantinedev/mantine/issues/6531)) - `[@mantine/core]` Combobox: Fix `Combobox.Search` overflow when `ScrollArea` is used in the dropdown ([#6562](https://togithub.com/mantinedev/mantine/issues/6562)) - `[@mantine/core]` Accordion: Add missing `withProps` function ([#6564](https://togithub.com/mantinedev/mantine/issues/6564)) - `[@mantine/core]` Pill: Fix remove icon overflowing pill container if its background color was changed with Styles API ([#6565](https://togithub.com/mantinedev/mantine/issues/6565)) - `[@mantine/core]` PinInput: Allow passing props to individual input elements depending on index with `getInputProps` ([#6588](https://togithub.com/mantinedev/mantine/issues/6588)) - `[@mantine/charts]`: Fix LineChart Legend and Tooltip to support nested names ([#6536](https://togithub.com/mantinedev/mantine/issues/6536)) - `[@mantine/core]` Tooltip: Add missing `Tooltip.Group.extend` function ([#6576](https://togithub.com/mantinedev/mantine/issues/6576)) - `[@mantine/spotlight]` Fix `limit` prop not working correctly with actions groups ([#6632](https://togithub.com/mantinedev/mantine/issues/6632)) - `[@mantine/core]` Badge: Fix text overflow not being handled correctly ([#6629](https://togithub.com/mantinedev/mantine/issues/6629)) - `[@mantine/core]` SegmentedControl: Add `data-disabled` attribute to the root element to simplify styling with Styles API ([#6625](https://togithub.com/mantinedev/mantine/issues/6625)) - `[@mantine/core]` SegmentedControl: Fix initial position of indicator being broken when the component is used inside other element that has transitions on mount ([#6622](https://togithub.com/mantinedev/mantine/issues/6622)) - `[@mantine/core]` TagsInput: Fix `onKeyDown` prop not working ([#6569](https://togithub.com/mantinedev/mantine/issues/6569)) - `[@mantine/charts]` PieChart: Fix `valueFormatter` not working on outside labels ([#6616](https://togithub.com/mantinedev/mantine/issues/6616)) - `[@mantine/core]` Popover: Fix `apply` function of `size` middleware not being handled correctly ([#6598](https://togithub.com/mantinedev/mantine/issues/6598)) - `[@mantine/core]` Chip: Fix incorrect checked padding for `size="xl"` ([#6586](https://togithub.com/mantinedev/mantine/issues/6586)) - `[@mantine/dates]` TimeInput: Fix incorrect focus styles of am/pm input ([#6579](https://togithub.com/mantinedev/mantine/issues/6579)) - `[@mantine/hook]` use-os: Fix incorrect iPadOS detection ([#6535](https://togithub.com/mantinedev/mantine/issues/6535)) - `[@mantine/core]` DatePickerInput: Fix incorrect `aria-label` being set on the input element ([#6530](https://togithub.com/mantinedev/mantine/issues/6530)) - `[@mantine/core]` Menu: Fix incorrect Escape key handling inside Modal ([#6580](https://togithub.com/mantinedev/mantine/issues/6580)) ##### New Contributors - [@vorant94](https://togithub.com/vorant94) made their first contribution in [https://github.com/mantinedev/mantine/pull/6530](https://togithub.com/mantinedev/mantine/pull/6530) - [@hajimism](https://togithub.com/hajimism) made their first contribution in [https://github.com/mantinedev/mantine/pull/6539](https://togithub.com/mantinedev/mantine/pull/6539) - [@ziimakc](https://togithub.com/ziimakc) made their first contribution in [https://github.com/mantinedev/mantine/pull/6561](https://togithub.com/mantinedev/mantine/pull/6561) - [@th3fallen](https://togithub.com/th3fallen) made their first contribution in [https://github.com/mantinedev/mantine/pull/6579](https://togithub.com/mantinedev/mantine/pull/6579) - [@david-szabo97](https://togithub.com/david-szabo97) made their first contribution in [https://github.com/mantinedev/mantine/pull/6586](https://togithub.com/mantinedev/mantine/pull/6586) - [@bastiankistner](https://togithub.com/bastiankistner) made their first contribution in [https://github.com/mantinedev/mantine/pull/6607](https://togithub.com/mantinedev/mantine/pull/6607) - [@inx-fldu](https://togithub.com/inx-fldu) made their first contribution in [https://github.com/mantinedev/mantine/pull/6569](https://togithub.com/mantinedev/mantine/pull/6569) - [@michaelperros](https://togithub.com/michaelperros) made their first contribution in [https://github.com/mantinedev/mantine/pull/6622](https://togithub.com/mantinedev/mantine/pull/6622) - [@risen228](https://togithub.com/risen228) made their first contribution in [https://github.com/mantinedev/mantine/pull/6625](https://togithub.com/mantinedev/mantine/pull/6625) - [@ddoemonn](https://togithub.com/ddoemonn) made their first contribution in [https://github.com/mantinedev/mantine/pull/6629](https://togithub.com/mantinedev/mantine/pull/6629) - [@yorkeJohn](https://togithub.com/yorkeJohn) made their first contribution in [https://github.com/mantinedev/mantine/pull/6632](https://togithub.com/mantinedev/mantine/pull/6632) - [@raulfpl](https://togithub.com/raulfpl) made their first contribution in [https://github.com/mantinedev/mantine/pull/6639](https://togithub.com/mantinedev/mantine/pull/6639) - [@uriFrischman](https://togithub.com/uriFrischman) made their first contribution in [https://github.com/mantinedev/mantine/pull/6645](https://togithub.com/mantinedev/mantine/pull/6645) **Full Changelog**: https://github.com/mantinedev/mantine/compare/7.12.0...7.12.1 ### [`v7.12.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.12.0): 🌟 [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.11.2...7.12.0) [View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-12-0) #### Notifications at any position It is now possible to display notifications at any position on the screen with [@mantine/notifications package](https://mantine.dev/x/notifications): ```tsx import { Button } from '@mantine/core'; import { notifications } from '@mantine/notifications'; const positions = [ 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center', ] as const; function Demo() { const buttons = positions.map((position) => ( )); returnConfiguration
📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about these updates again.
This PR was generated by Mend Renovate. View the repository job log.