fix(deps): update mantine monorepo to v6 (major)

renovate[bot] commented 1 year ago

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@mantine/core (source)	`^5.6.0` -> `^6.0.0`
@mantine/form (source)	`^5.6.0` -> `^6.0.0`
@mantine/hooks (source)	`^5.6.0` -> `^6.0.0`
@mantine/next (source)	`^5.6.0` -> `^6.0.0`
@mantine/notifications (source)	`^5.6.0` -> `^6.0.0`

Release Notes

mantinedev/mantine

### [`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 ( ); } ``` 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 ; } function DemoRem() { // This demo will have the same size as previous one return ; } ``` 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 ; } ``` ##### 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 ( ); } ``` ##### [@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 ( ); } // 6.x – use components props import { DatePickerInput } from "@mantine/dates"; function Demo() { return ; } ``` ##### 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(0); return ; } ``` ##### [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 ( ({ 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, }, }), }, }, }, }} > ); } ``` Sizes: ```tsx import { MantineProvider, Button, Group } from "@mantine/core"; function Demo() { return ( ({ root: { height: "1.25rem", padding: "0.3125rem", fontSize: "0.5rem", }, }), xxl: (theme) => ({ root: { fontSize: "1.75rem", height: "5rem", padding: theme.spacing.xl, }, }), }, }, }, }} > ); } ``` #### 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(null); return ( ); } ``` `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([]); return ( ); } ``` `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 ( ); } ``` ##### [DateTimePicker component](https://mantine.dev/dates/date-time-picker/) ```tsx import { DateTimePicker } from "@mantine/dates"; function Demo() { return ( ); } ``` ##### [DateInput](https://mantine.dev/dates/date-input/) ```tsx import { useState } from "react"; import { DateInput } from "@mantine/dates"; function Demo() { const [value, setValue] = useState(null); return ( ); } ``` ##### [YearPicker component](https://mantine.dev/dates/year-picker/) ```tsx import { useState } from "react"; import { Group } from "@mantine/core"; import { YearPicker } from "@mantine/dates"; function Demo() { const [value, setValue] = useState(null); return ( ); } ``` ##### [YearPickerInput](https://mantine.dev/dates/year-picker-input/) ```tsx import { useState } from "react"; import { YearPickerInput } from "@mantine/dates"; function Demo() { const [value, setValue] = useState(null); return ( ); } ``` ##### [MonthPicker](https://mantine.dev/dates/month-picker/) ```tsx import { useState } from "react"; import { Group } from "@mantine/core"; import { MonthPicker } from "@mantine/dates"; function Demo() { const [value, setValue] = useState(null); return ( ); } ``` ##### [MonthPickerInput](https://mantine.dev/dates/month-picker-input/) ```tsx import { useState } from "react"; import { MonthPickerInput } from "@mantine/dates"; function Demo() { const [value, setValue] = useState(null); return ( ); } ``` ##### [Calendar](https://mantine.dev/dates/calendar/) `Calendar` component can now be used as a base for date pickers with custom logic. For example, you can build week picker component with it: ```tsx import { useState } from "react"; import { Group } from "@mantine/core"; import { Calendar } from "@mantine/dates"; import dayjs from "dayjs"; function getDay(date: Date) { const day = date.getDay(); return day === 0 ? 6 : day - 1; } function startOfWeek(date: Date) { return new Date( date.getFullYear(), date.getMonth(), date.getDate() - getDay(date) - 1 ); } function endOfWeek(date: Date) { return dayjs( new Date( date.getFullYear(), date.getMonth(), date.getDate() + (6 - getDay(date)) ) ) .endOf("date") .toDate(); } function isInWeekRange(date: Date, value: Date | null) { return ( value && dayjs(date).isBefore(endOfWeek(value)) && dayjs(date).isAfter(startOfWeek(value)) ); } function Demo() { const [hovered, setHovered] = useState(null); const [value, setValue] = useState(null); return ( { const isHovered = isInWeekRange(date, hovered); const isSelected = isInWeekRange(date, value); const isInRange = isHovered || isSelected; return { onMouseEnter: () => setHovered(date), onMouseLeave: () => setHovered(null), inRange: isInRange, firstInRange: isInRange && date.getDay() === 1, lastInRange: isInRange && date.getDay() === 0, selected: isSelected, onClick: () => setValue(date), }; }} /> ); } ``` ##### [DatesProvider](https://mantine.dev/dates/dates-provider/) `DatesProvider` component lets you set various settings that are shared across all components exported from `@mantine/dates` package: ```tsx import "dayjs/locale/ru"; import { DatesProvider, MonthPickerInput, DatePickerInput, } from "@mantine/dates"; function Demo() { return ( ); } ``` #### New [PinInput](https://mantine.dev/core/pin-input/) component ```tsx import { PinInput, Group } from "@mantine/core"; function Demo() { return ( ); } ``` #### Overlay component improvements [Overlay](https://mantine.dev/core/overlay/) component now supports the following new features: - You can now render `children` inside `Overlay` - When `center` prop is set overlay children will be centered vertically and horizontally - New `fixed` prop controls `position`, when it is set `position: fixed`, when it is not set `position: absolute` ```tsx import { useState } from "react"; import { Button, Overlay, Image, AspectRatio } from "@mantine/core"; function Demo() { const [visible, setVisible] = useState(false); return (

