@payloadcms/ui 3.0.0-canary.23fcb9e → 3.0.0-canary.291e44c

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

@@ -1 +1 @@
-{"version":3,"file":"usePreviewURL.js","names":["useCallback","useRef","useState","toast","useConfig","useDocumentInfo","useLocale","useTranslation","usePreviewURL","id","collectionSlug","globalSlug","isLoading","setIsLoading","previewURL","setPreviewURL","code","locale","config","routes","api","serverURL","t","isGeneratingPreviewURL","generatePreviewURL","openPreviewWindow","current","url","res","fetch","ok","Error","newPreviewURL","json","window","open","err","error","label"],"sources":["../../../src/elements/PreviewButton/usePreviewURL.tsx"],"sourcesContent":["'use client'\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 } = useDocumentInfo()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const [previewURL, setPreviewURL] = useState('')\n  const { code: locale } = useLocale()\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) 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"],"mappings":"AAAA;;AACA,SAASA,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;EAAU,CAAE,GAAGN,eAAA;EAE3C,MAAM,CAACO,SAAA,EAAWC,YAAA,CAAa,GAAGX,QAAA,CAAS;EAC3C,MAAM,CAACY,UAAA,EAAYC,aAAA,CAAc,GAAGb,QAAA,CAAS;EAC7C,MAAM;IAAEc,IAAA,EAAMC;EAAM,CAAE,GAAGX,SAAA;EAEzB,MAAM;IACJY,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAG,CAAE;MACfC;IAAS;EACV,CACF,GAAGjB,SAAA;EAEJ,MAAM;IAAEkB;EAAC,CAAE,GAAGf,cAAA;EAEd,MAAMgB,sBAAA,GAAyBtB,MAAA,CAAO;EAEtC;EACA;EACA;EACA,MAAMuB,kBAAA,GAAqBxB,WAAA,CACzB,OAAO;IAAEyB,iBAAA,GAAoB;EAAK,CAAE;IAClC,IAAIF,sBAAA,CAAuBG,OAAO,EAAE;IACpCH,sBAAA,CAAuBG,OAAO,GAAG;IAEjC,IAAI;MACFb,YAAA,CAAa;MAEb,IAAIc,GAAA,GAAM,GAAGN,SAAA,GAAYD,GAAA,EAAK;MAC9B,IAAIV,cAAA,EAAgBiB,GAAA,GAAM,GAAGA,GAAA,IAAOjB,cAAA,IAAkBD,EAAA,UAAY;MAClE,IAAIE,UAAA,EAAYgB,GAAA,GAAM,GAAGA,GAAA,YAAehB,UAAA,UAAoB;MAE5D,MAAMiB,GAAA,GAAM,MAAMC,KAAA,CAAM,GAAGF,GAAA,GAAMV,MAAA,GAAS,WAAWA,MAAA,EAAQ,GAAG,IAAI;MAEpE,IAAI,CAACW,GAAA,CAAIE,EAAE,EAAE,MAAM,IAAIC,KAAA;MACvB,MAAMC,aAAA,GAAgB,MAAMJ,GAAA,CAAIK,IAAI;MACpC,IAAI,CAACD,aAAA,EAAe,MAAM,IAAID,KAAA;MAC9BhB,aAAA,CAAciB,aAAA;MACdnB,YAAA,CAAa;MACbU,sBAAA,CAAuBG,OAAO,GAAG;MACjC,IAAID,iBAAA,EAAmBS,MAAA,CAAOC,IAAI,CAACH,aAAA,EAAe;IACpD,EAAE,OAAOI,GAAA,EAAK;MACZvB,YAAA,CAAa;MACbU,sBAAA,CAAuBG,OAAO,GAAG;MACjCvB,KAAA,CAAMkC,KAAK,CAACf,CAAA,CAAE;IAChB;EACF,GACA,CAACD,SAAA,EAAWD,GAAA,EAAKV,cAAA,EAAgBC,UAAA,EAAYF,EAAA,EAAIQ,MAAA,EAAQK,CAAA,CAAE;EAG7D,OAAO;IACLE,kBAAA;IACAZ,SAAA;IACA0B,KAAA,EAAO1B,SAAA,GAAYU,CAAA,CAAE,qBAAqBA,CAAA,CAAE;IAC5CR;EACF;AACF","ignoreList":[]}
+{"version":3,"file":"usePreviewURL.js","names":["qs","useCallback","useRef","useState","toast","useConfig","useDocumentInfo","useLocale","useTranslation","usePreviewURL","id","collectionSlug","globalSlug","versions","isLoading","setIsLoading","previewURL","setPreviewURL","code","locale","hasVersions","totalDocs","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, versions } = useDocumentInfo()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const [previewURL, setPreviewURL] = useState('')\n  const { code: locale } = useLocale()\n\n  const hasVersions = versions?.totalDocs > 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;EAAQ,CAAE,GAAGP,eAAA;EAErD,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,QAAA,EAAUQ,SAAA,GAAY;EAE1C,MAAM;IACJC,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC;MAAG,CAAE;MACfC;IAAS;EACV,CACF,GAAGpB,SAAA;EAEJ,MAAM;IAAEqB;EAAC,CAAE,GAAGlB,cAAA;EAEd,MAAMmB,sBAAA,GAAyBzB,MAAA,CAAO;EAEtC;EACA;EACA;EACA,MAAM0B,kBAAA,GAAqB3B,WAAA,CACzB,OAAO;IAAE4B,iBAAA,GAAoB;EAAK,CAAE;IAClC,IAAIF,sBAAA,CAAuBG,OAAO,EAAE;MAClC;IACF;IACAH,sBAAA,CAAuBG,OAAO,GAAG;IAEjC,IAAI;MACFf,YAAA,CAAa;MAEb,IAAIgB,GAAA,GAAM,GAAGN,SAAA,GAAYD,GAAA,EAAK;MAC9B,IAAIb,cAAA,EAAgB;QAClBoB,GAAA,GAAM,GAAGA,GAAA,IAAOpB,cAAA,IAAkBD,EAAA,UAAY;MAChD;MACA,IAAIE,UAAA,EAAY;QACdmB,GAAA,GAAM,GAAGA,GAAA,YAAenB,UAAA,UAAoB;MAC9C;MAEA,MAAMoB,MAAA,GAAS;QACbC,KAAA,EAAOb,WAAA,GAAc,SAAS;QAC9BD,MAAA,EAAQA,MAAA,IAAUe;MACpB;MAEA,MAAMC,GAAA,GAAM,MAAMC,KAAA,CAAM,GAAGL,GAAA,IAAO/B,EAAA,CAAGqC,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;MACAtB,aAAA,CAAcuB,aAAA;MACdzB,YAAA,CAAa;MACbY,sBAAA,CAAuBG,OAAO,GAAG;MACjC,IAAID,iBAAA,EAAmB;QACrBa,MAAA,CAAOC,IAAI,CAACH,aAAA,EAAe;MAC7B;IACF,EAAE,OAAOI,GAAA,EAAK;MACZ7B,YAAA,CAAa;MACbY,sBAAA,CAAuBG,OAAO,GAAG;MACjC1B,KAAA,CAAMyC,KAAK,CAACnB,CAAA,CAAE;IAChB;EACF,GACA,CAACD,SAAA,EAAWD,GAAA,EAAKb,cAAA,EAAgBC,UAAA,EAAYQ,WAAA,EAAaD,MAAA,EAAQT,EAAA,EAAIgB,CAAA,CAAE;EAG1E,OAAO;IACL;IACAE,kBAAA;IACAd,SAAA;IACAgC,KAAA,EAAOhC,SAAA,GAAYY,CAAA,CAAE,qBAAqBA,CAAA,CAAE;IAC5CV;EACF;AACF","ignoreList":[]}

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":"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;AAsDD,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,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

@@ -6,7 +6,9 @@ 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;
+  if (!imageSizes || imageSizes.length === 0) {
+    return sizes;
+  }
   const orderedSizes = {};
   imageSizes.forEach(({
     name
@@ -28,8 +30,12 @@ const PreviewSizeCard = ({
     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();
+      if (typeof onClick !== 'function') {
+        return;
+      }
+      if (e.key === 'Enter') {
+        onClick();
+      }
     },
     role: "button",
     tabIndex: 0,
@@ -64,8 +70,12 @@ export const PreviewSizes = ({
   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}` : ''}`;
+    if (!doc_0.filename) {
+      return null;
+    }
+    if (doc_0.url) {
+      return `${doc_0.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`;
+    }
   };
   useEffect(() => {
     setOrderedSizes(sortSizes(sizes, imageSizes));

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

@@ -1 +1 @@
-{"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) 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: {\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) 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"],"mappings":"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","ignoreList":[]}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PublishButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAU1C,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CA2C7D,CAAA;AAED,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAGzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PublishButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG9C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAa1C,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAyI7D,CAAA;AAED,KAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAKzC,CAAA"}