react-tooltip 4 -> 6

react-tooltip 4 brought uuid 7 (open advisory, fixed only in 11) and
had not been maintained since 2022. Tooltip now wraps the v6 component
(no more cast); triggers use data-tooltip-id instead of data-for and
data-tip (Icon, Badge, Tag, claims payload). v6 renders the content in
.react-tooltip-content-wrapper and draws the arrow as its own element
that inherits the background, so the wrapper's child selectors point
there and the ::after arrow colours for accounts-badge are gone.

The accounts-badge block in the global styles was never closed (as
upstream); it is closed now with the same nesting, so its link colours
still apply only inside badge tooltips.

Checked in a headless browser on Zagros, the "available on all
networks" account badge: with v4 the tooltip was one 1525px line
starting off-screen at x=-260; with v6 it is 300px wide (the max-width
already in the styles), wrapped, on screen, arrow on the badge, and in
the light accounts-badge style the styles define.

packages/react-components/src/Badge.tsx

@@ -31,7 +31,7 @@ function Badge ({ className = '', color = 'normal', hover, hoverAction, icon, in
 
   const [trigger] = useState(() => `${badgeTestId}-hover-${Date.now()}-${badgeId++}`);
   const extraProps = hover
-    ? { 'data-for': trigger, 'data-tip': true }
+    ? { 'data-tooltip-id': trigger }
     : {};
   const isHighlight = color === 'highlight';
 

packages/react-components/src/Icon.tsx

@@ -28,10 +28,7 @@ function Icon ({ className = '', color = 'normal', icon, isPadded, isSpinning, o
   const extraProps: Record<string, unknown> = {
     'data-testid': icon,
     ...(tooltip
-      ? {
-        'data-for': tooltip,
-        'data-tip': true
-      }
+      ? { 'data-tooltip-id': tooltip }
       : {}
     )
   };

packages/react-components/src/Tag.tsx

@@ -28,8 +28,7 @@ function Tag ({ className = '', color = 'theme', hover, label, size = 'small' }:
     <StyledDiv
       className={`${className} ui--Tag ${color}Color ${size}Size ${theme}Theme`}
       color={color || 'grey'}
-      data-for={hover && trigger}
-      data-tip={!!hover}
+      data-tooltip-id={hover ? trigger : undefined}
     >
       {label}
       {hover && (

packages/react-components/src/Tooltip.tsx

@@ -3,7 +3,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import ReactTooltip from 'react-tooltip';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
 
 import { styled } from './styled.js';
 
@@ -43,7 +43,6 @@ function Tooltip ({ children, className = '', isClickable = false, place, text,
     <StyledReactTooltip
       className={`${className} ui--Tooltip`}
       clickable={isClickable}
-      effect='solid'
       id={trigger}
       place={place}
     >
@@ -55,15 +54,14 @@ function Tooltip ({ children, className = '', isClickable = false, place, text,
   );
 }
 
-// FIXME This cast should really not be needed since the export is React.Component<TooltipProps>,
-// however while it works as specified, it fails here on the definition. Until we have the component
-// upgraded to latest, we probably don't want to start digging...
-const StyledReactTooltip = styled(ReactTooltip as unknown as React.ComponentType<any>)`
+// The content sits in react-tooltip's .react-tooltip-content-wrapper, next to
+// its .react-tooltip-arrow element.
+const StyledReactTooltip = styled(ReactTooltip)`
   .tooltipSpacer {
     padding-bottom: 0.1rem;
   }
 
-  > div {
+  .react-tooltip-content-wrapper > div {
     overflow: hidden;
   }
 
@@ -96,7 +94,7 @@ const StyledReactTooltip = styled(ReactTooltip as unknown as React.ComponentType
     margin-top: 0.75rem;
   }
 
-  > div+div {
+  .react-tooltip-content-wrapper > div+div {
     margin-top: 0.5rem;
   }
 

packages/react-components/src/styles/components.ts

@@ -130,19 +130,12 @@ export default `
       box-shadow: 0 2px 4px 0 rgb(34 36 38 / 12%), 0 2px 10px 0 rgb(34 36 38 / 15%);
       z-index: 999;
 
-      &.place-top::after {
-        border-top-color: var(--bg-menu) !important;
-      }
+      a {
+        color: #3BBEFF;
 
-      &.place-right::after {
-        border-right-color: var(--bg-menu) !important;
-      }
-
-    a {
-      color: #3BBEFF;
-
-      &.purpleColor {
-        color: #E6007A;
+        &.purpleColor {
+          color: #E6007A;
+        }
       }
     }
   }