Upgrade react-popper-tooltip

code/ui/components/package.json

@@ -65,7 +65,7 @@
     "overlayscrollbars": "^1.13.1",
     "polished": "^4.2.2",
     "prettier": "^2.8.0",
-    "react-popper-tooltip": "^3.1.1",
+    "react-popper-tooltip": "^4.4.2",
     "react-syntax-highlighter": "^15.4.5",
     "react-textarea-autosize": "^8.3.0",
     "ts-dedent": "^2.0.0",

code/ui/components/src/tooltip/Tooltip.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import React from 'react';
 import memoize from 'memoizerific';
 
@@ -42,10 +41,10 @@ const Arrow = styled.div<ArrowProps>(
     return { transform };
   },
   ({ theme, color, placement }) => ({
-    bottom: `${match('top', placement, ArrowSpacing * -1, 'auto')}px`,
-    top: `${match('bottom', placement, ArrowSpacing * -1, 'auto')}px`,
-    right: `${match('left', placement, ArrowSpacing * -1, 'auto')}px`,
-    left: `${match('right', placement, ArrowSpacing * -1, 'auto')}px`,
+    bottom: `${match('top', placement, `${ArrowSpacing * -1}px`, 'auto')}`,
+    top: `${match('bottom', placement, `${ArrowSpacing * -1}px`, 'auto')}`,
+    right: `${match('left', placement, `${ArrowSpacing * -1}px`, 'auto')}`,
+    left: `${match('right', placement, `${ArrowSpacing * -1}px`, 'auto')}`,
 
     borderBottomWidth: `${match('top', placement, '0', ArrowSpacing)}px`,
     borderTopWidth: `${match('bottom', placement, '0', ArrowSpacing)}px`,
@@ -89,7 +88,6 @@ const Arrow = styled.div<ArrowProps>(
 
 export interface WrapperProps {
   color: keyof Color;
-  placement: string;
   hidden?: boolean;
   hasChrome: boolean;
 }
@@ -118,35 +116,27 @@ const Wrapper = styled.div<WrapperProps>(
 
 export interface TooltipProps {
   children?: React.ReactNode;
-  arrowRef?: any;
   tooltipRef?: any;
   hasChrome?: boolean;
   arrowProps?: any;
   placement?: string;
   color?: keyof Color;
 }
 
-export const Tooltip: FC<TooltipProps> = ({
-  placement,
-  hasChrome,
-  children,
-  arrowProps,
-  tooltipRef,
-  arrowRef,
-  color,
-  ...props
-}) => {
-  return (
-    <Wrapper hasChrome={hasChrome} placement={placement} ref={tooltipRef} {...props} color={color}>
-      {hasChrome && <Arrow placement={placement} ref={arrowRef} {...arrowProps} color={color} />}
-      {children}
-    </Wrapper>
-  );
-};
+export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  ({ placement, hasChrome, children, arrowProps, tooltipRef, color, ...props }, ref) => {
+    return (
+      <Wrapper hasChrome={hasChrome} ref={ref} {...props} color={color}>
+        {hasChrome && <Arrow placement={placement} {...arrowProps} color={color} />}
+        {children}
+      </Wrapper>
+    );
+  }
+);
 
+Tooltip.displayName = 'Tooltip';
 Tooltip.defaultProps = {
   color: undefined,
-  arrowRef: undefined,
   tooltipRef: undefined,
   hasChrome: true,
   placement: 'top',

code/ui/components/src/tooltip/WithTooltip.tsx

@@ -1,9 +1,11 @@
 import type { FC, ReactNode } from 'react';
 import React, { useCallback, useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
 import { styled } from '@storybook/theming';
 import { global } from '@storybook/global';
 
-import TooltipTrigger from 'react-popper-tooltip';
+import type { TriggerType } from 'react-popper-tooltip';
+import { usePopperTooltip } from 'react-popper-tooltip';
 import type { Modifier, Placement } from '@popperjs/core';
 import { Tooltip } from './Tooltip';
 
@@ -25,7 +27,7 @@ interface WithHideFn {
 
 export interface WithTooltipPureProps {
   svg?: boolean;
-  trigger?: 'none' | 'hover' | 'click' | 'right-click';
+  trigger?: TriggerType;
   closeOnClick?: boolean;
   placement?: Placement;
   modifiers?: Array<Partial<Modifier<string, {}>>>;
@@ -52,42 +54,41 @@ const WithTooltipPure: FC<WithTooltipPureProps> = ({
   ...props
 }) => {
   const Container = svg ? TargetSvgContainer : TargetContainer;
+  const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible, state } =
+    usePopperTooltip(
+      {
+        trigger,
+        placement,
+        defaultVisible: tooltipShown,
+        closeOnOutsideClick: closeOnClick,
+        onVisibleChange: onVisibilityChange,
+      },
+      {
+        modifiers,
+      }
+    );
 
   return (
-    <TooltipTrigger
-      placement={placement}
-      trigger={trigger}
-      modifiers={modifiers}
-      tooltipShown={tooltipShown}
-      onVisibilityChange={onVisibilityChange}
-      tooltip={({
-        getTooltipProps,
-        getArrowProps,
-        tooltipRef,
-        arrowRef,
-        placement: tooltipPlacement,
-      }) => (
-        <Tooltip
-          hasChrome={hasChrome}
-          placement={tooltipPlacement}
-          tooltipRef={tooltipRef}
-          arrowRef={arrowRef}
-          arrowProps={getArrowProps()}
-          {...getTooltipProps()}
-        >
-          {typeof tooltip === 'function'
-            ? tooltip({ onHide: () => onVisibilityChange(false) })
-            : tooltip}
-        </Tooltip>
-      )}
-    >
-      {({ getTriggerProps, triggerRef }) => (
-        // @ts-expect-error (Converted from ts-ignore)
-        <Container ref={triggerRef} {...getTriggerProps()} {...props}>
-          {children}
-        </Container>
-      )}
-    </TooltipTrigger>
+    <>
+      <Container mode={trigger} ref={setTriggerRef as any} {...props}>
+        {children}
+      </Container>
+      {visible &&
+        ReactDOM.createPortal(
+          <Tooltip
+            placement={state?.placement}
+            ref={setTooltipRef}
+            hasChrome={hasChrome}
+            arrowProps={getArrowProps()}
+            {...getTooltipProps()}
+          >
+            {typeof tooltip === 'function'
+              ? tooltip({ onHide: () => onVisibilityChange(false) })
+              : tooltip}
+          </Tooltip>,
+          document.body
+        )}
+    </>
   );
 };
 

code/ui/manager/src/components/sidebar/Menu.stories.tsx

@@ -66,6 +66,9 @@ export const Expanded = () => {
 // @ts-expect-error (needs to be converted to CSF3)
 Expanded.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
+  await new Promise((res) => {
+    setTimeout(res, 500);
+  });
   const menuButton = await canvas.findByRole('button');
   await userEvent.click(menuButton);
   const aboutStorybookBtn = await screen.findByText(/About your Storybook/);
@@ -97,6 +100,9 @@ export const ExpandedWithoutReleaseNotes = () => {
 // @ts-expect-error (needs to be converted to CSF3)
 ExpandedWithoutReleaseNotes.play = async (context) => {
   const canvas = within(context.canvasElement);
+  await new Promise((res) => {
+    setTimeout(res, 500);
+  });
   await Expanded.play(context);
   const releaseNotes = await canvas.queryByText(/Release notes/);
   await expect(releaseNotes).not.toBeInTheDocument();

code/ui/manager/src/components/sidebar/Menu.tsx

@@ -122,6 +122,14 @@ export const ToolbarMenu: FC<{
       placement="bottom"
       trigger="click"
       closeOnClick
+      modifiers={[
+        {
+          name: 'flip',
+          options: {
+            allowedAutoPlacements: [],
+          },
+        },
+      ]}
       tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
     >
       <IconButton title="Shortcuts" aria-label="Shortcuts">

code/yarn.lock

@@ -4950,7 +4950,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@popperjs/core@npm:^2.5.4, @popperjs/core@npm:^2.6.0":
+"@popperjs/core@npm:^2.11.5, @popperjs/core@npm:^2.6.0":
   version: 2.11.6
   resolution: "@popperjs/core@npm:2.11.6"
   checksum: 90b1361ab1a19cd351e482a88cb6cf13cf25973e20797bf9b97223e64b87bde8d9668ab2f33be24475e2a092d362ac256c361b16ea4e4ab5b21f2aeaef5f9bb7
@@ -6066,7 +6066,7 @@ __metadata:
     overlayscrollbars: ^1.13.1
     polished: ^4.2.2
     prettier: ^2.8.0
-    react-popper-tooltip: ^3.1.1
+    react-popper-tooltip: ^4.4.2
     react-syntax-highlighter: ^15.4.5
     react-textarea-autosize: ^8.3.0
     ts-dedent: ^2.0.0
@@ -23808,21 +23808,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-popper-tooltip@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "react-popper-tooltip@npm:3.1.1"
+"react-popper-tooltip@npm:^4.4.2":
+  version: 4.4.2
+  resolution: "react-popper-tooltip@npm:4.4.2"
   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
   peerDependencies:
-    react: ^16.6.0 || ^17.0.0
-    react-dom: ^16.6.0 || ^17.0.0
-  checksum: 782a7a4a066251dd794a790b83e9764a97dbb616a16b0fe501020b0cf7a9fec6804449e7b9b7714bfc4bb5eeba073550b850483aea25245e32317b9ead23c9ec
+    react: ">=16.6.0"
+    react-dom: ">=16.6.0"
+  checksum: 1a080d30027dd702b225cbad35194bea942b3f73324a838021fef415c1717be9548552a13b6862f423475407fdd58e2b5bc406af9638d297b974d2e222eb8ff2
   languageName: node
   linkType: hard
 
-"react-popper@npm:^2.2.4":
+"react-popper@npm:^2.3.0":
   version: 2.3.0
   resolution: "react-popper@npm:2.3.0"
   dependencies: