Revert "fix(toolbar): Fix tooltip & hovercard & menu react-portal rendering inside the toolbar (#74797)"

This reverts commit 6be923abe119fb7dc778d7a7cdf4e8f9124b2f4c.

Co-authored-by: leeandher <35509934+leeandher@users.noreply.github.com>

static/app/components/devtoolbar/components/providers.tsx

@@ -3,7 +3,6 @@ import createCache from '@emotion/cache';
 import {CacheProvider, ThemeProvider} from '@emotion/react';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 
-import {ReactPortalTargetProvider} from 'sentry/components/react/useReactPortalTarget';
 import {lightTheme} from 'sentry/utils/theme';
 
 import {ConfigurationContextProvider} from '../hooks/useConfiguration';
@@ -34,18 +33,16 @@ export default function Providers({children, config, container}: Props) {
   );
 
   return (
-    <ReactPortalTargetProvider target={container}>
-      <CacheProvider value={myCache}>
-        <ThemeProvider theme={lightTheme}>
-          <ConfigurationContextProvider config={config}>
-            <QueryClientProvider client={queryClient}>
-              <VisibilityContextProvider>
-                <ToolbarRouterContextProvider>{children}</ToolbarRouterContextProvider>
-              </VisibilityContextProvider>
-            </QueryClientProvider>
-          </ConfigurationContextProvider>
-        </ThemeProvider>
-      </CacheProvider>
-    </ReactPortalTargetProvider>
+    <CacheProvider value={myCache}>
+      <ThemeProvider theme={lightTheme}>
+        <ConfigurationContextProvider config={config}>
+          <QueryClientProvider client={queryClient}>
+            <VisibilityContextProvider>
+              <ToolbarRouterContextProvider>{children}</ToolbarRouterContextProvider>
+            </VisibilityContextProvider>
+          </QueryClientProvider>
+        </ConfigurationContextProvider>
+      </ThemeProvider>
+    </CacheProvider>
   );
 }

static/app/components/devtoolbar/styles/global.ts

@@ -54,7 +54,7 @@ export const globalCss = css`
     --pink200: rgba(249, 26, 138, 0.5);
     --pink100: rgba(249, 26, 138, 0.09);
 
-    --z-index: 10000;
+    --z-index: 100000;
 
     color: var(--gray400);
     font-family: system-ui, 'Helvetica Neue', Arial, sans-serif;

static/app/components/dropdownMenu/index.tsx

@@ -7,7 +7,6 @@ import {Item, Section} from '@react-stately/collections';
 
 import type {DropdownButtonProps} from 'sentry/components/dropdownButton';
 import DropdownButton from 'sentry/components/dropdownButton';
-import useReactPortalTarget from 'sentry/components/react/useReactPortalTarget';
 import type {FormSize} from 'sentry/utils/theme';
 import type {UseOverlayProps} from 'sentry/utils/useOverlay';
 import useOverlay from 'sentry/utils/useOverlay';
@@ -154,8 +153,6 @@ function DropdownMenu({
 }: DropdownMenuProps) {
   const isDisabled = disabledProp ?? (!items || items.length === 0);
 
-  const portalTarget = useReactPortalTarget();
-
   const {rootOverlayState} = useContext(DropdownMenuContext);
   const {
     isOpen,
@@ -251,7 +248,7 @@ function DropdownMenu({
       </DropdownMenuList>
     );
 
-    return usePortal ? createPortal(menu, portalTarget) : menu;
+    return usePortal ? createPortal(menu, document.body) : menu;
   }
 
   return (

static/app/components/menuListItem.tsx

@@ -7,7 +7,6 @@ import styled from '@emotion/styled';
 
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
 import {Overlay, PositionWrapper} from 'sentry/components/overlay';
-import useReactPortalTarget from 'sentry/components/react/useReactPortalTarget';
 import type {TooltipProps} from 'sentry/components/tooltip';
 import {Tooltip} from 'sentry/components/tooltip';
 import {space} from 'sentry/styles/space';
@@ -248,8 +247,6 @@ function DetailsOverlay({
 
   const popper = usePopper(itemRef.current, overlayElement, POPPER_OPTIONS);
 
-  const portalTarget = useReactPortalTarget();
-
   return createPortal(
     <StyledPositionWrapper
       {...popper.attributes.popper}
@@ -264,7 +261,7 @@ function DetailsOverlay({
     // Safari will clip the overlay if it is inside a scrollable container, even though it is positioned fixed.
     // See https://bugs.webkit.org/show_bug.cgi?id=160953
     // To work around this, we append the overlay to the body
-    portalTarget
+    document.body
   );
 }
 

static/app/components/react/useReactPortalTarget.tsx

@@ -1,18 +0,0 @@
-import {createContext, type ReactNode, useContext} from 'react';
-
-const ReactPortalTarget = createContext<HTMLElement | ShadowRoot>(document.body);
-
-interface Props {
-  children: ReactNode;
-  target: HTMLElement | ShadowRoot;
-}
-
-export function ReactPortalTargetProvider({children, target}: Props) {
-  return (
-    <ReactPortalTarget.Provider value={target}>{children}</ReactPortalTarget.Provider>
-  );
-}
-
-export default function useReactPortalTarget() {
-  return useContext(ReactPortalTarget);
-}

static/app/components/tooltip.tsx

@@ -6,12 +6,11 @@ import styled from '@emotion/styled';
 import {AnimatePresence} from 'framer-motion';
 
 import {Overlay, PositionWrapper} from 'sentry/components/overlay';
-import useReactPortalTarget from 'sentry/components/react/useReactPortalTarget';
 import {space} from 'sentry/styles/space';
 import type {UseHoverOverlayProps} from 'sentry/utils/useHoverOverlay';
 import {useHoverOverlay} from 'sentry/utils/useHoverOverlay';
 
-export interface TooltipProps extends UseHoverOverlayProps {
+interface TooltipProps extends UseHoverOverlayProps {
   /**
    * The content to show in the tooltip popover
    */
@@ -27,7 +26,7 @@ export interface TooltipProps extends UseHoverOverlayProps {
   overlayStyle?: React.CSSProperties | SerializedStyles;
 }
 
-export function Tooltip({
+function Tooltip({
   children,
   overlayStyle,
   title,
@@ -45,8 +44,6 @@ export function Tooltip({
     }
   }, [reset, disabled]);
 
-  const portalTarget = useReactPortalTarget();
-
   if (disabled || !title) {
     return <Fragment>{children}</Fragment>;
   }
@@ -68,7 +65,7 @@ export function Tooltip({
   return (
     <Fragment>
       {wrapTrigger(children)}
-      {createPortal(<AnimatePresence>{tooltipContent}</AnimatePresence>, portalTarget)}
+      {createPortal(<AnimatePresence>{tooltipContent}</AnimatePresence>, document.body)}
     </Fragment>
   );
 }
@@ -82,3 +79,6 @@ const TooltipContent = styled(Overlay)`
   line-height: 1.2;
   text-align: center;
 `;
+
+export type {TooltipProps};
+export {Tooltip};