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