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

@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.c2b57ce

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 (1262) hide show

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

@@ -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);
@@ -146,11 +148,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 +209,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,7 +233,8 @@ export const Popup = props => {
     }
     // /////////////////////////////////////
     // Initial Position
-    // Calculate and apply popup position immediately on open.
+    // Calculate and apply popup position.
+    // getBoundingClientRect() forces synchronous layout.
     // /////////////////////////////////////
     updatePosition();
     // /////////////////////////////////////
@@ -272,6 +285,7 @@ export const Popup = props => {
     className: buttonClassName,
     disabled: disabled,
     noBackground: noBackground,
+    renderButton: renderButton,
     setActive: setActive,
     size: buttonSize
   });
@@ -299,7 +313,7 @@ export const Popup = props => {
       // tests do not accidentally target inactive popups.
       `${baseClass}__hidden-content`,
       "data-popup-id": id || undefined,
-      "data-theme": "dark",
+      "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 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","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.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' \| '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 data-theme=\"dark\"\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","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":[]}

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

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

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

@@ -1,41 +1,88 @@
 '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, {
+        "aria-label": label,
+        buttonStyle: "ghost",
+        icon: _jsx(LinkIcon, {
+          size: 16
+        }),
+        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 CHANGED Viewed

	@@ -1 +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":[]}
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":[]}

