Revert "fix(toolbar): Fix tooltip & hovercard & menu react-portal ren…

…dering inside the toolbar (#74797)"

This reverts commit 6be923a.

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/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};