setVisible(false)} /> {!visible && ( )} ); } ``` #### Modal and Drawer components improvements ##### Modular components [Modal](https://mantine.dev/core/modal/) and [Drawer](https://mantine.dev/core/drawer/) components now expose modular components that can be used to build custom modals and drawers. This feature allows you to have full control over the component rendering. Previous approach with single `Modal`/`Drawer` component will still work the same way as before. ```tsx import { useDisclosure } from "@mantine/hooks"; import { Modal, Button, Group } from "@mantine/core"; function Demo() { const [opened, { open, close }] = useDisclosure(false); return ( <> Modal title Modal content ); } ``` ##### Built in ScrollArea [Modal](https://mantine.dev/core/modal/) and [Drawer](https://mantine.dev/core/drawer/) components now use [ScrollArea](https://mantine.dev/core/scroll-area/) component to handle scroll: ```tsx import { useDisclosure } from "@mantine/hooks"; import { Modal, Group, Button } from "@mantine/core"; function Demo() { const [opened, { open, close }] = useDisclosure(false); const content = Array(100) .fill(0) .map((_, index) =>

Modal with scroll

); return ( <> {content} ); } ``` ##### Modal offset [Modal](https://mantine.dev/core/modal/) component now supports `xOffset` and `yOffset` props to control vertical and horizontal offsets of the modal content: ```tsx import { useDisclosure } from "@mantine/hooks"; import { Modal, Button, Group } from "@mantine/core"; function Demo() { const [opened, { open, close }] = useDisclosure(false); return ( <> ); } ``` #### keepMounted prop Components that use [Transition](https://mantine.dev/core/transition/) now support `keepMounted`. When `keepMounted` prop is set component will not be unmounted from the DOM and instead it will be hidden with `display: none` styles. `keepMounted` prop is supported by the following components: - [Transition](https://mantine.dev/core/transition/) - [Modal](https://mantine.dev/core/modal/) - [Drawer](https://mantine.dev/core/drawer/) - [Dialog](https://mantine.dev/core/dialog/) - [LoadingOverlay](https://mantine.dev/core/loading-overlay/) - [Popover](https://mantine.dev/core/popover/) - [Tooltip](https://mantine.dev/core/tooltip/) #### Pagination component improvements [Pagination](https://mantine.dev/core/pagination/) component now supports changing icons with props and modular components: ```tsx import { Group, Pagination } from "@mantine/core"; function Demo() { return ( ); } ``` #### [@mantine/spotlight](https://togithub.com/mantine/spotlight) improvements ##### Controlled actions You can now fully control actions state: ```tsx import { useState } from "react"; import { Group, Button } from "@mantine/core"; import { SpotlightProvider, spotlight } from "@mantine/spotlight"; import { IconAlien, IconSearch } from "@tabler/icons-react"; function SpotlightControls() { const [registered, setRegistered] = useState(false); return ( {registered ? ( ) : ( )} ); } export function Demo() { // It is required to store actions in state for register/remove functions to work const [actions, setActions] = useState([ /* ... see in previous demos */ ]); return ( } searchPlaceholder="Search..." shortcut="mod + shift + C" > ); } ``` ##### Controlled search query You can now fully control search query: ```tsx import { useState } from "react"; import { Button, Group } from "@mantine/core"; import { SpotlightProvider, spotlight, SpotlightAction, } from "@mantine/spotlight"; function SpotlightControl() { return ( ); } function Demo() { const [query, setQuery] = useState(""); const actions: SpotlightAction[] = query !== "%%secret%%" ? [ { title: "Reveal secret actions", description: "Click this action to reveal secret actions", onTrigger: () => setQuery("%%secret%%"), closeOnTrigger: false, }, ] : [ { title: "Super secret action", keywords: "%%secret%%", onTrigger: () => {}, }, { title: "Rick roll", description: "Do not click", keywords: "%%secret%%", onTrigger: () => { window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"; }, }, ]; return ( } searchPlaceholder="Search..." shortcut="mod + shift + 1" nothingFoundMessage="Nothing found..." > ); } ``` #### Other changes - `rightSection` of all inputs is now based on `size` prop by default (previously it was a static value) - [Chip](https://mantine.dev/core/chip/) component now supports `filled`, `outline` and `light` variants - `theme.headings.fontFamily` now fallbacks to `theme.fontFamily` if value is not defined on `MantineProvider` - [@mantine/notifications](https://mantine.dev/others/notifications/) package now exports `notifications` object that includes functions to show, update, hide, clean and clean queue - [@mantine/nprogress](https://mantine.dev/others/nprogress/), [@mantine/modals](https://mantine.dev/others/modals/) and [@mantine/spotlight](https://mantine.dev/others/spotlight/) packages now exports `nprogress`, `modals` and `spotlight` objects with all package methods - [use-os](https://mantine.dev/hooks/use-os/) hook now sets initial value in `useLayoutEffect` by default (configurable with option) to avoid hydration mismatches - [use-id](https://mantine.dev/hooks/use-id/) hook now always generate random id when component is mounted to replace id generated by `React.useId` hook. This change prevents browser from showing incorrect autocomplete suggestions for inputs. - [Timeline](https://mantine.dev/core/timeline/) component now supports `root` Styles API selector - [SegmentedControl](https://mantine.dev/core/segmented-control/) component now supports `readOnly` prop - [Kbd](https://mantine.dev/core/kbd/) component now supports `size` prop - [use-form](https://mantine.dev/form/form/values/) now supports `form.getTransformedValues` handler - [Tooltip](https://mantine.dev/core/tooltip/) now has better color contrast with dark color scheme - [Highlight](https://mantine.dev/core/highlight/) component now supports changing styles per highlighted substring - [JsonInput](https://mantine.dev/core/json-input/) component now supports `serialize` and `deserialize` props to allow custom JSON formats - [Modals manager](https://mantine.dev/others/modals/) now supports type safe context modals - [@mantine/form](https://mantine.dev/form/validators/) now exports new `matchesField` validator - [form.getInputProps](https://mantine.dev/form/validators/) `withError` parameter is now true by default for all inputs - New [use-headroom](https://mantine.dev/hooks/use-headroom/) hook #### Previous documentation versions - [1.x version documentation (1.3.1)](https://v1.mantine.dev/) - [2.x version documentation (2.5.1)](https://v2.mantine.dev/) - [3.x version documentation (3.6.14)](https://v3.mantine.dev/) - [4.x version documentation (4.2.12)](https://v4.mantine.dev/) - [4.x version documentation (5.10.5)](https://v5.mantine.dev/) ### [`v5.10.5`](https://togithub.com/mantinedev/mantine/releases/tag/5.10.5) [Compare Source](https://togithub.com/mantinedev/mantine/compare/5.10.4...5.10.5) #### What's Changed - `[@mantine/dates]` Fix `inputWrapperOrder` not supported by TimeInput and TimeInputRange components ([#3520](https://togithub.com/mantinedev/mantine/issues/3520)) - `[@mantine/core]` Fix AppShell, Dialog, Drawer and Modal components incorrect style props type - `[@mantine/modals]` Fix centered modal jumping when closed ([#3570](https://togithub.com/mantinedev/mantine/issues/3570)) - `[@mantine/core]` Popover: Fix dropdown not following target element inside scrollable container when `withinPortal` is set ([#3576](https://togithub.com/mantinedev/mantine/issues/3576)) - `[@mantine/core]` Tooltip: Fix incorrect `disabled` prop behavior in Tooltip.Floating ([#3611](https://togithub.com/mantinedev/mantine/issues/3611)) - `[@mantine/core]` Table: Fix incorrect th styles inside tbody ([#3556](https://togithub.com/mantinedev/mantine/issues/3556)) - `[@mantine/core]` Add ColSpan type exports ([#3564](https://togithub.com/mantinedev/mantine/issues/3564)) - `[@mantine/core]` PasswordInput: Fix typo in selector ([#3553](https://togithub.com/mantinedev/mantine/issues/3553)) #### New Contributors - [@̴

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

[ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
hub-one	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 14, 2023 7:02pm

renovate[bot] commented 1 year ago

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠ Warning: custom changes will be lost.

IhsenBouallegue / HubOne