feat: Popover, ActionMenu, ProfileMenu - modify popover implementation to render on top of all elements regardless of z-index hierarchy

Author: RohitRaj011

src/Shared/Components/ActionMenu/ActionMenu.component.tsx

@@ -1,5 +1,3 @@
-import { MutableRefObject } from 'react'
-
 import { CustomInput } from '../CustomInput'
 import { Popover } from '../Popover'
 import { SelectPickerMenuListFooter } from '../SelectPicker/common'
@@ -82,7 +80,7 @@ export const ActionMenu = <T extends string | number = string | number>({
                     </div>
                 )}
                 <ul
-                    ref={scrollableRef as MutableRefObject<HTMLUListElement>}
+                    ref={scrollableRef}
                     role="menu"
                     className="action-menu m-0 p-0 flex-grow-1 dc__overflow-auto dc__overscroll-none"
                 >

src/Shared/Components/Header/ProfileMenu.tsx

@@ -14,7 +14,7 @@ export const ProfileMenu = ({ user, onClick }: ProfileMenuProps) => {
     // HOOKS
     const { viewIsPipelineRBACConfiguredNode } = useMainContext()
 
-    const { open, overlayProps, popoverProps, triggerProps, closePopover } = usePopover({
+    const { open, overlayProps, popoverProps, triggerProps, scrollableRef, closePopover } = usePopover({
         id: 'profile-menu',
         alignment: 'end',
         width: 250,
@@ -51,7 +51,7 @@ export const ProfileMenu = ({ user, onClick }: ProfileMenuProps) => {
             triggerElement={triggerElement}
             buttonProps={null}
         >
-            <>
+            <div ref={scrollableRef} className="dc__overflow-auto">
                 <div className="p-4">
                     <div className="flex dc__content-space dc__gap-8 px-8 py-6">
                         <div>
@@ -71,7 +71,7 @@ export const ProfileMenu = ({ user, onClick }: ProfileMenuProps) => {
                         <Icon name="ic-logout" color="R500" />
                     </Link>
                 </div>
-            </>
+            </div>
         </Popover>
     )
 }

src/Shared/Components/Popover/Popover.component.tsx

@@ -15,24 +15,25 @@ export const Popover = ({
     open,
     popoverProps,
     overlayProps,
-    triggerProps,
+    triggerProps: { bounds, ...triggerProps },
     buttonProps,
     triggerElement,
     children,
 }: PopoverProps) => (
-    <div className="dc__position-rel dc__inline-block">
+    <>
         <div {...triggerProps}>{triggerElement || <Button {...buttonProps} />}</div>
 
         <AnimatePresence>
             {open && (
-                <>
-                    {/* Overlay to block interactions with the background */}
-                    <div {...overlayProps} />
-                    <motion.div {...popoverProps} data-testid={popoverProps.id}>
-                        {children}
-                    </motion.div>
-                </>
+                <div {...overlayProps}>
+                    <div className="dc__position-abs" style={{ left: bounds.left, top: bounds.top }}>
+                        <div className="dc__visibility-hidden" style={{ width: bounds.width, height: bounds.height }} />
+                        <motion.div {...popoverProps} data-testid={popoverProps.id}>
+                            {children}
+                        </motion.div>
+                    </div>
+                </div>
             )}
         </AnimatePresence>
-    </div>
+    </>
 )

src/Shared/Components/Popover/popover.scss

@@ -6,7 +6,3 @@
     left:0;
     z-index: var(--modal-index);
 }
-
-.popover-content {
-    z-index: var(--modal-index);
-}

src/Shared/Components/Popover/types.ts

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, KeyboardEvent, MutableRefObject, ReactElement } from 'react'
+import { DetailedHTMLProps, KeyboardEvent, LegacyRef, MutableRefObject, ReactElement } from 'react'
 import { HTMLMotionProps } from 'framer-motion'
 
 import { ButtonProps } from '../Button'
@@ -67,7 +67,9 @@ export interface UsePopoverReturnType {
      * Props to be spread onto the trigger element that opens the popover.
      * These props include standard HTML attributes for a `div` element.
      */
-    triggerProps: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+    triggerProps: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+        bounds: Pick<DOMRect, 'left' | 'top' | 'height' | 'width'>
+    }
     /**
      * Props to be spread onto the overlay element of the popover.
      * These props include standard HTML attributes for a `div` element.
@@ -82,7 +84,7 @@ export interface UsePopoverReturnType {
      * A mutable reference to the scrollable element inside the popover. \
      * This reference should be assigned to the element that is scrollable.
      */
-    scrollableRef: MutableRefObject<HTMLElement>
+    scrollableRef: MutableRefObject<any> | LegacyRef<any>
     /**
      * A function to close the popover.
      */

src/Shared/Components/Popover/usePopover.hook.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState } from 'react'
+import { MouseEvent, useLayoutEffect, useRef, useState } from 'react'
 
 import { UsePopoverProps, UsePopoverReturnType } from './types'
 import {
@@ -21,6 +21,7 @@ export const usePopover = ({
     const [open, setOpen] = useState(false)
     const [actualPosition, setActualPosition] = useState<UsePopoverProps['position']>(position)
     const [actualAlignment, setActualAlignment] = useState<UsePopoverProps['alignment']>(alignment)
+    const [triggerBounds, setTriggerBounds] = useState<UsePopoverReturnType['triggerProps']['bounds'] | null>(null)
 
     // CONSTANTS
     const isAutoWidth = width === 'auto'
@@ -51,23 +52,40 @@ export const usePopover = ({
 
     const handlePopoverKeyDown = (e: React.KeyboardEvent) => onPopoverKeyDown(e, open, closePopover)
 
+    const handleOverlayClick = (e: MouseEvent<HTMLDivElement>) => {
+        if (!popover.current?.contains(e.target as Node)) {
+            closePopover()
+        }
+    }
+
     useLayoutEffect(() => {
         if (!open || !triggerRef.current || !popover.current || !scrollableRef.current) {
             return
         }
 
-        const triggerRect = triggerRef.current.getBoundingClientRect()
-        const popoverRect = popover.current.getBoundingClientRect()
-
-        const { fallbackPosition, fallbackAlignment } = getPopoverActualPositionAlignment({
-            position,
-            alignment,
-            triggerRect,
-            popoverRect,
-        })
+        const updatePopoverPosition = () => {
+            const triggerRect = triggerRef.current.getBoundingClientRect()
+            const popoverRect = popover.current.getBoundingClientRect()
+
+            const { fallbackPosition, fallbackAlignment } = getPopoverActualPositionAlignment({
+                position,
+                alignment,
+                triggerRect,
+                popoverRect,
+            })
+
+            setActualPosition(fallbackPosition)
+            setActualAlignment(fallbackAlignment)
+            setTriggerBounds({
+                left: triggerRect.left,
+                top: triggerRect.top,
+                height: triggerRect.height,
+                width: triggerRect.width,
+            })
+        }
 
-        setActualPosition(fallbackPosition)
-        setActualAlignment(fallbackAlignment)
+        // update position on open
+        updatePopoverPosition()
 
         // prevent scroll propagation unless scrollable
         const handleWheel = (e: WheelEvent) => {
@@ -84,9 +102,12 @@ export const usePopover = ({
         }
 
         scrollableRef.current.addEventListener('wheel', handleWheel, { passive: false })
+        window.addEventListener('resize', updatePopoverPosition)
+
         // eslint-disable-next-line consistent-return
         return () => {
             scrollableRef.current.removeEventListener('wheel', handleWheel)
+            window.removeEventListener('resize', updatePopoverPosition)
         }
     }, [open, position, alignment])
 
@@ -100,17 +121,18 @@ export const usePopover = ({
             'aria-haspopup': 'listbox',
             'aria-expanded': open,
             tabIndex: 0,
+            bounds: triggerBounds ?? { left: 0, top: 0, height: 0, width: 0 },
         },
         overlayProps: {
             role: 'dialog',
-            onClick: closePopover,
+            onClick: handleOverlayClick,
             className: 'popover-overlay',
         },
         popoverProps: {
             id,
             ref: popover,
             role: 'listbox',
-            className: `popover-content dc__position-abs bg__menu--primary shadow__menu border__primary br-6 dc__overflow-hidden ${isAutoWidth ? 'dc_width-max-content dc__mxw-250' : ''}`,
+            className: `dc__position-abs bg__menu--primary shadow__menu border__primary br-6 dc__overflow-hidden ${isAutoWidth ? 'dc_width-max-content dc__mxw-250' : ''}`,
             onKeyDown: handlePopoverKeyDown,
             style: {
                 width: !isAutoWidth ? `${width}px` : undefined,