@payloadcms/ui 3.0.0-beta.13 → 3.0.0-beta.131

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"sourcesContent":["'use client'\nimport { useCallback, useRef, useState } from 'react'\nimport { toast } from 'react-toastify'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const usePreviewURL = (): {\n  generatePreviewURL: ({ openPreviewWindow }: { openPreviewWindow?: boolean }) => void\n  isLoading: boolean\n  label: string\n  previewURL: string\n} => {\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const [previewURL, setPreviewURL] = useState('')\n  const { code: locale } = useLocale()\n\n  const {\n    routes: { api },\n    serverURL,\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const isGeneratingPreviewURL = useRef(false)\n\n  // we need to regenerate the preview URL every time the button is clicked\n  // to do this we need to fetch the document data fresh from the API\n  // this will ensure the latest data is used when generating the preview URL\n  const generatePreviewURL = useCallback(\n    async ({ openPreviewWindow = false }) => {\n      if (isGeneratingPreviewURL.current) return\n      isGeneratingPreviewURL.current = true\n\n      try {\n        setIsLoading(true)\n\n        let url = `${serverURL}${api}`\n        if (collectionSlug) url = `${url}/${collectionSlug}/${id}/preview`\n        if (globalSlug) url = `${url}/globals/${globalSlug}/preview`\n\n        const res = await fetch(`${url}${locale ? `?locale=${locale}` : ''}`)\n\n        if (!res.ok) throw new Error()\n        const newPreviewURL = await res.json()\n        if (!newPreviewURL) throw new Error()\n        setPreviewURL(newPreviewURL)\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        if (openPreviewWindow) window.open(newPreviewURL, '_blank')\n      } catch (err) {\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        toast.error(t('error:previewing'))\n      }\n    },\n    [serverURL, api, collectionSlug, globalSlug, id, locale, t],\n  )\n\n  return {\n    generatePreviewURL,\n    isLoading,\n    label: isLoading ? t('general:loading') : t('version:preview'),\n    previewURL,\n  }\n}\n"],"names":["useCallback","useRef","useState","toast","useConfig","useDocumentInfo","useLocale","useTranslation","usePreviewURL","id","collectionSlug","globalSlug","isLoading","setIsLoading","previewURL","setPreviewURL","code","locale","routes","api","serverURL","t","isGeneratingPreviewURL","generatePreviewURL","openPreviewWindow","current","url","res","fetch","ok","Error","newPreviewURL","json","window","open","err","error","label"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AACrD,SAASC,KAAK,QAAQ,iBAAgB;AAEtC,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AAErE,OAAO,MAAMC,gBAAgB;IAM3B,MAAM,EAAEC,EAAE,EAAEC,cAAc,EAAEC,UAAU,EAAE,GAAGN;IAE3C,MAAM,CAACO,WAAWC,aAAa,GAAGX,SAAS;IAC3C,MAAM,CAACY,YAAYC,cAAc,GAAGb,SAAS;IAC7C,MAAM,EAAEc,MAAMC,MAAM,EAAE,GAAGX;IAEzB,MAAM,EACJY,QAAQ,EAAEC,GAAG,EAAE,EACfC,SAAS,EACV,GAAGhB;IAEJ,MAAM,EAAEiB,CAAC,EAAE,GAAGd;IAEd,MAAMe,yBAAyBrB,OAAO;IAEtC,yEAAyE;IACzE,mEAAmE;IACnE,2EAA2E;IAC3E,MAAMsB,qBAAqBvB,YACzB,OAAO,EAAEwB,oBAAoB,KAAK,EAAE;QAClC,IAAIF,uBAAuBG,OAAO,EAAE;QACpCH,uBAAuBG,OAAO,GAAG;QAEjC,IAAI;YACFZ,aAAa;YAEb,IAAIa,MAAM,CAAC,EAAEN,UAAU,EAAED,IAAI,CAAC;YAC9B,IAAIT,gBAAgBgB,MAAM,CAAC,EAAEA,IAAI,CAAC,EAAEhB,eAAe,CAAC,EAAED,GAAG,QAAQ,CAAC;YAClE,IAAIE,YAAYe,MAAM,CAAC,EAAEA,IAAI,SAAS,EAAEf,WAAW,QAAQ,CAAC;YAE5D,MAAMgB,MAAM,MAAMC,MAAM,CAAC,EAAEF,IAAI,EAAET,SAAS,CAAC,QAAQ,EAAEA,OAAO,CAAC,GAAG,GAAG,CAAC;YAEpE,IAAI,CAACU,IAAIE,EAAE,EAAE,MAAM,IAAIC;YACvB,MAAMC,gBAAgB,MAAMJ,IAAIK,IAAI;YACpC,IAAI,CAACD,eAAe,MAAM,IAAID;YAC9Bf,cAAcgB;YACdlB,aAAa;YACbS,uBAAuBG,OAAO,GAAG;YACjC,IAAID,mBAAmBS,OAAOC,IAAI,CAACH,eAAe;QACpD,EAAE,OAAOI,KAAK;YACZtB,aAAa;YACbS,uBAAuBG,OAAO,GAAG;YACjCtB,MAAMiC,KAAK,CAACf,EAAE;QAChB;IACF,GACA;QAACD;QAAWD;QAAKT;QAAgBC;QAAYF;QAAIQ;QAAQI;KAAE;IAG7D,OAAO;QACLE;QACAX;QACAyB,OAAOzB,YAAYS,EAAE,qBAAqBA,EAAE;QAC5CP;IACF;AACF,EAAC"}
+{"version":3,"file":"usePreviewURL.js","names":["qs","useCallback","useRef","useState","toast","useConfig","useDocumentInfo","useLocale","useTranslation","usePreviewURL","id","collectionSlug","globalSlug","versionCount","isLoading","setIsLoading","previewURL","setPreviewURL","code","locale","hasVersions","config","routes","api","serverURL","t","isGeneratingPreviewURL","generatePreviewURL","openPreviewWindow","current","url","params","draft","undefined","res","fetch","stringify","ok","Error","newPreviewURL","json","window","open","err","error","label"],"sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"sourcesContent":["'use client'\nimport * as qs from 'qs-esm'\nimport { useCallback, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const usePreviewURL = (): {\n  generatePreviewURL: ({ openPreviewWindow }: { openPreviewWindow?: boolean }) => void\n  isLoading: boolean\n  label: string\n  previewURL: string\n} => {\n  const { id, collectionSlug, globalSlug, versionCount } = useDocumentInfo()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const [previewURL, setPreviewURL] = useState('')\n  const { code: locale } = useLocale()\n\n  const hasVersions = versionCount > 0\n\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const isGeneratingPreviewURL = useRef(false)\n\n  // we need to regenerate the preview URL every time the button is clicked\n  // to do this we need to fetch the document data fresh from the API\n  // this will ensure the latest data is used when generating the preview URL\n  const generatePreviewURL = useCallback(\n    async ({ openPreviewWindow = false }) => {\n      if (isGeneratingPreviewURL.current) {\n        return\n      }\n      isGeneratingPreviewURL.current = true\n\n      try {\n        setIsLoading(true)\n\n        let url = `${serverURL}${api}`\n        if (collectionSlug) {\n          url = `${url}/${collectionSlug}/${id}/preview`\n        }\n        if (globalSlug) {\n          url = `${url}/globals/${globalSlug}/preview`\n        }\n\n        const params = {\n          draft: hasVersions ? 'true' : 'false',\n          locale: locale || undefined,\n        }\n\n        const res = await fetch(`${url}?${qs.stringify(params)}`)\n\n        if (!res.ok) {\n          throw new Error()\n        }\n        const newPreviewURL = await res.json()\n        if (!newPreviewURL) {\n          throw new Error()\n        }\n        setPreviewURL(newPreviewURL)\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        if (openPreviewWindow) {\n          window.open(newPreviewURL, '_blank')\n        }\n      } catch (err) {\n        setIsLoading(false)\n        isGeneratingPreviewURL.current = false\n        toast.error(t('error:previewing'))\n      }\n    },\n    [serverURL, api, collectionSlug, globalSlug, hasVersions, locale, id, t],\n  )\n\n  return {\n    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n    generatePreviewURL,\n    isLoading,\n    label: isLoading ? t('general:loading') : t('version:preview'),\n    previewURL,\n  }\n}\n"],"mappings":"AAAA;;AACA,YAAYA,EAAA,MAAQ;AACpB,SAASC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAC9C,SAASC,KAAK,QAAQ;AAEtB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,aAAA,GAAgBA,CAAA;EAM3B,MAAM;IAAEC,EAAE;IAAEC,cAAc;IAAEC,UAAU;IAAEC;EAAY,CAAE,GAAGP,eAAA;EAEzD,MAAM,CAACQ,SAAA,EAAWC,YAAA,CAAa,GAAGZ,QAAA,CAAS;EAC3C,MAAM,CAACa,UAAA,EAAYC,aAAA,CAAc,GAAGd,QAAA,CAAS;EAC7C,MAAM;IAAEe,IAAA,EAAMC;EAAM,CAAE,GAAGZ,SAAA;EAEzB,MAAMa,WAAA,GAAcP,YAAA,GAAe;EAEnC,MAAM;IACJQ,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAG,CAAE;MACfC;IAAS;EACV,CACF,GAAGnB,SAAA;EAEJ,MAAM;IAAEoB;EAAC,CAAE,GAAGjB,cAAA;EAEd,MAAMkB,sBAAA,GAAyBxB,MAAA,CAAO;EAEtC;EACA;EACA;EACA,MAAMyB,kBAAA,GAAqB1B,WAAA,CACzB,OAAO;IAAE2B,iBAAA,GAAoB;EAAK,CAAE;IAClC,IAAIF,sBAAA,CAAuBG,OAAO,EAAE;MAClC;IACF;IACAH,sBAAA,CAAuBG,OAAO,GAAG;IAEjC,IAAI;MACFd,YAAA,CAAa;MAEb,IAAIe,GAAA,GAAM,GAAGN,SAAA,GAAYD,GAAA,EAAK;MAC9B,IAAIZ,cAAA,EAAgB;QAClBmB,GAAA,GAAM,GAAGA,GAAA,IAAOnB,cAAA,IAAkBD,EAAA,UAAY;MAChD;MACA,IAAIE,UAAA,EAAY;QACdkB,GAAA,GAAM,GAAGA,GAAA,YAAelB,UAAA,UAAoB;MAC9C;MAEA,MAAMmB,MAAA,GAAS;QACbC,KAAA,EAAOZ,WAAA,GAAc,SAAS;QAC9BD,MAAA,EAAQA,MAAA,IAAUc;MACpB;MAEA,MAAMC,GAAA,GAAM,MAAMC,KAAA,CAAM,GAAGL,GAAA,IAAO9B,EAAA,CAAGoC,SAAS,CAACL,MAAA,GAAS;MAExD,IAAI,CAACG,GAAA,CAAIG,EAAE,EAAE;QACX,MAAM,IAAIC,KAAA;MACZ;MACA,MAAMC,aAAA,GAAgB,MAAML,GAAA,CAAIM,IAAI;MACpC,IAAI,CAACD,aAAA,EAAe;QAClB,MAAM,IAAID,KAAA;MACZ;MACArB,aAAA,CAAcsB,aAAA;MACdxB,YAAA,CAAa;MACbW,sBAAA,CAAuBG,OAAO,GAAG;MACjC,IAAID,iBAAA,EAAmB;QACrBa,MAAA,CAAOC,IAAI,CAACH,aAAA,EAAe;MAC7B;IACF,EAAE,OAAOI,GAAA,EAAK;MACZ5B,YAAA,CAAa;MACbW,sBAAA,CAAuBG,OAAO,GAAG;MACjCzB,KAAA,CAAMwC,KAAK,CAACnB,CAAA,CAAE;IAChB;EACF,GACA,CAACD,SAAA,EAAWD,GAAA,EAAKZ,cAAA,EAAgBC,UAAA,EAAYQ,WAAA,EAAaD,MAAA,EAAQT,EAAA,EAAIe,CAAA,CAAE;EAG1E,OAAO;IACL;IACAE,kBAAA;IACAb,SAAA;IACA+B,KAAA,EAAO/B,SAAA,GAAYW,CAAA,CAAE,qBAAqBA,CAAA,CAAE;IAC5CT;EACF;AACF","ignoreList":[]}

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

@@ -1,16 +1,16 @@
-import type { Data, FileSize, SanitizedCollectionConfig } from 'payload/types';
+import type { Data, FileSize, SanitizedCollectionConfig } from 'payload';
 import React from 'react';
 import './index.scss';
-type FileInfo = FileSize & {
+type FileInfo = {
     url: string;
-};
+} & FileSize;
 type FilesSizesWithUrl = {
     [key: string]: FileInfo;
 };
 export type PreviewSizesProps = {
-    doc: Data & {
+    doc: {
         sizes?: FilesSizesWithUrl;
-    };
+    } & Data;
     imageCacheTag?: string;
     uploadConfig: SanitizedCollectionConfig['upload'];
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewSizes/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,IAAI,EACJ,QAAQ,EACR,yBAAyB,EAE1B,MAAM,eAAe,CAAA;AAEtB,OAAO,KAAuC,MAAM,OAAO,CAAA;AAG3D,OAAO,cAAc,CAAA;AAIrB,KAAK,QAAQ,GAAG,QAAQ,GAAG;IACzB,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAA;CACxB,CAAA;AAsDD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE,IAAI,GAAG;QACV,KAAK,CAAC,EAAE,iBAAiB,CAAA;KAC1B,CAAA;IACD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4EpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PreviewSizes/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB,EAAyB,MAAM,SAAS,CAAA;AAE/F,OAAO,KAAuC,MAAM,OAAO,CAAA;AAG3D,OAAO,cAAc,CAAA;AAIrB,KAAK,QAAQ,GAAG;IACd,GAAG,EAAE,MAAM,CAAA;CACZ,GAAG,QAAQ,CAAA;AACZ,KAAK,iBAAiB,GAAG;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAA;CACxB,CAAA;AA4DD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;KAC1B,GAAG,IAAI,CAAA;IACR,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgFpD,CAAA"}

package/dist/elements/PreviewSizes/index.js

@@ -1,105 +1,138 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-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];
-        }
-    });
-    return orderedSizes;
+const sortSizes = (sizes, imageSizes) => {
+  if (!imageSizes || imageSizes.length === 0) {
+    return sizes;
+  }
+  const orderedSizes = {};
+  imageSizes.forEach(({
+    name
+  }) => {
+    if (sizes[name]) {
+      orderedSizes[name] = sizes[name];
+    }
+  });
+  return orderedSizes;
 };
-const PreviewSizeCard = ({ name, active, meta, onClick, previewSrc })=>{
-    return /*#__PURE__*/ React.createElement("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
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__image`
-    }, /*#__PURE__*/ React.createElement("img", {
+const PreviewSizeCard = ({
+  name,
+  active,
+  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: meta.filename,
         src: previewSrc
-    })), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__sizeMeta`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__sizeName`
-    }, name), /*#__PURE__*/ React.createElement(FileMeta, meta)));
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__sizeMeta`,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__sizeName`,
+        children: name
+      }), /*#__PURE__*/_jsx(FileMeta, {
+        ...meta
+      })]
+    })]
+  });
 };
-export const PreviewSizes = ({ doc, imageCacheTag, uploadConfig })=>{
-    const { imageSizes } = uploadConfig;
-    const { sizes } = doc;
-    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 ? `?${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__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__imageWrap`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__meta`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__sizeName`
-    }, selectedSize || originalFilename), /*#__PURE__*/ React.createElement(FileMeta, selectedSize ? orderedSizes[selectedSize] : originalImage)), /*#__PURE__*/ React.createElement("img", {
+export const PreviewSizes = ({
+  doc,
+  imageCacheTag,
+  uploadConfig
+}) => {
+  const {
+    imageSizes
+  } = uploadConfig;
+  const {
+    sizes
+  } = doc;
+  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 ? `?${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: doc.filename,
         className: `${baseClass}__preview`,
         src: mainPreviewSrc
-    })), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__listWrap`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__list`
-    }, /*#__PURE__*/ React.createElement(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 /*#__PURE__*/ React.createElement(PreviewSizeCard, {
-                active: selected,
-                key: key,
-                meta: val,
-                name: key,
-                onClick: ()=>setSelectedSize(key),
-                previewSrc: previewSrc
-            });
-        }
-        return null;
-    }))));
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__listWrap`,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__list`,
+        children: [/*#__PURE__*/_jsx(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 /*#__PURE__*/_jsx(PreviewSizeCard, {
+              active: selected,
+              meta: val,
+              name: key,
+              onClick: () => setSelectedSize(key),
+              previewSrc: previewSrc
+            }, key);
+          }
+          return null;
+        })]
+      })
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/PreviewSizes/index.tsx"],"sourcesContent":["import type {\n  Data,\n  FileSize,\n  SanitizedCollectionConfig,\n  SanitizedUploadConfig,\n} from 'payload/types'\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 = FileSize & {\n  url: string\n}\ntype FilesSizesWithUrl = {\n  [key: string]: FileInfo\n}\n\nconst sortSizes = (sizes: FilesSizesWithUrl, imageSizes: SanitizedUploadConfig['imageSizes']) => {\n  if (!imageSizes || imageSizes.length === 0) return sizes\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') return\n        if (e.key === 'Enter') onClick()\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: Data & {\n    sizes?: FilesSizesWithUrl\n  }\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) return null\n    if (doc.url) return `${doc.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`\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","mainPreviewSrc","originalImage","filesize","height","mimeType","width","originalFilename","Object","entries","map","val","selected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useEffect","useMemo","useState","FileMeta","baseClass","sortSizes","sizes","imageSizes","length","orderedSizes","forEach","name","PreviewSizeCard","active","meta","onClick","previewSrc","_jsxs","className","filter","Boolean","join","undefined","onKeyDown","e","key","role","tabIndex","_jsx","alt","filename","src","PreviewSizes","doc","imageCacheTag","uploadConfig","setOrderedSizes","selectedSize","setSelectedSize","generateImageUrl","url","mainPreviewSrc","originalImage","filesize","height","mimeType","width","originalFilename","Object","entries","map","val","selected"],"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 ? `?${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"],"mappings":"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","ignoreList":[]}

package/dist/elements/PreviewSizes/index.scss

@@ -1,145 +1,147 @@
 @import '../../scss/styles.scss';
 
-.preview-sizes {
-  margin: base(2) calc(var(--gutter-h) * -1) 0 calc(var(--gutter-h) * -1);
-  border-top: 1px solid var(--theme-elevation-150);
-  max-height: calc(100vh - base(6));
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-
-  &__imageWrap {
-    min-width: 60%;
-    border-right: 1px solid var(--theme-elevation-150);
-  }
+@layer payload-default {
+  .preview-sizes {
+    margin: base(2) calc(var(--gutter-h) * -1) 0 calc(var(--gutter-h) * -1);
+    border-top: 1px solid var(--theme-elevation-150);
+    max-height: calc(100vh - base(6));
+    height: 100%;
+    display: flex;
+    flex-direction: row;
 
-  &__preview {
-    max-height: calc(100% - base(6));
-    padding: base(1.5) base(1.5) base(1.5) var(--gutter-h);
-    object-fit: contain;
-  }
+    &__imageWrap {
+      min-width: 60%;
+      border-right: 1px solid var(--theme-elevation-150);
+    }
 
-  &__meta {
-    border-bottom: 1px solid var(--theme-elevation-150);
-    padding: base(1) var(--gutter-h);
-    display: flex;
-    flex-wrap: wrap;
-    column-gap: base(1);
+    &__preview {
+      max-height: calc(100% - base(6));
+      padding: base(1.5) base(1.5) base(1.5) var(--gutter-h);
+      object-fit: contain;
+    }
 
-    .file-meta {
+    &__meta {
+      border-bottom: 1px solid var(--theme-elevation-150);
+      padding: base(1) var(--gutter-h);
       display: flex;
       flex-wrap: wrap;
       column-gap: base(1);
-      text-wrap: wrap;
-      width: 100%;
-    }
 
-    .file-meta__url {
-      width: 100%;
+      .file-meta {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: base(1);
+        text-wrap: wrap;
+        width: 100%;
+      }
+
+      .file-meta__url {
+        width: 100%;
+      }
     }
-  }
 
-  &__sizeName,
-  .file-meta__size-type {
-    color: var(--theme-elevation-600);
-  }
-
-  &__listWrap {
-    padding-right: var(--gutter-h);
-    overflow-y: scroll;
+    &__sizeName,
+    .file-meta__size-type {
+      color: var(--theme-elevation-600);
+    }
 
-    &::-webkit-scrollbar {
-      width: 0;
+    &__listWrap {
+      padding-right: var(--gutter-h);
+      overflow-y: scroll;
+
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+
+      &::after {
+        content: '';
+        display: block;
+        position: sticky;
+        bottom: 0;
+        left: 0;
+        height: base(4);
+        width: 100%;
+        background: linear-gradient(180deg, transparent 0, var(--theme-bg) 100%);
+        pointer-events: none;
+      }
     }
 
-    &::after {
-      content: '';
-      display: block;
-      position: sticky;
-      bottom: 0;
-      left: 0;
-      height: base(4);
-      width: 100%;
-      background: linear-gradient(180deg, transparent 0, var(--theme-bg) 100%);
-      pointer-events: none;
+    &__list {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.5);
+      margin: 0;
+      padding: base(1.5) 0 base(1.5) base(1.5);
     }
-  }
 
-  &__list {
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    gap: base(0.5);
-    margin: 0;
-    padding: base(1.5) 0 base(1.5) base(1.5);
-  }
+    &__sizeOption {
+      padding: base(0.5);
+      display: flex;
+      gap: base(1);
+      cursor: pointer;
+      transition: background-color 0.2s ease-in-out;
 
-  &__sizeOption {
-    padding: base(0.5);
-    display: flex;
-    gap: base(1);
-    cursor: pointer;
-    transition: background-color 0.2s ease-in-out;
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+    }
 
-    &:hover {
+    &--selected {
       background-color: var(--theme-elevation-100);
     }
-  }
-
-  &--selected {
-    background-color: var(--theme-elevation-100);
-  }
-
-  &__image {
-    display: flex;
-    width: 30%;
-    min-width: 30%;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__sizeMeta {
-    padding: base(0.5) 0;
-  }
-
-  &__sizeName,
-  &__sizeMeta {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  @include mid-break {
-    margin-top: base(1);
-    max-height: calc(100vh - base(4));
-  }
 
-  @include small-break {
-    margin-top: 0;
-    max-height: calc(100vh - base(3.5));
-    flex-direction: column;
-    justify-content: space-between;
-
-    &__imageWrap {
-      height: 60%;
-      border: none;
+    &__image {
+      display: flex;
+      width: 30%;
+      min-width: 30%;
+      align-items: center;
+      justify-content: center;
     }
 
-    &__list,
-    &__preview {
-      padding: calc(var(--gutter-h) * 2) var(--gutter-h);
+    &__sizeMeta {
+      padding: base(0.5) 0;
     }
 
-    &__preview {
-      max-height: calc(100% - base(4));
+    &__sizeName,
+    &__sizeMeta {
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
-    &__sizeOption {
-      padding: base(0.25);
+    @include mid-break {
+      margin-top: base(1);
+      max-height: calc(100vh - base(4));
     }
 
-    &__listWrap {
-      border-top: 1px solid var(--theme-elevation-150);
-      height: 40%;
+    @include small-break {
+      margin-top: 0;
+      max-height: calc(100vh - base(3.5));
+      flex-direction: column;
+      justify-content: space-between;
+
+      &__imageWrap {
+        height: 60%;
+        border: none;
+      }
+
+      &__list,
+      &__preview {
+        padding: calc(var(--gutter-h) * 2) var(--gutter-h);
+      }
+
+      &__preview {
+        max-height: calc(100% - base(4));
+      }
+
+      &__sizeOption {
+        padding: base(0.25);
+      }
+
+      &__listWrap {
+        border-top: 1px solid var(--theme-elevation-150);
+        height: 40%;
+      }
     }
   }
 }

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const PublishButton: React.FC<{
+    label?: string;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PublishButton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAa1C,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAmJtD,CAAA"}