@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal-debug.654e4ad

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

@@ -1,9 +1,10 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import './index.scss';
 const baseClass = 'popup-button';
 export const PopupTrigger = (props)=>{
-    const { active, button: button1, buttonType, className, disabled, noBackground, setActive, size } = props;
+    const { active, button, buttonType, className, disabled, noBackground, setActive, size } = props;
     const classes = [
         baseClass,
         className,
@@ -22,21 +23,40 @@ export const PopupTrigger = (props)=>{
         return null;
     }
     if (buttonType === 'custom') {
-        return <div className={classes} onClick={handleClick} onKeyDown={(e)=>{
+        return /*#__PURE__*/ _jsxDEV("div", {
+            className: classes,
+            onClick: handleClick,
+            onKeyDown: (e)=>{
+                if (e.key === 'Enter') {
+                    handleClick();
+                }
+            },
+            role: "button",
+            tabIndex: 0,
+            children: button
+        }, void 0, false, {
+            fileName: "src/elements/Popup/PopupTrigger/index.tsx",
+            lineNumber: 43,
+            columnNumber: 7
+        }, this);
+    }
+    return /*#__PURE__*/ _jsxDEV("button", {
+        className: classes,
+        disabled: disabled,
+        onClick: handleClick,
+        onKeyDown: (e)=>{
             if (e.key === 'Enter') {
                 handleClick();
             }
-        }} role="button" tabIndex={0}>
-        {button1}
-      </div>;
-    }
-    return <button className={classes} disabled={disabled} onClick={handleClick} onKeyDown={(e)=>{
-        if (e.key === 'Enter') {
-            handleClick();
-        }
-    }} tabIndex={0} type="button">
-      {button1}
-    </button>;
+        },
+        tabIndex: 0,
+        type: "button",
+        children: button
+    }, void 0, false, {
+        fileName: "src/elements/Popup/PopupTrigger/index.tsx",
+        lineNumber: 60,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-button'\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button: React.ReactNode\n  buttonType: 'custom' | 'default' | 'none'\n  className?: string\n  disabled?: boolean\n  noBackground?: boolean\n  setActive: (active: boolean) => void\n  size?: 'large' | 'medium' | 'small' | 'xsmall'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const { active, button, buttonType, className, disabled, noBackground, setActive, size } = props\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--${buttonType}`,\n    !noBackground && `${baseClass}--background`,\n    size && `${baseClass}--size-${size}`,\n    disabled && `${baseClass}--disabled`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick = React.useCallback(() => {\n    setActive(!active)\n  }, [active, setActive])\n\n  if (buttonType === 'none') {\n    return null\n  }\n\n  if (buttonType === 'custom') {\n    return (\n      <div\n        className={classes}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            handleClick()\n          }\n        }}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {button}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          handleClick()\n        }\n      }}\n      tabIndex={0}\n      type=\"button\"\n    >\n      {button}\n    </button>\n  )\n}\n"],"names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","disabled","noBackground","setActive","size","classes","filter","Boolean","join","handleClick","useCallback","div","onClick","onKeyDown","e","key","role","tabIndex","type"],"mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAEzB,OAAO,eAAc;AAErB,MAAMC,YAAY;AAalB,OAAO,MAAMC,eAA4C,CAACC;IACxD,MAAM,EAAEC,MAAM,EAAEC,QAAAA,OAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,SAAS,EAAEC,IAAI,EAAE,GAAGR;IAE3F,MAAMS,UAAU;QACdX;QACAM;QACA,GAAGN,UAAU,EAAE,EAAEK,YAAY;QAC7B,CAACG,gBAAgB,GAAGR,UAAU,YAAY,CAAC;QAC3CU,QAAQ,GAAGV,UAAU,OAAO,EAAEU,MAAM;QACpCH,YAAY,GAAGP,UAAU,UAAU,CAAC;KACrC,CACEY,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,MAAMC,cAAchB,MAAMiB,WAAW,CAAC;QACpCP,UAAU,CAACN;IACb,GAAG;QAACA;QAAQM;KAAU;IAEtB,IAAIJ,eAAe,QAAQ;QACzB,OAAO;IACT;IAEA,IAAIA,eAAe,UAAU;QAC3B,QACGY,IACCX,WAAWK,SACXO,SAASH,aACTI,WAAW,CAACC;YACV,IAAIA,EAAEC,GAAG,KAAK,SAAS;gBACrBN;YACF;QACF,GACAO,KAAK,SACLC,UAAU,GACX;QACC,CAACnB,QAAO;MACV,EAAEa;IAEN;IAEA,QACGb,OACCE,WAAWK,SACXJ,UAAUA,UACVW,SAASH,aACTI,WAAW,CAACC;QACV,IAAIA,EAAEC,GAAG,KAAK,SAAS;YACrBN;QACF;IACF,GACAQ,UAAU,GACVC,KAAK,SACN;MACC,CAACpB,QAAO;IACV,EAAEA;AAEN,EAAC"}
+{"version":3,"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-button'\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button: React.ReactNode\n  buttonType: 'custom' | 'default' | 'none'\n  className?: string\n  disabled?: boolean\n  noBackground?: boolean\n  setActive: (active: boolean) => void\n  size?: 'large' | 'medium' | 'small' | 'xsmall'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const { active, button, buttonType, className, disabled, noBackground, setActive, size } = props\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--${buttonType}`,\n    !noBackground && `${baseClass}--background`,\n    size && `${baseClass}--size-${size}`,\n    disabled && `${baseClass}--disabled`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick = React.useCallback(() => {\n    setActive(!active)\n  }, [active, setActive])\n\n  if (buttonType === 'none') {\n    return null\n  }\n\n  if (buttonType === 'custom') {\n    return (\n      <div\n        className={classes}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            handleClick()\n          }\n        }}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {button}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          handleClick()\n        }\n      }}\n      tabIndex={0}\n      type=\"button\"\n    >\n      {button}\n    </button>\n  )\n}\n"],"names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","disabled","noBackground","setActive","size","classes","filter","Boolean","join","handleClick","useCallback","div","onClick","onKeyDown","e","key","role","tabIndex","type"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,OAAO,eAAc;AAErB,MAAMC,YAAY;AAalB,OAAO,MAAMC,eAA4C,CAACC;IACxD,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,SAAS,EAAEC,IAAI,EAAE,GAAGR;IAE3F,MAAMS,UAAU;QACdX;QACAM;QACA,GAAGN,UAAU,EAAE,EAAEK,YAAY;QAC7B,CAACG,gBAAgB,GAAGR,UAAU,YAAY,CAAC;QAC3CU,QAAQ,GAAGV,UAAU,OAAO,EAAEU,MAAM;QACpCH,YAAY,GAAGP,UAAU,UAAU,CAAC;KACrC,CACEY,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,MAAMC,cAAchB,MAAMiB,WAAW,CAAC;QACpCP,UAAU,CAACN;IACb,GAAG;QAACA;QAAQM;KAAU;IAEtB,IAAIJ,eAAe,QAAQ;QACzB,OAAO;IACT;IAEA,IAAIA,eAAe,UAAU;QAC3B,qBACE,QAACY;YACCX,WAAWK;YACXO,SAASH;YACTI,WAAW,CAACC;gBACV,IAAIA,EAAEC,GAAG,KAAK,SAAS;oBACrBN;gBACF;YACF;YACAO,MAAK;YACLC,UAAU;sBAETnB;;;;;;IAGP;IAEA,qBACE,QAACA;QACCE,WAAWK;QACXJ,UAAUA;QACVW,SAASH;QACTI,WAAW,CAACC;YACV,IAAIA,EAAEC,GAAG,KAAK,SAAS;gBACrBN;YACF;QACF;QACAQ,UAAU;QACVC,MAAK;kBAEJpB;;;;;;AAGP,EAAC"}

package/dist/elements/Popup/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 export * as PopupList from './PopupButtonList/index.js';
 import { useWindowInfo } from '@faceless-ui/window-info';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -118,46 +119,107 @@ export const Popup = (props)=>{
         active && `${baseClass}--active`,
         showScrollbar && `${baseClass}--show-scrollbar`
     ].filter(Boolean).join(' ');
-    return <div className={classes} id={id}>
-      <div className={`${baseClass}__trigger-wrap`} ref={triggerRef}>
-        {showOnHover ? <div className={`${baseClass}__on-hover-watch`} onMouseEnter={()=>setActive(true)} onMouseLeave={()=>setActive(false)} role="button" tabIndex={0}>
-            <PopupTrigger {...{
-        active,
-        button,
-        buttonType,
-        className: buttonClassName,
-        disabled,
-        noBackground,
-        setActive,
-        size: buttonSize
-    }}/>
-          </div> : <PopupTrigger {...{
-        active,
-        button,
-        buttonType,
-        className: buttonClassName,
-        disabled,
-        noBackground,
-        setActive,
-        size: buttonSize
-    }}/>}
-      </div>
-
-      <div className={`${baseClass}__content`} ref={contentRef}>
-        <div className={`${baseClass}__hide-scrollbar`} ref={intersectionRef}>
-          <div className={`${baseClass}__scroll-container`}>
-            <div className={`${baseClass}__scroll-content`}>
-              {render && render({
-        close: ()=>setActive(false)
-    })}
-              {children}
-            </div>
-          </div>
-        </div>
-
-        {caret && <div className={`${baseClass}__caret`}/>}
-      </div>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: classes,
+        id: id,
+        children: [
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__trigger-wrap`,
+                ref: triggerRef,
+                children: showOnHover ? /*#__PURE__*/ _jsxDEV("div", {
+                    className: `${baseClass}__on-hover-watch`,
+                    onMouseEnter: ()=>setActive(true),
+                    onMouseLeave: ()=>setActive(false),
+                    role: "button",
+                    tabIndex: 0,
+                    children: /*#__PURE__*/ _jsxDEV(PopupTrigger, {
+                        active,
+                        button,
+                        buttonType,
+                        className: buttonClassName,
+                        disabled,
+                        noBackground,
+                        setActive,
+                        size: buttonSize
+                    }, void 0, false, {
+                        fileName: "src/elements/Popup/index.tsx",
+                        lineNumber: 196,
+                        columnNumber: 13
+                    }, this)
+                }, void 0, false, {
+                    fileName: "src/elements/Popup/index.tsx",
+                    lineNumber: 189,
+                    columnNumber: 11
+                }, this) : /*#__PURE__*/ _jsxDEV(PopupTrigger, {
+                    active,
+                    button,
+                    buttonType,
+                    className: buttonClassName,
+                    disabled,
+                    noBackground,
+                    setActive,
+                    size: buttonSize
+                }, void 0, false, {
+                    fileName: "src/elements/Popup/index.tsx",
+                    lineNumber: 210,
+                    columnNumber: 11
+                }, this)
+            }, void 0, false, {
+                fileName: "src/elements/Popup/index.tsx",
+                lineNumber: 187,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__content`,
+                ref: contentRef,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__hide-scrollbar`,
+                        ref: intersectionRef,
+                        children: /*#__PURE__*/ _jsxDEV("div", {
+                            className: `${baseClass}__scroll-container`,
+                            children: /*#__PURE__*/ _jsxDEV("div", {
+                                className: `${baseClass}__scroll-content`,
+                                children: [
+                                    render && render({
+                                        close: ()=>setActive(false)
+                                    }),
+                                    children
+                                ]
+                            }, void 0, true, {
+                                fileName: "src/elements/Popup/index.tsx",
+                                lineNumber: 228,
+                                columnNumber: 13
+                            }, this)
+                        }, void 0, false, {
+                            fileName: "src/elements/Popup/index.tsx",
+                            lineNumber: 227,
+                            columnNumber: 11
+                        }, this)
+                    }, void 0, false, {
+                        fileName: "src/elements/Popup/index.tsx",
+                        lineNumber: 226,
+                        columnNumber: 9
+                    }, this),
+                    caret && /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__caret`
+                    }, void 0, false, {
+                        fileName: "src/elements/Popup/index.tsx",
+                        lineNumber: 235,
+                        columnNumber: 19
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/Popup/index.tsx",
+                lineNumber: 225,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/Popup/index.tsx",
+        lineNumber: 186,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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 { useWindowInfo } from '@faceless-ui/window-info'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport { PopupTrigger } from './PopupTrigger/index.js'\nimport './index.scss'\n\nconst baseClass = 'popup'\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  forceOpen?: boolean\n  horizontalAlign?: 'center' | 'left' | 'right'\n  id?: string\n  initActive?: boolean\n  noBackground?: boolean\n  onToggleClose?: () => void\n  onToggleOpen?: (active: boolean) => void\n  render?: (any) => React.ReactNode\n  showOnHover?: boolean\n  showScrollbar?: boolean\n  size?: 'fit-content' | 'large' | 'medium' | 'small'\n  verticalAlign?: 'bottom' | 'top'\n}\n\nexport const Popup: React.FC<PopupProps> = (props) => {\n  const {\n    id,\n    boundingRef,\n    button,\n    buttonClassName,\n    buttonSize,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    disabled,\n    forceOpen,\n    horizontalAlign: horizontalAlignFromProps = 'left',\n    initActive = false,\n    noBackground,\n    onToggleClose,\n    onToggleOpen,\n    render,\n    showOnHover = false,\n    showScrollbar = false,\n    size = 'medium',\n    verticalAlign: verticalAlignFromProps = 'top',\n  } = props\n  const { height: windowHeight, width: windowWidth } = useWindowInfo()\n\n  const [intersectionRef, intersectionEntry] = useIntersect({\n    root: boundingRef?.current || null,\n    rootMargin: '-100px 0px 0px 0px',\n    threshold: 1,\n  })\n\n  const contentRef = useRef(null)\n  const triggerRef = useRef(null)\n  const [active, setActive_Internal] = useState(initActive)\n  const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps)\n  const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps)\n\n  const setActive = React.useCallback(\n    (active: boolean) => {\n      if (active && typeof onToggleOpen === 'function') {\n        onToggleOpen(true)\n      }\n      if (!active && typeof onToggleClose === 'function') {\n        onToggleClose()\n      }\n      setActive_Internal(active)\n    },\n    [onToggleClose, onToggleOpen],\n  )\n\n  const setPosition = useCallback(\n    ({ horizontal = false, vertical = false }) => {\n      if (contentRef.current) {\n        const bounds = contentRef.current.getBoundingClientRect()\n\n        const {\n          bottom: contentBottomPos,\n          left: contentLeftPos,\n          right: contentRightPos,\n          top: contentTopPos,\n        } = bounds\n\n        let boundingTopPos = 100\n        let boundingRightPos = document.documentElement.clientWidth\n        let boundingBottomPos = document.documentElement.clientHeight\n        let boundingLeftPos = 0\n\n        if (boundingRef?.current) {\n          ;({\n            bottom: boundingBottomPos,\n            left: boundingLeftPos,\n            right: boundingRightPos,\n            top: boundingTopPos,\n          } = boundingRef.current.getBoundingClientRect())\n        }\n\n        if (horizontal) {\n          if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {\n            setHorizontalAlign('right')\n          } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {\n            setHorizontalAlign('left')\n          }\n        }\n\n        if (vertical) {\n          if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {\n            setVerticalAlign('bottom')\n          } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {\n            setVerticalAlign('top')\n          }\n        }\n      }\n    },\n    [boundingRef],\n  )\n\n  const handleClickOutside = useCallback(\n    (e) => {\n      if (contentRef.current.contains(e.target) || triggerRef.current.contains(e.target)) {\n        return\n      }\n\n      setActive(false)\n    },\n    [contentRef, setActive],\n  )\n\n  useEffect(() => {\n    setPosition({ horizontal: true })\n  }, [intersectionEntry, setPosition, windowWidth])\n\n  useEffect(() => {\n    setPosition({ vertical: true })\n  }, [intersectionEntry, setPosition, windowHeight])\n\n  useEffect(() => {\n    if (active) {\n      document.addEventListener('mousedown', handleClickOutside)\n    } else {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [active, handleClickOutside, onToggleOpen])\n\n  useEffect(() => {\n    setActive(forceOpen)\n  }, [forceOpen, setActive])\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--size-${size}`,\n    buttonSize && `${baseClass}--button-size-${buttonSize}`,\n    `${baseClass}--v-align-${verticalAlign}`,\n    `${baseClass}--h-align-${horizontalAlign}`,\n    active && `${baseClass}--active`,\n    showScrollbar && `${baseClass}--show-scrollbar`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={classes} 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            <PopupTrigger\n              {...{\n                active,\n                button,\n                buttonType,\n                className: buttonClassName,\n                disabled,\n                noBackground,\n                setActive,\n                size: buttonSize,\n              }}\n            />\n          </div>\n        ) : (\n          <PopupTrigger\n            {...{\n              active,\n              button,\n              buttonType,\n              className: buttonClassName,\n              disabled,\n              noBackground,\n              setActive,\n              size: buttonSize,\n            }}\n          />\n        )}\n      </div>\n\n      <div className={`${baseClass}__content`} ref={contentRef}>\n        <div className={`${baseClass}__hide-scrollbar`} ref={intersectionRef}>\n          <div className={`${baseClass}__scroll-container`}>\n            <div className={`${baseClass}__scroll-content`}>\n              {render && render({ close: () => setActive(false) })}\n              {children}\n            </div>\n          </div>\n        </div>\n\n        {caret && <div className={`${baseClass}__caret`} />}\n      </div>\n    </div>\n  )\n}\n"],"names":["PopupList","useWindowInfo","React","useCallback","useEffect","useRef","useState","useIntersect","PopupTrigger","baseClass","Popup","props","id","boundingRef","button","buttonClassName","buttonSize","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","horizontalAlignFromProps","initActive","noBackground","onToggleClose","onToggleOpen","render","showOnHover","showScrollbar","size","verticalAlign","verticalAlignFromProps","height","windowHeight","width","windowWidth","intersectionRef","intersectionEntry","root","current","rootMargin","threshold","contentRef","triggerRef","active","setActive_Internal","setVerticalAlign","setHorizontalAlign","setActive","setPosition","horizontal","vertical","bounds","getBoundingClientRect","bottom","contentBottomPos","left","contentLeftPos","right","contentRightPos","top","contentTopPos","boundingTopPos","boundingRightPos","document","documentElement","clientWidth","boundingBottomPos","clientHeight","boundingLeftPos","handleClickOutside","e","contains","target","addEventListener","removeEventListener","classes","filter","Boolean","join","div","ref","onMouseEnter","onMouseLeave","role","tabIndex","close"],"mappings":"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"}
+{"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 { useWindowInfo } from '@faceless-ui/window-info'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport { PopupTrigger } from './PopupTrigger/index.js'\nimport './index.scss'\n\nconst baseClass = 'popup'\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  forceOpen?: boolean\n  horizontalAlign?: 'center' | 'left' | 'right'\n  id?: string\n  initActive?: boolean\n  noBackground?: boolean\n  onToggleClose?: () => void\n  onToggleOpen?: (active: boolean) => void\n  render?: (any) => React.ReactNode\n  showOnHover?: boolean\n  showScrollbar?: boolean\n  size?: 'fit-content' | 'large' | 'medium' | 'small'\n  verticalAlign?: 'bottom' | 'top'\n}\n\nexport const Popup: React.FC<PopupProps> = (props) => {\n  const {\n    id,\n    boundingRef,\n    button,\n    buttonClassName,\n    buttonSize,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    disabled,\n    forceOpen,\n    horizontalAlign: horizontalAlignFromProps = 'left',\n    initActive = false,\n    noBackground,\n    onToggleClose,\n    onToggleOpen,\n    render,\n    showOnHover = false,\n    showScrollbar = false,\n    size = 'medium',\n    verticalAlign: verticalAlignFromProps = 'top',\n  } = props\n  const { height: windowHeight, width: windowWidth } = useWindowInfo()\n\n  const [intersectionRef, intersectionEntry] = useIntersect({\n    root: boundingRef?.current || null,\n    rootMargin: '-100px 0px 0px 0px',\n    threshold: 1,\n  })\n\n  const contentRef = useRef(null)\n  const triggerRef = useRef(null)\n  const [active, setActive_Internal] = useState(initActive)\n  const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps)\n  const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps)\n\n  const setActive = React.useCallback(\n    (active: boolean) => {\n      if (active && typeof onToggleOpen === 'function') {\n        onToggleOpen(true)\n      }\n      if (!active && typeof onToggleClose === 'function') {\n        onToggleClose()\n      }\n      setActive_Internal(active)\n    },\n    [onToggleClose, onToggleOpen],\n  )\n\n  const setPosition = useCallback(\n    ({ horizontal = false, vertical = false }) => {\n      if (contentRef.current) {\n        const bounds = contentRef.current.getBoundingClientRect()\n\n        const {\n          bottom: contentBottomPos,\n          left: contentLeftPos,\n          right: contentRightPos,\n          top: contentTopPos,\n        } = bounds\n\n        let boundingTopPos = 100\n        let boundingRightPos = document.documentElement.clientWidth\n        let boundingBottomPos = document.documentElement.clientHeight\n        let boundingLeftPos = 0\n\n        if (boundingRef?.current) {\n          ;({\n            bottom: boundingBottomPos,\n            left: boundingLeftPos,\n            right: boundingRightPos,\n            top: boundingTopPos,\n          } = boundingRef.current.getBoundingClientRect())\n        }\n\n        if (horizontal) {\n          if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {\n            setHorizontalAlign('right')\n          } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {\n            setHorizontalAlign('left')\n          }\n        }\n\n        if (vertical) {\n          if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {\n            setVerticalAlign('bottom')\n          } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {\n            setVerticalAlign('top')\n          }\n        }\n      }\n    },\n    [boundingRef],\n  )\n\n  const handleClickOutside = useCallback(\n    (e) => {\n      if (contentRef.current.contains(e.target) || triggerRef.current.contains(e.target)) {\n        return\n      }\n\n      setActive(false)\n    },\n    [contentRef, setActive],\n  )\n\n  useEffect(() => {\n    setPosition({ horizontal: true })\n  }, [intersectionEntry, setPosition, windowWidth])\n\n  useEffect(() => {\n    setPosition({ vertical: true })\n  }, [intersectionEntry, setPosition, windowHeight])\n\n  useEffect(() => {\n    if (active) {\n      document.addEventListener('mousedown', handleClickOutside)\n    } else {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [active, handleClickOutside, onToggleOpen])\n\n  useEffect(() => {\n    setActive(forceOpen)\n  }, [forceOpen, setActive])\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--size-${size}`,\n    buttonSize && `${baseClass}--button-size-${buttonSize}`,\n    `${baseClass}--v-align-${verticalAlign}`,\n    `${baseClass}--h-align-${horizontalAlign}`,\n    active && `${baseClass}--active`,\n    showScrollbar && `${baseClass}--show-scrollbar`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div className={classes} 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            <PopupTrigger\n              {...{\n                active,\n                button,\n                buttonType,\n                className: buttonClassName,\n                disabled,\n                noBackground,\n                setActive,\n                size: buttonSize,\n              }}\n            />\n          </div>\n        ) : (\n          <PopupTrigger\n            {...{\n              active,\n              button,\n              buttonType,\n              className: buttonClassName,\n              disabled,\n              noBackground,\n              setActive,\n              size: buttonSize,\n            }}\n          />\n        )}\n      </div>\n\n      <div className={`${baseClass}__content`} ref={contentRef}>\n        <div className={`${baseClass}__hide-scrollbar`} ref={intersectionRef}>\n          <div className={`${baseClass}__scroll-container`}>\n            <div className={`${baseClass}__scroll-content`}>\n              {render && render({ close: () => setActive(false) })}\n              {children}\n            </div>\n          </div>\n        </div>\n\n        {caret && <div className={`${baseClass}__caret`} />}\n      </div>\n    </div>\n  )\n}\n"],"names":["PopupList","useWindowInfo","React","useCallback","useEffect","useRef","useState","useIntersect","PopupTrigger","baseClass","Popup","props","id","boundingRef","button","buttonClassName","buttonSize","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","horizontalAlignFromProps","initActive","noBackground","onToggleClose","onToggleOpen","render","showOnHover","showScrollbar","size","verticalAlign","verticalAlignFromProps","height","windowHeight","width","windowWidth","intersectionRef","intersectionEntry","root","current","rootMargin","threshold","contentRef","triggerRef","active","setActive_Internal","setVerticalAlign","setHorizontalAlign","setActive","setPosition","horizontal","vertical","bounds","getBoundingClientRect","bottom","contentBottomPos","left","contentLeftPos","right","contentRightPos","top","contentTopPos","boundingTopPos","boundingRightPos","document","documentElement","clientWidth","boundingBottomPos","clientHeight","boundingLeftPos","handleClickOutside","e","contains","target","addEventListener","removeEventListener","classes","filter","Boolean","join","div","ref","onMouseEnter","onMouseLeave","role","tabIndex","close"],"mappings":"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"}

