@payloadcms/ui 4.0.0-canary.0 → 4.0.0-canary.1

package/dist/elements/Popup/index.js

@@ -1,13 +1,15 @@
 '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 React, { createContext, use, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useEffectEvent } from '../../hooks/useEffectEvent.js';
+import { ThemeProvider } from '../../providers/Theme/index.js';
 import './index.css';
 import { PopupTrigger } from './PopupTrigger/index.js';
 const baseClass = 'popup';
+const PopupContext = /*#__PURE__*/createContext(null);
 /**
  * Selector for all elements the browser considers tabbable.
  */
@@ -40,6 +42,7 @@ export const Popup = props => {
     renderButton,
     showOnHover = false,
     showScrollbar = false,
+    side,
     size = 'medium',
     theme = 'dark',
     verticalAlign = 'bottom'
@@ -52,6 +55,7 @@ export const Popup = props => {
   * If the popup was opened via mouse, we do not want to autofocus the first element.
   */
   const openedViaKeyboardRef = useRef(false);
+  const parentPopup = use(PopupContext);
   const [mounted, setMounted] = useState(false);
   const [active, setActiveInternal] = useState(initActive);
   const [isOnTop, setIsOnTop] = useState(verticalAlign === 'top');
@@ -85,50 +89,87 @@ export const Popup = props => {
     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.
-    // /////////////////////////////////////
+    // 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) {
-        // Try to flip above — only do so if there's actually enough room
-        const topIfAbove = triggerRect.top + window.scrollY - popupRect.height - offset;
-        if (topIfAbove >= window.scrollY) {
-          top = topIfAbove;
-          onTop = true;
+    let left;
+    let caretLeft;
+    if (side) {
+      // /////////////////////////////////////
+      // 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.
+      // /////////////////////////////////////
+      // Top: align with trigger top, clamped to viewport
+      top = triggerRect.top + window.scrollY;
+      const maxTop = window.scrollY + window.innerHeight - popupRect.height - offset;
+      top = Math.max(window.scrollY + 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 (side === '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;
         }
-        // else: not enough room above either — keep below and let it overflow rather than going off-screen
       }
+      left = left + window.scrollX;
+      // 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) {
+      // /////////////////////////////////////
+      // 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 + window.scrollY + offset;
-        onTop = false;
+        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 + window.scrollY - popupRect.height - offset;
+          if (topIfAbove >= window.scrollY) {
+            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 + window.scrollY - popupRect.height - offset;
+        if (triggerRect.top - popupRect.height - offset < 0) {
+          top = triggerRect.bottom + window.scrollY + offset;
+          onTop = false;
+        }
       }
+      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
@@ -222,6 +263,10 @@ 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)) {
+      // 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);
     }
   });
@@ -230,10 +275,19 @@ 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.top = '';
+        popup_1.style.left = '';
+      }
       return;
     }
-    const popup_1 = popupRef.current;
-    if (!popup_1) {
+    const popup_2 = popupRef.current;
+    if (!popup_2) {
       return;
     }
     // /////////////////////////////////////
@@ -262,7 +316,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 = popup_2.querySelector(TABBABLE_SELECTOR);
         firstFocusable?.focus();
       });
     }
@@ -279,7 +333,7 @@ export const Popup = props => {
     });
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('keydown', handleKeyDown);
-    popup_1.addEventListener('click', handleActionableClick);
+    popup_2.addEventListener('click', handleActionableClick);
     return () => {
       cancelAnimationFrame(rafId);
       window.removeEventListener('resize', updatePosition);
@@ -288,7 +342,7 @@ export const Popup = props => {
       });
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('keydown', handleKeyDown);
-      popup_1.removeEventListener('click', handleActionableClick);
+      popup_2.removeEventListener('click', handleActionableClick);
     };
   }, [active]);
   useEffect(() => {
@@ -326,21 +380,33 @@ export const Popup = props => {
     // 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": theme === 'auto' ? undefined : theme,
-      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`
-      })]
+    createPortal(/*#__PURE__*/_jsx(PopupContext, {
+      value: {
+        popupRef
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        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,
+        ref: popupRef,
+        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)
+            }), children]
+          }) : /*#__PURE__*/_jsxs(ThemeProvider, {
+            theme: theme,
+            children: [render?.({
+              close: () => setActive(false)
+            }), children]
+          })
+        }), caret && !side && /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__caret`
+        })]
+      })
     }), document.body) : null]
   });
 };

