Migrate Mantine components to v5

src/renderer/components/icon-button/IconButton.tsx

@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ActionIcon, ActionIconProps, TooltipProps } from '@mantine/core';
 import { Tooltip } from '../tooltip/Tooltip';
 
 type MantineIconButtonProps = ActionIconProps &
-  React.ComponentPropsWithoutRef<'button'>;
+  ComponentPropsWithoutRef<'button'>;
 
 interface IconButtonProps extends MantineIconButtonProps {
   active?: boolean;

src/renderer/components/text/Text.tsx

@@ -1,4 +1,8 @@
-import { ReactNode } from 'react';
+import {
+  ComponentPropsWithoutRef,
+  ComponentPropsWithRef,
+  ReactNode,
+} from 'react';
 import {
   Text as MantineText,
   TextProps as MantineTextProps,
@@ -8,7 +12,10 @@ import styled from 'styled-components';
 import { Font } from 'renderer/styles';
 import { textEllipsis } from 'renderer/styles/mixins';
 
-interface TextProps extends MantineTextProps<'div'> {
+type MantineTextDivProps = MantineTextProps & ComponentPropsWithoutRef<'div'>;
+type MantineTextLinkProps = MantineTextProps & ComponentPropsWithRef<'link'>;
+
+interface TextProps extends MantineTextDivProps {
   children: ReactNode;
   font?: Font;
   link?: boolean;
@@ -19,7 +26,7 @@ interface TextProps extends MantineTextProps<'div'> {
   weight?: number;
 }
 
-interface LinkTextProps extends MantineTextProps<'Link'> {
+interface LinkTextProps extends MantineTextLinkProps {
   children: ReactNode;
   font?: Font;
   link?: boolean;

src/renderer/components/tooltip/Tooltip.tsx

@@ -1,16 +1,14 @@
 import { Tooltip as MantineTooltip, TooltipProps } from '@mantine/core';
-import styles from './Tooltip.module.scss';
 
 export const Tooltip = ({ children, ...rest }: TooltipProps) => {
   return (
     <MantineTooltip
-      classNames={{ arrow: styles.arrow, body: styles.body }}
       radius="xs"
       styles={{
         arrow: {
           background: 'var(--tooltip-bg)',
         },
-        body: {
+        root: {
           background: 'var(--tooltip-bg)',
           color: 'var(--tooltip-text-color)',
           padding: '5px',
@@ -25,8 +23,9 @@ export const Tooltip = ({ children, ...rest }: TooltipProps) => {
 
 Tooltip.defaultProps = {
   openDelay: 0,
-  placement: 'center',
+  position: 'top',
   transition: 'fade',
   transitionDuration: 250,
   withArrow: true,
+  withinPortal: true,
 };