package/dist/elements/PreviewButton/index.js

@@ -1,4 +1,6 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React from 'react';
 import { ExternalLinkIcon } from '../../icons/ExternalLink/index.js';
 import './index.scss';
 import { usePreviewURL } from '../../providers/LivePreview/context.js';
@@ -10,9 +12,23 @@ export function PreviewButton(props) {
     if (!previewURL) {
         return null;
     }
-    return <a aria-label={t('version:preview')} className={baseClass} href={previewURL} id="preview-button" target="_blank" title={t('version:preview')}>
-      <ExternalLinkIcon/>
-    </a>;
+    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,"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":["ExternalLinkIcon","usePreviewURL","useTranslation","baseClass","PreviewButton","props","previewURL","t","a","aria-label","className","href","id","target","title"],"mappings":"AAAA;AAKA,SAASA,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,QACGE,EACCC,YAAYF,EAAE,oBACdG,WAAWP,WACXQ,MAAML,YACNM,GAAG,iBACHC,OAAO,SACPC,OAAOP,EAAE,oBACV;MACC,CAACP,kBAAmB;IACtB,EAAEQ;AAEN"}
+{"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,5 +1,6 @@
 'use client';
-import { useEffect, useMemo, useState } from 'react';
+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';
@@ -16,25 +17,68 @@ const sortSizes = (sizes, imageSizes)=>{
     return orderedSizes;
 };
 const PreviewSizeCard = ({ name, active, meta, onClick, previewSrc })=>{
-    return <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}>
-      <div className={`${baseClass}__image`}>
-        <img alt={meta.filename} src={previewSrc}/>
-      </div>
-      <div className={`${baseClass}__sizeMeta`}>
-        <div className={`${baseClass}__sizeName`}>{name}</div>
-        <FileMeta {...meta}/>
-      </div>
-    </div>;
+    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: meta.filename,
+                    src: previewSrc
+                }, void 0, false, {
+                    fileName: "src/elements/PreviewSizes/index.tsx",
+                    lineNumber: 66,
+                    columnNumber: 9
+                }, this)
+            }, void 0, false, {
+                fileName: "src/elements/PreviewSizes/index.tsx",
+                lineNumber: 65,
+                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: 69,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV(FileMeta, {
+                        ...meta
+                    }, void 0, false, {
+                        fileName: "src/elements/PreviewSizes/index.tsx",
+                        lineNumber: 70,
+                        columnNumber: 9
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/PreviewSizes/index.tsx",
+                lineNumber: 68,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/PreviewSizes/index.tsx",
+        lineNumber: 49,
+        columnNumber: 5
+    }, this);
 };
 export const PreviewSizes = ({ doc, imageCacheTag, uploadConfig })=>{
     const { imageSizes } = uploadConfig;
@@ -68,29 +112,102 @@ export const PreviewSizes = ({ doc, imageCacheTag, uploadConfig })=>{
         doc
     ]);
     const originalFilename = 'Original';
