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

package/dist/elements/Thumbnail/createThumbnail.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Create a thumbnail from a File object by drawing it onto an OffscreenCanvas
+ */
+export declare const createThumbnail: (file: File) => Promise<string>;
+//# sourceMappingURL=createThumbnail.d.ts.map

package/dist/elements/Thumbnail/createThumbnail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createThumbnail.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe,SAAU,IAAI,KAAG,OAAO,CAAC,MAAM,CAgD1D,CAAA"}

package/dist/elements/Thumbnail/createThumbnail.js

@@ -0,0 +1,50 @@
+/**
+ * Create a thumbnail from a File object by drawing it onto an OffscreenCanvas
+ */export const createThumbnail = file => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = URL.createObjectURL(file) // Use Object URL directly
+    ;
+    img.onload = () => {
+      const maxDimension = 280;
+      let drawHeight, drawWidth;
+      // Calculate aspect ratio
+      const aspectRatio = img.width / img.height;
+      // Determine dimensions to fit within maxDimension while maintaining aspect ratio
+      if (aspectRatio > 1) {
+        // Image is wider than tall
+        drawWidth = maxDimension;
+        drawHeight = maxDimension / aspectRatio;
+      } else {
+        // Image is taller than wide, or square
+        drawWidth = maxDimension * aspectRatio;
+        drawHeight = maxDimension;
+      }
+      const canvas = new OffscreenCanvas(drawWidth, drawHeight) // Create an OffscreenCanvas
+      ;
+      const ctx = canvas.getContext('2d');
+      // Draw the image onto the OffscreenCanvas with calculated dimensions
+      ctx.drawImage(img, 0, 0, drawWidth, drawHeight);
+      // Convert the OffscreenCanvas to a Blob and free up memory
+      canvas.convertToBlob({
+        type: 'image/jpeg',
+        quality: 0.25
+      }).then(blob => {
+        URL.revokeObjectURL(img.src) // Release the Object URL
+        ;
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result) // Resolve as data URL
+        ;
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+      }).catch(reject);
+    };
+    img.onerror = error => {
+      URL.revokeObjectURL(img.src) // Release Object URL on error
+      ;
+      // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
+      reject(error);
+    };
+  });
+};
+//# sourceMappingURL=createThumbnail.js.map

