@payloadcms/ui 4.0.0-internal.c7d5de4 → 4.0.0-internal.cb69780

package/dist/elements/Popup/index.css

@@ -33,8 +33,10 @@
     color: var(--popup-text, var(--color-text));
     border-radius: var(--popup-radius);
     min-width: 80px;
-    max-width: 400px;
+    max-width: min(calc(var(--spacer-6) * 10), calc(100vw - var(--spacer-3)));
     box-shadow: var(--elevation-400-menu-panel);
+    border: 0;
+    margin: 0;
   }
 
   .popup__content[data-theme='dark'] {
@@ -57,7 +59,7 @@
   .popup__scroll-container {
     overflow-x: hidden;
     overflow-y: auto;
-    max-height: calc(var(--spacer-5) * 10);
+    max-height: min(calc(var(--spacer-5) * 10), calc(100vh - var(--spacer-3)));
     padding: var(--spacer-2) 0;
   }
 

package/dist/elements/Popup/index.d.ts

@@ -1,34 +1,20 @@
-import type { CSSProperties } from 'react';
+import type { AriaAttributes, CSSProperties } from 'react';
 export * as PopupList from './PopupButtonList/index.js';
 import React from 'react';
 import './index.css';
+import { type PopupButtonRenderProps } from './PopupTrigger/index.js';
 export type PopupProps = {
     backgroundColor?: CSSProperties['backgroundColor'];
     boundingRef?: React.RefObject<HTMLElement>;
     button?: React.ReactNode;
-    /**
-     * Accessible label for the trigger button.
-     * Necessary when the button has an icon-only content,
-     * so the button has an accessible name for screen readers.
-     */
     buttonAriaLabel?: string;
-    /**
-     * The class name to apply to the button that triggers the popup.
-     */
     buttonClassName?: string;
     buttonSize?: 'large' | 'medium';
     buttonType?: 'custom' | 'default';
     caret?: boolean;
     children?: React.ReactNode;
-    /**
-     * The class name to apply to the popup container containing the trigger.
-     * This does not wrap the actual popup content, which is rendered in a portal.
-     */
     className?: string;
     disabled?: boolean;
-    /**
-     * Force control the open state of the popup, regardless of the trigger.
-     */
     forceOpen?: boolean;
     /**
      * Preferred horizontal alignment of the popup, if there is enough space available.
@@ -41,9 +27,8 @@ export type PopupProps = {
     noBackground?: boolean;
     onToggleClose?: () => void;
     onToggleOpen?: (active: boolean) => void;
-    /**
-     * Class name to apply to the portal container.
-     */
+    popupAriaLabel?: string;
+    popupType?: AriaAttributes['aria-haspopup'];
     portalClassName?: string;
     render?: (args: {
         close: () => void;
@@ -52,13 +37,7 @@ export type PopupProps = {
      * Render prop for custom trigger button. Receives onClick/onKeyDown/aria props.
      * When provided, `button` and `buttonType` are ignored.
      */
-    renderButton?: (props: {
-        active: boolean;
-        'aria-expanded': boolean;
-        'aria-haspopup': true;
-        onClick: React.MouseEventHandler;
-        onKeyDown: React.KeyboardEventHandler;
-    }) => React.ReactNode;
+    renderButton?: (props: PopupButtonRenderProps) => React.ReactNode;
     showOnHover?: boolean;
     /**
      * By default, the scrollbar is hidden. If you want to show it, set this to true.
@@ -96,7 +75,7 @@ export type PopupProps = {
 /**
  * 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 declare const Popup: React.FC<PopupProps>;

package/dist/elements/Popup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KAAuE,MAAM,OAAO,CAAA;AAK3F,OAAO,aAAa,CAAA;AA4CpB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,MAAM,EAAE,OAAO,CAAA;QACf,eAAe,EAAE,OAAO,CAAA;QACxB,eAAe,EAAE,IAAI,CAAA;QACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;QAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;KACtC,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsftC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAY,aAAa,EAAE,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KAA8E,MAAM,OAAO,CAAA;AAIlG,OAAO,aAAa,CAAA;AACpB,OAAO,EAAE,KAAK,sBAAsB,EAAgB,MAAM,yBAAyB,CAAA;AAsCnF,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA4jBtC,CAAA"}

package/dist/elements/Popup/index.js

@@ -2,8 +2,7 @@
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export * as PopupList from './PopupButtonList/index.js';
-import React, { createContext, use, useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import React, { createContext, use, useCallback, useEffect, useId, useRef, useState } from 'react';
 import { useEffectEvent } from '../../hooks/useEffectEvent.js';
 import { ThemeProvider } from '../../providers/Theme/index.js';
 import './index.css';
@@ -14,24 +13,13 @@ 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(', ');
-/**
- * Returns whether the element has a `position: fixed` ancestor (e.g. an open Drawer).
- * Such popups must be positioned with `fixed` so they don't drift when the background scrolls.
- */
-const hasFixedAncestor = element => {
-  let node = element?.parentElement;
-  while (node && node !== document.body) {
-    if (window.getComputedStyle(node).position === 'fixed') {
-      return true;
-    }
-    node = node.parentElement;
-  }
-  return false;
-};
+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 => {
@@ -52,6 +40,8 @@ export const Popup = props => {
     noBackground,
     onToggleClose,
     onToggleOpen,
+    popupAriaLabel,
+    popupType,
     portalClassName,
     render,
     renderButton,
@@ -64,11 +54,8 @@ export const Popup = props => {
   } = props;
   const popupRef = useRef(null);
   const triggerRef = useRef(null);
-  /**
-  * Whether the trigger is inside a `position: fixed` ancestor (e.g. a Drawer),
-  * in which case the popup is positioned with `fixed` instead of `absolute`.
-  */
-  const isFixedRef = useRef(false);
+  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.
@@ -76,13 +63,9 @@ export const Popup = props => {
   */
   const openedViaKeyboardRef = useRef(false);
   const parentPopup = use(PopupContext);
-  const [mounted, setMounted] = useState(false);
+  const popupRole = popupType === true ? 'menu' : popupType || 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) => {
     if (isActive) {
       openedViaKeyboardRef.current = viaKeyboard;
@@ -92,6 +75,26 @@ export const Popup = props => {
     }
     setActiveInternal(isActive);
   }, [onToggleClose, onToggleOpen]);
+  const closePopup = useCallback(({
+    restoreFocus = true
+  } = {}) => {
+    const trigger = triggerRef.current?.querySelector('button, [tabindex="0"]');
+    setActive(false);
+    if (restoreFocus) {
+      requestAnimationFrame(() => trigger?.focus());
+    }
+  }, [setActive]);
+  const close = useCallback(() => closePopup(), [closePopup]);
+  const closePopupChain = useCallback((options = {}) => {
+    if (parentPopup) {
+      closePopup({
+        restoreFocus: false
+      });
+      parentPopup.closePopupChain(options);
+      return;
+    }
+    closePopup(options);
+  }, [closePopup, parentPopup]);
   // /////////////////////////////////////
   // Position Calculation
   //
@@ -100,20 +103,15 @@ 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();
-    // Inside a fixed ancestor, use `fixed` (no scroll offset) so background scrolling
-    // doesn't shift the popup. Otherwise use page coordinates (absolute).
-    const useFixed = isFixedRef.current;
-    const scrollY = useFixed ? 0 : window.scrollY;
-    const scrollX = useFixed ? 0 : window.scrollX;
     // Gap between the popup and the trigger/viewport edges (in pixels)
-    const offset = 10;
+    const offset = 8;
     // Additional gap used in side mode so the child popup has breathing room from its parent
     const sideOffset = 4;
     let top;
@@ -127,9 +125,9 @@ export const Popup = props => {
       // viewport space.
       // /////////////////////////////////////
       // Top: align with trigger top, clamped to viewport
-      top = triggerRect.top + scrollY;
-      const maxTop = scrollY + window.innerHeight - popupRect.height - offset;
-      top = Math.max(scrollY + offset, Math.min(top, maxTop));
+      top = triggerRect.top;
+      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;
@@ -146,7 +144,7 @@ export const Popup = props => {
           left = anchorRect.left - popupRect.width - sideOffset;
         }
       }
-      left = left + scrollX;
+      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);
@@ -159,23 +157,25 @@ export const Popup = props => {
       // /////////////////////////////////////
       let onTop = verticalAlign === 'top';
       if (verticalAlign === 'bottom') {
-        top = triggerRect.bottom + scrollY + offset;
+        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 + scrollY - popupRect.height - offset;
-          if (topIfAbove >= scrollY) {
+          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 + scrollY - popupRect.height - offset;
+        top = triggerRect.top - popupRect.height - offset;
         if (triggerRect.top - popupRect.height - offset < 0) {
-          top = triggerRect.bottom + scrollY + offset;
+          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
@@ -204,9 +204,9 @@ 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 + scrollX)}px`;
+    const newLeft = `${Math.round(left)}px`;
     const newCaretLeft = `${Math.round(caretLeft)}px`;
-    const newPosition = useFixed ? 'fixed' : '';
+    const newPosition = 'fixed';
     if (popup.style.position !== newPosition) {
       popup.style.position = newPosition;
     }
@@ -245,8 +245,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 => {
@@ -254,29 +254,55 @@ 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 === '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();
     }
   });
   // /////////////////////////////////////
@@ -292,11 +318,14 @@ export const Popup = props => {
     // Check if the clicked element or any ancestor is an actionable element
     const actionable = target_0.closest('button, a[href], [role="button"], [role="menuitem"]');
     if (actionable && popupRef.current?.contains(actionable)) {
+      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;
       }
-      setActive(false);
+      closePopup();
     }
   });
   // /////////////////////////////////////
@@ -320,6 +349,11 @@ export const Popup = props => {
     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.
@@ -334,8 +368,6 @@ export const Popup = props => {
     // (e.g. ColumnSelection popup content rendering after hidden → visible
     // class switch), which was causing incorrect flip-to-top decisions.
     // /////////////////////////////////////
-    // Decide the positioning strategy once per open.
-    isFixedRef.current = hasFixedAncestor(triggerRef.current);
     updatePosition();
     const rafId = requestAnimationFrame(() => {
       updatePosition();
@@ -348,7 +380,7 @@ export const Popup = props => {
     if (openedViaKeyboardRef.current) {
       // Use requestAnimationFrame to ensure DOM is ready.
       requestAnimationFrame(() => {
-        const firstFocusable = popup_2.querySelector(TABBABLE_SELECTOR);
+        const firstFocusable = menuItems_0[0] ?? popup_2.querySelector(TABBABLE_SELECTOR);
         firstFocusable?.focus();
       });
     }
@@ -364,7 +396,7 @@ export const Popup = props => {
       passive: true
     });
     document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('keydown', handleKeyDown);
+    popup_2.addEventListener('keydown', handleKeyDown);
     popup_2.addEventListener('click', handleActionableClick);
     return () => {
       cancelAnimationFrame(rafId);
@@ -373,8 +405,11 @@ export const Popup = props => {
         capture: true
       });
       document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('keydown', handleKeyDown);
+      popup_2.removeEventListener('keydown', handleKeyDown);
       popup_2.removeEventListener('click', handleActionableClick);
+      if (popup_2.matches(':popover-open')) {
+        popup_2.hidePopover();
+      }
     };
   }, [active]);
   useEffect(() => {
@@ -388,8 +423,11 @@ export const Popup = props => {
     buttonAriaLabel: buttonAriaLabel,
     buttonType: buttonType,
     className: buttonClassName,
+    contentId: contentId,
     disabled: disabled,
+    isMenuItem: parentPopup?.popupRole === 'menu',
     noBackground: noBackground,
+    popupType: popupType,
     renderButton: renderButton,
     setActive: setActive,
     size: buttonSize
@@ -408,39 +446,40 @@ export const Popup = props => {
         tabIndex: 0,
         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__*/_jsx(PopupContext, {
+    }), /*#__PURE__*/_jsx(PopupContext, {
       value: {
-        popupRef
+        closePopupChain,
+        popupRef,
+        popupRole
       },
       children: /*#__PURE__*/_jsxs("div", {
+        "aria-label": popupAriaLabel,
         className: active ? [`${baseClass}__content`, `${baseClass}--size-${size}`, side ? `${baseClass}--side-${side}` : 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,
+        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: () => setActive(false)
+              close
             }), children]
           }) : /*#__PURE__*/_jsxs(ThemeProvider, {
             theme: theme,
             children: [render?.({
-              close: () => setActive(false)
+              close
             }), children]
           })
         }), caret && !side && /*#__PURE__*/_jsx("div", {
           className: `${baseClass}__caret`
         })]
       })
-    }), document.body) : null]
+    })]
   });
 };
 //# sourceMappingURL=index.js.map