feat: improve overlay component performance and functionality

- Replaced useDebouncedCallback with requestAnimationFrame for smoother updates in the overlay component.
- Added functionality to identify scrollable parent elements, enhancing the overlay's responsiveness to scroll events.
- Updated cleanup logic to ensure proper removal of event listeners and prevent memory leaks.
- Refactored styles handling to improve visibility management of overlay content based on placement and style props.
- Enhanced withOverlay HOC to restore original position style on cleanup, ensuring consistent behavior.

Author: prabhuignoto

packages/lib/components/common/overlay.tsx

@@ -10,7 +10,6 @@ import React, {
   useState,
 } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
-import { useDebouncedCallback } from 'use-debounce';
 import { OverlayProps } from './overlay-model';
 import './overlay.scss';
 import { OverlayContext, OverlayContextModel } from './withOverlay';
@@ -45,6 +44,8 @@ const Overlay: React.FunctionComponent<OverlayProps> = ({
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const overlayContentRef = useRef<HTMLDivElement | null>(null);
   const observer = useRef<ResizeObserver | null>(null);
+  const rafIdRef = useRef<number | null>(null);
+  const scrollListenersRef = useRef<Set<HTMLElement | Document>>(new Set());
   const [retriggerStyleCal, setRetriggerStyleCal] = useState<number>(0);
 
   /**
@@ -55,9 +56,15 @@ const Overlay: React.FunctionComponent<OverlayProps> = ({
     width: number;
   } | null>(null);
 
-  const retrigger = useDebouncedCallback(() => {
-    setRetriggerStyleCal(new Date().getTime());
-  }, 5);
+  const retrigger = useCallback(() => {
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+    }
+    rafIdRef.current = requestAnimationFrame(() => {
+      setRetriggerStyleCal(prev => prev + 1);
+      rafIdRef.current = null;
+    });
+  }, []);
 
   const overlayWrapperClass = useMemo(() => {
     return classNames(['rc-overlay-wrapper'], {
@@ -136,18 +143,65 @@ const Overlay: React.FunctionComponent<OverlayProps> = ({
     return {} as CSSProperties;
   }, [placementReference, retriggerStyleCal, overlayDimensions, placement, context, leftOffset, placementOffset]);
 
-  // event handlers
+  /**
+   * Finds all scrollable parent elements of the placement reference
+   */
+  const getScrollableParents = useCallback((element: HTMLElement | null): (HTMLElement | Document)[] => {
+    const scrollableParents: (HTMLElement | Document)[] = [document];
+    
+    if (!element) return scrollableParents;
+
+    let current: HTMLElement | null = element;
+    while (current && current !== document.body && current !== document.documentElement) {
+      const style = window.getComputedStyle(current);
+      const overflowY = style.overflowY;
+      const overflowX = style.overflowX;
+      const isScrollable = 
+        (overflowY === 'auto' || overflowY === 'scroll') ||
+        (overflowX === 'auto' || overflowX === 'scroll');
+      
+      if (isScrollable && current.scrollHeight > current.clientHeight) {
+        scrollableParents.push(current);
+      }
+      
+      current = current.parentElement;
+    }
+    
+    return scrollableParents;
+  }, []);
+
+  /**
+   * Synchronizes the position of the overlay content with the scroll position
+   * Uses requestAnimationFrame for smooth, performant updates
+   */
+  const handleScroll = useCallback(() => {
+    retrigger();
+  }, [retrigger]);
 
   const closeProcess = useCallback(() => {
-    document.removeEventListener('scroll', handleWindowScroll);
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    
+    const eventOptions = { capture: true, passive: true } as AddEventListenerOptions;
+    scrollListenersRef.current.forEach(listener => {
+      if (listener === document) {
+        document.removeEventListener('scroll', handleScroll, eventOptions);
+      } else {
+        (listener as HTMLElement).removeEventListener('scroll', handleScroll, eventOptions);
+      }
+    });
+    scrollListenersRef.current.clear();
+    
     observer.current?.disconnect();
     onClose?.();
     setHideOverlay(true);
 
     if (hideDocumentOverflow) {
       // document.body.style.overflow = 'auto';
     }
-  }, []);
+  }, [handleScroll, onClose, hideDocumentOverflow]);
 
   /**
    *
@@ -166,7 +220,7 @@ const Overlay: React.FunctionComponent<OverlayProps> = ({
     if (context?.childClosing) {
       closeProcess();
     }
-  }, [context?.childClosing]);
+  }, [context?.childClosing, closeProcess]);
 
   /**
    * Closes the overlay when click outside of the overlay content
@@ -181,16 +235,7 @@ const Overlay: React.FunctionComponent<OverlayProps> = ({
         closeProcess();
       }
     },
-    [overlayContentRef]
-  );
-
-  /**
-   * Synchronizes the position of the overlay content with the scroll position
-   * (do not auto-close overlays on scroll).
-   */
-  const handleWindowScroll = useDebouncedCallback(
-    () => setRetriggerStyleCal(new Date().getTime()),
-    10
+    [closeProcess]
   );
 
   // onMount process
