From 7edfae87f8ccc03d113d45f1563d870b2b249a17 Mon Sep 17 00:00:00 2001
From: Rob Brackett <rob@robbrackett.com>
Date: Mon, 16 Jun 2025 21:48:18 -0700
Subject: [PATCH] Upgrade react-tooltip to v5.29.1

Part of the modernization work in #1082.
---
 package-lock.json                             | 113 +++++++++++++-----
 package.json                                  |   2 +-
 src/components/annotation-form.jsx            |   8 +-
 src/components/page-details/page-details.jsx  |   6 +-
 src/components/page-list/page-list.jsx        |   8 +-
 src/components/standard-tooltip.jsx           |   5 -
 .../standard-tooltip/standard-tooltip.css     |   3 +
 .../standard-tooltip/standard-tooltip.jsx     |  10 ++
 8 files changed, 105 insertions(+), 50 deletions(-)
 delete mode 100644 src/components/standard-tooltip.jsx
 create mode 100644 src/components/standard-tooltip/standard-tooltip.css
 create mode 100644 src/components/standard-tooltip/standard-tooltip.jsx

diff --git a/package-lock.json b/package-lock.json
index 4ab0f5ba..8bfb749b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,7 +50,7 @@
         "react-dates": "^21.8.0",
         "react-dom": "^16.14.0",
         "react-router-dom": "^5.3.0",
-        "react-tooltip": "^4.5.1",
+        "react-tooltip": "^5.29.1",
         "style-loader": "^4.0.0",
         "webpack": "^5.99.9",
         "webpack-bundle-analyzer": "^4.10.2",
@@ -2083,6 +2083,34 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.1.tgz",
+      "integrity": "sha512-azI0DrjMMfIug/ExbBaeDVJXcY0a7EPvPjb2xAJPa4HeimBX+Z18HK8QQR3jb6356SnDDdxx+hinMLcJEDdOjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.1.tgz",
+      "integrity": "sha512-cwsmW/zyw5ltYTUeeYJ60CnQuPqmGwuGVhG9w0PRaRKkAyi38BT5CKrpIbb+jtahSwUl04cWzSx9ZOIxeS6RsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.1",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@gfx/zopfli": {
       "version": "1.0.15",
       "resolved": "https://registry.npmjs.org/@gfx/zopfli/-/zopfli-1.0.15.tgz",
@@ -6429,6 +6457,13 @@
       "integrity": "sha512-UX0OwmYRYQQetfrLEZeewIFFI+wSTofC+pMBLNuH3RUuu/xzG1oz84UCEDOSoQlN3fZ4+AzmV50ZYvGqkMh9yA==",
       "dev": true
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -14183,29 +14218,18 @@
       }
     },
     "node_modules/react-tooltip": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.5.1.tgz",
-      "integrity": "sha512-Zo+CSFUGXar1uV+bgXFFDe7VeS2iByeIp5rTgTcc2HqtuOS5D76QapejNNfx320MCY91TlhTQat36KGFTqgcvw==",
+      "version": "5.29.1",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.29.1.tgz",
+      "integrity": "sha512-rmJmEb/p99xWhwmVT7F7riLG08wwKykjHiMGbDPloNJk3tdI73oHsVOwzZ4SRjqMdd5/xwb/4nmz0RcoMfY7Bw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "prop-types": "^15.8.1",
-        "uuid": "^7.0.3"
-      },
-      "engines": {
-        "npm": ">=6.13"
+        "@floating-ui/dom": "^1.6.1",
+        "classnames": "^2.3.0"
       },
       "peerDependencies": {
-        "react": ">=16.0.0",
-        "react-dom": ">=16.0.0"
-      }
-    },
-    "node_modules/react-tooltip/node_modules/uuid": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
-      "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==",
-      "dev": true,
-      "bin": {
-        "uuid": "dist/bin/uuid"
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
       }
     },
     "node_modules/react-with-direction": {
@@ -18161,6 +18185,31 @@
       "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
       "dev": true
     },
