fix(deps): update mantine monorepo to v5 (major) - autoclosed

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@mantine/core (source)	`^4.2.12` -> `^5.0.0`
@mantine/dropzone (source)	`^4.2.12` -> `^5.0.0`
@mantine/form (source)	`^4.2.12` -> `^5.0.0`
@mantine/hooks (source)	`^4.2.12` -> `^5.0.0`
@mantine/modals (source)	`^4.2.12` -> `^5.0.0`
@mantine/next (source)	`^4.2.12` -> `^5.0.0`
@mantine/notifications (source)	`^4.2.12` -> `^5.0.0`
@mantine/rte (source)	`^4.2.12` -> `^5.0.0`

Release Notes

mantinedev/mantine

### [`v5.0.2`](https://togithub.com/mantinedev/mantine/releases/tag/5.0.2) ##### What's Changed - Add `offset` prop to configure spacing between inputs and label in `Checkbox.Group` and `Radio.Group` components - Improve type definition for effect callback in `use-did-update` hook - Add `DateRangePickerValue` type export to `@mantine/dates` package - Fix broken Styles API in Switch component - Change use-uncontrolled hook logic to call `onChange` handler even if state is uncontrolled - Fix incorrect disabled Radio styles applied when `disabled={false}` - Fix FileInput component submitting form when clicked - Disable user-select in Slider thumb and tooltip - Fix incorrect disabled prop handling in uncontrolled Select and MultiSelect components - Fix `onClose` function not being called when Menu is closed with outside click or with escape key - Allow overriding Menu dropdown padding with `classNames` and `styles` props - Forward `className` in Tooltip component to target element to allow usage with Group and MediaQuery components - Fix incorrect cancelation handling in FileButton component when there was previously picked file ([#1854](https://togithub.com/mantinedev/mantine/issues/1854)) - Disable years before 100 in Calendar component to avoid Date object collisions ([#1758](https://togithub.com/mantinedev/mantine/issues/1758)) - Preserve cursor position on format/parse in NumberInput component ([#1908](https://togithub.com/mantinedev/mantine/issues/1908)) - Add `translate="no"` attribute to Prism and Prism.Tabs components to avoid browser translations of code ([#1891](https://togithub.com/mantinedev/mantine/issues/1891)) - Add `resetOnExit` option to use-mouse hook ([#1893](https://togithub.com/mantinedev/mantine/issues/1893)) - Add better types inferring to use-toggle hook with `as const` ([#1892](https://togithub.com/mantinedev/mantine/issues/1892)) - Fix incorrect value formatting for locales in which month name starts with lowercase letter in DatePicker component ([#1845](https://togithub.com/mantinedev/mantine/issues/1845)) - Fix incorrect disabled state handling for clearable Select component ([#1843](https://togithub.com/mantinedev/mantine/issues/1843)) - Fix incorrect MultiSelect placeholder color in Firefox - Migrate `@mantine/form` from `lodash.clonedeep` to `klona` to decrease bundle size - Fix incorrect nested lists validation logic in `@mantine/form` ([#1861](https://togithub.com/mantinedev/mantine/issues/1861)) - Clear list errors when list item is removed to avoid stale errors in `@mantine/form` - Add option to set visibility toggle button aria-label in PasswordInput component - Fix missing Prism props forwarding in Prism.Panel component - Rename id option to modalId to avoid errors with React 18 in `@mantine/modals` package ##### New Contributors - [@hunterwilhelm](https://togithub.com/hunterwilhelm) made their first contribution in [https://github.com/mantinedev/mantine/pull/1848](https://togithub.com/mantinedev/mantine/pull/1848) - [@filiptammergard](https://togithub.com/filiptammergard) made their first contribution in [https://github.com/mantinedev/mantine/pull/1866](https://togithub.com/mantinedev/mantine/pull/1866) - [@arymoraes](https://togithub.com/arymoraes) made their first contribution in [https://github.com/mantinedev/mantine/pull/1884](https://togithub.com/mantinedev/mantine/pull/1884) - [@hpiaia](https://togithub.com/hpiaia) made their first contribution in [https://github.com/mantinedev/mantine/pull/1899](https://togithub.com/mantinedev/mantine/pull/1899) - [@Siris01](https://togithub.com/Siris01) made their first contribution in [https://github.com/mantinedev/mantine/pull/1906](https://togithub.com/mantinedev/mantine/pull/1906) - [@armoniaechaos](https://togithub.com/armoniaechaos) made their first contribution in [https://github.com/mantinedev/mantine/pull/1908](https://togithub.com/mantinedev/mantine/pull/1908) - [@Eliasmgprado](https://togithub.com/Eliasmgprado) made their first contribution in [https://github.com/mantinedev/mantine/pull/1894](https://togithub.com/mantinedev/mantine/pull/1894) - [@ryuhangyeong](https://togithub.com/ryuhangyeong) made their first contribution in [https://github.com/mantinedev/mantine/pull/1891](https://togithub.com/mantinedev/mantine/pull/1891) - [@yudai-nkt](https://togithub.com/yudai-nkt) made their first contribution in [https://github.com/mantinedev/mantine/pull/1892](https://togithub.com/mantinedev/mantine/pull/1892) - [@ercgrat](https://togithub.com/ercgrat) made their first contribution in [https://github.com/mantinedev/mantine/pull/1845](https://togithub.com/mantinedev/mantine/pull/1845) - [@antoinesion](https://togithub.com/antoinesion) made their first contribution in [https://github.com/mantinedev/mantine/pull/1843](https://togithub.com/mantinedev/mantine/pull/1843) **Full Changelog**: https://github.com/mantinedev/mantine/compare/5.0.0...5.0.2 ### [`v5.0.0`](https://togithub.com/mantinedev/mantine/releases/tag/5.0.0) [Compare Source](https://togithub.com/mantinedev/mantine/compare/4.2.12...5.0.0) [View changelog with demos on Mantine website](https://mantine.dev/changelog/5-0-0/) ##### Components API changes ##### Tabs [Tabs](https://mantine.dev/core/tabs/) and associated [Prism.Tabs](https://mantine.dev/others/prism/) components now have new API. New API provides the following enhancements: - Tabs are now more accessible - Tabs content no longer unmounts on tab change, it is hidden with `display: none` - It is now easier to manage controlled tabs state with string value instead of index - With new component structure it is now easier to modify styles of each part with `sx` or `classname` props Tabs component now supports the following new props: - `radius` prop (defaults to `theme.defaultRadius`) - `inverted` prop allows to display panels before controls - `loop` prop control arrow keys behavior (allows to go from first to last and vice versa) - `activateTabWithKeyboard` prop controls how tabs respond to arrows and Home/End key presses - `allowTabDeactivation` prop allows user to deactivate current active tab ##### Accordion [Accordion](https://mantine.dev/core/accordion/) component now has new API with the following new props: - `variant` prop controls visuals, Accordion now has 4 variants - `radius` prop (defaults to `theme.defaultRadius`) controls border-radius for all variants except `default` - `loop` prop control arrow keys behavior (allows to go from first to last and vice versa) - `disabled` prop allows to disable items - `icon` prop adds icon to the opposite side of chevron ##### Tooltip [Tooltip](https://mantine.dev/core/tooltip/) now requires children to be an element or a component, string, numbers, fragments and multiple elements are no longer supported. In addition to that Tooltip no longer wraps target element with div tag, events are added directly to target element. ```tsx import { Tooltip, Badge } from '@mantine/core'; function Demo() { return ( <> Mantine component – ok Raw string, NOT OK – will throw error {/* Number, NOT OK – will throw error */} {2} <>Fragment, NOT OK, will throw error

