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/page-claims/src/index.tsx

@@ -264,8 +264,7 @@ function ClaimsApp ({ basePath }: Props): React.ReactElement<Props> {
                 text={payload}
               >
                 <Payload
-                  data-for='tx-payload'
+                  data-tooltip-id='tx-payload'
-                  data-tip
                 >
                   {payload}
                 </Payload>

packages/react-components/package.json

@@ -43,7 +43,7 @@
     "react-markdown": "^9.0.1",
     "react-router": "^7.18.0",
     "react-router-dom": "^7.18.0",
-    "react-tooltip": "^4.5.1",
+    "react-tooltip": "^6.0.8",
     "rehype-raw": "^7.0.0",
     "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^0.88.2",

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-tooltip-id': tooltip }
-        'data-for': tooltip,
-        'data-tip': true
-      }
       : {}
     )
   };

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-tooltip-id={hover ? trigger : undefined}
-      data-tip={!!hover}
     >
       {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>,
+// The content sits in react-tooltip's .react-tooltip-content-wrapper, next to
-// however while it works as specified, it fails here on the definition. Until we have the component
+// its .react-tooltip-arrow element.
-// upgraded to latest, we probably don't want to start digging...
+const StyledReactTooltip = styled(ReactTooltip)`
-const StyledReactTooltip = styled(ReactTooltip as unknown as React.ComponentType<any>)`
   .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,14 +130,6 @@ 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;
-      }
-
-      &.place-right::after {
-        border-right-color: var(--bg-menu) !important;
-      }
-
       a {
         color: #3BBEFF;
 
@@ -146,4 +138,5 @@ export default `
         }
       }
     }
+  }
 `;

yarn.lock

@@ -571,6 +571,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.7.5":
+  version: 1.8.0
+  resolution: "@floating-ui/core@npm:1.8.0"
+  dependencies:
+    "@floating-ui/utils": "npm:^0.2.12"
+  checksum: 10/762cd5677fd4e82597db2efdd8f1e81d248eac5615d8be755e1bbb5f12a14c56a6bccd735676374d4914db7ccb3f09ec405ec7433e8c48a5521f5d66dc8dd5d6
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:1.7.6":
+  version: 1.7.6
+  resolution: "@floating-ui/dom@npm:1.7.6"
+  dependencies:
+    "@floating-ui/core": "npm:^1.7.5"
+    "@floating-ui/utils": "npm:^0.2.11"
+  checksum: 10/84dff2ffdf85c8b92d7edafc543c55869abbeaeb3007fa983159467e050153b507a0f5fe8e84f88c3f28c35a82de9df9c20a6eef5560cbba3afae19141444ff2
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.11, @floating-ui/utils@npm:^0.2.12":
+  version: 0.2.12
+  resolution: "@floating-ui/utils@npm:0.2.12"
+  checksum: 10/ec4e176fb22d33d75df752c5acf82dcaacae40ed2d09c1a5015cb4081318fff20260db216678e952344b95f90c6b43214762b69eba7c51556ecd82c35a795cff
+  languageName: node
+  linkType: hard
+
 "@fortawesome/fontawesome-common-types@npm:6.7.2":
   version: 6.7.2
   resolution: "@fortawesome/fontawesome-common-types@npm:6.7.2"
@@ -2649,7 +2675,7 @@ __metadata:
     react-markdown: "npm:^9.0.1"
     react-router: "npm:^7.18.0"
     react-router-dom: "npm:^7.18.0"
-    react-tooltip: "npm:^4.5.1"
+    react-tooltip: "npm:^6.0.8"
     rehype-raw: "npm:^7.0.0"
     semantic-ui-css: "npm:^2.5.0"
     semantic-ui-react: "npm:^0.88.2"
@@ -6545,6 +6571,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:2.1.1":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10/cdfb57fa6c7649bbff98d9028c2f0de2f91c86f551179541cf784b1cfdc1562dcb951955f46d54d930a3879931a980e32a46b598acaea274728dbe068deca919
+  languageName: node
+  linkType: hard
+
 "codeflask@npm:^1.4.1":
   version: 1.4.1
   resolution: "codeflask@npm:1.4.1"
@@ -13332,16 +13365,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-tooltip@npm:^4.5.1":
+"react-tooltip@npm:^6.0.8":
-  version: 4.5.1
+  version: 6.0.8
-  resolution: "react-tooltip@npm:4.5.1"
+  resolution: "react-tooltip@npm:6.0.8"
   dependencies:
-    prop-types: "npm:^15.8.1"
+    "@floating-ui/dom": "npm:1.7.6"
-    uuid: "npm:^7.0.3"
+    clsx: "npm:2.1.1"
   peerDependencies:
-    react: ">=16.0.0"
+    react: ">=16.14.0"
-    react-dom: ">=16.0.0"
+    react-dom: ">=16.14.0"
-  checksum: 10/a2031d6a9903f18046bb3374a1a23f739fb5ebd272c049772dec9108d5da141f4cf98354970e824d70a83f06aed48cf7e96ab69616ecc0d4e6e8c73cef4b6823
+  checksum: 10/b0823d8c48375953862c39261bde60b02339b38f64501572bdc51d1c201155a11ca62593b2b1f52d59706d92a35e9933bbf984433a63d5025fce9ba576a81fea
   languageName: node
   linkType: hard
 
@@ -15831,15 +15864,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:^7.0.3":
-  version: 7.0.3
-  resolution: "uuid@npm:7.0.3"
-  bin:
-    uuid: dist/bin/uuid
-  checksum: 10/b2a4d30ecd6581015175487426558aafd7f7b4013a2e30802c128cc28cad9abe46ecd36c02f7fbcde7908fd4672334818d56a441c0871963d6bd89d911bef2ea
-  languageName: node
-  linkType: hard
-
 "validate-npm-package-license@npm:^3.0.1":
   version: 3.0.4
   resolution: "validate-npm-package-license@npm:3.0.4"