@@ -201,36 +246,58 @@ const Overlay: React.FunctionComponent<OverlayProps> = ({
       document.body.style.overflow = 'hidden';
     }
 
-    document.addEventListener('scroll', handleWindowScroll);
+    const scrollableParents = getScrollableParents(placementReference?.current || null);
+    const eventOptions = { capture: true, passive: true } as AddEventListenerOptions;
+
+    scrollableParents.forEach(parent => {
+      if (parent === document) {
+        document.addEventListener('scroll', handleScroll, eventOptions);
+      } else {
+        (parent as HTMLElement).addEventListener('scroll', handleScroll, eventOptions);
+      }
+      scrollListenersRef.current.add(parent);
+    });
 
     if (overlayAnimation) {
       setHideOverlay(false);
     }
 
-    // cleanup
     return () => {
-      document.removeEventListener('scroll', handleWindowScroll);
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+      
+      scrollListenersRef.current.forEach(listener => {
+        if (listener === document) {
+          document.removeEventListener('scroll', handleScroll, eventOptions);
+        } else {
+          (listener as HTMLElement).removeEventListener('scroll', handleScroll, eventOptions);
+        }
+      });
+      scrollListenersRef.current.clear();
+      
       if (hideDocumentOverflow) {
         document.body.style.overflow = originalOverflow;
       }
-      // observer.current?.disconnect();
     };
-  }, [hideDocumentOverflow, handleWindowScroll, overlayAnimation]);
+  }, [hideDocumentOverflow, handleScroll, overlayAnimation, placementReference, getScrollableParents]);
 
   const onRef = useCallback((node: HTMLDivElement) => {
     const ele = node as HTMLDivElement;
     if (ele) {
       overlayRef.current = ele;
 
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+      
       observer.current = new ResizeObserver(retrigger);
-
       observer.current.observe(ele);
 
       onOpen?.();
-      // setTimeout(() => {
-      // }, 50);
     }
-  }, []);
+  }, [retrigger, onOpen]);
 
   const onOverlayRef = useCallback((node: HTMLDivElement) => {
     const ele = node as HTMLDivElement;
@@ -249,18 +316,18 @@ const Overlay: React.FunctionComponent<OverlayProps> = ({
    * we would want to hide the overlay content until the overlay is positioned correctly.
    */
   const customPlacementStyle = useMemo<CSSProperties>(() => {
-    if (placement && placementStyle) {
+    if (placement && placementStyle && Object.keys(placementStyle).length > 0) {
       return placementStyle;
     }
 
-    if (placement && !placementStyle) {
+    if (placement && (!placementStyle || Object.keys(placementStyle).length === 0)) {
       return {
         visibility: 'hidden',
       };
     }
 
     return {};
-  }, [JSON.stringify(placementStyle), placement]);
+  }, [placementStyle, placement]);
 
   return !disableBackdrop ? (
     <div

packages/lib/components/common/withOverlay.tsx

@@ -73,9 +73,15 @@ const withOverlay = function <T extends OverlayModel<U>, U>(
     useEffect(() => {
       if (containedToParent?.current) {
         portalContainer.current = containedToParent.current;
+        const originalPosition = portalContainer.current.style.position;
         portalContainer.current.style.position = 'relative';
         setPortalWrapperCreated(true);
-        return undefined;
+        
+        return () => {
+          if (portalContainer.current) {
+            portalContainer.current.style.position = originalPosition || '';
+          }
+        };
       } else {
         overlayRef.current = document.createElement('div');
         overlayRef.current.className = `${classPrefix.current}-portal-wrapper`;
@@ -84,28 +90,27 @@ const withOverlay = function <T extends OverlayModel<U>, U>(
         setPortalWrapperCreated(true);
 
         return () => {
-          document.body.removeChild(overlayRef.current as HTMLElement);
+          if (overlayRef.current && document.body.contains(overlayRef.current)) {
+            document.body.removeChild(overlayRef.current);
+          }
+          overlayRef.current = null;
         };
       }
-    }, []);
+    }, [containedToParent]);
 
     const handleClose = useCallback(() => {
       setIsClosing(true);
 
       if (!disableAnimation) {
         setTimeout(() => {
           setPortalWrapperCreated(false);
-          if (onClose) {
-            onClose();
-          }
+          onClose?.();
         }, 250);
       } else {
         setPortalWrapperCreated(false);
-        if (onClose) {
-          onClose();
-        }
+        onClose?.();
       }
-    }, []);
+    }, [disableAnimation, onClose]);
 
     const handleChildClose = useCallback(() => setChildInvokedClose(true), []);
 

packages/lib/components/dropdown/dropdown-menu.module.scss

@@ -24,15 +24,15 @@
 
   &.dark {
     @extend %shadow-medium-dark;
-    background: linear-gradient(135deg, theme.$dark-control-bg 0%, rgba(31, 41, 55, 0.8) 100%);
+    background: theme.$dark-control-bg;
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3),
       0 10px 10px -5px rgba(0, 0, 0, 0.2),
       0 0 0 1px rgba(75, 85, 99, 0.2);
     border: 1px solid rgba(75, 85, 99, 0.25);
   }
 
   &:not(.dark) {
-    background: linear-gradient(135deg, theme.$white 0%, rgba(249, 250, 251, 0.8) 100%);
+    background: theme.$white;
     position: relative;
 
     // Polished glow effect for opening animation