@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.5d5a2b2

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'popup-button';
 export const PopupTrigger = props => {
   const {
@@ -12,10 +12,11 @@ export const PopupTrigger = props => {
     className,
     disabled,
     noBackground,
+    renderButton,
     setActive,
     size
   } = props;
-  const classes = [baseClass, className, `${baseClass}--${buttonType}`, !noBackground && `${baseClass}--background`, size && `${baseClass}--size-${size}`, disabled && `${baseClass}--disabled`].filter(Boolean).join(' ');
+  const classes = [baseClass, className, `${baseClass}--${buttonType}`, !noBackground && `${baseClass}--background`, size && `${baseClass}--size-${size}`, disabled && `${baseClass}--disabled`, active && `${baseClass}--active`].filter(Boolean).join(' ');
   const handleClick = () => {
     setActive(!active, false);
   };
@@ -25,8 +26,17 @@ export const PopupTrigger = props => {
       setActive(!active, true);
     }
   };
-  if (buttonType === 'none') {
-    return null;
+  // Render prop mode: consumer provides the button, we provide the handlers
+  if (renderButton) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: renderButton({
+        active,
+        'aria-expanded': active,
+        'aria-haspopup': true,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown
+      })
+    });
   }
   if (buttonType === 'custom') {
     return /*#__PURE__*/_jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","disabled","noBackground","setActive","size","classes","filter","Boolean","join","handleClick","handleKeyDown","e","key","preventDefault","_jsx","onClick","onKeyDown","role","tabIndex","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-button'\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button: React.ReactNode\n  buttonType: 'custom' | 'default' | 'none'\n  className?: string\n  disabled?: boolean\n  noBackground?: boolean\n  setActive: (active: boolean, viaKeyboard?: boolean) => void\n  size?: 'large' | 'medium' | 'small' | 'xsmall'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const { active, button, buttonType, className, disabled, noBackground, setActive, size } = props\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--${buttonType}`,\n    !noBackground && `${baseClass}--background`,\n    size && `${baseClass}--size-${size}`,\n    disabled && `${baseClass}--disabled`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick = () => {\n    setActive(!active, false)\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      setActive(!active, true)\n    }\n  }\n\n  if (buttonType === 'none') {\n    return null\n  }\n\n  if (buttonType === 'custom') {\n    return (\n      <div\n        className={classes}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {button}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      tabIndex={0}\n      type=\"button\"\n    >\n      {button}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAalB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,SAAS;IAAEC;EAAI,CAAE,GAAGR,KAAA;EAE3F,MAAMS,OAAA,GAAU,CACdX,SAAA,EACAM,SAAA,EACA,GAAGN,SAAA,KAAcK,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGR,SAAA,cAAuB,EAC3CU,IAAA,IAAQ,GAAGV,SAAA,UAAmBU,IAAA,EAAM,EACpCH,QAAA,IAAY,GAAGP,SAAA,YAAqB,CACrC,CACEY,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAcA,CAAA;IAClBN,SAAA,CAAU,CAACN,MAAA,EAAQ;EACrB;EAEA,MAAMa,aAAA,GAAiBC,CAAA;IACrB,IAAIA,CAAA,CAAEC,GAAG,KAAK,WAAWD,CAAA,CAAEC,GAAG,KAAK,KAAK;MACtCD,CAAA,CAAEE,cAAc;MAChBV,SAAA,CAAU,CAACN,MAAA,EAAQ;IACrB;EACF;EAEA,IAAIE,UAAA,KAAe,QAAQ;IACzB,OAAO;EACT;EAEA,IAAIA,UAAA,KAAe,UAAU;IAC3B,oBACEe,IAAA,CAAC;MACCd,SAAA,EAAWK,OAAA;MACXU,OAAA,EAASN,WAAA;MACTO,SAAA,EAAWN,aAAA;MACXO,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETpB;;EAGP;EAEA,oBACEgB,IAAA,CAAC;IACCd,SAAA,EAAWK,OAAA;IACXJ,QAAA,EAAUA,QAAA;IACVc,OAAA,EAASN,WAAA;IACTO,SAAA,EAAWN,aAAA;IACXQ,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJrB;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","disabled","noBackground","renderButton","setActive","size","classes","filter","Boolean","join","handleClick","handleKeyDown","e","key","preventDefault","_jsx","_Fragment","onClick","onKeyDown","role","tabIndex","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'popup-button'\n\nexport type PopupButtonRenderProps = {\n  active: boolean\n  'aria-expanded': boolean\n  'aria-haspopup': true\n  onClick: React.MouseEventHandler\n  onKeyDown: React.KeyboardEventHandler\n}\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button?: React.ReactNode\n  buttonType: 'custom' | 'default'\n  className?: string\n  disabled?: boolean\n  noBackground?: boolean\n  renderButton?: (props: PopupButtonRenderProps) => React.ReactNode\n  setActive: (active: boolean, viaKeyboard?: boolean) => void\n  size?: 'large' | 'medium'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const {\n    active,\n    button,\n    buttonType,\n    className,\n    disabled,\n    noBackground,\n    renderButton,\n    setActive,\n    size,\n  } = props\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--${buttonType}`,\n    !noBackground && `${baseClass}--background`,\n    size && `${baseClass}--size-${size}`,\n    disabled && `${baseClass}--disabled`,\n    active && `${baseClass}--active`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick: React.MouseEventHandler = () => {\n    setActive(!active, false)\n  }\n\n  const handleKeyDown: React.KeyboardEventHandler = (e) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      setActive(!active, true)\n    }\n  }\n\n  // Render prop mode: consumer provides the button, we provide the handlers\n  if (renderButton) {\n    return (\n      <>\n        {renderButton({\n          active,\n          'aria-expanded': active,\n          'aria-haspopup': true,\n          onClick: handleClick,\n          onKeyDown: handleKeyDown,\n        })}\n      </>\n    )\n  }\n\n  if (buttonType === 'custom') {\n    return (\n      <div\n        className={classes}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {button}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      tabIndex={0}\n      type=\"button\"\n    >\n      {button}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAsBlB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IACJC,MAAM;IACNC,MAAM;IACNC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,SAAS;IACTC;EAAI,CACL,GAAGT,KAAA;EAEJ,MAAMU,OAAA,GAAU,CACdZ,SAAA,EACAM,SAAA,EACA,GAAGN,SAAA,KAAcK,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGR,SAAA,cAAuB,EAC3CW,IAAA,IAAQ,GAAGX,SAAA,UAAmBW,IAAA,EAAM,EACpCJ,QAAA,IAAY,GAAGP,SAAA,YAAqB,EACpCG,MAAA,IAAU,GAAGH,SAAA,UAAmB,CACjC,CACEa,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAuCA,CAAA;IAC3CN,SAAA,CAAU,CAACP,MAAA,EAAQ;EACrB;EAEA,MAAMc,aAAA,GAA6CC,CAAA;IACjD,IAAIA,CAAA,CAAEC,GAAG,KAAK,WAAWD,CAAA,CAAEC,GAAG,KAAK,KAAK;MACtCD,CAAA,CAAEE,cAAc;MAChBV,SAAA,CAAU,CAACP,MAAA,EAAQ;IACrB;EACF;EAEA;EACA,IAAIM,YAAA,EAAc;IAChB,oBACEY,IAAA,CAAAC,SAAA;gBACGb,YAAA,CAAa;QACZN,MAAA;QACA,iBAAiBA,MAAA;QACjB,iBAAiB;QACjBoB,OAAA,EAASP,WAAA;QACTQ,SAAA,EAAWP;MACb;;EAGN;EAEA,IAAIZ,UAAA,KAAe,UAAU;IAC3B,oBACEgB,IAAA,CAAC;MACCf,SAAA,EAAWM,OAAA;MACXW,OAAA,EAASP,WAAA;MACTQ,SAAA,EAAWP,aAAA;MACXQ,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETtB;;EAGP;EAEA,oBACEiB,IAAA,CAAC;IACCf,SAAA,EAAWM,OAAA;IACXL,QAAA,EAAUA,QAAA;IACVgB,OAAA,EAASP,WAAA;IACTQ,SAAA,EAAWP,aAAA;IACXS,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJvB;;AAGP","ignoreList":[]}

package/dist/elements/Popup/index.css

@@ -0,0 +1,72 @@
+@layer payload-default {
+  .popup {
+    position: relative;
+  }
+
+  .popup__trigger-wrap {
+    display: flex;
+    align-items: stretch;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .popup__on-hover-watch {
+    display: contents;
+  }
+
+  .popup__hidden-content {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .popup__content {
+    --popup-caret-size: 8px;
+
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+    z-index: var(--z-popup);
+    background: var(--popup-bg, var(--color-bg-elevated));
+    color: var(--popup-text, var(--color-text));
+    border-radius: var(--popup-radius);
+    min-width: 80px;
+    max-width: 400px;
+    box-shadow: var(--elevation-400-menu-panel);
+  }
+
+  .popup__content[data-theme='dark'] {
+    background: var(--popup-bg, var(--color-bg-menu));
+    color: var(--popup-text, var(--color-text-ontooltip));
+  }
+
+  .popup__content.popup--size-small {
+    min-width: 80px;
+  }
+
+  .popup__content.popup--size-large {
+    min-width: 200px;
+  }
+
+  .popup__content.popup--size-fit-content {
+    min-width: fit-content;
+  }
+
+  .popup__scroll-container {
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: calc(var(--spacer-5) * 10);
+    padding: var(--spacer-2) 0;
+  }
+
+  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar) {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+  }
+
+  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar)::-webkit-scrollbar {
+    display: none; /* Chrome/Safari/Opera */
+  }
+}

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

@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react';
 export * as PopupList from './PopupButtonList/index.js';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type PopupProps = {
     backgroundColor?: CSSProperties['backgroundColor'];
     boundingRef?: React.RefObject<HTMLElement>;
@@ -10,8 +10,8 @@ export type PopupProps = {
      * The class name to apply to the button that triggers the popup.
      */
     buttonClassName?: string;
-    buttonSize?: 'large' | 'medium' | 'small' | 'xsmall';
-    buttonType?: 'custom' | 'default' | 'none';
+    buttonSize?: 'large' | 'medium';
+    buttonType?: 'custom' | 'default';
     caret?: boolean;
     children?: React.ReactNode;
     /**
@@ -42,6 +42,17 @@ export type PopupProps = {
     render?: (args: {
         close: () => void;
     }) => React.ReactNode;
+    /**
+     * Render prop for custom trigger button. Receives onClick/onKeyDown/aria props.
+     * When provided, `button` and `buttonType` are ignored.
+     */
+    renderButton?: (props: {
+        active: boolean;
+        'aria-expanded': boolean;
+        'aria-haspopup': true;
+        onClick: React.MouseEventHandler;
+        onKeyDown: React.KeyboardEventHandler;
+    }) => React.ReactNode;
     showOnHover?: boolean;
     /**
      * By default, the scrollbar is hidden. If you want to show it, set this to true.
@@ -51,6 +62,13 @@ export type PopupProps = {
      */
     showScrollbar?: boolean;
     size?: 'fit-content' | 'large' | 'medium' | 'small';
+    /**
+     * Theme for the popup content. Defaults to 'dark'.
+     * Set to 'auto' to inherit the current theme.
+     *
+     * @default 'dark'
+     */
+    theme?: 'auto' | 'dark' | 'light';
     /**
      * Preferred vertical alignment of the popup (position below or above the trigger),
      * if there is enough space available.

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KAAmD,MAAM,OAAO,CAAA;AAIvE,OAAO,cAAc,CAAA;AAuBrB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IACpD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnD;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAgXtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KAAmD,MAAM,OAAO,CAAA;AAIvE,OAAO,aAAa,CAAA;AAuBpB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,MAAM,EAAE,OAAO,CAAA;QACf,eAAe,EAAE,OAAO,CAAA;QACxB,eAAe,EAAE,IAAI,CAAA;QACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;QAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;KACtC,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAoZtC,CAAA"}

package/dist/elements/Popup/index.js

@@ -5,7 +5,7 @@ export * as PopupList from './PopupButtonList/index.js';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useEffectEvent } from '../../hooks/useEffectEvent.js';
-import './index.scss';
+import './index.css';
 import { PopupTrigger } from './PopupTrigger/index.js';
 const baseClass = 'popup';
 /**
@@ -37,9 +37,11 @@ export const Popup = props => {
     onToggleOpen,
     portalClassName,
     render,
+    renderButton,
     showOnHover = false,
     showScrollbar = false,
     size = 'medium',
+    theme = 'dark',
     verticalAlign = 'bottom'
   } = props;
   const popupRef = useRef(null);
@@ -94,8 +96,13 @@ export const Popup = props => {
     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;
+        // 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;
@@ -146,11 +153,21 @@ export const Popup = props => {
   // /////////////////////////////////////
   // Click Outside Handler
   // Closes popup when clicking outside both the popup and trigger.
+  // Distinguishes between parent and child popups:
+  // - Click in child popup: parent stays open
+  // - Click in parent popup: child closes
   // /////////////////////////////////////
   const handleClickOutside = useEffectEvent(e => {
-    const isOutsidePopup = !popupRef.current?.contains(e.target);
-    const isOutsideTrigger = !triggerRef.current?.contains(e.target);
-    if (isOutsidePopup && isOutsideTrigger) {
+    const target = e.target;
+    const isOutsidePopup = !popupRef.current?.contains(target);
+    const isOutsideTrigger = !triggerRef.current?.contains(target);
+    // Check if click is inside a popup portal
+    const clickedPopupContent = target.closest?.('.popup__content');
+    // If the clicked popup contains this popup's trigger, it's a parent popup
+    // and we should close. If it doesn't contain our trigger, it's a child popup
+    // and we should stay open to avoid closing parent when interacting with child.
+    const isInsideChildPopup = clickedPopupContent && !clickedPopupContent.contains(triggerRef.current);
+    if (isOutsidePopup && isOutsideTrigger && !isInsideChildPopup) {
       setActive(false);
     }
   });
@@ -197,13 +214,13 @@ export const Popup = props => {
   // Closes popup when buttons/links inside are clicked (includes Enter/Space activation).
   // /////////////////////////////////////
   const handleActionableClick = useEffectEvent(e_1 => {
-    const target = e_1.target;
+    const target_0 = e_1.target;
     // Allow opting out with data-popup-prevent-close attribute on element or ancestor
-    if (target.closest('[data-popup-prevent-close]')) {
+    if (target_0.closest('[data-popup-prevent-close]')) {
       return;
     }
     // Check if the clicked element or any ancestor is an actionable element
-    const actionable = target.closest('button, a[href], [role="button"], [role="menuitem"]');
+    const actionable = target_0.closest('button, a[href], [role="button"], [role="menuitem"]');
     if (actionable && popupRef.current?.contains(actionable)) {
       setActive(false);
     }
@@ -221,9 +238,22 @@ export const Popup = props => {
     }
     // /////////////////////////////////////
     // Initial Position
-    // Calculate and apply popup position immediately on open.
+    // Calculate and apply popup position.
+    // getBoundingClientRect() forces synchronous layout.
+    //
+    // We call updatePosition() twice: once synchronously (so the popup
+    // snaps to roughly the right place immediately rather than flashing
+    // from -9999px) and once in a requestAnimationFrame, which fires
+    // after the browser has finished laying out the newly-visible popup
+    // content. The rAF call is the authoritative one — it catches cases
+    // where the popup height wasn't stable yet during the first call
+    // (e.g. ColumnSelector content rendering after hidden → visible
+    // class switch), which was causing incorrect flip-to-top decisions.
     // /////////////////////////////////////
     updatePosition();
+    const rafId = requestAnimationFrame(() => {
+      updatePosition();
+    });
     // /////////////////////////////////////
     // Focus Management
     // When opened via keyboard, autofocus the first focusable button.
@@ -251,6 +281,7 @@ export const Popup = props => {
     document.addEventListener('keydown', handleKeyDown);
     popup_1.addEventListener('click', handleActionableClick);
     return () => {
+      cancelAnimationFrame(rafId);
       window.removeEventListener('resize', updatePosition);
       window.removeEventListener('scroll', updatePosition, {
         capture: true
@@ -272,6 +303,7 @@ export const Popup = props => {
     className: buttonClassName,
     disabled: disabled,
     noBackground: noBackground,
+    renderButton: renderButton,
     setActive: setActive,
     size: buttonSize
   });
@@ -299,6 +331,7 @@ export const Popup = props => {
       // 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` : ''}`,

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","showOnHover","showScrollbar","size","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","isOutsidePopup","contains","target","isOutsideTrigger","handleKeyDown","key","preventDefault","querySelector","focus","focusable","Array","from","querySelectorAll","length","currentIndex","findIndex","el","document","activeElement","goBackward","shiftKey","nextIndex","handleActionableClick","closest","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.scss'\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' | 'small' | 'xsmall'\n  buttonType?: 'custom' | 'default' | 'none'\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  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   * 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    showOnHover = false,\n    showScrollbar = false,\n    size = 'medium',\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  // /////////////////////////////////////\n\n  const handleClickOutside = useEffectEvent((e: MouseEvent) => {\n    const isOutsidePopup = !popupRef.current?.contains(e.target as Node)\n    const isOutsideTrigger = !triggerRef.current?.contains(e.target as Node)\n\n    if (isOutsidePopup && isOutsideTrigger) {\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 immediately on open.\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      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              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","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":[]}

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

@@ -1,5 +1,4 @@
 import type { PreviewButtonClientProps } from 'payload';
 import React from 'react';
-import './index.scss';
 export declare function PreviewButton(props: PreviewButtonClientProps): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -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,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAMrB,wBAAgB,aAAa,CAAC,KAAK,EAAE,wBAAwB,qBAoB5D"}
+{"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

@@ -1,41 +1,87 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { ExternalLinkIcon } from '../../icons/ExternalLink/index.js';
-import './index.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useState } from 'react';
+import { LinkIcon } from '../../icons/Link/index.js';
 import { usePreviewURL } from '../../providers/LivePreview/context.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-const baseClass = 'preview-btn';
+import { Button } from '../Button/index.js';
+import { Tooltip } from '../Tooltip/index.js';
 export function PreviewButton(props) {
-  const $ = _c(3);
+  const $ = _c(9);
   const {
     previewURL
   } = usePreviewURL();
   const {
     t
   } = useTranslation();
+  const [copied, setCopied] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  let t0;
+  if ($[0] !== previewURL) {
+    t0 = async () => {
+      if (previewURL) {
+        await navigator.clipboard.writeText(previewURL);
+        setCopied(true);
+      }
+    };
+    $[0] = previewURL;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const handleClick = t0;
   if (!previewURL) {
     return null;
   }
-  let t0;
-  if ($[0] !== previewURL || $[1] !== t) {
-    t0 = _jsx("a", {
-      "aria-label": t("version:preview"),
-      className: baseClass,
-      href: previewURL,
-      id: "preview-button",
-      target: "_blank",
-      title: t("version:preview"),
-      children: _jsx(ExternalLinkIcon, {})
+  let t1;
+  if ($[2] !== copied || $[3] !== handleClick || $[4] !== hovered || $[5] !== t) {
+    const label = copied ? t("general:copied") : t("general:copy");
+    let t2;
+    let t3;
+    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = () => {
+        setHovered(true);
+        setCopied(false);
+      };
+      t3 = () => {
+        setHovered(false);
+        setCopied(false);
+      };
+      $[7] = t2;
+      $[8] = t3;
+    } else {
+      t2 = $[7];
+      t3 = $[8];
+    }
+    t1 = _jsxs("span", {
+      onPointerEnter: t2,
+      onPointerLeave: t3,
+      style: {
+        position: "relative"
+      },
+      children: [_jsx(Button, {
+        buttonStyle: "ghost",
+        icon: _jsx(LinkIcon, {
+          size: 24
+        }),
+        id: "preview-button",
+        onClick: handleClick
+      }), _jsx(Tooltip, {
+        delay: 0,
+        show: hovered || copied,
+        children: label
+      })]
     });
-    $[0] = previewURL;
-    $[1] = t;
-    $[2] = t0;
+    $[2] = copied;
+    $[3] = handleClick;
+    $[4] = hovered;
+    $[5] = t;
+    $[6] = t1;
   } else {
-    t0 = $[2];
+    t1 = $[6];
   }
-  return t0;
+  return t1;
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ExternalLinkIcon","usePreviewURL","useTranslation","baseClass","PreviewButton","props","$","previewURL","t","t0","_jsx","className","href","id","target","title","children"],"sources":["../../../src/elements/PreviewButton/index.tsx"],"sourcesContent":["'use client'\nimport type { PreviewButtonClientProps } from 'payload'\n\nimport React from 'react'\n\nimport { ExternalLinkIcon } from '../../icons/ExternalLink/index.js'\nimport './index.scss'\nimport { usePreviewURL } from '../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nconst baseClass = 'preview-btn'\n\nexport function PreviewButton(props: PreviewButtonClientProps) {\n  const { previewURL } = usePreviewURL()\n  const { t } = useTranslation()\n\n  if (!previewURL) {\n    return null\n  }\n\n  return (\n    <a\n      aria-label={t('version:preview')}\n      className={baseClass}\n      href={previewURL}\n      id=\"preview-button\"\n      target=\"_blank\"\n      title={t('version:preview')}\n    >\n      <ExternalLinkIcon />\n    </a>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,gBAAgB,QAAQ;AACjC,OAAO;AACP,SAASC,aAAa,QAAQ;AAC9B,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,OAAO,SAAAC,cAAAC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACL;IAAAS;EAAA,IAAuBN,aAAA;EACvB;IAAAO;EAAA,IAAcN,cAAA;EAAA,KAETK,UAAA;IAAA;EAAA;EAAA,IAAAE,EAAA;EAAA,IAAAH,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAE,CAAA;IAKHC,EAAA,GAAAC,IAAA,CAAC;MAAA,cACaF,CAAA,CAAE;MAAAG,SAAA,EAAAR,SAAA;MAAAS,IAAA,EAERL,UAAA;MAAAM,EAAA,EACH;MAAAC,MAAA,EACI;MAAAC,KAAA,EACAP,CAAA,CAAE;MAAAQ,QAAA,EAETN,IAAA,CAAAV,gBAAA,IAAC;IAAA,C;;;;;;;SARHS,E","ignoreList":[]}
+{"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":[]}