From 09fbca8121c6590aabbffb7953cc087977dafa0f Mon Sep 17 00:00:00 2001 From: Satoshi Qazi Muhammed Date: Sat, 10 Oct 2026 05:59:10 +0400 Subject: [PATCH] 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 | 3 +- packages/react-components/package.json | 2 +- packages/react-components/src/Badge.tsx | 2 +- packages/react-components/src/Icon.tsx | 5 +- packages/react-components/src/Tag.tsx | 3 +- packages/react-components/src/Tooltip.tsx | 14 ++--- .../react-components/src/styles/components.ts | 17 ++---- yarn.lock | 60 +++++++++++++------ 8 files changed, 58 insertions(+), 48 deletions(-) diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx index b8b3722..e48dbd6 100644 --- a/packages/page-claims/src/index.tsx +++ b/packages/page-claims/src/index.tsx @@ -264,8 +264,7 @@ function ClaimsApp ({ basePath }: Props): React.ReactElement { text={payload} > {payload} diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 2d1737d..5093723 100644 --- a/packages/react-components/package.json +++ b/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", diff --git a/packages/react-components/src/Badge.tsx b/packages/react-components/src/Badge.tsx index 2adb268..6ae5e3c 100644 --- a/packages/react-components/src/Badge.tsx +++ b/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'; diff --git a/packages/react-components/src/Icon.tsx b/packages/react-components/src/Icon.tsx index 2f5406a..44dc8a0 100644 --- a/packages/react-components/src/Icon.tsx +++ b/packages/react-components/src/Icon.tsx @@ -28,10 +28,7 @@ function Icon ({ className = '', color = 'normal', icon, isPadded, isSpinning, o const extraProps: Record = { 'data-testid': icon, ...(tooltip - ? { - 'data-for': tooltip, - 'data-tip': true - } + ? { 'data-tooltip-id': tooltip } : {} ) }; diff --git a/packages/react-components/src/Tag.tsx b/packages/react-components/src/Tag.tsx index bc99b10..d3e1f4d 100644 --- a/packages/react-components/src/Tag.tsx +++ b/packages/react-components/src/Tag.tsx @@ -28,8 +28,7 @@ function Tag ({ className = '', color = 'theme', hover, label, size = 'small' }: {label} {hover && ( diff --git a/packages/react-components/src/Tooltip.tsx b/packages/react-components/src/Tooltip.tsx index 7517931..bfa50aa 100644 --- a/packages/react-components/src/Tooltip.tsx +++ b/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, @@ -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, -// 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)` +// 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; } diff --git a/packages/react-components/src/styles/components.ts b/packages/react-components/src/styles/components.ts index 074468c..e110927 100644 --- a/packages/react-components/src/styles/components.ts +++ b/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; + } } } } diff --git a/yarn.lock b/yarn.lock index b289aad..9bc6f93 100644 --- a/yarn.lock +++ b/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": - version: 4.5.1 - resolution: "react-tooltip@npm:4.5.1" +"react-tooltip@npm:^6.0.8": + version: 6.0.8 + resolution: "react-tooltip@npm:6.0.8" dependencies: - prop-types: "npm:^15.8.1" - uuid: "npm:^7.0.3" + "@floating-ui/dom": "npm:1.7.6" + clsx: "npm:2.1.1" peerDependencies: - react: ">=16.0.0" - react-dom: ">=16.0.0" - checksum: 10/a2031d6a9903f18046bb3374a1a23f739fb5ebd272c049772dec9108d5da141f4cf98354970e824d70a83f06aed48cf7e96ab69616ecc0d4e6e8c73cef4b6823 + react: ">=16.14.0" + react-dom: ">=16.14.0" + 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"