@payloadcms/ui 3.71.0-canary.2 → 3.71.0-internal-debug.dea9d74

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","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","actionable","closest","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  buttonClassName?: string\n  buttonSize?: 'large' | 'medium' | 'small' | 'xsmall'\n  buttonType?: 'custom' | 'default' | 'none'\n  caret?: boolean\n  children?: React.ReactNode\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  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    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    // 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                    ]\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,"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  buttonClassName?: string\n  buttonSize?: 'large' | 'medium' | 'small' | 'xsmall'\n  buttonType?: 'custom' | 'default' | 'none'\n  caret?: boolean\n  children?: React.ReactNode\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  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    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    // 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                    ]\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"],"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","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","actionable","closest","requestAnimationFrame","firstFocusable","addEventListener","capture","passive","removeEventListener","undefined","Trigger","div","filter","Boolean","ref","onMouseEnter","onMouseLeave","role","tabIndex","data-popup-id","close","body"],"mappings":"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"}

package/dist/elements/PreviewButton/index.js

@@ -1,7 +1,5 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import { ExternalLinkIcon } from '../../icons/ExternalLink/index.js';
 import './index.scss';
@@ -9,33 +7,28 @@ import { usePreviewURL } from '../../providers/LivePreview/context.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 const baseClass = 'preview-btn';
 export function PreviewButton(props) {
-  const $ = _c(3);
-  const {
-    previewURL
-  } = usePreviewURL();
-  const {
-    t
-  } = useTranslation();
-  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, {})
-    });
-    $[0] = previewURL;
-    $[1] = t;
-    $[2] = t0;
-  } else {
-    t0 = $[2];
-  }
-  return t0;
+    const { previewURL } = usePreviewURL();
+    const { t } = useTranslation();
+    if (!previewURL) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsxDEV("a", {
+        "aria-label": t('version:preview'),
+        className: baseClass,
+        href: previewURL,
+        id: "preview-button",
+        target: "_blank",
+        title: t('version:preview'),
+        children: /*#__PURE__*/ _jsxDEV(ExternalLinkIcon, {}, void 0, false, {
+            fileName: "src/elements/PreviewButton/index.tsx",
+            lineNumber: 30,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/PreviewButton/index.tsx",
+        lineNumber: 22,
+        columnNumber: 5
+    }, this);
 }
+
 //# 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,"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"],"names":["React","ExternalLinkIcon","usePreviewURL","useTranslation","baseClass","PreviewButton","props","previewURL","t","a","aria-label","className","href","id","target","title"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,gBAAgB,QAAQ,oCAAmC;AACpE,OAAO,eAAc;AACrB,SAASC,aAAa,QAAQ,yCAAwC;AACtE,SAASC,cAAc,QAAQ,uCAAsC;AAErE,MAAMC,YAAY;AAElB,OAAO,SAASC,cAAcC,KAA+B;IAC3D,MAAM,EAAEC,UAAU,EAAE,GAAGL;IACvB,MAAM,EAAEM,CAAC,EAAE,GAAGL;IAEd,IAAI,CAACI,YAAY;QACf,OAAO;IACT;IAEA,qBACE,QAACE;QACCC,cAAYF,EAAE;QACdG,WAAWP;QACXQ,MAAML;QACNM,IAAG;QACHC,QAAO;QACPC,OAAOP,EAAE;kBAET,cAAA,QAACP;;;;;;;;;;AAGP"}

package/dist/elements/PreviewSizes/index.js

@@ -1,142 +1,216 @@
 'use client';
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { useEffect, useMemo, useState } from 'react';
 import { FileMeta } from '../FileDetails/FileMeta/index.js';
 import './index.scss';
 const baseClass = 'preview-sizes';
-const sortSizes = (sizes, imageSizes) => {
-  if (!imageSizes || imageSizes.length === 0) {
-    return sizes;
-  }
-  const orderedSizes = {};
-  imageSizes.forEach(({
-    name
-  }) => {
-    if (sizes[name]) {
-      orderedSizes[name] = sizes[name];
+const sortSizes = (sizes, imageSizes)=>{
+    if (!imageSizes || imageSizes.length === 0) {
+        return sizes;
     }
-  });
-  return orderedSizes;
+    const orderedSizes = {};
+    imageSizes.forEach(({ name })=>{
+        if (sizes[name]) {
+            orderedSizes[name] = sizes[name];
+        }
+    });
+    return orderedSizes;
 };
-const PreviewSizeCard = ({
-  name,
-  active,
-  alt,
-  meta,
-  onClick,
-  previewSrc
-}) => {
-  return /*#__PURE__*/_jsxs("div", {
-    className: [`${baseClass}__sizeOption`, active && `${baseClass}--selected`].filter(Boolean).join(' '),
-    onClick: typeof onClick === 'function' ? onClick : undefined,
-    onKeyDown: e => {
-      if (typeof onClick !== 'function') {
-        return;
-      }
-      if (e.key === 'Enter') {
-        onClick();
-      }
-    },
-    role: "button",
-    tabIndex: 0,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__image`,
-      children: /*#__PURE__*/_jsx("img", {
-        alt: alt,
-        src: previewSrc
-      })
-    }), /*#__PURE__*/_jsxs("div", {
-      className: `${baseClass}__sizeMeta`,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__sizeName`,
-        children: name
-      }), /*#__PURE__*/_jsx(FileMeta, {
-        ...meta
-      })]
-    })]
-  });
+const PreviewSizeCard = ({ name, active, alt, meta, onClick, previewSrc })=>{
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            `${baseClass}__sizeOption`,
+            active && `${baseClass}--selected`
+        ].filter(Boolean).join(' '),
+        onClick: typeof onClick === 'function' ? onClick : undefined,
+        onKeyDown: (e)=>{
+            if (typeof onClick !== 'function') {
+                return;
+            }
+            if (e.key === 'Enter') {
+                onClick();
+            }
+        },
+        role: "button",
+        tabIndex: 0,
+        children: [
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__image`,
+                children: /*#__PURE__*/ _jsxDEV("img", {
+                    alt: alt,
+                    src: previewSrc
+                }, void 0, false, {
+                    fileName: "src/elements/PreviewSizes/index.tsx",
+                    lineNumber: 68,
+                    columnNumber: 9
+                }, this)
+            }, void 0, false, {
+                fileName: "src/elements/PreviewSizes/index.tsx",
+                lineNumber: 67,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__sizeMeta`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__sizeName`,
+                        children: name
+                    }, void 0, false, {
+                        fileName: "src/elements/PreviewSizes/index.tsx",
+                        lineNumber: 71,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV(FileMeta, {
+                        ...meta
+                    }, void 0, false, {
+                        fileName: "src/elements/PreviewSizes/index.tsx",
+                        lineNumber: 72,
+                        columnNumber: 9
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/PreviewSizes/index.tsx",
+                lineNumber: 70,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/PreviewSizes/index.tsx",
+        lineNumber: 51,
+        columnNumber: 5
+    }, this);
 };
-export const PreviewSizes = ({
-  doc,
-  imageCacheTag,
-  uploadConfig
-}) => {
-  const {
-    imageSizes
-  } = uploadConfig;
-  const {
-    sizes
-  } = doc;
-  const alt = doc?.alt || doc.filename || '';
-  const [orderedSizes, setOrderedSizes] = useState(() => sortSizes(sizes, imageSizes));
-  const [selectedSize, setSelectedSize] = useState(null);
-  const generateImageUrl = doc_0 => {
-    if (!doc_0.filename) {
-      return null;
-    }
-    if (doc_0.url) {
-      return `${doc_0.url}${imageCacheTag ? `?${encodeURIComponent(imageCacheTag)}` : ''}`;
-    }
-  };
-  useEffect(() => {
-    setOrderedSizes(sortSizes(sizes, imageSizes));
-  }, [sizes, imageSizes, imageCacheTag]);
-  const mainPreviewSrc = selectedSize ? generateImageUrl(doc.sizes[selectedSize]) : generateImageUrl(doc);
-  const originalImage = useMemo(() => ({
-    filename: doc.filename,
-    filesize: doc.filesize,
-    height: doc.height,
-    mimeType: doc.mimeType,
-    url: doc.url,
-    width: doc.width
-  }), [doc]);
-  const originalFilename = 'Original';
-  return /*#__PURE__*/_jsxs("div", {
-    className: baseClass,
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: `${baseClass}__imageWrap`,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__meta`,
-        children: [/*#__PURE__*/_jsx("div", {
-          className: `${baseClass}__sizeName`,
-          children: selectedSize || originalFilename
-        }), /*#__PURE__*/_jsx(FileMeta, {
-          ...(selectedSize ? orderedSizes[selectedSize] : originalImage)
-        })]
-      }), /*#__PURE__*/_jsx("img", {
-        alt: alt,
-        className: `${baseClass}__preview`,
-        src: mainPreviewSrc
-      })]
-    }), /*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__listWrap`,
-      children: /*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__list`,
-        children: [/*#__PURE__*/_jsx(PreviewSizeCard, {
-          active: !selectedSize,
-          alt: alt,
-          meta: originalImage,
-          name: originalFilename,
-          onClick: () => setSelectedSize(null),
-          previewSrc: generateImageUrl(doc)
-        }), Object.entries(orderedSizes).map(([key, val]) => {
-          const selected = selectedSize === key;
-          const previewSrc = generateImageUrl(val);
-          if (previewSrc) {
-            return /*#__PURE__*/_jsx(PreviewSizeCard, {
-              active: selected,
-              alt: alt,
-              meta: val,
-              name: key,
-              onClick: () => setSelectedSize(key),
-              previewSrc: previewSrc
-            }, key);
-          }
-          return null;
-        })]
-      })
-    })]
-  });
+export const PreviewSizes = ({ doc, imageCacheTag, uploadConfig })=>{
+    const { imageSizes } = uploadConfig;
+    const { sizes } = doc;
+    const alt = doc?.alt || doc.filename || '';
+    const [orderedSizes, setOrderedSizes] = useState(()=>sortSizes(sizes, imageSizes));
+    const [selectedSize, setSelectedSize] = useState(null);
+    const generateImageUrl = (doc)=>{
+        if (!doc.filename) {
+            return null;
+        }
+        if (doc.url) {
+            return `${doc.url}${imageCacheTag ? `?${encodeURIComponent(imageCacheTag)}` : ''}`;
+        }
+    };
+    useEffect(()=>{
+        setOrderedSizes(sortSizes(sizes, imageSizes));
+    }, [
+        sizes,
+        imageSizes,
+        imageCacheTag
+    ]);
+    const mainPreviewSrc = selectedSize ? generateImageUrl(doc.sizes[selectedSize]) : generateImageUrl(doc);
+    const originalImage = useMemo(()=>({
+            filename: doc.filename,
+            filesize: doc.filesize,
+            height: doc.height,
+            mimeType: doc.mimeType,
+            url: doc.url,
+            width: doc.width
+        }), [
+        doc
+    ]);
+    const originalFilename = 'Original';
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__imageWrap`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__meta`,
+                        children: [
+                            /*#__PURE__*/ _jsxDEV("div", {
+                                className: `${baseClass}__sizeName`,
+                                children: selectedSize || originalFilename
+                            }, void 0, false, {
+                                fileName: "src/elements/PreviewSizes/index.tsx",
+                                lineNumber: 130,
+                                columnNumber: 11
+                            }, this),
+                            /*#__PURE__*/ _jsxDEV(FileMeta, {
+                                ...selectedSize ? orderedSizes[selectedSize] : originalImage
+                            }, void 0, false, {
+                                fileName: "src/elements/PreviewSizes/index.tsx",
+                                lineNumber: 131,
+                                columnNumber: 11
+                            }, this)
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/elements/PreviewSizes/index.tsx",
+                        lineNumber: 129,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("img", {
+                        alt: alt,
+                        className: `${baseClass}__preview`,
+                        src: mainPreviewSrc
+                    }, void 0, false, {
+                        fileName: "src/elements/PreviewSizes/index.tsx",
+                        lineNumber: 133,
+                        columnNumber: 9
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/PreviewSizes/index.tsx",
+                lineNumber: 128,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__listWrap`,
+                children: /*#__PURE__*/ _jsxDEV("div", {
+                    className: `${baseClass}__list`,
+                    children: [
+                        /*#__PURE__*/ _jsxDEV(PreviewSizeCard, {
+                            active: !selectedSize,
+                            alt: alt,
+                            meta: originalImage,
+                            name: originalFilename,
+                            onClick: ()=>setSelectedSize(null),
+                            previewSrc: generateImageUrl(doc)
+                        }, void 0, false, {
+                            fileName: "src/elements/PreviewSizes/index.tsx",
+                            lineNumber: 137,
+                            columnNumber: 11
+                        }, this),
+                        Object.entries(orderedSizes).map(([key, val])=>{
+                            const selected = selectedSize === key;
+                            const previewSrc = generateImageUrl(val);
+                            if (previewSrc) {
+                                return /*#__PURE__*/ _jsxDEV(PreviewSizeCard, {
+                                    active: selected,
+                                    alt: alt,
+                                    meta: val,
+                                    name: key,
+                                    onClick: ()=>setSelectedSize(key),
+                                    previewSrc: previewSrc
+                                }, key, false, {
+                                    fileName: "src/elements/PreviewSizes/index.tsx",
+                                    lineNumber: 152,
+                                    columnNumber: 17
+                                }, this);
+                            }
+                            return null;
+                        })
+                    ]
+                }, void 0, true, {
+                    fileName: "src/elements/PreviewSizes/index.tsx",
+                    lineNumber: 136,
+                    columnNumber: 9
+                }, this)
+            }, void 0, false, {
+                fileName: "src/elements/PreviewSizes/index.tsx",
+                lineNumber: 135,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/PreviewSizes/index.tsx",
+        lineNumber: 127,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map