-    return <div className={baseClass}>
-      <div className={`${baseClass}__imageWrap`}>
-        <div className={`${baseClass}__meta`}>
-          <div className={`${baseClass}__sizeName`}>{selectedSize || originalFilename}</div>
-          <FileMeta {...selectedSize ? orderedSizes[selectedSize] : originalImage}/>
-        </div>
-        <img alt={doc.filename} className={`${baseClass}__preview`} src={mainPreviewSrc}/>
-      </div>
-      <div className={`${baseClass}__listWrap`}>
-        <div className={`${baseClass}__list`}>
-          <PreviewSizeCard active={!selectedSize} 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 <PreviewSizeCard active={selected} key={key} meta={val} name={key} onClick={()=>setSelectedSize(key)} previewSrc={previewSrc}/>;
-        }
-        return null;
-    })}
-        </div>
-      </div>
-    </div>;
+    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: 126,
+                                columnNumber: 11
+                            }, this),
+                            /*#__PURE__*/ _jsxDEV(FileMeta, {
+                                ...selectedSize ? orderedSizes[selectedSize] : originalImage
+                            }, void 0, false, {
+                                fileName: "src/elements/PreviewSizes/index.tsx",
+                                lineNumber: 127,
+                                columnNumber: 11
+                            }, this)
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/elements/PreviewSizes/index.tsx",
+                        lineNumber: 125,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("img", {
+                        alt: doc.filename,
+                        className: `${baseClass}__preview`,
+                        src: mainPreviewSrc
+                    }, void 0, false, {
+                        fileName: "src/elements/PreviewSizes/index.tsx",
+                        lineNumber: 129,
+                        columnNumber: 9
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/PreviewSizes/index.tsx",
+                lineNumber: 124,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__listWrap`,
+                children: /*#__PURE__*/ _jsxDEV("div", {
+                    className: `${baseClass}__list`,
+                    children: [
+                        /*#__PURE__*/ _jsxDEV(PreviewSizeCard, {
+                            active: !selectedSize,
+                            meta: originalImage,
+                            name: originalFilename,
+                            onClick: ()=>setSelectedSize(null),
+                            previewSrc: generateImageUrl(doc)
+                        }, void 0, false, {
+                            fileName: "src/elements/PreviewSizes/index.tsx",
+                            lineNumber: 133,
+                            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,
+                                    meta: val,
+                                    name: key,
+                                    onClick: ()=>setSelectedSize(key),
+                                    previewSrc: previewSrc
+                                }, key, false, {
+                                    fileName: "src/elements/PreviewSizes/index.tsx",
+                                    lineNumber: 147,
+                                    columnNumber: 17
+                                }, this);
+                            }
+                            return null;
+                        })
+                    ]
+                }, void 0, true, {
+                    fileName: "src/elements/PreviewSizes/index.tsx",
+                    lineNumber: 132,
+                    columnNumber: 9
+                }, this)
+            }, void 0, false, {
+                fileName: "src/elements/PreviewSizes/index.tsx",
+                lineNumber: 131,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/PreviewSizes/index.tsx",
+        lineNumber: 123,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/PreviewSizes/index.tsx"],"sourcesContent":["'use client'\nimport type { Data, FileSize, SanitizedCollectionConfig, SanitizedUploadConfig } from 'payload'\n\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { FileMeta } from '../FileDetails/FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'preview-sizes'\n\ntype FileInfo = {\n  url: string\n} & FileSize\ntype FilesSizesWithUrl = {\n  [key: string]: FileInfo\n}\n\nconst sortSizes = (sizes: FilesSizesWithUrl, imageSizes: SanitizedUploadConfig['imageSizes']) => {\n  if (!imageSizes || imageSizes.length === 0) {\n    return sizes\n  }\n\n  const orderedSizes: FilesSizesWithUrl = {}\n\n  imageSizes.forEach(({ name }) => {\n    if (sizes[name]) {\n      orderedSizes[name] = sizes[name]\n    }\n  })\n\n  return orderedSizes\n}\n\ntype PreviewSizeCardProps = {\n  active: boolean\n  meta: FileInfo\n  name: string\n  onClick?: () => void\n  previewSrc: string\n}\nconst PreviewSizeCard: React.FC<PreviewSizeCardProps> = ({\n  name,\n  active,\n  meta,\n  onClick,\n  previewSrc,\n}) => {\n  return (\n    <div\n      className={[`${baseClass}__sizeOption`, active && `${baseClass}--selected`]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={typeof onClick === 'function' ? onClick : undefined}\n      onKeyDown={(e) => {\n        if (typeof onClick !== 'function') {\n          return\n        }\n        if (e.key === 'Enter') {\n          onClick()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <div className={`${baseClass}__image`}>\n        <img alt={meta.filename} src={previewSrc} />\n      </div>\n      <div className={`${baseClass}__sizeMeta`}>\n        <div className={`${baseClass}__sizeName`}>{name}</div>\n        <FileMeta {...meta} />\n      </div>\n    </div>\n  )\n}\n\nexport type PreviewSizesProps = {\n  doc: {\n    sizes?: FilesSizesWithUrl\n  } & Data\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const PreviewSizes: React.FC<PreviewSizesProps> = ({ doc, imageCacheTag, uploadConfig }) => {\n  const { imageSizes } = uploadConfig\n  const { sizes } = doc\n\n  const [orderedSizes, setOrderedSizes] = useState<FilesSizesWithUrl>(() =>\n    sortSizes(sizes, imageSizes),\n  )\n  const [selectedSize, setSelectedSize] = useState<null | string>(null)\n\n  const generateImageUrl = (doc) => {\n    if (!doc.filename) {\n      return null\n    }\n    if (doc.url) {\n      return `${doc.url}${imageCacheTag ? `?${encodeURIComponent(imageCacheTag)}` : ''}`\n    }\n  }\n  useEffect(() => {\n    setOrderedSizes(sortSizes(sizes, imageSizes))\n  }, [sizes, imageSizes, imageCacheTag])\n\n  const mainPreviewSrc = selectedSize\n    ? generateImageUrl(doc.sizes[selectedSize])\n    : generateImageUrl(doc)\n\n  const originalImage = useMemo(\n    (): FileInfo => ({\n      filename: doc.filename,\n      filesize: doc.filesize,\n      height: doc.height,\n      mimeType: doc.mimeType,\n      url: doc.url,\n      width: doc.width,\n    }),\n    [doc],\n  )\n  const originalFilename = 'Original'\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__imageWrap`}>\n        <div className={`${baseClass}__meta`}>\n          <div className={`${baseClass}__sizeName`}>{selectedSize || originalFilename}</div>\n          <FileMeta {...(selectedSize ? orderedSizes[selectedSize] : originalImage)} />\n        </div>\n        <img alt={doc.filename} className={`${baseClass}__preview`} src={mainPreviewSrc} />\n      </div>\n      <div className={`${baseClass}__listWrap`}>\n        <div className={`${baseClass}__list`}>\n          <PreviewSizeCard\n            active={!selectedSize}\n            meta={originalImage}\n            name={originalFilename}\n            onClick={() => setSelectedSize(null)}\n            previewSrc={generateImageUrl(doc)}\n          />\n\n          {Object.entries(orderedSizes).map(([key, val]) => {\n            const selected = selectedSize === key\n            const previewSrc = generateImageUrl(val)\n\n            if (previewSrc) {\n              return (\n                <PreviewSizeCard\n                  active={selected}\n                  key={key}\n                  meta={val}\n                  name={key}\n                  onClick={() => setSelectedSize(key)}\n                  previewSrc={previewSrc}\n                />\n              )\n            }\n\n            return null\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["useEffect","useMemo","useState","FileMeta","baseClass","sortSizes","sizes","imageSizes","length","orderedSizes","forEach","name","PreviewSizeCard","active","meta","onClick","previewSrc","div","className","filter","Boolean","join","undefined","onKeyDown","e","key","role","tabIndex","img","alt","filename","src","PreviewSizes","doc","imageCacheTag","uploadConfig","setOrderedSizes","selectedSize","setSelectedSize","generateImageUrl","url","encodeURIComponent","mainPreviewSrc","originalImage","filesize","height","mimeType","width","originalFilename","Object","entries","map","val","selected"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/PreviewSizes/index.tsx"],"sourcesContent":["'use client'\nimport type { Data, FileSize, SanitizedCollectionConfig, SanitizedUploadConfig } from 'payload'\n\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { FileMeta } from '../FileDetails/FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'preview-sizes'\n\ntype FileInfo = {\n  url: string\n} & FileSize\ntype FilesSizesWithUrl = {\n  [key: string]: FileInfo\n}\n\nconst sortSizes = (sizes: FilesSizesWithUrl, imageSizes: SanitizedUploadConfig['imageSizes']) => {\n  if (!imageSizes || imageSizes.length === 0) {\n    return sizes\n  }\n\n  const orderedSizes: FilesSizesWithUrl = {}\n\n  imageSizes.forEach(({ name }) => {\n    if (sizes[name]) {\n      orderedSizes[name] = sizes[name]\n    }\n  })\n\n  return orderedSizes\n}\n\ntype PreviewSizeCardProps = {\n  active: boolean\n  meta: FileInfo\n  name: string\n  onClick?: () => void\n  previewSrc: string\n}\nconst PreviewSizeCard: React.FC<PreviewSizeCardProps> = ({\n  name,\n  active,\n  meta,\n  onClick,\n  previewSrc,\n}) => {\n  return (\n    <div\n      className={[`${baseClass}__sizeOption`, active && `${baseClass}--selected`]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={typeof onClick === 'function' ? onClick : undefined}\n      onKeyDown={(e) => {\n        if (typeof onClick !== 'function') {\n          return\n        }\n        if (e.key === 'Enter') {\n          onClick()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <div className={`${baseClass}__image`}>\n        <img alt={meta.filename} src={previewSrc} />\n      </div>\n      <div className={`${baseClass}__sizeMeta`}>\n        <div className={`${baseClass}__sizeName`}>{name}</div>\n        <FileMeta {...meta} />\n      </div>\n    </div>\n  )\n}\n\nexport type PreviewSizesProps = {\n  doc: {\n    sizes?: FilesSizesWithUrl\n  } & Data\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const PreviewSizes: React.FC<PreviewSizesProps> = ({ doc, imageCacheTag, uploadConfig }) => {\n  const { imageSizes } = uploadConfig\n  const { sizes } = doc\n\n  const [orderedSizes, setOrderedSizes] = useState<FilesSizesWithUrl>(() =>\n    sortSizes(sizes, imageSizes),\n  )\n  const [selectedSize, setSelectedSize] = useState<null | string>(null)\n\n  const generateImageUrl = (doc) => {\n    if (!doc.filename) {\n      return null\n    }\n    if (doc.url) {\n      return `${doc.url}${imageCacheTag ? `?${encodeURIComponent(imageCacheTag)}` : ''}`\n    }\n  }\n  useEffect(() => {\n    setOrderedSizes(sortSizes(sizes, imageSizes))\n  }, [sizes, imageSizes, imageCacheTag])\n\n  const mainPreviewSrc = selectedSize\n    ? generateImageUrl(doc.sizes[selectedSize])\n    : generateImageUrl(doc)\n\n  const originalImage = useMemo(\n    (): FileInfo => ({\n      filename: doc.filename,\n      filesize: doc.filesize,\n      height: doc.height,\n      mimeType: doc.mimeType,\n      url: doc.url,\n      width: doc.width,\n    }),\n    [doc],\n  )\n  const originalFilename = 'Original'\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__imageWrap`}>\n        <div className={`${baseClass}__meta`}>\n          <div className={`${baseClass}__sizeName`}>{selectedSize || originalFilename}</div>\n          <FileMeta {...(selectedSize ? orderedSizes[selectedSize] : originalImage)} />\n        </div>\n        <img alt={doc.filename} className={`${baseClass}__preview`} src={mainPreviewSrc} />\n      </div>\n      <div className={`${baseClass}__listWrap`}>\n        <div className={`${baseClass}__list`}>\n          <PreviewSizeCard\n            active={!selectedSize}\n            meta={originalImage}\n            name={originalFilename}\n            onClick={() => setSelectedSize(null)}\n            previewSrc={generateImageUrl(doc)}\n          />\n\n          {Object.entries(orderedSizes).map(([key, val]) => {\n            const selected = selectedSize === key\n            const previewSrc = generateImageUrl(val)\n\n            if (previewSrc) {\n              return (\n                <PreviewSizeCard\n                  active={selected}\n                  key={key}\n                  meta={val}\n                  name={key}\n                  onClick={() => setSelectedSize(key)}\n                  previewSrc={previewSrc}\n                />\n              )\n            }\n\n            return null\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useEffect","useMemo","useState","FileMeta","baseClass","sortSizes","sizes","imageSizes","length","orderedSizes","forEach","name","PreviewSizeCard","active","meta","onClick","previewSrc","div","className","filter","Boolean","join","undefined","onKeyDown","e","key","role","tabIndex","img","alt","filename","src","PreviewSizes","doc","imageCacheTag","uploadConfig","setOrderedSizes","selectedSize","setSelectedSize","generateImageUrl","url","encodeURIComponent","mainPreviewSrc","originalImage","filesize","height","mimeType","width","originalFilename","Object","entries","map","val","selected"],"mappings":"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"}