diff --git a/static/app/components/devtoolbar/components/providers.tsx b/static/app/components/devtoolbar/components/providers.tsx
index db09a9ace00adf..3ba29e36ad0512 100644
--- a/static/app/components/devtoolbar/components/providers.tsx
+++ b/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 (
-
-
-
-
-
-
- {children}
-
-
-
-
-
-
+
+
+
+
+
+ {children}
+
+
+
+
+
);
}
diff --git a/static/app/components/devtoolbar/styles/global.ts b/static/app/components/devtoolbar/styles/global.ts
index 20bc82a4d732a9..681a5e519f4793 100644
--- a/static/app/components/devtoolbar/styles/global.ts
+++ b/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;
diff --git a/static/app/components/dropdownMenu/index.tsx b/static/app/components/dropdownMenu/index.tsx
index 3e1b2385ae6b08..b78cc3e25d0d59 100644
--- a/static/app/components/dropdownMenu/index.tsx
+++ b/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({
);
- return usePortal ? createPortal(menu, portalTarget) : menu;
+ return usePortal ? createPortal(menu, document.body) : menu;
}
return (
diff --git a/static/app/components/menuListItem.tsx b/static/app/components/menuListItem.tsx
index bfa9230251e46f..0923573f23525a 100644
--- a/static/app/components/menuListItem.tsx
+++ b/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(
(document.body);
-
-interface Props {
- children: ReactNode;
- target: HTMLElement | ShadowRoot;
-}
-
-export function ReactPortalTargetProvider({children, target}: Props) {
- return (
- {children}
- );
-}
-
-export default function useReactPortalTarget() {
- return useContext(ReactPortalTarget);
-}
diff --git a/static/app/components/tooltip.tsx b/static/app/components/tooltip.tsx
index 48af74800f4194..718b529b76fd34 100644
--- a/static/app/components/tooltip.tsx
+++ b/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 {children};
}
@@ -68,7 +65,7 @@ export function Tooltip({
return (
{wrapTrigger(children)}
- {createPortal({tooltipContent}, portalTarget)}
+ {createPortal({tooltipContent}, document.body)}
);
}
@@ -82,3 +79,6 @@ const TooltipContent = styled(Overlay)`
line-height: 1.2;
text-align: center;
`;
+
+export type {TooltipProps};
+export {Tooltip};