Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(deps): update mantine & related to v6 (major) (#45)
[](https://renovatebot.com)
This PR contains the following updates:
| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@mantine/carousel](https://mantine.dev/others/carousel/) ([source](https://togithub.com/mantinedev/mantine)) | [`5.10.5` -> `6.0.13`](https://renovatebot.com/diffs/npm/@mantine%2fcarousel/5.10.5/6.0.13) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
| [@mantine/core](https://mantine.dev/) ([source](https://togithub.com/mantinedev/mantine)) | [`5.10.5` -> `6.0.13`](https://renovatebot.com/diffs/npm/@mantine%2fcore/5.10.5/6.0.13) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
| [@mantine/dates](https://mantine.dev/dates/getting-started/) ([source](https://togithub.com/mantinedev/mantine)) | [`5.10.5` -> `6.0.13`](https://renovatebot.com/diffs/npm/@mantine%2fdates/5.10.5/6.0.13) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
| [@mantine/dropzone](https://mantine.dev/others/dropzone/) ([source](https://togithub.com/mantinedev/mantine)) | [`5.10.5` -> `6.0.13`](https://renovatebot.com/diffs/npm/@mantine%2fdropzone/5.10.5/6.0.13) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
| [@mantine/form](https://mantine.dev/) ([source](https://togithub.com/mantinedev/mantine)) | [`5.10.5` -> `6.0.13`](https://renovatebot.com/diffs/npm/@mantine%2fform/5.10.5/6.0.13) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
| [@mantine/hooks](https://mantine.dev/) ([source](https://togithub.com/mantinedev/mantine)) | [`5.10.5` -> `6.0.13`](https://renovatebot.com/diffs/npm/@mantine%2fhooks/5.10.5/6.0.13) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
| [@mantine/modals](https://mantine.dev/others/modals/) ([source](https://togithub.com/mantinedev/mantine)) | [`5.10.5` -> `6.0.13`](https://renovatebot.com/diffs/npm/@mantine%2fmodals/5.10.5/6.0.13) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
| [@mantine/next](https://mantine.dev/) ([source](https://togithub.com/mantinedev/mantine)) | [`5.10.5` -> `6.0.13`](https://renovatebot.com/diffs/npm/@mantine%2fnext/5.10.5/6.0.13) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
| [@mantine/notifications](https://mantine.dev/others/notifications/) ([source](https://togithub.com/mantinedev/mantine)) | [`5.10.5` -> `6.0.13`](https://renovatebot.com/diffs/npm/@mantine%2fnotifications/5.10.5/6.0.13) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
| [@mantine/nprogress](https://mantine.dev/others/nprogress/) ([source](https://togithub.com/mantinedev/mantine)) | [`5.10.5` -> `6.0.13`](https://renovatebot.com/diffs/npm/@mantine%2fnprogress/5.10.5/6.0.13) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
| [@mantine/prism](https://mantine.dev/others/prism/) ([source](https://togithub.com/mantinedev/mantine)) | [`5.10.5` -> `6.0.13`](https://renovatebot.com/diffs/npm/@mantine%2fprism/5.10.5/6.0.13) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
| [@mantine/spotlight](https://mantine.dev/others/spotlight/) ([source](https://togithub.com/mantinedev/mantine)) | [`5.10.5` -> `6.0.13`](https://renovatebot.com/diffs/npm/@mantine%2fspotlight/5.10.5/6.0.13) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
| [@mantine/tiptap](https://mantine.dev/others/tiptap) ([source](https://togithub.com/mantinedev/mantine)) | [`5.10.5` -> `6.0.13`](https://renovatebot.com/diffs/npm/@mantine%2ftiptap/5.10.5/6.0.13) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
| [@mantine/utils](https://mantine.dev/) ([source](https://togithub.com/mantinedev/mantine)) | [`5.10.5` -> `6.0.13`](https://renovatebot.com/diffs/npm/@mantine%2futils/5.10.5/6.0.13) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) |
---
### Release Notes
<details>
<summary>mantinedev/mantine</summary>
### [`v6.0.13`](https://togithub.com/mantinedev/mantine/releases/tag/6.0.13)
#### What's Changed
- `[@mantine/dates]` Fix `nextIcon` and `previousIcon` props not passed to Calendar component ([#​4273](https://togithub.com/mantinedev/mantine/issues/4273))
- `[@mantine/core]` AppShell: Fix wrong padding when `navbarOffsetBreakpoint` and `asideOffsetBreakpoint` have the same value ([#​4281](https://togithub.com/mantinedev/mantine/issues/4281))
- `[@mantine/core]` Select: Fix unexpected horizontal scrollbar in items with long text ([#​4296](https://togithub.com/mantinedev/mantine/issues/4296))
- `[@mantine/core]` NumberInput: Fix missing disabled controls styles ([#​4314](https://togithub.com/mantinedev/mantine/issues/4314))
- `[@mantine/core]` Fix Select/MultiSelect scrolling page when `transitionProps` are set ([#​4327](https://togithub.com/mantinedev/mantine/issues/4327))
- `[@mantine/core]` Chip: Fix unexpected line break when children are not a plain string ([#​4328](https://togithub.com/mantinedev/mantine/issues/4328))
#### New Contributors
- [@​omegahm](https://togithub.com/omegahm) made their first contribution in [https://github.com/mantinedev/mantine/pull/4280](https://togithub.com/mantinedev/mantine/pull/4280)
- [@​ot07](https://togithub.com/ot07) made their first contribution in [https://github.com/mantinedev/mantine/pull/4290](https://togithub.com/mantinedev/mantine/pull/4290)
- [@​richardboehme](https://togithub.com/richardboehme) made their first contribution in [https://github.com/mantinedev/mantine/pull/4314](https://togithub.com/mantinedev/mantine/pull/4314)
- [@​andremonteiro95](https://togithub.com/andremonteiro95) made their first contribution in [https://github.com/mantinedev/mantine/pull/4273](https://togithub.com/mantinedev/mantine/pull/4273)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/6.0.11...6.0.13
### [`v6.0.11`](https://togithub.com/mantinedev/mantine/releases/tag/6.0.11)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/6.0.10...6.0.11)
##### What's Changed
- `[@mantine/core]` Improve inputs disabled styles handling inside `fieldset` elements ([#​4152](https://togithub.com/mantinedev/mantine/issues/4152))
- `[@mantine/core]` Badge: Expose `BadgeVariant` type ([#​4215](https://togithub.com/mantinedev/mantine/issues/4215))
- `[@mantine/core]` ThemeIcon: Expose `ThemeIconVariant` type ([#​4216](https://togithub.com/mantinedev/mantine/issues/4216))
- `[@mantine/core]` ColorInput: Add option to set eye dropper aria-label though prop ([#​4227](https://togithub.com/mantinedev/mantine/issues/4227))
- `[@mantine/core]` ColorPicker: Fix inaccurate numbers rounding in rgba and hex colors converters ([#​4238](https://togithub.com/mantinedev/mantine/issues/4238))
- `[@mantine/core]` MultiSelect: Fix layout shifts in Safari when input is focused ([#​4249](https://togithub.com/mantinedev/mantine/issues/4249))
- `[@mantine/core]` Rating: Add CSS color values support in `color` prop ([#​4251](https://togithub.com/mantinedev/mantine/issues/4251))
- `[@mantine/dates]` Add missing `nextIcon`/`previousIcon` types to all components ([#​4180](https://togithub.com/mantinedev/mantine/issues/4180))
##### New Contributors
- [@​thatanjan](https://togithub.com/thatanjan) made their first contribution in [https://github.com/mantinedev/mantine/pull/4248](https://togithub.com/mantinedev/mantine/pull/4248)
- [@​agong-coveo](https://togithub.com/agong-coveo) made their first contribution in [https://github.com/mantinedev/mantine/pull/4152](https://togithub.com/mantinedev/mantine/pull/4152)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/6.0.10...6.0.11
### [`v6.0.10`](https://togithub.com/mantinedev/mantine/releases/tag/6.0.10)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/6.0.9...6.0.10)
##### What's Changed
- `[@mantine/core]` Remove invalid `autocomplete` attribute from JsonInput and ColorInput ([#​4140](https://togithub.com/mantinedev/mantine/issues/4140))
- `[@mantine/core]` Tabs: Fix `aria-controls` set to id of panel that does not exist ([#​4142](https://togithub.com/mantinedev/mantine/issues/4142))
- `[@mantine/core]` Input: Add icon offset to unstyled input variant ([#​4119](https://togithub.com/mantinedev/mantine/issues/4119))
- `[@mantine/core]` Popover: Fix incorrect `closeOnClickOutside` logic ([#​4148](https://togithub.com/mantinedev/mantine/issues/4148))
- `[@mantine/dates]` Add callback function support to `weekdayFormat` prop ([#​4156](https://togithub.com/mantinedev/mantine/issues/4156))
- `[@mantine/core]` MultiSelect: Fix incorrect hovered item index when `disableSelectedItemFiltering` is set and last item is selected ([#​4168](https://togithub.com/mantinedev/mantine/issues/4168))
##### New Contributors
- [@​milhamm](https://togithub.com/milhamm) made their first contribution in [https://github.com/mantinedev/mantine/pull/4165](https://togithub.com/mantinedev/mantine/pull/4165)
- [@​dbnar2](https://togithub.com/dbnar2) made their first contribution in [https://github.com/mantinedev/mantine/pull/4119](https://togithub.com/mantinedev/mantine/pull/4119)
- [@​forestileao](https://togithub.com/forestileao) made their first contribution in [https://github.com/mantinedev/mantine/pull/4142](https://togithub.com/mantinedev/mantine/pull/4142)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/6.0.9...6.0.10
### [`v6.0.9`](https://togithub.com/mantinedev/mantine/releases/tag/6.0.9)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/6.0.8...6.0.9)
##### What's Changed
- `[@mantine/core]` MutiSelect: Fix error placeholder not respecting `theme.primaryShade` ([#​4113](https://togithub.com/mantinedev/mantine/issues/4113))
- `[@mantine/core]` Preserve whitespace in Select, MultiSelect and Autocomplete items ([#​4094](https://togithub.com/mantinedev/mantine/issues/4094))
- `[@mantine/core]` Menu: Fix incorrect click outside logic ([#​4114](https://togithub.com/mantinedev/mantine/issues/4114))
- `[@mantine/core]` Slider: Fix incorrect `trackContainer` height ([#​4116](https://togithub.com/mantinedev/mantine/issues/4116))
- `[@mantine/hooks]` use-focus-trap: Fix aria hider not being released when multiple focus traps being used at the same time ([#​4118](https://togithub.com/mantinedev/mantine/issues/4118))
- `[@mantine/dates]` Fix `nextIcon` and `previousIcon` props not working in Calendar based components ([#​4126](https://togithub.com/mantinedev/mantine/issues/4126))
- `[@mantine/hooks]` use-local-storage: Add dynamic local storage `key` support ([#​4127](https://togithub.com/mantinedev/mantine/issues/4127))
##### New Contributors
- [@​Ben-Kincaid](https://togithub.com/Ben-Kincaid) made their first contribution in [https://github.com/mantinedev/mantine/pull/4127](https://togithub.com/mantinedev/mantine/pull/4127)
- [@​IvanKalinin](https://togithub.com/IvanKalinin) made their first contribution in [https://github.com/mantinedev/mantine/pull/4126](https://togithub.com/mantinedev/mantine/pull/4126)
- [@​Cuzart](https://togithub.com/Cuzart) made their first contribution in [https://github.com/mantinedev/mantine/pull/4113](https://togithub.com/mantinedev/mantine/pull/4113)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/6.0.8...6.0.9
### [`v6.0.8`](https://togithub.com/mantinedev/mantine/releases/tag/6.0.8)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/6.0.7...6.0.8)
#### What's Changed
- `[@mantine/core]` Accordion: Fix chevron width being defined in px instead of rem ([#​3935](https://togithub.com/mantinedev/mantine/issues/3935))
- `[@mantine/core]` Modal: Add missing `sx` prop ([#​4058](https://togithub.com/mantinedev/mantine/issues/4058))
- `[@mantine/core]` Dialog: Fix viewport overflowing on small screens ([#​4090](https://togithub.com/mantinedev/mantine/issues/4090))
- `[@mantine/core]` MultiSelect: Add option to get value index in `ValueCopmonent` ([#​3928](https://togithub.com/mantinedev/mantine/issues/3928))
- `[@mantine/dates]` DatePickerInput: Fix `withCellSpacing` not working ([#​3993](https://togithub.com/mantinedev/mantine/issues/3993))
- `[@mantine/core]` Menu: Fix incorrect logic for `onChange`, `onOpen` and `onClose` callbacks ([#​4030](https://togithub.com/mantinedev/mantine/issues/4030))
- `[@mantine/core]` Sort `theme.breakpoints` during theme override merging on MantineProvider ([#​4051](https://togithub.com/mantinedev/mantine/issues/4051))
- `[@mantine/core]` Notification: Fix incorrect border styles ([#​4054](https://togithub.com/mantinedev/mantine/issues/4054))
- `[@mantine/dropzone]` Reexport `FileRejection` type from `react-dropzone` ([#​4065](https://togithub.com/mantinedev/mantine/issues/4065))
- `[@mantine/core]` Slider: Fix slider track not respecting parent container width ([#​4083](https://togithub.com/mantinedev/mantine/issues/4083))
#### New Contributors
- [@​dylnslck](https://togithub.com/dylnslck) made their first contribution in [https://github.com/mantinedev/mantine/pull/4065](https://togithub.com/mantinedev/mantine/pull/4065)
- [@​xshuxin](https://togithub.com/xshuxin) made their first contribution in [https://github.com/mantinedev/mantine/pull/4030](https://togithub.com/mantinedev/mantine/pull/4030)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/6.0.7...6.0.8
### [`v6.0.7`](https://togithub.com/mantinedev/mantine/releases/tag/6.0.7)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/6.0.6...6.0.7)
#### What's Changed
- `[@mantine/core]` Fix `portalProps` types and override order in all components ([#​4009](https://togithub.com/mantinedev/mantine/issues/4009))
- `[@mantine/core]` ColorInput: Fix `onChange()` executed after `onBlur()` ([#​4012](https://togithub.com/mantinedev/mantine/issues/4012))
- `[@mantine/dates]` DatePickerInput: fix `type` field always displaying generic value in autocomplete ([#​4017](https://togithub.com/mantinedev/mantine/issues/4017))
- `[@mantine/core]` Notification: Add `withBorder` prop ([#​4022](https://togithub.com/mantinedev/mantine/issues/4022))
- `[@mantine/dates]` Fix dates range displayed incorrectly when given dates have time that is close to the next day ([#​4028](https://togithub.com/mantinedev/mantine/issues/4028))
- `[@mantine/core]` ColorInput: Fix `onChangeEnd` not being called when color is picked with eyedropper ([#​4031](https://togithub.com/mantinedev/mantine/issues/4031))
- `[@mantine/core]` Slider: Fix incorrect marks click behavior ([#​4000](https://togithub.com/mantinedev/mantine/issues/4000))
#### New Contributors
- [@​newt239](https://togithub.com/newt239) made their first contribution in [https://github.com/mantinedev/mantine/pull/4004](https://togithub.com/mantinedev/mantine/pull/4004)
- [@​zoutiyx](https://togithub.com/zoutiyx) made their first contribution in [https://github.com/mantinedev/mantine/pull/4033](https://togithub.com/mantinedev/mantine/pull/4033)
- [@​bentron2000](https://togithub.com/bentron2000) made their first contribution in [https://github.com/mantinedev/mantine/pull/4042](https://togithub.com/mantinedev/mantine/pull/4042)
- [@​krzysztoff1](https://togithub.com/krzysztoff1) made their first contribution in [https://github.com/mantinedev/mantine/pull/4031](https://togithub.com/mantinedev/mantine/pull/4031)
- [@​welpie21](https://togithub.com/welpie21) made their first contribution in [https://github.com/mantinedev/mantine/pull/4017](https://togithub.com/mantinedev/mantine/pull/4017)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/6.0.6...6.0.7
### [`v6.0.6`](https://togithub.com/mantinedev/mantine/releases/tag/6.0.6)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/6.0.5...6.0.6)
#### What's Changed
- `[@mantine/core]` MultiSelect: Fix incorrect default value max-width ([#​3958](https://togithub.com/mantinedev/mantine/issues/3958))
- `[@mantine/dates]` Fix `onNextDecade`, `onPreviousDecade` and similar handlers not working on some components ([#​3946](https://togithub.com/mantinedev/mantine/issues/3946))
- `[@mantine/core]` Modal: Fix incorrect close button position when there is no title ([#​3939](https://togithub.com/mantinedev/mantine/issues/3939))
- `[@mantine/core]` Image: Fix imageProps overrding component props ([#​3985](https://togithub.com/mantinedev/mantine/issues/3985))
- `[@mantine/form]` Rollback `form.reset` type change ([#​3956](https://togithub.com/mantinedev/mantine/issues/3956))
- `[@mantine/dates]` Fix page scrolling on ArrowUp/ArrowDown keyboard navigation ([#​3925](https://togithub.com/mantinedev/mantine/issues/3925))
- `[@mantine/dates]` DateInput: Fix `defaultDate` not working ([#​3950](https://togithub.com/mantinedev/mantine/issues/3950))
- `[@mantine/dates]` Add missing props from DatePicker ([#​3951](https://togithub.com/mantinedev/mantine/issues/3951))
- `[@mantine/dates]` Fix weekday labeling when `dayjs.locale` is used ([#​3954](https://togithub.com/mantinedev/mantine/issues/3954))
- `[@mantine/core]` MultiSelect: Fix broken styles in Safari ([#​3980](https://togithub.com/mantinedev/mantine/issues/3980))
- `[@mantine/core]` NumberInput: Fix `onChange` not being called correctly ([#​3984](https://togithub.com/mantinedev/mantine/issues/3984))
- `[@mantine/dates]` DatePicker: Fix component throwing error when `type` changes ([#​3989](https://togithub.com/mantinedev/mantine/issues/3989))
- `[@mantine/core]` NumberInput: Add `thousandsSeparator` ([#​3990](https://togithub.com/mantinedev/mantine/issues/3990))
- `[@mantine/core]` ColorPicker: Fix color picker state not being updated when component is uncontrolled and color swatch is clicked
#### New Contributors
- [@​jrozbicki](https://togithub.com/jrozbicki) made their first contribution in [https://github.com/mantinedev/mantine/pull/3980](https://togithub.com/mantinedev/mantine/pull/3980)
- [@​jsuter](https://togithub.com/jsuter) made their first contribution in [https://github.com/mantinedev/mantine/pull/3951](https://togithub.com/mantinedev/mantine/pull/3951)
- [@​KilianB](https://togithub.com/KilianB) made their first contribution in [https://github.com/mantinedev/mantine/pull/3946](https://togithub.com/mantinedev/mantine/pull/3946)
- [@​vaynevayne](https://togithub.com/vaynevayne) made their first contribution in [https://github.com/mantinedev/mantine/pull/3958](https://togithub.com/mantinedev/mantine/pull/3958)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/6.0.5...6.0.6
### [`v6.0.5`](https://togithub.com/mantinedev/mantine/releases/tag/6.0.5)
#### What's Changed
- `[@mantine/core]` Change Modal and Drawer to use native scrollbars by default, remove excessive markup ([#​3854](https://togithub.com/mantinedev/mantine/issues/3854))
- `[@mantine/core]` Drawer: Fix styles api on MantineProvider not working
- `[@mantine/core]` Button: Fix hover styles not overwritten with `&:hover` selector ([#​3920](https://togithub.com/mantinedev/mantine/issues/3920))
- `[@mantine/dates]` Change tab order behavior to match native date pickers ([#​3876](https://togithub.com/mantinedev/mantine/issues/3876))
- `[@mantine/dates]` Fix tab order with `hideOutsideDates` prop ([#​3849](https://togithub.com/mantinedev/mantine/issues/3849))
- `[@mantine/form]` Fix incorrect form errors behavior with `form.resorderListItem` and `form.insertListItem` handlers ([#​3828](https://togithub.com/mantinedev/mantine/issues/3828))
- `[@mantine/core]` Popover: Add option to change offset for each axis individually ([#​3775](https://togithub.com/mantinedev/mantine/issues/3775))
- `[@mantine/core]` MultiSelect: Fix `disableSelectedItemFiltering` prop not working with `searchable` option ([#​3894](https://togithub.com/mantinedev/mantine/issues/3894))
- `[@mantine/core]` Autocomplete: Fix incorrect `aria-` attributes on input element ([#​3900](https://togithub.com/mantinedev/mantine/issues/3900))
- `[@mantine/core]` TypographyStylesProvider: Fix incorrect breakpoints used in styles ([#​3902](https://togithub.com/mantinedev/mantine/issues/3902))
- `[@mantine/form]` Allow to specify values partial in `form.resetDirty` ([#​3906](https://togithub.com/mantinedev/mantine/issues/3906))
- `[@mantine/core]` Slider: Fix incorrect behavior when slider is disabled and marks are clicked ([#​3856](https://togithub.com/mantinedev/mantine/issues/3856))
#### New Contributors
- [@​badalsaibo](https://togithub.com/badalsaibo) made their first contribution in [https://github.com/mantinedev/mantine/pull/3848](https://togithub.com/mantinedev/mantine/pull/3848)
- [@​btmnk](https://togithub.com/btmnk) made their first contribution in [https://github.com/mantinedev/mantine/pull/3906](https://togithub.com/mantinedev/mantine/pull/3906)
- [@​csmatt](https://togithub.com/csmatt) made their first contribution in [https://github.com/mantinedev/mantine/pull/3900](https://togithub.com/mantinedev/mantine/pull/3900)
- [@​citypaul](https://togithub.com/citypaul) made their first contribution in [https://github.com/mantinedev/mantine/pull/3897](https://togithub.com/mantinedev/mantine/pull/3897)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/6.0.3...6.0.5
### [`v6.0.3`](https://togithub.com/mantinedev/mantine/releases/tag/6.0.3): 6.0.4
[Compare Source](https://togithub.com/mantinedev/mantine/compare/6.0.2...6.0.3)
#### What's Changed
- `[@mantine/dates]` Calendar: Improve tab navigation order in decade/year/month views ([#​3728](https://togithub.com/mantinedev/mantine/issues/3728))
- `[@mantine/core]` Fix NumberInput precision formatting ([#​3756](https://togithub.com/mantinedev/mantine/issues/3756))
- `[@mantine/hooks]` use-timeout: Memoize `clear` and `start` functions ([#​3801](https://togithub.com/mantinedev/mantine/issues/3801))
- `[@mantine/core]` Modal: Fix unexpected attributes added to root dom node ([#​3802](https://togithub.com/mantinedev/mantine/issues/3802))
- `[@mantine/dates]` DatePickerInput: Fix unexpected attribute `valueFormat` being added to root dom node ([#​3804](https://togithub.com/mantinedev/mantine/issues/3804))
- `[@mantine/form]` Fix some object being incorrectly cloned in `form.setFieldValue` handler ([#​3805](https://togithub.com/mantinedev/mantine/issues/3805))
- `[@mantine/tiptap]` Update installation instructions to include tiptap/pm package ([#​3806](https://togithub.com/mantinedev/mantine/issues/3806))
- `[@mantine/core]` Accordion: Fix parts of lowercase letters being cut off by overflow: hidden ([#​3812](https://togithub.com/mantinedev/mantine/issues/3812))
- `[@mantine/styles]` Expose theme breakpoints as css variables ([#​3824](https://togithub.com/mantinedev/mantine/issues/3824))
- `[@mantine/core]` Fix Modal/Drawer content scrolling over header ([#​3829](https://togithub.com/mantinedev/mantine/issues/3829))
- `[@mantine/core]` Pagination: Fix incorrect chevron icons in RTL ([#​3809](https://togithub.com/mantinedev/mantine/issues/3809))
- `[@mantine/core]` Select: Fix `shadow` prop not working ([#​3807](https://togithub.com/mantinedev/mantine/issues/3807))
- `[@mantine/core]` Pagination: Fix `spacing={0}` nor working
- `[@mantine/form]` Make isEmail validation simpler to allow usage of dots and plus signs
#### New Contributors
- [@​kaeevans](https://togithub.com/kaeevans) made their first contribution in [https://github.com/mantinedev/mantine/pull/3778](https://togithub.com/mantinedev/mantine/pull/3778)
- [@​old-rob](https://togithub.com/old-rob) made their first contribution in [https://github.com/mantinedev/mantine/pull/3840](https://togithub.com/mantinedev/mantine/pull/3840)
- [@​anri-asaturov](https://togithub.com/anri-asaturov) made their first contribution in [https://github.com/mantinedev/mantine/pull/3824](https://togithub.com/mantinedev/mantine/pull/3824)
- [@​zachspiel](https://togithub.com/zachspiel) made their first contribution in [https://github.com/mantinedev/mantine/pull/3812](https://togithub.com/mantinedev/mantine/pull/3812)
- [@​twiddler](https://togithub.com/twiddler) made their first contribution in [https://github.com/mantinedev/mantine/pull/3806](https://togithub.com/mantinedev/mantine/pull/3806)
- [@​benlongo](https://togithub.com/benlongo) made their first contribution in [https://github.com/mantinedev/mantine/pull/3805](https://togithub.com/mantinedev/mantine/pull/3805)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/6.0.2...6.0.3
### [`v6.0.2`](https://togithub.com/mantinedev/mantine/releases/tag/6.0.2)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/6.0.1...6.0.2)
#### What's Changed
- `[@mantine/hooks]` use-hash: Fix incorrect hash set from `hashchange` event ([#​3773](https://togithub.com/mantinedev/mantine/issues/3773))
- `[@mantine/core]` PinInput: Fix `onComplete` prop firing incorrectly ([#​3715](https://togithub.com/mantinedev/mantine/issues/3715))
- `[@mantine/core]` Popover: Add `onClose` and `onOpen` events supports for uncontrolled popovers ([#​3716](https://togithub.com/mantinedev/mantine/issues/3716))
- `[@mantine/core]` Select: Fix focus loss when pressing tab inside input element ([#​3744](https://togithub.com/mantinedev/mantine/issues/3744))
- `[@mantine/core]` Anchor: Fix `undelrine` prop not working for hover state ([#​3748](https://togithub.com/mantinedev/mantine/issues/3748))
- `[@mantine/core]` Switch: Fix body scrolling when input is focused ([#​3752](https://togithub.com/mantinedev/mantine/issues/3752))
- `[@mantine/core]` Popover: Fix incorrect dropdown position when `position` prop changes ([#​3753](https://togithub.com/mantinedev/mantine/issues/3753))
- `[@mantine/core]` ScrollArea: Add missing `viewportProps` prop to ScrollArea.Autosize ([#​3760](https://togithub.com/mantinedev/mantine/issues/3760))
- `[@mantine/core]` JsonInput: Fix incorrect serialization logic ([#​3769](https://togithub.com/mantinedev/mantine/issues/3769))
- `[@mantine/core]` Drawer: Fix incorrect static selector ([#​3730](https://togithub.com/mantinedev/mantine/issues/3730))
#### New Contributors
- [@​jourmooney](https://togithub.com/jourmooney) made their first contribution in [https://github.com/mantinedev/mantine/pull/3730](https://togithub.com/mantinedev/mantine/pull/3730)
- [@​Domin-MND](https://togithub.com/Domin-MND) made their first contribution in [https://github.com/mantinedev/mantine/pull/3760](https://togithub.com/mantinedev/mantine/pull/3760)
- [@​Tronikelis](https://togithub.com/Tronikelis) made their first contribution in [https://github.com/mantinedev/mantine/pull/3748](https://togithub.com/mantinedev/mantine/pull/3748)
- [@​fbarl](https://togithub.com/fbarl) made their first contribution in [https://github.com/mantinedev/mantine/pull/3744](https://togithub.com/mantinedev/mantine/pull/3744)
- [@​hllmtl](https://togithub.com/hllmtl) made their first contribution in [https://github.com/mantinedev/mantine/pull/3721](https://togithub.com/mantinedev/mantine/pull/3721)
- [@​LeighS95](https://togithub.com/LeighS95) made their first contribution in [https://github.com/mantinedev/mantine/pull/3715](https://togithub.com/mantinedev/mantine/pull/3715)
- [@​stijnvanderlaan](https://togithub.com/stijnvanderlaan) made their first contribution in [https://github.com/mantinedev/mantine/pull/3773](https://togithub.com/mantinedev/mantine/pull/3773)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/6.0.1...6.0.2
### [`v6.0.1`](https://togithub.com/mantinedev/mantine/releases/tag/6.0.1)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/6.0.0...6.0.1)
#### What's Changed
- `[@mantine/core]` SegmentedControl: Fix incorrect border styles in vertical orientation ([#​3670](https://togithub.com/mantinedev/mantine/issues/3670))
- `[@mantine/core]` Fix incorrect error messages in Popover, HoverCard and Menu components ([#​3638](https://togithub.com/mantinedev/mantine/issues/3638))
- `[@mantine/core]` Button: Fix incorrect Button.Group styles that contain only one Button ([#​3667](https://togithub.com/mantinedev/mantine/issues/3667))
- `[@mantine/dates]` Remove disabled level change button from tab order ([#​3648](https://togithub.com/mantinedev/mantine/issues/3648))
- `[@mantine/core]` Transition: Fix exit duration not working ([#​3664](https://togithub.com/mantinedev/mantine/issues/3664))
- `[@mantine/core]` Anchor: Fix dimmed color not working ([#​3668](https://togithub.com/mantinedev/mantine/issues/3668))
- `[@mantine/core]` Alert: Fix content overlap with no title and with close button ([#​3681](https://togithub.com/mantinedev/mantine/issues/3681))
- `[@mantine/core]` AppShell: Fix incorrect CSS variables ([#​3687](https://togithub.com/mantinedev/mantine/issues/3687))
- `[@mantine/notifications]` Add static methods to Notifications ([#​3689](https://togithub.com/mantinedev/mantine/issues/3689))
- `[@mantine/core]` Title: Fix Text props not working ([#​3690](https://togithub.com/mantinedev/mantine/issues/3690))
- `[@mantine/styles]` Fix incorrect CSS variables parsing in theme functions ([#​3695](https://togithub.com/mantinedev/mantine/issues/3695))
- `[@mantine/dates]` DateTimePicker: Fix TimeInput now showing when dropdown was closed with month/year picker ([#​3710](https://togithub.com/mantinedev/mantine/issues/3710))
- `[@mantine/core]` Portal: Add `portalProps` prop support ([#​3696](https://togithub.com/mantinedev/mantine/issues/3696))
- `[@mantine/core]` Tooltip: Fix incorrect arrow border styles ([#​3693](https://togithub.com/mantinedev/mantine/issues/3693))
#### New Contributors
- [@​beeman](https://togithub.com/beeman) made their first contribution in [https://github.com/mantinedev/mantine/pull/3673](https://togithub.com/mantinedev/mantine/pull/3673)
- [@​andyphl](https://togithub.com/andyphl) made their first contribution in [https://github.com/mantinedev/mantine/pull/3690](https://togithub.com/mantinedev/mantine/pull/3690)
- [@​ForeshadowRU](https://togithub.com/ForeshadowRU) made their first contribution in [https://github.com/mantinedev/mantine/pull/3689](https://togithub.com/mantinedev/mantine/pull/3689)
- [@​lgaspari](https://togithub.com/lgaspari) made their first contribution in [https://github.com/mantinedev/mantine/pull/3664](https://togithub.com/mantinedev/mantine/pull/3664)
- [@​rarkins](https://togithub.com/rarkins) made their first contribution in [https://github.com/mantinedev/mantine/pull/3652](https://togithub.com/mantinedev/mantine/pull/3652)
- [@​jksaunders](https://togithub.com/jksaunders) made their first contribution in [https://github.com/mantinedev/mantine/pull/3670](https://togithub.com/mantinedev/mantine/pull/3670)
**Full Changelog**: https://github.com/mantinedev/mantine/compare/6.0.0...6.0.1
### [`v6.0.0`](https://togithub.com/mantinedev/mantine/releases/tag/6.0.0)
[Compare Source](https://togithub.com/mantinedev/mantine/compare/5.10.5...6.0.0)
[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/6-0-0/)
#### Breaking changes
The following changes are breaking. Note that although
we've tried to include all breaking changes with migration guides in the list you still may
experience undocumented changes. If you think that these changes worth including in this list,
let us know by [opening an issue on GitHub](https://togithub.com/mantinedev/mantine/issues/new/choose).
##### Migration to rem/em units
All Mantine components now use [rem units](https://mantine.dev/styles/rem/). `1rem` is considered to be `16px`
with medium text size selected by user, all components will scale based on settings specified in browser.
`theme.spacing`, `theme.radius`, `theme.fontSizes` and other theme properties overrides
are now expected to be defined in rem. `theme.breakpoints` are expected to be defined in `em` units:
```tsx
import { MantineProvider } from "@​mantine/core";
function Demo() {
return (
<MantineProvider
theme={{
spacing: { xs: "1rem", sm: "1.5rem" /* ... */ },
fontSizes: { xs: "0.8rem", sm: "1.2rem" /* ... */ },
radius: { xs: "0.1rem", sm: "0.3rem" /* ... */ },
breakpoints: { xs: "20em", sm: "36em" /* ... */ },
}}
>
<App />
</MantineProvider>
);
}
```
You can no longer use addition, subtraction, division, multiplication and other math operations
with theme values in [createStyles](https://mantine.dev/styles/create-styles/) and [sx prop](https://mantine.dev/styles/sx/),
use `calc` instead:
```tsx
import { createStyles, rem } from '@​mantine/core':
// 5.x expressions that will no longer work in 6.x
createStyles((theme) => ({
demo: {
// Values cannot longer be prepended with minus sign
margin: -theme.spacing.xs,
// addition, subtraction, division, multiplication
// and other math operations are no longer available
paddingLeft: theme.spacing.md + 5,
paddingRight: theme.spacing.sm / 2,
paddingTop: theme.spacing.lg * 1.5,
paddingBottom: theme.spacing.xl - theme.spacing.md,
// theme values used in sting templates
// will no longer work with px suffix
margin: `${theme.spacing.xs}px ${theme.spacing.md}px`
}
}));
// In 6.0 use calc
createStyles((theme) => ({
demo: {
// Use calc to negate theme value
margin: `calc(${theme.spacing.xs} * -1)`,
// Use calc and rem function for
// addition, subtraction, division, multiplication
paddingLeft: `calc(${theme.spacing.md} + ${rem(5)})`,
paddingRight: `calc(${theme.spacing.sm} / 2)`,
paddingTop: `calc(${theme.spacing.lg} * 1.5)`,
paddingBottom: `calc(${theme.spacing.xl} - ${theme.spacing.md})`,
// Omit px suffix when using theme values
margin: `${theme.spacing.xs} ${theme.spacing.md}`
}
}));
```
##### Automatic px to rem conversion
If you use numbers in Mantine components props, they will be treated as `px` and converted to `rem`,
for example:
```tsx
import { ColorSwatch } from "@​mantine/core";
function DemoPx() {
// Specify ColorSwatch size in px, it will be automatically converted to rem
// Width and height of ColorSwatch in this case will be 32px / 16 = 2rem
return <ColorSwatch color="#​000" size={32} />;
}
function DemoRem() {
// This demo will have the same size as previous one
return <ColorSwatch color="#​000" size="2rem" />;
}
```
The same logic is applied to [style props](/styles/style-props/) available
in every component:
```tsx
import { Box } from "@​mantine/core";
function Demo() {
// width: 2rem, height: 1rem
// margin-left: 1rem
// @​media (min-width: theme.breakpoints.sm) -> margin-left: 2rem
return <Box w={32} h={16} ml={{ base: 16, sm: 32 }} />;
}
```
##### createStyles breaking changes
[createStyles](https://mantine.dev/styles/create-styles/) function no longer receives `getRef`
as a third argument. Use `getStylesRef` exported from `@mantine/core` package instead:
```tsx
// in 5.x, will not work in 6.x
import { createStyles } from '@​mantine/core';
createStyles((theme, params, getRef) => {
child: { ref: getRef('child') },
parent: { [`& .${getRef('child')}`]: { color: 'red' } },
});
// in 6.x use getStylesRef function
import { createStyles, getStylesRef } from '@​mantine/core';
createStyles((theme, params) => {
child: { ref: getStylesRef('child') },
parent: { [`& .${getStylesRef('child')}`]: { color: 'red' } },
});
```
##### [@​mantine/notifications](https://togithub.com/mantine/notifications) breaking changes
[@​mantine/notifications](https://mantine.dev/others/notifications/) package no longer exports
`NotificationsProvider` component. Instead you should add `Notifications` component to any
part of your application. This change allows to avoid unnecessary rerenders of child components
when notifications state change. Also `useNotifications` hook is no longer exported from the package.
```tsx
import { MantineProvider } from "@​mantine/core";
import { Notifications } from "@​mantine/notifications";
function Demo() {
return (
<MantineProvider withNormalizeCSS withGlobalStyles>
<Notifications />
<App />
</MantineProvider>
);
}
```
##### [@​mantine/rte](https://togithub.com/mantine/rte) package deprecation
`@mantine/rte` package is deprecated – it will no longer receive updates (last version will remain 5.x)
and it may no longer be compatible with `@mantine/core` and `@mantine/hooks` packages (6.x and later versions).
Migrate to [@​mantine/tiptap](https://mantine.dev/others/tiptap/) as soon as possible.
##### [@​mantine/dates](https://togithub.com/mantine/dates) breaking changes
All components from `@mantine/dates` package were rebuilt from scratch.
Note that the following list is not full as it is difficult to include all breaking changes
after a full package revamp – follow documentation of component that you use to find out about
all breaking changes.
- Styles API selectors of components were changed
- `DatePicker` component was renamed to `DatePickerInput`
- `Calendar` component was renamed to `DatePicker`
- `TimeInput` component was migrated to native `input[type="time"]` as it provides better UX in most browsers
- `TimeRangeInput` component was removed – it is no longer exported from the package
- `DateRangePicker` and `RangeCalendar` components were removed – you can now setup dates range picking in [DatePicker](https://mantine.dev/dates/date-picker/) and [DatePickerInput](https://mantine.dev/dates/date-picker-input/)
- `amountOfMonths` prop was renamed to `numberOfColumns` in all components
- `DatePickerInput` (previously `DatePicker`) component no longer supports `allowFreeInput` prop – use [DateInput](https://mantine.dev/dates/date-input/) component instead
- `DatePicker` (previously `Calendar`) component no longer supports `dayClassName` and `dayStyle` props – use `getDayProps` instead
##### Theme object changes
You can no longer define `dateFormat` and `datesLocale` in [theme](https://mantine.dev/theming/theme-object/),
use components prop to specify format instead:
```tsx
// 5.x, will not work in 6.x
import { MantineProvider } from "@​mantine/core";
function Demo() {
return (
<MantineProvider theme={{ dateFormat: "MMMM DD YYYY", datesLocale: "es" }}>
<App />
</MantineProvider>
);
}
// 6.x – use components props
import { DatePickerInput } from "@​mantine/dates";
function Demo() {
return <DatePickerInput valueFormat="MMMM D, YYYY" locale="es" />;
}
```
##### Modal and Drawer breaking changes
[Modal](https://mantine.dev/core/modal/) and [Drawer](https://mantine.dev/core/drawer/) components
props were renamed:
- `withFocusReturn` → `returnFocus`
- `overflow` → `scrollAreaComponent` (scroll now is always handled inside modal/drawer)
- `overlayBlur` → `overlayProps.blur`
- `overlayColor` → `overlayProps.color`
- `overlayOpacity` → `overlayProps.opacity`
- `exitTransitionDuration` → `transitionProps.exitDuration`
- `transition` → `transitionProps.transition`
- `transitionDuration` → `transitionProps.duration`
- `transitionTimingFunction` → `transitionProps.timingFunction`
`Modal` styles API changes:
- `modal` selector was renamed to `content`
`Drawer` styles API changes:
- `drawer` selector was renamed to `content`
##### NumberInput breaking changes
[NumberInput](https://mantine.dev/core/number-input/) component types for `value`, `defaultValue`
and `onChange` props were changed. It now expects value to be `number | ''` (number or empty string) instead
of `number | undefined`. This change was made to address multiple bugs that happened because it was
not possible to differentiate controlled and uncontrolled `NumberInput`.
```tsx
import { useState } from "react";
import { NumberInput } from "@​mantine/core";
function Demo() {
const [value, setValue] = useState<number | "">(0);
return <NumberInput value={value} onChange={setValue} />;
}
```
##### [Pagination](https://mantine.dev/core/pagination/) breaking changes
- Styles API selectors were changed
- Renamed/removed props:
- `itemComponent` – removed, use `getItemProps` or static components instead
- `getItemAriaLabel` – removed, use `getItemProps` prop instead
- `initialPage` → `defaultValue`
- `page` → `value`
##### [@​mantine/spotlight](https://togithub.com/mantine/spotlight) breaking changes
[Spotlight](https://mantine.dev/others/spotlight/) component was migrated to use [Modal](https://mantine.dev/core/modal/)
under the hood. Its Styles API selectors and some props names were changed – it now supports all [Modal](https://mantine.dev/core/modal/) component props.
Renamed props:
- `overlayBlur` → `overlayProps.blur`
- `overlayColor` → `overlayProps.color`
- `overlayOpacity` → `overlayProps.opacity`
- `exitTransitionDuration` → `transitionProps.exitDuration`
- `transition` → `transitionProps.transition`
- `transitionDuration` → `transitionProps.transition`
- `transitionTimingFunction` → `transitionProps.timingFunction`
[Spotlight](https://mantine.dev/others/spotlight/) actions are now fully controlled:
- `actions` prop no longer accept a callback function, only a list of actions
- To make register/remove features to work you will need to store actions in state
##### Other breaking changes
- [Text](https://mantine.dev/core/text/) no longer supports `variant="link"`, use [Anchor](https://mantine.dev/core/anchor/) instead
- [Input](https://mantine.dev/core/input/) Styles API was changed – `disabled`, `invalid` and `withIcon` selectors are no longer available, they were migrated to `data-disabled`, `data-invalid` and `data-with-icon` attributes
- [PasswordInput](https://mantine.dev/core/password-input/) Styles API was changed – `invalid` and `withIcon` selectors are no longer available, use `data-invalid` and `data-with-icon` attributes with `innerInput` selector
- `invalid` prop was renamed to `error` in [Input](https://mantine.dev/core/input/) component
- [FileInput](https://mantine.dev/core/file-input/), [Select](https://mantine.dev/core/select/) and [MultiSelect](https://mantine.dev/core/multi-select/) components no longer support `clearButtonLabel` and `clearButtonTabIndex` props, use `clearButtonProps` instead to add any extra props to the clear button
- `@mantine/next` package no longer exports `NextLink` component
- [Checkbox.Group](https://mantine.dev/core/checkbox/), [Switch.Group](https://mantine.dev/core/switch/) and [Radio.Group](https://mantine.dev/core/radio/) components no longer include [Group](https://mantine.dev/core/group/) – `orientation`, `offset` and `spacing` props are no longer supported. This change gives you more freedom on how to organize inputs layout.
- [Chip.Group](https://mantine.dev/core/chip/) no longer includes `Group` – you need to manage layout on your side
- [List](https://mantine.dev/core/list/) component Styles API was changed, it no longer has `withIcon` selector, use `data-with-icon` attribute instead
- `withFocusReturn` prop was renamed to `returnFocus` in [Modal](https://mantine.dev/core/modal/) and [Drawer](https://mantine.dev/core/drawer/) components
- [Card](https://mantine.dev/core/card/) component now uses `padding` prop instead of `p` to offset `Card.Section` components
- [RichTextEditor](https://mantine.dev/others/tiptap/) now depends on `@tabler/icons-react` (`>=2.1.0`) package instead of `@tabler/icons`
- `@mantine/core` package no longer exports `GroupedTransition` component, use multiple [Transition](https://mantine.dev/core/transition/) components instead
- `use-scroll-lock` hook is deprecated, all Mantine components now use [react-remove-scroll](https://togithub.com/theKashey/react-remove-scroll)
- [ScrollArea.Autosize](https://mantine.dev/core/scroll-area/) component prop `maxHeight` is removed, it is replaced with `mah` [style prop](https://mantine.dev/styles/style-props/)
- [SegmentedControl](https://mantine.dev/core/segmented-control/) component Styles API was changed – `labelActive` and `disabled` selectors were removed (replaced with `data-active` and `data-disabled` attributes on `label` selector), `active` selector was renamed to `indicator`
- [Notification](https://mantine.dev/core/notification/) component prop `disallowClose` prop was renamed to `withCloseButton`, it also was changed in [notifications system](https://mantine.dev/others/notifications/)
- [Tooltip](https://mantine.dev/core/tooltip/) component props `transition` and `transitionDuration` were renamed to `transitionProps`
- [Popover](https://mantine.dev/core/popover/), [HoverCard](https://mantine.dev/core/hover-card/), [Menu](https://mantine.dev/core/menu/), [Select](https://mantine.dev/core/select/), [MultiSelect](https://mantine.dev/core/multi-select/), [ColorInput](https://mantine.dev/core/color-input/) and [Autocomplete](https://mantine.dev/core/autocomplete/) components `transition`, `transitionDuration` and `exitTransitionDuration` props were renamed to `transitionProps`
- [Indicator](https://mantine.dev/core/indicator/) component no longer has the props `dot`, `showZero` and `overflowCount`. Use `disabled` and `label` instead to recreate the previous behavior.
#### Variants and sizes on MantineProvider
You can now use [MantineProvider](https://mantine.dev/theming/mantine-provider/) to add variants to all Mantine components that support [Styles API](https://mantine.dev/styles/styles-api/)
and sizes to components that support `size` prop.
Variants:
```tsx
import { MantineProvider, Button, Group } from "@​mantine/core";
function Demo() {
return (
<MantineProvider
theme={{
components: {
Button: {
variants: {
danger: (theme) => ({
root: {
backgroundColor: theme.colors.red[9],
color: theme.colors.red[0],
...theme.fn.hover({ backgroundColor: theme.colors.red[8] }),
},
}),
success: (theme) => ({
root: {
backgroundImage: theme.fn.linearGradient(
45,
theme.colors.cyan[theme.fn.primaryShade()],
theme.colors.teal[theme.fn.primaryShade()],
theme.colors.green[theme.fn.primaryShade()]
),
color: theme.white,
},
}),
},
},
},
}}
>
<Group position="center">
<Button variant="danger">Danger variant</Button>
<Button variant="success">Success variant</Button>
</Group>
</MantineProvider>
);
}
```
Sizes:
```tsx
import { MantineProvider, Button, Group } from "@​mantine/core";
function Demo() {
return (
<MantineProvider
theme={{
components: {
Button: {
sizes: {
xxxs: () => ({
root: {
height: "1.25rem",
padding: "0.3125rem",
fontSize: "0.5rem",
},
}),
xxl: (theme) => ({
root: {
fontSize: "1.75rem",
height: "5rem",
padding: theme.spacing.xl,
},
}),
},
},
},
}}
>
<Group position="center">
<Button size="xxxs">XXXS button</Button>
<Button size="xxl">XXL button</Button>
</Group>
</MantineProvider>
);
}
```
#### Updated [@​mantine/dates](https://togithub.com/mantine/dates) package
`@mantine/dates` package was rebuilt from scratch, it now includes new components to
pick [year](https://mantine.dev/dates/year-picker/), [month](https://mantine.dev/dates/month-picker/)
and [dates](https://mantine.dev/dates/date-picker/). All new pickers support `type` prop that can be:
- `default` – `Date | null` – user can pick one date
- `multiple` – `Date[]` – user can pick any number of dates
- `range` – `[Date | null, Date | null]` – user can pick a range of two dates
`type="default"` example with [DatePickerInput](https://mantine.dev/dates/date-picker-input/) component:
```tsx
import { useState } from "react";
import { DatePickerInput } from "@​mantine/dates";
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<DatePickerInput
label="Pick date"
placeholder="Pick date"
value={value}
onChange={setValue}
mx="auto"
maw={400}
/>
);
}
```
`type="multiple"` example with [MonthPickerInput](https://mantine.dev/dates/month-picker-input/) component:
```tsx
import { useState } from "react";
import { MonthPickerInput } from "@​mantine/dates";
function Demo() {
const [value, setValue] = useState<Date[]>([]);
return (
<MonthPickerInput
type="multiple"
label="Pick dates"
placeholder="Pick dates"
value={value}
onChange={setValue}
mx="auto"
maw={400}
/>
);
}
```
`type="range"` example with [YearPickerInput](https://mantine.dev/dates/year-picker-input/) component:
```tsx
import { useState } from "react";
import { YearPickerInput } from "@​mantine/dates";
function Demo() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
return (
<YearPickerInput
type="range"
label="Pick dates range"
placeholder="Pick dates range"
value={value}
onChange={setValue}
mx="auto"
maw={400}
/>
);
}
```
##### [DateTimePicker component](https://mantine.dev/dates/date-time-picker/)
```tsx
import { DateTimePicker } from "@​mantine/dates";
function Demo() {
return (
<DateTimePicker
label="Pick date and time"
placeholder="Pick date and time"
maw={400}
mx="auto"
/>
);
}
```
##### [DateInput](https://mantine.dev/dates/date-input/)
```tsx
import { useState } from "react";
import { DateInput } from "@​mantine/dates";
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<DateInput
value={value}
onChange={setValue}
label="Date input"
placeholder="Date input"
maw={400}
mx="auto"
/>
);
}
```
##### [YearPicker component](https://mantine.dev/dates/year-picker/)
```tsx
impor
</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 is behind base branch, 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://app.renovatebot.com/dashboard#github/weareinreach/GLAAD).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNS4xMDIuMTAiLCJ1cGRhdGVkSW5WZXIiOiIzNS4xMDIuMTAiLCJ0YXJnZXRCcmFuY2giOiJkZXYifQ==-->
PR-URL: https://github.com/weareinreach/GLAAD/pull/45
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Joe Karow <58997957+JoeKarow@users.noreply.github.com>- Loading branch information