package/dist/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"buildUpcomingColumns.d.ts","sourceRoot":"","sources":["../../../../src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEnD,OAAO,EAAkB,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAG1F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAM/C,KAAK,IAAI,GAAG;IACV,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC5C,IAAI,EAAE,aAAa,EAAE,CAAA;IACrB,IAAI,EAAE,UAAU,CAAA;IAChB,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;IAC1C,kBAAkB,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,oBAAoB,CAAC,CAAA;IAC5E,CAAC,EAAE,SAAS,CAAA;CACb,CAAA;AAED,eAAO,MAAM,oBAAoB,~~oFAQ9B~~,IAAI,KAAG,MAAM,EA4Gf,CAAA"}
1	+ {"version":3,"file":"buildUpcomingColumns.d.ts","sourceRoot":"","sources":["../../../../src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEnD,OAAO,EAAkB,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAG1F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAM/C,KAAK,IAAI,GAAG;IACV,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC5C,IAAI,EAAE,aAAa,EAAE,CAAA;IACrB,IAAI,EAAE,UAAU,CAAA;IAChB,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;IAC1C,kBAAkB,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,oBAAoB,CAAC,CAAA;IAC5E,CAAC,EAAE,SAAS,CAAA;CACb,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,iFAQlC,IAAI,KAAG,MAAM,EA4Gf,CAAA"}

package/dist/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.js CHANGED Viewed

@@ -104,7 +104,7 @@ export const buildUpcomingColumns = ({
       children: t('general:delete')
     }),
     renderedCells: docs.map(doc => /*#__PURE__*/_jsx(Button, {
-      buttonStyle: "icon-label",
+      buttonStyle: "ghost",
       className: "schedule-publish__delete",
       icon: "x",
       onClick: e => {

package/dist/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"buildUpcomingColumns.js","names":["getTranslation","React","formatDate","Button","Pill","buildUpcomingColumns","dateFormat","deleteHandler","docs","i18n","localization","supportedTimezones","t","columns","accessor","active","field","name","type","Heading","_jsx","renderedCells","map","doc","input","_jsxs","pillStyle","size","id","date","waitUntil","pattern","timezone","matchedTimezone","find","value","label","push","locale","matchedLocale","locales","code","buttonStyle","className","icon","onClick","e","preventDefault","tooltip"],"sources":["../../../../src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx"],"sourcesContent":["import type { ClientConfig, Column } from 'payload'\n\nimport { getTranslation, type I18nClient, type TFunction } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { UpcomingEvent } from './types.js'\n\nimport { formatDate } from '../../../utilities/formatDocTitle/formatDateTitle.js'\nimport { Button } from '../../Button/index.js'\nimport { Pill } from '../../Pill/index.js'\n\ntype Args = {\n dateFormat: string\n deleteHandler: (id: number \| string) => void\n docs: UpcomingEvent[]\n i18n: I18nClient\n localization: ClientConfig['localization']\n supportedTimezones: ClientConfig['admin']['timezones']['supportedTimezones']\n t: TFunction\n}\n\nexport const buildUpcomingColumns = ({\n dateFormat,\n deleteHandler,\n docs,\n i18n,\n localization,\n supportedTimezones,\n t,\n}: Args): Column[] => {\n const columns: Column[] = [\n {\n accessor: 'input.type',\n active: true,\n field: {\n name: '',\n type: 'text',\n },\n Heading: <span>{t('version:type')}</span>,\n renderedCells: docs.map((doc) => {\n const type = doc.input?.type\n\n return (\n <Pill key={doc.id} pillStyle={type === 'publish' ? 'success' : 'warning'} size=\"small\">\n {type === 'publish' && t('version:publish')}\n {type === 'unpublish' && t('version:unpublish')}\n </Pill>\n )\n }),\n },\n {\n accessor: 'waitUntil',\n active: true,\n field: {\n name: '',\n type: 'date',\n },\n Heading: <span>{t('general:time')}</span>,\n renderedCells: docs.map((doc) => (\n <span key={doc.id}>\n {formatDate({\n date: doc.waitUntil,\n i18n,\n pattern: dateFormat,\n timezone: doc.input.timezone,\n })}\n </span>\n )),\n },\n {\n accessor: 'input.timezone',\n active: true,\n field: {\n name: '',\n type: 'text',\n },\n Heading: <span>{t('general:timezone')}</span>,\n renderedCells: docs.map((doc) => {\n const matchedTimezone = supportedTimezones.find(\n (timezone) => timezone.value === doc.input.timezone,\n )\n\n const timezone = matchedTimezone?.label \|\| doc.input.timezone\n\n return <span key={doc.id}>{timezone \|\| t('general:noValue')}</span>\n }),\n },\n ]\n\n if (localization) {\n columns.push({\n accessor: 'input.locale',\n active: true,\n field: {\n name: '',\n type: 'text',\n },\n Heading: <span>{t('general:locale')}</span>,\n renderedCells: docs.map((doc) => {\n if (doc.input.locale) {\n const matchedLocale = localization.locales.find(\n (locale) => locale.code === doc.input.locale,\n )\n if (matchedLocale) {\n return <span key={doc.id}>{getTranslation(matchedLocale.label, i18n)}</span>\n }\n }\n\n return <span key={doc.id}>{t('general:all')}</span>\n }),\n })\n }\n\n columns.push({\n accessor: 'delete',\n active: true,\n field: {\n name: 'delete',\n type: 'text',\n },\n Heading: <span>{t('general:delete')}</span>,\n renderedCells: docs.map((doc) => (\n <Button\n buttonStyle=\"~~icon-label~~\"\n className=\"schedule-publish__delete\"\n icon=\"x\"\n key={doc.id}\n onClick={(e) => {\n e.preventDefault()\n deleteHandler(doc.id)\n }}\n tooltip={t('general:delete')}\n />\n )),\n })\n\n return columns\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"buildUpcomingColumns.js","names":["getTranslation","React","formatDate","Button","Pill","buildUpcomingColumns","dateFormat","deleteHandler","docs","i18n","localization","supportedTimezones","t","columns","accessor","active","field","name","type","Heading","_jsx","renderedCells","map","doc","input","_jsxs","pillStyle","size","id","date","waitUntil","pattern","timezone","matchedTimezone","find","value","label","push","locale","matchedLocale","locales","code","buttonStyle","className","icon","onClick","e","preventDefault","tooltip"],"sources":["../../../../src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx"],"sourcesContent":["import type { ClientConfig, Column } from 'payload'\n\nimport { getTranslation, type I18nClient, type TFunction } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { UpcomingEvent } from './types.js'\n\nimport { formatDate } from '../../../utilities/formatDocTitle/formatDateTitle.js'\nimport { Button } from '../../Button/index.js'\nimport { Pill } from '../../Pill/index.js'\n\ntype Args = {\n dateFormat: string\n deleteHandler: (id: number \| string) => void\n docs: UpcomingEvent[]\n i18n: I18nClient\n localization: ClientConfig['localization']\n supportedTimezones: ClientConfig['admin']['timezones']['supportedTimezones']\n t: TFunction\n}\n\nexport const buildUpcomingColumns = ({\n dateFormat,\n deleteHandler,\n docs,\n i18n,\n localization,\n supportedTimezones,\n t,\n}: Args): Column[] => {\n const columns: Column[] = [\n {\n accessor: 'input.type',\n active: true,\n field: {\n name: '',\n type: 'text',\n },\n Heading: <span>{t('version:type')}</span>,\n renderedCells: docs.map((doc) => {\n const type = doc.input?.type\n\n return (\n <Pill key={doc.id} pillStyle={type === 'publish' ? 'success' : 'warning'} size=\"small\">\n {type === 'publish' && t('version:publish')}\n {type === 'unpublish' && t('version:unpublish')}\n </Pill>\n )\n }),\n },\n {\n accessor: 'waitUntil',\n active: true,\n field: {\n name: '',\n type: 'date',\n },\n Heading: <span>{t('general:time')}</span>,\n renderedCells: docs.map((doc) => (\n <span key={doc.id}>\n {formatDate({\n date: doc.waitUntil,\n i18n,\n pattern: dateFormat,\n timezone: doc.input.timezone,\n })}\n </span>\n )),\n },\n {\n accessor: 'input.timezone',\n active: true,\n field: {\n name: '',\n type: 'text',\n },\n Heading: <span>{t('general:timezone')}</span>,\n renderedCells: docs.map((doc) => {\n const matchedTimezone = supportedTimezones.find(\n (timezone) => timezone.value === doc.input.timezone,\n )\n\n const timezone = matchedTimezone?.label \|\| doc.input.timezone\n\n return <span key={doc.id}>{timezone \|\| t('general:noValue')}</span>\n }),\n },\n ]\n\n if (localization) {\n columns.push({\n accessor: 'input.locale',\n active: true,\n field: {\n name: '',\n type: 'text',\n },\n Heading: <span>{t('general:locale')}</span>,\n renderedCells: docs.map((doc) => {\n if (doc.input.locale) {\n const matchedLocale = localization.locales.find(\n (locale) => locale.code === doc.input.locale,\n )\n if (matchedLocale) {\n return <span key={doc.id}>{getTranslation(matchedLocale.label, i18n)}</span>\n }\n }\n\n return <span key={doc.id}>{t('general:all')}</span>\n }),\n })\n }\n\n columns.push({\n accessor: 'delete',\n active: true,\n field: {\n name: 'delete',\n type: 'text',\n },\n Heading: <span>{t('general:delete')}</span>,\n renderedCells: docs.map((doc) => (\n <Button\n buttonStyle=\"ghost\"\n className=\"schedule-publish__delete\"\n icon=\"x\"\n key={doc.id}\n onClick={(e) => {\n e.preventDefault()\n deleteHandler(doc.id)\n }}\n tooltip={t('general:delete')}\n />\n )),\n })\n\n return columns\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/PublishButton/ScheduleDrawer/index.css ADDED Viewed

@@ -0,0 +1,35 @@
+@layer payload-default {
+  .schedule-publish__scheduler {
+    display: flex;
+    flex-direction: column;
+    padding: var(--spacer-2-5);
+    gap: var(--spacer-2-5);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+  }
+  .schedule-publish__section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+  .schedule-publish__type {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    gap: var(--spacer-2-5);
+  }
+  .schedule-publish__upcoming {
+    padding: var(--spacer-2-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2-5);
+  }
+  .schedule-publish__delete {
+    margin: 0;
+    padding: 0;
+  }
+}

package/dist/elements/PublishButton/ScheduleDrawer/index.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import type { SchedulePublish } from 'payload';
 import React from 'react';
 import type { PublishType } from './types.js';
-import './index.scss';
+import './index.css';
 type Props = {
     defaultType?: PublishType;
     schedulePublishConfig?: SchedulePublish;

package/dist/elements/PublishButton/ScheduleDrawer/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/PublishButton/ScheduleDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAU,eAAe,EAAS,MAAM,SAAS,CAAA;~~AAS7D~~,OAAO,KAA+B,MAAM,OAAO,CAAA;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,YAAY,CAAA;~~AAgB5D~~,OAAO,~~cAAc~~,CAAA;~~AASrB~~,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,qBAAqB,CAAC,EAAE,eAAe,CAAA;IACvC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,~~CA8U1C~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/PublishButton/ScheduleDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAU,eAAe,EAAS,MAAM,SAAS,CAAA;AAQ7D,OAAO,KAA+B,MAAM,OAAO,CAAA;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,YAAY,CAAA;AAe5D,OAAO,aAAa,CAAA;AASpB,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,qBAAqB,CAAC,EAAE,eAAe,CAAA;IACvC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkU1C,CAAA"}