Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[@mantine/core] Implement selectFirstOptionOnChange for TagsInput #6337

Merged
merged 8 commits into from
Jun 27, 2024
Merged

[@mantine/core] Implement selectFirstOptionOnChange for TagsInput #6337

merged 8 commits into from
Jun 27, 2024

Conversation

alexlapp
Copy link
Contributor

@alexlapp alexlapp commented Jun 4, 2024

TagsInput takes a selectFirstOptionOnChange prop and doesn't do anything with it. This PR implements the selectFirstOptionOnChange prop in a similar way to how #4997 implemented the prop for MultiSelect.

@rtivital
Copy link
Member

Please fix failing tests.

@alexlapp
Copy link
Contributor Author

@rtivital Tests fixed. I also added a story and slightly changed the implementation since it seemed inconsistent using the original approach.

@rtivital rtivital merged commit 7a321ea into mantinedev:master Jun 27, 2024
1 check passed
@rtivital
Copy link
Member

Thanks!

@alexlapp alexlapp deleted the tags-input-select-first-option-on-change branch June 28, 2024 13:49
davydkov referenced this pull request in likec4/likec4 Jul 11, 2024
@davydkov
chore(deps): update mantine monorepo to v7.11.1 (#821)
4020660 
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@mantine/core](https://mantine.dev/)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/core))
| [`7.11.0` ->
`7.11.1`](https://renovatebot.com/diffs/npm/@mantine%2fcore/7.11.0/7.11.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fcore/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fcore/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fcore/7.11.0/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fcore/7.11.0/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
| [@mantine/core](https://mantine.dev/)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/core))
| [`^7.11.0` ->
`^7.11.1`](https://renovatebot.com/diffs/npm/@mantine%2fcore/7.11.0/7.11.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fcore/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fcore/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fcore/7.11.0/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fcore/7.11.0/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
| [@mantine/hooks](https://mantine.dev)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/hooks))
| [`7.11.0` ->
`7.11.1`](https://renovatebot.com/diffs/npm/@mantine%2fhooks/7.11.0/7.11.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fhooks/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fhooks/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fhooks/7.11.0/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fhooks/7.11.0/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
| [@mantine/hooks](https://mantine.dev)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/hooks))
| [`^7.11.0` ->
`^7.11.1`](https://renovatebot.com/diffs/npm/@mantine%2fhooks/7.11.0/7.11.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fhooks/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fhooks/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fhooks/7.11.0/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fhooks/7.11.0/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
| [@mantine/vanilla-extract](https://mantine.dev)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/vanilla-extract))
| [`7.11.0` ->
`7.11.1`](https://renovatebot.com/diffs/npm/@mantine%2fvanilla-extract/7.11.0/7.11.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fvanilla-extract/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fvanilla-extract/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fvanilla-extract/7.11.0/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fvanilla-extract/7.11.0/7.11.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>mantinedev/mantine (@&#8203;mantine/core)</summary>

###
[`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
([#&#8203;6477](https://togithub.com/mantinedev/mantine/issues/6477))
- `[@mantine/core]` Tooltip: Add `defaultOpened` prop support
([#&#8203;6466](https://togithub.com/mantinedev/mantine/issues/6466))
- `[@mantine/core]` PinInput: Fix incorrect rtl logic
([#&#8203;6382](https://togithub.com/mantinedev/mantine/issues/6382))
- `[@mantine/core]` Popover: Fix `floatingStrategy="fixed"` not having
`position:fixed` styles
([#&#8203;6419](https://togithub.com/mantinedev/mantine/issues/6419))
- `[@mantine/spotlight]` Fix spotlight not working correctly with shadow
DOM
([#&#8203;6400](https://togithub.com/mantinedev/mantine/issues/6400))
- `[@mantine/form]` Fix `onValuesChange` using stale values
([#&#8203;6392](https://togithub.com/mantinedev/mantine/issues/6392))
- `[@mantine/carousel]` Fix `onSlideChange` using stale props values
([#&#8203;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
([#&#8203;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
([#&#8203;6468](https://togithub.com/mantinedev/mantine/issues/6468))
- `[@mantine/dates]` DatePickerInput: Fix `highlightToday` not working
([#&#8203;6471](https://togithub.com/mantinedev/mantine/issues/6471))
- `[@mantine/core]` NumberInput: Fix incorrect handling of numbers
larger than max safe integer on blur
([#&#8203;6407](https://togithub.com/mantinedev/mantine/issues/6407))
- `[@mantine/core]` Tooltip: Fix tooltip arrow being incompatible with
headless mode
([#&#8203;6458](https://togithub.com/mantinedev/mantine/issues/6458))
- `[@mantine/core]` ActionIcon: Fix loading styles inconsistency with
Button component
([#&#8203;6460](https://togithub.com/mantinedev/mantine/issues/6460))
- `[@mantine/charts]` PieChart: Fix key error for duplicated `name` data
([#&#8203;6067](https://togithub.com/mantinedev/mantine/issues/6067))
- `[@mantine/core]` Modal: Fix `removeScrollProps.ref` not being
compatible with React 19
([#&#8203;6446](https://togithub.com/mantinedev/mantine/issues/6446))
- `[@mantine/core]` TagsInput: Fix `selectFirstOptionOnChange` prop not
working
([#&#8203;6337](https://togithub.com/mantinedev/mantine/issues/6337))
- `[@mantine/hooks]` use-eye-dropper: Fix Opera being incorrectly
detected as a supported browser
([#&#8203;6307](https://togithub.com/mantinedev/mantine/issues/6307))
- `[@mantine/core]` Fix `:host` selector now working correctly in
`cssVariablesSelector` of MantineProvider
([#&#8203;6404](https://togithub.com/mantinedev/mantine/issues/6404))
- `[@mantine/core]` TagsInput: Fix `onChange` being called twice when
Enter key is pressed in some cases
([#&#8203;6416](https://togithub.com/mantinedev/mantine/issues/6416))
- `[@mantine/modals]` Fix Modal overrides type augmentation not working
with TypeScript 5.5
([#&#8203;6443](https://togithub.com/mantinedev/mantine/issues/6443))
- `[@mantine/core]` Tree: Fix `levelOffset` prop being added to the root
DOM element
([#&#8203;6461](https://togithub.com/mantinedev/mantine/issues/6461))

##### New Contributors

- [@&#8203;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)
- [@&#8203;florisdg](https://togithub.com/florisdg) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6443](https://togithub.com/mantinedev/mantine/pull/6443)
- [@&#8203;snlacks](https://togithub.com/snlacks) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6425](https://togithub.com/mantinedev/mantine/pull/6425)
- [@&#8203;lid0a](https://togithub.com/lid0a) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6415](https://togithub.com/mantinedev/mantine/pull/6415)
- [@&#8203;Knamer95](https://togithub.com/Knamer95) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6416](https://togithub.com/mantinedev/mantine/pull/6416)
- [@&#8203;yyytae0](https://togithub.com/yyytae0) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6404](https://togithub.com/mantinedev/mantine/pull/6404)
- [@&#8203;toanxyz](https://togithub.com/toanxyz) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6388](https://togithub.com/mantinedev/mantine/pull/6388)
- [@&#8203;viktorkasap](https://togithub.com/viktorkasap) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6307](https://togithub.com/mantinedev/mantine/pull/6307)
- [@&#8203;alexlapp](https://togithub.com/alexlapp) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6337](https://togithub.com/mantinedev/mantine/pull/6337)
- [@&#8203;brycefranzen](https://togithub.com/brycefranzen) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6446](https://togithub.com/mantinedev/mantine/pull/6446)
- [@&#8203;marcobiedermann](https://togithub.com/marcobiedermann) made
their first contribution in
[https://github.com/mantinedev/mantine/pull/6442](https://togithub.com/mantinedev/mantine/pull/6442)
- [@&#8203;mullwar](https://togithub.com/mullwar) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6067](https://togithub.com/mantinedev/mantine/pull/6067)
- [@&#8203;gruschis](https://togithub.com/gruschis) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6400](https://togithub.com/mantinedev/mantine/pull/6400)
- [@&#8203;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**:
mantinedev/mantine@7.11.0...7.11.1

</details>

---

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

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/likec4/likec4).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40MjEuOSIsInVwZGF0ZWRJblZlciI6IjM3LjQyMS45IiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyJkZXBlbmRlbmNpZXMiXX0=-->
@thearyadev thearyadev mentioned this pull request Jul 25, 2024
Merged
github-merge-queue bot referenced this pull request in dotkom/monoweb Aug 20, 2024
@renovate
Update mantine monorepo to v7.12.1 (#959)
b332ff7 
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@mantine/core](https://mantine.dev/)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/core))
| [`7.4.1` ->
`7.12.1`](https://renovatebot.com/diffs/npm/@mantine%2fcore/7.4.1/7.12.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fcore/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fcore/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fcore/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fcore/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
| [@mantine/dates](https://mantine.dev/dates/getting-started/)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/dates))
| [`7.4.1` ->
`7.12.1`](https://renovatebot.com/diffs/npm/@mantine%2fdates/7.4.1/7.12.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fdates/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fdates/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fdates/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fdates/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
| [@mantine/hooks](https://mantine.dev)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/hooks))
| [`7.4.1` ->
`7.12.1`](https://renovatebot.com/diffs/npm/@mantine%2fhooks/7.4.1/7.12.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fhooks/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fhooks/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fhooks/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fhooks/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
| [@mantine/modals](https://mantine.dev/x/modals/)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/modals))
| [`7.4.1` ->
`7.12.1`](https://renovatebot.com/diffs/npm/@mantine%2fmodals/7.4.1/7.12.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fmodals/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fmodals/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fmodals/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fmodals/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
| [@mantine/notifications](https://mantine.dev)
([source](https://togithub.com/mantinedev/mantine/tree/HEAD/packages/@mantine/notifications))
| [`7.4.1` ->
`7.12.1`](https://renovatebot.com/diffs/npm/@mantine%2fnotifications/7.4.1/7.12.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@mantine%2fnotifications/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mantine%2fnotifications/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mantine%2fnotifications/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mantine%2fnotifications/7.4.1/7.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>mantinedev/mantine (@&#8203;mantine/core)</summary>

###
[`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
([#&#8203;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
([#&#8203;6639](https://togithub.com/mantinedev/mantine/issues/6639))
- `[@mantine/core]` Switch: Fix Switch shrinking when large label or
description is used
([#&#8203;6531](https://togithub.com/mantinedev/mantine/issues/6531))
- `[@mantine/core]` Combobox: Fix `Combobox.Search` overflow when
`ScrollArea` is used in the dropdown
([#&#8203;6562](https://togithub.com/mantinedev/mantine/issues/6562))
- `[@mantine/core]` Accordion: Add missing `withProps` function
([#&#8203;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
([#&#8203;6565](https://togithub.com/mantinedev/mantine/issues/6565))
- `[@mantine/core]` PinInput: Allow passing props to individual input
elements depending on index with `getInputProps`
([#&#8203;6588](https://togithub.com/mantinedev/mantine/issues/6588))
- `[@mantine/charts]`: Fix LineChart Legend and Tooltip to support
nested names
([#&#8203;6536](https://togithub.com/mantinedev/mantine/issues/6536))
- `[@mantine/core]` Tooltip: Add missing `Tooltip.Group.extend` function
([#&#8203;6576](https://togithub.com/mantinedev/mantine/issues/6576))
- `[@mantine/spotlight]` Fix `limit` prop not working correctly with
actions groups
([#&#8203;6632](https://togithub.com/mantinedev/mantine/issues/6632))
- `[@mantine/core]` Badge: Fix text overflow not being handled correctly
([#&#8203;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
([#&#8203;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
([#&#8203;6622](https://togithub.com/mantinedev/mantine/issues/6622))
- `[@mantine/core]` TagsInput: Fix `onKeyDown` prop not working
([#&#8203;6569](https://togithub.com/mantinedev/mantine/issues/6569))
- `[@mantine/charts]` PieChart: Fix `valueFormatter` not working on
outside labels
([#&#8203;6616](https://togithub.com/mantinedev/mantine/issues/6616))
- `[@mantine/core]` Popover: Fix `apply` function of `size` middleware
not being handled correctly
([#&#8203;6598](https://togithub.com/mantinedev/mantine/issues/6598))
- `[@mantine/core]` Chip: Fix incorrect checked padding for `size="xl"`
([#&#8203;6586](https://togithub.com/mantinedev/mantine/issues/6586))
- `[@mantine/dates]` TimeInput: Fix incorrect focus styles of am/pm
input
([#&#8203;6579](https://togithub.com/mantinedev/mantine/issues/6579))
- `[@mantine/hook]` use-os: Fix incorrect iPadOS detection
([#&#8203;6535](https://togithub.com/mantinedev/mantine/issues/6535))
- `[@mantine/core]` DatePickerInput: Fix incorrect `aria-label` being
set on the input element
([#&#8203;6530](https://togithub.com/mantinedev/mantine/issues/6530))
- `[@mantine/core]` Menu: Fix incorrect Escape key handling inside Modal
([#&#8203;6580](https://togithub.com/mantinedev/mantine/issues/6580))

##### New Contributors

- [@&#8203;vorant94](https://togithub.com/vorant94) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6530](https://togithub.com/mantinedev/mantine/pull/6530)
- [@&#8203;hajimism](https://togithub.com/hajimism) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6539](https://togithub.com/mantinedev/mantine/pull/6539)
- [@&#8203;ziimakc](https://togithub.com/ziimakc) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6561](https://togithub.com/mantinedev/mantine/pull/6561)
- [@&#8203;th3fallen](https://togithub.com/th3fallen) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6579](https://togithub.com/mantinedev/mantine/pull/6579)
- [@&#8203;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)
- [@&#8203;bastiankistner](https://togithub.com/bastiankistner) made
their first contribution in
[https://github.com/mantinedev/mantine/pull/6607](https://togithub.com/mantinedev/mantine/pull/6607)
- [@&#8203;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)
- [@&#8203;michaelperros](https://togithub.com/michaelperros) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6622](https://togithub.com/mantinedev/mantine/pull/6622)
- [@&#8203;risen228](https://togithub.com/risen228) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6625](https://togithub.com/mantinedev/mantine/pull/6625)
- [@&#8203;ddoemonn](https://togithub.com/ddoemonn) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6629](https://togithub.com/mantinedev/mantine/pull/6629)
- [@&#8203;yorkeJohn](https://togithub.com/yorkeJohn) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6632](https://togithub.com/mantinedev/mantine/pull/6632)
- [@&#8203;raulfpl](https://togithub.com/raulfpl) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6639](https://togithub.com/mantinedev/mantine/pull/6639)
- [@&#8203;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 [@&#8203;mantine/notifications
package](https://mantine.dev/x/notifications):

```tsx
import { Button } from '@&#8203;mantine/core';
import { notifications } from '@&#8203;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) => (
    <Button
      key={position}
      onClick={() =>
        notifications.show({
          title: `Notification at ${position}`,
          message: `Notification at ${position} message`,
          position,
        })
      }
    >
      {position}
    </Button>
  ));

  return <Group>{buttons}</Group>;
}
```

#### Subscribe to notifications state

You can now subscribe to notifications state changes with
`useNotifications` hook:

```tsx
import { Button } from '@&#8203;mantine/core';
import { notifications } from '@&#8203;mantine/notifications';

function Demo() {
  return (
    <Button
      onClick={() =>
        notifications.show({
          title: 'Default notification',
          message: 'Do not forget to star Mantine on GitHub! 🌟',
        })
      }
    >
      Show notification
    </Button>
  );
}
```

#### SemiCircleProgress component

New [SemiCircleProgress](https://mantine.dev/core/semi-circle-progress)
component:

```tsx
import { SemiCircleProgress } from '@&#8203;mantine/core';

function Demo() {
  return (
    <SemiCircleProgress
      fillDirection="left-to-right"
      orientation="up"
      filledSegmentColor="blue"
      size={200}
      thickness={12}
      value={40}
      label="Label"
    />
  );
}
```

#### Tree checked state

[Tree](https://mantine.dev/core/tree) component now supports checked
state:

```tsx
import { IconChevronDown } from '@&#8203;tabler/icons-react';
import { Checkbox, Group, RenderTreeNodePayload, Tree } from '@&#8203;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 (
    <Group gap="xs" {...elementProps}>
      <Checkbox.Indicator
        checked={checked}
        indeterminate={indeterminate}
        onClick={() => (!checked ? tree.checkNode(node.value) : tree.uncheckNode(node.value))}
      />

      <Group gap={5} onClick={() => tree.toggleExpanded(node.value)}>
        <span>{node.label}</span>

        {hasChildren && (
          <IconChevronDown
            size={14}
            style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
          />
        )}
      </Group>
    </Group>
  );
};

function Demo() {
  return <Tree data={data} levelOffset={23} expandOnClick={false} renderNode={renderTreeNode} />;
}
```

#### 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
`[email protected]`.

```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
([#&#8203;6477](https://togithub.com/mantinedev/mantine/issues/6477))
- `[@mantine/core]` Tooltip: Add `defaultOpened` prop support
([#&#8203;6466](https://togithub.com/mantinedev/mantine/issues/6466))
- `[@mantine/core]` PinInput: Fix incorrect rtl logic
([#&#8203;6382](https://togithub.com/mantinedev/mantine/issues/6382))
- `[@mantine/core]` Popover: Fix `floatingStrategy="fixed"` not having
`position:fixed` styles
([#&#8203;6419](https://togithub.com/mantinedev/mantine/issues/6419))
- `[@mantine/spotlight]` Fix spotlight not working correctly with shadow
DOM
([#&#8203;6400](https://togithub.com/mantinedev/mantine/issues/6400))
- `[@mantine/form]` Fix `onValuesChange` using stale values
([#&#8203;6392](https://togithub.com/mantinedev/mantine/issues/6392))
- `[@mantine/carousel]` Fix `onSlideChange` using stale props values
([#&#8203;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
([#&#8203;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
([#&#8203;6468](https://togithub.com/mantinedev/mantine/issues/6468))
- `[@mantine/dates]` DatePickerInput: Fix `highlightToday` not working
([#&#8203;6471](https://togithub.com/mantinedev/mantine/issues/6471))
- `[@mantine/core]` NumberInput: Fix incorrect handling of numbers
larger than max safe integer on blur
([#&#8203;6407](https://togithub.com/mantinedev/mantine/issues/6407))
- `[@mantine/core]` Tooltip: Fix tooltip arrow being incompatible with
headless mode
([#&#8203;6458](https://togithub.com/mantinedev/mantine/issues/6458))
- `[@mantine/core]` ActionIcon: Fix loading styles inconsistency with
Button component
([#&#8203;6460](https://togithub.com/mantinedev/mantine/issues/6460))
- `[@mantine/charts]` PieChart: Fix key error for duplicated `name` data
([#&#8203;6067](https://togithub.com/mantinedev/mantine/issues/6067))
- `[@mantine/core]` Modal: Fix `removeScrollProps.ref` not being
compatible with React 19
([#&#8203;6446](https://togithub.com/mantinedev/mantine/issues/6446))
- `[@mantine/core]` TagsInput: Fix `selectFirstOptionOnChange` prop not
working
([#&#8203;6337](https://togithub.com/mantinedev/mantine/issues/6337))
- `[@mantine/hooks]` use-eye-dropper: Fix Opera being incorrectly
detected as a supported browser
([#&#8203;6307](https://togithub.com/mantinedev/mantine/issues/6307))
- `[@mantine/core]` Fix `:host` selector now working correctly in
`cssVariablesSelector` of MantineProvider
([#&#8203;6404](https://togithub.com/mantinedev/mantine/issues/6404))
- `[@mantine/core]` TagsInput: Fix `onChange` being called twice when
Enter key is pressed in some cases
([#&#8203;6416](https://togithub.com/mantinedev/mantine/issues/6416))
- `[@mantine/modals]` Fix Modal overrides type augmentation not working
with TypeScript 5.5
([#&#8203;6443](https://togithub.com/mantinedev/mantine/issues/6443))
- `[@mantine/core]` Tree: Fix `levelOffset` prop being added to the root
DOM element
([#&#8203;6461](https://togithub.com/mantinedev/mantine/issues/6461))

##### New Contributors

- [@&#8203;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)
- [@&#8203;florisdg](https://togithub.com/florisdg) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6443](https://togithub.com/mantinedev/mantine/pull/6443)
- [@&#8203;snlacks](https://togithub.com/snlacks) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6425](https://togithub.com/mantinedev/mantine/pull/6425)
- [@&#8203;lid0a](https://togithub.com/lid0a) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6415](https://togithub.com/mantinedev/mantine/pull/6415)
- [@&#8203;Knamer95](https://togithub.com/Knamer95) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6416](https://togithub.com/mantinedev/mantine/pull/6416)
- [@&#8203;yyytae0](https://togithub.com/yyytae0) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6404](https://togithub.com/mantinedev/mantine/pull/6404)
- [@&#8203;toanxyz](https://togithub.com/toanxyz) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6388](https://togithub.com/mantinedev/mantine/pull/6388)
- [@&#8203;viktorkasap](https://togithub.com/viktorkasap) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6307](https://togithub.com/mantinedev/mantine/pull/6307)
- [@&#8203;alexlapp](https://togithub.com/alexlapp) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6337](https://togithub.com/mantinedev/mantine/pull/6337)
- [@&#8203;brycefranzen](https://togithub.com/brycefranzen) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6446](https://togithub.com/mantinedev/mantine/pull/6446)
- [@&#8203;marcobiedermann](https://togithub.com/marcobiedermann) made
their first contribution in
[https://github.com/mantinedev/mantine/pull/6442](https://togithub.com/mantinedev/mantine/pull/6442)
- [@&#8203;mullwar](https://togithub.com/mullwar) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6067](https://togithub.com/mantinedev/mantine/pull/6067)
- [@&#8203;gruschis](https://togithub.com/gruschis) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6400](https://togithub.com/mantinedev/mantine/pull/6400)
- [@&#8203;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 '@&#8203;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` */}
      <LinkButton href="https://mantine.dev">Mantine website</LinkButton>

      {/* Component props override default props defined in `withProps` */}
      <PhoneInput placeholder="Personal phone" />
    </>
  );
}
```

##### 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 '@&#8203;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) => <Avatar key={name} name={name} color="initials" />);
  return <Group>{avatars}</Group>;
}
```

##### BubbleChart component

New [BubbleChart](https://mantine.dev/charts/bubble-chart) component:

```tsx
import { BubbleChart } from '@&#8203;mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <BubbleChart
      h={60}
      data={data}
      range={[16, 225]}
      label="Sales/hour"
      color="lime.6"
      dataKey={{ x: 'hour', y: 'index', z: 'value' }}
    />
  );
}
```

##### 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 '@&#8203;mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <BarChart
      h={300}
      data={data}
      dataKey="item"
      type="waterfall"
      series={[{ name: 'Effective tax rate in %', color: 'blue' }]}
      withLegend
    />
  );
}
```

##### 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 '@&#8203;mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <LineChart
      h={300}
      data={data}
      series={[{ name: 'temperature', label: 'Avg. Temperature' }]}
      dataKey="date"
      type="gradient"
      gradientStops={[
        { offset: 0, color: 'red.6' },
        { offset: 20, color: 'orange.6' },
        { offset: 40, color: 'yellow.5' },
        { offset: 70, color: 'lime.5' },
        { offset: 80, color: 'cyan.5' },
        { offset: 100, color: 'blue.5' },
      ]}
      strokeWidth={5}
      curveType="natural"
      yAxisProps={{ domain: [-25, 40] }}
      valueFormatter={(value) => `${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 '@&#8203;mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <LineChart
      h={300}
      data={data}
      dataKey="name"
      withRightYAxis
      yAxisLabel="uv"
      rightYAxisLabel="pv"
      series={[
        { name: 'uv', color: 'pink.6' },
        { name: 'pv', color: 'cyan.6', yAxisId: 'right' },
      ]}
    />
  );
}
```

##### RadarChart legend

[RadarChart](https://mantine.dev/charts/radar-chart) component now
supports legend:

```tsx
import { RadarChart } from '@&#8203;mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <RadarChart
      h={300}
      data={data}
      dataKey="product"
      withPolarRadiusAxis
      withLegend
      series={[
        { name: 'Sales January', color: 'blue.6', opacity: 0.2 },
        { name: 'Sales February', color: 'orange.6', opacity: 0.2 },
      ]}
    />
  );
}
```

##### 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 '@&#8203;mantine/core';

function Demo() {
  return (
    <>
      <TagsInput
        label="Value IS accepted on blur"
        placeholder="Enter text, then blur the field"
        data={['React', 'Angular', 'Svelte']}
        acceptValueOnBlur
      />
      <TagsInput
        label="Value IS NOT accepted on blur"
        placeholder="Enter text, then blur the field"
        data={['React', 'Angular', 'Svelte']}
        acceptValueOnBlur={false}
        mt="md"
      />
    </>
  );
}
```

##### 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 '@&#8203;mantine/core';

export function Demo() {
  const [opened, setOpened] = useState(false);

  return (
    <Flex maw={200} pos="relative" justify="center" m="auto">
      <Button onClick={() => setOpened(true)}>Open dropdown</Button>

      <Transition mounted={opened} transition="pop" enterDelay={500} exitDelay={300}>
        {(transitionStyle) => (
          <Paper
            shadow="md"
            p="xl"
            h={120}
            pos="absolute"
            inset={0}
            bottom="auto"
            onClick={() => setOpened(false)}
            style={{ ...transitionStyle, zIndex: 1 }}
          >
            Click to close
          </Paper>
        )}
      </Transition>
    </Flex>
  );
}
```

##### 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
([#&#8203;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
([#&#8203;6328](https://togithub.com/mantinedev/mantine/issues/6328))
- `[@mantine/core]` Fix incorrect color resolving logic in border style
prop resolver
([#&#8203;6326](https://togithub.com/mantinedev/mantine/issues/6326))
- `[@mantine/modals]` Fix incorrect styles of the confirmation modal
when it is used without any description
([#&#8203;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
([#&#8203;6354](https://togithub.com/mantinedev/mantine/issues/6354))
- `[@mantine/core]` Combobox: Fix clicks on footer and header triggering
dropdown close
([#&#8203;6344](https://togithub.com/mantinedev/mantine/issues/6344))
- `[@mantine/core]` PasswordInput: Fix `withErrorStyles` prop being
passed to the DOM element
([#&#8203;6348](https://togithub.com/mantinedev/mantine/issues/6348))

##### New Contributors

- [@&#8203;stefanzmf](https://togithub.com/stefanzmf) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6344](https://togithub.com/mantinedev/mantine/pull/6344)
- [@&#8203;Prasiddha22](https://togithub.com/Prasiddha22) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6325](https://togithub.com/mantinedev/mantine/pull/6325)
- [@&#8203;ShionTerunaga](https://togithub.com/ShionTerunaga) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6332](https://togithub.com/mantinedev/mantine/pull/6332)
- [@&#8203;djdduty](https://togithub.com/djdduty) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6326](https://togithub.com/mantinedev/mantine/pull/6326)
- [@&#8203;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)
- [@&#8203;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
([#&#8203;6231](https://togithub.com/mantinedev/mantine/issues/6231))
- `[@mantine/form]` Fix `form.setFieldError` called inside
`form.onSubmit` not working correctly in some cases
([#&#8203;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
([#&#8203;6278](https://togithub.com/mantinedev/mantine/issues/6278))
- `[@mantine/core]` Fix `bd` style prop not being applied in some
components
([#&#8203;6282](https://togithub.com/mantinedev/mantine/issues/6282))
- `[@mantine/core]` NumberInput: Fix incorrect leading zeros handling
([#&#8203;6232](https://togithub.com/mantinedev/mantine/issues/6232))
- `[@mantine/core]` NumberInput: Fix incorrect logic while editing
decimal values
([#&#8203;6232](https://togithub.com/mantinedev/mantine/issues/6232))
- `[@mantine/core]` ScrollArea: Fix scrollbar flickering on reveal with
hover and scroll types
([#&#8203;6218](https://togithub.com/mantinedev/mantine/issues/6218))
- `[@mantine/hooks]` Update use-throttled-\* hooks to emit updates on
trailing edges
([#&#8203;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

- [@&#8203;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)
- [@&#8203;dfaust](https://togithub.com/dfaust) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6257](https://togithub.com/mantinedev/mantine/pull/6257)
- [@&#8203;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 '@&#8203;tabler/icons-react';
import { Group, RenderTreeNodePayload, Tree } from '@&#8203;mantine/core';
import { CssIcon, NpmIcon, TypeScriptCircleIcon } from '@&#8203;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 <NpmIcon size={14} />;
  }

  if (name.endsWith('.ts') || name.endsWith('.tsx') || name.endsWith('tsconfig.json')) {
    return <TypeScriptCircleIcon size={14} />;
  }

  if (name.endsWith('.css')) {
    return <CssIcon size={14} />;
  }

  if (isFolder) {
    return expanded ? (
      <IconFolderOpen color="var(--mantine-color-yellow-9)" size={14} stroke={2.5} />
    ) : (
      <IconFolder color="var(--mantine-color-yellow-9)" size={14} stroke={2.5} />
    );
  }

  return null;
}

function Leaf({ node, expanded, hasChildren, elementProps }: RenderTreeNodePayload) {
  return (
    <Group gap={5} {...elementProps}>
      <FileIcon name={node.value} isFolder={hasChildren} expanded={expanded} />
      <span>{node.label}</span>
    </Group>
  );
}

function Demo() {
  return (
    <Tree
      classNames={classes}
      selectOnClick
      clearSelectionOnOutsideClick
      data={data}
      renderNode={(payload) => <Leaf {...payload} />}
    />
  );
}
```

##### 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 '@&#8203;mantine/core';
import { isEmail, isNotEmpty, useForm } from '@&#8203;mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: {
      name: '',
      email: '',
    },

    validate: {
      name: isNotEmpty('Name is required'),
      email: isEmail('Invalid email'),
    },
  });

  return (
    <form
      onSubmit={form.onSubmit(
        (values) => console.log(values),
        (errors) => {
          const firstErrorPath = Object.keys(errors)[0];
          form.getInputNode(firstErrorPath)?.focus();
        }
      )}
    >
      <TextInput
        withAsterisk
        label="Your name"
        placeholder="Your name"
        key={form.key('name')}
        {...form.getInputProps('name')}
      />

      <TextInput
        withAsterisk
        label="Your email"
        placeholder="[email protected]"
        key={form.key('email')}
        {...form.getInputProps('email')}
      />

      <Group justify="flex-end" mt="md">
        <Button type="submit">Submit</Button>
      </Group>
    </form>
  );
}
```

##### 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 '@&#8203;mantine/core';

function Demo() {
  return (
    // Wrapper div is added for demonstration purposes only,
    // it is not required in real projects
    <div style={{ resize: 'horizontal', overflow: 'hidden', maxWidth: '100%' }}>
      <SimpleGrid
        type="container"
        cols={{ base: 1, '300px': 2, '500px': 5 }}
        spacing={{ base: 10, '300px': 'xl' }}
      >
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
      </SimpleGrid>
    </div>
  );
}
```

##### 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 '@&#8203;mantine/core';

function Demo() {
  return (
    <Group>
      <Checkbox.Indicator />
      <Checkbox.Indicator checked />
      <Checkbox.Indicator indeterminate />
      <Checkbox.Indicator disabled />
      <Checkbox.Indicator disabled checked />
      <Checkbox.Indicator disabled indeterminate />
    </Group>
  );
}
```

`Radio.Indicator` component:

```tsx
import { Group, Radio } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Group>
      <Radio.Indicator />
      <Radio.Indicator checked />
      <Radio.Indicator disabled />
      <Radio.Indicator disabled checked />
    </Group>
  );
}
```

##### 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 '@&#8203;mantine/core';
import classes from './Demo.module.css';

function Demo() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox.Card
      className={classes.root}
      radius="md"
      checked={checked}
      onClick={() => setChecked((c) => !c)}
    >
      <Group wrap="nowrap" align="flex-start">
        <Checkbox.Indicator />
        <div>
          <Text className={classes.label}>@&#8203;mantine/core</Text>
          <Text className={classes.description}>
            Core components library: inputs, buttons, overlays, etc.
          </Text>
        </div>
      </Group>
    </Checkbox.Card>
  );
}
```

`Checkbox.Card` component with `Checkbox.Group`:

```tsx
import { useState } from 'react';
import { Checkbox, Group, Stack, Text } from '@&#8203;mantine/core';
import classes from './Demo.module.css';

const data = [
  {
    name: '@&#8203;mantine/core',
    description: 'Core components library: inputs, buttons, overlays, etc.',
  },
  { name: '@&#8203;mantine/hooks', description: 'Collection of reusable hooks for React applications.' },
  { name: '@&#8203;mantine/notifications', description: 'Notifications system' },
];

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

  const cards = data.map((item) => (
    <Checkbox.Card className={classes.root} radius="md" value={item.name} key={item.name}>
      <Group wrap="nowrap" align="flex-start">
        <Checkbox.Indicator />
        <div>
          <Text className={classes.label}>{item.name}</Text>
          <Text className={classes.description}>{item.description}</Text>
        </div>
      </Group>
    </Checkbox.Card>
  ));

  return (
    <>
      <Checkbox.Group
        value={value}
        onChange={setValue}
        label="Pick packages to install"
        description="Choose all packages that you will need in your application"
      >
        <Stack pt="md" gap="xs">
          {cards}
        </Stack>
      </Checkbox.Group>

      <Text fz="xs" mt="md">
        CurrentValue: {value.join(', ') || '–'}
      </Text>
    </>
  );
}
```

`Radio.Card` component:

```tsx
import { useState } from 'react';
import { Group, Radio, Text } from '@&#8203;mantine/core';
import classes from './Demo.module.css';

function Demo() {
  const [checked, setChecked] = useState(false);

  return (
    <Radio.Card
      className={classes.root}
      radius="md"
      checked={checked}
      onClick={() => setChecked((c) => !c)}
    >
      <Group wrap="nowrap" align="flex-start">
        <Radio.Indicator />
        <div>
          <Text className={classes.label}>@&#8203;mantine/core</Text>
          <Text className={classes.description}>
            Core components library: inputs, buttons, overlays, etc.
          </Text>
        </div>
      </Group>
    </Radio.Card>
  );
}
```

`Radio.Card` component with `Radio.Group`:

```tsx
import { useState } from 'react';
import { Group, Radio, Stack, Text } from '@&#8203;mantine/core';
import classes from './Demo.module.css';

const data = [
  {
    name: '@&#8203;mantine/core',
    description: 'Core components library: inputs, buttons, overlays, etc.',
  },
  { name: '@&#8203;mantine/hooks', description: 'Collection of reusable hooks for React applications.' },
  { name: '@&#8203;mantine/notifications', description: 'Notifications system' },
];

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

  const cards = data.map((item) => (
    <Radio.Card className={classes.root} radius="md" value={item.name} key={item.name}>
      <Group wrap="nowrap" align="flex-start">
        <Radio.Indicator />
        <div>
          <Text className={classes.label}>{item.name}</Text>
          <Text className={classes.description}>{item.description}</Text>
        </div>
      </Group>
    </Radio.Card>
  ));

  return (
    <>
      <Radio.Group
        value={value}
        onChange={setValue}
        label="Pick one package to install"
        description="Choose a package that you will need in your application"
      >
        <Stack pt="md" gap="xs">
          {cards}
        </Stack>
      </Radio.Group>

      <Text fz="xs" mt="md">
        CurrentValue: {value || '–'}
      </Text>
    </>
  );
}
```

##### 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 '@&#8203;mantine/core';

function Demo() {
  return <Box bd="1px solid red.5" />;
}
```

###
[`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
([#&#8203;6204](https://togithub.com/mantinedev/mantine/issues/6204))
- `[@mantine/core]` NavLink: Add react-router support to display active
route
([#&#8203;6180](https://togithub.com/mantinedev/mantine/issues/6180))
- `[@mantine/core]` Fix `nonce` attribute not being set on `<style />`
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
[@&#8203;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
([#&#8203;6202](https://togithub.com/mantinedev/mantine/issues/6202))
- `[@mantine/core]` TagsInput: Fix existing search value being ignored
in `onPaste` even handler
([#&#8203;6073](https://togithub.com/mantinedev/mantine/issues/6073))
- `[@mantine/core]` TagsInput: Improve `clearable` prop logic related to
dropdown
([#&#8203;6115](https://togithub.com/mantinedev/mantine/issues/6115))

##### New Contributors

- [@&#8203;corydeppen](https://togithub.com/corydeppen) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6180](https://togithub.com/mantinedev/mantine/pull/6180)
- [@&#8203;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)
- [@&#8203;iguit0](https://togithub.com/iguit0) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6233](https://togithub.com/mantinedev/mantine/pull/6233)
- [@&#8203;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
([#&#8203;6129](https://togithub.com/mantinedev/mantine/issues/6129))
- `[@mantine/core]` NumberInput: Fix incorrect `allowNegative` handling
with up/down arrows
([#&#8203;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
([#&#8203;6123](https://togithub.com/mantinedev/mantine/issues/6123))
- `[@mantine/core]` Modal: Prevent `onClose` from being called when
modal is not opened
([#&#8203;6156](https://togithub.com/mantinedev/mantine/issues/6156))
- `[@mantine/core]` PasswordInput: Fix duplicated password visibility
icon in Edge browser
([#&#8203;6126](https://togithub.com/mantinedev/mantine/issues/6126))
- `[@mantine/hooks]` use-hash: Fix hash value not being updated
correctly
([#&#8203;6145](https://togithub.com/mantinedev/mantine/issues/6145))
- `[@mantine/emotion]` Fix incorrect transform logic that was causing
extra hooks to render
([#&#8203;6159](https://togithub.com/mantinedev/mantine/issues/6159))

##### New Contributors

- [@&#8203;lachtanek](https://togithub.com/lachtanek) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6145](https://togithub.com/mantinedev/mantine/pull/6145)
- [@&#8203;hsskey](https://togithub.com/hsskey) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6156](https://togithub.com/mantinedev/mantine/pull/6156)
- [@&#8203;ataldev](https://togithub.com/ataldev) made their first
contribution in
[https://github.com/mantinedev/mantine/pull/6198](https://togithub.com/mantinedev/mantine/pull/6198)
- [@&#8203;OliverWales](https://togithub.com/OliverWales) made their
first contribution in
[https://github.com/mantinedev/mantine/pull/6188](https://togithub.com/mantinedev/mantine/pull/6188)
- [@&#8203;AustinWildgrube](https://togithub.com/AustinWildgrube) made
their first contribution in
[https://github.com/mantinedev/mantine/pull/6170](https://togithub.com/mantinedev/mantine/pull/6170)
- [@&#8203;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)

##### [@&#8203;mantine/emotion](https://togithub.com/mantine/emotion)
package

New [@&#8203;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 '@&#8203;mantine/core';
import { createStyles } from '@&#8203;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 (
    <div className={classes.wrapper}>
      <div className={classes.child}>createStyles demo</div>
    </div>
  );
}
```

##### 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 '@&#8203;mantine/core';
import { isEmail, useField } from '@&#8203;mantine/form';

function Demo() {
  const field = useField({
    initialValue: '',
    validateOnChange: true,
    validate: isEmail('Invalid email'),
  });

  return <TextInput {...field.getInputProps()} label="Email" placeholder="Enter your email" />;
}
```

`use-field` hook also supports async validation:

```tsx
import { Button, Loader, TextInput } from '@&#8203;mantine/core';
import { useField } from '@&#8203;mantine/form';

function validateAsync(value: string): Promise<string | null> {
  return new Promise((resolve) => {
    window.setTimeout(() => {
      resolve(value === 'mantine' ? null : 'Value must be "mantine"');
    }, 800);
  });
}

function Demo() {
  const field = useField({
    initialValue: '',
    validate: validateAsync,
  });

  return (
    <>
      <TextInput
        {...field.getInputProps()}
        label="Enter 'mantine'"
        placeholder="Enter 'mantine'"
        rightSection={field.isValidating ? <Loader size={18} /> : null}
        mb="md"
      />
      <Button onClick={field.validate}>Validate async</Button>
    </>
  );
}
```

##### 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 {
  @&#8203;mixin clearfix;
  @&#8203;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

</details>

---

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

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR was generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View the
[repository job log](https://developer.mend.io/github/dotkom/monoweb).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOC4yNi4xIiwidXBkYXRlZEluVmVyIjoiMzguMjYuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
@Drasticmitten Drasticmitten mentioned this pull request Sep 11, 2024
Open
This was referenced Sep 12, 2024
Closed
Closed
@Drasticmitten Drasticmitten mentioned this pull request Sep 19, 2024
Open
@renovate renovate bot mentioned this pull request Oct 3, 2024
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@alexlapp @rtivital