npm - @payloadcms/ui - Versions diffs - 4.0.0-internal.c2b57ce → 4.0.0-internal.ccea85d - Mend

@payloadcms/ui 4.0.0-internal.c2b57ce → 4.0.0-internal.ccea85d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2343) hide show

package/dist/elements/Popup/index.js CHANGED Viewed

@@ -1,17 +1,33 @@
 '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.
  */
 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;
+};
 /**
  * Component that renders a popup, as well as a button that triggers the popup.
  *
@@ -22,6 +38,7 @@ export const Popup = props => {
   const {
     id,
     button,
+    buttonAriaLabel,
     buttonClassName,
     buttonSize,
     buttonType = 'default',
@@ -40,18 +57,25 @@ export const Popup = props => {
     renderButton,
     showOnHover = false,
     showScrollbar = false,
-    size = 'medium',
+    side,
+    size = 'fit-content',
     theme = 'dark',
     verticalAlign = 'bottom'
   } = 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);
+  /**
   * 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 parentPopup = use(PopupContext);
   const [mounted, setMounted] = useState(false);
   const [active, setActiveInternal] = useState(initActive);
   const [isOnTop, setIsOnTop] = useState(verticalAlign === 'top');
@@ -83,47 +107,94 @@ export const Popup = props => {
     }
     const triggerRect = trigger.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;
-    // /////////////////////////////////////
-    // 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) {
-        top = triggerRect.top + window.scrollY - popupRect.height - offset;
-        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 + scrollY;
+      const maxTop = scrollY + window.innerHeight - popupRect.height - offset;
+      top = Math.max(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;
+        }
       }
+      left = left + 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) {
-        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 + 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 + scrollY - popupRect.height - offset;
+          if (topIfAbove >= 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 + scrollY - popupRect.height - offset;
+        if (triggerRect.top - popupRect.height - offset < 0) {
+          top = triggerRect.bottom + 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
@@ -133,8 +204,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 + scrollX)}px`;
     const newCaretLeft = `${Math.round(caretLeft)}px`;
+    const newPosition = useFixed ? 'fixed' : '';
+    if (popup.style.position !== newPosition) {
+      popup.style.position = newPosition;
+    }
     if (popup.style.top !== newTop) {
       popup.style.top = newTop;
     }
@@ -217,6 +292,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);
     }
   });
@@ -225,18 +304,42 @@ 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;
     }
     // /////////////////////////////////////
     // Initial Position
     // 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.
     // /////////////////////////////////////
+    // Decide the positioning strategy once per open.
+    isFixedRef.current = hasFixedAncestor(triggerRef.current);
     updatePosition();
+    const rafId = requestAnimationFrame(() => {
+      updatePosition();
+    });
     // /////////////////////////////////////
     // Focus Management
     // When opened via keyboard, autofocus the first focusable button.
@@ -245,7 +348,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();
       });
     }
@@ -262,15 +365,16 @@ 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);
       window.removeEventListener('scroll', updatePosition, {
         capture: true
       });
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('keydown', handleKeyDown);
-      popup_1.removeEventListener('click', handleActionableClick);
+      popup_2.removeEventListener('click', handleActionableClick);
     };
   }, [active]);
   useEffect(() => {
@@ -281,6 +385,7 @@ export const Popup = props => {
   const Trigger = /*#__PURE__*/_jsx(PopupTrigger, {
     active: active,
     button: button,
+    buttonAriaLabel: buttonAriaLabel,
     buttonType: buttonType,
     className: buttonClassName,
     disabled: disabled,
@@ -308,21 +413,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 CHANGED Viewed

	@@ -1 +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","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","requestAnimationFrame","firstFocusable","addEventListener","capture","passive","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 top = triggerRect.top + window.scrollY - popupRect.height - offset\n onTop = true\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\n updatePosition()\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 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":[]}
1	+ {"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","hasFixedAncestor","element","node","parentElement","document","body","window","getComputedStyle","position","Popup","props","id","button","buttonAriaLabel","buttonClassName","buttonSize","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","initActive","noBackground","onToggleClose","onToggleOpen","portalClassName","render","renderButton","showOnHover","showScrollbar","side","size","theme","verticalAlign","popupRef","triggerRef","isFixedRef","openedViaKeyboardRef","parentPopup","mounted","setMounted","active","setActiveInternal","isOnTop","setIsOnTop","setActive","isActive","viaKeyboard","current","updatePosition","trigger","popup","triggerRect","getBoundingClientRect","popupRect","useFixed","scrollY","scrollX","offset","sideOffset","top","left","caretLeft","maxTop","innerHeight","height","Math","max","min","anchorRect","width","right","innerWidth","onTop","bottom","topIfAbove","triggerCenter","newTop","round","newLeft","newCaretLeft","newPosition","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","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"],"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\n/\n Returns whether the element has a `position: fixed` ancestor (e.g. an open Drawer).\n * Such popups must be positioned with `fixed` so they don't drift when the background scrolls.\n /\nconst hasFixedAncestor = (element: HTMLElement \| null): boolean => {\n let node = element?.parentElement\n while (node && node !== document.body) {\n if (window.getComputedStyle(node).position === 'fixed') {\n return true\n }\n node = node.parentElement\n }\n return false\n}\n\nexport type PopupProps = {\n backgroundColor?: CSSProperties['backgroundColor']\n boundingRef?: React.RefObject<HTMLElement>\n button?: React.ReactNode\n /\n Accessible label for the trigger button.\n * Necessary when the button has an icon-only content,\n * so the button has an accessible name for screen readers.\n /\n buttonAriaLabel?: string\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' \| '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 buttonAriaLabel,\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 = 'fit-content',\n theme = 'dark',\n verticalAlign = 'bottom',\n } = props\n\n const popupRef = useRef<HTMLDivElement>(null)\n const triggerRef = useRef<HTMLDivElement>(null)\n\n /\n Whether the trigger is inside a `position: fixed` ancestor (e.g. a Drawer),\n * in which case the popup is positioned with `fixed` instead of `absolute`.\n /\n const isFixedRef = useRef(false)\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 // Inside a fixed ancestor, use `fixed` (no scroll offset) so background scrolling\n // doesn't shift the popup. Otherwise use page coordinates (absolute).\n const useFixed = isFixedRef.current\n const scrollY = useFixed ? 0 : window.scrollY\n const scrollX = useFixed ? 0 : window.scrollX\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 + scrollY\n const maxTop = scrollY + window.innerHeight - popupRect.height - offset\n top = Math.max(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 + 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 + 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 + scrollY - popupRect.height - offset\n if (topIfAbove >= 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 + scrollY - popupRect.height - offset\n\n if (triggerRect.top - popupRect.height - offset < 0) {\n top = triggerRect.bottom + 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 + scrollX)}px`\n const newCaretLeft = `${Math.round(caretLeft)}px`\n const newPosition = useFixed ? 'fixed' : ''\n\n if (popup.style.position !== newPosition) {\n popup.style.position = newPosition\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.position = ''\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. ColumnSelection popup content rendering after hidden → visible\n // class switch), which was causing incorrect flip-to-top decisions.\n // /////////////////////////////////////\n\n // Decide the positioning strategy once per open.\n isFixedRef.current = hasFixedAncestor(triggerRef.current)\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 buttonAriaLabel={buttonAriaLabel}\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/PreviewButton/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAEvD,OAAO,KAAgC,MAAM,OAAO,CAAA;AAQpD,wBAAgB,aAAa,CAAC,KAAK,EAAE,wBAAwB,~~qBA2C5D~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAEvD,OAAO,KAAgC,MAAM,OAAO,CAAA;AAQpD,wBAAgB,aAAa,CAAC,KAAK,EAAE,wBAAwB,qBA0C5D"}

package/dist/elements/PreviewButton/index.js CHANGED Viewed

@@ -62,10 +62,9 @@ export function PreviewButton(props) {
         position: "relative"
       },
       children: [_jsx(Button, {
-        "aria-label": label,
         buttonStyle: "ghost",
         icon: _jsx(LinkIcon, {
-          size: 16
+          size: 24
         }),
         id: "preview-button",
         onClick: handleClick

package/dist/elements/PreviewButton/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["c","_c","React","useCallback","useState","LinkIcon","usePreviewURL","useTranslation","Button","Tooltip","PreviewButton","props","$","previewURL","t","copied","setCopied","hovered","setHovered","t0","navigator","clipboard","writeText","handleClick","t1","label","t2","t3","Symbol","for","_jsxs","onPointerEnter","onPointerLeave","style","position","children","_jsx","buttonStyle","icon","size","onClick","delay","show"],"sources":["../../../src/elements/PreviewButton/index.tsx"],"sourcesContent":["'use client'\nimport type { PreviewButtonClientProps } from 'payload'\n\nimport React, { useCallback, useState } from 'react'\n\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { usePreviewURL } from '../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\n\nexport function PreviewButton(props: PreviewButtonClientProps) {\n const { previewURL } = usePreviewURL()\n const { t } = useTranslation()\n const [copied, setCopied] = useState(false)\n const [hovered, setHovered] = useState(false)\n\n const handleClick = useCallback(async () => {\n if (previewURL) {\n await navigator.clipboard.writeText(previewURL)\n setCopied(true)\n }\n }, [previewURL])\n\n if (!previewURL) {\n return null\n }\n\n const label = copied ? t('general:copied') : t('general:copy')\n\n return (\n <span\n onPointerEnter={() => {\n setHovered(true)\n setCopied(false)\n }}\n onPointerLeave={() => {\n setHovered(false)\n setCopied(false)\n }}\n style={{ position: 'relative' }}\n >\n <Button\n ~~aria-label={label}\n~~ buttonStyle=\"ghost\"\n icon={<LinkIcon size={16} />}\n id=\"preview-button\"\n onClick={handleClick}\n />\n <Tooltip delay={0} show={hovered \|\| copied}>\n {label}\n </Tooltip>\n </span>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,WAAW,EAAEC,QAAQ,QAAQ;AAE7C,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAC9B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,OAAO,QAAQ;AAExB,OAAO,SAAAC,cAAAC,KAAA;EAAA,MAAAC,CAAA,GAAAX,EAAA;EACL;IAAAY;EAAA,IAAuBP,aAAA;EACvB;IAAAQ;EAAA,IAAcP,cAAA;EACd,OAAAQ,MAAA,EAAAC,SAAA,IAA4BZ,QAAA,MAAS;EACrC,OAAAa,OAAA,EAAAC,UAAA,IAA8Bd,QAAA,MAAS;EAAA,IAAAe,EAAA;EAAA,IAAAP,CAAA,QAAAC,UAAA;IAEPM,EAAA,SAAAA,CAAA;MAAA,IAC1BN,UAAA;QAAA,MACIO,SAAA,CAAAC,SAAA,CAAAC,SAAA,CAA8BT,UAAA;QACpCG,SAAA,KAAU;MAAA;IAAA;IAEdJ,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EALA,MAAAW,WAAA,GAAoBJ,EAKL;EAAA,KAEVN,UAAA;IAAA;EAAA;EAAA,IAAAW,EAAA;EAAA,IAAAZ,CAAA,QAAAG,MAAA,IAAAH,CAAA,QAAAW,WAAA,IAAAX,CAAA,QAAAK,OAAA,IAAAL,CAAA,QAAAE,CAAA;IAIL,MAAAW,KAAA,GAAcV,MAAA,GAASD,CAAA,CAAE,oBAAoBA,CAAA,CAAE;IAAA,IAAAY,EAAA;IAAA,IAAAC,EAAA;IAAA,IAAAf,CAAA,QAAAgB,MAAA,CAAAC,GAAA;MAI3BH,EAAA,GAAAA,CAAA;QACdR,UAAA,KAAW;QACXF,SAAA,MAAU;MAAA;MAEIW,EAAA,GAAAA,CAAA;QACdT,UAAA,MAAW;QACXF,SAAA,MAAU;MAAA;MACZJ,CAAA,MAAAc,EAAA;MAAAd,CAAA,MAAAe,EAAA;IAAA;MAAAD,EAAA,GAAAd,CAAA;MAAAe,EAAA,GAAAf,CAAA;IAAA;IARFY,EAAA,GAAAM,KAAA,CAAC;MAAAC,cAAA,EACiBL,EAGhB;MAAAM,cAAA,EACgBL,EAGhB;MAAAM,KAAA;QAAAC,QAAA,EACmB;MAAA;MAAAC,QAAA,GAEnBC,IAAA,CAAA5B,MAAA;~~QAAA~~,~~cACciB,KAAA;QAAAY,~~WAAA,~~EACA~~;QAAAC,IAAA,EACNF,IAAA,CAAA/B,QAAA;UAAAkC,IAAA;QAAA,C;YACH;QAAAC,OAAA,EACMjB;MAAA,C,GAEXa,IAAA,CAAA3B,OAAA;QAAAgC,KAAA;QAAAC,IAAA,EAAyBzB,OAAA,IAAWF,MAAA;QAAAoB,QAAA,EACjCV;MAAA,C;;;;;;;;;;~~SAnBLD~~,E","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["c","_c","React","useCallback","useState","LinkIcon","usePreviewURL","useTranslation","Button","Tooltip","PreviewButton","props","$","previewURL","t","copied","setCopied","hovered","setHovered","t0","navigator","clipboard","writeText","handleClick","t1","label","t2","t3","Symbol","for","_jsxs","onPointerEnter","onPointerLeave","style","position","children","_jsx","buttonStyle","icon","size","onClick","delay","show"],"sources":["../../../src/elements/PreviewButton/index.tsx"],"sourcesContent":["'use client'\nimport type { PreviewButtonClientProps } from 'payload'\n\nimport React, { useCallback, useState } from 'react'\n\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { usePreviewURL } from '../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\n\nexport function PreviewButton(props: PreviewButtonClientProps) {\n const { previewURL } = usePreviewURL()\n const { t } = useTranslation()\n const [copied, setCopied] = useState(false)\n const [hovered, setHovered] = useState(false)\n\n const handleClick = useCallback(async () => {\n if (previewURL) {\n await navigator.clipboard.writeText(previewURL)\n setCopied(true)\n }\n }, [previewURL])\n\n if (!previewURL) {\n return null\n }\n\n const label = copied ? t('general:copied') : t('general:copy')\n\n return (\n <span\n onPointerEnter={() => {\n setHovered(true)\n setCopied(false)\n }}\n onPointerLeave={() => {\n setHovered(false)\n setCopied(false)\n }}\n style={{ position: 'relative' }}\n >\n <Button\n buttonStyle=\"ghost\"\n icon={<LinkIcon size={24} />}\n id=\"preview-button\"\n onClick={handleClick}\n />\n <Tooltip delay={0} show={hovered \|\| copied}>\n {label}\n </Tooltip>\n </span>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,WAAW,EAAEC,QAAQ,QAAQ;AAE7C,SAASC,QAAQ,QAAQ;AACzB,SAASC,aAAa,QAAQ;AAC9B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,OAAO,QAAQ;AAExB,OAAO,SAAAC,cAAAC,KAAA;EAAA,MAAAC,CAAA,GAAAX,EAAA;EACL;IAAAY;EAAA,IAAuBP,aAAA;EACvB;IAAAQ;EAAA,IAAcP,cAAA;EACd,OAAAQ,MAAA,EAAAC,SAAA,IAA4BZ,QAAA,MAAS;EACrC,OAAAa,OAAA,EAAAC,UAAA,IAA8Bd,QAAA,MAAS;EAAA,IAAAe,EAAA;EAAA,IAAAP,CAAA,QAAAC,UAAA;IAEPM,EAAA,SAAAA,CAAA;MAAA,IAC1BN,UAAA;QAAA,MACIO,SAAA,CAAAC,SAAA,CAAAC,SAAA,CAA8BT,UAAA;QACpCG,SAAA,KAAU;MAAA;IAAA;IAEdJ,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EALA,MAAAW,WAAA,GAAoBJ,EAKL;EAAA,KAEVN,UAAA;IAAA;EAAA;EAAA,IAAAW,EAAA;EAAA,IAAAZ,CAAA,QAAAG,MAAA,IAAAH,CAAA,QAAAW,WAAA,IAAAX,CAAA,QAAAK,OAAA,IAAAL,CAAA,QAAAE,CAAA;IAIL,MAAAW,KAAA,GAAcV,MAAA,GAASD,CAAA,CAAE,oBAAoBA,CAAA,CAAE;IAAA,IAAAY,EAAA;IAAA,IAAAC,EAAA;IAAA,IAAAf,CAAA,QAAAgB,MAAA,CAAAC,GAAA;MAI3BH,EAAA,GAAAA,CAAA;QACdR,UAAA,KAAW;QACXF,SAAA,MAAU;MAAA;MAEIW,EAAA,GAAAA,CAAA;QACdT,UAAA,MAAW;QACXF,SAAA,MAAU;MAAA;MACZJ,CAAA,MAAAc,EAAA;MAAAd,CAAA,MAAAe,EAAA;IAAA;MAAAD,EAAA,GAAAd,CAAA;MAAAe,EAAA,GAAAf,CAAA;IAAA;IARFY,EAAA,GAAAM,KAAA,CAAC;MAAAC,cAAA,EACiBL,EAGhB;MAAAM,cAAA,EACgBL,EAGhB;MAAAM,KAAA;QAAAC,QAAA,EACmB;MAAA;MAAAC,QAAA,GAEnBC,IAAA,CAAA5B,MAAA;QAAA6B,WAAA,EACc;QAAAC,IAAA,EACNF,IAAA,CAAA/B,QAAA;UAAAkC,IAAA;QAAA,C;YACH;QAAAC,OAAA,EACMjB;MAAA,C,GAEXa,IAAA,CAAA3B,OAAA;QAAAgC,KAAA;QAAAC,IAAA,EAAyBzB,OAAA,IAAWF,MAAA;QAAAoB,QAAA,EACjCV;MAAA,C;;;;;;;;;;SAlBLD,E","ignoreList":[]}