package/dist/elements/Thumbnail/createThumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createThumbnail.js","names":["createThumbnail","file","Promise","resolve","reject","img","Image","src","URL","createObjectURL","onload","maxDimension","drawHeight","drawWidth","aspectRatio","width","height","canvas","OffscreenCanvas","ctx","getContext","drawImage","convertToBlob","type","quality","then","blob","revokeObjectURL","reader","FileReader","result","onerror","readAsDataURL","catch","error"],"sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"sourcesContent":["/**\n * Create a thumbnail from a File object by drawing it onto an OffscreenCanvas\n */\nexport const createThumbnail = (file: File): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const img = new Image()\n    img.src = URL.createObjectURL(file) // Use Object URL directly\n\n    img.onload = () => {\n      const maxDimension = 280\n      let drawHeight: number, drawWidth: number\n\n      // Calculate aspect ratio\n      const aspectRatio = img.width / img.height\n\n      // Determine dimensions to fit within maxDimension while maintaining aspect ratio\n      if (aspectRatio > 1) {\n        // Image is wider than tall\n        drawWidth = maxDimension\n        drawHeight = maxDimension / aspectRatio\n      } else {\n        // Image is taller than wide, or square\n        drawWidth = maxDimension * aspectRatio\n        drawHeight = maxDimension\n      }\n\n      const canvas = new OffscreenCanvas(drawWidth, drawHeight) // Create an OffscreenCanvas\n      const ctx = canvas.getContext('2d')\n\n      // Draw the image onto the OffscreenCanvas with calculated dimensions\n      ctx.drawImage(img, 0, 0, drawWidth, drawHeight)\n\n      // Convert the OffscreenCanvas to a Blob and free up memory\n      canvas\n        .convertToBlob({ type: 'image/jpeg', quality: 0.25 })\n        .then((blob) => {\n          URL.revokeObjectURL(img.src) // Release the Object URL\n          const reader = new FileReader()\n          reader.onload = () => resolve(reader.result as string) // Resolve as data URL\n          reader.onerror = reject\n          reader.readAsDataURL(blob)\n        })\n        .catch(reject)\n    }\n\n    img.onerror = (error) => {\n      URL.revokeObjectURL(img.src) // Release Object URL on error\n      // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors\n      reject(error)\n    }\n  })\n}\n"],"mappings":"AAAA;;GAGA,OAAO,MAAMA,eAAA,GAAmBC,IAAA;EAC9B,OAAO,IAAIC,OAAA,CAAQ,CAACC,OAAA,EAASC,MAAA;IAC3B,MAAMC,GAAA,GAAM,IAAIC,KAAA;IAChBD,GAAA,CAAIE,GAAG,GAAGC,GAAA,CAAIC,eAAe,CAACR,IAAA,EAAM;IAAA;IAEpCI,GAAA,CAAIK,MAAM,GAAG;MACX,MAAMC,YAAA,GAAe;MACrB,IAAIC,UAAA,EAAoBC,SAAA;MAExB;MACA,MAAMC,WAAA,GAAcT,GAAA,CAAIU,KAAK,GAAGV,GAAA,CAAIW,MAAM;MAE1C;MACA,IAAIF,WAAA,GAAc,GAAG;QACnB;QACAD,SAAA,GAAYF,YAAA;QACZC,UAAA,GAAaD,YAAA,GAAeG,WAAA;MAC9B,OAAO;QACL;QACAD,SAAA,GAAYF,YAAA,GAAeG,WAAA;QAC3BF,UAAA,GAAaD,YAAA;MACf;MAEA,MAAMM,MAAA,GAAS,IAAIC,eAAA,CAAgBL,SAAA,EAAWD,UAAA,EAAY;MAAA;MAC1D,MAAMO,GAAA,GAAMF,MAAA,CAAOG,UAAU,CAAC;MAE9B;MACAD,GAAA,CAAIE,SAAS,CAAChB,GAAA,EAAK,GAAG,GAAGQ,SAAA,EAAWD,UAAA;MAEpC;MACAK,MAAA,CACGK,aAAa,CAAC;QAAEC,IAAA,EAAM;QAAcC,OAAA,EAAS;MAAK,GAClDC,IAAI,CAAEC,IAAA;QACLlB,GAAA,CAAImB,eAAe,CAACtB,GAAA,CAAIE,GAAG,EAAE;QAAA;QAC7B,MAAMqB,MAAA,GAAS,IAAIC,UAAA;QACnBD,MAAA,CAAOlB,MAAM,GAAG,MAAMP,OAAA,CAAQyB,MAAA,CAAOE,MAAM,EAAY;QAAA;QACvDF,MAAA,CAAOG,OAAO,GAAG3B,MAAA;QACjBwB,MAAA,CAAOI,aAAa,CAACN,IAAA;MACvB,GACCO,KAAK,CAAC7B,MAAA;IACX;IAEAC,GAAA,CAAI0B,OAAO,GAAIG,KAAA;MACb1B,GAAA,CAAImB,eAAe,CAACtB,GAAA,CAAIE,GAAG,EAAE;MAAA;MAC7B;MACAH,MAAA,CAAO8B,KAAA;IACT;EACF;AACF","ignoreList":[]}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import './index.scss';
-import type { SanitizedCollectionConfig } from 'payload/types';
+import type { SanitizedCollectionConfig } from 'payload';
 export type ThumbnailProps = {
     className?: string;
     collectionSlug?: string;
@@ -10,11 +10,15 @@ export type ThumbnailProps = {
     size?: 'expand' | 'large' | 'medium' | 'small';
     uploadConfig?: SanitizedCollectionConfig['upload'];
 };
-export declare const useThumbnailContext: () => {
-    className: string;
-    filename: string;
-    size: string;
-    src: string;
-};
 export declare const Thumbnail: React.FC<ThumbnailProps>;
+type ThumbnailComponentProps = {
+    readonly alt?: string;
+    readonly className?: string;
+    readonly filename: string;
+    readonly fileSrc: string;
+    readonly imageCacheTag?: string;
+    readonly size?: 'expand' | 'large' | 'medium' | 'small';
+};
+export declare function ThumbnailComponent(props: ThumbnailComponentProps): React.JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAK9D,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CACnD,CAAA;AASD,eAAO,MAAM,mBAAmB;;;;;CAA2C,CAAA;AAE3E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6B9C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAMxD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmC9C,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACxD,CAAA;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAgChE"}

package/dist/elements/Thumbnail/index.js

@@ -1,47 +1,186 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import './index.scss';
 const baseClass = 'thumbnail';
 import { File } from '../../graphics/File/index.js';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
-const ThumbnailContext = /*#__PURE__*/ React.createContext({
-    className: '',
-    filename: '',
-    size: 'medium',
-    src: ''
-});
-export const useThumbnailContext = ()=>React.useContext(ThumbnailContext);
-export const Thumbnail = (props)=>{
-    const { className = '', doc: { filename } = {}, fileSrc, size } = props;
-    const [fileExists, setFileExists] = React.useState(undefined);
-    const classNames = [
-        baseClass,
-        `${baseClass}--size-${size || 'medium'}`,
-        className
-    ].join(' ');
-    React.useEffect(()=>{
-        if (!fileSrc) {
-            setFileExists(false);
-            return;
-        }
-        const img = new Image();
-        img.src = fileSrc;
-        img.onload = ()=>{
-            setFileExists(true);
-        };
-        img.onerror = ()=>{
-            setFileExists(false);
-        };
-    }, [
-        fileSrc
-    ]);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames
-    }, fileExists === undefined && /*#__PURE__*/ React.createElement(ShimmerEffect, {
-        height: "100%"
-    }), fileExists && /*#__PURE__*/ React.createElement("img", {
+export const Thumbnail = props => {
+  const $ = _c(19);
+  const {
+    className: t0,
+    doc: t1,
+    fileSrc,
+    imageCacheTag,
+    size
+  } = props;
+  const className = t0 === undefined ? "" : t0;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = t1 === undefined ? {} : t1;
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const {
+    filename
+  } = t2;
+  const [fileExists, setFileExists] = React.useState(undefined);
+  const t3 = `${baseClass}--size-${size || "medium"}`;
+  let t4;
+  if ($[2] !== t3 || $[3] !== className) {
+    t4 = [baseClass, t3, className];
+    $[2] = t3;
+    $[3] = className;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const classNames = t4.join(" ");
+  let t5;
+  let t6;
+  if ($[5] !== fileSrc) {
+    t5 = () => {
+      if (!fileSrc) {
+        setFileExists(false);
+        return;
+      }
+      const img = new Image();
+      img.src = fileSrc;
+      img.onload = () => {
+        setFileExists(true);
+      };
+      img.onerror = () => {
+        setFileExists(false);
+      };
+    };
+    t6 = [fileSrc];
+    $[5] = fileSrc;
+    $[6] = t5;
+    $[7] = t6;
+  } else {
+    t5 = $[6];
+    t6 = $[7];
+  }
+  React.useEffect(t5, t6);
+  let t7;
+  if ($[8] !== fileExists || $[9] !== imageCacheTag || $[10] !== fileSrc || $[11] !== filename || $[12] !== classNames) {
+    let t8;
+    if ($[14] !== fileExists || $[15] !== imageCacheTag || $[16] !== fileSrc || $[17] !== filename) {
+      t8 = fileExists && _jsx("img", {
         alt: filename,
-        src: fileSrc
-    }), fileExists === false && /*#__PURE__*/ React.createElement(File, null));
+        src: `${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ""}`
+      });
+      $[14] = fileExists;
+      $[15] = imageCacheTag;
+      $[16] = fileSrc;
+      $[17] = filename;
+      $[18] = t8;
+    } else {
+      t8 = $[18];
+    }
+    t7 = _jsxs("div", {
+      className: classNames,
+      children: [fileExists === undefined && _jsx(ShimmerEffect, {
+        height: "100%"
+      }), t8, fileExists === false && _jsx(File, {})]
+    });
+    $[8] = fileExists;
+    $[9] = imageCacheTag;
+    $[10] = fileSrc;
+    $[11] = filename;
+    $[12] = classNames;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  return t7;
 };
-
+export function ThumbnailComponent(props) {
+  const $ = _c(19);
+  const {
+    alt,
+    className: t0,
+    filename,
+    fileSrc,
+    imageCacheTag,
+    size
+  } = props;
+  const className = t0 === undefined ? "" : t0;
+  const [fileExists, setFileExists] = React.useState(undefined);
+  const t1 = `${baseClass}--size-${size || "medium"}`;
+  let t2;
+  if ($[0] !== t1 || $[1] !== className) {
+    t2 = [baseClass, t1, className];
+    $[0] = t1;
+    $[1] = className;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const classNames = t2.join(" ");
+  let t3;
+  let t4;
+  if ($[3] !== fileSrc) {
+    t3 = () => {
+      if (!fileSrc) {
+        setFileExists(false);
+        return;
+      }
+      const img = new Image();
+      img.src = fileSrc;
+      img.onload = () => {
+        setFileExists(true);
+      };
+      img.onerror = () => {
+        setFileExists(false);
+      };
+    };
+    t4 = [fileSrc];
+    $[3] = fileSrc;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t3 = $[4];
+    t4 = $[5];
+  }
+  React.useEffect(t3, t4);
+  let t5;
+  if ($[6] !== fileExists || $[7] !== alt || $[8] !== filename || $[9] !== imageCacheTag || $[10] !== fileSrc || $[11] !== classNames) {
+    let t6;
+    if ($[13] !== fileExists || $[14] !== alt || $[15] !== filename || $[16] !== imageCacheTag || $[17] !== fileSrc) {
+      t6 = fileExists && _jsx("img", {
+        alt: alt || filename,
+        src: `${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ""}`
+      });
+      $[13] = fileExists;
+      $[14] = alt;
+      $[15] = filename;
+      $[16] = imageCacheTag;
+      $[17] = fileSrc;
+      $[18] = t6;
+    } else {
+      t6 = $[18];
+    }
+    t5 = _jsxs("div", {
+      className: classNames,
+      children: [fileExists === undefined && _jsx(ShimmerEffect, {
+        height: "100%"
+      }), t6, fileExists === false && _jsx(File, {})]
+    });
+    $[6] = fileExists;
+    $[7] = alt;
+    $[8] = filename;
+    $[9] = imageCacheTag;
+    $[10] = fileSrc;
+    $[11] = classNames;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
+}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload/types'\n\nimport { File } from '../../graphics/File/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n  className?: string\n  collectionSlug?: string\n  doc?: Record<string, unknown>\n  fileSrc?: string\n  imageCacheTag?: string\n  size?: 'expand' | 'large' | 'medium' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n}\n\nconst ThumbnailContext = React.createContext({\n  className: '',\n  filename: '',\n  size: 'medium',\n  src: '',\n})\n\nexport const useThumbnailContext = () => React.useContext(ThumbnailContext)\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const { className = '', doc: { filename } = {}, fileSrc, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      setFileExists(false)\n      return\n    }\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && <img alt={filename as string} src={fileSrc} />}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"names":["React","baseClass","File","ShimmerEffect","ThumbnailContext","createContext","className","filename","size","src","useThumbnailContext","useContext","Thumbnail","props","doc","fileSrc","fileExists","setFileExists","useState","undefined","classNames","join","useEffect","img","Image","onload","onerror","div","height","alt"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAIzB,MAAMC,YAAY;AAIlB,SAASC,IAAI,QAAQ,+BAA8B;AACnD,SAASC,aAAa,QAAQ,4BAA2B;AAYzD,MAAMC,iCAAmBJ,MAAMK,aAAa,CAAC;IAC3CC,WAAW;IACXC,UAAU;IACVC,MAAM;IACNC,KAAK;AACP;AAEA,OAAO,MAAMC,sBAAsB,IAAMV,MAAMW,UAAU,CAACP,kBAAiB;AAE3E,OAAO,MAAMQ,YAAsC,CAACC;IAClD,MAAM,EAAEP,YAAY,EAAE,EAAEQ,KAAK,EAAEP,QAAQ,EAAE,GAAG,CAAC,CAAC,EAAEQ,OAAO,EAAEP,IAAI,EAAE,GAAGK;IAClE,MAAM,CAACG,YAAYC,cAAc,GAAGjB,MAAMkB,QAAQ,CAACC;IAEnD,MAAMC,aAAa;QAACnB;QAAW,CAAC,EAAEA,UAAU,OAAO,EAAEO,QAAQ,SAAS,CAAC;QAAEF;KAAU,CAACe,IAAI,CAAC;IAEzFrB,MAAMsB,SAAS,CAAC;QACd,IAAI,CAACP,SAAS;YACZE,cAAc;YACd;QACF;QAEA,MAAMM,MAAM,IAAIC;QAChBD,IAAId,GAAG,GAAGM;QACVQ,IAAIE,MAAM,GAAG;YACXR,cAAc;QAChB;QACAM,IAAIG,OAAO,GAAG;YACZT,cAAc;QAChB;IACF,GAAG;QAACF;KAAQ;IAEZ,qBACE,oBAACY;QAAIrB,WAAWc;OACbJ,eAAeG,2BAAa,oBAAChB;QAAcyB,QAAO;QAClDZ,4BAAc,oBAACO;QAAIM,KAAKtB;QAAoBE,KAAKM;QACjDC,eAAe,uBAAS,oBAACd;AAGhC,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","baseClass","File","ShimmerEffect","Thumbnail","props","$","className","t0","doc","t1","fileSrc","imageCacheTag","size","undefined","t2","filename","fileExists","setFileExists","useState","t3","t4","classNames","join","t5","t6","img","Image","src","onload","onerror","useEffect","t7","t8","_jsx","alt","_jsxs","children","height","ThumbnailComponent"],"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { useIntersect } from '../../hooks/useIntersect.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n  className?: string\n  collectionSlug?: string\n  doc?: Record<string, unknown>\n  fileSrc?: string\n  imageCacheTag?: string\n  size?: 'expand' | 'large' | 'medium' | 'small'\n  uploadConfig?: SanitizedCollectionConfig['upload']\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n  const { className = '', doc: { filename } = {}, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n      setFileExists(false)\n      return\n    }\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && (\n        <img\n          alt={filename as string}\n          src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`}\n        />\n      )}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n\ntype ThumbnailComponentProps = {\n  readonly alt?: string\n  readonly className?: string\n  readonly filename: string\n  readonly fileSrc: string\n  readonly imageCacheTag?: string\n  readonly size?: 'expand' | 'large' | 'medium' | 'small'\n}\nexport function ThumbnailComponent(props: ThumbnailComponentProps) {\n  const { alt, className = '', filename, fileSrc, imageCacheTag, size } = props\n  const [fileExists, setFileExists] = React.useState(undefined)\n\n  const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n  React.useEffect(() => {\n    if (!fileSrc) {\n      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect\n      setFileExists(false)\n      return\n    }\n\n    const img = new Image()\n    img.src = fileSrc\n    img.onload = () => {\n      setFileExists(true)\n    }\n    img.onerror = () => {\n      setFileExists(false)\n    }\n  }, [fileSrc])\n\n  return (\n    <div className={classNames}>\n      {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n      {fileExists && (\n        <img alt={alt || filename} src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`} />\n      )}\n      {fileExists === false && <File />}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Thumbnail/index.scss

@@ -1,49 +1,51 @@
 @import '../../scss/styles.scss';
 
-.thumbnail {
-  min-height: 100%;
-  flex-shrink: 0;
-  align-self: stretch;
-  overflow: hidden;
-
-  img,
-  svg {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  &--size-expand {
-    max-height: 100%;
-    width: 100%;
-    padding-top: 100%;
-    position: relative;
+@layer payload-default {
+  .thumbnail {
+    min-height: 100%;
+    flex-shrink: 0;
+    align-self: stretch;
+    overflow: hidden;
 
     img,
     svg {
-      position: absolute;
-      top: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
     }
-  }
 
-  &--size-large {
-    max-height: base(9);
-    width: base(9);
-  }
+    &--size-expand {
+      max-height: 100%;
+      width: 100%;
+      padding-top: 100%;
+      position: relative;
+
+      img,
+      svg {
+        position: absolute;
+        top: 0;
+      }
+    }
 
-  &--size-medium {
-    max-height: base(7);
-    width: base(7);
-  }
+    &--size-large {
+      max-height: base(9);
+      width: base(9);
+    }
 
-  &--size-small {
-    max-height: base(5);
-    width: base(5);
-  }
+    &--size-medium {
+      max-height: base(7);
+      width: base(7);
+    }
 
-  @include large-break {
-    .thumbnail {
+    &--size-small {
+      max-height: base(5);
       width: base(5);
     }
+
+    @include large-break {
+      .thumbnail {
+        width: base(5);
+      }
+    }
   }
 }

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

@@ -1,13 +1,13 @@
-import type { SanitizedCollectionConfig, TypeWithID } from 'payload/types';
+import type { ClientCollectionConfig, TypeWithID } from 'payload';
 import React from 'react';
 import './index.scss';
 export type ThumbnailCardProps = {
     alignLabel?: 'center' | 'left';
     className?: string;
-    collection?: SanitizedCollectionConfig;
-    doc?: TypeWithID & {
+    collection?: ClientCollectionConfig;
+    doc?: {
         filename?: string;
-    };
+    } & TypeWithID;
     label?: string;
     onClick?: () => void;
     onKeyDown?: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ThumbnailCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1E,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,yBAAyB,CAAA;IACtC,GAAG,CAAC,EAAE,UAAU,GAAG;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0CtD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ThumbnailCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,GAAG,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,UAAU,CAAA;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0CtD,CAAA"}

package/dist/elements/ThumbnailCard/index.js

@@ -1,38 +1,89 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { formatDocTitle } from '../../utilities/formatDocTitle.js';
+import './index.scss';
 const baseClass = 'thumbnail-card';
-export const ThumbnailCard = (props)=>{
-    const { alignLabel, className, collection, doc, label: labelFromProps, onClick, thumbnail } = props;
-    const config = useConfig();
-    const { i18n } = useTranslation();
-    const classes = [
-        baseClass,
-        className,
-        typeof onClick === 'function' && `${baseClass}--has-on-click`,
-        alignLabel && `${baseClass}--align-label-${alignLabel}`
-    ].filter(Boolean).join(' ');
-    let title = labelFromProps;
-    if (!title) {
-        title = formatDocTitle({
-            collectionConfig: collection,
-            data: doc,
-            dateFormat: config.admin.dateFormat,
-            fallback: doc?.filename,
-            i18n
-        });
+export const ThumbnailCard = props => {
+  const $ = _c(15);
+  const {
+    alignLabel,
+    className,
+    collection,
+    doc,
+    label: labelFromProps,
+    onClick,
+    thumbnail
+  } = props;
+  const {
+    config
+  } = useConfig();
+  const {
+    i18n
+  } = useTranslation();
+  const t0 = typeof onClick === "function" && `${baseClass}--has-on-click`;
+  const t1 = alignLabel && `${baseClass}--align-label-${alignLabel}`;
+  let t2;
+  if ($[0] !== className || $[1] !== t0 || $[2] !== t1) {
+    t2 = [baseClass, className, t0, t1].filter(Boolean);
+    $[0] = className;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const classes = t2.join(" ");
+  let title = labelFromProps;
+  if (!title) {
+    const t3 = doc?.filename;
+    let t4;
+    if ($[4] !== collection || $[5] !== doc || $[6] !== config.admin.dateFormat || $[7] !== t3 || $[8] !== i18n) {
+      t4 = formatDocTitle({
+        collectionConfig: collection,
+        data: doc,
+        dateFormat: config.admin.dateFormat,
+        fallback: t3,
+        i18n
+      });
+      $[4] = collection;
+      $[5] = doc;
+      $[6] = config.admin.dateFormat;
+      $[7] = t3;
+      $[8] = i18n;
+      $[9] = t4;
+    } else {
+      t4 = $[9];
     }
-    return /*#__PURE__*/ React.createElement("button", {
-        className: classes,
-        onClick: onClick,
-        title: title,
-        type: "button"
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__thumbnail`
-    }, thumbnail), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__label`
-    }, title));
+    title = t4;
+  }
+  let t3;
+  if ($[10] !== thumbnail || $[11] !== title || $[12] !== classes || $[13] !== onClick) {
+    t3 = _jsxs("button", {
+      className: classes,
+      onClick,
+      title,
+      type: "button",
+      children: [_jsx("div", {
+        className: `${baseClass}__thumbnail`,
+        children: thumbnail
+      }), _jsx("div", {
+        className: `${baseClass}__label`,
+        children: title
+      })]
+    });
+    $[10] = thumbnail;
+    $[11] = title;
+    $[12] = classes;
+    $[13] = onClick;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  return t3;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["import type { SanitizedCollectionConfig, TypeWithID } from 'payload/types'\n\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../utilities/formatDocTitle.js'\nimport './index.scss'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: SanitizedCollectionConfig\n  doc?: TypeWithID & { filename?: string }\n  label?: string\n  onClick?: () => void\n  onKeyDown?: () => void\n  thumbnail: React.ReactNode\n}\n\nconst baseClass = 'thumbnail-card'\n\nexport const ThumbnailCard: React.FC<ThumbnailCardProps> = (props) => {\n  const {\n    alignLabel,\n    className,\n    collection,\n    doc,\n    label: labelFromProps,\n    onClick,\n    thumbnail,\n  } = props\n\n  const config = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    typeof onClick === 'function' && `${baseClass}--has-on-click`,\n    alignLabel && `${baseClass}--align-label-${alignLabel}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let title = labelFromProps\n\n  if (!title) {\n    title = formatDocTitle({\n      collectionConfig: collection,\n      data: doc,\n      dateFormat: config.admin.dateFormat,\n      fallback: doc?.filename,\n      i18n,\n    })\n  }\n\n  return (\n    <button className={classes} onClick={onClick} title={title} type=\"button\">\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"names":["React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","alignLabel","className","collection","doc","label","labelFromProps","onClick","thumbnail","config","i18n","classes","filter","Boolean","join","title","collectionConfig","data","dateFormat","admin","fallback","filename","button","type","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,oCAAmC;AAclE,MAAMC,YAAY;AAElB,OAAO,MAAMC,gBAA8C,CAACC;IAC1D,MAAM,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,GAAG,EACHC,OAAOC,cAAc,EACrBC,OAAO,EACPC,SAAS,EACV,GAAGR;IAEJ,MAAMS,SAASd;IAEf,MAAM,EAAEe,IAAI,EAAE,GAAGd;IAEjB,MAAMe,UAAU;QACdb;QACAI;QACA,OAAOK,YAAY,cAAc,CAAC,EAAET,UAAU,cAAc,CAAC;QAC7DG,cAAc,CAAC,EAAEH,UAAU,cAAc,EAAEG,WAAW,CAAC;KACxD,CACEW,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIC,QAAQT;IAEZ,IAAI,CAACS,OAAO;QACVA,QAAQlB,eAAe;YACrBmB,kBAAkBb;YAClBc,MAAMb;YACNc,YAAYT,OAAOU,KAAK,CAACD,UAAU;YACnCE,UAAUhB,KAAKiB;YACfX;QACF;IACF;IAEA,qBACE,oBAACY;QAAOpB,WAAWS;QAASJ,SAASA;QAASQ,OAAOA;QAAOQ,MAAK;qBAC/D,oBAACC;QAAItB,WAAW,CAAC,EAAEJ,UAAU,WAAW,CAAC;OAAGU,0BAC5C,oBAACgB;QAAItB,WAAW,CAAC,EAAEJ,UAAU,OAAO,CAAC;OAAGiB;AAG9C,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useConfig","useTranslation","formatDocTitle","baseClass","ThumbnailCard","props","$","alignLabel","className","collection","doc","label","labelFromProps","onClick","thumbnail","config","i18n","t0","t1","t2","filter","Boolean","classes","join","title","t3","filename","t4","admin","dateFormat","collectionConfig","data","fallback","_jsxs","type","children","_jsx"],"sources":["../../../src/elements/ThumbnailCard/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, TypeWithID } from 'payload'\n\nimport React from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatDocTitle } from '../../utilities/formatDocTitle.js'\nimport './index.scss'\n\nexport type ThumbnailCardProps = {\n  alignLabel?: 'center' | 'left'\n  className?: string\n  collection?: ClientCollectionConfig\n  doc?: { filename?: string } & TypeWithID\n  label?: string\n  onClick?: () => void\n  onKeyDown?: () => void\n  thumbnail: React.ReactNode\n}\n\nconst baseClass = 'thumbnail-card'\n\nexport const ThumbnailCard: React.FC<ThumbnailCardProps> = (props) => {\n  const {\n    alignLabel,\n    className,\n    collection,\n    doc,\n    label: labelFromProps,\n    onClick,\n    thumbnail,\n  } = props\n\n  const { config } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  const classes = [\n    baseClass,\n    className,\n    typeof onClick === 'function' && `${baseClass}--has-on-click`,\n    alignLabel && `${baseClass}--align-label-${alignLabel}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let title = labelFromProps\n\n  if (!title) {\n    title = formatDocTitle({\n      collectionConfig: collection,\n      data: doc,\n      dateFormat: config.admin.dateFormat,\n      fallback: doc?.filename,\n      i18n,\n    })\n  }\n\n  return (\n    <button className={classes} onClick={onClick} title={title} type=\"button\">\n      <div className={`${baseClass}__thumbnail`}>{thumbnail}</div>\n      <div className={`${baseClass}__label`}>{title}</div>\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAaP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACzD;IAAAS,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,KAAA,EAAAC,cAAA;IAAAC,OAAA;IAAAC;EAAA,IAQIT,KAAA;EAEJ;IAAAU;EAAA,IAAmBf,SAAA;EAEnB;IAAAgB;EAAA,IAAiBf,cAAA;EAKf,MAAAgB,EAAA,UAAOJ,OAAA,KAAY,cAAc,GAAAV,SAAA,gBAA4B;EAC7D,MAAAe,EAAA,GAAAX,UAAA,IAAc,GAAAJ,SAAA,iBAA6BI,UAAA,EAAY;EAAA,IAAAY,EAAA;EAAA,IAAAb,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAY,EAAA;IAJzCC,EAAA,IAAAhB,SAAA,EAEdK,SAAA,EACAS,EAA6D,EAC7DC,EAAuD,EAAAE,MAAA,CAAAC,OAE/C;IAAAf,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAW,EAAA;IAAAX,CAAA,MAAAY,EAAA;IAAAZ,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EANV,MAAAgB,OAAA,GAAgBH,EAMN,CAAAI,IAAA,CACF;EAER,IAAAC,KAAA,GAAYZ,cAAA;EAAA,KAEPY,KAAA;IAKS,MAAAC,EAAA,GAAAf,GAAA,EAAAgB,QAAA;IAAK,IAAAC,EAAA;IAAA,IAAArB,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAI,GAAA,IAAAJ,CAAA,QAAAS,MAAA,CAAAa,KAAA,CAAAC,UAAA,IAAAvB,CAAA,QAAAmB,EAAA,IAAAnB,CAAA,QAAAU,IAAA;MAJTW,EAAA,GAAAzB,cAAA;QAAA4B,gBAAA,EACYrB,UAAA;QAAAsB,IAAA,EACZrB,GAAA;QAAAmB,UAAA,EACMd,MAAA,CAAAa,KAAA,CAAAC,UAAA;QAAAG,QAAA,EACFP,EAAK;QAAAT;MAAA,CAEjB;MAAAV,CAAA,MAAAG,UAAA;MAAAH,CAAA,MAAAI,GAAA;MAAAJ,CAAA,MAAAS,MAAA,CAAAa,KAAA,CAAAC,UAAA;MAAAvB,CAAA,MAAAmB,EAAA;MAAAnB,CAAA,MAAAU,IAAA;MAAAV,CAAA,MAAAqB,EAAA;IAAA;MAAAA,EAAA,GAAArB,CAAA;IAAA;IANAkB,KAAA,CAAAA,CAAA,CAAQA,EAMR;EANA;EAAA,IAAAC,EAAA;EAAA,IAAAnB,CAAA,SAAAQ,SAAA,IAAAR,CAAA,SAAAkB,KAAA,IAAAlB,CAAA,SAAAgB,OAAA,IAAAhB,CAAA,SAAAO,OAAA;IAUAY,EAAA,GAAAQ,KAAA,CAAC;MAAAzB,SAAA,EAAkBc,OAAA;MAAAT,OAAA;MAAAW,KAAA;MAAAU,IAAA,EAA8C;MAAAC,QAAA,GAC/DC,IAAA,CAAC;QAAA5B,SAAA,EAAe,GAAAL,SAAA,aAAyB;QAAAgC,QAAA,EAAGrB;MAAA,C,GAC5CsB,IAAA,CAAC;QAAA5B,SAAA,EAAe,GAAAL,SAAA,SAAqB;QAAAgC,QAAA,EAAGX;MAAA,C;;;;;;;;;;SAF1CC,E;CAKJ","ignoreList":[]}