+    "@floating-ui/core": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.1.tgz",
+      "integrity": "sha512-azI0DrjMMfIug/ExbBaeDVJXcY0a7EPvPjb2xAJPa4HeimBX+Z18HK8QQR3jb6356SnDDdxx+hinMLcJEDdOjw==",
+      "dev": true,
+      "requires": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.1.tgz",
+      "integrity": "sha512-cwsmW/zyw5ltYTUeeYJ60CnQuPqmGwuGVhG9w0PRaRKkAyi38BT5CKrpIbb+jtahSwUl04cWzSx9ZOIxeS6RsQ==",
+      "dev": true,
+      "requires": {
+        "@floating-ui/core": "^1.7.1",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "dev": true
+    },
     "@gfx/zopfli": {
       "version": "1.0.15",
       "resolved": "https://registry.npmjs.org/@gfx/zopfli/-/zopfli-1.0.15.tgz",
@@ -21575,6 +21624,12 @@
       "integrity": "sha512-UX0OwmYRYQQetfrLEZeewIFFI+wSTofC+pMBLNuH3RUuu/xzG1oz84UCEDOSoQlN3fZ4+AzmV50ZYvGqkMh9yA==",
       "dev": true
     },
+    "classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "dev": true
+    },
     "cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -27219,21 +27274,13 @@
       }
     },
     "react-tooltip": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.5.1.tgz",
