@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d7d662c

package/dist/elements/Popup/index.js

@@ -1,27 +1,35 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export * as PopupList from './PopupButtonList/index.js';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import React, { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { useEffectEvent } from '../../hooks/useEffectEvent.js';
+import { useModalFocus } from '../../providers/ModalFocus/index.js';
+import { ThemeProvider } from '../../providers/Theme/index.js';
 import './index.css';
 import { PopupTrigger } from './PopupTrigger/index.js';
+import { createSubmenuScope } from './SubmenuScope.js';
+import { useSubmenuPointerIntent } from './useSubmenuPointerIntent.js';
 const baseClass = 'popup';
+const PopupContext = /*#__PURE__*/createContext(null);
 /**
  * Selector for all elements the browser considers tabbable.
  */
 const TABBABLE_SELECTOR = ['a[href]', 'button:not(:disabled)', 'input:not(:disabled):not([type="hidden"])', 'select:not(:disabled)', 'textarea:not(:disabled)', '[tabindex]', '[contenteditable]:not([contenteditable="false"])', 'audio[controls]', 'video[controls]', 'summary'].map(s => `${s}:not([tabindex="-1"])`).join(', ');
+const MENU_ITEM_SELECTOR = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
+const POPUP_CONTENT_SELECTOR = `.${baseClass}__content, .${baseClass}__hidden-content`;
+const getMenuItems = popup => Array.from(popup.querySelectorAll(MENU_ITEM_SELECTOR)).filter(item => item.closest(POPUP_CONTENT_SELECTOR) === popup);
 /**
  * Component that renders a popup, as well as a button that triggers the popup.
  *
- * The popup is rendered in a portal, and is automatically positioned above / below the trigger,
+ * The popup is rendered next to its trigger in the DOM and positioned above / below it,
  * depending on the verticalAlign prop and the space available.
  */
 export const Popup = props => {
   const {
     id,
     button,
+    buttonAriaLabel,
     buttonClassName,
     buttonSize,
     buttonType = 'default',
@@ -30,42 +38,117 @@ export const Popup = props => {
     className,
     disabled,
     forceOpen,
-    horizontalAlign = 'left',
+    horizontalAlign: horizontalAlignProp,
+    hoverSubmenu = false,
     initActive = false,
     noBackground,
     onToggleClose,
     onToggleOpen,
+    popupAriaLabel,
+    popupType,
     portalClassName,
     render,
+    renderButton,
     showOnHover = false,
     showScrollbar = false,
-    size = 'medium',
+    side,
+    size = 'fit-content',
+    theme = 'dark',
     verticalAlign = 'bottom'
   } = props;
   const popupRef = useRef(null);
+  const containerRef = useRef(null);
   const triggerRef = useRef(null);
+  const {
+    registerPopup
+  } = useModalFocus();
+  const getTrigger = useCallback(() => triggerRef.current?.querySelector('button, [tabindex="0"]') ?? null, []);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (container) {
+      return registerPopup({
+        container,
+        getTrigger
+      });
+    }
+  }, [getTrigger, registerPopup]);
+  const generatedContentId = useId();
+  const contentId = `${id || generatedContentId}-content`;
   /**
   * Keeps track of whether the popup was opened via keyboard.
   * This is used to determine whether to autofocus the first element in the popup.
   * If the popup was opened via mouse, we do not want to autofocus the first element.
   */
   const openedViaKeyboardRef = useRef(false);
-  const [mounted, setMounted] = useState(false);
+  const parentPopup = use(PopupContext);
+  const popupRole = popupType === true ? 'menu' : popupType || undefined;
+  const submenuScope = useState(() => createSubmenuScope())[0];
+  const isSubmenu = parentPopup?.popupRole === 'menu' && popupRole === 'menu';
+  const horizontalAlign = horizontalAlignProp ?? 'left';
+  const resolvedSide = side ?? (isSubmenu ? horizontalAlignProp === 'left' ? 'left' : 'right' : undefined);
   const [active, setActiveInternal] = useState(initActive);
   const [isOnTop, setIsOnTop] = useState(verticalAlign === 'top');
-  // Track when component is mounted to avoid SSR/client hydration mismatch
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  const setActive = useCallback((isActive, viaKeyboard = false) => {
+  const setActive = useCallback((isActive, viaKeyboard = false, coordinateParent = true) => {
     if (isActive) {
       openedViaKeyboardRef.current = viaKeyboard;
+      if (coordinateParent && isSubmenu) {
+        parentPopup.submenuScope.requestOpen({
+          id: contentId,
+          delay: false,
+          viaKeyboard
+        });
+        return;
+      }
       onToggleOpen?.(true);
     } else {
       onToggleClose?.();
+      submenuScope.closeActiveBranch();
+      parentPopup?.submenuScope.release(contentId);
     }
     setActiveInternal(isActive);
-  }, [onToggleClose, onToggleOpen]);
+  }, [contentId, isSubmenu, onToggleClose, onToggleOpen, parentPopup, submenuScope]);
+  const closePopup = useCallback(({
+    restoreFocus = true
+  } = {}) => {
+    const trigger = getTrigger();
+    setActive(false);
+    if (restoreFocus) {
+      requestAnimationFrame(() => trigger?.focus());
+    }
+  }, [getTrigger, setActive]);
+  const close = useCallback(() => closePopup(), [closePopup]);
+  const closePopupChain = useCallback((options = {}) => {
+    if (parentPopup) {
+      closePopup({
+        restoreFocus: false
+      });
+      parentPopup.closePopupChain(options);
+      return;
+    }
+    closePopup(options);
+  }, [closePopup, parentPopup]);
+  const openFromParent = useCallback(viaKeyboard_0 => setActive(true, viaKeyboard_0, false), [setActive]);
+  useEffect(() => {
+    if (!isSubmenu) {
+      return;
+    }
+    return parentPopup.submenuScope.register({
+      id: contentId,
+      closeBranch: () => closePopup({
+        restoreFocus: false
+      }),
+      open: openFromParent
+    });
+  }, [closePopup, contentId, isSubmenu, openFromParent, parentPopup]);
+  const pointerIntent = useSubmenuPointerIntent({
+    contentRef: popupRef,
+    enabled: isSubmenu && hoverSubmenu,
+    onClose: () => setActive(false),
+    onOpen: () => parentPopup?.submenuScope.requestOpen({
+      id: contentId,
+      delay: Boolean(parentPopup.submenuScope.activeChildId)
+    })
+  });
   // /////////////////////////////////////
   // Position Calculation
   //
@@ -74,54 +157,100 @@ export const Popup = props => {
   // styles if the calculated position differs from current position.
   // /////////////////////////////////////
   const updatePosition = useEffectEvent(() => {
-    const trigger = triggerRef.current;
+    const trigger_0 = triggerRef.current;
     const popup = popupRef.current;
-    if (!trigger || !popup) {
+    if (!trigger_0 || !popup) {
       return;
     }
-    const triggerRect = trigger.getBoundingClientRect();
+    const triggerRect = trigger_0.getBoundingClientRect();
     const popupRect = popup.getBoundingClientRect();
     // Gap between the popup and the trigger/viewport edges (in pixels)
-    const offset = 10;
-    // /////////////////////////////////////
-    // Vertical Positioning
-    // Calculates the `top` position in absolute page coordinates.
-    // Uses `verticalAlign` prop as the preferred direction, but flips
-    // to the opposite side if there's not enough viewport space.
-    // /////////////////////////////////////
+    const offset = 8;
+    // Additional gap used in side mode so the child popup has breathing room from its parent
+    const sideOffset = 4;
     let top;
-    let onTop = verticalAlign === 'top';
-    if (verticalAlign === 'bottom') {
-      top = triggerRect.bottom + window.scrollY + offset;
-      if (triggerRect.bottom + popupRect.height + offset > window.innerHeight) {
-        top = triggerRect.top + window.scrollY - popupRect.height - offset;
-        onTop = true;
+    let left;
+    let caretLeft;
+    if (resolvedSide) {
+      // /////////////////////////////////////
+      // Side Positioning
+      // Places the popup to the left or right of the parent popup (not just the trigger),
+      // top-aligned with the trigger. Flips to the opposite side if there is not enough
+      // viewport space.
+      // /////////////////////////////////////
+      const scrollContainer = popup.querySelector(`:scope > .${baseClass}__scroll-container`);
+      const popupPaddingTop = scrollContainer ? Number.parseFloat(window.getComputedStyle(scrollContainer).paddingTop) || 0 : 0;
+      // Align the first menu item with the trigger by accounting for the popup's top padding.
+      top = triggerRect.top - popupPaddingTop;
+      const maxTop = window.innerHeight - popupRect.height - offset;
+      top = Math.max(offset, Math.min(top, maxTop));
+      // Use the parent popup's bounding rect as the reference for left/right positioning
+      // so the child appears 4px from the parent popup edge, not just the trigger button.
+      const anchorRect = parentPopup?.popupRef.current ? parentPopup.popupRef.current.getBoundingClientRect() : triggerRect;
+      if (resolvedSide === 'left') {
+        left = anchorRect.left - popupRect.width - sideOffset;
+        if (left < offset) {
+          // flip to right side
+          left = anchorRect.right + sideOffset;
+        }
+      } else {
+        left = anchorRect.right + sideOffset;
+        if (left + popupRect.width + offset > window.innerWidth) {
+          // flip to left side
+          left = anchorRect.left - popupRect.width - sideOffset;
+        }
       }
+      left = Math.max(offset, Math.min(left, Math.max(offset, window.innerWidth - popupRect.width - offset)));
+      // Caret not used in side mode; set a neutral value
+      caretLeft = popupRect.width / 2;
+      setIsOnTop(false);
     } else {
-      top = triggerRect.top + window.scrollY - popupRect.height - offset;
-      if (triggerRect.top - popupRect.height - offset < 0) {
-        top = triggerRect.bottom + window.scrollY + offset;
-        onTop = false;
+      // /////////////////////////////////////
+      // Vertical Positioning
+      // Calculates the `top` position in absolute page coordinates.
+      // Uses `verticalAlign` prop as the preferred direction, but flips
+      // to the opposite side if there's not enough viewport space.
+      // /////////////////////////////////////
+      let onTop = verticalAlign === 'top';
+      if (verticalAlign === 'bottom') {
+        top = triggerRect.bottom + offset;
+        if (triggerRect.bottom + popupRect.height + offset > window.innerHeight) {
+          // Try to flip above — only do so if there's actually enough room
+          const topIfAbove = triggerRect.top - popupRect.height - offset;
+          if (topIfAbove >= 0) {
+            top = topIfAbove;
+            onTop = true;
+          }
+          // else: not enough room above either — keep below and let it overflow rather than going off-screen
+        }
+      } else {
+        top = triggerRect.top - popupRect.height - offset;
+        if (triggerRect.top - popupRect.height - offset < 0) {
+          top = triggerRect.bottom + offset;
+          onTop = false;
+        }
       }
+      const maxTop_0 = Math.max(offset, window.innerHeight - popupRect.height - offset);
+      top = Math.max(offset, Math.min(top, maxTop_0));
+      setIsOnTop(onTop);
+      // /////////////////////////////////////
+      // Horizontal Positioning
+      // Calculates the `left` position based on `horizontalAlign` prop:
+      // - 'left': aligns popup's left edge with trigger's left edge
+      // - 'right': aligns popup's right edge with trigger's right edge
+      // - 'center': centers popup horizontally relative to trigger
+      // Then clamps to keep the popup within viewport bounds.
+      // /////////////////////////////////////
+      left = horizontalAlign === 'right' ? triggerRect.right - popupRect.width : horizontalAlign === 'center' ? triggerRect.left + triggerRect.width / 2 - popupRect.width / 2 : triggerRect.left;
+      left = Math.max(offset, Math.min(left, window.innerWidth - popupRect.width - offset));
+      // /////////////////////////////////////
+      // Caret Positioning
+      // Positions the caret arrow to point at the trigger's horizontal center.
+      // Clamps between 12px from edges to prevent caret from overflowing the popup.
+      // /////////////////////////////////////
+      const triggerCenter = triggerRect.left + triggerRect.width / 2;
+      caretLeft = Math.max(12, Math.min(triggerCenter - left, popupRect.width - 12));
     }
-    setIsOnTop(onTop);
-    // /////////////////////////////////////
-    // Horizontal Positioning
-    // Calculates the `left` position based on `horizontalAlign` prop:
-    // - 'left': aligns popup's left edge with trigger's left edge
-    // - 'right': aligns popup's right edge with trigger's right edge
-    // - 'center': centers popup horizontally relative to trigger
-    // Then clamps to keep the popup within viewport bounds.
-    // /////////////////////////////////////
-    let left = horizontalAlign === 'right' ? triggerRect.right - popupRect.width : horizontalAlign === 'center' ? triggerRect.left + triggerRect.width / 2 - popupRect.width / 2 : triggerRect.left;
-    left = Math.max(offset, Math.min(left, window.innerWidth - popupRect.width - offset));
-    // /////////////////////////////////////
-    // Caret Positioning
-    // Positions the caret arrow to point at the trigger's horizontal center.
-    // Clamps between 12px from edges to prevent caret from overflowing the popup.
-    // /////////////////////////////////////
-    const triggerCenter = triggerRect.left + triggerRect.width / 2;
-    const caretLeft = Math.max(12, Math.min(triggerCenter - left, popupRect.width - 12));
     // /////////////////////////////////////
     // Apply Styles (only if changed)
     // Compares calculated position with current styles to avoid unnecessary
@@ -131,8 +260,12 @@ export const Popup = props => {
     // Values are rounded to match browser's CSS precision and avoid false updates.
     // /////////////////////////////////////
     const newTop = `${Math.round(top)}px`;
-    const newLeft = `${Math.round(left + window.scrollX)}px`;
+    const newLeft = `${Math.round(left)}px`;
     const newCaretLeft = `${Math.round(caretLeft)}px`;
+    const newPosition = 'fixed';
+    if (popup.style.position !== newPosition) {
+      popup.style.position = newPosition;
+    }
     if (popup.style.top !== newTop) {
       popup.style.top = newTop;
     }
@@ -146,11 +279,21 @@ export const Popup = props => {
   // /////////////////////////////////////
   // Click Outside Handler
   // Closes popup when clicking outside both the popup and trigger.
+  // Distinguishes between parent and child popups:
+  // - Click in child popup: parent stays open
+  // - Click in parent popup: child closes
   // /////////////////////////////////////
   const handleClickOutside = useEffectEvent(e => {
-    const isOutsidePopup = !popupRef.current?.contains(e.target);
-    const isOutsideTrigger = !triggerRef.current?.contains(e.target);
-    if (isOutsidePopup && isOutsideTrigger) {
+    const target = e.target;
+    const isOutsidePopup = !popupRef.current?.contains(target);
+    const isOutsideTrigger = !triggerRef.current?.contains(target);
+    // Check if click is inside a popup portal
+    const clickedPopupContent = target.closest?.('.popup__content');
+    // If the clicked popup contains this popup's trigger, it's a parent popup
+    // and we should close. If it doesn't contain our trigger, it's a child popup
+    // and we should stay open to avoid closing parent when interacting with child.
+    const isInsideChildPopup = clickedPopupContent && !clickedPopupContent.contains(triggerRef.current);
+    if (isOutsidePopup && isOutsideTrigger && !isInsideChildPopup) {
       setActive(false);
     }
   });
@@ -158,8 +301,8 @@ export const Popup = props => {
   // Keyboard Navigation
   // Handles keyboard interactions when popup is open:
   // - Escape: closes popup and returns focus to trigger
-  // - Tab/Shift+Tab: cycles through focusable items with wrapping
-  // - ArrowUp/ArrowDown: same as Shift+Tab/Tab for menu-style navigation
+  // - Tab/Shift+Tab: closes menus; dialogs retain normal document tab order
+  // - ArrowUp/ArrowDown: moves between menu items with wrapping
   // Focus is managed manually to support elements the browser might skip.
   // /////////////////////////////////////
   const handleKeyDown = useEffectEvent(e_0 => {
@@ -167,29 +310,72 @@ export const Popup = props => {
     if (!popup_0 || !active) {
       return;
     }
+    const activePopup = document.activeElement?.closest(`.${baseClass}__content`);
+    if (activePopup && activePopup !== popup_0) {
+      return;
+    }
     if (e_0.key === 'Escape') {
       e_0.preventDefault();
-      setActive(false);
-      triggerRef.current?.querySelector('button, [tabindex="0"]')?.focus();
+      e_0.stopPropagation();
+      closePopup();
       return;
     }
-    if (e_0.key === 'Tab' || e_0.key === 'ArrowDown' || e_0.key === 'ArrowUp') {
+    if (e_0.key === 'ArrowRight' && popupRole === 'menu') {
+      const trigger_1 = document.activeElement?.closest(`.${baseClass}__trigger-wrap`);
+      const nestedTrigger = trigger_1?.querySelector('button, [role="menuitem"]');
+      if (nestedTrigger) {
+        e_0.preventDefault();
+        nestedTrigger.dispatchEvent(new KeyboardEvent('keydown', {
+          bubbles: true,
+          key: 'Enter'
+        }));
+        return;
+      }
+    }
+    if (e_0.key === 'ArrowLeft' && parentPopup) {
+      e_0.preventDefault();
+      closePopup();
+      return;
+    }
+    if (e_0.key === 'Tab' && popupRole === 'menu') {
+      if (e_0.shiftKey) {
+        e_0.preventDefault();
+        closePopupChain({
+          restoreFocus: true
+        });
+        return;
+      }
+      setTimeout(closePopupChain);
+      return;
+    }
+    if (['ArrowDown', 'ArrowUp', 'End', 'Home'].includes(e_0.key)) {
+      const menuItems = getMenuItems(popup_0);
+      if (menuItems.length > 0) {
+        e_0.preventDefault();
+        const currentIndex = menuItems.findIndex(item => item === document.activeElement);
+        const nextIndex = e_0.key === 'Home' ? 0 : e_0.key === 'End' ? menuItems.length - 1 : e_0.key === 'ArrowUp' ? currentIndex <= 0 ? menuItems.length - 1 : currentIndex - 1 : currentIndex === -1 || currentIndex === menuItems.length - 1 ? 0 : currentIndex + 1;
+        menuItems.forEach((item_0, index) => item_0.setAttribute('tabindex', index === nextIndex ? '0' : '-1'));
+        menuItems[nextIndex].focus();
+        return;
+      }
+    }
+    if (e_0.key === 'ArrowDown' || e_0.key === 'ArrowUp') {
       const focusable = Array.from(popup_0.querySelectorAll(TABBABLE_SELECTOR));
       if (focusable.length === 0) {
         return;
       }
       e_0.preventDefault();
-      const currentIndex = focusable.findIndex(el => el === document.activeElement);
-      const goBackward = e_0.key === 'ArrowUp' || e_0.key === 'Tab' && e_0.shiftKey;
-      let nextIndex;
-      if (currentIndex === -1) {
-        nextIndex = goBackward ? focusable.length - 1 : 0;
+      const currentIndex_0 = focusable.findIndex(el => el === document.activeElement);
+      const goBackward = e_0.key === 'ArrowUp';
+      let nextIndex_0;
+      if (currentIndex_0 === -1) {
+        nextIndex_0 = goBackward ? focusable.length - 1 : 0;
       } else if (goBackward) {
-        nextIndex = currentIndex === 0 ? focusable.length - 1 : currentIndex - 1;
+        nextIndex_0 = currentIndex_0 === 0 ? focusable.length - 1 : currentIndex_0 - 1;
       } else {
-        nextIndex = currentIndex === focusable.length - 1 ? 0 : currentIndex + 1;
+        nextIndex_0 = currentIndex_0 === focusable.length - 1 ? 0 : currentIndex_0 + 1;
       }
-      focusable[nextIndex].focus();
+      focusable[nextIndex_0].focus();
     }
   });
   // /////////////////////////////////////
@@ -197,15 +383,22 @@ export const Popup = props => {
   // Closes popup when buttons/links inside are clicked (includes Enter/Space activation).
   // /////////////////////////////////////
   const handleActionableClick = useEffectEvent(e_1 => {
-    const target = e_1.target;
+    const target_0 = e_1.target;
     // Allow opting out with data-popup-prevent-close attribute on element or ancestor
-    if (target.closest('[data-popup-prevent-close]')) {
+    if (target_0.closest('[data-popup-prevent-close]')) {
       return;
     }
     // Check if the clicked element or any ancestor is an actionable element
-    const actionable = target.closest('button, a[href], [role="button"], [role="menuitem"]');
+    const actionable = target_0.closest('button, a[href], [role="button"], [role="menuitem"]');
     if (actionable && popupRef.current?.contains(actionable)) {
-      setActive(false);
+      if (actionable.closest(`.${baseClass}__content`) !== popupRef.current) {
+        return;
+      }
+      // Don't close if clicking a nested popup's trigger — it will manage its own open state
+      if (actionable.closest(`.${baseClass}__trigger-wrap`)) {
+        return;
+      }
+      closePopup();
     }
   });
   // /////////////////////////////////////
@@ -213,17 +406,45 @@ export const Popup = props => {
   // /////////////////////////////////////
   useEffect(() => {
     if (!active) {
+      const popup_1 = popupRef.current;
+      if (popup_1) {
+        // Clear inline position styles so the CSS `top: -9999px` rule on
+        // `.popup__hidden-content` takes effect. Without this, the inline
+        // styles set during positioning would win over the CSS rule, keeping
+        // portaled children (e.g. a ReactSelect menu) visually on-screen.
+        popup_1.style.position = '';
+        popup_1.style.top = '';
+        popup_1.style.left = '';
+      }
       return;
     }
-    const popup_1 = popupRef.current;
-    if (!popup_1) {
+    const popup_2 = popupRef.current;
+    if (!popup_2) {
       return;
     }
+    if (!popup_2.matches(':popover-open')) {
+      popup_2.showPopover();
+    }
+    const menuItems_0 = getMenuItems(popup_2);
+    menuItems_0.forEach((item_1, index_0) => item_1.setAttribute('tabindex', index_0 === 0 ? '0' : '-1'));
     // /////////////////////////////////////
     // Initial Position
-    // Calculate and apply popup position immediately on open.
+    // Calculate and apply popup position.
+    // getBoundingClientRect() forces synchronous layout.
+    //
+    // We call updatePosition() twice: once synchronously (so the popup
+    // snaps to roughly the right place immediately rather than flashing
+    // from -9999px) and once in a requestAnimationFrame, which fires
+    // after the browser has finished laying out the newly-visible popup
+    // content. The rAF call is the authoritative one — it catches cases
+    // where the popup height wasn't stable yet during the first call
+    // (e.g. ColumnSelection popup content rendering after hidden → visible
+    // class switch), which was causing incorrect flip-to-top decisions.
     // /////////////////////////////////////
     updatePosition();
+    const rafId = requestAnimationFrame(() => {
+      updatePosition();
+    });
     // /////////////////////////////////////
     // Focus Management
     // When opened via keyboard, autofocus the first focusable button.
@@ -232,7 +453,7 @@ export const Popup = props => {
     if (openedViaKeyboardRef.current) {
       // Use requestAnimationFrame to ensure DOM is ready.
       requestAnimationFrame(() => {
-        const firstFocusable = popup_1.querySelector(TABBABLE_SELECTOR);
+        const firstFocusable = menuItems_0[0] ?? popup_2.querySelector(TABBABLE_SELECTOR);
         firstFocusable?.focus();
       });
     }
@@ -248,16 +469,20 @@ export const Popup = props => {
       passive: true
     });
     document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('keydown', handleKeyDown);
-    popup_1.addEventListener('click', handleActionableClick);
+    popup_2.addEventListener('keydown', handleKeyDown);
+    popup_2.addEventListener('click', handleActionableClick);
     return () => {
+      cancelAnimationFrame(rafId);
       window.removeEventListener('resize', updatePosition);
       window.removeEventListener('scroll', updatePosition, {
         capture: true
       });
       document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('keydown', handleKeyDown);
-      popup_1.removeEventListener('click', handleActionableClick);
+      popup_2.removeEventListener('keydown', handleKeyDown);
+      popup_2.removeEventListener('click', handleActionableClick);
+      if (popup_2.matches(':popover-open')) {
+        popup_2.hidePopover();
+      }
     };
   }, [active]);
   useEffect(() => {
@@ -268,16 +493,22 @@ export const Popup = props => {
   const Trigger = /*#__PURE__*/_jsx(PopupTrigger, {
     active: active,
     button: button,
+    buttonAriaLabel: buttonAriaLabel,
     buttonType: buttonType,
     className: buttonClassName,
+    contentId: contentId,
     disabled: disabled,
+    isMenuItem: parentPopup?.popupRole === 'menu',
     noBackground: noBackground,
+    popupType: popupType,
+    renderButton: renderButton,
     setActive: setActive,
     size: buttonSize
   });
   return /*#__PURE__*/_jsxs("div", {
     className: [baseClass, className].filter(Boolean).join(' '),
     id: id,
+    ref: containerRef,
     children: [/*#__PURE__*/_jsx("div", {
       className: `${baseClass}__trigger-wrap`,
       ref: triggerRef,
@@ -288,28 +519,48 @@ export const Popup = props => {
         role: "button",
         tabIndex: 0,
         children: Trigger
+      }) : hoverSubmenu && isSubmenu ? /*#__PURE__*/_jsx("div", {
+        ...pointerIntent,
+        className: `${baseClass}__submenu-hover-watch`,
+        children: Trigger
       }) : Trigger
-    }), mounted ?
-    // This ensures that components within the popup, like modals, do not unmount when the popup closes.
-    // Otherwise, modals opened from the popup will close unexpectedly when clicking within the modal, since
-    // that closes the popup due to the click outside handler.
-    /*#__PURE__*/
-    createPortal(/*#__PURE__*/_jsxs("div", {
-      className: active ? [`${baseClass}__content`, `${baseClass}--size-${size}`, isOnTop ? `${baseClass}--v-top` : `${baseClass}--v-bottom`, portalClassName].filter(Boolean).join(' ') :
-      // tests do not accidentally target inactive popups.
-      `${baseClass}__hidden-content`,
-      "data-popup-id": id || undefined,
-      "data-theme": "dark",
-      ref: popupRef,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__scroll-container${showScrollbar ? ` ${baseClass}__scroll-container--show-scrollbar` : ''}`,
-        children: [render?.({
-          close: () => setActive(false)
-        }), children]
-      }), caret && /*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__caret`
-      })]
-    }), document.body) : null]
+    }), /*#__PURE__*/_jsx(PopupContext, {
+      value: {
+        closePopupChain,
+        popupRef,
+        popupRole,
+        submenuScope
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        "aria-label": popupAriaLabel,
+        className: active ? [`${baseClass}__content`, `${baseClass}--size-${size}`, resolvedSide ? `${baseClass}--side-${resolvedSide}` : isOnTop ? `${baseClass}--v-top` : `${baseClass}--v-bottom`, portalClassName].filter(Boolean).join(' ') :
+        // tests do not accidentally target inactive popups.
+        `${baseClass}__hidden-content`,
+        "data-popup-id": id || undefined,
+        "data-theme": theme === 'auto' ? undefined : theme,
+        id: contentId,
+        onMouseEnter: pointerIntent.onMouseEnter,
+        onMouseLeave: pointerIntent.onMouseLeave,
+        popover: "manual",
+        ref: popupRef,
+        role: popupRole,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__scroll-container${showScrollbar ? ` ${baseClass}__scroll-container--show-scrollbar` : ''}`,
+          children: theme === 'auto' ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [render?.({
+              close
+            }), children]
+          }) : /*#__PURE__*/_jsxs(ThemeProvider, {
+            theme: theme,
+            children: [render?.({
+              close
+            }), children]
+          })
+        }), caret && !resolvedSide && /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__caret`
+        })]
+      })
+    })]
   });
 };
 //# sourceMappingURL=index.js.map