package/dist/elements/Popup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PopupList","React","useCallback","useEffect","useRef","useState","createPortal","useEffectEvent","PopupTrigger","baseClass","TABBABLE_SELECTOR","map","s","join","Popup","props","id","button","buttonClassName","buttonSize","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","initActive","noBackground","onToggleClose","onToggleOpen","portalClassName","render","renderButton","showOnHover","showScrollbar","size","theme","verticalAlign","popupRef","triggerRef","openedViaKeyboardRef","mounted","setMounted","active","setActiveInternal","isOnTop","setIsOnTop","setActive","isActive","viaKeyboard","current","updatePosition","trigger","popup","triggerRect","getBoundingClientRect","popupRect","offset","top","onTop","bottom","window","scrollY","height","innerHeight","topIfAbove","left","right","width","Math","max","min","innerWidth","triggerCenter","caretLeft","newTop","round","newLeft","scrollX","newCaretLeft","style","getPropertyValue","setProperty","handleClickOutside","e","target","isOutsidePopup","contains","isOutsideTrigger","clickedPopupContent","closest","isInsideChildPopup","handleKeyDown","key","preventDefault","querySelector","focus","focusable","Array","from","querySelectorAll","length","currentIndex","findIndex","el","document","activeElement","goBackward","shiftKey","nextIndex","handleActionableClick","actionable","rafId","requestAnimationFrame","firstFocusable","addEventListener","capture","passive","cancelAnimationFrame","removeEventListener","undefined","Trigger","_jsx","_jsxs","filter","Boolean","ref","onMouseEnter","onMouseLeave","role","tabIndex","close","body"],"sources":["../../../src/elements/Popup/index.tsx"],"sourcesContent":["'use client'\nimport type { CSSProperties } from 'react'\n\nexport * as PopupList from './PopupButtonList/index.js'\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport './index.css'\nimport { PopupTrigger } from './PopupTrigger/index.js'\n\nconst baseClass = 'popup'\n\n/**\n * Selector for all elements the browser considers tabbable.\n */\nconst TABBABLE_SELECTOR = [\n  'a[href]',\n  'button:not(:disabled)',\n  'input:not(:disabled):not([type=\"hidden\"])',\n  'select:not(:disabled)',\n  'textarea:not(:disabled)',\n  '[tabindex]',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n  'audio[controls]',\n  'video[controls]',\n  'summary',\n]\n  .map((s) => `${s}:not([tabindex=\"-1\"])`)\n  .join(', ')\n\nexport type PopupProps = {\n  backgroundColor?: CSSProperties['backgroundColor']\n  boundingRef?: React.RefObject<HTMLElement>\n  button?: React.ReactNode\n  /**\n   * The class name to apply to the button that triggers the popup.\n   */\n  buttonClassName?: string\n  buttonSize?: 'large' | 'medium'\n  buttonType?: 'custom' | 'default'\n  caret?: boolean\n  children?: React.ReactNode\n  /**\n   * The class name to apply to the popup container containing the trigger.\n   * This does not wrap the actual popup content, which is rendered in a portal.\n   */\n  className?: string\n  disabled?: boolean\n  /**\n   * Force control the open state of the popup, regardless of the trigger.\n   */\n  forceOpen?: boolean\n  /**\n   * Preferred horizontal alignment of the popup, if there is enough space available.\n   *\n   * @default 'left'\n   */\n  horizontalAlign?: 'center' | 'left' | 'right'\n  id?: string\n  initActive?: boolean\n  noBackground?: boolean\n  onToggleClose?: () => void\n  onToggleOpen?: (active: boolean) => void\n  /**\n   * Class name to apply to the portal container.\n   */\n  portalClassName?: string\n  render?: (args: { close: () => void }) => React.ReactNode\n  /**\n   * Render prop for custom trigger button. Receives onClick/onKeyDown/aria props.\n   * When provided, `button` and `buttonType` are ignored.\n   */\n  renderButton?: (props: {\n    active: boolean\n    'aria-expanded': boolean\n    'aria-haspopup': true\n    onClick: React.MouseEventHandler\n    onKeyDown: React.KeyboardEventHandler\n  }) => React.ReactNode\n  showOnHover?: boolean\n  /**\n   * By default, the scrollbar is hidden. If you want to show it, set this to true.\n   * In both cases, the container is still scrollable.\n   *\n   * @default false\n   */\n  showScrollbar?: boolean\n  size?: 'fit-content' | 'large' | 'medium' | 'small'\n  /**\n   * Theme for the popup content. Defaults to 'dark'.\n   * Set to 'auto' to inherit the current theme.\n   *\n   * @default 'dark'\n   */\n  theme?: 'auto' | 'dark' | 'light'\n  /**\n   * Preferred vertical alignment of the popup (position below or above the trigger),\n   * if there is enough space available.\n   *\n   * If the popup is too close to the edge of the viewport, it will flip to the opposite side\n   * regardless of the preferred vertical alignment.\n   *\n   * @default 'bottom'\n   */\n  verticalAlign?: 'bottom' | 'top'\n}\n\n/**\n * Component that renders a popup, as well as a button that triggers the popup.\n *\n * The popup is rendered in a portal, and is automatically positioned above / below the trigger,\n * depending on the verticalAlign prop and the space available.\n */\nexport const Popup: React.FC<PopupProps> = (props) => {\n  const {\n    id,\n    button,\n    buttonClassName,\n    buttonSize,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    disabled,\n    forceOpen,\n    horizontalAlign = 'left',\n    initActive = false,\n    noBackground,\n    onToggleClose,\n    onToggleOpen,\n    portalClassName,\n    render,\n    renderButton,\n    showOnHover = false,\n    showScrollbar = false,\n    size = 'medium',\n    theme = 'dark',\n    verticalAlign = 'bottom',\n  } = props\n\n  const popupRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLDivElement>(null)\n\n  /**\n   * Keeps track of whether the popup was opened via keyboard.\n   * This is used to determine whether to autofocus the first element in the popup.\n   * If the popup was opened via mouse, we do not want to autofocus the first element.\n   */\n  const openedViaKeyboardRef = useRef(false)\n\n  const [mounted, setMounted] = useState(false)\n  const [active, setActiveInternal] = useState(initActive)\n  const [isOnTop, setIsOnTop] = useState(verticalAlign === 'top')\n\n  // Track when component is mounted to avoid SSR/client hydration mismatch\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  const setActive = useCallback(\n    (isActive: boolean, viaKeyboard = false) => {\n      if (isActive) {\n        openedViaKeyboardRef.current = viaKeyboard\n        onToggleOpen?.(true)\n      } else {\n        onToggleClose?.()\n      }\n      setActiveInternal(isActive)\n    },\n    [onToggleClose, onToggleOpen],\n  )\n\n  // /////////////////////////////////////\n  // Position Calculation\n  //\n  // Calculates and applies popup position relative to trigger.\n  // Always checks viewport bounds (for flipping), but only updates\n  // styles if the calculated position differs from current position.\n  // /////////////////////////////////////\n\n  const updatePosition = useEffectEvent(() => {\n    const trigger = triggerRef.current\n    const popup = popupRef.current\n    if (!trigger || !popup) {\n      return\n    }\n\n    const triggerRect = trigger.getBoundingClientRect()\n    const popupRect = popup.getBoundingClientRect()\n\n    // Gap between the popup and the trigger/viewport edges (in pixels)\n    const offset = 10\n\n    // /////////////////////////////////////\n    // Vertical Positioning\n    // Calculates the `top` position in absolute page coordinates.\n    // Uses `verticalAlign` prop as the preferred direction, but flips\n    // to the opposite side if there's not enough viewport space.\n    // /////////////////////////////////////\n\n    let top: number\n    let onTop = verticalAlign === 'top'\n\n    if (verticalAlign === 'bottom') {\n      top = triggerRect.bottom + window.scrollY + offset\n\n      if (triggerRect.bottom + popupRect.height + offset > window.innerHeight) {\n        // Try to flip above — only do so if there's actually enough room\n        const topIfAbove = triggerRect.top + window.scrollY - popupRect.height - offset\n        if (topIfAbove >= window.scrollY) {\n          top = topIfAbove\n          onTop = true\n        }\n        // else: not enough room above either — keep below and let it overflow rather than going off-screen\n      }\n    } else {\n      top = triggerRect.top + window.scrollY - popupRect.height - offset\n\n      if (triggerRect.top - popupRect.height - offset < 0) {\n        top = triggerRect.bottom + window.scrollY + offset\n        onTop = false\n      }\n    }\n\n    setIsOnTop(onTop)\n\n    // /////////////////////////////////////\n    // Horizontal Positioning\n    // Calculates the `left` position based on `horizontalAlign` prop:\n    // - 'left': aligns popup's left edge with trigger's left edge\n    // - 'right': aligns popup's right edge with trigger's right edge\n    // - 'center': centers popup horizontally relative to trigger\n    // Then clamps to keep the popup within viewport bounds.\n    // /////////////////////////////////////\n\n    let left =\n      horizontalAlign === 'right'\n        ? triggerRect.right - popupRect.width\n        : horizontalAlign === 'center'\n          ? triggerRect.left + triggerRect.width / 2 - popupRect.width / 2\n          : triggerRect.left\n\n    left = Math.max(offset, Math.min(left, window.innerWidth - popupRect.width - offset))\n\n    // /////////////////////////////////////\n    // Caret Positioning\n    // Positions the caret arrow to point at the trigger's horizontal center.\n    // Clamps between 12px from edges to prevent caret from overflowing the popup.\n    // /////////////////////////////////////\n\n    const triggerCenter = triggerRect.left + triggerRect.width / 2\n    const caretLeft = Math.max(12, Math.min(triggerCenter - left, popupRect.width - 12))\n\n    // /////////////////////////////////////\n    // Apply Styles (only if changed)\n    // Compares calculated position with current styles to avoid unnecessary\n    // DOM updates during scroll. This prevents visual lag by relying on the absolute\n    // positioning where possible (popup slightly lags behind when scrolling really fast),\n    // while still allowing position changes when needed (e.g., sticky parent, viewport flip).\n    // Values are rounded to match browser's CSS precision and avoid false updates.\n    // /////////////////////////////////////\n\n    const newTop = `${Math.round(top)}px`\n    const newLeft = `${Math.round(left + window.scrollX)}px`\n    const newCaretLeft = `${Math.round(caretLeft)}px`\n\n    if (popup.style.top !== newTop) {\n      popup.style.top = newTop\n    }\n    if (popup.style.left !== newLeft) {\n      popup.style.left = newLeft\n    }\n    if (popup.style.getPropertyValue('--caret-left') !== newCaretLeft) {\n      popup.style.setProperty('--caret-left', newCaretLeft)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Click Outside Handler\n  // Closes popup when clicking outside both the popup and trigger.\n  // Distinguishes between parent and child popups:\n  // - Click in child popup: parent stays open\n  // - Click in parent popup: child closes\n  // /////////////////////////////////////\n\n  const handleClickOutside = useEffectEvent((e: MouseEvent) => {\n    const target = e.target as Node\n    const isOutsidePopup = !popupRef.current?.contains(target)\n    const isOutsideTrigger = !triggerRef.current?.contains(target)\n\n    // Check if click is inside a popup portal\n    const clickedPopupContent = (target as Element).closest?.('.popup__content')\n\n    // If the clicked popup contains this popup's trigger, it's a parent popup\n    // and we should close. If it doesn't contain our trigger, it's a child popup\n    // and we should stay open to avoid closing parent when interacting with child.\n    const isInsideChildPopup =\n      clickedPopupContent && !clickedPopupContent.contains(triggerRef.current)\n\n    if (isOutsidePopup && isOutsideTrigger && !isInsideChildPopup) {\n      setActive(false)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Keyboard Navigation\n  // Handles keyboard interactions when popup is open:\n  // - Escape: closes popup and returns focus to trigger\n  // - Tab/Shift+Tab: cycles through focusable items with wrapping\n  // - ArrowUp/ArrowDown: same as Shift+Tab/Tab for menu-style navigation\n  // Focus is managed manually to support elements the browser might skip.\n  // /////////////////////////////////////\n\n  const handleKeyDown = useEffectEvent((e: KeyboardEvent) => {\n    const popup = popupRef.current\n    if (!popup || !active) {\n      return\n    }\n\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      setActive(false)\n      triggerRef.current?.querySelector<HTMLElement>('button, [tabindex=\"0\"]')?.focus()\n      return\n    }\n\n    if (e.key === 'Tab' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      const focusable = Array.from(popup.querySelectorAll<HTMLElement>(TABBABLE_SELECTOR))\n      if (focusable.length === 0) {\n        return\n      }\n\n      e.preventDefault()\n\n      const currentIndex = focusable.findIndex((el) => el === document.activeElement)\n      const goBackward = e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)\n\n      let nextIndex: number\n      if (currentIndex === -1) {\n        nextIndex = goBackward ? focusable.length - 1 : 0\n      } else if (goBackward) {\n        nextIndex = currentIndex === 0 ? focusable.length - 1 : currentIndex - 1\n      } else {\n        nextIndex = currentIndex === focusable.length - 1 ? 0 : currentIndex + 1\n      }\n\n      focusable[nextIndex].focus()\n    }\n  })\n\n  // /////////////////////////////////////\n  // Click Handler for Actionable Elements\n  // Closes popup when buttons/links inside are clicked (includes Enter/Space activation).\n  // /////////////////////////////////////\n\n  const handleActionableClick = useEffectEvent((e: MouseEvent) => {\n    const target = e.target as HTMLElement\n\n    // Allow opting out with data-popup-prevent-close attribute on element or ancestor\n    if (target.closest('[data-popup-prevent-close]')) {\n      return\n    }\n\n    // Check if the clicked element or any ancestor is an actionable element\n    const actionable = target.closest('button, a[href], [role=\"button\"], [role=\"menuitem\"]')\n    if (actionable && popupRef.current?.contains(actionable)) {\n      setActive(false)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Effect: Setup/Teardown position and focus management\n  // /////////////////////////////////////\n\n  useEffect(() => {\n    if (!active) {\n      return\n    }\n\n    const popup = popupRef.current\n    if (!popup) {\n      return\n    }\n\n    // /////////////////////////////////////\n    // Initial Position\n    // Calculate and apply popup position.\n    // getBoundingClientRect() forces synchronous layout.\n    //\n    // We call updatePosition() twice: once synchronously (so the popup\n    // snaps to roughly the right place immediately rather than flashing\n    // from -9999px) and once in a requestAnimationFrame, which fires\n    // after the browser has finished laying out the newly-visible popup\n    // content. The rAF call is the authoritative one — it catches cases\n    // where the popup height wasn't stable yet during the first call\n    // (e.g. ColumnSelector content rendering after hidden → visible\n    // class switch), which was causing incorrect flip-to-top decisions.\n    // /////////////////////////////////////\n\n    updatePosition()\n    const rafId = requestAnimationFrame(() => {\n      updatePosition()\n    })\n\n    // /////////////////////////////////////\n    // Focus Management\n    // When opened via keyboard, autofocus the first focusable button.\n    // When opened via mouse, skip autofocus to avoid unwanted highlights.\n    // /////////////////////////////////////\n\n    if (openedViaKeyboardRef.current) {\n      // Use requestAnimationFrame to ensure DOM is ready.\n      requestAnimationFrame(() => {\n        const firstFocusable = popup.querySelector<HTMLElement>(TABBABLE_SELECTOR)\n        firstFocusable?.focus()\n      })\n    }\n\n    // /////////////////////////////////////\n    // Event Listeners\n    // - resize/scroll: recalculate position (only applies styles if changed)\n    // - mousedown: detect clicks outside to close\n    // - keydown: handle keyboard navigation\n    // /////////////////////////////////////\n\n    window.addEventListener('resize', updatePosition)\n    window.addEventListener('scroll', updatePosition, { capture: true, passive: true })\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n    popup.addEventListener('click', handleActionableClick)\n\n    return () => {\n      cancelAnimationFrame(rafId)\n      window.removeEventListener('resize', updatePosition)\n      window.removeEventListener('scroll', updatePosition, { capture: true })\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n      popup.removeEventListener('click', handleActionableClick)\n    }\n  }, [active])\n\n  useEffect(() => {\n    if (forceOpen !== undefined) {\n      setActive(forceOpen)\n    }\n  }, [forceOpen, setActive])\n\n  const Trigger = (\n    <PopupTrigger\n      active={active}\n      button={button}\n      buttonType={buttonType}\n      className={buttonClassName}\n      disabled={disabled}\n      noBackground={noBackground}\n      renderButton={renderButton}\n      setActive={setActive}\n      size={buttonSize}\n    />\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} id={id}>\n      <div className={`${baseClass}__trigger-wrap`} ref={triggerRef}>\n        {showOnHover ? (\n          <div\n            className={`${baseClass}__on-hover-watch`}\n            onMouseEnter={() => setActive(true)}\n            onMouseLeave={() => setActive(false)}\n            role=\"button\"\n            tabIndex={0}\n          >\n            {Trigger}\n          </div>\n        ) : (\n          Trigger\n        )}\n      </div>\n\n      {mounted\n        ? // We need to make sure the popup is part of the DOM (although invisible), even if it's not active.\n          // This ensures that components within the popup, like modals, do not unmount when the popup closes.\n          // Otherwise, modals opened from the popup will close unexpectedly when clicking within the modal, since\n          // that closes the popup due to the click outside handler.\n          createPortal(\n            <div\n              className={\n                active\n                  ? [\n                      `${baseClass}__content`,\n                      `${baseClass}--size-${size}`,\n                      isOnTop ? `${baseClass}--v-top` : `${baseClass}--v-bottom`,\n                      portalClassName,\n                    ]\n                      .filter(Boolean)\n                      .join(' ')\n                  : // Do not share any class names between active and disabled popups, to make sure\n                    // tests do not accidentally target inactive popups.\n                    `${baseClass}__hidden-content`\n              }\n              data-popup-id={id || undefined}\n              data-theme={theme === 'auto' ? undefined : theme}\n              ref={popupRef}\n            >\n              <div\n                className={`${baseClass}__scroll-container${showScrollbar ? ` ${baseClass}__scroll-container--show-scrollbar` : ''}`}\n              >\n                {render?.({ close: () => setActive(false) })}\n                {children}\n              </div>\n              {caret && <div className={`${baseClass}__caret`} />}\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["PopupList","React","createContext","use","useCallback","useEffect","useRef","useState","createPortal","useEffectEvent","ThemeProvider","PopupTrigger","baseClass","PopupContext","TABBABLE_SELECTOR","map","s","join","Popup","props","id","button","buttonClassName","buttonSize","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","initActive","noBackground","onToggleClose","onToggleOpen","portalClassName","render","renderButton","showOnHover","showScrollbar","side","size","theme","verticalAlign","popupRef","triggerRef","openedViaKeyboardRef","parentPopup","mounted","setMounted","active","setActiveInternal","isOnTop","setIsOnTop","setActive","isActive","viaKeyboard","current","updatePosition","trigger","popup","triggerRect","getBoundingClientRect","popupRect","offset","sideOffset","top","left","caretLeft","window","scrollY","maxTop","innerHeight","height","Math","max","min","anchorRect","width","right","innerWidth","scrollX","onTop","bottom","topIfAbove","triggerCenter","newTop","round","newLeft","newCaretLeft","style","getPropertyValue","setProperty","handleClickOutside","e","target","isOutsidePopup","contains","isOutsideTrigger","clickedPopupContent","closest","isInsideChildPopup","handleKeyDown","key","preventDefault","querySelector","focus","focusable","Array","from","querySelectorAll","length","currentIndex","findIndex","el","document","activeElement","goBackward","shiftKey","nextIndex","handleActionableClick","actionable","rafId","requestAnimationFrame","firstFocusable","addEventListener","capture","passive","cancelAnimationFrame","removeEventListener","undefined","Trigger","_jsx","_jsxs","filter","Boolean","ref","onMouseEnter","onMouseLeave","role","tabIndex","value","_Fragment","close","body"],"sources":["../../../src/elements/Popup/index.tsx"],"sourcesContent":["'use client'\nimport type { CSSProperties } from 'react'\n\nexport * as PopupList from './PopupButtonList/index.js'\n\nimport React, { createContext, use, useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { ThemeProvider } from '../../providers/Theme/index.js'\nimport './index.css'\nimport { PopupTrigger } from './PopupTrigger/index.js'\n\nconst baseClass = 'popup'\n\ntype PopupContextValue = {\n  popupRef: React.RefObject<HTMLDivElement | null>\n}\n\nconst PopupContext = createContext<null | PopupContextValue>(null)\n\n/**\n * Selector for all elements the browser considers tabbable.\n */\nconst TABBABLE_SELECTOR = [\n  'a[href]',\n  'button:not(:disabled)',\n  'input:not(:disabled):not([type=\"hidden\"])',\n  'select:not(:disabled)',\n  'textarea:not(:disabled)',\n  '[tabindex]',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n  'audio[controls]',\n  'video[controls]',\n  'summary',\n]\n  .map((s) => `${s}:not([tabindex=\"-1\"])`)\n  .join(', ')\n\nexport type PopupProps = {\n  backgroundColor?: CSSProperties['backgroundColor']\n  boundingRef?: React.RefObject<HTMLElement>\n  button?: React.ReactNode\n  /**\n   * The class name to apply to the button that triggers the popup.\n   */\n  buttonClassName?: string\n  buttonSize?: 'large' | 'medium'\n  buttonType?: 'custom' | 'default'\n  caret?: boolean\n  children?: React.ReactNode\n  /**\n   * The class name to apply to the popup container containing the trigger.\n   * This does not wrap the actual popup content, which is rendered in a portal.\n   */\n  className?: string\n  disabled?: boolean\n  /**\n   * Force control the open state of the popup, regardless of the trigger.\n   */\n  forceOpen?: boolean\n  /**\n   * Preferred horizontal alignment of the popup, if there is enough space available.\n   *\n   * @default 'left'\n   */\n  horizontalAlign?: 'center' | 'left' | 'right'\n  id?: string\n  initActive?: boolean\n  noBackground?: boolean\n  onToggleClose?: () => void\n  onToggleOpen?: (active: boolean) => void\n  /**\n   * Class name to apply to the portal container.\n   */\n  portalClassName?: string\n  render?: (args: { close: () => void }) => React.ReactNode\n  /**\n   * Render prop for custom trigger button. Receives onClick/onKeyDown/aria props.\n   * When provided, `button` and `buttonType` are ignored.\n   */\n  renderButton?: (props: {\n    active: boolean\n    'aria-expanded': boolean\n    'aria-haspopup': true\n    onClick: React.MouseEventHandler\n    onKeyDown: React.KeyboardEventHandler\n  }) => React.ReactNode\n  showOnHover?: boolean\n  /**\n   * By default, the scrollbar is hidden. If you want to show it, set this to true.\n   * In both cases, the container is still scrollable.\n   *\n   * @default false\n   */\n  showScrollbar?: boolean\n  /**\n   * Position the popup to the side of the trigger instead of above/below.\n   * The popup's top edge aligns with the trigger's top edge (with viewport clamping).\n   * Automatically flips to the opposite side if there is not enough space.\n   * When set, `verticalAlign`, `horizontalAlign`, and the caret are ignored.\n   */\n  side?: 'left' | 'right'\n  size?: 'fit-content' | 'large' | 'medium' | 'small'\n  /**\n   * Theme for the popup content. Defaults to 'dark'.\n   * Set to 'auto' to inherit the current theme.\n   *\n   * @default 'dark'\n   */\n  theme?: 'auto' | 'dark' | 'light'\n  /**\n   * Preferred vertical alignment of the popup (position below or above the trigger),\n   * if there is enough space available.\n   *\n   * If the popup is too close to the edge of the viewport, it will flip to the opposite side\n   * regardless of the preferred vertical alignment.\n   *\n   * @default 'bottom'\n   */\n  verticalAlign?: 'bottom' | 'top'\n}\n\n/**\n * Component that renders a popup, as well as a button that triggers the popup.\n *\n * The popup is rendered in a portal, and is automatically positioned above / below the trigger,\n * depending on the verticalAlign prop and the space available.\n */\nexport const Popup: React.FC<PopupProps> = (props) => {\n  const {\n    id,\n    button,\n    buttonClassName,\n    buttonSize,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    disabled,\n    forceOpen,\n    horizontalAlign = 'left',\n    initActive = false,\n    noBackground,\n    onToggleClose,\n    onToggleOpen,\n    portalClassName,\n    render,\n    renderButton,\n    showOnHover = false,\n    showScrollbar = false,\n    side,\n    size = 'medium',\n    theme = 'dark',\n    verticalAlign = 'bottom',\n  } = props\n\n  const popupRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLDivElement>(null)\n\n  /**\n   * Keeps track of whether the popup was opened via keyboard.\n   * This is used to determine whether to autofocus the first element in the popup.\n   * If the popup was opened via mouse, we do not want to autofocus the first element.\n   */\n  const openedViaKeyboardRef = useRef(false)\n\n  const parentPopup = use(PopupContext)\n\n  const [mounted, setMounted] = useState(false)\n  const [active, setActiveInternal] = useState(initActive)\n  const [isOnTop, setIsOnTop] = useState(verticalAlign === 'top')\n\n  // Track when component is mounted to avoid SSR/client hydration mismatch\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  const setActive = useCallback(\n    (isActive: boolean, viaKeyboard = false) => {\n      if (isActive) {\n        openedViaKeyboardRef.current = viaKeyboard\n        onToggleOpen?.(true)\n      } else {\n        onToggleClose?.()\n      }\n      setActiveInternal(isActive)\n    },\n    [onToggleClose, onToggleOpen],\n  )\n\n  // /////////////////////////////////////\n  // Position Calculation\n  //\n  // Calculates and applies popup position relative to trigger.\n  // Always checks viewport bounds (for flipping), but only updates\n  // styles if the calculated position differs from current position.\n  // /////////////////////////////////////\n\n  const updatePosition = useEffectEvent(() => {\n    const trigger = triggerRef.current\n    const popup = popupRef.current\n    if (!trigger || !popup) {\n      return\n    }\n\n    const triggerRect = trigger.getBoundingClientRect()\n    const popupRect = popup.getBoundingClientRect()\n\n    // Gap between the popup and the trigger/viewport edges (in pixels)\n    const offset = 10\n    // Additional gap used in side mode so the child popup has breathing room from its parent\n    const sideOffset = 4\n\n    let top: number\n    let left: number\n    let caretLeft: number\n\n    if (side) {\n      // /////////////////////////////////////\n      // Side Positioning\n      // Places the popup to the left or right of the parent popup (not just the trigger),\n      // top-aligned with the trigger. Flips to the opposite side if there is not enough\n      // viewport space.\n      // /////////////////////////////////////\n\n      // Top: align with trigger top, clamped to viewport\n      top = triggerRect.top + window.scrollY\n      const maxTop = window.scrollY + window.innerHeight - popupRect.height - offset\n      top = Math.max(window.scrollY + offset, Math.min(top, maxTop))\n\n      // Use the parent popup's bounding rect as the reference for left/right positioning\n      // so the child appears 4px from the parent popup edge, not just the trigger button.\n      const anchorRect = parentPopup?.popupRef.current\n        ? parentPopup.popupRef.current.getBoundingClientRect()\n        : triggerRect\n\n      if (side === 'left') {\n        left = anchorRect.left - popupRect.width - sideOffset\n        if (left < offset) {\n          // flip to right side\n          left = anchorRect.right + sideOffset\n        }\n      } else {\n        left = anchorRect.right + sideOffset\n        if (left + popupRect.width + offset > window.innerWidth) {\n          // flip to left side\n          left = anchorRect.left - popupRect.width - sideOffset\n        }\n      }\n\n      left = left + window.scrollX\n      // Caret not used in side mode; set a neutral value\n      caretLeft = popupRect.width / 2\n\n      setIsOnTop(false)\n    } else {\n      // /////////////////////////////////////\n      // Vertical Positioning\n      // Calculates the `top` position in absolute page coordinates.\n      // Uses `verticalAlign` prop as the preferred direction, but flips\n      // to the opposite side if there's not enough viewport space.\n      // /////////////////////////////////////\n\n      let onTop = verticalAlign === 'top'\n\n      if (verticalAlign === 'bottom') {\n        top = triggerRect.bottom + window.scrollY + offset\n\n        if (triggerRect.bottom + popupRect.height + offset > window.innerHeight) {\n          // Try to flip above — only do so if there's actually enough room\n          const topIfAbove = triggerRect.top + window.scrollY - popupRect.height - offset\n          if (topIfAbove >= window.scrollY) {\n            top = topIfAbove\n            onTop = true\n          }\n          // else: not enough room above either — keep below and let it overflow rather than going off-screen\n        }\n      } else {\n        top = triggerRect.top + window.scrollY - popupRect.height - offset\n\n        if (triggerRect.top - popupRect.height - offset < 0) {\n          top = triggerRect.bottom + window.scrollY + offset\n          onTop = false\n        }\n      }\n\n      setIsOnTop(onTop)\n\n      // /////////////////////////////////////\n      // Horizontal Positioning\n      // Calculates the `left` position based on `horizontalAlign` prop:\n      // - 'left': aligns popup's left edge with trigger's left edge\n      // - 'right': aligns popup's right edge with trigger's right edge\n      // - 'center': centers popup horizontally relative to trigger\n      // Then clamps to keep the popup within viewport bounds.\n      // /////////////////////////////////////\n\n      left =\n        horizontalAlign === 'right'\n          ? triggerRect.right - popupRect.width\n          : horizontalAlign === 'center'\n            ? triggerRect.left + triggerRect.width / 2 - popupRect.width / 2\n            : triggerRect.left\n\n      left = Math.max(offset, Math.min(left, window.innerWidth - popupRect.width - offset))\n\n      // /////////////////////////////////////\n      // Caret Positioning\n      // Positions the caret arrow to point at the trigger's horizontal center.\n      // Clamps between 12px from edges to prevent caret from overflowing the popup.\n      // /////////////////////////////////////\n\n      const triggerCenter = triggerRect.left + triggerRect.width / 2\n      caretLeft = Math.max(12, Math.min(triggerCenter - left, popupRect.width - 12))\n    }\n\n    // /////////////////////////////////////\n    // Apply Styles (only if changed)\n    // Compares calculated position with current styles to avoid unnecessary\n    // DOM updates during scroll. This prevents visual lag by relying on the absolute\n    // positioning where possible (popup slightly lags behind when scrolling really fast),\n    // while still allowing position changes when needed (e.g., sticky parent, viewport flip).\n    // Values are rounded to match browser's CSS precision and avoid false updates.\n    // /////////////////////////////////////\n\n    const newTop = `${Math.round(top)}px`\n    const newLeft = `${Math.round(left + window.scrollX)}px`\n    const newCaretLeft = `${Math.round(caretLeft)}px`\n\n    if (popup.style.top !== newTop) {\n      popup.style.top = newTop\n    }\n    if (popup.style.left !== newLeft) {\n      popup.style.left = newLeft\n    }\n    if (popup.style.getPropertyValue('--caret-left') !== newCaretLeft) {\n      popup.style.setProperty('--caret-left', newCaretLeft)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Click Outside Handler\n  // Closes popup when clicking outside both the popup and trigger.\n  // Distinguishes between parent and child popups:\n  // - Click in child popup: parent stays open\n  // - Click in parent popup: child closes\n  // /////////////////////////////////////\n\n  const handleClickOutside = useEffectEvent((e: MouseEvent) => {\n    const target = e.target as Node\n    const isOutsidePopup = !popupRef.current?.contains(target)\n    const isOutsideTrigger = !triggerRef.current?.contains(target)\n\n    // Check if click is inside a popup portal\n    const clickedPopupContent = (target as Element).closest?.('.popup__content')\n\n    // If the clicked popup contains this popup's trigger, it's a parent popup\n    // and we should close. If it doesn't contain our trigger, it's a child popup\n    // and we should stay open to avoid closing parent when interacting with child.\n    const isInsideChildPopup =\n      clickedPopupContent && !clickedPopupContent.contains(triggerRef.current)\n\n    if (isOutsidePopup && isOutsideTrigger && !isInsideChildPopup) {\n      setActive(false)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Keyboard Navigation\n  // Handles keyboard interactions when popup is open:\n  // - Escape: closes popup and returns focus to trigger\n  // - Tab/Shift+Tab: cycles through focusable items with wrapping\n  // - ArrowUp/ArrowDown: same as Shift+Tab/Tab for menu-style navigation\n  // Focus is managed manually to support elements the browser might skip.\n  // /////////////////////////////////////\n\n  const handleKeyDown = useEffectEvent((e: KeyboardEvent) => {\n    const popup = popupRef.current\n    if (!popup || !active) {\n      return\n    }\n\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      setActive(false)\n      triggerRef.current?.querySelector<HTMLElement>('button, [tabindex=\"0\"]')?.focus()\n      return\n    }\n\n    if (e.key === 'Tab' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      const focusable = Array.from(popup.querySelectorAll<HTMLElement>(TABBABLE_SELECTOR))\n      if (focusable.length === 0) {\n        return\n      }\n\n      e.preventDefault()\n\n      const currentIndex = focusable.findIndex((el) => el === document.activeElement)\n      const goBackward = e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)\n\n      let nextIndex: number\n      if (currentIndex === -1) {\n        nextIndex = goBackward ? focusable.length - 1 : 0\n      } else if (goBackward) {\n        nextIndex = currentIndex === 0 ? focusable.length - 1 : currentIndex - 1\n      } else {\n        nextIndex = currentIndex === focusable.length - 1 ? 0 : currentIndex + 1\n      }\n\n      focusable[nextIndex].focus()\n    }\n  })\n\n  // /////////////////////////////////////\n  // Click Handler for Actionable Elements\n  // Closes popup when buttons/links inside are clicked (includes Enter/Space activation).\n  // /////////////////////////////////////\n\n  const handleActionableClick = useEffectEvent((e: MouseEvent) => {\n    const target = e.target as HTMLElement\n\n    // Allow opting out with data-popup-prevent-close attribute on element or ancestor\n    if (target.closest('[data-popup-prevent-close]')) {\n      return\n    }\n\n    // Check if the clicked element or any ancestor is an actionable element\n    const actionable = target.closest('button, a[href], [role=\"button\"], [role=\"menuitem\"]')\n    if (actionable && popupRef.current?.contains(actionable)) {\n      // Don't close if clicking a nested popup's trigger — it will manage its own open state\n      if (actionable.closest(`.${baseClass}__trigger-wrap`)) {\n        return\n      }\n      setActive(false)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Effect: Setup/Teardown position and focus management\n  // /////////////////////////////////////\n\n  useEffect(() => {\n    if (!active) {\n      const popup = popupRef.current\n      if (popup) {\n        // Clear inline position styles so the CSS `top: -9999px` rule on\n        // `.popup__hidden-content` takes effect. Without this, the inline\n        // styles set during positioning would win over the CSS rule, keeping\n        // portaled children (e.g. a ReactSelect menu) visually on-screen.\n        popup.style.top = ''\n        popup.style.left = ''\n      }\n      return\n    }\n\n    const popup = popupRef.current\n    if (!popup) {\n      return\n    }\n\n    // /////////////////////////////////////\n    // Initial Position\n    // Calculate and apply popup position.\n    // getBoundingClientRect() forces synchronous layout.\n    //\n    // We call updatePosition() twice: once synchronously (so the popup\n    // snaps to roughly the right place immediately rather than flashing\n    // from -9999px) and once in a requestAnimationFrame, which fires\n    // after the browser has finished laying out the newly-visible popup\n    // content. The rAF call is the authoritative one — it catches cases\n    // where the popup height wasn't stable yet during the first call\n    // (e.g. ColumnSelector content rendering after hidden → visible\n    // class switch), which was causing incorrect flip-to-top decisions.\n    // /////////////////////////////////////\n\n    updatePosition()\n    const rafId = requestAnimationFrame(() => {\n      updatePosition()\n    })\n\n    // /////////////////////////////////////\n    // Focus Management\n    // When opened via keyboard, autofocus the first focusable button.\n    // When opened via mouse, skip autofocus to avoid unwanted highlights.\n    // /////////////////////////////////////\n\n    if (openedViaKeyboardRef.current) {\n      // Use requestAnimationFrame to ensure DOM is ready.\n      requestAnimationFrame(() => {\n        const firstFocusable = popup.querySelector<HTMLElement>(TABBABLE_SELECTOR)\n        firstFocusable?.focus()\n      })\n    }\n\n    // /////////////////////////////////////\n    // Event Listeners\n    // - resize/scroll: recalculate position (only applies styles if changed)\n    // - mousedown: detect clicks outside to close\n    // - keydown: handle keyboard navigation\n    // /////////////////////////////////////\n\n    window.addEventListener('resize', updatePosition)\n    window.addEventListener('scroll', updatePosition, { capture: true, passive: true })\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n    popup.addEventListener('click', handleActionableClick)\n\n    return () => {\n      cancelAnimationFrame(rafId)\n      window.removeEventListener('resize', updatePosition)\n      window.removeEventListener('scroll', updatePosition, { capture: true })\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n      popup.removeEventListener('click', handleActionableClick)\n    }\n  }, [active])\n\n  useEffect(() => {\n    if (forceOpen !== undefined) {\n      setActive(forceOpen)\n    }\n  }, [forceOpen, setActive])\n\n  const Trigger = (\n    <PopupTrigger\n      active={active}\n      button={button}\n      buttonType={buttonType}\n      className={buttonClassName}\n      disabled={disabled}\n      noBackground={noBackground}\n      renderButton={renderButton}\n      setActive={setActive}\n      size={buttonSize}\n    />\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} id={id}>\n      <div className={`${baseClass}__trigger-wrap`} ref={triggerRef}>\n        {showOnHover ? (\n          <div\n            className={`${baseClass}__on-hover-watch`}\n            onMouseEnter={() => setActive(true)}\n            onMouseLeave={() => setActive(false)}\n            role=\"button\"\n            tabIndex={0}\n          >\n            {Trigger}\n          </div>\n        ) : (\n          Trigger\n        )}\n      </div>\n\n      {mounted\n        ? // We need to make sure the popup is part of the DOM (although invisible), even if it's not active.\n          // This ensures that components within the popup, like modals, do not unmount when the popup closes.\n          // Otherwise, modals opened from the popup will close unexpectedly when clicking within the modal, since\n          // that closes the popup due to the click outside handler.\n          createPortal(\n            <PopupContext value={{ popupRef }}>\n              <div\n                className={\n                  active\n                    ? [\n                        `${baseClass}__content`,\n                        `${baseClass}--size-${size}`,\n                        side\n                          ? `${baseClass}--side-${side}`\n                          : isOnTop\n                            ? `${baseClass}--v-top`\n                            : `${baseClass}--v-bottom`,\n                        portalClassName,\n                      ]\n                        .filter(Boolean)\n                        .join(' ')\n                    : // Do not share any class names between active and disabled popups, to make sure\n                      // tests do not accidentally target inactive popups.\n                      `${baseClass}__hidden-content`\n                }\n                data-popup-id={id || undefined}\n                data-theme={theme === 'auto' ? undefined : theme}\n                ref={popupRef}\n              >\n                <div\n                  className={`${baseClass}__scroll-container${showScrollbar ? ` ${baseClass}__scroll-container--show-scrollbar` : ''}`}\n                >\n                  {theme === 'auto' ? (\n                    <>\n                      {render?.({ close: () => setActive(false) })}\n                      {children}\n                    </>\n                  ) : (\n                    <ThemeProvider theme={theme}>\n                      {render?.({ close: () => setActive(false) })}\n                      {children}\n                    </ThemeProvider>\n                  )}\n                </div>\n                {caret && !side && <div className={`${baseClass}__caret`} />}\n              </div>\n            </PopupContext>,\n            document.body,\n          )\n        : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ReactSelect/index.css

@@ -44,10 +44,6 @@
       color: var(--color-text-tertiary);
     }
 