-      "integrity": "sha512-Zo+CSFUGXar1uV+bgXFFDe7VeS2iByeIp5rTgTcc2HqtuOS5D76QapejNNfx320MCY91TlhTQat36KGFTqgcvw==",
+      "version": "5.29.1",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.29.1.tgz",
+      "integrity": "sha512-rmJmEb/p99xWhwmVT7F7riLG08wwKykjHiMGbDPloNJk3tdI73oHsVOwzZ4SRjqMdd5/xwb/4nmz0RcoMfY7Bw==",
       "dev": true,
       "requires": {
-        "prop-types": "^15.8.1",
-        "uuid": "^7.0.3"
-      },
-      "dependencies": {
-        "uuid": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
-          "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==",
-          "dev": true
-        }
+        "@floating-ui/dom": "^1.6.1",
+        "classnames": "^2.3.0"
       }
     },
     "react-with-direction": {
diff --git a/package.json b/package.json
index 597a1202..75022875 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "react-dates": "^21.8.0",
     "react-dom": "^16.14.0",
     "react-router-dom": "^5.3.0",
-    "react-tooltip": "^4.5.1",
+    "react-tooltip": "^5.29.1",
     "style-loader": "^4.0.0",
     "webpack": "^5.99.9",
     "webpack-bundle-analyzer": "^4.10.2",
diff --git a/src/components/annotation-form.jsx b/src/components/annotation-form.jsx
index badf8b93..b170e5a3 100644
--- a/src/components/annotation-form.jsx
+++ b/src/components/annotation-form.jsx
@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import StandardTooltip from './standard-tooltip';
+import StandardTooltip from './standard-tooltip/standard-tooltip';
 
 /**
  * @typedef {Object} AnnotationFormProps
@@ -83,7 +83,7 @@ export default class AnnotationForm extends Component {
 
         <StandardTooltip
           id="annotation-tooltip"
-          disable={!this.props.collapsed}
+          hidden={!this.props.collapsed}
         />
       </form>
     );
@@ -123,8 +123,8 @@ function Checkbox ({ children, formValues, name, onChange, collapsed }) {
       />
       <label
         className="toggle-btn"
-        data-for="annotation-tooltip"
-        data-tip={children}
+        data-tooltip-id="annotation-tooltip"
+        data-tooltip-content={children}
         data-fieldNumber={fieldNumber}
         htmlFor={uuid}
       >
diff --git a/src/components/page-details/page-details.jsx b/src/components/page-details/page-details.jsx
index f8d35011..0254efff 100644
--- a/src/components/page-details/page-details.jsx
+++ b/src/components/page-details/page-details.jsx
@@ -6,7 +6,7 @@ import Loading from '../loading';
 import ExternalLink from '../external-link';
 import PageUrlDetails from '../page-url-details/page-url-details';
 import PageTag from '../page-tag/page-tag';
-import StandardTooltip from '../standard-tooltip';
+import StandardTooltip from '../standard-tooltip/standard-tooltip';
 import { describeHttpStatus } from '../../scripts/http-info';
 import { removeNonUserTags } from '../../scripts/tools';
 
@@ -141,8 +141,8 @@ export default class PageDetails extends Component {
               <span
                 styleName={`pageStyles.info-item pageStyles.${statusError ? 'status-error' : 'status-ok'}`}
                 data-http-status={statusCode}
-                data-for="page-tooltip"
-                data-tip={describeHttpStatus(statusCode)}
+                data-tooltip-id="page-tooltip"
+                data-tooltip-content={describeHttpStatus(statusCode)}
               >
                 {statusError ? '✘' : '•'} HTTP Status: {statusCode}
               </span>
diff --git a/src/components/page-list/page-list.jsx b/src/components/page-list/page-list.jsx
index 6ef4c120..8bdab8ed 100644
--- a/src/components/page-list/page-list.jsx
+++ b/src/components/page-list/page-list.jsx
@@ -1,7 +1,7 @@
 import Loading from '../loading';
 import { Component } from 'react';
 import SearchBar from '../search-bar/search-bar';
-import StandardTooltip from '../standard-tooltip';
+import StandardTooltip from '../standard-tooltip/standard-tooltip';
 import PageTag from '../page-tag/page-tag';
 import {
   getHttpStatusCategory,
@@ -56,7 +56,7 @@ export default class PageList extends Component {
   renderPages () {
     return (
       <div styleName="listStyles.container">
-        <StandardTooltip id="list-tooltip" />
+        <StandardTooltip id="list-tooltip" delayHide={20_000} />
         <table styleName="listStyles.table listStyles.page-list">
           <thead>{this.renderHeader()}</thead>
           <tbody>
@@ -94,8 +94,8 @@ export default class PageList extends Component {
         <td>{tags.map(tag => <PageTag tag={tag} key={tag.name} />)}</td>
         <td
           data-status-category={statusCategory}
-          data-for="list-tooltip"
-          data-tip={describeHttpStatus(statusCode)}
+          data-tooltip-id="list-tooltip"
+          data-tooltip-content={describeHttpStatus(statusCode)}
         >
           {statusCode >= 400 ? '✘' : '•'} {record.status}
         </td>
diff --git a/src/components/standard-tooltip.jsx b/src/components/standard-tooltip.jsx
deleted file mode 100644
index 310f7997..00000000
--- a/src/components/standard-tooltip.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import Tooltip from 'react-tooltip';
-
-export default function StandardTooltip (props) {
-  return <Tooltip place="top" effect="solid" {...props} />;
-}
diff --git a/src/components/standard-tooltip/standard-tooltip.css b/src/components/standard-tooltip/standard-tooltip.css
new file mode 100644
index 00000000..d287b503
--- /dev/null
+++ b/src/components/standard-tooltip/standard-tooltip.css
@@ -0,0 +1,3 @@
+.standard-tooltip {
+  z-index: 10;
+}
diff --git a/src/components/standard-tooltip/standard-tooltip.jsx b/src/components/standard-tooltip/standard-tooltip.jsx
new file mode 100644
index 00000000..1b0fbd4b
--- /dev/null
+++ b/src/components/standard-tooltip/standard-tooltip.jsx
@@ -0,0 +1,10 @@
+import { Tooltip } from 'react-tooltip';
+import styles from './standard-tooltip.css'; // eslint-disable-line
+
+export default function StandardTooltip (props) {
+  return <Tooltip
+    place="top"
+    styleName="styles.standard-tooltip"
+    {...props}
+  />;
+}