feat(Popover): integrate Backdrop component and remove custom overlay styles

src/Shared/Components/Backdrop/Backdrop.tsx

@@ -25,7 +25,7 @@ import { getUniqueId, preventBodyScroll, preventOutsideFocus } from '@Shared/Hel
 import { BackdropProps } from './types'
 import { createPortalContainerAndAppendToDOM } from './utils'
 
-const Backdrop = ({ children, onEscape, onClick }: BackdropProps) => {
+const Backdrop = ({ children, onEscape, onClick, hasClearBackground = false, onBackdropMount }: BackdropProps) => {
     // STATES
     const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null)
 
@@ -59,6 +59,10 @@ const Backdrop = ({ children, onEscape, onClick }: BackdropProps) => {
         }
     }, [])
 
+    useEffect(() => {
+        onBackdropMount?.(!!portalContainer)
+    }, [portalContainer])
+
     /**
      * Manages a dedicated DOM node for rendering a portal backdrop.
      *
@@ -106,7 +110,7 @@ const Backdrop = ({ children, onEscape, onClick }: BackdropProps) => {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0, transition: { duration: 0.35 } }}
-            className="backdrop dc__position-fixed dc__top-0 dc__left-0 full-height-width flexbox dc__content-center dc__align-items-center dc__overflow-hidden"
+            className={`backdrop ${hasClearBackground ? 'backdrop--transparent' : ''} dc__position-fixed dc__top-0 dc__left-0 full-height-width flexbox dc__content-center dc__align-items-center dc__overflow-hidden`}
             onClick={onClick}
         >
             {children}

src/Shared/Components/Backdrop/types.ts

@@ -36,4 +36,16 @@ export interface BackdropProps {
      * @param e - The mouse event object from the click interaction
      */
     onClick?: (e: MouseEvent<HTMLDivElement>) => void
+    /**
+     * Determines if the backdrop should be transparent.
+     * When true, the backdrop will not have any background color or blur filter.
+     * @default false
+     */
+    hasClearBackground?: boolean
+    /**
+     * Callback function that gets triggered when the backdrop component mounts or unmounts.
+     * This can be used to perform side effects or state updates when the backdrop's visibility changes.
+     * @param isMounted - A boolean indicating whether the backdrop is currently mounted (true) or not (false)
+     */
+    onBackdropMount?: (isMounted: boolean) => void
 }

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

@@ -1,10 +1,9 @@
 import { AnimatePresence, motion } from 'framer-motion'
 
+import { Backdrop } from '../Backdrop'
 import { Button } from '../Button'
 import { PopoverProps } from './types'
 
-import './popover.scss'
-
 /**
  * Popover Component \
  * This component serves as a base for creating popovers. It is not intended to be used directly.
@@ -25,14 +24,14 @@ export const Popover = ({
 
         <AnimatePresence>
             {open && (
-                <div {...overlayProps}>
+                <Backdrop {...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>
+                </Backdrop>
             )}
         </AnimatePresence>
     </>

src/Shared/Components/Popover/types.ts

@@ -1,6 +1,7 @@
 import { DetailedHTMLProps, KeyboardEvent, LegacyRef, MutableRefObject, ReactElement } from 'react'
 import { HTMLMotionProps } from 'framer-motion'
 
+import { BackdropProps } from '../Backdrop'
 import { ButtonProps } from '../Button'
 
 export interface UsePopoverProps {
@@ -77,9 +78,9 @@ export interface UsePopoverReturnType {
     }
     /**
      * Props to be spread onto the overlay element of the popover.
-     * These props include standard HTML attributes for a `div` element.
+     * These props include backdrop properties.
      */
-    overlayProps: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+    overlayProps: Omit<BackdropProps, 'children'>
     /**
      * Props to be spread onto the popover element itself.
      * Includes motion-related props for animations and a `ref` to the popover's `div` element.

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

@@ -1,4 +1,4 @@
-import { MouseEvent, useLayoutEffect, useRef, useState } from 'react'
+import { useLayoutEffect, useRef, useState } from 'react'
 
 import { UsePopoverProps, UsePopoverReturnType } from './types'
 import {
@@ -23,6 +23,7 @@ export const usePopover = ({
     const [actualPosition, setActualPosition] = useState<UsePopoverProps['position']>(position)
     const [actualAlignment, setActualAlignment] = useState<UsePopoverProps['alignment']>(alignment)
     const [triggerBounds, setTriggerBounds] = useState<UsePopoverReturnType['triggerProps']['bounds'] | null>(null)
+    const [isBackdropMounted, setIsBackdropMounted] = useState(false)
 
     // CONSTANTS
     const isAutoWidth = width === 'auto'
@@ -53,14 +54,12 @@ 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()
-        }
+    const handleOverlayClick = () => {
+        closePopover()
     }
 
     useLayoutEffect(() => {
-        if (!open || !triggerRef.current || !popover.current || !scrollableRef.current) {
+        if (!open || !isBackdropMounted || !triggerRef.current || !popover.current || !scrollableRef.current) {
             return
         }
 
@@ -88,6 +87,9 @@ export const usePopover = ({
         // update position on open
         updatePopoverPosition()
 
+        // focus on popover when it is opened, so that keyboard navigation works as expected
+        popover.current.focus()
+
         // prevent scroll propagation unless scrollable
         const handleWheel = (e: WheelEvent) => {
             e.stopPropagation()
@@ -110,7 +112,7 @@ export const usePopover = ({
             scrollableRef.current.removeEventListener('wheel', handleWheel)
             window.removeEventListener('resize', updatePopoverPosition)
         }
-    }, [open, position, alignment])
+    }, [open, position, alignment, isBackdropMounted])
 
     return {
         open,
@@ -124,15 +126,17 @@ export const usePopover = ({
             bounds: triggerBounds ?? { left: 0, top: 0, height: 0, width: 0 },
         },
         overlayProps: {
-            role: 'dialog',
+            hasClearBackground: true,
             onClick: handleOverlayClick,
-            className: 'popover-overlay',
+            onEscape: closePopover,
+            onBackdropMount: setIsBackdropMounted,
         },
         popoverProps: {
             id,
             ref: popover,
             role: 'listbox',
-            className: `dc__position-abs ${variant === 'menu' ? 'bg__menu--primary shadow__menu' : 'bg__overlay--primary shadow__overlay'} border__primary br-6 dc__overflow-hidden ${isAutoWidth ? 'dc_width-max-content dc__mxw-250' : ''}`,
+            tabIndex: 0,
+            className: `dc__position-abs dc__outline-none-imp ${variant === 'menu' ? 'bg__menu--primary shadow__menu' : 'bg__overlay--primary shadow__overlay'} border__primary br-6 dc__overflow-hidden ${isAutoWidth ? 'dc_width-max-content dc__mxw-250' : ''}`,
             onKeyDown: handlePopoverKeyDown,
             style: {
                 width: !isAutoWidth ? `${width}px` : undefined,