-    .rs__menu-notice {
-      padding: 0.625rem 0.75rem;
-    }
-
     .rs__indicator {
       padding: 0 0.25rem;
       cursor: pointer;
@@ -72,54 +68,6 @@
       padding: 0;
     }
 
-    .rs__menu {
-      z-index: 4;
-      border-radius: var(--radius-medium);
-      box-shadow: var(--elevation-400-menu-panel);
-      background: var(--color-bg);
-      overflow: hidden;
-    }
-
-    .rs__menu--placement-bottom {
-      margin-top: var(--spacer-1);
-    }
-
-    .rs__menu--placement-top {
-      margin-bottom: var(--spacer-1);
-    }
-
-    .rs__menu-list {
-      max-height: calc(var(--spacer-6) * 5);
-      overflow-y: auto;
-    }
-
-    .rs__group-heading {
-      color: var(--color-text-tertiary);
-      padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-1);
-      font-family: var(--text-body-medium-font-family);
-      font-size: var(--text-body-medium-font-size);
-      font-weight: var(--text-body-medium-font-weight);
-      line-height: var(--text-body-medium-line-height);
-    }
-
-    .rs__option {
-      font-family: var(--text-body-medium-font-family);
-      font-size: var(--text-body-medium-font-size);
-      font-weight: var(--text-body-medium-font-weight);
-      line-height: var(--text-body-medium-line-height);
-      padding-inline: var(--spacer-3) var(--spacer-1);
-      padding-block: var(--spacer-2);
-      color: var(--color-text);
-    }
-
-    .rs__option--is-focused {
-      background-color: var(--color-bg-secondary);
-    }
-
-    .rs__option--is-selected {
-      background-color: var(--color-bg-selected);
-    }
-
     &.rs--is-disabled .rs__control {
       background: var(--field-color-bg-disabled);
       border-color: var(--field-color-border-disabled);
@@ -133,6 +81,59 @@
     }
   }
 
