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,
 };

src/renderer/features/player/components/PlayerButton.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import {
   TooltipProps,
   UnstyledButton,
@@ -8,7 +8,9 @@ import { motion } from 'framer-motion';
 import styled, { css } from 'styled-components';
 import { Tooltip } from 'renderer/components';
 
-interface PlayerButtonProps extends UnstyledButtonProps<'button'> {
+type MantineButtonProps = UnstyledButtonProps &
+  ComponentPropsWithoutRef<'button'>;
+interface PlayerButtonProps extends MantineButtonProps {
   icon: ReactNode;
   tooltip?: Omit<TooltipProps, 'children'>;
   variant: 'main' | 'secondary';
@@ -107,13 +109,13 @@ export const PlayerButton = ({
 }: PlayerButtonProps) => {
   if (tooltip) {
     return (
-      <Tooltip {...tooltip}>
-        <MotionWrapper variant={variant}>
+      <MotionWrapper variant={variant}>
+        <Tooltip {...tooltip}>
           <StyledPlayerButton variant={variant} {...rest}>
             {icon}
           </StyledPlayerButton>
-        </MotionWrapper>
-      </Tooltip>
+        </Tooltip>
+      </MotionWrapper>
     );
   }