From eb731614ba01ce69c240b9da6c9d482ffe76cd14 Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Wed, 22 Jan 2025 17:42:41 +0100 Subject: [PATCH] [8.17] Update @elastic/ml-ui dependencies (main) (#204210) (#207794) # Backport This will backport the following commits from `main` to `8.17`: - [Update @elastic/ml-ui dependencies (main) (#204210)](https://github.com/elastic/kibana/pull/204210) --------- Co-authored-by: elastic-renovate-prod[bot] <174716857+elastic-renovate-prod[bot]@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- package.json | 8 +- .../chart_tooltip/chart_tooltip.tsx | 79 +++++++------------ yarn.lock | 42 +++++----- 3 files changed, 54 insertions(+), 75 deletions(-) diff --git a/package.json b/package.json index 622b2223e5b02..07528a5e13c27 100644 --- a/package.json +++ b/package.json @@ -1078,7 +1078,7 @@ "ansi-regex": "^6.0.1", "antlr4": "^4.13.1-patch-1", "archiver": "^5.3.1", - "async": "^3.2.3", + "async": "^3.2.6", "aws4": "^1.13.2", "axios": "^1.7.9", "base64-js": "^1.3.1", @@ -1227,7 +1227,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-resizable": "^3.0.4", @@ -1533,7 +1533,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", @@ -1571,7 +1571,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/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx b/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx index f279175d01107..89b03a4fc5d12 100644 --- a/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx +++ b/x-pack/plugins/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([]); - const refCallback = useRef(); + + 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 ( -
- -
- ); - }) as TooltipTriggerProps['tooltip'], - [tooltipData] - ); - const isTooltipShown = tooltipData.length > 0; return ( - - {triggerCallback} - + <> + {isTooltipShown && ( +
+ +
+ )} + ); }); diff --git a/yarn.lock b/yarn.lock index 821dbef15ee58..37225bbab483b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8977,7 +8977,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== @@ -11068,10 +11068,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" @@ -11542,10 +11542,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" @@ -13830,7 +13830,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== @@ -27318,19 +27318,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"