+  /* Menu rules are top-level so they apply when the menu is portaled to document.body */
+  .rs__menu-notice {
+    padding: 0.625rem 0.75rem;
+  }
+
+  .rs__menu {
+    z-index: 4;
+    border-radius: var(--radius-medium);
+    box-shadow: var(--elevation-400-menu-panel);
+    background: var(--color-bg);
+    /* overflow: clip; */
+  }
+
+  .rs__menu--placement-bottom {
+    margin-top: var(--spacer-1);
+  }
+
+  .rs__menu--placement-top {
+    margin-bottom: var(--spacer-1);
+  }
+
+  .rs__menu-list {
+    max-height: calc(var(--spacer-6) * 5);
+    overflow-y: auto;
+  }
+
+  .rs__group-heading {
+    color: var(--color-text-tertiary);
+    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-1);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+  }
+
+  .rs__option {
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    padding-inline: var(--spacer-3) var(--spacer-1);
+    padding-block: var(--spacer-2);
+    color: var(--color-text);
+  }
+
+  .rs__option--is-focused {
+    background-color: var(--color-bg-secondary);
+  }
+
+  .rs__option--is-selected {
+    background-color: var(--color-bg-selected);
+  }
+
   .react-select--error {
     div.rs__control {
       border: var(--stroke-width-small) solid var(--field-color-border-error);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAI/C,OAAO,KAAK,EAAU,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACjE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAcxC,OAAO,aAAa,CAAA;AAoOpB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQzD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAI/C,OAAO,KAAK,EAAU,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACjE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAgBxC,OAAO,aAAa,CAAA;AAwSpB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQzD,CAAA"}