Update @elastic/ml-ui dependencies (main) (elastic#204210)

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@types/he](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/he) ([source](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/he)) | devDependencies | minor | [`^1.1.1` -> `^1.2.3`](https://renovatebot.com/diffs/npm/@types%2fhe/1.1.1/1.2.3) | | [react-popper-tooltip](https://github.com/mohsinulhaq/react-popper-tooltip) | dependencies | major | [`^3.1.1` -> `^4.4.2`](https://renovatebot.com/diffs/npm/react-popper-tooltip/3.1.1/4.4.2) | --- ### Release Notes <details> <summary>mohsinulhaq/react-popper-tooltip (react-popper-tooltip)</summary> ### [`v4.4.2`](https://github.com/mohsinulhaq/react-popper-tooltip/releases/tag/v4.4.2): Fix missing hover check in interactive mode [Compare Source](https://github.com/mohsinulhaq/react-popper-tooltip/compare/v4.4.1...v4.4.2) Thanks, [@&elastic#8203;cgsdev0](https://github.com/cgsdev0) [https://github.com/mohsinulhaq/react-popper-tooltip/pull/156](https://github.com/mohsinulhaq/react-popper-tooltip/pull/156) ### [`v4.4.1`](https://github.com/mohsinulhaq/react-popper-tooltip/releases/tag/v4.4.1): Fix unintentional dependency change [Compare Source](https://github.com/mohsinulhaq/react-popper-tooltip/compare/v4.4.0...v4.4.1) Thanks [@&elastic#8203;JohnDaly](https://github.com/JohnDaly) ### [`v4.4.0`](https://github.com/mohsinulhaq/react-popper-tooltip/releases/tag/v4.4.0): Add double click trigger, improve styles declaration, ability to change default tooltip text color [https://github.com/mohsinulhaq/react-popper-tooltip/pull/148](https://github.com/mohsinulhaq/react-popper-tooltip/pull/148) [https://github.com/mohsinulhaq/react-popper-tooltip/pull/149](https://github.com/mohsinulhaq/react-popper-tooltip/pull/149) [https://github.com/mohsinulhaq/react-popper-tooltip/pull/154](https://github.com/mohsinulhaq/react-popper-tooltip/pull/154) ### [`v4.3.0`](https://github.com/mohsinulhaq/react-popper-tooltip/releases/tag/v4.3.0): Add Shadow DOM support [Compare Source](https://github.com/mohsinulhaq/react-popper-tooltip/compare/v4.2.0...v4.3.0) As pointed out by [https://github.com/mohsinulhaq/react-popper-tooltip/issues/133](https://github.com/mohsinulhaq/react-popper-tooltip/issues/133) (thanks [@&elastic#8203;shovalk](https://github.com/shovalk)), interactions with the tooltip when rendered using Shadow DOM wasn't working properly. This release adds support for that by using [Event.composedPath](https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath) to get event target, with `event.target` as fallback for IE11. ### [`v4.2.0`](https://github.com/mohsinulhaq/react-popper-tooltip/releases/tag/v4.2.0): Revert to mouseenter/mouseleave hover mechanic [Compare Source](https://github.com/mohsinulhaq/react-popper-tooltip/compare/v4.1.2...v4.2.0) `v4.1.0` introduced a new way of handling hover trigger, which had a couple of improvements over the old one, but unintentionally led to another set of serious issues. We have now reverted to the older hover mechanic while also solving the older problems by setting `pointer-events: none` on the arrow as well as the non-interactive tooltip. ### [`v4.1.2`](https://github.com/mohsinulhaq/react-popper-tooltip/releases/tag/v4.1.2): Hover trigger bug fixes introduced in v4.1.0 🐛 [Compare Source](https://github.com/mohsinulhaq/react-popper-tooltip/compare/v4.1.1...v4.1.2) Fixes: [https://github.com/mohsinulhaq/react-popper-tooltip/issues/117](https://github.com/mohsinulhaq/react-popper-tooltip/issues/117) & [https://github.com/mohsinulhaq/react-popper-tooltip/issues/118](https://github.com/mohsinulhaq/react-popper-tooltip/issues/118) ### [`v4.1.1`](https://github.com/mohsinulhaq/react-popper-tooltip/compare/v4.1.0...v4.1.1) [Compare Source](https://github.com/mohsinulhaq/react-popper-tooltip/compare/v4.1.0...v4.1.1) ### [`v4.1.0`](https://github.com/mohsinulhaq/react-popper-tooltip/releases/tag/v4.1.0): An improved and more resilient hover trigger! Thanks to the contribution by [@&elastic#8203;czabaj](https://github.com/czabaj) 👑, the hover trigger is now improved quite a bit, accounting for the gap between the trigger and the tooltip and also fixing a glitch in cases where tooltip and trigger overlap. ### [`v4.0.0`](https://github.com/mohsinulhaq/react-popper-tooltip/releases/tag/v4.0.0): usePopperTooltip hook! 🪝 [Compare Source](https://github.com/mohsinulhaq/react-popper-tooltip/compare/v3.1.1...v4.0.0) ### Release notes With **react-popper**, used under the hood of **react-popper-tooltip**, introducing the `usePopper` hook in the last major update, we're now releasing the hook version of our own library as well - `usePopperTooltip`. The hook provides many new features and flexibility and allows for implementations not possible before. #### Breaking changes This release onwards, the hook is the only way of creating tooltips. This version drops the support of the `TooltipTrigger` render prop component. If you want to upgrade and still keep using render prop API, refer to our example section to implement the legacy API with our new hook. We wrote this version from scratch. Although thoroughly tested, it can still possibly contain some regressions. Please, report any problems using the [issues link](https://github.com/mohsinulhaq/react-popper-tooltip/issues). - For the sake of consistency, we made some changes to the props names. - `defaultTooltipShown` is renamed to `defaultVisible` - `tooltipShown` is renamed to `visible` - `onVisibilityChange` is renamed to `onVisibleChange` - `closeOnReferenceHidden` is renamed to `closeOnTriggerHidden` and the default value changed from `true` to `false` - The default placement is now `bottom` instead of `right`, in line with react-popper defaults. - The string value `"none"` for the prop `trigger` is replaced with `null`. - The default CSS has a few positioning and naming changes. - Previously, when a user hovered the tooltip, it stayed open to allow the user to interact with the tooltip's content. Now the tooltip closes as soon as the cursor leaves the trigger element. The new option `interactive` has been added to configure this behavior. - `getTriggerProps` and `arrowRef` are no longer needed. </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://github.com/renovatebot/renovate/discussions) if that's undesired. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: elastic-renovate-prod[bot] <174716857+elastic-renovate-prod[bot]@users.noreply.github.com>
walterra · Jan 22, 2025 · 71b34a9 · 71b34a9
1 parent 10519c2
commit 71b34a9
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 75 deletions.
diff --git a/package.json b/package.json
@@ -1068,7 +1068,7 @@
     "ansi-regex": "^6.1.0",
     "antlr4": "^4.13.1-patch-1",
     "archiver": "^7.0.1",
-    "async": "^3.2.3",
+    "async": "^3.2.6",
     "aws4": "^1.13.2",
     "axios": "^1.7.9",
     "base64-js": "^1.3.1",
@@ -1219,7 +1219,7 @@
     "react-hook-form": "^7.44.2",
     "react-intl": "6.6.6",
     "react-markdown": "^6.0.3",
-    "react-popper-tooltip": "^3.1.1",
+    "react-popper-tooltip": "^4.4.2",
     "react-recompose": "^0.33.0",
     "react-redux": "^7.2.8",
     "react-reverse-portal": "^2.1.2",
@@ -1553,7 +1553,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/adm-zip": "^0.5.0",
     "@types/archiver": "^5.3.1",
-    "@types/async": "^3.2.3",
+    "@types/async": "^3.2.24",
     "@types/aws4": "^1.5.0",
     "@types/base64-js": "^1.2.5",
     "@types/byte-size": "^8.1.0",
@@ -1591,7 +1591,7 @@
     "@types/gulp": "^4.0.6",
     "@types/hapi__cookie": "^12.0.5",
     "@types/has-ansi": "^3.0.0",
-    "@types/he": "^1.1.1",
+    "@types/he": "^1.2.3",
     "@types/history": "^4.7.9",
     "@types/hjson": "^2.4.2",
     "@types/http-proxy": "^1.17.4",

diff --git a/.../platform/plugins/shared/ml/public/application/components/chart_tooltip/chart_tooltip.tsx b/.../platform/plugins/shared/ml/public/application/components/chart_tooltip/chart_tooltip.tsx
@@ -6,10 +6,9 @@
  */
 
 import type { FC } from 'react';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
-import TooltipTrigger from 'react-popper-tooltip';
-import type { ChildrenArg, TooltipTriggerProps } from 'react-popper-tooltip/dist/types';
+import { usePopperTooltip } from 'react-popper-tooltip';
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import type { TooltipValueFormatter } from '@elastic/charts';
@@ -93,13 +92,30 @@ export const FormattedTooltip: FC<{ tooltipData: TooltipData }> = ({ tooltipData
  */
 const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) => {
   const [tooltipData, setData] = useState<TooltipData>([]);
-  const refCallback = useRef<ChildrenArg['triggerRef']>();
+
+  const { getTooltipProps, setTooltipRef, setTriggerRef } = usePopperTooltip(
+    {
+      placement: 'top-start',
+      trigger: null,
+      delayHide: 1000,
+    },
+    {
+      modifiers: [
+        {
+          name: 'preventOverflow',
+          options: {
+            rootBoundary: 'viewport',
+          },
+        },
+      ],
+    }
+  );
 
   useEffect(() => {
     const subscription = service.tooltipState$.subscribe((tooltipState) => {
-      if (refCallback.current && typeof refCallback.current === 'function') {
+      if (setTriggerRef && typeof setTriggerRef === 'function') {
         // update trigger
-        refCallback.current(tooltipState.target);
+        setTriggerRef(tooltipState.target);
       }
       setData(tooltipState.tooltipData);
     });
@@ -109,53 +125,16 @@ const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) =
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const triggerCallback = useCallback(
-    (({ triggerRef }) => {
-      // obtain the reference to the trigger setter callback
-      // to update the target based on changes from the service.
-      refCallback.current = triggerRef;
-      // actual trigger is resolved by the service, hence don't render
-      return null;
-    }) as TooltipTriggerProps['children'],
-    []
-  );
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const tooltipCallback = useCallback(
-    (({ tooltipRef, getTooltipProps }) => {
-      return (
-        <div
-          {...getTooltipProps({
-            ref: tooltipRef,
-          })}
-        >
-          <FormattedTooltip tooltipData={tooltipData} />
-        </div>
-      );
-    }) as TooltipTriggerProps['tooltip'],
-    [tooltipData]
-  );
-
   const isTooltipShown = tooltipData.length > 0;
 
   return (
-    <TooltipTrigger
-      modifiers={[
-        {
-          name: 'preventOverflow',
-          options: {
-            rootBoundary: 'viewport',
-          },
-        },
-      ]}
-      placement="top-start"
-      trigger="none"
-      tooltipShown={isTooltipShown}
-      tooltip={tooltipCallback}
-    >
-      {triggerCallback}
-    </TooltipTrigger>
+    <>
+      {isTooltipShown && (
+        <div ref={setTooltipRef} {...getTooltipProps({ className: 'tooltip-container' })}>
+          <FormattedTooltip tooltipData={tooltipData} />
+        </div>
+      )}
+    </>
   );
 });
 

diff --git a/yarn.lock b/yarn.lock
@@ -9113,7 +9113,7 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@popperjs/core@^2.11.8", "@popperjs/core@^2.5.4":
+"@popperjs/core@^2.11.5", "@popperjs/core@^2.11.8":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
@@ -11207,10 +11207,10 @@
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708"
   integrity sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==
 
-"@types/async@^3.2.3":
-  version "3.2.15"
-  resolved "https://registry.yarnpkg.com/@types/async/-/async-3.2.15.tgz#26d4768fdda0e466f18d6c9918ca28cc89a4e1fe"
-  integrity sha512-PAmPfzvFA31mRoqZyTVsgJMsvbynR429UTTxhmfsUCrWGh3/fxOrzqBtaTPJsn4UtzTv4Vb0+/O7CARWb69N4g==
+"@types/async@^3.2.24":
+  version "3.2.24"
+  resolved "https://registry.yarnpkg.com/@types/async/-/async-3.2.24.tgz#3a96351047575bbcf2340541b2d955a35339608f"
+  integrity sha512-8iHVLHsCCOBKjCF2KwFe0p9Z3rfM9mL+sSP8btyR5vTjJRAqpBYD28/ZLgXPf0pjG1VxOvtCV/BgXkQbpSe8Hw==
 
 "@types/aws4@^1.5.0":
   version "1.11.3"
@@ -11696,10 +11696,10 @@
   dependencies:
     "@types/unist" "*"
 
-"@types/he@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/he/-/he-1.1.1.tgz#19e14033c4ee8f1a702c74dcc6182664839ac2b7"
-  integrity sha512-jpzrsR1ns0n3kyWt92QfOUQhIuJGQ9+QGa7M62rO6toe98woQjnsnzjdMtsQXCdvjjmqjS2ZBCC7xKw0cdzU+Q==
+"@types/he@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@types/he/-/he-1.2.3.tgz#c33ca3096f30cbd5d68d78211572de3f9adff75a"
+  integrity sha512-q67/qwlxblDzEDvzHhVkwc1gzVWxaNxeyHUBF4xElrvjL11O+Ytze+1fGpBHlr/H9myiBUaUXNnNPmBHxxfAcA==
 
 "@types/history@^4.7.11", "@types/history@^4.7.9":
   version "4.7.11"
@@ -13942,7 +13942,7 @@ async@^1.4.2:
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
   integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
 
-async@^3.2.0, async@^3.2.3, async@^3.2.4:
+async@^3.2.0, async@^3.2.3, async@^3.2.4, async@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.6.tgz#1b0728e14929d51b85b449b7f06e27c1145e38ce"
   integrity sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==
@@ -27659,19 +27659,19 @@ react-markdown@^6.0.3:
     unist-util-visit "^2.0.0"
     vfile "^4.0.0"
 
-react-popper-tooltip@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz#329569eb7b287008f04fcbddb6370452ad3f9eac"
-  integrity sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==
+react-popper-tooltip@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-4.4.2.tgz#0dc4894b8e00ba731f89bd2d30584f6032ec6163"
+  integrity sha512-y48r0mpzysRTZAIh8m2kpZ8S1YPNqGtQPDrlXYSGvDS1c1GpG/NUXbsbIdfbhXfmSaRJuTcaT6N1q3CKuHRVbg==
   dependencies:
-    "@babel/runtime" "^7.12.5"
-    "@popperjs/core" "^2.5.4"
-    react-popper "^2.2.4"
+    "@babel/runtime" "^7.18.3"
+    "@popperjs/core" "^2.11.5"
+    react-popper "^2.3.0"
 
-react-popper@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.4.tgz#d2ad3d2474ac9f1abf93df3099d408e5aa6a2e22"
-  integrity sha512-NacOu4zWupdQjVXq02XpTD3yFPSfg5a7fex0wa3uGKVkFK7UN6LvVxgcb+xYr56UCuWiNPMH20tntdVdJRwYew==
+react-popper@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
+  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
   dependencies:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"