Revert "[PAY-1534] Allow Popup to be mounted inside a container (#3669)"

packages/stems/src/components/Popup/Popup.tsx

@@ -1,6 +1,6 @@
 import {
   forwardRef,
-  RefObject,
+  MutableRefObject,
   useCallback,
   useEffect,
   useRef,
@@ -106,7 +106,7 @@ const getComputedOrigins = (
   transformOrigin: Origin,
   anchorRect: DOMRect,
   wrapperRect: DOMRect,
-  containerRef?: RefObject<HTMLElement>
+  containerRef?: MutableRefObject<HTMLDivElement | undefined>
 ) => {
   if (!anchorRect || !wrapperRect) return { anchorOrigin, transformOrigin }
 
@@ -152,7 +152,6 @@ const getComputedOrigins = (
     anchorOrigin.vertical = 'top'
     transformOrigin.vertical = 'bottom'
   }
-
   return { anchorOrigin, transformOrigin }
 }
 
@@ -163,13 +162,12 @@ const getComputedOrigins = (
 const getAdjustedPosition = (
   top: number,
   left: number,
-  wrapperRect: DOMRect,
-  containerRect: Pick<DOMRect, 'width' | 'height'>
+  wrapperRect: DOMRect
 ): { adjustedTop: number; adjustedLeft: number } => {
   if (!wrapperRect) return { adjustedTop: 0, adjustedLeft: 0 }
 
-  const containerWidth = containerRect.width - CONTAINER_INSET_PADDING
-  const containerHeight = containerRect.height - CONTAINER_INSET_PADDING
+  const containerWidth = window.innerWidth - CONTAINER_INSET_PADDING
+  const containerHeight = window.innerHeight - CONTAINER_INSET_PADDING
 
   const overflowRight = left + wrapperRect.width > containerWidth
   const overflowLeft = left < 0
@@ -258,10 +256,8 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
     className,
     wrapperClassName,
     zIndex,
-    containerRef,
-    mountRef
+    containerRef
   } = props
-
   const handleClose = useCallback(() => {
     onClose()
     setTimeout(() => {
@@ -293,19 +289,11 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
   // On visible, set the position
   useEffect(() => {
     if (isVisible) {
-      const [anchorRect, wrapperRect, mountRect] = [
-        anchorRef,
-        wrapperRef,
-        mountRef
-      ].map((r) => r?.current?.getBoundingClientRect())
+      const [anchorRect, wrapperRect] = [anchorRef, wrapperRef].map((r) =>
+        r?.current?.getBoundingClientRect()
+      )
       if (!anchorRect || !wrapperRect) return
 
-      // If using a mount source, subtract off the position of the containing mount
-      if (mountRect) {
-        anchorRect.x -= mountRect.x
-        anchorRect.y -= mountRect.y
-      }
-
       const {
         anchorOrigin: anchorOriginComputed,
         transformOrigin: transformOriginComputed
@@ -333,11 +321,7 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
       const { adjustedTop, adjustedLeft } = getAdjustedPosition(
         top,
         left,
-        wrapperRect,
-        {
-          width: containerRef?.current?.clientWidth ?? window.innerWidth,
-          height: containerRef?.current?.clientHeight ?? window.innerHeight
-        }
+        wrapperRect
       )
 
       if (wrapperRef.current) {
@@ -355,8 +339,7 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
     transformOrigin,
     setComputedTransformOrigin,
     originalTopPosition,
-    containerRef,
-    mountRef
+    containerRef
   ])
 
   // Callback invoked on each scroll. Uses original top position to scroll with content.
@@ -365,13 +348,13 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
   const watchScroll = useCallback(
     (scrollParent: Element, initialScrollPosition: number) => {
       const scrollTop = scrollParent.scrollTop
-      if (wrapperRef.current && !mountRef?.current) {
+      if (wrapperRef.current) {
         wrapperRef.current.style.top = `${
           originalTopPosition.current - scrollTop + initialScrollPosition
         }px`
       }
     },
-    [wrapperRef, originalTopPosition, mountRef]
+    [wrapperRef, originalTopPosition]
   )
 
   // Set up scroll listeners
@@ -469,7 +452,7 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
             ) : null
           )}
         </div>,
-        mountRef?.current ?? document.body
+        document.body
       )}
     </>
   )

packages/stems/src/components/Popup/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode, RefObject } from 'react'
+import { MutableRefObject, ReactChild } from 'react'
 
 export enum Position {
   TOP_LEFT = 'topLeft',
@@ -18,7 +18,7 @@ export type PopupProps = {
   /**
    * A ref to the element whose position will be used to anchor the Popup
    */
-  anchorRef: RefObject<HTMLElement>
+  anchorRef: MutableRefObject<HTMLElement | null>
 
   /**
    * Duration of the animations in ms
@@ -35,7 +35,7 @@ export type PopupProps = {
   /**
    * Children to render inside the Popup
    */
-  children: ReactNode
+  children: ReactChild
 
   /**
    * Class name to apply to the popup itself
@@ -52,7 +52,7 @@ export type PopupProps = {
    * to be the size of the container it belongs to. If the popup expands outside
    * the bounds of the container, it repositions itself.
    */
-  containerRef?: RefObject<HTMLElement>
+  containerRef?: MutableRefObject<HTMLDivElement | undefined>
 
   /**
    * Boolean representing whether the Popup is visible
@@ -110,11 +110,6 @@ export type PopupProps = {
    * An optional z-index to override the default of 10000
    */
   zIndex?: number
-
-  /**
-   * The element to portal to
-   */
-  mountRef?: RefObject<HTMLElement>
 }
 
 export const popupDefaultProps: Partial<PopupProps> = {

packages/stems/src/components/PopupMenu/PopupMenu.tsx

@@ -24,8 +24,7 @@ export const PopupMenu = forwardRef<HTMLDivElement, PopupMenuProps>(
       containerRef,
       anchorOrigin,
       transformOrigin,
-      id,
-      mountRef
+      id
     } = props
     const clickInsideRef = useRef<any>()
     const anchorRef = useRef<HTMLElement>(null)
@@ -84,7 +83,6 @@ export const PopupMenu = forwardRef<HTMLDivElement, PopupMenuProps>(
           transformOrigin={transformOrigin}
           anchorOrigin={anchorOrigin}
           wrapperClassName={styles.popup}
-          mountRef={mountRef}
         >
           <ul
             className={styles.menu}

packages/stems/src/components/PopupMenu/types.tsx

@@ -12,7 +12,6 @@ type ApplicablePopupProps = Pick<
   | 'containerRef'
   | 'transformOrigin'
   | 'anchorOrigin'
-  | 'mountRef'
 >
 
 export type PopupMenuProps = {

packages/stems/src/utils/scrollParent.ts

@@ -19,9 +19,7 @@ export const getScrollParent = (node: HTMLElement): Element | null => {
     style(_node, 'overflow') +
     style(_node, 'overflow-y') +
     style(_node, 'overflow-x')
-  const scroll = (_node: HTMLElement) =>
-    regex.test(overflow(_node)) ||
-    _node.classList.contains('scrollbar-container') // Perfect scrollbar does overflow: hidden
+  const scroll = (_node: HTMLElement) => regex.test(overflow(_node))
 
   const scrollParent = (_node: HTMLElement) => {
     if (!_node.parentNode) {

packages/web/src/components/audio-transactions-table/AudioTransactionsTable.tsx

@@ -54,7 +54,7 @@ type AudioTransactionsTableProps = {
   tableClassName?: string
   wrapperClassName?: string
   totalRowCount: number
-  scrollRef?: React.RefObject<HTMLDivElement>
+  scrollRef?: React.MutableRefObject<HTMLDivElement | undefined>
   fetchBatchSize: number
 }
 

packages/web/src/components/table/Table.tsx

@@ -99,7 +99,7 @@ type TableProps = {
   onSort?: (...props: any[]) => void
   isEmptyRow?: (row: any) => boolean
   pageSize?: number
-  scrollRef?: React.RefObject<HTMLDivElement>
+  scrollRef?: React.MutableRefObject<HTMLDivElement | undefined>
   showMoreLimit?: number
   tableClassName?: string
   totalRowCount?: number
@@ -663,7 +663,7 @@ export const Table = ({
         minimumBatchSize={fetchBatchSize}
       >
         {({ onRowsRendered, registerChild: registerListChild }) => (
-          <WindowScroller scrollElement={scrollRef?.current ?? undefined}>
+          <WindowScroller scrollElement={scrollRef?.current}>
             {({
               height,
               registerChild,

packages/web/src/components/tracks-table/TracksTable.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useCallback, useMemo, useRef } from 'react'
+import { MouseEvent, useCallback, useMemo, useRef } from 'react'
 
 import {
   formatCount,
@@ -96,7 +96,7 @@ type TracksTableProps = {
   playing?: boolean
   playingIndex?: number
   removeText?: string
-  scrollRef?: React.RefObject<HTMLDivElement>
+  scrollRef?: React.MutableRefObject<HTMLDivElement | undefined>
   showMoreLimit?: number
   tableClassName?: string
   totalRowCount?: number

packages/web/src/pages/App.d.ts

@@ -1,7 +1,7 @@
-import { RefObject } from 'react'
+import { MutableRefObject } from 'react'
 
 type AppProps = {
-  mainContentRef: RefObject<HTMLDivElement>
+  mainContentRef: MutableRefObject<HTMLDivElement | undefined>
 }
 
 const App: (props: AppProps) => JSX.Element

packages/web/src/pages/App.test.tsx

@@ -1,4 +1,4 @@
-import { createRef } from 'react'
+import { createRef, MutableRefObject } from 'react'
 
 import { ConnectedRouter } from 'connected-react-router'
 import ReactDOM from 'react-dom'
@@ -30,7 +30,10 @@ jest.mock('services/solana-client/SolanaClient', () => ({
 describe('smoke test', () => {
   it('renders without crashing', () => {
     const rootNode = document.createElement('div')
-    const mainContentRef = createRef<HTMLDivElement>()
+    const mainContentRef =
+      createRef<HTMLDivElement | null>() as MutableRefObject<
+        HTMLDivElement | undefined
+      >
     ReactDOM.render(
       <Provider store={store}>
         <ConnectedRouter history={history}>

packages/web/src/pages/MainContentContext.tsx

@@ -1,14 +1,12 @@
-import { createContext, memo, useRef, RefObject } from 'react'
+import { createContext, memo, useRef, MutableRefObject } from 'react'
 
-export const MainContentContext = createContext<{
-  mainContentRef: RefObject<HTMLDivElement>
-}>({
-  mainContentRef: { current: null }
+export const MainContentContext = createContext({
+  mainContentRef: {} as MutableRefObject<HTMLDivElement | undefined>
 })
 
 export const MainContentContextProvider = memo(
   (props: { children: JSX.Element }) => {
-    const mainContentRef = useRef<HTMLDivElement>(null)
+    const mainContentRef = useRef<HTMLDivElement>()
     return (
       <MainContentContext.Provider
         value={{

packages/web/src/pages/chat-page/components/CreateChatUserResult.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect } from 'react'
 
 import {
   accountSelectors,
@@ -104,8 +104,6 @@ export const MessageUserSearchResult = (props: UserResultComposeProps) => {
     getCanCreateChat(state, { userId: user.user_id })
   )
 
-  const ref = useRef<HTMLDivElement | null>(null)
-
   const handleComposeClicked = useCallback(() => {
     if (canCreateChat) {
       closeParentModal()
@@ -175,12 +173,7 @@ export const MessageUserSearchResult = (props: UserResultComposeProps) => {
   }
 
   return (
-    <div
-      className={styles.root}
-      ref={(rootRef) =>
-        (ref.current = (rootRef?.parentElement as HTMLDivElement) ?? null)
-      }
-    >
+    <div className={styles.root}>
       <ArtistChip
         className={styles.artistChip}
         user={user}
@@ -195,8 +188,6 @@ export const MessageUserSearchResult = (props: UserResultComposeProps) => {
         zIndex={zIndex.MODAL_OVERFLOW_MENU_POPUP}
         anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
         transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-        mountRef={ref}
-        containerRef={ref}
       />
     </div>
   )