More that one node

NOT OK, will throw error

); } ``` ##### Popover [Popover](https://mantine.dev/core/popover/) component now has new API with the following breaking changes: - `placement` prop is no longer supported, Popover side and alignment is now controlled with `position` prop - Default value for `trapFocus` and `withinPortal` props is now `false` - Close button and title are no longer supported, if you need these parts – add them on your side in `Popover.Dropdown` component Popover now supports the following new features: - Uncontrolled and controlled mode - `width="target"` prop will make popover width the same as target element - `Popover.Dropdown` can now be styled with system props (`sx`, `className`, padding props, etc.) ##### Menu [Menu](https://mantine.dev/core/menu/) component now uses [Popover](https://mantine.dev/core/popover/) component under the hood and thus its API was changed in the same way: - Menu no longer provides default control, it should now be added with `Menu.Target` - `Menu.Item` component should now be used within `Menu.Dropdown` component - `trapFocus` prop was removed – now it is managed automatically based on `trigger` prop - `closeOnScroll` prop was removed – if you need this feature you will need to implement this logic on your side ##### Avatar `AvatarsGroup` component is no longer exported from `@mantine/core` package, instead you can now use `Avatar.Group` component which can be combined with [Tooltip](https://mantine.dev/core/tooltip/) or [Popover](https://mantine.dev/core/popover/) to display additional information. ##### InputWrapper `InputWrapper` component is no longer exported from `@mantine/core` package, instead you can now use `Input.Wrapper` component. ##### Dropzone [Dropzone](https://mantine.dev/others/dropzone/) component was migrated to context, it no longer supports function as `children`. Instead, you can use `Dropzone.Accept`, `Dropzone.Reject` and `Dropzone.Idle` components to display content based on current status. Other `Dropzone` changes: - `FullScreenDropzone` component is no loner exported from the `@mantine/dropzone` package, use `Dropzone.FullScreen` component instead - `Dropzone.FullScreen` now supports all props from `Dropzone` component - `Dropzone` now uses `data-*` attributes instead of classes to change styles of root element based on current status - `Dropzone` and `Dropzone.FullScreen` components now supports the following new props: `maxFiles`, `autoFocus`, `activateOnClick`, `activateOnDrag`, `activateOnKeyboard`, `dragEventsBubbling`, `onDragEnter`, `onDragLeave`, `onDragOver`, `onFileDialogCancel`, `onFileDialogOpen`, `preventDropOnDocument` ##### Migration to Floating UI All components that have dropdowns ([DatePicker](https://mantine.dev/dates/date-picker/), [Popover](https://mantine.dev/core/popover/), [Select](https://mantine.dev/core/select/), etc.) were migrated to [Floating UI](https://floating-ui.com/) from popper.js: - `position` and `placement` props were merged into `position` prop, for example, `position="top-start"` - Popper component is no longer exported from `@mantine/core` package ##### MantineProvider changes ##### defaultProps, styles and classNames props [MantineProvider](https://mantine.dev/theming/mantine-provider/) no longer supports `styles`, `classNames` and `defaultProps` props. Instead of separate props these values should be added to the theme. This change allows to store all components in one object and share it across multiple environments. For example, it is now much easier to share theme between application and Storybook: ```tsx import { MantineProvider } from '@mantine/core'; function Demo() { return ( ({ tab: { '&[data-active]': { backgroundColor: theme.colors.red[5] }, }, }), }, }, }} > ); } ``` ##### emotionCache prop [MantineProvider](https://mantine.dev/theming/mantine-provider/) no longer supports `emotionOptions` prop, instead you will need to create emotion cache on your side and provide it with `emotionCache` prop. This change was made to enable custom cache to be used during ssr and support more options for emotion usage, for example with shadow dom or with iframe. ```tsx import { MantineProvider, createEmotionCache } from '@mantine/core'; const myCache = createEmotionCache({ key: 'mantine' }); function Demo() { return ( ); } ``` ##### Emotion packages as peer dependencies `@emotion/react` and `@emotion/server` packages are now not installed automatically ([see related issue](https://togithub.com/mantinedev/mantine/issues/1715)) – you will need to install them manually: ```bash yarn add @emotion/react @emotion/server ``` ##### Styles API changes ##### data- attributes Most of components state were migrated to `data-` attributes. This allows to override styles more predictably without using `!important` and reduces complexity of components Styles API. ##### Inputs styles API You can use `Input` and `Input.Wrapper` [Styles API](https://mantine.dev/styles/styles-api/) on [MantineProvider](https://mantine.dev/theming/mantine-provider/) to add styles to all Inputs. ##### Polymorphic components changes Because of internal changes polymorphic components props types exported from `@mantine/core` package are no longer generic types. Now if you want to extend these types you need to provide associated element types on your side. You can find updated polymorphic components guide [here](https://mantine.dev/guides/polymorphic/). ```tsx import type { ButtonProps } from '@mantine/core'; // Previously, no longer supported type MyButtonProps = ButtonProps<'button'> & { label: string }; // Convert to type MyButtonProps = ButtonProps & React.ComponentPropsWithoutRef<'button'> & { label: string }; ``` ##### [@mantine/form](https://togithub.com/mantine/form) changes [use-form](https://mantine.dev/form/use-form/) no longer exports `formList` function, you can now manage lists with just regular arrays. Other changes: - You can now use [objects and lists with any level of nesting](https://mantine.dev/form/nested/) - `useForm` hook now supports `clearInputErrorOnChange` option to disable error clearing when input value changes and `validateInputOnChange` option that adds support for live fields validation - `form.onSubmit` handler now accepts second argument – a function that will be called with errors object when validation fails - `form.addListItem` was renamed to `form.insertListItem`, it now supports inserting items add given index ##### Other breaking changes - [Select](https://mantine.dev/core/select/) and [MultiSelect](https://mantine.dev/core/multi-select/) component now require returning created item from `onCreate` handler - [Portal](https://mantine.dev/core/portal/) component no longer accepts `position` and `zIndex` props – it is now required to add these styles to Portal children - [Modal](https://mantine.dev/core/modal/) component no longer supports `size="full"`, use `size="100%"` instead - FloatingTooltip component was renamed to [Tooltip.Floating](https://mantine.dev/core/tooltip/#floating-tooltip) - Most components with dropdowns (Tooltip, Popover, ColorPicker, DatePicker, Select, etc.) are no longer using Portal by default, it is now required to set `withinPortal` if you need this feature - [Input](https://mantine.dev/core/input/) no longer supports `headless` variant, use `unstyled` prop instead - [AppShell](https://mantine.dev/core/app-shell/) `fixed` prop is now `true` by default - [CheckboxGroup](https://mantine.dev/core/checkbox), [RadioGroup](https://mantine.dev/core/radio/) and [Chips](https://mantine.dev/core/chip/) components are no longer exported from `@mantine/core`, use `Checkbox.Group`, `Radio.Group` and `Chip.Group` components instead - `@mantine/hooks` package no longer exports old `use-form` hook, use `@mantine/form` package instead - [Group](https://mantine.dev/core/group/) component no longer supports `direction` prop, use [Stack](https://mantine.dev/core/stack/) component instead for vertical stacks - [use-uncontrolled](https://mantine.dev/hooks/use-uncontrolled/) hook logic was changed, it no longer supports `rule` parameter - [use-id](https://mantine.dev/hooks/use-id/) hook now supports React 18 `useId` hook with a fallback for older React versions, `generateId` function is no longer supported - `@mantine/hooks` package no longer exports `useBooleanToggle` hook, use `useDisclosure` hook instead - [use-toggle](https://mantine.dev/hooks/use-toggle/) hook API was changed, it no longer accepts initial value as first argument - [use-intersection](https://mantine.dev/hooks/use-intersection/) hook API was changed to keep API consistent across all hooks - [use-focus-return](https://mantine.dev/hooks/use-focus-return/) hook no longer supports `transitionDuration` prop due to changes in [use-focus-trap](https://mantine.dev/hooks/use-focus-trap/) hook - [use-notifications](https://mantine.dev/others/notifications/) hook from `@mantine/notifications` package no longer has `showNotification`, `hideNotification` and other functions, use separate functions exported from the package for that ##### [@mantine/carousel](https://togithub.com/mantine/carousel) package New [@mantine/carousel](https://mantine.dev/others/carousel/) package based on [embla carousel](https://www.embla-carousel.com/). ##### [@mantine/nprogress](https://togithub.com/mantine/nprogress) package New [@mantine/nprogress](https://mantine.dev/others/nprogress/) package displays navigation progress bar at the top of the page, it can be easily integrated with Next.js and other similar frameworks. ##### React 18 support All Mantine components now support React 18, all known issues related to React 18 migration were fixed: - [ColorPicker](https://mantine.dev/core/color-picker/) and [ColorInput](https://mantine.dev/core/color-input/) components no longer throw error on value change - Issue with stale [Dropzone](https://mantine.dev/others/dropzone/) status was fixed - Multiple issues with types were fixed (mostly related to `children` prop changes) - The entire Mantine codebase was migrate to React 18 (documentation website, [Mantine UI](https://ui.mantine.dev), all packages) ##### Unstyled components All components now support `unstyled` prop which removes all non-essential Mantine styles from the component. This is useful when you want to style some component from scratch without overwriting any styles. ##### New theme properties - `theme.activeStyles` lets you override styles added to buttons with `:active` pseudo-class - `theme.headings` now has an option to set `fontWeight` for each heading individually: - `theme.defaultGradient` defines default gradient value for components that support `variant="gradient"` ([Button](/core/button/), [ThemeIcon](/core/theme-icon/), etc.). - `theme.respectReduceMotion` allows to disregard user OS settings and play animations as usual: - `theme.cursorType` determines which cursor type will native controls have. If it is set to `pointer` then [Checkbox](https://mantine.dev/core/checkbox/), [Radio](https://mantine.dev/core/radio/), [NativeSelect](https://mantine.dev/core/native-select/) and other native elements will have `cursor: pointer` style. ##### New components - [FocusTrap](https://mantine.dev/core/focus-trap/) - [FileButton](https://mantine.dev/core/file-button/) - [FileInput](https://mantine.dev/core/file-input/) - [CopyButton](https://mantine.dev/core/copy-button/) - [HoverCard](https://mantine.dev/core/hover-card/) - [NavLink](https://mantine.dev/core/nav-link/) ##### New features - New [ScrollArea.Autosize](https://mantine.dev/core/scroll-area/#scrollareaautosize) component lets you use `ScrollArea` with `maxHeight` - New [Tooltip.Group](https://mantine.dev/core/tooltip/#tooltip-delay-group) component can be used to sync open and close delays for multiple tooltips - New [Button.Group](https://mantine.dev/core/button/#buttongroup) component merges borders of adjacent buttons - [Modal](https://mantine.dev/core/modal/) component now supports `fullScreen` prop - All inputs that use `Input.Wrapper` component under the hood ([TextInput](https://mantine.dev/core/text-input/), [Autocomplete](https://mantine.dev/core/autocomplete/), [DatePicker](https://mantine.dev/dates/date-picker/), etc.) now support `inputContainer` prop. This prop let you add additional elements before/after input element or add floating elements that will be positioned relative to the input. Example with [Tooltip](https://mantine.dev/core/tooltip/). - New `inputWrapperOrder` prop allows to define the order of `Input.Wrapper` parts. - [Input](https://mantine.dev/core/input/) component now exposes `Input.Label`, `Input.Error` and `Input.Description`, that were previously the parts of `InputWrapper` component. You can use these components to create custom form layouts if default `Input.Wrapper` layout does not fit your requirements. - [Card.Section](https://mantine.dev/core/card/#withborder-and-inheritpadding-props) now supports the following props to simplify customizations: `withBorder` prop will add top and bottom border to `Card.Section` depending on its position relative to other content and sections; `inheritPadding` prop will add the same left and right padding to `Card.Section` as set in `Card` component - [Slider and RangeSlider](https://mantine.dev/core/slider/) components now support `thumbSize` prop to configure thumbs width and height from prop. ##### New hooks - [use-counter](https://mantine.dev/hooks/use-counter/) - [use-timeout](https://mantine.dev/hooks/use-timeout/) - [use-document-visibility](https://mantine.dev/hooks/use-document-visibility/) ##### Other changes - [Affix](https://mantine.dev/core/affix/) now supports `withinPortal` prop - [Burger](https://mantine.dev/core/burger/) now supports `transitionDuration` prop - [Collapse](https://mantine.dev/core/collapse/) now support `ref` prop - [NumberInput](https://mantine.dev/core/number-input/) has new increment/decrement controls - [ThemeIcon](https://mantine.dev/core/theme-icon/) now support any CSS color value in `color` prop - [Text](https://mantine.dev/core/) now supports numbers in `size` prop to set size in px - [RichTextEditor](https://mantine.dev/others/rte/) now uses [tabler icons](https://tablericons.com/) instead of Radix icons - [LoadingOverlay](https://mantine.dev/core/loading-overlay/) now supports `overlayBlur` prop - [Slider](https://mantine.dev/core/slider/) now supports `Home` and `End` keys - [Modals manager](https://mantine.dev/modals/) now supports event based functions, it is now the primary way to work with the package - [Prism](https://mantine.dev/others/prism/) now supports `radius` prop - [DatePicker](https://mantine.dev/dates/date-picker/) now supports `modalProps` to spread props to inner [Modal](https://mantine.dev/core/modal/) component - [Anchor](https://mantine.dev/core/anchor/) and [Text](https://mantine.dev/core/text/) components will now inherit font-size from parent if `size` prop is not set - [ScrollArea](https://mantine.dev/core/scroll-area/) now supports `type="never"` to hide scrollbars ##### Documentation updates - [Custom components guide](https://mantine.dev/guides/custom-components/) explains how to add default props and Styles API integration with MantineProvider to any component - [Polymorphic components guide](https://mantine.dev/guides/polymorphic/) explains how to create custom polymorphic components by extending `Box` - [Theme object](https://mantine.dev/theming/theme-object/) documentation describes all theme properties with demos - [Default props](https://mantine.dev/theming/default-props/) documentation explains how components default props work

Configuration

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

🚦 Automerge: Enabled.

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

[ ] If you want to rebase/retry this PR, click this checkbox.

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

JoeKarow / netwerkr

fix(deps): update mantine monorepo to v5 (major) - autoclosed #114

Release Notes

Configuration

Legend